# @edusogno/ui Latest version **0.2.15** (published 2024-04-02) · ISC license · 0 weekly downloads ## Install ```sh npm install @edusogno/ui pnpm add @edusogno/ui yarn add @edusogno/ui bun add @edusogno/ui ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.2.15 | | Published | 2024-04-02 | | First published | 2023-12-11 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | ESM | | Dependencies | 36 | | Unpacked size | 26.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | kojogyaase | ## Links - npm: https://www.npmjs.com/package/@edusogno/ui - npm.io page: https://npm.io/package/@edusogno/ui ## Dependencies (36) - [yup](https://npm.io/package/yup.md) ^1.3.3 - [clsx](https://npm.io/package/clsx.md) ^2.0.0 - [cmdk](https://npm.io/package/cmdk.md) ^0.2.0 - [dayjs](https://npm.io/package/dayjs.md) ^1.11.10 - [lodash](https://npm.io/package/lodash.md) ^4.17.21 - [react-icons](https://npm.io/package/react-icons.md) ^4.12.0 - [lucide-react](https://npm.io/package/lucide-react.md) ^0.292.0 - [framer-motion](https://npm.io/package/framer-motion.md) ^10.16.5 - [react-dropzone](https://npm.io/package/react-dropzone.md) ^14.2.3 - [tailwind-merge](https://npm.io/package/tailwind-merge.md) ^2.0.0 - [@stitches/react](https://npm.io/package/@stitches/react.md) ^1.2.8 - [@tailwindcss/forms](https://npm.io/package/@tailwindcss/forms.md) ^0.5.7 - [@types/react-icons](https://npm.io/package/@types/react-icons.md) ^3.0.0 - [country-codes-list](https://npm.io/package/country-codes-list.md) ^1.6.11 - [@hookform/resolvers](https://npm.io/package/@hookform/resolvers.md) ^3.3.4 - [tailwindcss-animate](https://npm.io/package/tailwindcss-animate.md) ^1.0.7 - [@radix-ui/react-slot](https://npm.io/package/@radix-ui/react-slot.md) ^1.0.2 - [@radix-ui/react-tabs](https://npm.io/package/@radix-ui/react-tabs.md) ^1.0.4 - [@radix-ui/react-toast](https://npm.io/package/@radix-ui/react-toast.md) ^1.1.5 - [@types/react-dropzone](https://npm.io/package/@types/react-dropzone.md) ^5.1.0 - [@radix-ui/react-avatar](https://npm.io/package/@radix-ui/react-avatar.md) ^1.0.4 - [@radix-ui/react-dialog](https://npm.io/package/@radix-ui/react-dialog.md) ^1.0.5 - [@radix-ui/react-select](https://npm.io/package/@radix-ui/react-select.md) ^2.0.0 - [@radix-ui/react-toggle](https://npm.io/package/@radix-ui/react-toggle.md) ^1.0.3 - [@radix-ui/react-popover](https://npm.io/package/@radix-ui/react-popover.md) ^1.0.7 - [@tailwindcss/typography](https://npm.io/package/@tailwindcss/typography.md) ^0.5.10 - [@radix-ui/react-checkbox](https://npm.io/package/@radix-ui/react-checkbox.md) ^1.0.4 - [@radix-ui/react-progress](https://npm.io/package/@radix-ui/react-progress.md) ^1.0.3 - [class-variance-authority](https://npm.io/package/class-variance-authority.md) ^0.7.0 - [react-phone-number-input](https://npm.io/package/react-phone-number-input.md) ^3.3.7 - [@radix-ui/react-accordion](https://npm.io/package/@radix-ui/react-accordion.md) ^1.1.2 - [@radix-ui/react-hover-card](https://npm.io/package/@radix-ui/react-hover-card.md) ^1.0.7 - [@radix-ui/react-scroll-area](https://npm.io/package/@radix-ui/react-scroll-area.md) ^1.0.5 - [@radix-ui/react-toggle-group](https://npm.io/package/@radix-ui/react-toggle-group.md) ^1.0.4 - [@radix-ui/react-dropdown-menu](https://npm.io/package/@radix-ui/react-dropdown-menu.md) ^2.0.6 - [@tailwindcss/container-queries](https://npm.io/package/@tailwindcss/container-queries.md) ^0.1.1 ## Recent versions - 0.2.15 (latest) — 2024-04-02 - 0.2.14 — 2024-03-18 - 0.2.13 — 2024-03-03 - 0.2.12 — 2024-02-25 - 0.2.11 — 2024-02-13 - 0.2.10 — 2024-02-04 - 0.2.9 — 2024-02-03 - 0.2.8 — 2024-01-15 - 0.2.7 — 2024-01-13 - 0.2.6 — 2024-01-13 - 0.2.5 — 2023-12-13 - 0.2.4 — 2023-12-13 - 0.2.3 — 2023-12-12 - 0.2.2 — 2023-12-11 - 0.2.1 — 2023-12-11 - … 2 more at https://npm.io/package/@edusogno/ui/versions ## README

Edusogno

🎓 Welcome to Edusogno Academy UI! 🚀

The library contains components for the platform.

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
  2. 🎨 Styleguide
  3. 🚀 Getting Started
  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: * [![React.js][React.js]][React-url] * [![TypeScript][TypeScript]][TypeScript-url] * [![Tailwind CSS][Tailwind.css]][Tailwind-url] * [![Storybook][Storybook]][Storybook-url] * [![shadcnui][shadcnui]][shadcnui-url] * [![radixui][radixui]][radixui-url] * [![tsup][tsup]][tsup-url] * [![turbo][turbo]][turbo-url]

(Back to Top)

The library is like a wizard's spellbook, with TypeScript at its core and casting enchantments with: ## 🚀 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+](https://nodejs.org/en/download) * [📦 NPM](https://www.npmjs.com/package/npm) * An IDE (e.g., Webstorm or VS Code) is recommended, as every great adventure needs a trusty companion! * [🚀 Vite 4.2+](https://vitejs.dev/) This project uses [NPM](https://www.npmjs.com/package/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](https://nodejs.org/en/download). > 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 ```sh npm install @edusogno/ui ``` 2. Add this line to your imports in `main.tsx` or `App.tsx` ```js 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 ```sh npm install @edusogno/primitives ```

(back to top)

### Folder Structure The folder is structured as follows: ```sh 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](CONTRIBUTION.md) 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](CONTRIBUTION.md).

(Back to Top)

## Changelog Refer to the [Changelog](CHANGELOG.md) 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](LICENSE) file for comprehensive information.

(Back to Top)

## Contact For any inquiries or questions, create an issue in the [GitHub repository](https://github.com/EdusognoItaly/edusogno-ui/issues).

(Back to Top)

[React.js]: https://img.shields.io/badge/-ReactJs-61DAFB?logo=react&logoColor=white&style=for-the-badge [React-url]: https://react.dev/ [TypeScript]: https://shields.io/badge/TypeScript-3178C6?logo=TypeScript&logoColor=FFF&style=for-the-badge [TypeScript-url]: https://www.typescriptlang.org [Vite.js]: https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white [Vite-url]: https://vitejs.dev [Tailwind.css]: https://img.shields.io/badge/tailwindcss-38B2AC?&logo=tailwindcss&logoColor=white&style=for-the-badge [Tailwind-url]: https://tailwindcss.com [Edusogno.ui]: https://img.shields.io/badge/EdusognoUI-2D224C?&logo=ghost&logoColor=white&style=for-the-badge [Edusogno-url]: https://github.com/EdusognoItaly/edusogno-ui [Storybook]: https://shields.io/badge/storybook-FFF?logo=storybook&logoColor=FF4785&style=for-the-badge [Storybook-url]:https://storybook.js.org/ [radixui]: https://shields.io/badge/radixui-FFF?logo=radixui&logoColor=161618&style=for-the-badge [radixui-url]:https://www.radix-ui.com/ [shadcnui]: https://shields.io/badge/shadcnui-000?logo=shadcnui&logoColor=FFF&style=for-the-badge [shadcnui-url]:https://ui.shadcn.com/docs [turbo]: https://shields.io/badge/turbo-000?logo=turborepo&logoColor=FFF&style=for-the-badge [turbo-url]:https://turbo.build/ [tsup]: https://shields.io/badge/tsup-3178C6?logo=tsup&logoColor=FFF&style=for-the-badge [tsup-url]:https://tsup.egoist.dev/ [js]: https://edusognoitaly.github.io/styleguide/jsguide.html [json]: https://edusognoitaly.github.io/styleguide/jsoncstyleguide.html [ts]: https://edusognoitaly.github.io/styleguide/tsguide.html [react]: https://edusognoitaly.github.io/styleguide/reactguide.html --- _Source: https://npm.io/package/@edusogno/ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._