|
1 | | -# React + TypeScript + Vite |
2 | | - |
3 | | -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
4 | | - |
5 | | -Currently, two official plugins are available: |
6 | | - |
7 | | -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh |
8 | | -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh |
9 | | - |
10 | | -## Expanding the ESLint configuration |
11 | | - |
12 | | -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: |
13 | | - |
14 | | -```js |
15 | | -export default tseslint.config({ |
16 | | - extends: [ |
17 | | - // Remove ...tseslint.configs.recommended and replace with this |
18 | | - ...tseslint.configs.recommendedTypeChecked, |
19 | | - // Alternatively, use this for stricter rules |
20 | | - ...tseslint.configs.strictTypeChecked, |
21 | | - // Optionally, add this for stylistic rules |
22 | | - ...tseslint.configs.stylisticTypeChecked, |
23 | | - ], |
24 | | - languageOptions: { |
25 | | - // other options... |
26 | | - parserOptions: { |
27 | | - project: ['./tsconfig.node.json', './tsconfig.app.json'], |
28 | | - tsconfigRootDir: import.meta.dirname, |
29 | | - }, |
30 | | - }, |
31 | | -}) |
32 | | -``` |
33 | | - |
34 | | -You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: |
35 | | - |
36 | | -```js |
37 | | -// eslint.config.js |
38 | | -import reactX from 'eslint-plugin-react-x' |
39 | | -import reactDom from 'eslint-plugin-react-dom' |
40 | | - |
41 | | -export default tseslint.config({ |
42 | | - plugins: { |
43 | | - // Add the react-x and react-dom plugins |
44 | | - 'react-x': reactX, |
45 | | - 'react-dom': reactDom, |
46 | | - }, |
47 | | - rules: { |
48 | | - // other rules... |
49 | | - // Enable its recommended typescript rules |
50 | | - ...reactX.configs['recommended-typescript'].rules, |
51 | | - ...reactDom.configs.recommended.rules, |
52 | | - }, |
53 | | -}) |
54 | | -``` |
| 1 | +# Design System | Pamela UI Design System |
| 2 | + |
| 3 | +### :bulb: Description |
| 4 | + |
| 5 | +The _Pamela UI Design System_ was developed as part of a study project. The _Pamela UI Design System_ is a cohesive, reusable set of user interface components designed to make it easy to build consistent, scalable applications. Built with design and development best practices. |
| 6 | + |
| 7 | +This project is a living project and is constantly changing, seeking to improve and add the most used components in different applications with their most different variations. The documentation is interactive, being able to see in advance the different scenarios that a given component can have. |
| 8 | + |
| 9 | +### :rocket: Technologies |
| 10 | + |
| 11 | +- Developed with [Storybook](https://storybook.js.org/docs), [React](https://react.dev/) and [TypeScript](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html) |
| 12 | + |
| 13 | +### :heavy_check_mark: How to edit and contribute |
| 14 | + |
| 15 | +- After cloning and installing dependencies, run `npm run dev` inside the `doc` folder. |
| 16 | +- All the live `components` is located on `stories` folder. |
| 17 | +- If you need to create a custom component to display a token or other component, you can create in the `components` folder. |
| 18 | +- Before committing, run `npm run lint` to fix formatting and ensure code consistency. And don't forget to test all the variants. |
| 19 | + |
| 20 | +--- |
| 21 | + |
| 22 | +### :heavy_check_mark: What will you find in this package? |
| 23 | + |
| 24 | +| Component | Description | |
| 25 | +| --------- | ------------------------------------------------------------------------- | |
| 26 | +| Avatar | Displays a user image via the `src` attribute or a fallback icon | |
| 27 | +| Checkbox | A custom checkbox with smooth transitions | |
| 28 | +| MultiStep | A progress bar with customizable step count | |
| 29 | +| TextInput | A styled input field for text (more types coming soon) | |
| 30 | +| Toast | A notification-style message that appears on the right side of the screen | |
| 31 | +| Tooltip | Shows a description when hovering over an element | |
| 32 | +| Box | A simple box with customizable background color | |
| 33 | +| Button | Multiple button variants for different use cases | |
| 34 | +| Heading | Different heading levels in a consistent design | |
| 35 | +| Text | Text elements styled with the Design System’s fonts and sizes | |
| 36 | +| TextArea | A styled textarea with two available variants | |
0 commit comments