@edusogno/ui

🎓 Welcome to Edusogno Academy UI! 🚀

The library contains components for the platform.

• 👨‍🏫 Tutor
• 📚 Academy
• 🕹️ Simulator

Our components follow the cutting-edge Compound Component Design Pattern, with a sprinkle of magic in the form of `inputs` and `composites` that defy traditional decoupling!

✨ Psst! This isn't your ordinary documentation. Dive into the enchanted Storybook! ✨
📖 View Docs

🐞 Report Bug 🚀 Request Feature

📚 Table of Contents

1. 🤔 Why
   • Built With
2. 🎨 Styleguide
3. 🚀 Getting Started
   • Prerequisites
   • Installation
   • Folder Structure
4. 🗺️ Roadmap
5. 🤝 Contributing
6. 📅 Changelog
7. 📜 License

🚀 Why

• The component designs defy the norms of Material UI, forging a new path in UI magic.
• Reusability is our secret potion for all developed components.
• Enhancing performance with components that dance with alternative CSS-IN-JS libraries and the rhythm of Tailwind!

(Back to Top)

Built With

Edusogno Library embraces the power of:

• 
• 
• 
• 
• 
• 
• 
• 

(Back to Top)

The library is like a wizard's spellbook, with TypeScript at its core and casting enchantments with:

• 🎨 Tailwind CSS predominantly, dancing with Stitches for CSS-IN-JSS.
• 🧙‍♂️ Radix UI providing magical headless UI components.
• 🌈 Shadcn enabling the creation of magical components.

🚀 Getting Started

The library unfolds its chapters through subpackages under the mystical namespace @edusogno:

• composites - Home to composite components like magical popups and more!
• primitives - A treasure trove of basic components, the essence of UI magic in buttons!
• inputs - A realm of common input components, each with its unique spell.
• layouts - The sacred place containing common layout components, designed for magical arrangements.
• lib - A mysterious package containing common functions, the secret scrolls of the library.

Prerequisites

This library requires brave adventurers to have the following prerequisites:

• 🌟 Node 18+
• 📦 NPM
• An IDE (e.g., Webstorm or VS Code) is recommended, as every great adventure needs a trusty companion!
• 🚀 Vite 4.2+

This project uses NPM as its package manager, the elixir of package management. It comes bundled with Node.js. To install the latest version of Node.js, visit the Node.js website.

Beware! Do not use yarn or any other package manager to install packages. Use npm instead. This is because npm uses a package-lock.json file to lock down the versions of the packages, ensuring harmony in the magical versions.

(Back to Top)

Installation

1. First run

    npm install @edusogno/ui

2. Add this line to your imports in main.tsx or App.tsx

    import "@edusogno/ui/css";

3. Update your tailwind configuration file tailwind.config.js as follows

       content: [
        "./node_modules/@edusogno/**/**/**/*.{ts,js,jsx,tsx,mdx}",
    ],
    presets: [require("@edusogno/ui/presets.js")],
   

4. Next install any of the subpackages e.g

     npm install @edusogno/primitives

(back to top)

Folder Structure

The folder is structured as follows:

edusogo-ui
├── APPLICATION_STRUCTURE.md
├── assets
│   └── storybook-icon.svg
├── CHANGELOGS.md
├── CONTRIBUTION.md
├── index.css
├── package.json
├── package-lock.json
├── packages
│   ├── composites
│   │   ├── lib
│   │   │   ├── booking-date.tsx
│   │   │   ├── calendar.tsx
│   │   │   ├── hours.tsx
│   │   │   ├── index.ts
│   │   │   ├── popup-header.tsx
│   │   │   ├── popup.tsx
│   │   │   └── video.tsx
│   │   ├── package.json
│   │   ├── stories
│   │   │   ├── booking-date.stories.ts
│   │   │   ├── calendar.stories.ts
│   │   │   ├── hours.stories.ts
│   │   │   ├── popup.stories.ts
│   │   │   └── video-player.stories.ts
│   │   ├── tsconfig.json
│   │   └── tsup.config.ts
│   ├── graphics
│   │   ├── assets
│   │   │   ├── bgHeaderLg.png
│   │   │   └── bgHeaderSmall.png
│   │   ├── lib
│   │   │   ├── ca-black-logo.tsx
│   │   │   ├── ca-white-logo.tsx
│   │   │   ├── icons.tsx
│   │   │   └── index.ts
│   │   ├── package.json
│   │   ├── tsconfig.json
│   │   └── tsup.config.ts
│   ├── index.ts
│   ├── inputs
│   │   ├── lib
│   │   │   ├── address-input.tsx
│   │   │   ├── date-picker.tsx
│   │   │   ├── file-upload.tsx
│   │   │   ├── index.ts
│   │   │   ├── outlined-input.tsx
│   │   │   ├── outlined-password-input.tsx
│   │   │   ├── outlined-select.tsx
│   │   │   ├── outlined-text-area.tsx
│   │   │   ├── outline-phone-input.tsx
│   │   │   ├── underlined-input.tsx
│   │   │   └── underlined-select.tsx
│   │   ├── package.json
│   │   ├── stories
│   │   │   ├── address.stories.ts
│   │   │   ├── date-picker.stories.ts
│   │   │   └── phone.stories.ts
│   │   ├── tsconfig.json
│   │   └── tsup.config.ts
│   ├── layouts
│   │   ├── assets
│   │   │   ├── bgHeaderLg.png
│   │   │   └── bgHeaderSmall.png
│   │   ├── lib
│   │   │   ├── auth-content.tsx
│   │   │   ├── auth-layout.tsx
│   │   │   ├── auth-page-footer.tsx
│   │   │   ├── auth-page-heading.tsx
│   │   │   ├── content-dashboard.tsx
│   │   │   ├── dashboard.tsx
│   │   │   ├── global.d.ts
│   │   │   ├── index.ts
│   │   │   ├── page-footer.tsx
│   │   │   ├── page-heading.tsx
│   │   │   └── side-bar.tsx
│   │   ├── package.json
│   │   ├── stories
│   │   │   └── auth-layout.stories.ts
│   │   ├── tsconfig.json
│   │   └── tsup.config.ts
│   ├── lib
│   │   ├── lib
│   │   │   ├── motion
│   │   │   │   └── fade-in-bottom.ts
│   │   │   ├── stitches.ts
│   │   │   └── utils.ts
│   │   ├── package.json
│   │   ├── tsconfig.json
│   │   └── tsup.config.ts
│   ├── playground.stories.ts
│   ├── playground.tsx
│   └── primitives
│       ├── lib
│       │   ├── accordion.tsx
│       │   ├── box.tsx
│       │   ├── button.tsx
│       │   ├── checkbox.tsx
│       │   ├── command.tsx
│       │   ├── dialog.tsx
│       │   ├── dropdown-menu.tsx
│       │   ├── hover-card.tsx
│       │   ├── index.ts
│       │   ├── input.tsx
│       │   ├── loading-button.tsx
│       │   ├── popover.tsx
│       │   ├── progress.tsx
│       │   ├── scroll-area.tsx
│       │   ├── select.tsx
│       │   ├── spinner.tsx
│       │   ├── stitches.ts
│       │   ├── tabs.tsx
│       │   ├── textarea.tsx
│       │   ├── toast.tsx
│       │   ├── toggle-group.tsx
│       │   ├── toggle.tsx
│       │   └── utils.ts
│       ├── package.json
│       ├── README.md
│       ├── stories
│       │   └── button.stories.ts
│       ├── tsconfig.json
│       └── tsup.config.ts
├── postcss.config.mjs
├── README.md
├── tailwind.config.js
├── tsconfig.json
├── tsup.config.ts
├── turbo.json
└── vite.config.js

• The library is currently in its early development stages, and as a result, the components within it are subject to frequent changes. Therefore, most modifications and updates will be released in the form of patches.

(Back to Top)

Contribute

Review the Contribution guide to understand how you can actively participate and contribute to the library's development.

(Back to Top)

Roadmap

• [x] Components

  • [x] Inputs
    • [x] Outlined inputs
      • [x] Input
      • [x] Phone Input
      • [x] AddressInput
      • [x] DatePicker
    • [ ] Underlined
  • [x] Composites
    • [x] Video Player
    • [x] Calendar
    • [x] Hour Selector
    • [x] Popup
  • [x] Primitives
    • [x] Buttons
    • [x] Input
    • [x] Accordion
    • [x] Dialogs
    • [x] Popovers
    • [x] Toast
    • [x] Select

• [x] Stories(Documentation)

  • [x] Docs (In Progress)
    • [ ] Contribution Docs
    • [ ] Components Docs (In Progress)
  • [ ] Unit Tests and Interaction Test

(Back to Top)

Contributing

If you're eager to contribute to this project, familiarize yourself with the guidelines outlined in the Contributing Guide.

(Back to Top)

Changelog

Refer to the Changelog for a detailed history of modifications, updates, and improvements made to the library.

(Back to Top)

License

The source code is protected under the MIT license. Explore the terms and conditions in the LICENSE file for comprehensive information.

(Back to Top)

Contact

For any inquiries or questions, create an issue in the GitHub repository.

(Back to Top)