chore(templates): simplify component template to minimal pattern

.templates/component/package.json

@@ -20,6 +20,12 @@
     "prepack": "pnpm run build",
     "clean": "rm -rf node_modules dist"
   },
+  "dependencies": {
+    "@radix-ui/react-slot": "catalog:",
+    "@sipe-team/tokens": "workspace:*",
+    "@vanilla-extract/recipes": "catalog:",
+    "clsx": "catalog:"
+  },
   "devDependencies": {
     "@testing-library/jest-dom": "catalog:",
     "@testing-library/react": "catalog:",

.templates/component/src/Template.css.ts

@@ -0,0 +1,14 @@
+import { vars } from '@sipe-team/tokens';
+
+import { recipe } from '@vanilla-extract/recipes';
+
+export const template = recipe({
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontFamily: vars.typography.fontFamily,
+  },
+  variants: {},
+  defaultVariants: {},
+});

.templates/component/src/Template.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Template } from './Template';
+
+const meta = {
+  title: 'Components/Template',
+  component: Template,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Template>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    children: 'Template',
+  },
+};

.templates/component/src/Template.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import { expect, test } from 'vitest';
+
+import { Template } from './Template';
+
+test('renders Template', () => {
+  render(<Template>Test</Template>);
+
+  expect(screen.getByText('Test')).toBeInTheDocument();
+});

.templates/component/src/Template.tsx

@@ -0,0 +1,21 @@
+import { type ForwardedRef, forwardRef, type HTMLAttributes } from 'react';
+
+import { Slot } from '@radix-ui/react-slot';
+
+import { clsx as cx } from 'clsx';
+
+import * as styles from './Template.css';
+
+export interface TemplateProps extends HTMLAttributes<HTMLDivElement> {
+  asChild?: boolean;
+}
+
+export const Template = forwardRef(function Template(
+  { asChild, className: _className, ...props }: TemplateProps,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
+  const Comp = asChild ? Slot : 'div';
+  const className = cx(styles.template(), _className);
+
+  return <Comp ref={ref} className={className} {...props} />;
+});

.templates/component/src/index.ts

@@ -1 +1 @@
-export * from './Component';
+export * from './Template';

.templates/component/tsup.config.ts

@@ -1,8 +1,3 @@
-import { defineConfig } from 'tsup';
+import defaultConfig from '../../tsup.config';
 
-export default defineConfig({
-  entry: ['src/index.ts'],
-  clean: true,
-  dts: true,
-  format: ['esm', 'cjs'],
-});
+export default defaultConfig;

scripts/createComponent.ts

@@ -21,11 +21,18 @@ class CreateComponentCommand extends Command {
       .join('');
   }
 
+  private pascalToCamel(str: string): string {
+    return str.charAt(0).toLowerCase() + str.slice(1);
+  }
+
   private replacePatterns(kebabCaseName: string, pascalCaseName: string) {
-    return {
-      Component: pascalCaseName,
-      'package-name': kebabCaseName,
-    } as const;
+    const camelCaseName = this.pascalToCamel(pascalCaseName);
+
+    return [
+      ['template', camelCaseName],
+      ['Template', pascalCaseName],
+      ['package-name', kebabCaseName],
+    ] as const;
   }
 
   private async validateTemplateDir(templateDir: string): Promise<void> {
@@ -53,17 +60,14 @@ class CreateComponentCommand extends Command {
       for (const entry of entries) {
         if (!this.excludePatterns.includes(entry.name)) {
           const sourcePath = path.join(source, entry.name);
-          const newName = entry.name.replaceAll('Component', pascalCaseName);
+          const newName = patterns.reduce((name, [search, replace]) => name.replaceAll(search, replace), entry.name);
           const targetPath = path.join(target, newName);
           await this.copyRecursive(sourcePath, targetPath, kebabCaseName, pascalCaseName);
         }
       }
     } else {
       const content = await fs.readFile(source, 'utf-8');
-      const updatedContent = Object.entries(patterns).reduce(
-        (content, [search, replace]) => content.replace(new RegExp(search, 'g'), replace),
-        content,
-      );
+      const updatedContent = patterns.reduce((acc, [search, replace]) => acc.replaceAll(search, replace), content);
 
       await fs.writeFile(target, updatedContent);
     }