uifolio 0.3.0 → 0.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -8
- package/cli/uifolio.mjs +538 -147
- package/package.json +25 -8
- package/src/components/ui/audio-player.tsx +1 -1
- package/src/components/ui/calendar.tsx +1 -1
- package/src/components/ui/choice.tsx +1 -1
- package/src/components/ui/color-picker.tsx +3 -3
- package/src/components/ui/command-menu.tsx +1 -1
- package/src/components/ui/file-upload.tsx +1 -1
- package/src/components/ui/icon-picker.tsx +28 -20
- package/src/components/ui/motion.tsx +10 -8
- package/src/components/ui/otp-input.tsx +7 -31
- package/src/components/ui/resizable.tsx +5 -5
- package/src/components/ui/rich-text-editor.tsx +3 -3
- package/src/components/ui/stories.tsx +13 -10
- package/src/components/ui/time-picker.tsx +1 -1
- package/src/components/ui/video-player.tsx +157 -117
- package/src/lib/use-controllable.ts +54 -0
- package/src/lib/video.ts +6 -5
package/README.md
CHANGED
|
@@ -72,13 +72,23 @@ node cli/uifolio.mjs add file-upload --alias "#lib" --dry-run # simulate
|
|
|
72
72
|
|
|
73
73
|
Options : `--cwd <dir>`, `--dir <chemin>` (défaut `src/components/ui`),
|
|
74
74
|
`--lib <chemin>` (défaut `src/lib`), `--alias <alias>` (défaut `@`),
|
|
75
|
+
`--page <chemin>` (créé s'il n'existe pas), `--interactive` (forcer les questions),
|
|
75
76
|
`--force` (écraser), `--dry-run` (simuler), `--color <hex>` et `--radius <px>`.
|
|
76
77
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
78
|
+
`add` ne s'arrête pas à la copie : sans `--dir` ni `--page`, la CLI demande
|
|
79
|
+
**dans quel dossier** copier les composants, puis **dans quel fichier** les
|
|
80
|
+
utiliser. La page est créée si elle manque ; si elle existe, l'import et le
|
|
81
|
+
`<Composant />` sont ajoutés dans son JSX (sans doublon). Réponds `-` à la
|
|
82
|
+
seconde question pour installer sans toucher à une page.
|
|
83
|
+
|
|
84
|
+
Les couleurs passent par des **tokens Tailwind CSS 4** : la CLI écrit
|
|
85
|
+
`uifolio-theme.css` (`:root`, `.dark`, puis `@theme inline` qui expose
|
|
86
|
+
`--color-primary`, `--color-muted-foreground`, …) et l'importe automatiquement
|
|
87
|
+
dans le CSS global du projet (celui qui fait `@import 'tailwindcss'`). Les
|
|
88
|
+
composants gardent donc `bg-primary`, `border-primary/50`, `ring-primary/40` :
|
|
89
|
+
aucune couleur en dur, `--color` change `--primary` dans le thème et `--radius`
|
|
90
|
+
y ajoute `--radius`. Sans CSS global Tailwind détecté, le fichier est écrit à la
|
|
91
|
+
racine et l'import à ajouter est affiché.
|
|
82
92
|
|
|
83
93
|
À la fin, la CLI affiche les dépendances npm détectées, par ex. :
|
|
84
94
|
|
|
@@ -86,9 +96,6 @@ la couleur choisie même si le projet cible ne définit pas `--primary`. `--radi
|
|
|
86
96
|
npm install clsx tailwind-merge lucide-react hls.js
|
|
87
97
|
```
|
|
88
98
|
|
|
89
|
-
Le projet cible doit fournir les tokens du thème (`bg-background`, `border`, `text-muted-foreground`…) :
|
|
90
|
-
copie les variables CSS de `src/index.css` (`:root`, `.dark`, `@theme`) si ton projet ne les a pas.
|
|
91
|
-
|
|
92
99
|
## Thèmes clair/sombre
|
|
93
100
|
|
|
94
101
|
- Tokens CSS : `:root` (clair) et `.dark` (sombre) dans `src/index.css`,
|