react-ada-components v0.0.0

react-ada-components

Simple and optimized React project setup. It includes:

• React v18
• TypeScript v5 and TSX support
• Storybook (v7)
• Vite (v4.3)
• Hot Module Replacement using vite-hmr
• SASS support
• Custom TypeScript config
• ES Linting
• CI/CD with Vercel

Starting the dev server

Make sure you have NodeJS version 16.20 installed.

1. Run npm install
2. Start the dev server using npm start
3. Open http://localhost:3000

Available Commands

• npm start - start the storybook server locally
• npm run dev - start the dev server
• npm run build - create a production ready build in dist folder
• npm run lint - generate linting errors and warnings on console
• npm run preview - create and preview a production build locally
• npm run storybook - start the storybook server locally
• npm run build-storybook - build storybook as a static web application to be deployed

Vite ⚡

Next Generation Frontend Tooling

• 💡 Instant Server Start
• ⚡️ Lightning Fast HMR
• 🛠️ Rich Features
• 📦 Optimized Build
• 🔩 Universal Plugin Interface
• 🔑 Fully Typed APIs

Vite (French word for "quick", pronounced /vit/, like "veet") is a new breed of frontend build tooling that significantly improves the frontend development experience. It consists of two major parts:

• A dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR).

• A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

In addition, Vite is highly extensible via its Plugin API and JavaScript API with full typing support.

Read the Docs to Learn More.

List of Components(v1) -

• Accordion
• Alert
• Button
• Card
• Checkbox
• Chip
• DatePicker
• Dropdown
• FileUpload
• Heading
• Input
• List
• Loader
• Menu
• Modal
• Navigation Bar
• Pagination
• Paragraph
• ProgressIndicator
• Radio
• SearchBar
• SegmentControl
• Side Drawer
• Side Navigations
• Slider
• Table
• Tabs
• TextArea
• Toggle
• Tooltip
• Typography

Hosted Storybook URL - https://react-ada-components.vercel.app

Figma(v1) - https://www.figma.com/file/S32p1s9yd9FSCKCw6oFP8x/Ada-Component-Library-v0.1 Figma(v2) - https://www.figma.com/file/RGND3DEw5GJ6NuCklXvnGo/Ada-Component-Library-v0.2

Global z-indexes

• Side Drawer: 1000
• Date-Picker: 1000
• Menu: 1000
• Slider: 1000/1001