@shokirovr16/frontend-library 0.1.2

package/src/lib/styles.js

@@ -0,0 +1,223 @@
+import path from 'path';
+import pc from 'picocolors';
+import { copyFile, ensureDirectory, pathExists, readFile, writeFile } from './fs.js';
+import { projectRoot, templatePath } from './paths.js';
+import { resolveTargetRoot } from './targets.js';
+
+const { cyan, green, yellow } = pc;
+
+const TAILWIND_CONFIG_CANDIDATES = [
+  'tailwind.config.js',
+  'tailwind.config.cjs',
+  'tailwind.config.mjs',
+];
+
+async function detectTailwindConfig(root) {
+  for (const filename of TAILWIND_CONFIG_CANDIDATES) {
+    const configPath = path.resolve(root, filename);
+    if (await pathExists(configPath)) {
+      return configPath;
+    }
+  }
+  return null;
+}
+
+function ensureRelativePath(p) {
+  if (p.startsWith('.')) return p;
+  return `./${p}`;
+}
+
+function ensureThemeImport(content, configPath, stylesPath) {
+  const rel = ensureRelativePath(path.relative(path.dirname(configPath), path.resolve(projectRoot(), stylesPath, 'theme.cjs')));
+  if (content.includes('theme.cjs') && content.match(/\btheme\b/)) {
+    return content;
+  }
+
+  if (content.includes('module.exports')) {
+    return `const theme = require("${rel}");\n${content}`;
+  }
+
+  if (content.includes('export default')) {
+    const importLine = `import theme from "${rel}";\n`;
+    if (content.startsWith('import ')) {
+      const firstExport = content.indexOf('export default');
+      const beforeExport = content.slice(0, firstExport);
+      if (beforeExport.includes(importLine.trim())) return content;
+      return beforeExport + importLine + content.slice(firstExport);
+    }
+    return importLine + content;
+  }
+
+  return content;
+}
+
+function ensureThemeColors(content) {
+  if (content.match(/colors\s*:\s*theme\.colors/)) return content;
+
+  if (content.match(/extend\s*:\s*{/)) {
+    return content.replace(/extend\s*:\s*{/, (match) => `${match}\n      colors: theme.colors,`);
+  }
+
+  if (content.match(/theme\s*:\s*{/)) {
+    return content.replace(/theme\s*:\s*{/, (match) => `${match}\n    extend: { colors: theme.colors },`);
+  }
+
+  if (content.match(/export\s+default\s*{/) || content.match(/module\.exports\s*=\s*{/)) {
+    return content.replace(/({\s*)/, (match) => `${match}\n  theme: { extend: { colors: theme.colors } },`);
+  }
+
+  return content;
+}
+
+async function ensureTailwindSetup(config) {
+  const root = projectRoot();
+  const configPath = await detectTailwindConfig(root);
+  if (!configPath) {
+    const stylesRoot = path.resolve(root, config.stylesPath || 'src/styles');
+    const relTheme = ensureRelativePath(path.relative(root, path.join(stylesRoot, 'theme.cjs')));
+    const fallbackPath = path.resolve(root, 'tailwind.config.cjs');
+    const content = `const theme = require("${relTheme}");\n\nmodule.exports = {\n  content: [\n    "./index.html",\n    "./src/**/*.{js,jsx,ts,tsx}",\n  ],\n  theme: {\n    extend: {\n      colors: theme.colors,\n    },\n  },\n  plugins: [],\n};\n`;
+
+    await writeFile(fallbackPath, content);
+    console.log(green('Tailwind config created (tailwind.config.cjs) with styles/theme.cjs colors.'));
+    return true;
+  }
+
+  const raw = await readFile(configPath, 'utf8');
+  let next = raw;
+  next = ensureThemeImport(next, configPath, config.stylesPath || 'src/styles');
+  next = ensureThemeColors(next);
+
+  if (next !== raw) {
+    await writeFile(configPath, next);
+    console.log(green('Tailwind config updated with styles/theme.cjs colors.'));
+    return true;
+  }
+
+  return false;
+}
+
+async function ensureCssImports(config) {
+  const root = projectRoot();
+  const candidates = ['src/index.css', 'src/main.css', 'src/app.css'];
+  let cssPath = null;
+  for (const candidate of candidates) {
+    const full = path.resolve(root, candidate);
+    if (await pathExists(full)) {
+      cssPath = full;
+      break;
+    }
+  }
+  if (!cssPath) {
+    console.log(yellow('Global CSS file not found (looked for src/index.css, src/main.css, src/app.css).'));
+    return false;
+  }
+
+  const relStylesPath = ensureRelativePath(path.relative(path.dirname(cssPath), path.resolve(root, config.stylesPath || 'src/styles')));
+  const variablesImport = `@import "${relStylesPath}/variables.css";`;
+  const utilitiesImport = `@import "${relStylesPath}/type-utility-classes.css";`;
+
+  const raw = await readFile(cssPath, 'utf8');
+  let next = raw;
+  if (!raw.includes(variablesImport)) {
+    next = `${variablesImport}\n${next}`;
+  }
+  if (!next.includes(utilitiesImport)) {
+    next = `${utilitiesImport}\n${next}`;
+  }
+
+  if (next !== raw) {
+    await writeFile(cssPath, next);
+    console.log(green(`Global CSS updated with token imports (${path.relative(root, cssPath)}).`));
+    return true;
+  }
+  return false;
+}
+
+function parseVersion(version) {
+  if (!version) return [0, 0, 0];
+  return String(version)
+    .split('.')
+    .map((part) => Number.parseInt(part, 10))
+    .map((num) => (Number.isNaN(num) ? 0 : num));
+}
+
+function compareSemver(a, b) {
+  const left = parseVersion(a);
+  const right = parseVersion(b);
+  const length = Math.max(left.length, right.length, 3);
+  for (let i = 0; i < length; i += 1) {
+    const l = left[i] ?? 0;
+    const r = right[i] ?? 0;
+    if (l > r) return 1;
+    if (l < r) return -1;
+  }
+  return 0;
+}
+
+async function installEntryFiles(entry, targetRoot, { overwrite }) {
+  const installedFiles = [];
+  for (const file of entry.files ?? []) {
+    const source = templatePath(file.source);
+    const destination = path.resolve(targetRoot, file.target);
+    await ensureDirectory(path.dirname(destination));
+    await copyFile(source, destination, { overwrite });
+    installedFiles.push(path.relative(targetRoot, destination));
+  }
+  return installedFiles;
+}
+
+export async function ensureStylesInstalled(registry, config) {
+  const entry = registry.styles;
+  if (!entry) return { updated: false, config };
+
+  const targetRoot = resolveTargetRoot(entry, config);
+  const installed = config.installed?.styles;
+  const registryVersion = entry.version ?? '0.0.0';
+
+  if (!installed) {
+    console.log(cyan('Installing design tokens (styles)...'));
+    const files = await installEntryFiles(entry, targetRoot, { overwrite: true });
+    const next = {
+      ...config,
+      installed: {
+        ...config.installed,
+        styles: {
+          version: registryVersion,
+          files,
+          installedAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+        },
+      },
+    };
+    console.log(green('Styles installed.'));
+    await ensureTailwindSetup(config);
+    await ensureCssImports(config);
+    return { updated: true, config: next };
+  }
+
+  const installedVersion = installed.version ?? '0.0.0';
+  if (compareSemver(installedVersion, registryVersion) >= 0) {
+    return { updated: false, config };
+  }
+
+  console.log(cyan('Updating design tokens (styles)...'));
+  const files = await installEntryFiles(entry, targetRoot, { overwrite: true });
+  const next = {
+    ...config,
+    installed: {
+      ...config.installed,
+      styles: {
+        ...installed,
+        version: registryVersion,
+        files,
+        installedAt: installed.installedAt ?? new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+      },
+    },
+  };
+  console.log(yellow('Styles updated.'));
+  await ensureTailwindSetup(config);
+  await ensureCssImports(config);
+  return { updated: true, config: next };
+}

package/src/lib/targets.js

@@ -0,0 +1,15 @@
+import path from 'path';
+import { componentsDir, projectRoot } from './paths.js';
+
+export function resolveTargetRoot(entry, config) {
+  if (entry?.targetRoot === 'styles') {
+    const stylesPath = config.stylesPath || 'src/styles';
+    return path.resolve(projectRoot(), stylesPath);
+  }
+  if (entry?.targetRoot) {
+    return path.resolve(projectRoot(), entry.targetRoot);
+  }
+  return config.componentsPath
+    ? path.resolve(projectRoot(), config.componentsPath)
+    : componentsDir();
+}

package/src/lib/theme.js

@@ -0,0 +1,102 @@
+import path from 'path';
+import { pathExists, readFile, readJson, writeFile } from './fs.js';
+import { projectRoot, templatePath } from './paths.js';
+
+function safeName(s) {
+  return String(s || '')
+    .trim()
+    .replace(/\s+/g, '-')
+    .replace(/[^a-zA-Z0-9-_]/g, '')
+    .toLowerCase();
+}
+
+async function modesFromVariablesJson(filePath) {
+  if (!(await pathExists(filePath))) return [];
+  const json = await readJson(filePath);
+  const modes = new Set();
+  for (const collection of json.collections ?? []) {
+    for (const mode of collection.modes ?? []) {
+      if (mode?.name) modes.add(mode.name);
+    }
+  }
+  return Array.from(modes).map((name) => ({ name, safe: safeName(name) }));
+}
+
+async function modesFromVariablesCss(filePath) {
+  if (!(await pathExists(filePath))) return [];
+  const raw = await readFile(filePath, 'utf8');
+  const matches = raw.matchAll(/\.theme-([a-z0-9-]+)\s*\{/g);
+  const modes = new Set();
+  for (const match of matches) {
+    if (match[1]) modes.add(match[1]);
+  }
+  return Array.from(modes).map((safe) => ({ name: safe, safe }));
+}
+
+export async function getAvailableModes(config = {}) {
+  const stylesPath = config.stylesPath || 'src/styles';
+  const root = projectRoot();
+
+  const projectJson = path.resolve(root, stylesPath, 'variables.json');
+  const projectCss = path.resolve(root, stylesPath, 'variables.css');
+  const templateJson = templatePath('styles', 'variables.json');
+
+  let modes = await modesFromVariablesJson(projectJson);
+  if (modes.length === 0) {
+    modes = await modesFromVariablesCss(projectCss);
+  }
+  if (modes.length === 0) {
+    modes = await modesFromVariablesJson(templateJson);
+  }
+
+  return modes;
+}
+
+export function resolveMode(modes, input) {
+  if (!input) return null;
+  const normalized = String(input).trim().toLowerCase();
+  return (
+    modes.find((m) => m.name.toLowerCase() === normalized) ||
+    modes.find((m) => m.safe.toLowerCase() === normalized) ||
+    modes.find((m) => safeName(m.name) === normalized) ||
+    null
+  );
+}
+
+export async function applyThemeMode(modeSafe) {
+  const root = projectRoot();
+  const htmlPath = path.resolve(root, 'index.html');
+  if (!(await pathExists(htmlPath))) {
+    return { updated: false, message: 'index.html not found.' };
+  }
+
+  const raw = await readFile(htmlPath, 'utf8');
+  const match = raw.match(/<html[^>]*>/i);
+  if (!match) {
+    return { updated: false, message: 'No <html> tag found in index.html.' };
+  }
+
+  const htmlTag = match[0];
+  const classMatch = htmlTag.match(/class\s*=\s*["']([^"']*)["']/i);
+  const current = classMatch ? classMatch[1] : '';
+  const nextClasses = current
+    .split(/\s+/)
+    .filter(Boolean)
+    .filter((c) => !c.startsWith('theme-'))
+    .concat(modeSafe ? [`theme-${modeSafe}`] : []);
+
+  let nextTag = htmlTag;
+  if (classMatch) {
+    nextTag = htmlTag.replace(classMatch[0], `class=\"${nextClasses.join(' ')}\"`);
+  } else if (modeSafe) {
+    nextTag = htmlTag.replace(/<html/i, `<html class=\"${nextClasses.join(' ')}\"`);
+  }
+
+  const next = raw.replace(htmlTag, nextTag);
+  if (next !== raw) {
+    await writeFile(htmlPath, next);
+    return { updated: true };
+  }
+
+  return { updated: false };
+}

package/templates/docs/cmfrt-doc.md

@@ -0,0 +1,82 @@
+# cmfrt Docs (Quick Start + Troubleshooting)
+
+## Quick Start
+1. `cmfrt init`
+2. `cmfrt add button`
+3. Use the component:
+
+```jsx
+import { Button } from "./src/components/ui/button";
+
+export default function App() {
+  return (
+    <Button tone="neutral" type="filled">
+      Button
+    </Button>
+  );
+}
+```
+
+## Required Setup (Tokens + Tailwind)
+Make sure your Tailwind config extends colors from `styles/theme.cjs`:
+
+```js
+const theme = require("./src/styles/theme.cjs");
+
+module.exports = {
+  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {
+      colors: theme.colors,
+    },
+  },
+  plugins: [],
+};
+```
+
+And your global CSS imports token files:
+
+```css
+@import "tailwindcss";
+@import "./styles/variables.css";
+@import "./styles/type-utility-classes.css";
+@config "../tailwind.config.cjs";
+```
+
+## Common Issues
+### 1) Token classes not working
+Symptoms: `bg-colorbase-...` classes exist but no color shows.
+Fix:
+- Ensure `styles/variables.css` is imported in global CSS.
+- Ensure Tailwind config extends colors from `styles/theme.cjs`.
+
+### 2) Padding/class not applied
+If you add `p-4` manually but it does not show:
+- `size` classes might override it via `twMerge`.
+- Put your custom class after `sizeClass`, or remove size.
+
+### 3) Filled vs flled typo
+Make sure `type="filled"`. The component normalizes `flled`, but `filled` is correct.
+
+### 4) Disabled styles not showing
+Disabled styles only apply when `disabled={true}` is set on `<Button />`.
+
+## Theme Mode
+List modes:
+```
+cmfrt theme --list
+```
+Set mode:
+```
+cmfrt theme --set "Client light"
+```
+
+## Uninstall
+To remove a component:
+```
+cmfrt uninstall button
+```
+Remove everything:
+```
+cmfrt uninstall --all
+```

package/templates/lib/utils.js

@@ -0,0 +1,6 @@
+import clsx from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs) {
+  return twMerge(clsx(...inputs));
+}

package/templates/registry.json

@@ -0,0 +1,42 @@
+{
+  "button": {
+    "version": "1.0.2",
+    "category": "forms",
+    "description": "Clickable button with variants",
+    "files": [
+      {
+        "source": "ui/button.jsx",
+        "target": "button.jsx"
+      }
+    ],
+    "dependencies": [
+      "clsx",
+      "tailwind-merge"
+    ]
+  },
+  "styles": {
+    "version": "1.0.3",
+    "category": "styles",
+    "description": "Design tokens and global style utilities",
+    "targetRoot": "styles",
+    "files": [
+      {
+        "source": "styles/variables.css",
+        "target": "variables.css"
+      },
+      {
+        "source": "styles/theme.cjs",
+        "target": "theme.cjs"
+      },
+      {
+        "source": "styles/type-utilities.css",
+        "target": "type-utilities.css"
+      },
+      {
+        "source": "styles/type-utility-classes.css",
+        "target": "type-utility-classes.css"
+      }
+    ],
+    "dependencies": []
+  }
+}