/etna-ui

Primary LanguageTypeScript

EtnaUI - Made with ❤️ in 🇮🇹

Introducing EtnaUI, a comprehensive design system that simplifies the creative process.

Our foundations provide a solid base, meticulously crafted for seamless integration with our tokens and web components.

Designed in Figma, EtnaUI empowers you to bring your vision to life with ease and precision. Elevate your design experience – explore the possibilities with EtnaUI.

Project

This project is a React components library using TypeScript, Vite, Storybook, CSS Modules, ESLint, and with Material Design Icons integrated. It is set up as a pnpm project for efficient package management.

Features

  • React: A popular JavaScript library for building user interfaces.
  • TypeScript: Adds static typing to JavaScript, making the development process more robust.
  • Vite: A fast, modern, and lightweight frontend build tool.
  • Storybook: A development environment for UI components, allowing for interactive development, testing, and documentation.
  • CSS Modules: Scoped and modular CSS to encapsulate styles within components.
  • ESLint: A pluggable linting utility for JavaScript and TypeScript.
  • Material Design Icons: A collection of delightful, beautifully crafted icons from Google. Copyright © Google. Material Design Icons License.

Getting Started

Follow these steps to set up your React components library project:

  1. Clone the Repository

    git clone https://github.com/matteomad1011/vite-ts-storybook-components.git

  2. Navigate to the Project Directory

    cd your-components-library

  3. Install Dependencies

    pnpm install

  4. Run the Development Server

    pnpm run dev

    This will start the development server using Vite.

  5. Run Storybook

    pnpm run storybook

    Open your browser and navigate to http://localhost:6006 to view your components in Storybook.

Project Structure

The project structure is designed to provide a clear separation of concerns and ease of maintenance. The key directories are as follows:

  • src: Contains the source code for your React components.
  • .storybook: Configuration for Storybook.
  • .eslintrc.json: ESLint configuration file.
  • vite.config.ts: Vite configuration file.

Feel free to customize and organize your components within the src directory based on your project requirements.

Scripts

  • pnpm run dev: Starts the Vite development server.
  • pnpm run build: Builds the production-ready library.
  • pnpm run storybook: Starts the Storybook development server.
  • pnpm run lint: Runs ESLint to check for code style and errors.

Contributing

todo

License

This project is licensed under the MIT License.

Happy coding!