@clarke-energia/foton v1.58.0
Foton-UI
Clarke's Design System implementation
Architecture
This is the target architecture of the components
folder, following the atomic design principle:
components
component-name
index.tsx
index.stories.tsx
atoms
atom-one.tsx
- ...
molecules
molecule-one.tsx
- ...
Obs.: remember to naming the folders and files with Kebab Case convention.
Installing the project locally
Run
yarn install
Running storybook
Run:
yarn storybook
Creating new components
- Create component function
- Create component .stories file
- Export component in
src/lib/index.ts
Integrating into an existing React project
Prerequisites
- You need to have installed
react
,tailwindcss
,heroicons
in your project.
Plugging into your tailwind.config.js
NOTE: Integrating this package into your tailwind configuration might override your previous setup
// tailwind.config.js
const { fotonPlugin } = require('@clarke-energia/foton').fotonTailwind
module.exports = [
//...
plugins: [require('@tailwindcss/forms'), fotonPlugin], // This is needed
//...
]
You are good to go!
Tests
yarn test-storybook
1 month ago
3 months ago
5 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
8 months ago
10 months ago
8 months ago
9 months ago
9 months ago
8 months ago
9 months ago
8 months ago
9 months ago
7 months ago
7 months ago
9 months ago
6 months ago
10 months ago
10 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
10 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
9 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
12 months ago
1 year ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago