@yokouma/oxygen-react

Oxygen Design System — bibliothèque de composants React prête pour la production et compatible Figma Make.

Installation

npm install @yokouma/oxygen-react
# ou
yarn add @yokouma/oxygen-react
# ou
pnpm add @yokouma/oxygen-react

Oxygen utilise des classes Tailwind CSS. Assurez-vous que Tailwind CSS est installé dans votre projet.

Usage rapide

import { Button, Badge, Card, Text, Input } from "@yokouma/oxygen-react";

export default function App() {
  return (
    <Card variant="elevated" padding="md">
      <Text variant="h4">Oxygen UI</Text>
      <Badge variant="success" dot>Actif</Badge>
      <Input label="Email" placeholder="[email protected]" />
      <Button variant="primary" size="md">Envoyer</Button>
    </Card>
  );
}

Composants disponibles

| Composant | Description | |-------------|--------------------------------------------------| | Button | Bouton avec variantes, tailles, icônes et état loading | | Text | Typographie (h1–h6, body, label, caption, code…) | | Badge | Étiquette colorée avec dot indicator | | Card | Conteneur avec header/body/footer | | Input | Champ texte avec label, hint, erreurs et addons | | Select | Liste déroulante accessible | | Avatar | Photo de profil ou initiales avec status | | Spinner | Indicateur de chargement | | Divider | Séparateur horizontal/vertical avec label | | Stack | Layout flexbox déclaratif |

Design Tokens

import { tokens, colors, typography, spacing } from "@yokouma/oxygen-react/tokens";

// Accès direct aux valeurs
const blue = colors.primary[600]; // "#2563eb"
const fontSm = typography.fontSize.sm; // "0.875rem"
const space4 = spacing[4]; // "1rem"

Utilisation avec Figma Make

Cette bibliothèque est conçue pour être importée directement dans Figma Make :

1. Publiez le package sur npm (npm publish)
2. Dans Figma Make, ajoutez la dépendance : @yokouma/oxygen-react
3. Importez les composants dans votre code généré :

import { Button, Text, Card } from "@yokouma/oxygen-react";

Les props de chaque composant sont entièrement typées en TypeScript, ce qui permet à Figma Make d'inférer les variantes disponibles.

Développement local

# Installer les dépendances
npm install

# Build
npm run build

# Mode watch
npm run dev

# Vérifier les types
npm run lint

Structure

src/
├── components/
│   ├── Avatar/
│   ├── Badge/
│   ├── Button/
│   ├── Card/
│   ├── Divider/
│   ├── Input/
│   ├── Select/
│   ├── Spinner/
│   ├── Stack/
│   └── Text/
├── tokens/
│   ├── colors.ts
│   ├── typography.ts
│   ├── spacing.ts
│   └── index.ts
├── utils/
│   └── cn.ts
└── index.ts

License

MIT