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 , radix ui 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

npx playwright install
yarn test-storybook