@mova-ui/react 0.1.0 → 0.2.0

package/README.md

@@ -1,46 +1,93 @@
-# @mova-ui/react
+# Mova
 
 **Make interfaces feel alive.**
 
-Reusable React animation components and an offline, copy-source CLI. Documentation: https://mova.zeeland.studio
+React components for motion: entrance transitions, hover effects, text reveals, loading indicators, and scroll interactions. Import them as a library, or copy the source into your project with the bundled CLI.
 
-## Use as a React library
+## Install
 
-```sh
-npm install @mova-ui/react react react-dom
+Requires Node.js 20+ and React / React DOM 18.2+ or 19.
+
+```bash
+npm install @mova-ui/react
 ```
 
+Import the CSS once in your app entry point. Mova ships compiled styles, so you do not need to configure Tailwind. The stylesheet includes component utilities without a global reset.
+
 ```tsx
-'use client';
-import { FadeIn, GlowButton, ClassicSpinner } from '@mova-ui/react';
+import { FadeIn, GlowButton } from '@mova-ui/react';
 import '@mova-ui/react/styles.css';
 
-export function Example() {
-  return <FadeIn><GlowButton>Continue</GlowButton><ClassicSpinner /></FadeIn>;
+export function Welcome() {
+  return (
+    <FadeIn>
+      <GlowButton onClick={() => console.log('Hello!')}>
+        Try Mova
+      </GlowButton>
+    </FadeIn>
+  );
 }
 ```
 
-ESM with TypeScript declarations. React 18.2+ or 19; Node 20+ for the CLI. Animation and class utility dependencies are installed automatically. Bundlers can tree-shake unused exports. The library entry is marked `use client` for React Server Component frameworks.
-
-The exported CSS contains the bundled components' Tailwind utility classes and theme tokens, **not** the website stylesheet or Tailwind preflight. Import it once; Tailwind is not required for the supplied styles. Its utility class names are global: applications that already use Tailwind may instead scan their installed package's JS or copied source using their own Tailwind configuration. Custom `className` values require your own CSS. Components include upstream demo defaults; check individual props before use. Motion accessibility behavior varies by component; applications should configure reduced-motion preferences and test accessibility for their use case.
+The package includes TypeScript declarations and an ESM entry point. In frameworks with React Server Components, use interactive components inside a client boundary.
 
-## Copy editable source
+## Copy components
 
-Run from a project root containing `package.json`:
+Run the CLI from a project directory containing `package.json`:
 
-```sh
-npx @mova-ui/react --help
+```bash
 npx @mova-ui/react list
 npx @mova-ui/react add glow-button
 npx @mova-ui/react add fade-in --dir src/components/mova
+npx @mova-ui/react --help
+```
+
+The CLI copies component source, `styles.css`, and attribution licenses into `src/components/mova` by default. Missing dependencies are installed automatically using your project's npm, pnpm, yarn, or bun. Import the copied CSS once and keep both license files with the source.
+
+Component sources are bundled with the package. Use `--skip-install` for offline source copying; otherwise dependency installation updates your package manifest and lockfile. It refuses symlink targets and paths outside your project. Existing component files stay untouched unless you pass `--overwrite`.
+
+The extended site catalog is generated into standalone JavaScript bundles stored in `.tsx` files with an explicit typecheck exemption. Original library components retain their TypeScript source; generated catalog bundles do not preserve their original prop types.
+
+## Development
+
+This repository contains the component library and CLI only.
+
+```bash
+npm ci --include=dev
+npm run build
+npm test
+npm run test:consumer
+# Run all checks:
+npm run verify
+```
+
+- `source-registry/` contains the editable components, hooks, and utilities. The classic toggle is stored as registry JSON.
+- `scripts/build.mjs` compiles the ESM bundle, strict TypeScript declarations, CSS, and offline registry.
+- `bin/mova.mjs` implements the source-copy CLI.
+- `install-catalog/` freezes the site's expanded catalog and third-party attribution. Refresh it with `npm run export:cli` in the sibling `mova-site` repository before building.
+- `tests/` covers package exports, CLI safety, and installation into a separate React consumer.
+
+The build recreates `dist/`, `registry/`, and `.generated/`. Do not edit those directories. Consumer verification packs the library, checks its file allowlist, installs it in a temporary project, then runs CLI commands, server rendering, strict typechecking, and a Vite production build.
+
+## Source catalog
+
+`catalog/` preserves 153 additional reusable UI modules: cards, charts, metrics, forms, toggles, text effects, and CSS animation experiments. Starting with `0.2.0`, the expanded website catalog is also available through the bundled CLI; these additions are not root package exports. See [the catalog guide](catalog/README.md) for source development.
+
+```bash
+npm ci --prefix catalog --include=dev
+npm --prefix catalog run verify
 ```
 
-The CLI copies TypeScript source, compiled `styles.css`, and `LICENSE.mova` to `src/components/mova` by default. It prints required dependencies (for example `npm install framer-motion`) but never installs packages, downloads component code, or edits project configuration. Import the copied CSS once, e.g. `import './components/mova/styles.css'` from `src/App.tsx`. Source uses React and, where needed, `framer-motion`, `clsx`, and `tailwind-merge`.
+## Contributing
+
+Keep changes focused on reusable components or CLI behavior. Edit `source-registry/`, add regression coverage where applicable, and run `npm run verify` before opening a pull request. Include usage notes when you change a component API. Check keyboard interaction and reduced-motion behavior for interactive or animated changes.
+
+Maintainers can use the manual npm release workflow for a reviewed, unpublished version. The workflow requires an exact version match and the `NPM_TOKEN` secret. Version `0.2.0` adds automatic dependency installation and the expanded CLI catalog.
 
-Existing files are protected. Use `--overwrite` only when you intend to replace them. Identical shared CSS/license files can be reused when adding another component. Absolute paths, parent traversal, symlink targets, Git metadata, and `node_modules` destinations are refused. This is a local developer tool, not a sandbox against another process concurrently mutating your project's directories.
+## Attribution
 
-`list` enumerates all packaged IDs, including loaders, text/entrance/hover/scroll/cursor effects, the page transition, a toggle, hooks, and utilities. The package is generated from the original reusable registry, not the documentation application; website-only chart/demo pages are not exported.
+Forked from an early version of [Amicro](https://github.com/Subhan-code/Amicro--Micro-transitions-).
 
-## License and attribution
+## License
 
-MIT. Derived from Amicro by SYED SUBHAN UDDIN. The original copyright and complete license are retained in `LICENSE` and in source installations. Mova packaging, CLI, and compatibility adjustments preserve that attribution.
+MIT. See [LICENSE](LICENSE).

package/bin/mova.mjs

@@ -3,18 +3,19 @@ import { readdirSync, readFileSync, writeFileSync, lstatSync, realpathSync, mkdi
 import { resolve, dirname, join, isAbsolute, relative, sep } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { randomUUID } from 'node:crypto';
+import { execFileSync } from 'node:child_process';
 const pkg = resolve(dirname(fileURLToPath(import.meta.url)), '..');
 const help = `Mova — Make interfaces feel alive.
 
 Usage:
   npx @mova-ui/react list
-  npx @mova-ui/react add <id> [--dir src/components/mova] [--overwrite]
+  npx @mova-ui/react add <id> [--dir src/components/mova] [--overwrite] [--skip-install]
   npx @mova-ui/react --help
 
 Run add from your project root (must contain package.json).
 Copies bundled TypeScript source, compiled styles.css and the MIT license.
-No downloads, package installation or project configuration changes are made.
-Import the copied styles.css once in your app. Required dependencies are printed.
+Installs missing dependencies using your project's npm, pnpm, yarn, or bun.
+Import the copied styles.css once in your app. --skip-install copies source only.
 --dir must be a relative directory inside this project; symlinks are refused.
 --overwrite explicitly replaces existing regular files (never symlinks).
 `;
@@ -37,16 +38,17 @@ function main(args) {
     console.log(readdirSync(join(pkg, 'registry')).filter(f => f.endsWith('.json')).map(f => f.slice(0,-5)).sort().join('\n')); return;
   }
   if (args[0] !== 'add' || !/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(args[1] ?? '')) throw new Error('Use add <id>, list, or --help');
-  const id = args[1]; let dir = 'src/components/mova'; let overwrite = false;
+  const id = args[1]; let dir = 'src/components/mova'; let overwrite = false; let skipInstall = false;
   for (let i=2;i<args.length;i++) {
     if (args[i] === '--overwrite' && !overwrite) overwrite = true;
+    else if (args[i] === '--skip-install' && !skipInstall) skipInstall = true;
     else if (args[i] === '--dir' && args[i+1] && !args[i+1].startsWith('--')) dir = args[++i];
     else throw new Error(`Unknown or incomplete option: ${args[i]}`);
   }
   if (!dir || isAbsolute(dir) || dir.includes('\\') || dir.includes(':') || dir.split('/').some(p => p === '..' || p.startsWith('.git') || p === 'node_modules')) throw new Error('Directory must be a relative path inside this project');
   const root = realpathSync(process.cwd());
   if (!stat(join(root, 'package.json'))?.isFile()) throw new Error('Run add from a project root containing package.json');
-  JSON.parse(readFileSync(join(root, 'package.json'), 'utf8'));
+  const project = JSON.parse(readFileSync(join(root, 'package.json'), 'utf8'));
   const registryFile = join(pkg, 'registry', `${id}.json`);
   if (!stat(registryFile)?.isFile()) throw new Error(`Unknown component: ${id}. Run npx @mova-ui/react list`);
   const item = JSON.parse(readFileSync(registryFile, 'utf8'));
@@ -55,7 +57,8 @@ function main(args) {
   const files = [
     { name: item.file, content: item.content },
     { name: 'styles.css', content: readFileSync(join(pkg, 'dist/styles.css'), 'utf8') },
-    { name: 'LICENSE.mova', content: readFileSync(join(pkg, 'LICENSE'), 'utf8') }
+    { name: 'LICENSE.mova', content: readFileSync(join(pkg, 'LICENSE'), 'utf8') },
+    { name: 'LICENSE.third-party', content: readFileSync(join(pkg, 'registry/LICENSE.third-party'), 'utf8') }
   ].map(f => ({...f, path: join(out, f.name)}));
   // Preflight the entire operation before creating directories or replacing files.
   for (const f of files) {
@@ -64,6 +67,18 @@ function main(args) {
     f.skip = exists && f.name !== item.file && readFileSync(f.path, 'utf8') === f.content;
     if (exists && !f.skip && !overwrite) throw new Error(`${relative(root, f.path)} already exists; use --overwrite to replace it`);
   }
+  const dependencies = item.dependencies.filter(name => !project.dependencies?.[name] && !project.devDependencies?.[name]);
+  if (dependencies.some(name => !/^(?:@[a-z0-9._-]+\/)?[a-z0-9._-]+$/.test(name))) throw new Error('Invalid registry dependency');
+  if (!skipInstall && dependencies.length) {
+    const declared = project.packageManager?.split('@')[0];
+    const manager = ['npm', 'pnpm', 'yarn', 'bun'].includes(declared) ? declared
+      : stat(join(root, 'pnpm-lock.yaml')) ? 'pnpm'
+      : stat(join(root, 'yarn.lock')) ? 'yarn'
+      : stat(join(root, 'bun.lock')) || stat(join(root, 'bun.lockb')) ? 'bun' : 'npm';
+    console.log(`Installing ${dependencies.join(', ')} with ${manager}…`);
+    try { execFileSync(manager, [manager === 'npm' ? 'install' : 'add', ...dependencies], { cwd: root, stdio: 'inherit' }); }
+    catch { throw new Error(`Dependency installation failed (${manager}). Component files were not written. Resolve the package-manager error and retry.`); }
+  }
   for (const f of files.filter(f => !f.skip)) {
     mkdirSync(dirname(f.path), { recursive: true });
     safePath(root, f.path);
@@ -78,7 +93,7 @@ function main(args) {
     }
   }
   console.log(`Added ${id} to ${dir}\nImport '${dir}/styles.css' once in your app (adjust the relative import).`);
-  if (item.dependencies.length) console.log(`Dependencies: npm install ${item.dependencies.join(' ')}`);
+  if (skipInstall && dependencies.length) console.log(`Skipped dependencies: ${dependencies.join(' ')}`);
   console.log('Requires React 18.2+ or 19 and React DOM. MIT attribution is in LICENSE.mova.');
 }
 try { main(process.argv.slice(2)); } catch (error) { console.error(`Mova: ${error.message}`); process.exitCode = 1; }