npm - rizzo-css - Versions diffs - 0.0.4 → 0.0.5 - Mend

rizzo-css 0.0.4 → 0.0.5

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.

Files changed (18) hide show

package/README.md +1 -1
package/bin/rizzo-css.js +201 -30
package/package.json +1 -1
package/scaffold/astro-app/astro.config.mjs +4 -0
package/scaffold/astro-app/package.json +13 -0
package/scaffold/astro-app/public/.gitkeep +0 -0
package/scaffold/astro-app/src/layouts/Layout.astro +19 -0
package/scaffold/astro-app/src/pages/index.astro +13 -0
package/scaffold/astro-app/tsconfig.json +5 -0
package/scaffold/svelte-app/package.json +17 -0
package/scaffold/svelte-app/src/app.d.ts +13 -0
package/scaffold/svelte-app/src/app.html +12 -0
package/scaffold/svelte-app/src/routes/+layout.svelte +5 -0
package/scaffold/svelte-app/src/routes/+page.svelte +12 -0
package/scaffold/svelte-app/static/.gitkeep +0 -0
package/scaffold/svelte-app/svelte.config.js +11 -0
package/scaffold/svelte-app/tsconfig.json +15 -0
package/scaffold/svelte-app/vite.config.ts +6 -0

package/README.md CHANGED Viewed

@@ -12,7 +12,7 @@ pnpm add rizzo-css
 yarn add rizzo-css
 ```
-**Quick start (no install):** `npx rizzo-css init` scaffolds a project. Choose **Vanilla JS** (yellow in the CLI), **Astro** (orange), or **Svelte** (orange-red). All options get the **same CSS and component styles**. Vanilla JS gets an example page with theme switcher and sample components; Astro/Svelte can optionally add component files. To use the **official Svelte or Astro scaffold** plus Rizzo CSS, create the app with their CLI first, then add our CSS:
+**Quick start (no install):** `npx rizzo-css init` — first choose **add to existing project** or **create new**. Existing: framework (auto-detect), themes, optional components. New: scaffold (Vanilla example, default Astro app, or default Svelte app; CLI colors: Vanilla = yellow, Astro = orange, Svelte = orange-red). All get the **same CSS and component styles**. To use the **official Svelte or Astro scaffold** plus Rizzo CSS, create the app with their CLI first, then run `npx rizzo-css add`:
 ```bash
 npm create svelte@latest my-app && cd my-app && npx rizzo-css add

package/bin/rizzo-css.js CHANGED Viewed

@@ -259,7 +259,7 @@ Usage:
   npx rizzo-css <command> [options]
 Commands:
-  init    Scaffold a minimal project (menus: location, framework, themes, components)
+  init    Add Rizzo to existing project or scaffold new one (first menu: existing vs new)
   add     Copy Rizzo CSS into the current project (auto-detects Svelte/Astro)
   theme   List all available themes (use in init or set data-theme on <html>)
   help    Show this help
@@ -363,6 +363,14 @@ function getScaffoldVanillaIndex() {
   return join(getPackageRoot(), 'scaffold', 'vanilla', 'index.html');
 }
+function getScaffoldAstroAppDir() {
+  return join(getPackageRoot(), 'scaffold', 'astro-app');
+}
+function getScaffoldSvelteAppDir() {
+  return join(getPackageRoot(), 'scaffold', 'svelte-app');
+}
 function copyDirRecursive(src, dest) {
   mkdirSync(dest, { recursive: true });
   const entries = readdirSync(src, { withFileTypes: true });
@@ -377,6 +385,31 @@ function copyDirRecursive(src, dest) {
   }
 }
+/** Copy directory recursively; in text files (utf-8), replace each key in replacements with its value. */
+function copyDirRecursiveWithReplacements(src, dest, replacements) {
+  mkdirSync(dest, { recursive: true });
+  const entries = readdirSync(src, { withFileTypes: true });
+  const textExtensions = new Set(['.html', '.astro', '.svelte', '.ts', '.js', '.mjs', '.json', '.css', '.md']);
+  for (const e of entries) {
+    const srcPath = join(src, e.name);
+    const destPath = join(dest, e.name);
+    if (e.isDirectory()) {
+      copyDirRecursiveWithReplacements(srcPath, destPath, replacements);
+    } else {
+      const ext = srcPath.slice(srcPath.lastIndexOf('.'));
+      if (textExtensions.has(ext)) {
+        let content = readFileSync(srcPath, 'utf8');
+        for (const [key, value] of Object.entries(replacements)) {
+          content = content.split(key).join(value);
+        }
+        writeFileSync(destPath, content, 'utf8');
+      } else {
+        copyFileSync(srcPath, destPath);
+      }
+    }
+  }
+}
 function copySvelteComponents(projectDir, selectedNames) {
   const scaffoldDir = getScaffoldSvelteDir();
   if (!existsSync(scaffoldDir)) {
@@ -441,7 +474,104 @@ function copyAstroComponents(projectDir, selectedNames) {
   }
 }
+/** Add Rizzo CSS (and optional components) to an existing project in cwd. */
+async function runAddToExisting() {
+  const cwd = process.cwd();
+  const detected = detectFramework(cwd);
+  const frameworkOptions = [
+    { value: 'vanilla', label: 'Vanilla JS (HTML + CSS)', color: C.vanilla },
+    { value: 'astro', label: 'Astro', color: C.astro },
+    { value: 'svelte', label: 'Svelte', color: C.svelte },
+  ];
+  let frameworkPrompt = '? Framework';
+  if (detected) {
+    frameworkPrompt += ' (detected: ' + detected + ' — pick to confirm or choose another)';
+  }
+  const framework = await selectMenu(frameworkOptions, frameworkPrompt);
+  const selectedThemes = await multiSelectMenu(
+    THEMES.map((t) => ({ value: t, label: t })),
+    '? Themes (Space to toggle, Enter to confirm) — we\'ll suggest the first as default data-theme'
+  );
+  const themeList = selectedThemes.length > 0 ? selectedThemes : [THEMES[0]];
+  const suggestedTheme = THEMES.includes(themeList[0]) ? themeList[0] : THEMES[0];
+  let selectedComponents = [];
+  const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : framework === 'astro' ? ASTRO_COMPONENTS : [];
+  if (componentList.length > 0) {
+    const includeLabel = framework === 'svelte' ? 'Svelte' : 'Astro';
+    const includeChoice = await selectMenu(
+      [
+        { value: 'none', label: 'None' },
+        { value: 'pick', label: 'Yes, pick ' + includeLabel + ' components' },
+      ],
+      '? Include ' + includeLabel + ' components?'
+    );
+    if (includeChoice === 'pick') {
+      selectedComponents = await multiSelectMenu(
+        componentList.map((c) => ({ value: c, label: c })),
+        '? Components (Space to toggle, Enter to confirm)'
+      );
+    }
+  }
+  const cssSource = getCssPath();
+  if (!existsSync(cssSource)) {
+    console.error('Error: Rizzo CSS build not found. Run from repo root: pnpm build:css');
+    process.exit(1);
+  }
+  const paths = getFrameworkCssPaths(framework);
+  const targetDir = join(cwd, paths.targetDir);
+  const cssTarget = join(targetDir, 'rizzo.min.css');
+  mkdirSync(targetDir, { recursive: true });
+  copyFileSync(cssSource, cssTarget);
+  if (framework === 'svelte' && selectedComponents.length > 0) {
+    copySvelteComponents(cwd, selectedComponents);
+  } else if (framework === 'astro' && selectedComponents.length > 0) {
+    copyAstroComponents(cwd, selectedComponents);
+  }
+  const linkHref = paths.linkHref;
+  console.log('\n✓ Rizzo CSS added to your existing project');
+  console.log('  - ' + cssTarget);
+  if (framework === 'svelte') {
+    console.log('\nAdd to your root layout (e.g. src/app.html):');
+    console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
+    console.log('\nSet a theme on <html>: data-theme="' + suggestedTheme + '" (see: npx rizzo-css theme)');
+    if (selectedComponents.length > 0) {
+      console.log('  Components are in src/lib/rizzo — import from \'$lib/rizzo\'.');
+    }
+  } else if (framework === 'astro') {
+    console.log('\nAdd to your layout (e.g. src/layouts/Layout.astro):');
+    console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
+    console.log('\nSet a theme on <html>: data-theme="' + suggestedTheme + '" (see: npx rizzo-css theme)');
+    if (selectedComponents.length > 0) {
+      console.log('  Components are in src/components/rizzo — import from there.');
+    }
+  } else {
+    console.log('\nAdd to your HTML or layout:');
+    console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
+    console.log('\nSet a theme on <html>: data-theme="' + suggestedTheme + '" (see: npx rizzo-css theme)');
+  }
+  console.log('\nDocs: https://rizzo-css.vercel.app\n');
+}
 async function cmdInit() {
+  const initMode = await selectMenu(
+    [
+      { value: 'existing', label: 'Add to existing project (current directory)' },
+      { value: 'new', label: 'Create new project (scaffold)' },
+    ],
+    '? Are you using an existing project or creating a new one?'
+  );
+  if (initMode === 'existing') {
+    await runAddToExisting();
+    return;
+  }
   const projectChoice = await selectMenu(
     [
       { value: 'cwd', label: 'Current directory' },
@@ -487,8 +617,6 @@ async function cmdInit() {
   }
   const projectDir = name ? join(process.cwd(), name) : process.cwd();
-  const cssDir = framework === 'astro' ? join(projectDir, 'public', 'css') : join(projectDir, 'css');
-  const cssTarget = join(cssDir, 'rizzo.min.css');
   const cssSource = getCssPath();
   if (!existsSync(cssSource)) {
@@ -496,25 +624,62 @@ async function cmdInit() {
     process.exit(1);
   }
-  mkdirSync(cssDir, { recursive: true });
-  copyFileSync(cssSource, cssTarget);
-  const linkHref = framework === 'astro' ? '/css/rizzo.min.css' : 'css/rizzo.min.css';
   const themeComment = themeList.length > 0
     ? '\n  <!-- Selected themes: ' + themeList.join(', ') + ' -->'
     : '';
-  const indexPath = join(projectDir, 'index.html');
-  const vanillaScaffoldPath = getScaffoldVanillaIndex();
-  if (framework === 'vanilla' && existsSync(vanillaScaffoldPath)) {
-    let indexHtml = readFileSync(vanillaScaffoldPath, 'utf8');
-    indexHtml = indexHtml
-      .replace(/\{\{DATA_THEME\}\}/g, theme)
-      .replace(/\{\{THEME_LIST_COMMENT\}\}/g, themeComment)
-      .replace(/\{\{TITLE\}\}/g, name || 'App')
-      .replace(/\{\{LINK_HREF\}\}/g, linkHref);
-    writeFileSync(indexPath, indexHtml, 'utf8');
+  const projectNamePkg = name
+    ? name.replace(/\s+/g, '-').toLowerCase()
+    : (framework === 'astro' ? 'my-astro-app' : framework === 'svelte' ? 'my-svelte-app' : 'my-app');
+  const replacements = {
+    '{{DATA_THEME}}': theme,
+    '{{THEME_LIST_COMMENT}}': themeComment,
+    '{{TITLE}}': name || 'App',
+    '{{PROJECT_NAME}}': projectNamePkg,
+  };
+  const astroAppDir = getScaffoldAstroAppDir();
+  const svelteAppDir = getScaffoldSvelteAppDir();
+  let cssTarget;
+  let indexPath;
+  if (framework === 'astro' && existsSync(astroAppDir)) {
+    mkdirSync(projectDir, { recursive: true });
+    copyDirRecursiveWithReplacements(astroAppDir, projectDir, replacements);
+    mkdirSync(join(projectDir, 'public', 'css'), { recursive: true });
+    cssTarget = join(projectDir, 'public', 'css', 'rizzo.min.css');
+    copyFileSync(cssSource, cssTarget);
+    if (selectedComponents.length > 0) {
+      copyAstroComponents(projectDir, selectedComponents);
+    }
+  } else if (framework === 'svelte' && existsSync(svelteAppDir)) {
+    mkdirSync(projectDir, { recursive: true });
+    copyDirRecursiveWithReplacements(svelteAppDir, projectDir, replacements);
+    mkdirSync(join(projectDir, 'static', 'css'), { recursive: true });
+    cssTarget = join(projectDir, 'static', 'css', 'rizzo.min.css');
+    copyFileSync(cssSource, cssTarget);
+    if (selectedComponents.length > 0) {
+      copySvelteComponents(projectDir, selectedComponents);
+    }
   } else {
-    const indexHtml = `<!DOCTYPE html>
+    const cssDir = framework === 'astro' ? join(projectDir, 'public', 'css') : join(projectDir, 'css');
+    cssTarget = join(cssDir, 'rizzo.min.css');
+    const linkHref = framework === 'astro' ? '/css/rizzo.min.css' : 'css/rizzo.min.css';
+    mkdirSync(cssDir, { recursive: true });
+    copyFileSync(cssSource, cssTarget);
+    const vanillaScaffoldPath = getScaffoldVanillaIndex();
+    indexPath = join(projectDir, 'index.html');
+    if (framework === 'vanilla' && existsSync(vanillaScaffoldPath)) {
+      let indexHtml = readFileSync(vanillaScaffoldPath, 'utf8');
+      indexHtml = indexHtml
+        .replace(/\{\{DATA_THEME\}\}/g, theme)
+        .replace(/\{\{THEME_LIST_COMMENT\}\}/g, themeComment)
+        .replace(/\{\{TITLE\}\}/g, name || 'App')
+        .replace(/\{\{LINK_HREF\}\}/g, linkHref);
+      writeFileSync(indexPath, indexHtml, 'utf8');
+    } else {
+      const indexHtml = `<!DOCTYPE html>
 <html lang="en" data-theme="${theme}">${themeComment}
 <head>
   <meta charset="UTF-8" />
@@ -528,26 +693,32 @@ async function cmdInit() {
 </body>
 </html>
 `;
-    writeFileSync(indexPath, indexHtml, 'utf8');
-  }
-  if (framework === 'svelte' && selectedComponents.length > 0) {
-    copySvelteComponents(projectDir, selectedComponents);
-  } else if (framework === 'astro' && selectedComponents.length > 0) {
-    copyAstroComponents(projectDir, selectedComponents);
+      writeFileSync(indexPath, indexHtml, 'utf8');
+    }
+    if (framework === 'svelte' && selectedComponents.length > 0) {
+      copySvelteComponents(projectDir, selectedComponents);
+    } else if (framework === 'astro' && selectedComponents.length > 0) {
+      copyAstroComponents(projectDir, selectedComponents);
+    }
   }
   console.log('\n✓ Project ready at ' + projectDir);
   console.log('  - ' + cssTarget);
-  console.log('  - ' + indexPath);
+  if (indexPath) console.log('  - ' + indexPath);
   if (framework === 'vanilla') {
-    console.log('  - Vanilla JS: same CSS and component styles as Astro/Svelte; index includes theme switcher and sample components.');
+    console.log('  - Vanilla JS: same CSS and component styles; index includes theme switcher and sample components.');
+  }
+  if (framework === 'astro' && existsSync(astroAppDir)) {
+    console.log('  - Default Astro project with Rizzo CSS. Run: pnpm install && pnpm dev');
+  }
+  if (framework === 'svelte' && existsSync(svelteAppDir)) {
+    console.log('  - Default SvelteKit project with Rizzo CSS. Run: pnpm install && pnpm dev');
   }
-  if (framework === 'svelte' || framework === 'astro') {
+  if ((framework === 'svelte' || framework === 'astro') && !existsSync(framework === 'astro' ? astroAppDir : svelteAppDir)) {
     const fw = framework === 'svelte' ? 'Svelte' : 'Astro';
-    console.log('\nTip: To use the official ' + fw + ' scaffold instead, create a project with their CLI (e.g. npm create ' + framework + '@latest my-app), then run npx rizzo-css add in that folder.');
+    console.log('\nTip: To use the official ' + fw + ' scaffold, create a project with their CLI (e.g. npm create ' + framework + '@latest my-app), then run npx rizzo-css add in that folder.');
   }
-  console.log('\nRun a local server (e.g. npx serve .) or open index.html. Docs: https://rizzo-css.vercel.app\n');
+  console.log('\nDocs: https://rizzo-css.vercel.app\n');
 }
 function main() {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "scripts": {
     "prepublishOnly": "cd ../.. && pnpm build:css && node scripts/copy-scaffold.js"
   },

package/scaffold/astro-app/astro.config.mjs ADDED Viewed

@@ -0,0 +1,4 @@
+// https://astro.build/config
+import { defineConfig } from 'astro/config';
+export default defineConfig({});

package/scaffold/astro-app/package.json ADDED Viewed

@@ -0,0 +1,13 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "dependencies": {
+    "astro": "^5.0.0"
+  }
+}

package/scaffold/astro-app/public/.gitkeep ADDED Viewed

File without changes

package/scaffold/astro-app/src/layouts/Layout.astro ADDED Viewed

@@ -0,0 +1,19 @@
+---
+interface Props {
+  title?: string;
+}
+const { title = '{{TITLE}}' } = Astro.props;
+---
+<!doctype html>
+<html lang="en" data-theme="{{DATA_THEME}}">{{THEME_LIST_COMMENT}}
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="/css/rizzo.min.css" />
+    <title>{title}</title>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>

package/scaffold/astro-app/src/pages/index.astro ADDED Viewed

@@ -0,0 +1,13 @@
+---
+import Layout from '../layouts/Layout.astro';
+---
+<Layout>
+  <main style="padding: var(--spacing-6); max-width: 65ch;">
+    <h1>Hello, Rizzo CSS</h1>
+    <p>Your Astro project is set up with Rizzo CSS. Same styles and components as Vanilla JS and Svelte.</p>
+    <p>
+      <a href="https://rizzo-css.vercel.app/docs/components">Component docs</a>
+      — Set theme via <code>data-theme</code> on <code>&lt;html&gt;</code> (e.g. <code>github-dark-classic</code>). Run <code>npx rizzo-css theme</code> to list themes.
+    </p>
+  </main>
+</Layout>

package/scaffold/astro-app/tsconfig.json ADDED Viewed

@@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}

package/scaffold/svelte-app/package.json ADDED Viewed

@@ -0,0 +1,17 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "svelte": "^5.0.0",
+    "vite": "^6.0.0"
+  }
+}

package/scaffold/svelte-app/src/app.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+}
+export {};

package/scaffold/svelte-app/src/app.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en" data-theme="{{DATA_THEME}}">{{THEME_LIST_COMMENT}}
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="/css/rizzo.min.css" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

package/scaffold/svelte-app/src/routes/+layout.svelte ADDED Viewed

@@ -0,0 +1,5 @@
+<script>
+  // Root layout — Rizzo CSS is loaded via app.html
+</script>
+<slot />

package/scaffold/svelte-app/src/routes/+page.svelte ADDED Viewed

@@ -0,0 +1,12 @@
+<script>
+  // Welcome page
+</script>
+<main style="padding: var(--spacing-6); max-width: 65ch;">
+  <h1>Hello, Rizzo CSS</h1>
+  <p>Your SvelteKit project is set up with Rizzo CSS. Same styles and components as Vanilla JS and Astro.</p>
+  <p>
+    <a href="https://rizzo-css.vercel.app/docs/components">Component docs</a>
+    — Set theme via <code>data-theme</code> on <code>&lt;html&gt;</code> (e.g. <code>github-dark-classic</code>). Run <code>npx rizzo-css theme</code> to list themes.
+  </p>
+</main>

package/scaffold/svelte-app/static/.gitkeep ADDED Viewed

File without changes

package/scaffold/svelte-app/svelte.config.js ADDED Viewed

@@ -0,0 +1,11 @@
+// @ts-check
+import adapter from '@sveltejs/adapter-auto';
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  kit: {
+    adapter: adapter()
+  }
+};
+export default config;

package/scaffold/svelte-app/tsconfig.json ADDED Viewed

@@ -0,0 +1,15 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  }
+}

package/scaffold/svelte-app/vite.config.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+export default defineConfig({
+  plugins: [sveltekit()]
+});