Admin-Components

This package contains the admin components for the admin dashboard.

Usage

Installation

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

Configure TailwindCSS and PostCSS

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

Style

Import the CSS file in your project default CSS file (like globals.scss):

@import '@loja-integrada/tailwindcss-config/style.scss';

Import components

You can import the components from the package:

import { Button } from '@loja-integrada/admin-components'

or

import { Button } from '@loja-integrada/admin-components/Button'

Development

Create a new component

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

Preview

To preview the components, use the following commands to run Storybook:

pnpm dev

Test

To run the tests, use the following commands:

pnpm test

To run the tests manually in browser, use the following commands:

pnpm test:visual