@g3nomaly/ui 0.3.2 → 0.3.4

package/template/build.ts

@@ -0,0 +1,25 @@
+// Builds the source: copies src/components to dist/components and writes dist/components.json, which
+// lists every component with a hash per file. Run it with `bun run build`. It runs on Bun only, because
+// it imports each `.meta.ts` file directly.
+//
+// The installer compares those hashes with the files in an app, so `update` installs any change you
+// build, even under the same version. Raise the version in package.json for every release anyway:
+// it is stamped on every component, and `update` shows it as `0.1.0 → 0.2.0`.
+//
+// How apps get the source:
+// - npm: `bun publish`. Apps run `bun add -d <name>`, then `bunx @g3nomaly/ui source add npm:<name>`.
+// - git: commit dist/, since the installer reads a git source as it is and never builds it. Apps can
+//   install it as `bun add -d github:<owner>/<repo>#<tag>` and register it as an npm source.
+// - a folder: apps run `bun add -d file:<path>`, or `bunx @g3nomaly/ui source add <path>`.
+import fs from "node:fs";
+import path from "node:path";
+import { COMPONENTS_DIR, COMPONENTS_JSON, writeComponentsJson } from "@g3nomaly/ui/registry";
+
+const root      = import.meta.dir;
+const { version } = JSON.parse(fs.readFileSync(path.join(root, "package.json"), "utf8")) as { version: string };
+const builtDir  = path.join(root, COMPONENTS_DIR);
+
+fs.rmSync(path.join(root, "dist"), { recursive: true, force: true });
+fs.cpSync(path.join(root, "src", "components"), builtDir, { recursive: true });
+const count = await writeComponentsJson(builtDir, path.join(root, COMPONENTS_JSON), version);
+console.log(`wrote ${COMPONENTS_JSON} with ${count} component${count === 1 ? "" : "s"}`);

package/template/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "my-components",
+  "version": "0.1.0",
+  "description": "React components for @g3nomaly/ui.",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    "./*": "./dist/components/*.ts"
+  },
+  "scripts": {
+    "build": "bun build.ts"
+  },
+  "devDependencies": {
+    "@g3nomaly/ui": "*"
+  }
+}

package/template/src/components/example/Example.css

@@ -0,0 +1,20 @@
+/*
+ * Colours come from the app's theme: the tokens shadcn and tweakcn define in the app's one globals.css,
+ * such as --background, --foreground, --primary, --muted and --border. They switch with dark mode,
+ * so a component never needs its own dark styles. Avoid fixed colours. A token of your own goes in
+ * `cssVars` in the meta file, which adds it to the app's stylesheet.
+ */
+.my-components {
+  &.example {
+    padding: 1rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background-color: var(--card);
+    color: var(--card-foreground);
+
+    &--muted {
+      background-color: var(--muted);
+      color: var(--muted-foreground);
+    }
+  }
+}

package/template/src/components/example/Example.tsx

@@ -0,0 +1,26 @@
+// The app gets this file as source and owns it from then on. `update` replaces it only while the app
+// has not changed it, so keep components small and let apps edit them.
+import React from "react";
+// A relative import: Example.css is installed next to this file.
+import "./Example.css";
+
+/**
+ * @brief Props of Example: the native div attributes plus its look.
+ *
+ * @property tone - Look of the box: `default` or `muted`, set as the `example--<tone>` class.
+ */
+export interface ExampleProps extends React.HTMLAttributes<HTMLDivElement> {
+  tone?: "default" | "muted";
+}
+
+export const Example = React.forwardRef<HTMLDivElement, ExampleProps>(
+  ({ children, className = "", tone = "default", ...props }, ref) => (
+    // `my-components` scopes the CSS of this source, so it does not leak into the app. Use one class
+    // per source, named after it.
+    <div ref={ref} className={`my-components example example--${tone} ${className}`} {...props}>
+      {children}
+    </div>
+  ),
+);
+
+Example.displayName = "Example";

package/template/src/components/example/example.meta.ts

@@ -0,0 +1,61 @@
+// The meta file of one component. The build reads every `*.meta.ts` under src/components and writes
+// dist/components.json from them, which is what @g3nomaly/ui reads when it lists and installs components.
+//
+// Rename this file and the component together: `<name>.meta.ts` next to `<Name>.tsx`. One meta file
+// describes one component, and every file in this folder belongs to exactly one meta file.
+import type { PackagedComponent } from "@g3nomaly/ui/types";
+
+export default {
+  // The component's name. Its key is this name in lowercase, so people install it with
+  // `bunx @g3nomaly/ui add example`. Keys must be unique within this source.
+  name: "Example",
+
+  description: "A starting point for your own component. Replace it.",
+
+  // The group the component is listed under, and the folder it sits in. Keep the two equal:
+  // `add example-group` installs every component in the group. Two sources may use the same group
+  // name, in which case the installer asks which one to take, so pick names that say what they hold.
+  category: "example",
+
+  // Every file the component installs. A path is relative to src/components, and the app gets the
+  // file at the same path below its own components folder: `example/Example.tsx` lands in
+  // `src/components/ui/example/Example.tsx`. Files are copied byte for byte, so any import between
+  // files must be relative and must match this layout. Path aliases such as `@/` do not resolve in
+  // the app.
+  //
+  // Types: `component`, `style`, `util`, `hook`, `type`. The meta file itself is added by the build.
+  //
+  // Logic the app should not edit, such as a store that manages the component's data, stays in this
+  // package: mark it `install: "package"` and keep it in the component's folder. The installer never
+  // copies it. The component imports it by package path, `import { exampleStore } from
+  // "my-components/example/exampleStore"`, which the `exports` field in package.json resolves to
+  // dist/components/example/exampleStore.ts. The build fails when no export reaches the file.
+  // Apps then need this package installed with `bun add`, and update the store with `bun install`.
+  // `add --include-unsafe` gives an app a copy anyway, which its components do not import.
+  files: [
+    { path: "example/Example.tsx", type: "component" },
+    { path: "example/Example.css", type: "style" },
+    // { path: "example/exampleStore.ts", type: "util", install: "package" },
+  ],
+
+  // Other components this one needs, installed alongside it:
+  // - `card`, a component of this source,
+  // - `button@g3n-ui`, a component of another source,
+  // - `@shadcn/tooltip`, a shadcn component. shadcn files land in `<components folder>/shadcn/`,
+  //   so import them as `../shadcn/tooltip` from a group folder.
+  registryDependencies: [],
+
+  // npm packages the files import, as `name` or `name@range`, e.g. `radix-ui` or `recharts@^3`.
+  // After `add` and `update`, the installer lists the ones the app's package.json lacks, and adds
+  // them with `--install`. Use `devDependencies` for packages needed at build time only.
+  dependencies: [],
+
+  // Theme tokens the CSS uses that a shadcn / tweakcn globals.css does not define, in shadcn's format:
+  // names without `--`. After `add` and `update`, the installer adds the ones the app's stylesheet
+  // lacks: `light` to `:root`, `dark` to `.dark`, `theme` to `@theme inline`, plus a `--color-<name>`
+  // mapping per colour so Tailwind classes such as `bg-example-accent` work. The app's own values win.
+  // cssVars: {
+  //   light: { "example-accent": "oklch(0.7 0.15 250)" },
+  //   dark:  { "example-accent": "oklch(0.5 0.15 250)" },
+  // },
+} satisfies PackagedComponent;

package/dist/components/basic/Card.css

@@ -1,32 +0,0 @@
-.g3nui {
-  &.card {
-    border-radius: 0.5rem;
-    background-color: white;
-    overflow: hidden;
-    transition: all 0.2s ease;
-    
-    /* Variants */
-    &--default {
-      border: 1px solid #e5e7eb;
-    }
-    
-    &--outlined {
-      border: 2px solid #d1d5db;
-    }
-    
-    &--elevated {
-      border: 1px solid #e5e7eb;
-      box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-      
-      &:hover {
-        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-      }
-    }
-    
-    /* Dark mode support */
-    @media (prefers-color-scheme: dark) {
-      background-color: #1f2937;
-      border-color: #374151;
-    }
-  }
-}

package/dist/components/basic/Card.debug.ts

@@ -1,5 +0,0 @@
-// packages/ui/src/components/basic/Card.debug.ts
-export const __debug = {
-  componentName: "Card",
-  version: "0.1.0",
-};

package/dist/components/basic/Card.tsx

@@ -1,31 +0,0 @@
-// packages/ui/src/components/basic/Card.tsx
-import React from 'react';
-import './Card.css';
-
-/**
- * @brief Props of Card: the content, the extra classes and the look.
- *
- * @property children - Content rendered inside the card.
- * @property className - Extra classes appended to the root element.
- * @property variant - Look of the card: `default`, `outlined` or `elevated`, set as the `card--<variant>` class.
- */
-export interface CardProps {
-  children?: React.ReactNode;
-  className?: string;
-  variant?: 'default' | 'outlined' | 'elevated';
-}
-
-export const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  ({ children, className = '', variant = 'default' }, ref) => {
-    return (
-      <div 
-        ref={ref}
-        className={`g3nui card card--${variant} ${className}`}
-      >
-        {children}
-      </div>
-    );
-  }
-);
-
-Card.displayName = 'Card';

package/dist/components/basic/CardFooter.css

@@ -1,16 +0,0 @@
-.g3nui {
-  &.card__footer {
-    padding: 1rem 1.5rem;
-    border-top: 1px solid #e5e7eb;
-    background-color: #f9fafb;
-    
-    &:first-child {
-      border-top: none;
-    }
-    
-    @media (prefers-color-scheme: dark) {
-      border-color: #374151;
-      background-color: #111827;
-    }
-  }
-}

package/dist/components/basic/CardFooter.debug.ts

@@ -1,5 +0,0 @@
-// packages/ui/src/components/basic/CardFooter.debug.ts
-export const __debug = {
-  componentName: "CardFooter",
-  version: "0.1.0",
-};

package/dist/components/basic/CardFooter.tsx

@@ -1,29 +0,0 @@
-// packages/ui/src/components/basic/CardFooter.tsx
-import React from 'react';
-import './CardFooter.css';
-
-/**
- * @brief Props of CardFooter: the content and the extra classes.
- *
- * @property children - Content rendered inside the footer.
- * @property className - Extra classes appended to the root element.
- */
-export interface CardFooterProps {
-  children?: React.ReactNode;
-  className?: string;
-}
-
-export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(
-  ({ children, className = '' }, ref) => {
-    return (
-      <div 
-        ref={ref}
-        className={`g3nui card__footer ${className}`}
-      >
-        {children}
-      </div>
-    );
-  }
-);
-
-CardFooter.displayName = 'CardFooter';

package/dist/components/basic/CardHeader.css

@@ -1,14 +0,0 @@
-.g3nui {
-  &.card__header {
-    padding: 1.5rem;
-    border-bottom: 1px solid #e5e7eb;
-    
-    &:last-child {
-      border-bottom: none;
-    }
-    
-    @media (prefers-color-scheme: dark) {
-      border-color: #374151;
-    }
-  }
-}

package/dist/components/basic/CardHeader.debug.ts

@@ -1,5 +0,0 @@
-// packages/ui/src/components/basic/CardHeader.debug.ts
-export const __debug = {
-  componentName: "CardHeader",
-  version: "0.1.0",
-};

package/dist/components/basic/CardHeader.tsx

@@ -1,29 +0,0 @@
-// packages/ui/src/components/basic/CardHeader.tsx
-import React from 'react';
-import './CardHeader.css';
-
-/**
- * @brief Props of CardHeader: the content and the extra classes.
- *
- * @property children - Content rendered inside the header.
- * @property className - Extra classes appended to the root element.
- */
-export interface CardHeaderProps {
-  children?: React.ReactNode;
-  className?: string;
-}
-
-export const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(
-  ({ children, className = '' }, ref) => {
-    return (
-      <div 
-        ref={ref}
-        className={`g3nui card__header ${className}`}
-      >
-        {children}
-      </div>
-    );
-  }
-);
-
-CardHeader.displayName = 'CardHeader';

package/dist/components/basic/card.meta.ts

@@ -1,14 +0,0 @@
-// packages/ui/src/components/basic/card.meta.ts
-import type { PackagedComponent } from "@g3nomaly/ui/types";
-
-export default {
-  name: "Card",
-  description: "A flexible card component.",
-  category: "basic",
-  files: [
-    { path: "basic/Card.tsx",      type: "component" },
-    { path: "basic/Card.css",      type: "style"     },
-    { path: "basic/Card.debug.ts", type: "util"      },
-  ],
-  registryDependencies: [],
-} satisfies PackagedComponent;

package/dist/components/basic/cardfooter.meta.ts

@@ -1,14 +0,0 @@
-// packages/ui/src/components/basic/cardfooter.meta.ts
-import type { PackagedComponent } from "@g3nomaly/ui/types";
-
-export default {
-  name: "CardFooter",
-  description: "Footer section for Card component.",
-  category: "basic",
-  files: [
-    { path: "basic/CardFooter.tsx",      type: "component" },
-    { path: "basic/CardFooter.css",      type: "style"     },
-    { path: "basic/CardFooter.debug.ts", type: "util"      },
-  ],
-  registryDependencies: ["card"],
-} satisfies PackagedComponent;

package/dist/components/basic/cardheader.meta.ts

@@ -1,14 +0,0 @@
-// packages/ui/src/components/basic/cardheader.meta.ts
-import type { PackagedComponent } from "@g3nomaly/ui/types";
-
-export default {
-  name: "CardHeader",
-  description: "Header section for Card component.",
-  category: "basic",
-  files: [
-    { path: "basic/CardHeader.tsx",      type: "component" },
-    { path: "basic/CardHeader.css",      type: "style"     },
-    { path: "basic/CardHeader.debug.ts", type: "util"      },
-  ],
-  registryDependencies: ["card"],
-} satisfies PackagedComponent;

package/dist/components/input/Button.css

@@ -1,34 +0,0 @@
-.g3nui {
-  &.button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.5rem 1rem;
-    border-radius: 0.375rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    border: none;
-
-    &--primary {
-      background-color: #2563eb;
-      color: white;
-
-      &:hover { background-color: #1d4ed8; }
-    }
-
-    &--secondary {
-      background-color: #e5e7eb;
-      color: #111827;
-
-      &:hover { background-color: #d1d5db; }
-    }
-
-    &--ghost {
-      background-color: transparent;
-      color: #374151;
-
-      &:hover { background-color: #f3f4f6; }
-    }
-  }
-}

package/dist/components/input/Button.debug.ts

@@ -1,5 +0,0 @@
-// packages/ui/src/components/input/Button.debug.ts
-export const __debug = {
-  componentName: "Button",
-  version: "0.1.0",
-};

package/dist/components/input/Button.tsx

@@ -1,28 +0,0 @@
-// packages/ui/src/components/input/Button.tsx
-import React from 'react';
-import './Button.css';
-
-/**
- * @brief Props of Button: the native button attributes plus its look.
- *
- * @property variant - Look of the button: `primary` (default), `secondary` or `ghost`, set as the `button--<variant>` class.
- */
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'ghost';
-}
-
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ children, className = '', variant = 'primary', ...props }, ref) => {
-    return (
-      <button
-        ref={ref}
-        className={`g3nui button button--${variant} ${className}`}
-        {...props}
-      >
-        {children}
-      </button>
-    );
-  }
-);
-
-Button.displayName = 'Button';

package/dist/components/input/button.meta.ts

@@ -1,14 +0,0 @@
-// packages/ui/src/components/input/button.meta.ts
-import type { PackagedComponent } from "@g3nomaly/ui/types";
-
-export default {
-  name: "Button",
-  description: "A flexible button component.",
-  category: "input",
-  files: [
-    { path: "input/Button.tsx",      type: "component" },
-    { path: "input/Button.css",      type: "style"     },
-    { path: "input/Button.debug.ts", type: "util"      },
-  ],
-  registryDependencies: [],
-} satisfies PackagedComponent;

package/dist/components.json

@@ -1,138 +0,0 @@
-{
-  "button": {
-    "name": "Button",
-    "description": "A flexible button component.",
-    "category": "input",
-    "registryDependencies": [],
-    "files": [
-      {
-        "path": "input/Button.tsx",
-        "type": "component",
-        "version": "0.3.2",
-        "hash": "4911cf7ade40890c2bc1ee9eba65b9297f33cc0c1287c550701780295ed16086"
-      },
-      {
-        "path": "input/Button.css",
-        "type": "style",
-        "version": "0.3.2",
-        "hash": "eaff21a3e7afa0e48210f146e6558df6997ff31fa8d239031ea110914d5ff208"
-      },
-      {
-        "path": "input/Button.debug.ts",
-        "type": "util",
-        "version": "0.3.2",
-        "hash": "f7be8d51584045a3dd712741922c9009fd1879db06915fcf1f11b9b4152d1441"
-      },
-      {
-        "path": "input/button.meta.ts",
-        "type": "meta",
-        "version": "0.3.2",
-        "hash": "51294b1c334186be2378259245c3a444b509328785f7ceee6d555ccc99ad05c6"
-      }
-    ],
-    "version": "0.3.2"
-  },
-  "card": {
-    "name": "Card",
-    "description": "A flexible card component.",
-    "category": "basic",
-    "registryDependencies": [],
-    "files": [
-      {
-        "path": "basic/Card.tsx",
-        "type": "component",
-        "version": "0.3.2",
-        "hash": "2602d00902b38c45d4a6409febe47bdb9e79657d83d7da3bc4dff3c7a3ebea6d"
-      },
-      {
-        "path": "basic/Card.css",
-        "type": "style",
-        "version": "0.3.2",
-        "hash": "5315468962112167dd37b4893e7d38404c19a7f2ba76bf51372bc30d67d5dc42"
-      },
-      {
-        "path": "basic/Card.debug.ts",
-        "type": "util",
-        "version": "0.3.2",
-        "hash": "acecf600200a49337f65714f0b2b4efc5325446b11fa49d5360f1aee88f1023f"
-      },
-      {
-        "path": "basic/card.meta.ts",
-        "type": "meta",
-        "version": "0.3.2",
-        "hash": "4ffcfd020601e222f26961ac595f478d6e8907ad894cdba992ea2b34a8ba6b92"
-      }
-    ],
-    "version": "0.3.2"
-  },
-  "cardfooter": {
-    "name": "CardFooter",
-    "description": "Footer section for Card component.",
-    "category": "basic",
-    "registryDependencies": [
-      "card"
-    ],
-    "files": [
-      {
-        "path": "basic/CardFooter.tsx",
-        "type": "component",
-        "version": "0.3.2",
-        "hash": "bfd4e73de6b16b529c22ca69e4661c30bd4be1237a5972eefce45cd6deb7dff5"
-      },
-      {
-        "path": "basic/CardFooter.css",
-        "type": "style",
-        "version": "0.3.2",
-        "hash": "751573c89dc46e83c9f240e58895f42652399f0519907c058568b14aaa52cb4d"
-      },
-      {
-        "path": "basic/CardFooter.debug.ts",
-        "type": "util",
-        "version": "0.3.2",
-        "hash": "3226f24e154a19daf4f0d9828245ff0cdf7b2e8bb75f10d785a33c1234578484"
-      },
-      {
-        "path": "basic/cardfooter.meta.ts",
-        "type": "meta",
-        "version": "0.3.2",
-        "hash": "1e9d82552826862ca25f13e71f80301b61fa8b9c3c8d0dc3ed51038db5b0f94c"
-      }
-    ],
-    "version": "0.3.2"
-  },
-  "cardheader": {
-    "name": "CardHeader",
-    "description": "Header section for Card component.",
-    "category": "basic",
-    "registryDependencies": [
-      "card"
-    ],
-    "files": [
-      {
-        "path": "basic/CardHeader.tsx",
-        "type": "component",
-        "version": "0.3.2",
-        "hash": "fac021c0f55b4c115b0b9fcc3e6f452aea7403e99b4b7a1287861de5653c9eb5"
-      },
-      {
-        "path": "basic/CardHeader.css",
-        "type": "style",
-        "version": "0.3.2",
-        "hash": "e36cf86636d2e7619dd69725faaedac9604a9605be11c0e2a6aa3663db8c3b53"
-      },
-      {
-        "path": "basic/CardHeader.debug.ts",
-        "type": "util",
-        "version": "0.3.2",
-        "hash": "e5879c6caebc2d14ffaf49b8d630a32a23c1c5a1c3877288d7ea4333e333c9e7"
-      },
-      {
-        "path": "basic/cardheader.meta.ts",
-        "type": "meta",
-        "version": "0.3.2",
-        "hash": "46d85bb6e00d8fa518548b89a89deb53c2e27304fc5f808f7e4cd5472a51871a"
-      }
-    ],
-    "version": "0.3.2"
-  }
-}