@spark-ui/cli-utils 1.3.1 → 1.4.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.4.0](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@1.3.2...@spark-ui/cli-utils@1.4.0) (2023-02-22)
+
+### Features
+
+- **cli-utils:** add hook and utils template ([e22d672](https://github.com/adevinta/spark/commit/e22d672e349909cc4bc8673312846d10d77e7ea5))
+
+## [1.3.2](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@1.3.1...@spark-ui/cli-utils@1.3.2) (2023-02-22)
+
+**Note:** Version bump only for package @spark-ui/cli-utils
+
 ## [1.3.1](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@1.3.0...@spark-ui/cli-utils@1.3.1) (2023-02-21)
 
 **Note:** Version bump only for package @spark-ui/cli-utils

package/bin/core/Logger.mjs

@@ -0,0 +1,19 @@
+import chalk from 'chalk'
+
+export class Logger {
+  success(message) {
+    console.log(chalk.green(message))
+  }
+
+  error(message) {
+    console.log(chalk.red(message))
+  }
+
+  info(message) {
+    console.log(chalk.yellow(message))
+  }
+
+  warning(message) {
+    console.log(chalk.green(message))
+  }
+}

package/bin/core/System.mjs

@@ -0,0 +1,45 @@
+import fse from 'fs-extra'
+import glob from 'glob'
+
+export class System {
+  logger
+
+  constructor({ logger }) {
+    this.logger = logger
+  }
+
+  exit(message) {
+    this.logger.error(`✖ Error: ${message}\n`)
+    process.exit(1)
+  }
+
+  getBasePath() {
+    return process.cwd()
+  }
+
+  getPackageJSON() {
+    const basePath = this.getBasePath()
+
+    const raw = fse.readFileSync(`${basePath}/package.json`).toString()
+
+    return JSON.parse(raw)
+  }
+
+  isPackageCreated(name) {
+    const base = this.getBasePath()
+    const packageJSON = this.getPackageJSON()
+
+    return packageJSON.workspaces.some(workspace => {
+      const packages = glob.sync(`${base}/${workspace}/`)
+
+      return packages.some(path => path.endsWith(`/${name}/`))
+    })
+  }
+
+  writeFile({ path, content }) {
+    return fse
+      .outputFile(path, content)
+      .then(() => this.logger.info(`Created ${path}`))
+      .catch(error => this.exit(`Failed creating ${path}`))
+  }
+}

package/bin/core/index.mjs

@@ -0,0 +1,2 @@
+export { Logger } from './Logger.mjs'
+export { System } from './System.mjs'

package/bin/generators/Generator.mjs

@@ -0,0 +1,5 @@
+export class Generator {
+  execute() {
+    throw new Error('execute method should be implemented')
+  }
+}

package/bin/generators/TemplateGenerator.mjs

@@ -0,0 +1,83 @@
+import { join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import glob from 'glob'
+import { pascalCase } from 'pascal-case'
+import { camelCase } from 'camel-case'
+
+import { System } from '../core/index.mjs'
+import { Generator } from './Generator.mjs'
+
+export class TemplateGenerator extends Generator {
+  static TYPES = {
+    COMPONENT: 'component',
+    HOOK: 'hook',
+    UTIL: 'util',
+  }
+
+  static CONTEXTS = {
+    [TemplateGenerator.TYPES.COMPONENT]: 'components',
+    [TemplateGenerator.TYPES.HOOK]: 'components',
+    [TemplateGenerator.TYPES.UTIL]: 'utils',
+  }
+
+  constructor({ system }) {
+    super()
+    this.system = system
+  }
+
+  getDest({ type, name }) {
+    const basePath = this.system.getBasePath()
+    const context = TemplateGenerator.CONTEXTS[type]
+
+    return `${basePath}/packages/${context}/${name}`
+  }
+
+  getTemplatePaths({ type }) {
+    const pattern = fileURLToPath(new URL(`../../templates/${type}/**/*.js`, import.meta.url))
+
+    return new Promise((resolve, reject) => {
+      glob(pattern, async (error, paths) => {
+        if (error) {
+          return reject(error)
+        }
+
+        resolve(paths)
+      })
+    })
+  }
+
+  getTemplatePath({ path, name, type, dest }) {
+    const parsed = path
+      .replace(/(.*)\/templates\/([a-z-]+)\//, `${dest}/`)
+      .replaceAll(/\[|\]|\.js$/g, '')
+
+    if (type === TemplateGenerator.TYPES.COMPONENT) {
+      return parsed.replace('Component', pascalCase(name))
+    }
+
+    if (type === TemplateGenerator.TYPES.HOOK) {
+      return parsed.replace('name', camelCase(name))
+    }
+
+    return parsed
+  }
+
+  async execute({ type, name, description }) {
+    const dest = this.getDest({ type, name })
+    const paths = await this.getTemplatePaths({ type })
+
+    const promises = paths.map(path =>
+      import(path).then(module => ({
+        path: this.getTemplatePath({ path, name, type, dest }),
+        content: module.default({
+          name,
+          description,
+        }),
+      }))
+    )
+
+    const files = await Promise.all(promises)
+
+    return Promise.all(files.map(file => this.system.writeFile(file)))
+  }
+}

package/bin/generators/index.mjs

@@ -0,0 +1,2 @@
+export { Generator } from './Generator.mjs'
+export { TemplateGenerator } from './TemplateGenerator.mjs'

package/bin/spark-generate.mjs

@@ -1,156 +1,71 @@
 #!/usr/bin/env node
 
-import chalk from 'chalk'
-import fse from 'fs-extra'
 import * as prompt from '@clack/prompts'
-import { fileURLToPath } from 'node:url'
-import glob from 'glob'
-import { pascalCase } from 'pascal-case'
-import { log, showError, writeFile } from '../utils.js'
 
-const BASE_DIR = process.cwd()
-const rawRootPackageJSON = fse.readFileSync(`${BASE_DIR}/package.json`)
-let rootPackageJSON = JSON.parse(rawRootPackageJSON)
+import { TemplateGenerator } from './generators/index.mjs'
+import { Logger, System } from './core/index.mjs'
+import { DescriptionValidator, NameValidator } from './validators/index.mjs'
 
-const TEMPLATE_TYPE = {
-  COMPONENT: 'component',
-  HOOK: 'hook',
-}
-
-const WORKSPACES = {
-  [TEMPLATE_TYPE.COMPONENT]: '/packages/components',
-  [TEMPLATE_TYPE.HOOK]: '/packages/hooks',
-}
-
-const ERRORS = {
-  ABORT: 'Aborted package generation',
-  NO_PKG_NAME: 'Package name must me defined',
-  INVALID_PKG_NAME: 'Name name must contain letters and dash symbols only (ex: "my-package")',
-  INVALID_DESCRIPTION: 'Description is too short (minimum is 10 chars)',
-  PKG_ALREADY_EXISTS:
-    'A package with that name already exists. Either delete it manually or use another name.',
-}
-
-const packageUtils = {
-  /** Validate the format of the package name (kebab case format) */
-  hasValidName: name => /^[a-z-]*$/.test(name),
-  /** Check that a package of the same name does not exists across all workspaces */
-  alreadyExists: name => {
-    return rootPackageJSON.workspaces.some(workspace => {
-      const existingPackages = glob.sync(`${BASE_DIR}/${workspace}/`)
-      return existingPackages.some(path => path.endsWith(`/${name}/`))
-    })
-  },
-  /** Retrieves the target folder of the generated package */
-  getDirectory: (name, template) => `${WORKSPACES[template]}/${name}/`,
-  /** Retrieves the full path to the folder of the generated package */
-  getFullPath: (name, template) => `${BASE_DIR}${packageUtils.getDirectory(name, template)}`,
-}
+const logger = new Logger()
+const system = new System({ logger })
+const generator = new TemplateGenerator({ system })
 
-async function promptPackageName() {
+export const run = async () => {
   const name = await prompt.text({
     message: 'Package name (must contain letters and dash symbols only):',
     initialValue: '',
     validate(value) {
-      if (value == null) return ERRORS.NO_PKG_NAME
-      if (!packageUtils.hasValidName(value)) return ERRORS.INVALID_PKG_NAME
-      if (packageUtils.alreadyExists(value)) return ERRORS.PKG_ALREADY_EXISTS
+      const validator = new NameValidator({ system })
+
+      return validator.validate(value)
     },
   })
 
-  if (prompt.isCancel(name)) showError(ERRORS.ABORT)
-
-  return name
-}
+  if (prompt.isCancel(name)) {
+    system.exit('Aborted package generation')
+  }
 
-async function promptPackageTemplate() {
-  const template = await prompt.select({
+  const type = await prompt.select({
     message: 'Chose a template:',
-    initialValue: TEMPLATE_TYPE.COMPONENT,
+    initialValue: 'component',
     options: [
       {
-        value: TEMPLATE_TYPE.COMPONENT,
+        value: TemplateGenerator.TYPES.COMPONENT,
         label: 'Component',
-        hint: 'Typescript dummy component with some tests, stories and config files',
+        hint: 'TypeScript component package',
       },
       {
-        value: TEMPLATE_TYPE.HOOK,
+        value: TemplateGenerator.TYPES.HOOK,
         label: 'Hook',
-        hint: 'Typescript hook with some tests, stories and config files',
+        hint: 'TypeScript hook package',
+      },
+      {
+        value: TemplateGenerator.TYPES.UTIL,
+        label: 'Utility',
+        hint: 'TypeScript utility package',
       },
     ],
   })
 
-  if (prompt.isCancel(template)) showError(ERRORS.ABORT)
-
-  return template
-}
+  if (prompt.isCancel(type)) {
+    system.exit('Aborted package generation')
+  }
 
-async function promptPackageDescription() {
   const description = await prompt.text({
     message: 'Describe your package (short description):',
     initialValue: '',
     validate(value) {
-      if (!value) return `You package must have a description`
-      if (value.length < 10) return ERRORS.INVALID_DESCRIPTION
+      const validator = new DescriptionValidator()
+
+      return validator.validate(value)
     },
   })
 
-  if (prompt.isCancel(description)) showError(ERRORS.ABORT)
-
-  return description
-}
-
-/**
- * Program starts here
- */
-prompt.intro(`Generate Spark package`)
-
-const name = await promptPackageName()
-const template = await promptPackageTemplate()
-const description = await promptPackageDescription()
-
-const packagePath = packageUtils.getFullPath(name, template)
-
-switch (template) {
-  case TEMPLATE_TYPE.COMPONENT:
-    generateComponentPackage(name, description)
-    break
-  case TEMPLATE_TYPE.HOOK:
-    generateHookPackage(name, description)
-    break
-}
-
-prompt.outro(`Generating package...`)
-
-function generateComponentPackage(name, description) {
-  const templatesPattern = fileURLToPath(new URL('../templates/**/*.js', import.meta.url))
-
-  glob(templatesPattern, async (err, res) => {
-    if (err) showError(err)
-    if (res) {
-      const templateContents = res.map(templatePath =>
-        import(templatePath).then(module => ({
-          path: templatePath
-            .replace(/(.*)\/templates\//, packagePath)
-            .replace('Component', pascalCase(name))
-            .replaceAll(/\[|\]|\.js$/g, ''),
-          content: module.default({
-            component: name,
-            description: description,
-          }),
-        }))
-      )
+  if (prompt.isCancel(description)) {
+    system.exit('Aborted package generation')
+  }
 
-      const filesToWrite = await Promise.all(templateContents)
-
-      Promise.all(filesToWrite.map(writeFile)).then(() => {
-        log.success('All package files has been properly written!')
-      })
-    }
-  })
+  generator.execute({ name, type, description })
 }
 
-function generateHookPackage(name, description) {
-  showError('Todo: template for hook packages is not ready yet.')
-}
+run()

package/bin/spark-setup-theme.mjs

@@ -5,7 +5,8 @@ import { join, extname, parse, sep } from 'path'
 import { readFileSync, readdirSync, writeFileSync, unlinkSync } from 'fs'
 import { transformSync } from 'esbuild'
 
-import { log, showError } from '../utils.js'
+const logger = new Logger()
+const system = new System({ logger })
 
 const jsFileExtension = '.js'
 
@@ -14,7 +15,7 @@ const configFile = readdirSync(process.cwd()).find(fileName =>
 )
 
 if (!configFile) {
-  showError(
+  system.exit(
     "We couldn't find a `spark.theme.config` file in this folder. Please make sure that the file is located in the root folder of your project"
   )
 }
@@ -24,8 +25,9 @@ const filePath = join(process.cwd(), configFile)
 
 const allowedExtensions = ['.ts', '.mts', '.cts', '.js', '.cjs', '.mjs']
 const fileExtension = extname(filePath)
+
 if (!allowedExtensions.includes(fileExtension)) {
-  showError(`Your spark.theme.config file extension (${fileExtension}) is not supported.`)
+  system.exit(`Your spark.theme.config file extension (${fileExtension}) is not supported.`)
 }
 
 const tsCode = readFileSync(filePath, 'utf-8')
@@ -42,6 +44,6 @@ const child = spawn(process.execPath, [jsFilePath], {
 
 child.on('exit', code => {
   if (!configFileIsInJS) unlinkSync(jsFilePath)
-  log.success('✨ Your Spark theme config files have been successfully created!')
+  logger.success('✨ Your Spark theme config files have been successfully created!')
   process.exit(code)
 })

package/bin/validators/DescriptionValidator.mjs

@@ -0,0 +1,19 @@
+import { Validator } from './Validator.mjs'
+
+export class DescriptionValidator extends Validator {
+  constructor() {
+    super()
+  }
+
+  validate(description) {
+    if (!description) {
+      return 'You package must have a description'
+    }
+
+    if (description.length < 10) {
+      return 'Description is too short (minimum is 10 chars)'
+    }
+
+    return undefined
+  }
+}

package/bin/validators/NameValidator.mjs

@@ -0,0 +1,25 @@
+import { System } from '../core/index.mjs'
+import { Validator } from './Validator.mjs'
+
+export class NameValidator extends Validator {
+  system
+
+  constructor({ system }) {
+    super()
+    this.system = system
+  }
+
+  validate(name) {
+    if (!name) {
+      return 'Package name must me defined'
+    }
+
+    if (!/^[a-z-]*$/.test(name)) {
+      return 'Name name must contain letters and dash symbols only (ex: "my-package")'
+    }
+
+    if (this.system.isPackageCreated(name)) {
+      return 'A package with that name already exists. Either delete it manually or use another name.'
+    }
+  }
+}

package/bin/validators/Validator.mjs

@@ -0,0 +1,5 @@
+export class Validator {
+  validate() {
+    throw new Error('validate method should be implemented')
+  }
+}

package/bin/validators/index.mjs

@@ -0,0 +1,2 @@
+export { NameValidator } from './NameValidator.mjs'
+export { DescriptionValidator } from './DescriptionValidator.mjs'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/cli-utils",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Spark CLI utils",
   "publishConfig": {
     "access": "public"
@@ -13,6 +13,7 @@
   "type": "module",
   "dependencies": {
     "@clack/prompts": "0.2.2",
+    "camel-case": "4.1.2",
     "chalk": "5.2.0",
     "commander": "10.0.0",
     "esbuild": "0.17.8",
@@ -25,5 +26,5 @@
     "url": "git@github.com:adevinta/spark.git",
     "directory": "packages/utils/cli"
   },
-  "gitHead": "6667269271cbbc620443701a6de33587938901e9"
+  "gitHead": "61d037acf7909f745ced1d1a0196fe6d2838850e"
 }

package/src/index.stories.mdx

@@ -0,0 +1,51 @@
+import { Meta } from '@storybook/blocks'
+import { StoryHeading } from '@docs/helpers/StoryHeading'
+
+<Meta title="utils/CLI" />
+
+# CLI utils
+
+This package provides some CLI commands to improve the development experience when building the Spark design system. Right now there are some different commands available:
+
+- A command for generating new components: `$ spark generate`.
+- A command for doing the initial setup for a new theme: `$ spark setup-theme`.
+
+## Contents
+
+- [Installation](#installation)
+- [Generating a new package](#generating-a-new-package)
+- [Setting up a theme](#setting-up-a-theme)
+
+<StoryHeading label="Installation" as="h2" />
+
+CLI utils can be used by installing the package `@spark-ui/cli-utils` in your project:
+
+```bash
+$ npm install --save-dev @spark-ui/cli-utils
+```
+
+or just by running the following command:
+
+```bash
+$ npx spark COMMAND_NAME
+```
+
+<StoryHeading label="Generating a new package" as="h2" />
+
+In order to generate a new package, the following command has to be executed:
+
+```bash
+$ spark generate
+```
+
+Then, a command prompt will guide you through the process by asking you for:
+
+- the package name (required),
+- the template used (required, only `Component` template available right now)
+- and the package description (optional).
+
+<StoryHeading label="Setting up a theme" as="h2" />
+
+```bash
+$ spark setup-theme
+```

package/templates/{[package.json].js → component/[package.json].js}

@@ -1,5 +1,5 @@
-export default ({ component, description }) => `{
-  "name": "@spark-ui/${component}",
+export default ({ name, description }) => `{
+  "name": "@spark-ui/${name}",
   "version": "1.0.0",
   "description": "${description}",
   "publishConfig": {

package/templates/{src → component/src}/[Component.stories.mdx].js

@@ -1,7 +1,7 @@
 import { pascalCase } from 'pascal-case'
 
-export default ({ component, description }) => {
-  const componentName = pascalCase(component)
+export default ({ name, description }) => {
+  const componentName = pascalCase(name)
 
   return `import { ArgsTable, Meta, Story } from '@storybook/addon-docs'
 import { ReactLiveBlock } from '@docs/helpers/ReactLiveBlock'
@@ -20,13 +20,13 @@ ${description}
 <StoryHeading label="Install" />
 
 \`\`\`
-npm install @spark-ui/${component}
+npm install @spark-ui/${name}
 \`\`\`
 
 <StoryHeading label="Import" />
 
 \`\`\`
-import { ${componentName} } from "@spark-ui/${component}"
+import { ${componentName} } from "@spark-ui/${name}"
 \`\`\`
 
 <StoryHeading label="Props" />

package/templates/{src → component/src}/[Component.stories.tsx].js

@@ -1,7 +1,7 @@
 import { pascalCase } from 'pascal-case'
 
-export default ({ component, description }) => {
-  const componentName = pascalCase(component)
+export default ({ name, description }) => {
+  const componentName = pascalCase(name)
 
   return `import { ReactLiveBlock } from '@docs/helpers/ReactLiveBlock'
 

package/templates/{src → component/src}/[Component.test.tsx].js

@@ -1,7 +1,7 @@
 import { pascalCase } from 'pascal-case'
 
-export default ({ component }) => {
-  const componentName = pascalCase(component)
+export default ({ name }) => {
+  const componentName = pascalCase(name)
 
   return `import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'

package/templates/{src → component/src}/[Component.tsx].js

@@ -1,7 +1,7 @@
 import { pascalCase } from 'pascal-case'
 
-export default ({ component }) => {
-  const componentName = pascalCase(component)
+export default ({ name }) => {
+  const componentName = pascalCase(name)
 
   return `import { ComponentPropsWithoutRef, PropsWithChildren } from 'react'
 

package/templates/component/src/[Component.variants.tsx].js

@@ -0,0 +1,8 @@
+import { pascalCase } from 'pascal-case'
+
+export default ({ name }) => {
+  const componentName = pascalCase(name)
+
+  return `
+`
+}

package/templates/{src → component/src}/[index.ts].js

@@ -1,7 +1,7 @@
 import { pascalCase } from 'pascal-case'
 
-export default ({ component }) => {
-  const componentName = pascalCase(component)
+export default ({ name }) => {
+  const componentName = pascalCase(name)
 
   return `export { ${componentName} } from './${componentName}'
 `

package/templates/hook/[.npmignore].js

@@ -0,0 +1,3 @@
+export default () => `src
+**/*.stories.*
+`

package/templates/hook/[package.json].js

@@ -0,0 +1,15 @@
+export default ({ name, description }) => `{
+  "name": "@spark-ui/${name}",
+  "version": "1.0.0",
+  "description": "${description}",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "vite build"
+  }
+}
+`

package/templates/hook/[tsconfig.json].js

@@ -0,0 +1,4 @@
+export default () => `{
+  "extends": "../../../tsconfig.json",
+  "include": ["src/**/*", "../../../global.d.ts"]
+}`

package/templates/hook/[vite.config.ts].js

@@ -0,0 +1,7 @@
+export default () => `import path from 'path'
+import { getComponentConfiguration } from '../../../config/index'
+
+const { name } = require(path.resolve(__dirname, 'package.json'))
+
+export default getComponentConfiguration(name)
+`

package/templates/hook/src/[index.ts].js

@@ -0,0 +1,8 @@
+import { camelCase } from 'camel-case'
+
+export default ({ name }) => {
+  const hookName = camelCase(name)
+
+  return `export { ${hookName} } from './${hookName}'
+`
+}

package/templates/hook/src/[name.stories.mdx].js

@@ -0,0 +1,42 @@
+import { camelCase } from 'camel-case'
+
+export default ({ name, description }) => {
+  const hookName = camelCase(name)
+
+  return `import { ArgsTable, Meta, Story } from '@storybook/addon-docs'
+import { ReactLiveBlock } from '@docs/helpers/ReactLiveBlock'
+import { StoryHeading } from '@docs/helpers/StoryHeading'
+
+import { ${hookName} } from '.'
+
+import * as stories from './${hookName}.stories'
+
+<Meta title="Hooks/${hookName}" />
+
+# ${hookName}
+
+${description}
+
+<StoryHeading label="Install" />
+
+\`\`\`
+npm install @spark-ui/${name}
+\`\`\`
+
+<StoryHeading label="Import" />
+
+\`\`\`
+import { ${hookName} } from "@spark-ui/${name}"
+\`\`\`
+
+<StoryHeading label="Usage" />
+
+<ArgsTable of={${hookName}} />
+
+\`\`\`jsx
+import { ${hookName} } from "@spark-ui/${name}"
+
+const Demo = () => {}
+\`\`\`
+`
+}

package/templates/hook/src/[name.test.tsx].js

@@ -0,0 +1,17 @@
+import { camelCase } from 'camel-case'
+
+export default ({ name }) => {
+  const hookName = camelCase(name)
+
+  return `import { renderHook } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { ${hookName} } from './${hookName}'
+
+describe('${hookName}', () => {
+  it('should be defined', () => {
+    expect(${hookName}).toBeDefined()
+  })
+})
+`
+}

package/templates/hook/src/[name.tsx].js

@@ -0,0 +1,10 @@
+import { camelCase } from 'camel-case'
+
+export default ({ name }) => {
+  const hookName = camelCase(name)
+
+  return `export function ${hookName}() {
+  return null
+}
+`
+}

package/templates/util/[.npmignore].js

@@ -0,0 +1 @@
+export default () => 'src'

package/templates/util/[package.json].js

@@ -0,0 +1,15 @@
+export default ({ name, description }) => `{
+  "name": "@spark-ui/${name}",
+  "version": "1.0.0",
+  "description": "${description}",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "vite build"
+  }
+}
+`

package/templates/util/[tsconfig.json].js

@@ -0,0 +1,5 @@
+export default () => `{
+  "extends": "../../../tsconfig.json",
+  "include": ["src/**/*", "../../global.d.ts"]
+}
+`

package/templates/util/[vite.config.ts].js

@@ -0,0 +1,23 @@
+export default () => `import { terser } from 'rollup-plugin-terser'
+import dts from 'vite-plugin-dts'
+
+export default {
+  build: {
+    target: 'es2015',
+    lib: {
+      entry: 'src/index.ts',
+      formats: ['es', 'cjs'],
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: ['node:path', 'node:fs'],
+      plugins: [terser()],
+    },
+  },
+  plugins: [
+    dts({
+      entryRoot: './src',
+    }),
+  ],
+}
+`

package/templates/util/src/[index.ts].js

@@ -0,0 +1 @@
+export default () => ''

package/templates/src/[Component.variants.tsx].js

@@ -1,8 +0,0 @@
-import { pascalCase } from 'pascal-case'
-
-export default ({ component }) => {
-  const componentName = pascalCase(component)
-
-  return `
-`
-}