# Laif Design System

![NPM Version](https://img.shields.io/npm/v/laif-ds?style=flat&logo=npm&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Flaif-ds)

## Install Laif DS on your project:

```sh
npm i @laif/ds
```

## Development mode

Per vedere i componenti con storybook:

```sh
yarn storybook
```

Il comando esegue due operazioni in sequenza: prima compila il CSS con tailwindcss v4 salvandolo in un file output.css, poi avvia Storybook che utilizza questo file CSS precompilato.
Questo approccio è necessario con Tailwind CSS v4 perché, a differenza delle versioni precedenti, v4 utilizza un'architettura "zero-runtime" che non si integra più direttamente con Storybook. La generazione separata del CSS è quindi la soluzione raccomandata per utilizzare Tailwind v4 con Storybook.

## Publish on NPM:

```sh
npm login

npm whoami # verifica se sei loggato con account corretto

yarn build # farà partire build per tailwindv3 e tailwindv4

npm publish --access public
```

## How stories work

Le stories in Storybook sono il modo in cui documentiamo e testiamo visivamente i nostri componenti. Ogni story rappresenta uno stato specifico di un componente.

### Struttura di una Story

Una story è definita in un file con estensione `.stories.tsx` (o `.stories.jsx` per JavaScript) e segue questa struttura:

```tsx
// button.stories.tsx
import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "../ui/button";

// Metadati del componente
const meta = {
  title: "UI/Button", // Categoria/Nome nella sidebar di Storybook
  component: Button, // Il componente da documentare
  parameters: {
    layout: "centered", // Layout della preview
  },
  tags: ["autodocs"], // Genera automaticamente la documentazione
  argTypes: {
    // Definizione dei controlli per i props
    variant: {
      control: "select",
      options: [
        "default",
        "destructive",
        "outline",
        "secondary",
        "ghost",
        "link",
      ],
      description: "La variante visiva del bottone",
    },
    // Altri argTypes...
  },
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

// Definizione delle singole stories
export const Default: Story = {
  args: {
    children: "Button",
    variant: "default",
    size: "default",
  },
};

export const Secondary: Story = {
  args: {
    children: "Button",
    variant: "secondary",
    size: "default",
  },
};

// Altre stories...
```

### How to create a new story

1. Crea un nuovo file nella directory `src/components/stories/` con nome `nome-componente.stories.tsx`
2. Importa il componente e le dipendenze necessarie
3. Definisci i metadati con `const meta = {...}`
4. Esporta i metadati con `export default meta`
5. Definisci il tipo Story con `type Story = StoryObj<typeof meta>`
6. Crea le diverse varianti del componente esportando costanti di tipo Story

### Colors

Qui è definito il tema base di laif. Sovrascrivibile nel progetto che lo implementa.
Per farlo basta cambiare i valori delle variabili.
Di seguito sono importati 3 temi per demostrazione generati con (https://tweakcn.com/editor/theme)