@spark-ui/cli-utils 2.8.0 → 2.9.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.9.0](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@2.8.0...@spark-ui/cli-utils@2.9.0) (2023-03-27)
+
+### Features
+
+- **cli-utils:** component package template updated to match agreements ([10e7159](https://github.com/adevinta/spark/commit/10e71594f604f946e94c6f776f559ca0d0212860)), closes [#465](https://github.com/adevinta/spark/issues/465)
+
 # [2.8.0](https://github.com/adevinta/spark/compare/@spark-ui/cli-utils@2.7.3...@spark-ui/cli-utils@2.8.0) (2023-03-23)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/cli-utils",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "Spark CLI utils",
   "publishConfig": {
     "access": "public"
@@ -28,5 +28,5 @@
   "devDependencies": {
     "@types/fs-extra": "11.0.1"
   },
-  "gitHead": "9b2398b8c58cf0359169bdde07e8e33ede075e16"
+  "gitHead": "0980f5c892af17c497dd2b363d81a577af43f820"
 }

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

@@ -3,15 +3,14 @@ import { pascalCase } from 'pascal-case'
 export default ({ name, description }) => {
   const componentName = pascalCase(name)
 
-  return `import { ArgsTable, Meta, Story } from '@storybook/addon-docs'
-import { ReactLiveBlock } from '@docs/helpers/ReactLiveBlock'
+  return `import { ArgsTable, Meta, Story, Canvas } from '@storybook/addon-docs'
 import { StoryHeading } from '@docs/helpers/StoryHeading'
 
 import { ${componentName} } from '.'
 
 import * as stories from './${componentName}.stories'
 
-<Meta title="Components/Misc/${componentName}" component={${componentName}} />
+<Meta of={stories} />
 
 # ${componentName}
 
@@ -35,6 +34,8 @@ import { ${componentName} } from "@spark-ui/${name}"
 
 <StoryHeading label="Variants" />
 
-<Story name="default" story={stories.Default} />
+<Canvas>
+  <Story of={stories.Default} />
+</Canvas>
 `
 }

package/src/generate/templates/component/src/[Component.stories.tsx].js

@@ -3,14 +3,19 @@ import { pascalCase } from 'pascal-case'
 export default ({ name, description }) => {
   const componentName = pascalCase(name)
 
-  return `import { ReactLiveBlock } from '@docs/helpers/ReactLiveBlock'
+  return `import { Meta, StoryFn } from '@storybook/react'
 
 import { ${componentName} } from '.'
 
-export const Default = () => (
-  <ReactLiveBlock scope={{ ${componentName} }}>
-    <${componentName}>Hello World!</${componentName}>
-  </ReactLiveBlock>
+const meta: Meta<typeof Portal> = {
+  title: 'Components/${componentName}',
+  component: ${componentName},
+}
+
+export default meta
+
+export const Default: StoryFn = _args => (
+  <${componentName}>Hello World!</${componentName}>
 )
 `
 }

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

@@ -3,12 +3,12 @@ import { pascalCase } from 'pascal-case'
 export default ({ name }) => {
   const componentName = pascalCase(name)
 
-  return `import { ComponentPropsWithoutRef, PropsWithChildren } from 'react'
+  return `import { forwardRef, ComponentPropsWithoutRef, PropsWithChildren } from 'react'
 
 export type ${componentName}Props = ComponentPropsWithoutRef<'div'>
 
-export function ${componentName}(props: PropsWithChildren<${componentName}Props>) {
-  return <div {...props} />
-}
+export const ${componentName} = forwardRef<HTMLDivElement, PropsWithChildren<${componentName}Props>>((props, ref) => {
+  return <div ref={ref} {...props} />
+})
 `
 }

package/test/spark-generate.test.ts

@@ -33,7 +33,7 @@ describe('CLI `spark generate` (component package)', () => {
       '/src/Bar.variants.tsx',
       '/src/Bar.tsx',
       '/vite.config.ts',
-      '/src/Bar.stories.mdx',
+      '/src/Bar.doc.mdx',
       '/src/Bar.test.tsx',
       '/src/Bar.stories.tsx',
       '/tsconfig.json',