Ripe UI Design System

Powered by: React + TypeScript + SASS + Storybook

This project uses React as the primal technology underneath, with typeScript for a more robust and stable development and SASS to manage styling and theming programatically. It Uses Vite for fast build up and development, and StoryBook to test the components before set them free in the wild.

Aditional Toolset

Aditionally we're using a set of tools to help having a uniform codebase following best practices and standards:

• Eslint | To prevent errors, dead code, and ensure best practices
• Prettier | To format the files to follow the same set of rules
• Husky | Pre-commit hooks to avoid pushing code with linter and codestyle errors
• Jest and React Testing Library | For Unit Tests

For more information about the rules we stick to, you can check AirBnB's code style guide

Basic Commands

• npm run test for running jest Unit Tests
• npm run start for running storybook
• npm run build to build the library package

Components Structure

All the components should contain this structure:

components
├── CompName
│   ├── CompName.spec.tsx
│   ├── CompName.stories.tsx
│   ├── CompName.module.scss
│   ├── CompName.types.ts
│   ├── CompName.tsx
│   └── index.ts

• .spec for unit tests
• .stories for Storybook handling
• .module for Styles
• .types for types and definitions
• CompName.tsx for The component logic
• index.ts to handle exporting

Components then need to be exported as well from the /components/index.ts file