Laif Design System

!NPM Version

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.

$3

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;

export default meta;
type Story = StoryObj;

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

$3

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`
6. Crea le diverse varianti del componente esportando costanti di tipo Story

$3

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)