uifolio 0.5.5 → 0.7.0

package/README.md

@@ -14,6 +14,7 @@ and the alias is rewritten automatically.
 # from any project, through the npm package
 npx uifolio@latest add calendar --color "#10B981" --radius 6
 pnpm dlx uifolio@latest add video-player otp
+pnpm dlx uifolio@latest add horizontal-accordion storytelling
 
 # from the root of the project that contains UIfolio
 npm run uifolio -- list
@@ -31,11 +32,12 @@ node cli/uifolio.mjs add file-upload --alias "#lib" --dry-run   # simulate
 | `uifolio init` | writes `uifolio.json` (dir, lib, alias) in the target project |
 | `uifolio add <names...>` | copies the component **+ transitive dependencies** (helpers `@/lib/*`) |
 
-Options: `--cwd <dir>`, `--dir <path>` (default `src/components/ui`), `--lib <path>` (default `src/lib`), `--alias <alias>` (default `@`), `--page <path>` (created if missing), `--interactive` (force the questions), `--force` (overwrite), `--dry-run` (simulate), `--color <hex>` and `--radius <px>`.
+Options: `--cwd <dir>`, `--dir <path>` (default `src/components/ui`), `--animations <path>` (default `src/components/animations`), `--lib <path>` (default `src/lib`), `--alias <alias>` (default `@`), `--page <path>` (created if missing), `--interactive` (force the questions), `--force` (overwrite), `--dry-run` (simulate), `--color <hex>` and `--radius <px>`.
 
-`add` does not stop at the copy. The components always land in
-`src/components/ui` (override with `--dir`) and the page imports them through
-the `@/` alias. Without `--page`, the CLI asks where to use them:
+`add` does not stop at the copy. The components land in
+`src/components/ui` (override with `--dir`), the animations in
+`src/components/animations` (override with `--animations`), and the page imports
+them through the `@/` alias. Without `--page`, the CLI asks where to use them:
 
 1. *Do you already have a file ready to receive the component (…component…) (y/N) ?* `yes` → *In which file should the component (…component…) be copied (e.g. src/pages/calendar.tsx) ?*: the import and a ready-to-render example are added without duplication, and the file is created when missing;
 2. `no` → *Would you like to create a new folder and an import file (Y/n) ?* `yes` → *Please specify the new path (e.g. src/pages/calendar.tsx) ?*: the folder and the file are created; `no` → install only, no file is touched.
@@ -54,15 +56,38 @@ Colors go through **Tailwind CSS 4 tokens**: the CLI writes
 into the project's global CSS (the one with `@import 'tailwindcss'`). The
 components therefore keep `bg-primary`, `border-primary/50`, `ring-primary/40`:
 no hard-coded colors. `--color` changes `--primary` in the theme and `--radius`
-adds `--radius` to it. When no global Tailwind CSS is found, the file is written
-at the root and the import to add is printed.
-
-At the end, the CLI prints the detected npm dependencies, for example:
+adds `--radius` to it. The CSS that imports Tailwind is detected wherever it
+lives (`src/index.css`, `src/styles/globals.css`, `app/globals.css`…).
+
+Tailwind CSS 4 is required: without it, no utility class exists and the
+components render unstyled. When the target project does not have it (or no CSS
+imports it yet), `add` sets it up before wiring the theme:
+
+1. installs `tailwindcss` (+ `@tailwindcss/vite`) with the package manager of the
+   project's lockfile (`npm`, `pnpm`, `yarn` or `bun`);
+2. creates the CSS entry (`src/index.css`, or `app/globals.css`) with
+   `@import 'tailwindcss';`, or prepends the import to the existing one;
+3. imports that CSS in the app entry (`src/main.tsx`, `app/layout.tsx`…);
+4. adds the `tailwindcss()` plugin to `vite.config.*`.
+
+The installation is skipped by `--dry-run` (the steps are printed instead).
+If the install fails (offline, read-only…), the theme is still written and the
+exact steps to run manually are printed.
+
+`add` also installs the npm packages the copied files import (`clsx`,
+`tailwind-merge`, `lucide-react`, `hls.js`…), with the same package manager and
+as runtime dependencies (`dependencies`, not `devDependencies`). Only the ones
+missing from the manifest are installed, `--dry-run` prints the command without
+running it, and a project without `package.json` simply gets the command to run
+itself:
 
 ```bash
 npm install clsx tailwind-merge lucide-react hls.js
 ```
 
+Tailwind is handled the same way, as a dev dependency (see above), so it is not
+part of that list.
+
 ### Preview parity
 
 The docs preview and the installed component render identically because the page
@@ -91,6 +116,14 @@ only marks the installation as complete when that is relevant.
 | OtpInput | `src/components/ui/otp-input.tsx` | 4 fields, paste, rotate + success check |
 | ColorPicker | `src/components/ui/color-picker.tsx` | advanced panel, saturation/lightness, hue, alpha, eyedropper, RGB channels, presets, HEX/RGB/HSL/RGBA |
 | Table | `src/components/ui/table.tsx` | shadcn-style typed table, uniform `px-4` cells and a wider gap before Actions, select-all checkbox, row actions |
+| HorizontalAccordion | `src/components/animations/horizontal-accordion.tsx` | theme-colored panels, hover, click, arrow/Home/End keyboard |
+| Storytelling | `src/components/animations/horizontal-story.tsx` | vertical scroll driven horizontal story, palettes, mobile touch fallback |
+| StackingCards | `src/components/animations/stacking-cards.tsx` | cards settle on scroll, customizable gradients or solid color |
+| ScrollText | `src/components/animations/scroll-text.tsx` | letters light up with their viewport position, reversible |
+| ImageCrossfade | `src/components/animations/image-crossfade.tsx` | pinned crossfading images, captions, dots and customizable overlay |
+
+The animation helpers (`data.ts`, `palette.ts`, `animation-settings-*`, `palette-*`)
+are copied automatically when the installed animation needs them.
 
 Copyable helpers (the CLI follows them automatically): `src/lib/utils.ts`,
 `src/lib/video.ts`, `src/lib/vtt.ts`, `src/lib/date.ts`, `src/lib/uploader.ts`, `src/lib/color.ts`,