@brewedby/ds 1.0.0

package/README.md

@@ -0,0 +1,118 @@
+# @brewedby/ds
+
+> Fynd One Design System — CLI installer
+
+Sets up design tokens, font declarations, icon library, and AI context (`CLAUDE.md`) in any Fynd project. Works with Astro, Next.js, Vite, React, and vanilla HTML.
+
+---
+
+## Usage
+
+### One-time install in a project (recommended)
+```bash
+npx @brewedby/ds init
+```
+
+### Or install globally and run anywhere
+```bash
+npm install -g @brewedby/ds
+fynd-ds init
+```
+
+---
+
+## What it does
+
+Runs an interactive setup that:
+
+1. **Detects** your framework and package manager automatically
+2. **Asks** where to place tokens, fonts, and whether to write `CLAUDE.md`
+3. **Writes** `fynd-tokens.css` to your styles directory (with font paths patched for your project structure)
+4. **Creates** a font directory with a `.gitkeep` placeholder for Fynd Sans files
+5. **Writes** `CLAUDE.md` at project root (AI context for Claude / Cursor)
+6. **Prepends** the token import to your global stylesheet
+7. **Installs** `@fontsource/inter-display`, `@fontsource/inter`, and `lucide-react` if you want them
+
+---
+
+## After install — the one manual step
+
+Fynd Sans is a proprietary font and cannot be distributed via npm.  
+After running `fynd-ds init`, place the `.woff2` files in the fonts directory the installer created:
+
+```
+FyndSans-Regular.woff2
+FyndSans-Medium.woff2
+FyndSans-SemiBold.woff2
+FyndSans-Bold.woff2
+```
+
+Obtain them from the design assets repo or contact **design@fynd.com**.
+
+---
+
+## Files installed
+
+| File | Purpose |
+|------|---------|
+| `{stylesDir}/fynd-tokens.css` | All CSS custom properties — tokens, spacing, radius, component tokens |
+| `FYND_DESIGN_SYSTEM.md` | Full design system reference doc |
+| `CLAUDE.md` | AI context file (if opted in) — Claude and Cursor read this automatically |
+| `.fynd-ds-readme.md` | Quick-reference for the installed configuration |
+| `{fontsDir}/.gitkeep` | Placeholder for Fynd Sans font files |
+
+---
+
+## Token reference
+
+After install, use CSS variables directly:
+
+```css
+/* Typography */
+font-family: var(--font-family--primary);   /* Fynd Sans    — headings      */
+font-family: var(--font-family--secondary); /* Inter Display — body         */
+font-family: var(--font-family--ui);        /* Inter         — buttons, nav */
+
+/* Colors */
+color: var(--text--title);                  /* #0e0e0e */
+color: var(--text--subtext);                /* #5b5c5d */
+background: var(--blue--blue-fill);         /* #f9fbff */
+
+/* Spacing */
+gap: var(--spacing--24);                    /* 24px */
+
+/* Radius */
+border-radius: var(--border-radius--pill);  /* 250px — buttons */
+border-radius: var(--border-radius--16);    /* 16px  — cards   */
+```
+
+## Icons
+
+```bash
+# Installed automatically if you opt in
+npm install lucide-react
+```
+
+```jsx
+import { ArrowRight, ShoppingBag } from 'lucide-react'
+<ArrowRight size={16} strokeWidth={1.5} />
+```
+
+Always use `strokeWidth={1.5}` — Fynd icon convention.
+
+---
+
+## Publishing to internal registry
+
+```bash
+# Set your internal npm registry
+npm config set @brewedby:registry https://your-registry.company.com
+
+# Publish
+npm publish
+```
+
+Then any team member can run:
+```bash
+npx @brewedby/ds init
+```

package/bin/fynd-ds.js

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const { run } = require('../lib/installer');
+
+run().catch((err) => {
+  console.error(err.message);
+  process.exit(1);
+});

package/lib/installer.js

@@ -0,0 +1,367 @@
+'use strict';
+
+const fs    = require('fs');
+const path  = require('path');
+const { execSync } = require('child_process');
+const prompts = require('prompts');
+const k       = require('kleur');
+
+const TEMPLATES_DIR = path.join(__dirname, '..', 'templates');
+
+// ─────────────────────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────────────────────
+
+function exists(p) {
+  return fs.existsSync(p);
+}
+
+function ensureDir(p) {
+  fs.mkdirSync(p, { recursive: true });
+}
+
+function write(dest, content) {
+  ensureDir(path.dirname(dest));
+  fs.writeFileSync(dest, content, 'utf8');
+}
+
+function copy(src, dest) {
+  ensureDir(path.dirname(dest));
+  fs.copyFileSync(src, dest);
+}
+
+function readTemplate(name) {
+  return fs.readFileSync(path.join(TEMPLATES_DIR, name), 'utf8');
+}
+
+function detectPackageManager(cwd) {
+  if (exists(path.join(cwd, 'pnpm-lock.yaml')))  return 'pnpm';
+  if (exists(path.join(cwd, 'yarn.lock')))        return 'yarn';
+  if (exists(path.join(cwd, 'bun.lockb')))        return 'bun';
+  return 'npm';
+}
+
+function detectFramework(cwd) {
+  const pkg = path.join(cwd, 'package.json');
+  if (!exists(pkg)) return 'unknown';
+  const json = JSON.parse(fs.readFileSync(pkg, 'utf8'));
+  const deps = { ...json.dependencies, ...json.devDependencies };
+  if (deps['astro'])   return 'astro';
+  if (deps['next'])    return 'nextjs';
+  if (deps['vite'])    return 'vite';
+  if (deps['react'])   return 'react';
+  return 'vanilla';
+}
+
+function installDeps(packages, pm) {
+  const cmd = {
+    npm:  `npm install --save-dev ${packages.join(' ')}`,
+    pnpm: `pnpm add -D ${packages.join(' ')}`,
+    yarn: `yarn add --dev ${packages.join(' ')}`,
+    bun:  `bun add -d ${packages.join(' ')}`,
+  }[pm];
+  execSync(cmd, { stdio: 'inherit' });
+}
+
+// ─────────────────────────────────────────────────────────────
+// Framework-specific paths
+// ─────────────────────────────────────────────────────────────
+
+const FRAMEWORK_CONFIG = {
+  astro: {
+    label:       'Astro',
+    tokensPath:  'src/styles/fynd-tokens.css',
+    fontsPath:   'public/fonts',
+    claudePath:  'CLAUDE.md',
+    globalsCss:  'src/styles/globals.css',
+    fontUrlBase: '/fonts',
+  },
+  nextjs: {
+    label:       'Next.js',
+    tokensPath:  'src/styles/fynd-tokens.css',
+    fontsPath:   'public/fonts',
+    claudePath:  'CLAUDE.md',
+    globalsCss:  'src/app/globals.css',
+    fontUrlBase: '/fonts',
+  },
+  vite: {
+    label:       'Vite / React',
+    tokensPath:  'src/styles/fynd-tokens.css',
+    fontsPath:   'src/assets/fonts',
+    claudePath:  'CLAUDE.md',
+    globalsCss:  'src/styles/globals.css',
+    fontUrlBase: '/assets/fonts',
+  },
+  react: {
+    label:       'React (CRA)',
+    tokensPath:  'src/styles/fynd-tokens.css',
+    fontsPath:   'public/fonts',
+    claudePath:  'CLAUDE.md',
+    globalsCss:  'src/index.css',
+    fontUrlBase: '/fonts',
+  },
+  vanilla: {
+    label:       'Vanilla HTML',
+    tokensPath:  'assets/css/fynd-tokens.css',
+    fontsPath:   'assets/fonts',
+    claudePath:  'CLAUDE.md',
+    globalsCss:  null,
+    fontUrlBase: '/assets/fonts',
+  },
+};
+
+// ─────────────────────────────────────────────────────────────
+// Tokens file — patch font URL to match project's asset path
+// ─────────────────────────────────────────────────────────────
+
+function patchTokensFontPaths(content, fontUrlBase) {
+  return content.replace(
+    /url\('\/assets\/fonts\/(FyndSans-[^']+)'\)/g,
+    `url('${fontUrlBase}/$1')`
+  );
+}
+
+// ─────────────────────────────────────────────────────────────
+// Globals CSS import snippet
+// ─────────────────────────────────────────────────────────────
+
+function buildGlobalsSnippet(tokensPath, framework) {
+  const relativePath = tokensPath.startsWith('src/')
+    ? './' + path.basename(tokensPath)
+    : '../' + tokensPath;
+
+  const googleFonts = [
+    `/* Fynd One Design System */`,
+    `@import '${relativePath}'; /* tokens + Fynd Sans @font-face */`,
+    ``,
+    `/* Inter Display + Inter via @fontsource (run: npm install @fontsource/inter-display @fontsource/inter) */`,
+    `/* @import '@fontsource/inter-display/400.css'; */`,
+    `/* @import '@fontsource/inter-display/500.css'; */`,
+    `/* @import '@fontsource/inter-display/600.css'; */`,
+    `/* @import '@fontsource/inter-display/700.css'; */`,
+    `/* @import '@fontsource/inter/400.css'; */`,
+    `/* @import '@fontsource/inter/500.css'; */`,
+    `/* @import '@fontsource/inter/600.css'; */`,
+  ].join('\n');
+
+  return googleFonts;
+}
+
+// ─────────────────────────────────────────────────────────────
+// .fynd-ds-readme.md — placed at project root, quick reference
+// ─────────────────────────────────────────────────────────────
+
+function buildProjectReadme(fw, config) {
+  return `# Fynd One Design System — Installed
+
+**Framework:** ${config.label}  
+**Tokens:** \`${config.tokensPath}\`  
+**CLAUDE.md:** \`${config.claudePath}\`  
+
+## Next steps
+
+### 1 — Add Fynd Sans font files
+Place the following \`.woff2\` files in \`${config.fontsPath}/\`:
+\`\`\`
+${config.fontsPath}/FyndSans-Regular.woff2
+${config.fontsPath}/FyndSans-Medium.woff2
+${config.fontsPath}/FyndSans-SemiBold.woff2
+${config.fontsPath}/FyndSans-Bold.woff2
+\`\`\`
+Get them from the design assets repo or contact design@fynd.com.
+
+### 2 — Install open-source fonts
+\`\`\`bash
+npm install @fontsource/inter-display @fontsource/inter
+\`\`\`
+Then uncomment the \`@fontsource\` import lines in your global stylesheet.
+
+### 3 — Install Lucide icons
+\`\`\`bash
+npm install lucide-react
+\`\`\`
+
+### 4 — Import tokens in your global stylesheet
+\`\`\`css
+@import './fynd-tokens.css'; /* always first */
+\`\`\`
+
+Refer to \`${config.claudePath}\` for full component patterns, token reference, and dos/don'ts.
+`;
+}
+
+// ─────────────────────────────────────────────────────────────
+// Main run()
+// ─────────────────────────────────────────────────────────────
+
+async function run() {
+  const cwd = process.cwd();
+
+  console.log('');
+  console.log(k.bold().white('  Fynd One Design System') + k.dim(' — installer'));
+  console.log('');
+
+  const detectedFramework = detectFramework(cwd);
+  const detectedPm        = detectPackageManager(cwd);
+
+  // ── Prompt 1: framework ──────────────────────────────────
+  const { framework } = await prompts({
+    type:    'select',
+    name:    'framework',
+    message: 'Which framework is this project using?',
+    choices: [
+      { title: 'Astro',        value: 'astro',   description: detectedFramework === 'astro'   ? '(detected)' : '' },
+      { title: 'Next.js',      value: 'nextjs',  description: detectedFramework === 'nextjs'  ? '(detected)' : '' },
+      { title: 'Vite / React', value: 'vite',    description: detectedFramework === 'vite'    ? '(detected)' : '' },
+      { title: 'React (CRA)',  value: 'react',   description: detectedFramework === 'react'   ? '(detected)' : '' },
+      { title: 'Vanilla HTML', value: 'vanilla', description: '' },
+    ],
+    initial: ['astro','nextjs','vite','react','vanilla'].indexOf(detectedFramework) > -1
+      ? ['astro','nextjs','vite','react','vanilla'].indexOf(detectedFramework)
+      : 0,
+  }, { onCancel: () => process.exit(0) });
+
+  const config = FRAMEWORK_CONFIG[framework];
+
+  // ── Prompt 2: tokens destination ────────────────────────
+  const { tokensPath } = await prompts({
+    type:    'text',
+    name:    'tokensPath',
+    message: 'Where should fynd-tokens.css be placed?',
+    initial: config.tokensPath,
+  }, { onCancel: () => process.exit(0) });
+
+  // ── Prompt 3: font files destination ────────────────────
+  const { fontsPath } = await prompts({
+    type:    'text',
+    name:    'fontsPath',
+    message: 'Where will Fynd Sans .woff2 files live?',
+    initial: config.fontsPath,
+    hint:    'You\'ll drop the files here after install',
+  }, { onCancel: () => process.exit(0) });
+
+  // ── Prompt 4: CLAUDE.md ──────────────────────────────────
+  const { writeClaude } = await prompts({
+    type:    'confirm',
+    name:    'writeClaude',
+    message: 'Write CLAUDE.md at project root? (recommended for Claude / Cursor)',
+    initial: true,
+  }, { onCancel: () => process.exit(0) });
+
+  // ── Prompt 5: install @fontsource packages ───────────────
+  const { installFontsource } = await prompts({
+    type:    'confirm',
+    name:    'installFontsource',
+    message: `Install @fontsource/inter-display + @fontsource/inter via ${detectedPm}?`,
+    initial: true,
+  }, { onCancel: () => process.exit(0) });
+
+  // ── Prompt 6: install lucide-react ──────────────────────
+  const { installLucide } = await prompts({
+    type:    'confirm',
+    name:    'installLucide',
+    message: `Install lucide-react (icon library) via ${detectedPm}?`,
+    initial: framework !== 'vanilla',
+  }, { onCancel: () => process.exit(0) });
+
+  console.log('');
+
+  // ── Derive font URL base from fontsPath ──────────────────
+  // e.g. "public/fonts" → "/fonts", "src/assets/fonts" → "/assets/fonts"
+  let fontUrlBase = config.fontUrlBase;
+  if (fontsPath !== config.fontsPath) {
+    // User changed the path — try to infer URL base
+    const stripped = fontsPath.replace(/^public/, '').replace(/^src\//, '/');
+    fontUrlBase = stripped.startsWith('/') ? stripped : `/${stripped}`;
+  }
+
+  // ── Write fynd-tokens.css ────────────────────────────────
+  const step = (msg) => console.log('  ' + k.green('✔') + '  ' + msg);
+  const warn = (msg) => console.log('  ' + k.yellow('!') + '  ' + k.yellow(msg));
+
+  let tokensContent = readTemplate('fynd-tokens.css');
+  tokensContent = patchTokensFontPaths(tokensContent, fontUrlBase);
+  const tokensDest = path.join(cwd, tokensPath);
+  write(tokensDest, tokensContent);
+  step(`fynd-tokens.css → ${k.dim(tokensPath)}`);
+
+  // ── Write FYND_DESIGN_SYSTEM.md / CLAUDE.md ──────────────
+  const dsContent = readTemplate('FYND_DESIGN_SYSTEM.md');
+  if (writeClaude) {
+    const claudeDest = path.join(cwd, 'CLAUDE.md');
+    const alreadyExists = exists(claudeDest);
+    write(claudeDest, dsContent);
+    step(`CLAUDE.md → ${k.dim('CLAUDE.md')}${alreadyExists ? k.dim(' (overwritten)') : ''}`);
+  }
+  // Always write the full reference doc
+  write(path.join(cwd, 'FYND_DESIGN_SYSTEM.md'), dsContent);
+  step(`FYND_DESIGN_SYSTEM.md → ${k.dim('FYND_DESIGN_SYSTEM.md')}`);
+
+  // ── Create fonts directory with .gitkeep ─────────────────
+  const fontsDest = path.join(cwd, fontsPath);
+  ensureDir(fontsDest);
+  const gitkeep = path.join(fontsDest, '.gitkeep');
+  if (!exists(gitkeep)) {
+    write(gitkeep, '# Place FyndSans-*.woff2 font files here\n# Contact design@fynd.com to obtain them\n');
+  }
+  step(`Font directory ready → ${k.dim(fontsPath + '/')}`);
+
+  // ── Append import to globals CSS ─────────────────────────
+  if (config.globalsCss) {
+    const globalsPath = path.join(cwd, config.globalsCss);
+    const snippet = buildGlobalsSnippet(tokensPath, framework);
+    if (exists(globalsPath)) {
+      const existing = fs.readFileSync(globalsPath, 'utf8');
+      if (!existing.includes('fynd-tokens.css')) {
+        fs.writeFileSync(globalsPath, snippet + '\n\n' + existing, 'utf8');
+        step(`Import prepended → ${k.dim(config.globalsCss)}`);
+      } else {
+        warn(`Skipped globals.css — fynd-tokens.css already imported`);
+      }
+    } else {
+      write(globalsPath, snippet + '\n');
+      step(`Created ${k.dim(config.globalsCss)} with token import`);
+    }
+  }
+
+  // ── Write quick-reference readme ─────────────────────────
+  const projectReadme = buildProjectReadme(framework, {
+    ...config,
+    tokensPath,
+    fontsPath,
+  });
+  write(path.join(cwd, '.fynd-ds-readme.md'), projectReadme);
+  step(`.fynd-ds-readme.md → ${k.dim('.fynd-ds-readme.md')} (quick reference)`);
+
+  // ── Install packages ─────────────────────────────────────
+  const toInstall = [];
+  if (installFontsource) toInstall.push('@fontsource/inter-display', '@fontsource/inter');
+  if (installLucide)     toInstall.push('lucide-react');
+
+  if (toInstall.length > 0) {
+    console.log('');
+    console.log(k.dim('  Installing packages...'));
+    try {
+      installDeps(toInstall, detectedPm);
+      step(`Installed: ${toInstall.join(', ')}`);
+    } catch {
+      warn(`Package install failed — run manually:`);
+      warn(`  ${detectedPm} install ${toInstall.join(' ')}`);
+    }
+  }
+
+  // ── Summary ───────────────────────────────────────────────
+  console.log('');
+  console.log(k.bold().white('  Fynd DS installed') + k.green(' ✔'));
+  console.log('');
+  console.log(k.dim('  One manual step remaining:'));
+  console.log('');
+  console.log(`  ${k.white('Drop Fynd Sans .woff2 files into:')} ${k.cyan(fontsPath + '/')}`);
+  console.log(`  ${k.dim('FyndSans-Regular.woff2, FyndSans-Medium.woff2, FyndSans-SemiBold.woff2, FyndSans-Bold.woff2')}`);
+  console.log(`  ${k.dim('Obtain from the design assets repo or contact design@fynd.com')}`);
+  console.log('');
+  console.log(`  ${k.dim('Full reference: FYND_DESIGN_SYSTEM.md')}`);
+  console.log('');
+}
+
+module.exports = { run };

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@brewedby/ds",
+  "version": "1.0.0",
+  "description": "Fynd One Design System installer — sets up tokens, fonts, icons and CLAUDE.md in any project",
+  "keywords": [
+    "fynd",
+    "design-system",
+    "cli",
+    "tokens",
+    "css"
+  ],
+  "license": "UNLICENSED",
+  "private": false,
+  "bin": {
+    "fynd-ds": "./bin/fynd-ds.js"
+  },
+  "files": [
+    "bin/",
+    "lib/",
+    "templates/"
+  ],
+  "scripts": {
+    "start": "node bin/fynd-ds.js"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fynd/ds-cli"
+  },
+  "devDependencies": {
+    "kleur": "^4.1.5",
+    "prompts": "^2.4.2"
+  }
+}