Merge pull request #12 from heyjul3s/documentation

Documentation

docs/codeExamples/customisation/index.tsx

@@ -0,0 +1 @@
+export { systemExtensionUsage } from '../customisation/systemExtensionUsage';

docs/codeExamples/generator/systemExtensionUsage.ts → docs/codeExamples/customisation/systemExtensionUsage.ts

@@ -1,5 +1,6 @@
 export const systemExtensionUsage = `
   import { system } from 'styled-system';
+  import { Property } from 'csstype';
   import { createStyledComponent, createBaseComponents } from 'artifak';
   import { Theme, RequiredTheme, ResponsiveValue } from 'styled-system';
 
@@ -8,20 +9,20 @@ export const systemExtensionUsage = `
   // You will find most of what you need via @types/styled-system but if you don't
   // well... here's an example of making your own.
   export interface TextDecorationProps<ThemeType extends Theme = RequiredTheme> {
-    textDecoration?: ResponsiveValue<CSS.Property.TextDecoration, ThemeType>;
+    textDecoration?: ResponsiveValue<Property.TextDecoration, ThemeType>;
   }
 
   // add your prop via "system"
   // for more on how "system" works: https://styled-system.com/custom-props/
   const myStylesConfig = system({
-    textDecoration: {
-      property: 'textDecoration',
-    },
+    textDecoration: true
   });
 
   // Create the styled component.
   // In this example, we're assuming we want to generate a bunch of components from this base.
-  const MyBaseComponent = createStyledComponent<TextDecorationProps>([myStylesConfig]);
+  const MyBaseComponent = createStyledComponent<TextDecorationProps>(
+    {}, {}, [myStylesConfig]
+  );
 
   const myStyles = {
     Component1: {

docs/codeExamples/generator/createBaseComponentsUsage.ts

@@ -4,9 +4,7 @@ export const createBaseComponentsUsage = `
 
   // Create your base component
   const BaseComponent = createStyledComponent<PositionProps>(
-    [position],
-    { position: 'relative' },
-    'article'
+    { position: 'relative' }, {}, [position], 'article'
   );
 
   // Define your styles

docs/codeExamples/generator/createStyledComponentUsage.ts

@@ -2,8 +2,6 @@ export const createStyledComponentUsage = `
   import { position, PositionProps } from 'styled-system';
 
   const StyledArticle = createStyledComponent<PositionProps>(
-    [position],
-    { position: 'relative' },
-    'article'
+    { position: 'relative' }, {}, [position], 'article'
   );
 `;

docs/codeExamples/generator/index.tsx

@@ -1,3 +1,2 @@
 export { createStyledComponentUsage } from './createStyledComponentUsage';
 export { createBaseComponentsUsage } from './createBaseComponentsUsage';
-export { systemExtensionUsage } from './systemExtensionUsage';

docs/codeExamples/media/and.ts

@@ -0,0 +1,14 @@
+export const and = `
+  import { media, screen } from 'artifak';
+  import styled from 'styled-components';
+
+  const Badge = styled.div\`
+    display: none;
+    margin: 0 auto;
+    width: 100%;
+
+    media({ screen, width: '>= 768px' })\`
+      display: block;
+    \`
+  \`;
+`;

docs/codeExamples/media/index.ts

@@ -0,0 +1,6 @@
+export { min } from './min';
+export { max } from './max';
+export { minMax } from './minMax';
+export { and } from './and';
+export { or } from './or';
+export { single } from './single';

docs/codeExamples/media/max.ts

@@ -0,0 +1,14 @@
+export const max = `
+  import { media } from 'artifak';
+  import styled from 'styled-components';
+
+  const Badge = styled.div\`
+    display: none;
+    margin: 0 auto;
+    width: 100%;
+
+    media({ width: '<= 768px' })\`
+      display: block;
+    \`
+  \`;
+`;

docs/codeExamples/media/min.ts

@@ -0,0 +1,13 @@
+export const min = `
+  import { media } from 'artifak';
+  import styled from 'styled-components';
+
+  const Container = styled.div\`
+    margin: 0 auto;
+    width: 100%;
+
+    media({ width: '>= 768px' })\`
+      max-width: 680px;
+    \`
+  \`;
+`;

docs/codeExamples/media/minMax.ts

@@ -0,0 +1,14 @@
+export const minMax = `
+  import { media } from 'artifak';
+  import styled from 'styled-components';
+
+  const Container = styled.div\`
+    margin: 0 auto;
+    width: 100%;
+
+    media({ width: '768px >= width <= 1200px' })\`
+      max-width: 680px;
+      background: red;
+    \`
+  \`;
+`;

docs/codeExamples/media/or.ts

@@ -0,0 +1,14 @@
+export const or = `
+  import { media, screen, landscape } from 'artifak';
+  import styled from 'styled-components';
+
+  const Badge = styled.div\`
+    display: none;
+    margin: 0 auto;
+    width: 100%;
+
+    media({ screen, width: '<= 768px' }, { landscape })\`
+      display: block;
+    \`
+  \`;
+`;

docs/codeExamples/media/single.ts

@@ -0,0 +1,14 @@
+export const single = `
+  import { media } from 'artifak';
+  import styled from 'styled-components';
+
+  const Badge = styled.div\`
+    display: none;
+    margin: 0 auto;
+    width: 100%;
+
+    media({ width: '768px' })\`
+      display: block;
+    \`
+  \`;
+`;

docs/codeExamples/variants/generateWithVariants.ts

@@ -0,0 +1,30 @@
+export const generateWithVariants = `
+  import { createStyledComponent, createBaseComponents } from 'artifak';
+  import { position, PositionProps } from 'styled-system';
+
+  // if you have default styles you can declare like so:
+  const baseStyles = {
+    display: 'block',
+    width: '100%',
+    minHeight: '400px'
+  };
+
+  // Usually you will have them declared in your theme, but as a short example...
+  const variants = {
+    variants: {
+      primary: {
+        color: 'red';
+      },
+      secondary: {
+        color: 'blue';
+      }
+    }
+  };
+
+  // From here, you can use createStyledComponent to create your
+  // base styled component with the variants you want.
+  // "[position]" is a CSS property from styled-system and is included
+  // here to demonstrate adding custom CSS properties.
+  // Note that the last argument is optional and defaults to a "DIV" element
+  const baseBackground = createStyledComponent<PositionProps>(baseStyles, variants, [position], 'div');
+`;

docs/codeExamples/variants/index.ts

@@ -0,0 +1 @@
+export { generateWithVariants } from './generateWithVariants';

docs/components/ArticleContentBlock.tsx

@@ -6,7 +6,7 @@ type Props = {
   content: React.ReactNodeArray;
 };
 
-export function ArticleContentBlock({ sectionTitle, content }) {
+export function ArticleContentBlock({ sectionTitle, content }: Props) {
   return (
     <section>
       <H3>{sectionTitle}</H3>

docs/components/FlexTable.tsx

@@ -8,7 +8,12 @@ import {
   SmallParagraph
 } from '../components/Typography';
 
-export function FlexTable({ title, cells }) {
+type Props = {
+  title?: string;
+  cells: { prop: string; content: string }[];
+};
+
+export function FlexTable({ title, cells }: Props) {
   return (
     <FlexRow
       p={'30px 30px 10px'}
@@ -17,7 +22,7 @@ export function FlexTable({ title, cells }) {
         border: '1px solid black'
       }}
     >
-      <FlexTableTitle title={title} />
+      {!!title && <FlexTableTitle title={title} />}
 
       {!!cells &&
         cells.length &&

docs/components/Header/index.tsx

@@ -46,13 +46,25 @@ const links = [
     title: 'Generator',
     selected: false,
     key: 'modules'
+  },
+  {
+    id: 'media',
+    title: 'Media',
+    selected: false,
+    key: 'modules'
+  },
+  {
+    id: 'variants',
+    title: 'Variants',
+    selected: false,
+    key: 'modules'
+  },
+  {
+    id: 'customisation',
+    title: 'Customisation',
+    selected: false,
+    key: 'modules'
   }
-  // {
-  //   id: 'variants',
-  //   title: 'Variants',
-  //   selected: false,
-  //   key: 'location'
-  // },
 ];
 
 export function Header() {