@edusogno/ui NPM

🚀 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

First run
```
 npm install @edusogno/ui
```
Add this line to your imports in main.tsx or App.tsx
```
 import "@edusogno/ui/css";
```

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")],

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

Components
- Inputs
  - Outlined inputs
    - Input
    - Phone Input
    - AddressInput
    - DatePicker
  - Underlined
- Composites
  - Video Player
  - Calendar
  - Hour Selector
  - Popup
- Primitives
  - Buttons
  - Input
  - Accordion
  - Dialogs
  - Popovers
  - Toast
  - Select
Stories(Documentation)
- Docs (In Progress)
  - Contribution Docs
  - Components Docs (In Progress)
- Unit Tests and Interaction Test