This package contains the admin components for the admin dashboard.
Install the package using your package manager:
npm install @loja-integrada/admin-components
yarn add @loja-integrada/admin-components
pnpm add @loja-integrada/admin-components
The components are built using TailwindCSS, you need to use the @loja-integrada/tailwindcss-config package to use defaultPreset
and compile the CSS. Learn more
Import the CSS file in your project default CSS file (like globals.scss):
@import '@loja-integrada/tailwindcss-config/style.scss';
You can import the components from the package:
import { Button } from '@loja-integrada/admin-components'
or
import { Button } from '@loja-integrada/admin-components/Button'
1 - Choose a category for the component (like components
, forms
, indicators
, etc).
2 - Create a new folder inside src/[category]
with the component name.
Example: src/forms/InputCurrency
.
3 - Create the component file inside the folder.
Example: src/forms/InputCurrency/InputCurrency.tsx
.
4 - Create the component story file inside the folder.
Example: src/forms/InputCurrency/InputCurrency.stories.tsx
.
5 - Create the component test file inside the folder.
Example: src/forms/InputCurrency/InputCurrency.test.tsx
.
6 - Create the component documentation file inside the folder.
Example: src/forms/InputCurrency/InputCurrency.doc.mdx
.
7 - Create an index.ts
file inside the folder to export the component, and export too in parent folder src/forms/index.ts
.
Example: export * from './InputCurrency';
.
You should have the following structure:
src/
forms/
InputCurrency/
InputCurrency.tsx
InputCurrency.stories.tsx
InputCurrency.test.tsx
InputCurrency.doc.mdx
index.ts
Obs: If your component only works on the client-side, the component file name should be *.client.tsx
. Example: InputCurrency.client.tsx
To preview the components, use the following commands to run Storybook:
pnpm dev
To run the tests, use the following commands:
pnpm test
To run the tests manually in browser, use the following commands:
pnpm test:visual