WIP: jsrepo v3 proposal v3

jsrepo.config.ts

@@ -0,0 +1,146 @@
+import { defineConfig, type RegistryItem } from 'jsrepo';
+import { output } from '@jsrepo/shadcn';
+import { type Category, componentMetadata, type Variant, VARIANTS } from './src/constants/Information';
+
+export default defineConfig({
+  registry: {
+    name: '@react-bits',
+    description:
+      'An open source collection of animated, interactive & fully customizable React components for building stunning, memorable user interfaces.',
+    homepage: 'https://reactbits.dev',
+    authors: ['David Haz'],
+    bugs: 'https://github.com/DavidHDev/react-bits/issues',
+    repository: 'https://github.com/DavidHDev/react-bits',
+    tags: [
+      'react',
+      'javascript',
+      'components',
+      'web',
+      'reactjs',
+      'css-animations',
+      'component-library',
+      'ui-components',
+      '3d',
+      'ui-library',
+      'tailwind',
+      'tailwindcss',
+      'components',
+      'components-library'
+    ],
+    excludeDeps: ['react'],
+    outputs: [output({ dir: 'public/r', format: true })],
+    items: [
+      ...Object.values(componentMetadata).map(component =>
+        defineComponent({
+          title: component.name,
+          description: component.description,
+          category: component.category,
+          categories: [component.category],
+          meta: component.meta,
+          variants: component.variants
+        })
+      )
+    ].flat()
+  }
+});
+
+/**
+ * Define a component to be exposed from the registry. Creates the 4 different variants of the component and ensures the correct files are included.
+ *
+ * @param title The title of the component.
+ * @param description The description of the component.
+ * @param category The category of the component.
+ * @param categories Organize the component into multiple categories.
+ * @param meta Optional meta data for the component.
+ * @param variants The variants of the component that are available through the registry (default: all variants)
+ * @returns An array of RegistryItem objects.
+ */
+function defineComponent({
+  title,
+  description,
+  category,
+  categories,
+  meta,
+  variants = ['JS-CSS', 'JS-TW', 'TS-CSS', 'TS-TW']
+}: {
+  title: string;
+  description: string;
+  category: Category;
+  categories?: string[];
+  meta?: Record<string, string>;
+  variants?: readonly Variant[];
+}): RegistryItem[] {
+  const baseItem: Omit<RegistryItem, 'files' | 'name'> = {
+    title,
+    description,
+    type: 'registry:component',
+    categories: [category, ...(categories ?? [])],
+    meta
+  };
+
+  // this might warrant a bit of explanation
+  // basically we check if the variant is included in the variants array and if so we return the item as part of an array
+  // otherwise we return an empty array
+  // we then spread that array empty or otherwise into the return array
+  return [
+    // JS + CSS
+    ...(variants.includes('JS-CSS')
+      ? [
+          {
+            ...baseItem,
+            name: `${baseItem.title}-JS-CSS`,
+            files: [
+              {
+                path: `src/content/${category}/${title}`
+              }
+            ]
+          }
+        ]
+      : []),
+
+    // JS + Tailwind
+    ...(variants.includes('JS-TW')
+      ? [
+          {
+            ...baseItem,
+            name: `${baseItem.title}-JS-TW`,
+            files: [
+              {
+                path: `src/tailwind/${category}/${title}`
+              }
+            ]
+          }
+        ]
+      : []),
+
+    // TS + CSS
+    ...(variants.includes('TS-CSS')
+      ? [
+          {
+            ...baseItem,
+            name: `${baseItem.title}-TS-CSS`,
+            files: [
+              {
+                path: `src/ts-default/${category}/${title}`
+              }
+            ]
+          }
+        ]
+      : []),
+
+    // TS + Tailwind
+    ...(variants.includes('TS-TW')
+      ? [
+          {
+            ...baseItem,
+            name: `${baseItem.title}-TS-TW`,
+            files: [
+              {
+                path: `src/ts-tailwind/${category}/${title}`
+              }
+            ]
+          }
+        ]
+      : [])
+  ];
+}

make-define-component-code.ts

@@ -0,0 +1,50 @@
+/**
+ * Temporary script to migrate from registry.json
+ * 
+ * !!DELETE THIS BEFORE MERGING!!
+ */
+
+import data from './registry.json'
+import fs from 'fs';
+
+const titles = new Set();
+
+const categories = new Map<string, string>();
+
+for (const item of data.items) {
+    if (titles.has(item.title)) continue;
+
+    titles.add(item.title);
+
+    const firstFile = item.files[0];
+    const index = firstFile.path.indexOf(item.title);
+    const category = firstFile.path.slice(0, index-1).split('/').pop();
+
+    if (!category) throw new Error(`Category not found for item: ${item.title}`);
+
+    let categoryCode = categories.get(category) ?? '';
+
+    categoryCode += makeCode(item.title, category as never, item.description);
+
+    categories.set(category, categoryCode);
+}
+
+export function makeCode(title: string, category: string, description: string) {
+  return `defineComponent({
+        title: '${title}',
+        category: '${category}',
+        description:
+          "${description}"
+    }),`;
+}
+
+let code = '[\n'
+
+for (const [category, categoryCode] of categories.entries()) {
+  code += `// ${category}
+...[${categoryCode}],\n\n`;
+}
+
+code += ']'
+
+fs.writeFileSync('code.ts', code);