🚀 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!

Built With

Edusogno Library embraces the power of:

🚀 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.

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

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.

Contribute

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

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

Contributing

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

Changelog

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

License

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

Contact

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