Merge pull request #63 from heyjul3s/docs/generator-docs-update

Update Generator Doc
heyjul3s · Feb 2, 2021 · 3acd04a · 3acd04a
2 parents 7d74b11 + be744d7
commit 3acd04a
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 18 deletions.
diff --git a/docs/components/APIheading.tsx b/docs/components/APIheading.tsx
@@ -13,7 +13,7 @@ export function APIheading({ name, params }: Props) {
 
   return (
     <>
-      <H3 color={theme.colors.primary} mb={!hasParams ? '0.5em' : '0.25em'}>
+      <H3 color={theme.colors.primary} m={!hasParams ? '0 0 0.5em' : '0'}>
         {name}
       </H3>
 

diff --git a/docs/components/Code/Param.tsx b/docs/components/Code/Param.tsx
@@ -8,7 +8,7 @@ type Props = {
 export function Param({ name, types }: Props) {
   return (
     <>
-      <H4 display="inline-block" verticalAlign="middle">
+      <H4 display="inline-block" verticalAlign="middle" mb={0}>
         {name} &nbsp;
       </H4>
 

diff --git a/docs/components/Code/Params.tsx b/docs/components/Code/Params.tsx
@@ -5,7 +5,7 @@ export const Params = ({ params }: any) => {
 
   return (
     <>
-      <Paragraph display="inline-block">
+      <Paragraph display="inline-block" m={0}>
         (
         {propertyKeys.map((key, i) => {
           const comma = i !== propertyKeys.length - 1 ? ', ' : '';

diff --git a/docs/components/Typography.tsx b/docs/components/Typography.tsx
@@ -51,7 +51,6 @@ const headings = {
 const text = {
   base: {
     styles: {
-      marginTop: 0,
       lineHeight: 1.45
     }
   },

diff --git a/docs/page-content/Generator/Generator.tsx b/docs/page-content/Generator/Generator.tsx
@@ -11,7 +11,7 @@ import {
   APIheading
 } from '@components';
 
-import { createComponentsUsage } from './examples';
+import { createComponentsUsage, createStyledComponentUsage } from './examples';
 
 export function Generator() {
   return (
@@ -76,9 +76,7 @@ export function GeneratorContent() {
         arise. This does not cater to detailed, complex, and or single-use case
         components that you may require.
       </Paragraph>
-
       <HR />
-
       <APIheading
         name="createComponents"
         params={{
@@ -156,8 +154,57 @@ export function GeneratorContent() {
         component if a configuration object is passed as an argument for the{' '}
         <Strong>base</Strong> parameter.
       </Paragraph>
-
       <ParamsTable APIname={'settings'} cells={createBlocksSettingsCells} />
+      <APIheading
+        name="createStyledComponent"
+        params={{
+          Base: 'BaseConfig<Props, Attributes, ThemeType>'
+        }}
+      />
+
+      <Syntax>{createStyledComponentUsage}</Syntax>
+
+      <HR />
+
+      <H4>Generics</H4>
+
+      <Paragraph>
+        Much like createComponents, the <Strong>createStyledComponent</Strong>{' '}
+        function also has its own generic types.
+      </Paragraph>
+
+      <FlexTable
+        cells={[
+          {
+            prop: 'Props',
+            subProp: 'optional',
+            content: 'Custom properties that may be included.'
+          },
+          {
+            prop: 'ThemeType',
+            subProp: 'optional',
+            content: 'Defines the type of Theme if any.'
+          },
+          {
+            prop: 'Attributes',
+            subProp: 'optional',
+            content: 'Type for generated element.'
+          }
+        ]}
+      />
+
+      <HR />
+
+      <H4>Parameters</H4>
+
+      <Paragraph>
+        The <Strong>base</Strong> parameter for createStyledComponent is of the
+        same type used in createComponents.
+      </Paragraph>
+
+      <Param name="base" types="BaseConfig<Props, Attributes, ThemeType>" />
+
+      <ParamsTable APIname={'base'} cells={createBlocksBaseCells} />
     </>
   );
 }
diff --git a/docs/page-content/Generator/examples/createStyledComponentUsage.ts b/docs/page-content/Generator/examples/createStyledComponentUsage.ts
@@ -1,18 +1,16 @@
 export const createStyledComponentUsage = `
+  import { HTMLAttributes } from 'react';
   import { position, PositionProps } from 'styled-system';
+  import { theme } from './theme';
 
-  // A basic example
-  const StyledArticle = createStyledComponent<PositionProps>({
+  type CardProps = {
+    isHidden: boolean;
+  } & PositionProps;
+
+  const StyledArticle = createStyledComponent<CardProps, typeof theme, HTMLAttributes<HTMLDivElement>>({
     styles: { position: 'relative' },
+    attrs: { title: 'Hello World' },
     styledProps: [position],
     element: 'article'
   });
-
-  // If you need to add attributes, you can do it like so
-  // By default, element is set as "DIV"
-  const StyledButton = createStyledComponent<PositionProps>({
-    attrs: ({ role }) => ({ role: role || 'button' })
-    styles: { position: 'relative' },
-    styledProps: [position],
-  })
 `;