PUBBLICARE:

npm login npm whoami (verifica se sei loggato con accoutn corretto) yarn build (farà partire build per tailwindv3 e tailwindv4) npm publish --access public

INSTALL:

npm i @laif/ds

HOW IT WORKS

Per vedere i componenti con storybook:

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.

COME FUNZIONANO LE STORIES

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:

// 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...

Come creare una nuova 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)