Update generators

Better reflects the patterns currently used

See #81

Author: stuarthendren

generators/Component.hbs

@@ -1,16 +1,33 @@
-import React from 'react'
-import { styled } from 'stitches.config'
+import * as Polymorphic from '@radix-ui/react-polymorphic'
+import React, { forwardRef } from 'react'
+import { CSS, StitchesVariants, styled } from 'stitches.config'
 
+const DEFAULT_TAG = 'div'
 
 /**
-* {{ name }} component
-*/
-export const Styled{{ name }} = styled('div', {})
+ * Styled{{ name }} base component
+ */
+const Styled{{ name }} = styled(DEFAULT_TAG, {})
 
-
-type Styled{{ name }}Props = React.ComponentProps<typeof Styled{{ name }}>
-export type {{ name }}Props = Styled{{ name }}Props & {}
-
-
-export const {{ name }}: React.FC<{{ name }}Props> = Styled{{ name }}
-{{ name }}.toString = () => `.${Styled{{ name }}.className}`
+// Either export the component above directly removing the Styled prefix.
+// Or if polymorphism is required or further action on the bases component uncomment below.
+//
+// type {{ name }}CSSProp = { css?: CSS }
+// type {{ name }}Variants = StitchesVariants<typeof Styled{{ name }}>
+// type {{ name }}OwnProps = {{ name }}CSSProp & {{ name }}Variants
+// 
+// type {{ name }}Component = Polymorphic.ForwardRefComponent<
+//   typeof DEFAULT_TAG,
+//   {{ name }}OwnProps
+// >
+// 
+// /**
+//  * {{ name }} component
+//  */
+// export const {{ name }} = forwardRef(({ ...props }, ref) => (
+//   <Styled{{ name }}
+//     ref={ref}
+//     {...props}
+//   />
+// )) as {{ name }}Component
+// {{ name }} .toString = () => `.${Styled{{ name }}.className}`

generators/Component.stories.hbs

@@ -1,20 +1,19 @@
 import React from 'react'
 import { Story, Meta } from '@storybook/react'
-import { {{ name }}, {{ name }}Props } from '.'
+import { {{ name }} } from '.'
 
 export default {
 title: 'Components/{{ name }}',
 component: {{ name }},
 } as Meta
 
-export const Default: React.FC = () => {
-return
-<{{ name }} />
-}
+export const Default: Story = (args) => <{{ name }} {...args} />
 
-const Template: Story<{{ name }}Props> = (args) =>
-    <{{ name }} {...args} />
+// Use for Template args setup
+// const Template: Story = (args) => <{{ name }} {...args} />
+// export const Primary = Template.bind({})
+// Primary.args = {
+// }
 
-    export const Primary = Template.bind({})
-    Primary.args = {
-    }
+// Use for separate stories
+// export const Simple: React.FC = () => <{{ name }} />

generators/Component.test.hbs

@@ -1,7 +1,6 @@
 import React from 'react'
 import { renderLight, renderDark } from 'test-utils'
 import { Default } from './{{ name }}.stories'
-import { {{ name }} } from '.'
 
 it('renders light without error', () => {
   const { asFragment } = renderLight(<Default />)