From 0ba1063c641704216ab71ed9412f19f82b345338 Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Tue, 8 Dec 2020 16:20:19 +1100 Subject: [PATCH 01/16] Docs Update - update createBaseComponents usage example - update createStyledComponet usage example - update media usage example - Add ParamsTable - Move Params and ParamsDescription from Syntax - Update Generator doc --- .../generator/createBaseComponentsUsage.ts | 48 ++++++++---- .../generator/createStyledComponentUsage.ts | 17 ++++- docs/codeExamples/media/and.ts | 7 +- docs/codeExamples/media/max.ts | 4 +- docs/codeExamples/media/min.ts | 4 +- docs/codeExamples/media/minMax.ts | 4 +- docs/codeExamples/media/or.ts | 9 ++- docs/codeExamples/media/single.ts | 4 +- .../variants/generateWithVariants.ts | 6 +- docs/components/APIheading.tsx | 6 +- docs/components/FlexTable.tsx | 4 +- docs/components/Params.tsx | 26 +++++++ docs/components/ParamsDescription.tsx | 16 ++++ docs/components/ParamsTable.tsx | 64 ++++++++++++++++ docs/components/Syntax.tsx | 37 ---------- docs/containers/Generator.tsx | 73 +++++++++++++++++-- 16 files changed, 248 insertions(+), 81 deletions(-) create mode 100644 docs/components/Params.tsx create mode 100644 docs/components/ParamsDescription.tsx create mode 100644 docs/components/ParamsTable.tsx diff --git a/docs/codeExamples/generator/createBaseComponentsUsage.ts b/docs/codeExamples/generator/createBaseComponentsUsage.ts index 887cd36..f6fd268 100644 --- a/docs/codeExamples/generator/createBaseComponentsUsage.ts +++ b/docs/codeExamples/generator/createBaseComponentsUsage.ts @@ -3,29 +3,49 @@ export const createBaseComponentsUsage = ` import { createStyledComponent, createBaseComponents } from 'artifak'; // Create your base component - const BaseComponent = createStyledComponent( - { position: 'relative' }, {}, [position], 'article' - ); + const BaseComponent = createStyledComponent({ + styles: { position: 'relative' } + styleProps: [position] + }); // Define your styles - const styles = { - Article1: { - margin: 0, + const config = { + Container: { + styles: { + margin: 0 auto, + padding: ['1em', '1.5em 1em'], + width: '100%', + maxWidth: ['320px', '768px', '996px', '1200px'] + }, + attrs: { + role: 'region' + } }, - Article2: { - margin: 15px + UnpaddedContainer: { + styles: { + padding: 0 + }, + attrs: { + role: 'region' + } }, - Article3: { - margin: 15px + FlexContainer: { + styles: { + display: 'flex', + padding: ['1em', '1.5em 1em'], + } + attrs: { + role: 'region' + } } }; // And put it all here export const { - Article1, - Article2, - Article3 - } = createBaseComponents(BaseComponent, styles); + Container, + UnpaddedContainer, + FlexContainer + } = createBaseComponents(BaseComponent, config); `; diff --git a/docs/codeExamples/generator/createStyledComponentUsage.ts b/docs/codeExamples/generator/createStyledComponentUsage.ts index 2d9b985..819f468 100644 --- a/docs/codeExamples/generator/createStyledComponentUsage.ts +++ b/docs/codeExamples/generator/createStyledComponentUsage.ts @@ -1,7 +1,18 @@ export const createStyledComponentUsage = ` import { position, PositionProps } from 'styled-system'; - const StyledArticle = createStyledComponent( - { position: 'relative' }, {}, [position], 'article' - ); + // A basic example + const StyledArticle = createStyledComponent({ + styles: { position: 'relative' }, + 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({ + attrs: ({ role }) => ({ role: role || 'button' }) + styles: { position: 'relative' }, + styledProps: [position], + }) `; diff --git a/docs/codeExamples/media/and.ts b/docs/codeExamples/media/and.ts index b2ad78e..57fdb23 100644 --- a/docs/codeExamples/media/and.ts +++ b/docs/codeExamples/media/and.ts @@ -7,8 +7,11 @@ export const and = ` margin: 0 auto; width: 100%; - media({ screen, width: '>= 768px' })\` + \${media({ + screen, + width: '>= 768px' + })\` display: block; - \` + \`} \`; `; diff --git a/docs/codeExamples/media/max.ts b/docs/codeExamples/media/max.ts index 5336770..b2b59b8 100644 --- a/docs/codeExamples/media/max.ts +++ b/docs/codeExamples/media/max.ts @@ -7,8 +7,8 @@ export const max = ` margin: 0 auto; width: 100%; - media({ width: '<= 768px' })\` + \${media({ width: '<= 768px' })\` display: block; - \` + \`} \`; `; diff --git a/docs/codeExamples/media/min.ts b/docs/codeExamples/media/min.ts index 4aefcf9..e035763 100644 --- a/docs/codeExamples/media/min.ts +++ b/docs/codeExamples/media/min.ts @@ -6,8 +6,8 @@ export const min = ` margin: 0 auto; width: 100%; - media({ width: '>= 768px' })\` + \${media({ width: '>= 768px' })\` max-width: 680px; - \` + \`} \`; `; diff --git a/docs/codeExamples/media/minMax.ts b/docs/codeExamples/media/minMax.ts index c874af5..80306f2 100644 --- a/docs/codeExamples/media/minMax.ts +++ b/docs/codeExamples/media/minMax.ts @@ -6,9 +6,9 @@ export const minMax = ` margin: 0 auto; width: 100%; - media({ width: '768px >= width <= 1200px' })\` + \${media({ width: '768px >= width <= 1200px' })\` max-width: 680px; background: red; - \` + \`} \`; `; diff --git a/docs/codeExamples/media/or.ts b/docs/codeExamples/media/or.ts index b8db72a..3b2c0d7 100644 --- a/docs/codeExamples/media/or.ts +++ b/docs/codeExamples/media/or.ts @@ -7,8 +7,13 @@ export const or = ` margin: 0 auto; width: 100%; - media({ screen, width: '<= 768px' }, { landscape })\` + \${media({ + screen, + width: '<= 768px' + }, { + landscape + })\` display: block; - \` + \`} \`; `; diff --git a/docs/codeExamples/media/single.ts b/docs/codeExamples/media/single.ts index a29becb..4218580 100644 --- a/docs/codeExamples/media/single.ts +++ b/docs/codeExamples/media/single.ts @@ -7,8 +7,8 @@ export const single = ` margin: 0 auto; width: 100%; - media({ width: '768px' })\` + \${media({ width: '768px' })\` display: block; - \` + \`} \`; `; diff --git a/docs/codeExamples/variants/generateWithVariants.ts b/docs/codeExamples/variants/generateWithVariants.ts index c64c439..dda8cc1 100644 --- a/docs/codeExamples/variants/generateWithVariants.ts +++ b/docs/codeExamples/variants/generateWithVariants.ts @@ -26,5 +26,9 @@ export const generateWithVariants = ` // "[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(baseStyles, variants, [position], 'div'); + const baseBackground = createStyledComponent({ + styles: baseStyles, + variants, + styleProps: [position], + }); `; diff --git a/docs/components/APIheading.tsx b/docs/components/APIheading.tsx index 8de3efe..945416c 100644 --- a/docs/components/APIheading.tsx +++ b/docs/components/APIheading.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { H3 } from './Typography'; -import { Params } from './Syntax'; +import { Params } from './Params'; import { theme } from '../theme'; type Props = { @@ -19,9 +19,7 @@ export function APIheading({ name, params }: Props) { {hasParams && ( )} diff --git a/docs/components/FlexTable.tsx b/docs/components/FlexTable.tsx index 9923630..26c21f3 100644 --- a/docs/components/FlexTable.tsx +++ b/docs/components/FlexTable.tsx @@ -10,7 +10,7 @@ import { type Props = { title?: string; - cells: { prop: string; content: string }[]; + cells: { prop: string; subProp?: string; content: string }[]; }; export function FlexTable({ title, cells }: Props) { @@ -39,7 +39,7 @@ export function FlexTable({ title, cells }: Props) { export function FlexTableTitle({ title }) { return ( -

Props

+

{title}

 ); } diff --git a/docs/components/Params.tsx b/docs/components/Params.tsx new file mode 100644 index 0000000..217c3f8 --- /dev/null +++ b/docs/components/Params.tsx @@ -0,0 +1,26 @@ +import { Paragraph, Strong } from '../components/Typography'; + +export const Params = ({ params }: any) => { + const propertyKeys = Object.keys(params); + + return ( + <> + + ( + { + propertyKeys.map((key, i) => { + const comma = i !== propertyKeys.length - 1 ? ', ' : ''; + + return ( + + {key} + {`: ${params[key]}${comma}`} + + ); + }) + } + ) + + + ); +}; diff --git a/docs/components/ParamsDescription.tsx b/docs/components/ParamsDescription.tsx new file mode 100644 index 0000000..a212c6f --- /dev/null +++ b/docs/components/ParamsDescription.tsx @@ -0,0 +1,16 @@ +import { Paragraph, Strong } from '../components/Typography'; +import { Params } from './Params'; + +export const ParamsDescription = ({ label = '', params }) => { + return ( + <> + + + {label} + +   + + + + ); +}; diff --git a/docs/components/ParamsTable.tsx b/docs/components/ParamsTable.tsx new file mode 100644 index 0000000..9a4d0f6 --- /dev/null +++ b/docs/components/ParamsTable.tsx @@ -0,0 +1,64 @@ +import React from 'react'; +import { FlexRow, FlexCol } from 'artifak'; +import { H4, Paragraph, Strong, SmallParagraph, SmallLead } from '../components/Typography'; +import { paddingBottom } from 'styled-system'; + +export function ParamsTable({ APIname, APItypes, cells }) { + return ( +
+

{APIname}  

+ {APItypes} + +
+ + + + Name + + + Type + + + Default + + + Description + + + + {cells.map((cell) => { + const { name, type, defaultValue, content } = cell; + + return ( + + + + + {name} + + + + + + {type} + + + + {defaultValue} + + + + {content} + + + ) + })} +
+ ) +} \ No newline at end of file diff --git a/docs/components/Syntax.tsx b/docs/components/Syntax.tsx index 2730b6a..08e3b58 100644 --- a/docs/components/Syntax.tsx +++ b/docs/components/Syntax.tsx @@ -45,40 +45,3 @@ export function Syntax({ ); } - -export const ParamsDescription = ({ label = '', params }) => { - return ( - <> - - - {label} - -   - - - - ); -}; - -export const Params = ({ params }: any) => { - const propertyKeys = Object.keys(params); - - return ( - <> - - ( - {propertyKeys.map((key, i) => { - const comma = i !== propertyKeys.length - 1 ? ', ' : ''; - - return ( - - {key} - {`: ${params[key]}${comma}`} - - ); - })} - ) - - - ); -}; diff --git a/docs/containers/Generator.tsx b/docs/containers/Generator.tsx index ee798f6..c1aae17 100644 --- a/docs/containers/Generator.tsx +++ b/docs/containers/Generator.tsx @@ -1,5 +1,7 @@ -import { Paragraph, Strong } from '../components/Typography'; +import { H4, Paragraph, Strong, SmallParagraph, SmallLead } from '../components/Typography'; import { Syntax } from '../components/Syntax'; +import { ParamsTable } from '../components/ParamsTable'; +import { FlexRow, FlexCol } from 'artifak'; import { createStyledComponentUsage, @@ -7,6 +9,7 @@ import { } from '../codeExamples/generator'; import { HR } from '../components/HR'; +import { FlexTable } from '../components/FlexTable'; import { ArticleDoc } from '../components/ArticleDoc'; import { APIheading } from '../components/APIheading'; @@ -18,6 +21,52 @@ export function Generator() { ); } +const createStyledComponentCells = [ + { + name: 'attrs', + type: 'Attrs', + defaultValue: '{ }', + content: + 'This will define attributes that you wish to be added onto the base.' + }, + { + name: 'styleProps', + type: 'styleFn[]', + defaultValue: '[ ]', + content: + 'This will accept any additional Styled System CSS properties that you wish to include.' + }, + { + name: 'styles', + defaultValue: '{ }', + type: 'CSSObject | TemplateStringsArray | InterpolationFunction', + content: + 'Define your styles here. Accepts a CSS object or interpolated string styles.' + }, + { + name: 'element', + type: 'keyof JSX.IntrinsicElements', + defaultValue: 'div', + content: + 'Dictate which HTML element you would like to use for this base component.' + } +] + +const createBaseComponentsCells = [ + { + name: 'styles', + type: 'StyledSystemCSSObject', + defaultValue: 'N/A', + content: 'Adds styles to the component.' + }, + { + name: 'attrs', + type: 'HTMLAttributes', + defaultValue: 'N/A', + content: 'Adds attributes to the component.' + } +] + export function GeneratorContent() { return ( <> @@ -25,7 +74,11 @@ export function GeneratorContent() { The component-generator library or generator for short, comprises of 2 utility functions namely createStyledComponent and   - createBaseComponents. As you might have guessed, these + createBaseComponents. The purpose of the Generator is to help setup a base Styled Component loaded with Styled System properties to which is then used to generate components. Usage of the Generator is limited in a sense that it is meant to be used in lieu with simpler, less complex components or in other words, helping in creating primitive building blocks for your application. + + + + As you might have guessed, these are the core functions of the Artifak library. But for the purposes of greater flexibility, these functions have been made available as not all style properties are available right off the bat and you may need the @@ -37,15 +90,16 @@ export function GeneratorContent() { ' }} /> + + '} cells={createStyledComponentCells} /> + The purpose of this utility function is to generate a base styled component which would then be used in createBaseComponents (or not if - you don't want to). + you don't want to). You can load up on Styled System properties or default attributes here if you wish. {createStyledComponentUsage} @@ -55,10 +109,13 @@ export function GeneratorContent() { > | StyledSystemCSSObject }' }} /> + + > | StyledSystemCSSObject'} cells={createBaseComponentsCells} /> + createBaseComponents, as implied, would generate a bunch of styled components in accordance to the styles that you provide. This would From f6732e9a79d4275e8e3169d5689559a83957a12d Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Wed, 9 Dec 2020 12:39:02 +1100 Subject: [PATCH 02/16] Add Getting Started page --- .../codeExamples/gettingStarted/basicUsage.ts | 19 +++++++++++ .../GettingStarted/GettingStarted.tsx | 27 +++++++++++++++ .../GettingStarted/codeExamples/build.ts | 26 ++++++++++++++ .../GettingStarted/codeExamples/index.ts | 5 +++ .../codeExamples/installation.ts | 3 ++ .../GettingStarted/codeExamples/setup.ts | 34 +++++++++++++++++++ .../GettingStarted/codeExamples/theming.ts | 14 ++++++++ .../GettingStarted/codeExamples/variants.ts | 17 ++++++++++ .../GettingStarted/content/Building.tsx | 20 +++++++++++ .../GettingStarted/content/Installation.tsx | 15 ++++++++ .../GettingStarted/content/Setup.tsx | 22 ++++++++++++ .../GettingStarted/content/Theming.tsx | 18 ++++++++++ .../GettingStarted/content/Variants.tsx | 22 ++++++++++++ .../GettingStarted/content/index.tsx | 5 +++ docs/containers/index.tsx | 4 ++- 15 files changed, 250 insertions(+), 1 deletion(-) create mode 100644 docs/codeExamples/gettingStarted/basicUsage.ts create mode 100644 docs/containers/GettingStarted/GettingStarted.tsx create mode 100644 docs/containers/GettingStarted/codeExamples/build.ts create mode 100644 docs/containers/GettingStarted/codeExamples/index.ts create mode 100644 docs/containers/GettingStarted/codeExamples/installation.ts create mode 100644 docs/containers/GettingStarted/codeExamples/setup.ts create mode 100644 docs/containers/GettingStarted/codeExamples/theming.ts create mode 100644 docs/containers/GettingStarted/codeExamples/variants.ts create mode 100644 docs/containers/GettingStarted/content/Building.tsx create mode 100644 docs/containers/GettingStarted/content/Installation.tsx create mode 100644 docs/containers/GettingStarted/content/Setup.tsx create mode 100644 docs/containers/GettingStarted/content/Theming.tsx create mode 100644 docs/containers/GettingStarted/content/Variants.tsx create mode 100644 docs/containers/GettingStarted/content/index.tsx diff --git a/docs/codeExamples/gettingStarted/basicUsage.ts b/docs/codeExamples/gettingStarted/basicUsage.ts new file mode 100644 index 0000000..d6101f4 --- /dev/null +++ b/docs/codeExamples/gettingStarted/basicUsage.ts @@ -0,0 +1,19 @@ +export const basicUsage = ` + import React from 'react'; + import { BlockBase, Image } from 'artifak'; + + export function Card({ + img, + alt, + title, + description + }) { + return ( + + {alt}{title} +

{content}

+ + ) + } +` \ No newline at end of file diff --git a/docs/containers/GettingStarted/GettingStarted.tsx b/docs/containers/GettingStarted/GettingStarted.tsx new file mode 100644 index 0000000..26f203e --- /dev/null +++ b/docs/containers/GettingStarted/GettingStarted.tsx @@ -0,0 +1,27 @@ +import { ArticleDoc } from '../../components/ArticleDoc'; +import { HR } from '../../components/HR'; +import { Building, Variants, Setup, Installation, Theming } from './content'; + +export function GettingStarted() { + return ( + + + + ); +} + +export function GettingStartedContent() { + return ( + <> + +
+ +
+ +
+ +
+ + + ); +} diff --git a/docs/containers/GettingStarted/codeExamples/build.ts b/docs/containers/GettingStarted/codeExamples/build.ts new file mode 100644 index 0000000..608889a --- /dev/null +++ b/docs/containers/GettingStarted/codeExamples/build.ts @@ -0,0 +1,26 @@ +export const buildExample = ` + import { FlexBase, FlexRow, FlexCol, Imagery } from 'artifak'; + import { Heading2, Paragraph } from './src/Typography'; + + export function Card({ + title, + description, + imgSrc, + imgAlt + }) { + return ( + + + + + + + {title} + {description} + + + (styles); +`; diff --git a/docs/containers/GettingStarted/codeExamples/theming.ts b/docs/containers/GettingStarted/codeExamples/theming.ts new file mode 100644 index 0000000..8c3af98 --- /dev/null +++ b/docs/containers/GettingStarted/codeExamples/theming.ts @@ -0,0 +1,14 @@ +export const themingExample = ` + import React from 'react' + import { ThemeProvider } from 'styled-components'; + import { App } from './src'; + import { myTheme } from './src/theme'; + + export function App() { + return ( + + + + ); + } +` \ No newline at end of file diff --git a/docs/containers/GettingStarted/codeExamples/variants.ts b/docs/containers/GettingStarted/codeExamples/variants.ts new file mode 100644 index 0000000..fa9e6a7 --- /dev/null +++ b/docs/containers/GettingStarted/codeExamples/variants.ts @@ -0,0 +1,17 @@ +export const variantsExample = ` + import { variants } from 'styled-system'; + import { Heading1 } from './src/Typography'; + + export const H1 = styled(Heading1)( + variants({ + variants: { + shout: { + color: 'red' + }, + whisper: { + color: 'grey' + } + } + }) + ); +`; diff --git a/docs/containers/GettingStarted/content/Building.tsx b/docs/containers/GettingStarted/content/Building.tsx new file mode 100644 index 0000000..f5b7f27 --- /dev/null +++ b/docs/containers/GettingStarted/content/Building.tsx @@ -0,0 +1,20 @@ +import { H3, Paragraph } from '../../../components/Typography'; +import { Syntax } from '../../../components/Syntax'; +import { theme } from '../../../theme'; +import { buildExample } from '../codeExamples'; + +export function Building() { + return ( + <> +

Start Building And Profit

+ + + Apart from utilities, Artifak also has other primitive components in + place like Flex. Below is an example of how you can synergise the + previous steps in order to start building. + + + {buildExample} + + ); +} diff --git a/docs/containers/GettingStarted/content/Installation.tsx b/docs/containers/GettingStarted/content/Installation.tsx new file mode 100644 index 0000000..3aab66a --- /dev/null +++ b/docs/containers/GettingStarted/content/Installation.tsx @@ -0,0 +1,15 @@ +import { H3, Paragraph } from '../../../components/Typography'; +import { Syntax } from '../../../components/Syntax'; +import { theme } from '../../../theme'; +import { installationExample } from '../codeExamples'; + +export function Installation() { + return ( + <> +

Installation

+ First, install Artifak + + {installationExample} + + ); +} diff --git a/docs/containers/GettingStarted/content/Setup.tsx b/docs/containers/GettingStarted/content/Setup.tsx new file mode 100644 index 0000000..8bb6d93 --- /dev/null +++ b/docs/containers/GettingStarted/content/Setup.tsx @@ -0,0 +1,22 @@ +import { H3, Paragraph } from '../../../components/Typography'; +import { Syntax } from '../../../components/Syntax'; +import { theme } from '../../../theme'; +import { setupExample } from '../codeExamples'; + +export function Setup() { + return ( + <> +

Setup Your Components (Optional)

+ + + For greenfield projects, it would usually involve some basic setups to + get up and running. Some of these include setting up your containers and + typography and Artifak provides a utility function to help in setting up + these types of components. Below is an example of setting up some + Typography components. + + + {setupExample} + + ); +} diff --git a/docs/containers/GettingStarted/content/Theming.tsx b/docs/containers/GettingStarted/content/Theming.tsx new file mode 100644 index 0000000..059bcf3 --- /dev/null +++ b/docs/containers/GettingStarted/content/Theming.tsx @@ -0,0 +1,18 @@ +import { H3, Paragraph } from '../../../components/Typography'; +import { Syntax } from '../../../components/Syntax'; +import { theme } from '../../../theme'; +import { themingExample } from '../codeExamples'; + +export function Theming() { + return ( + <> +

Theming

+ + Artifak does not include a theme by default. This is entirely up to you + and you can easily plug in your theme via ThemeProvider. + + + {themingExample} + + ); +} diff --git a/docs/containers/GettingStarted/content/Variants.tsx b/docs/containers/GettingStarted/content/Variants.tsx new file mode 100644 index 0000000..fcd1bfc --- /dev/null +++ b/docs/containers/GettingStarted/content/Variants.tsx @@ -0,0 +1,22 @@ +import { H3, Paragraph } from '../../../components/Typography'; +import { Syntax } from '../../../components/Syntax'; +import { theme } from '../../../theme'; +import { variantsExample } from '../codeExamples'; + +export function Variants() { + return ( + <> +

+ Using Variants With Your Generated Items +

+ + + In conjunction with the previous example. Sometimes, we would like + variants with our generated components. We can do this via the variants + utility function. + + + {variantsExample} + + ); +} diff --git a/docs/containers/GettingStarted/content/index.tsx b/docs/containers/GettingStarted/content/index.tsx new file mode 100644 index 0000000..e27669b --- /dev/null +++ b/docs/containers/GettingStarted/content/index.tsx @@ -0,0 +1,5 @@ +export { Building } from './Building'; +export { Theming } from './Theming'; +export { Installation } from './Installation'; +export { Setup } from './Setup'; +export { Variants } from './Variants'; diff --git a/docs/containers/index.tsx b/docs/containers/index.tsx index c4a7db9..64f3690 100644 --- a/docs/containers/index.tsx +++ b/docs/containers/index.tsx @@ -8,6 +8,7 @@ import { Imagery } from './Imagery'; import { Media } from './Media'; import { Variants } from './Variants'; import { Customisation } from './Customisation'; +import { GettingStarted } from './GettingStarted/GettingStarted'; export const content = { Introduction, @@ -19,5 +20,6 @@ export const content = { Imagery, Media, Variants, - Customisation + Customisation, + GettingStarted }; From 6fdaffecb47bfeb60af94298d05ea7606f77cebe Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Wed, 9 Dec 2020 12:39:34 +1100 Subject: [PATCH 03/16] add Getting Started to dropdown nav --- docs/components/Dropdown/Dropdown.tsx | 12 ++++++++---- docs/components/Dropdown/components/Options.tsx | 2 +- .../Dropdown/components/OptionsList.tsx | 6 +++--- docs/components/Dropdown/typings.ts | 1 + docs/components/Header/index.tsx | 17 +++++++++++++++++ 5 files changed, 30 insertions(+), 8 deletions(-) diff --git a/docs/components/Dropdown/Dropdown.tsx b/docs/components/Dropdown/Dropdown.tsx index 7a3ed16..17e96bd 100644 --- a/docs/components/Dropdown/Dropdown.tsx +++ b/docs/components/Dropdown/Dropdown.tsx @@ -11,17 +11,20 @@ type Props = { type ListItemProp = { id: string; title: string; + component: string; selected: boolean; key: string; }; export function Dropdown({ title = '', list = [] }: Props) { const router = useRouter(); - const [listOpen, setListOpen] = React.useState(false); - const [headerTitle, setHeaderTitle] = React.useState(''); + const [listOpen, setListOpen] = React.useState(false); + const [headerTitle, setHeaderTitle] = React.useState(''); + const [page, setPage] = React.useState(''); React.useEffect(() => { setHeaderTitle(title); + }, []); React.useEffect(() => { @@ -37,7 +40,7 @@ export function Dropdown({ title = '', list = [] }: Props) { React.useEffect(() => { router.push({ pathname: '/', - query: { content: headerTitle } + query: { content: page } }); }, [headerTitle]); @@ -45,8 +48,9 @@ export function Dropdown({ title = '', list = [] }: Props) { setListOpen(!listOpen); }; - const selectItem = (title, id) => { + const selectItem = (title, id, component) => { setHeaderTitle(title); + setPage(component); setListOpen(false); }; diff --git a/docs/components/Dropdown/components/Options.tsx b/docs/components/Dropdown/components/Options.tsx index e21d4ea..3778924 100644 --- a/docs/components/Dropdown/components/Options.tsx +++ b/docs/components/Dropdown/components/Options.tsx @@ -5,7 +5,7 @@ import { OptionsList } from './OptionsList'; type Props = { list: ListItem[]; - selectItem: (title: string, id: string) => void; + selectItem: (title: string, id: string, component: string) => void; } export function Options({ list, selectItem }: Props) { diff --git a/docs/components/Dropdown/components/OptionsList.tsx b/docs/components/Dropdown/components/OptionsList.tsx index e552229..6316a66 100644 --- a/docs/components/Dropdown/components/OptionsList.tsx +++ b/docs/components/Dropdown/components/OptionsList.tsx @@ -7,7 +7,7 @@ type Props = { list: ListItem[]; searchable?: boolean; keyword?: string; - selectItem: (title: string, id: string) => void; + selectItem: (title: string, id: string, component: string) => void; } export function OptionsList({ list, searchable = false, keyword = '', selectItem }: Props) { @@ -17,11 +17,11 @@ export function OptionsList({ list, searchable = false, keyword = '', selectItem return ( <> { - tempList.map(({ title, id, selected }) => ( + tempList.map(({ title, id, component, selected }) => ( selectItem(title, id)} + onClick={() => selectItem(title, id, component)} > {title} {' '} diff --git a/docs/components/Dropdown/typings.ts b/docs/components/Dropdown/typings.ts index 8bb0f51..47553bf 100644 --- a/docs/components/Dropdown/typings.ts +++ b/docs/components/Dropdown/typings.ts @@ -1,6 +1,7 @@ export type ListItem = { id: string; title: string; + component: string; selected: boolean; key: string; } \ No newline at end of file diff --git a/docs/components/Header/index.tsx b/docs/components/Header/index.tsx index 6036caa..d6ee03d 100644 --- a/docs/components/Header/index.tsx +++ b/docs/components/Header/index.tsx @@ -8,60 +8,77 @@ const links = [ { id: 'home', title: 'Home', + component: 'Home', + selected: false, + key: 'modules' + }, + { + id: 'getting-started', + title: 'Getting Started', + component: 'GettingStarted', selected: false, key: 'modules' }, { id: 'block', title: 'Block', + component: 'Block', selected: false, key: 'modules' }, { id: 'grid', title: 'Grid', + component: 'Grid', selected: false, key: 'modules' }, { id: 'flex', title: 'Flex', + component: 'Flex', selected: false, key: 'modules' }, { id: 'typography', title: 'Typography', + component: 'Typography', selected: false, key: 'modules' }, { id: 'imagery', title: 'Imagery', + component: 'Imagery', selected: false, key: 'modules' }, { id: 'generator', title: 'Generator', + component: 'Generator', selected: false, key: 'modules' }, { id: 'media', title: 'Media', + component: 'Media', selected: false, key: 'modules' }, { id: 'variants', title: 'Variants', + component: 'Variants', selected: false, key: 'modules' }, { id: 'customisation', title: 'Customisation', + component: 'Customisation', selected: false, key: 'modules' } From 589585420650b42e6a715b993a393b46b3769995 Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Wed, 9 Dec 2020 14:14:18 +1100 Subject: [PATCH 04/16] Restructure Dirs - move containers into their own respective dir - move examples to be closer to container Doc - move global components to dir Global - fix APIHeading params prop --- docs/codeExamples/customisation/index.tsx | 1 - .../codeExamples/gettingStarted/basicUsage.ts | 19 ------ docs/components/APIheading.tsx | 8 +-- .../{ => Article}/ArticleSubSectionTitle.tsx | 2 +- .../{ => Article}/BlockedSectionTitle.tsx | 2 +- docs/components/Article/Content/Content.tsx | 12 ++++ docs/components/Article/Content/index.tsx | 2 + docs/components/Article/Content/typings.ts | 4 ++ docs/components/Article/Doc/Doc.tsx | 12 ++++ docs/components/Article/Doc/index.tsx | 2 + docs/components/Article/Doc/typings.ts | 4 ++ docs/components/Article/Title/Title.tsx | 14 +++++ docs/components/Article/Title/index.tsx | 2 + docs/components/Article/Title/styles.tsx | 41 +++++++++++++ docs/components/Article/Title/typings.ts | 3 + docs/components/Article/index.tsx | 8 +++ docs/components/Article/styles.tsx | 8 +++ docs/components/ArticleContentBlock.tsx | 16 ----- docs/components/ArticleDoc.tsx | 16 ----- docs/components/Code/Params.tsx | 24 ++++++++ .../{ => Code}/ParamsDescription.tsx | 0 docs/components/{ => Code}/ParamsTable.tsx | 32 ++++++---- docs/components/{ => Code}/Syntax.tsx | 0 docs/components/{ => Global}/GlobalStyles.tsx | 2 +- docs/components/{ => Global}/HR.tsx | 0 docs/components/{ => Global}/HTMLhead.tsx | 0 docs/components/{ => Global}/Layout.tsx | 0 docs/components/Params.tsx | 26 -------- docs/containers/{ => Block}/Block.tsx | 18 +++--- .../Block/examples}/BlockBase.tsx | 0 .../Block/examples}/createBlockComponents.ts | 0 .../Block/examples}/index.tsx | 0 .../{ => Customisation}/Customisation.tsx | 17 +++--- .../Customisation/examples/index.tsx | 1 + .../examples}/systemExtensionUsage.ts | 0 docs/containers/{ => Flex}/Flex.tsx | 20 +++---- .../Flex/examples}/FlexAlignmentDemo.tsx | 0 .../Flex/examples}/FlexColumnSizingDemo.tsx | 0 .../Flex/examples}/FlexOffsetDemo.tsx | 0 .../Flex/examples}/FlexTotalColumnsDemo.tsx | 0 .../Flex/examples}/flexAlignmentUsage.ts | 0 .../Flex/examples}/flexColumnSizingUsage.ts | 0 .../Flex/examples}/flexOffsetUsage.ts | 0 .../Flex/examples}/flexTotalColumnsUsage.ts | 0 .../Flex/examples}/index.tsx | 0 docs/containers/{ => Generator}/Generator.tsx | 60 +++++++++++-------- .../examples}/createBaseComponentsUsage.ts | 0 .../examples}/createStyledComponentUsage.ts | 0 .../Generator/examples}/index.tsx | 0 .../GettingStarted/GettingStarted.tsx | 8 +-- .../GettingStarted/content/Building.tsx | 4 +- .../GettingStarted/content/Installation.tsx | 4 +- .../GettingStarted/content/Setup.tsx | 4 +- .../GettingStarted/content/Theming.tsx | 4 +- .../GettingStarted/content/Variants.tsx | 4 +- .../{codeExamples => examples}/build.ts | 0 .../{codeExamples => examples}/index.ts | 0 .../installation.ts | 0 .../{codeExamples => examples}/setup.ts | 0 .../{codeExamples => examples}/theming.ts | 0 .../{codeExamples => examples}/variants.ts | 0 docs/containers/{ => Grid}/Grid.tsx | 27 ++++----- .../Grid/examples}/GridDemo.tsx | 0 .../grid => containers/Grid/examples}/grid.ts | 0 docs/containers/Grid/examples/index.tsx | 13 ++++ docs/containers/{ => Imagery}/Imagery.tsx | 16 ++--- .../Imagery/examples}/ImageryBaseUsage.tsx | 0 .../Imagery/examples}/ImageryUsage.tsx | 0 .../Imagery/examples}/index.tsx | 0 .../Introduction/content/Installation.tsx | 2 +- docs/containers/{ => Media}/Media.tsx | 20 +++---- .../Media/examples}/and.ts | 0 .../Media/examples}/index.ts | 0 .../Media/examples}/max.ts | 0 .../Media/examples}/min.ts | 0 .../Media/examples}/minMax.ts | 0 .../media => containers/Media/examples}/or.ts | 0 .../Media/examples}/single.ts | 0 .../{ => Typography}/Typography.tsx | 26 ++++---- .../examples}/createTypographyComponents.ts | 0 .../Typography/examples}/fluidSizing.ts | 0 .../Typography/examples}/fontWeight.ts | 0 docs/containers/Typography/examples/index.tsx | 6 ++ docs/containers/{ => Variants}/Variants.tsx | 18 +++--- .../Variants/examples}/addingVariants.ts | 0 .../examples}/generateWithVariants.ts | 0 .../Variants/examples}/index.ts | 0 docs/containers/index.tsx | 18 +++--- docs/pages/_app.tsx | 2 +- 89 files changed, 318 insertions(+), 234 deletions(-) delete mode 100644 docs/codeExamples/customisation/index.tsx delete mode 100644 docs/codeExamples/gettingStarted/basicUsage.ts rename docs/components/{ => Article}/ArticleSubSectionTitle.tsx (81%) rename docs/components/{ => Article}/BlockedSectionTitle.tsx (97%) create mode 100644 docs/components/Article/Content/Content.tsx create mode 100644 docs/components/Article/Content/index.tsx create mode 100644 docs/components/Article/Content/typings.ts create mode 100644 docs/components/Article/Doc/Doc.tsx create mode 100644 docs/components/Article/Doc/index.tsx create mode 100644 docs/components/Article/Doc/typings.ts create mode 100644 docs/components/Article/Title/Title.tsx create mode 100644 docs/components/Article/Title/index.tsx create mode 100644 docs/components/Article/Title/styles.tsx create mode 100644 docs/components/Article/Title/typings.ts create mode 100644 docs/components/Article/index.tsx create mode 100644 docs/components/Article/styles.tsx delete mode 100644 docs/components/ArticleContentBlock.tsx delete mode 100644 docs/components/ArticleDoc.tsx create mode 100644 docs/components/Code/Params.tsx rename docs/components/{ => Code}/ParamsDescription.tsx (100%) rename docs/components/{ => Code}/ParamsTable.tsx (79%) rename docs/components/{ => Code}/Syntax.tsx (100%) rename docs/components/{ => Global}/GlobalStyles.tsx (93%) rename docs/components/{ => Global}/HR.tsx (100%) rename docs/components/{ => Global}/HTMLhead.tsx (100%) rename docs/components/{ => Global}/Layout.tsx (100%) delete mode 100644 docs/components/Params.tsx rename docs/containers/{ => Block}/Block.tsx (81%) rename docs/{codeExamples/block => containers/Block/examples}/BlockBase.tsx (100%) rename docs/{codeExamples/block => containers/Block/examples}/createBlockComponents.ts (100%) rename docs/{codeExamples/block => containers/Block/examples}/index.tsx (100%) rename docs/containers/{ => Customisation}/Customisation.tsx (55%) create mode 100644 docs/containers/Customisation/examples/index.tsx rename docs/{codeExamples/customisation => containers/Customisation/examples}/systemExtensionUsage.ts (100%) rename docs/containers/{ => Flex}/Flex.tsx (89%) rename docs/{codeExamples/flex => containers/Flex/examples}/FlexAlignmentDemo.tsx (100%) rename docs/{codeExamples/flex => containers/Flex/examples}/FlexColumnSizingDemo.tsx (100%) rename docs/{codeExamples/flex => containers/Flex/examples}/FlexOffsetDemo.tsx (100%) rename docs/{codeExamples/flex => containers/Flex/examples}/FlexTotalColumnsDemo.tsx (100%) rename docs/{codeExamples/flex => containers/Flex/examples}/flexAlignmentUsage.ts (100%) rename docs/{codeExamples/flex => containers/Flex/examples}/flexColumnSizingUsage.ts (100%) rename docs/{codeExamples/flex => containers/Flex/examples}/flexOffsetUsage.ts (100%) rename docs/{codeExamples/flex => containers/Flex/examples}/flexTotalColumnsUsage.ts (100%) rename docs/{codeExamples/flex => containers/Flex/examples}/index.tsx (100%) rename docs/containers/{ => Generator}/Generator.tsx (61%) rename docs/{codeExamples/generator => containers/Generator/examples}/createBaseComponentsUsage.ts (100%) rename docs/{codeExamples/generator => containers/Generator/examples}/createStyledComponentUsage.ts (100%) rename docs/{codeExamples/generator => containers/Generator/examples}/index.tsx (100%) rename docs/containers/GettingStarted/{codeExamples => examples}/build.ts (100%) rename docs/containers/GettingStarted/{codeExamples => examples}/index.ts (100%) rename docs/containers/GettingStarted/{codeExamples => examples}/installation.ts (100%) rename docs/containers/GettingStarted/{codeExamples => examples}/setup.ts (100%) rename docs/containers/GettingStarted/{codeExamples => examples}/theming.ts (100%) rename docs/containers/GettingStarted/{codeExamples => examples}/variants.ts (100%) rename docs/containers/{ => Grid}/Grid.tsx (85%) rename docs/{codeExamples/grid => containers/Grid/examples}/GridDemo.tsx (100%) rename docs/{codeExamples/grid => containers/Grid/examples}/grid.ts (100%) create mode 100644 docs/containers/Grid/examples/index.tsx rename docs/containers/{ => Imagery}/Imagery.tsx (69%) rename docs/{codeExamples/imagery => containers/Imagery/examples}/ImageryBaseUsage.tsx (100%) rename docs/{codeExamples/imagery => containers/Imagery/examples}/ImageryUsage.tsx (100%) rename docs/{codeExamples/imagery => containers/Imagery/examples}/index.tsx (100%) rename docs/containers/{ => Media}/Media.tsx (92%) rename docs/{codeExamples/media => containers/Media/examples}/and.ts (100%) rename docs/{codeExamples/media => containers/Media/examples}/index.ts (100%) rename docs/{codeExamples/media => containers/Media/examples}/max.ts (100%) rename docs/{codeExamples/media => containers/Media/examples}/min.ts (100%) rename docs/{codeExamples/media => containers/Media/examples}/minMax.ts (100%) rename docs/{codeExamples/media => containers/Media/examples}/or.ts (100%) rename docs/{codeExamples/media => containers/Media/examples}/single.ts (100%) rename docs/containers/{ => Typography}/Typography.tsx (80%) rename docs/{codeExamples/typography => containers/Typography/examples}/createTypographyComponents.ts (100%) rename docs/{codeExamples/typography => containers/Typography/examples}/fluidSizing.ts (100%) rename docs/{codeExamples/typography => containers/Typography/examples}/fontWeight.ts (100%) create mode 100644 docs/containers/Typography/examples/index.tsx rename docs/containers/{ => Variants}/Variants.tsx (79%) rename docs/{codeExamples/variants => containers/Variants/examples}/addingVariants.ts (100%) rename docs/{codeExamples/variants => containers/Variants/examples}/generateWithVariants.ts (100%) rename docs/{codeExamples/variants => containers/Variants/examples}/index.ts (100%) diff --git a/docs/codeExamples/customisation/index.tsx b/docs/codeExamples/customisation/index.tsx deleted file mode 100644 index 627d91c..0000000 --- a/docs/codeExamples/customisation/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { systemExtensionUsage } from '../customisation/systemExtensionUsage'; diff --git a/docs/codeExamples/gettingStarted/basicUsage.ts b/docs/codeExamples/gettingStarted/basicUsage.ts deleted file mode 100644 index d6101f4..0000000 --- a/docs/codeExamples/gettingStarted/basicUsage.ts +++ /dev/null @@ -1,19 +0,0 @@ -export const basicUsage = ` - import React from 'react'; - import { BlockBase, Image } from 'artifak'; - - export function Card({ - img, - alt, - title, - description - }) { - return ( - - {alt}{title} -

{content}

- - ) - } -` \ No newline at end of file diff --git a/docs/components/APIheading.tsx b/docs/components/APIheading.tsx index 945416c..837e69c 100644 --- a/docs/components/APIheading.tsx +++ b/docs/components/APIheading.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { H3 } from './Typography'; -import { Params } from './Params'; +import { Params } from './Code/Params'; import { theme } from '../theme'; type Props = { @@ -17,11 +17,7 @@ export function APIheading({ name, params }: Props) { {name} - {hasParams && ( - - )} + {hasParams && } ); } diff --git a/docs/components/ArticleSubSectionTitle.tsx b/docs/components/Article/ArticleSubSectionTitle.tsx similarity index 81% rename from docs/components/ArticleSubSectionTitle.tsx rename to docs/components/Article/ArticleSubSectionTitle.tsx index feaccc6..65b9ff1 100644 --- a/docs/components/ArticleSubSectionTitle.tsx +++ b/docs/components/Article/ArticleSubSectionTitle.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import { H2 } from './Typography'; +import { H2 } from '../Typography'; export const ArticleSubSectionTitle = styled(H2)` ${({ theme }) => ` diff --git a/docs/components/BlockedSectionTitle.tsx b/docs/components/Article/BlockedSectionTitle.tsx similarity index 97% rename from docs/components/BlockedSectionTitle.tsx rename to docs/components/Article/BlockedSectionTitle.tsx index c941560..c5f3347 100644 --- a/docs/components/BlockedSectionTitle.tsx +++ b/docs/components/Article/BlockedSectionTitle.tsx @@ -1,6 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import { H1 } from './Typography'; +import { H1 } from '../Typography'; export function ArticleTitle({ title }) { return ( diff --git a/docs/components/Article/Content/Content.tsx b/docs/components/Article/Content/Content.tsx new file mode 100644 index 0000000..2a24a9c --- /dev/null +++ b/docs/components/Article/Content/Content.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { H3 } from '../../Typography'; +import { ContentProps } from './typings'; + +export function Content({ sectionTitle, content }: ContentProps) { + return ( +
+

{sectionTitle}

+ {content} +
+ ); +} diff --git a/docs/components/Article/Content/index.tsx b/docs/components/Article/Content/index.tsx new file mode 100644 index 0000000..510d7e6 --- /dev/null +++ b/docs/components/Article/Content/index.tsx @@ -0,0 +1,2 @@ +export { Content } from './Content'; +export type { ContentProps } from './typings'; diff --git a/docs/components/Article/Content/typings.ts b/docs/components/Article/Content/typings.ts new file mode 100644 index 0000000..748d9df --- /dev/null +++ b/docs/components/Article/Content/typings.ts @@ -0,0 +1,4 @@ +export type ContentProps = { + sectionTitle: string; + content: React.ReactNodeArray; +}; diff --git a/docs/components/Article/Doc/Doc.tsx b/docs/components/Article/Doc/Doc.tsx new file mode 100644 index 0000000..13d44f6 --- /dev/null +++ b/docs/components/Article/Doc/Doc.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { ArticleTitle } from '../BlockedSectionTitle'; +import { DocProps } from './typings'; + +export function Doc({ title, children }: DocProps) { + return ( +
+ + {children} +
+ ); +} diff --git a/docs/components/Article/Doc/index.tsx b/docs/components/Article/Doc/index.tsx new file mode 100644 index 0000000..c417699 --- /dev/null +++ b/docs/components/Article/Doc/index.tsx @@ -0,0 +1,2 @@ +export { Doc } from './Doc'; +export type { DocProps } from './typings'; \ No newline at end of file diff --git a/docs/components/Article/Doc/typings.ts b/docs/components/Article/Doc/typings.ts new file mode 100644 index 0000000..b243751 --- /dev/null +++ b/docs/components/Article/Doc/typings.ts @@ -0,0 +1,4 @@ +export type DocProps = { + title: string; + children: React.ReactChild; +}; diff --git a/docs/components/Article/Title/Title.tsx b/docs/components/Article/Title/Title.tsx new file mode 100644 index 0000000..d648794 --- /dev/null +++ b/docs/components/Article/Title/Title.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { + BlockedSectionTitleContainer, + BlockedSectionTitleText +} from './styles'; +import { TitleProps } from './typings'; + +export function Title({ title }: TitleProps) { + return ( + + {title} + + ); +} diff --git a/docs/components/Article/Title/index.tsx b/docs/components/Article/Title/index.tsx new file mode 100644 index 0000000..3c62d84 --- /dev/null +++ b/docs/components/Article/Title/index.tsx @@ -0,0 +1,2 @@ +export { Title } from './Title'; +export type { TitleProps } from './typings'; \ No newline at end of file diff --git a/docs/components/Article/Title/styles.tsx b/docs/components/Article/Title/styles.tsx new file mode 100644 index 0000000..744c91f --- /dev/null +++ b/docs/components/Article/Title/styles.tsx @@ -0,0 +1,41 @@ +import styled from 'styled-components'; +import { H1, H2 } from '../../Typography'; + +export const BlockedSectionTitleContainer = styled.div` + ${({ theme }) => ` + display: flex; + align-items: center; + text-align: center; + margin-bottom: 1.5em; + + &::after { + flex: 1; + background: ${theme.colors.primary}; + height: 1px; + margin-bottom: 1em; + } + + &::after { + margin-left: 1em; + } + + @media(min-width: ${theme.breakpoints[1]}) { + &::after { + content: ''; + } + } + `} +`; + +export const BlockedSectionTitleText = styled(H1)` + ${({ theme }) => ` + background: ${theme.colors.primary}; + color: ${theme.colors.white}; + padding: 0.1em 0.25em; + width: 100%; + + @media(min-width: ${theme.breakpoints[1]}) { + width: auto; + } + `} +`; diff --git a/docs/components/Article/Title/typings.ts b/docs/components/Article/Title/typings.ts new file mode 100644 index 0000000..5228e2f --- /dev/null +++ b/docs/components/Article/Title/typings.ts @@ -0,0 +1,3 @@ +export type TitleProps = { + title: string; +}; diff --git a/docs/components/Article/index.tsx b/docs/components/Article/index.tsx new file mode 100644 index 0000000..0b90b17 --- /dev/null +++ b/docs/components/Article/index.tsx @@ -0,0 +1,8 @@ +export { Content } from './Content'; +export { Doc } from './Doc'; +export { Title } from './Title'; +export { ArticleSubSectionTitle } from './styles'; + +export type { ContentProps } from './Content'; +export type { DocProps } from './Doc'; +export type { TitleProps } from './Title'; diff --git a/docs/components/Article/styles.tsx b/docs/components/Article/styles.tsx new file mode 100644 index 0000000..65b9ff1 --- /dev/null +++ b/docs/components/Article/styles.tsx @@ -0,0 +1,8 @@ +import styled from 'styled-components'; +import { H2 } from '../Typography'; + +export const ArticleSubSectionTitle = styled(H2)` + ${({ theme }) => ` + color: ${theme.colors.primary}; + `} +`; diff --git a/docs/components/ArticleContentBlock.tsx b/docs/components/ArticleContentBlock.tsx deleted file mode 100644 index cc900b9..0000000 --- a/docs/components/ArticleContentBlock.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { H3 } from '../components/Typography'; - -type Props = { - sectionTitle: string; - content: React.ReactNodeArray; -}; - -export function ArticleContentBlock({ sectionTitle, content }: Props) { - return ( -
-

{sectionTitle}

- {content} -
- ); -} diff --git a/docs/components/ArticleDoc.tsx b/docs/components/ArticleDoc.tsx deleted file mode 100644 index 529ef83..0000000 --- a/docs/components/ArticleDoc.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { ArticleTitle } from '../components/BlockedSectionTitle'; - -type Props = { - title: string; - children: React.ReactChild; -}; - -export function ArticleDoc({ title, children }: Props) { - return ( -
- - {children} -
- ); -} diff --git a/docs/components/Code/Params.tsx b/docs/components/Code/Params.tsx new file mode 100644 index 0000000..8dc265a --- /dev/null +++ b/docs/components/Code/Params.tsx @@ -0,0 +1,24 @@ +import { Paragraph, Strong } from '../Typography'; + +export const Params = ({ params }: any) => { + const propertyKeys = Object.keys(params); + + return ( + <> + + ( + {propertyKeys.map((key, i) => { + const comma = i !== propertyKeys.length - 1 ? ', ' : ''; + + return ( + + {key} + {`: ${params[key]}${comma}`} + + ); + })} + ) + + + ); +}; diff --git a/docs/components/ParamsDescription.tsx b/docs/components/Code/ParamsDescription.tsx similarity index 100% rename from docs/components/ParamsDescription.tsx rename to docs/components/Code/ParamsDescription.tsx diff --git a/docs/components/ParamsTable.tsx b/docs/components/Code/ParamsTable.tsx similarity index 79% rename from docs/components/ParamsTable.tsx rename to docs/components/Code/ParamsTable.tsx index 9a4d0f6..83b7450 100644 --- a/docs/components/ParamsTable.tsx +++ b/docs/components/Code/ParamsTable.tsx @@ -1,6 +1,12 @@ import React from 'react'; import { FlexRow, FlexCol } from 'artifak'; -import { H4, Paragraph, Strong, SmallParagraph, SmallLead } from '../components/Typography'; +import { + H4, + Paragraph, + Strong, + SmallParagraph, + SmallLead +} from '../Typography'; import { paddingBottom } from 'styled-system'; export function ParamsTable({ APIname, APItypes, cells }) { @@ -12,8 +18,16 @@ export function ParamsTable({ APIname, APItypes, cells }) { border: '1px solid black' }} > -

{APIname}  

- {APItypes} +

+ {APIname}   +

+ + {APItypes} +
@@ -32,16 +46,14 @@ export function ParamsTable({ APIname, APItypes, cells }) { - {cells.map((cell) => { + {cells.map(cell => { const { name, type, defaultValue, content } = cell; return ( - - {name} - + {name} @@ -57,8 +69,8 @@ export function ParamsTable({ APIname, APItypes, cells }) { {content} - ) + ); })} - ) -} \ No newline at end of file + ); +} diff --git a/docs/components/Syntax.tsx b/docs/components/Code/Syntax.tsx similarity index 100% rename from docs/components/Syntax.tsx rename to docs/components/Code/Syntax.tsx diff --git a/docs/components/GlobalStyles.tsx b/docs/components/Global/GlobalStyles.tsx similarity index 93% rename from docs/components/GlobalStyles.tsx rename to docs/components/Global/GlobalStyles.tsx index 8ec9297..215bacf 100644 --- a/docs/components/GlobalStyles.tsx +++ b/docs/components/Global/GlobalStyles.tsx @@ -1,6 +1,6 @@ import { createGlobalStyle } from 'styled-components'; import styledNormalize from 'styled-normalize'; -import { theme } from '../theme'; +import { theme } from '../../theme'; export const GlobalStyles = createGlobalStyle` ${styledNormalize} diff --git a/docs/components/HR.tsx b/docs/components/Global/HR.tsx similarity index 100% rename from docs/components/HR.tsx rename to docs/components/Global/HR.tsx diff --git a/docs/components/HTMLhead.tsx b/docs/components/Global/HTMLhead.tsx similarity index 100% rename from docs/components/HTMLhead.tsx rename to docs/components/Global/HTMLhead.tsx diff --git a/docs/components/Layout.tsx b/docs/components/Global/Layout.tsx similarity index 100% rename from docs/components/Layout.tsx rename to docs/components/Global/Layout.tsx diff --git a/docs/components/Params.tsx b/docs/components/Params.tsx deleted file mode 100644 index 217c3f8..0000000 --- a/docs/components/Params.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { Paragraph, Strong } from '../components/Typography'; - -export const Params = ({ params }: any) => { - const propertyKeys = Object.keys(params); - - return ( - <> - - ( - { - propertyKeys.map((key, i) => { - const comma = i !== propertyKeys.length - 1 ? ', ' : ''; - - return ( - - {key} - {`: ${params[key]}${comma}`} - - ); - }) - } - ) - - - ); -}; diff --git a/docs/containers/Block.tsx b/docs/containers/Block/Block.tsx similarity index 81% rename from docs/containers/Block.tsx rename to docs/containers/Block/Block.tsx index 70b895d..ced32ab 100644 --- a/docs/containers/Block.tsx +++ b/docs/containers/Block/Block.tsx @@ -1,21 +1,19 @@ -import { Paragraph, Strong } from '../components/Typography'; -import { Syntax } from '../components/Syntax'; -import { HR } from '../components/HR'; - +import { Paragraph, Strong } from '../../components/Typography'; +import { Syntax } from '../../components/Code/Syntax'; +import { HR } from '../../components/Global/HR'; import { BlockBaseUsage, createBlockComponentsExampleUsage, createBlockComponentsDemo -} from '../codeExamples/block'; - -import { ArticleDoc } from '../components/ArticleDoc'; -import { APIheading } from '../components/APIheading'; +} from './examples'; +import { Doc } from '../../components/Article'; +import { APIheading } from '../../components/APIheading'; export function Block() { return ( - + - + ); } diff --git a/docs/codeExamples/block/BlockBase.tsx b/docs/containers/Block/examples/BlockBase.tsx similarity index 100% rename from docs/codeExamples/block/BlockBase.tsx rename to docs/containers/Block/examples/BlockBase.tsx diff --git a/docs/codeExamples/block/createBlockComponents.ts b/docs/containers/Block/examples/createBlockComponents.ts similarity index 100% rename from docs/codeExamples/block/createBlockComponents.ts rename to docs/containers/Block/examples/createBlockComponents.ts diff --git a/docs/codeExamples/block/index.tsx b/docs/containers/Block/examples/index.tsx similarity index 100% rename from docs/codeExamples/block/index.tsx rename to docs/containers/Block/examples/index.tsx diff --git a/docs/containers/Customisation.tsx b/docs/containers/Customisation/Customisation.tsx similarity index 55% rename from docs/containers/Customisation.tsx rename to docs/containers/Customisation/Customisation.tsx index 39b0ca1..653df71 100644 --- a/docs/containers/Customisation.tsx +++ b/docs/containers/Customisation/Customisation.tsx @@ -1,17 +1,14 @@ -import { Paragraph, Strong } from '../components/Typography'; -import { Syntax } from '../components/Syntax'; - -import { systemExtensionUsage } from '../codeExamples/customisation'; - -import { HR } from '../components/HR'; -import { ArticleDoc } from '../components/ArticleDoc'; -import { ArticleSubSectionTitle } from '../components/ArticleSubSectionTitle'; +import { Paragraph, Strong } from '../../components/Typography'; +import { Syntax } from '../../components/Code/Syntax'; +import { systemExtensionUsage } from './examples'; +import { Doc } from '../../components/Article'; +import { ArticleSubSectionTitle } from '../../components/Article/ArticleSubSectionTitle'; export function Customisation() { return ( - + - + ); } diff --git a/docs/containers/Customisation/examples/index.tsx b/docs/containers/Customisation/examples/index.tsx new file mode 100644 index 0000000..79dec9a --- /dev/null +++ b/docs/containers/Customisation/examples/index.tsx @@ -0,0 +1 @@ +export { systemExtensionUsage } from './systemExtensionUsage'; diff --git a/docs/codeExamples/customisation/systemExtensionUsage.ts b/docs/containers/Customisation/examples/systemExtensionUsage.ts similarity index 100% rename from docs/codeExamples/customisation/systemExtensionUsage.ts rename to docs/containers/Customisation/examples/systemExtensionUsage.ts diff --git a/docs/containers/Flex.tsx b/docs/containers/Flex/Flex.tsx similarity index 89% rename from docs/containers/Flex.tsx rename to docs/containers/Flex/Flex.tsx index da83136..bc5cd04 100644 --- a/docs/containers/Flex.tsx +++ b/docs/containers/Flex/Flex.tsx @@ -1,5 +1,5 @@ -import { Paragraph, Strong } from '../components/Typography'; -import { Syntax } from '../components/Syntax'; +import { Paragraph, Strong } from '../../components/Typography'; +import { Syntax } from '../../components/Code/Syntax'; import { FlexColumnSizingDemo, @@ -12,20 +12,20 @@ import { flexAlignmentUsage, CustomColDemo, customColUsage -} from '../codeExamples/flex'; +} from './examples'; -import { HR } from '../components/HR'; +import { HR } from '../../components/Global/HR'; -import { ArticleDoc } from '../components/ArticleDoc'; -import { APIheading } from '../components/APIheading'; -import { FlexTable } from '../components/FlexTable'; -import { ArticleSubSectionTitle } from '../components/ArticleSubSectionTitle'; +import { Doc } from '../../components/Article'; +import { APIheading } from '../../components/APIheading'; +import { FlexTable } from '../../components/FlexTable'; +import { ArticleSubSectionTitle } from '../../components/Article/ArticleSubSectionTitle'; export function Flex() { return ( - + - + ); } diff --git a/docs/codeExamples/flex/FlexAlignmentDemo.tsx b/docs/containers/Flex/examples/FlexAlignmentDemo.tsx similarity index 100% rename from docs/codeExamples/flex/FlexAlignmentDemo.tsx rename to docs/containers/Flex/examples/FlexAlignmentDemo.tsx diff --git a/docs/codeExamples/flex/FlexColumnSizingDemo.tsx b/docs/containers/Flex/examples/FlexColumnSizingDemo.tsx similarity index 100% rename from docs/codeExamples/flex/FlexColumnSizingDemo.tsx rename to docs/containers/Flex/examples/FlexColumnSizingDemo.tsx diff --git a/docs/codeExamples/flex/FlexOffsetDemo.tsx b/docs/containers/Flex/examples/FlexOffsetDemo.tsx similarity index 100% rename from docs/codeExamples/flex/FlexOffsetDemo.tsx rename to docs/containers/Flex/examples/FlexOffsetDemo.tsx diff --git a/docs/codeExamples/flex/FlexTotalColumnsDemo.tsx b/docs/containers/Flex/examples/FlexTotalColumnsDemo.tsx similarity index 100% rename from docs/codeExamples/flex/FlexTotalColumnsDemo.tsx rename to docs/containers/Flex/examples/FlexTotalColumnsDemo.tsx diff --git a/docs/codeExamples/flex/flexAlignmentUsage.ts b/docs/containers/Flex/examples/flexAlignmentUsage.ts similarity index 100% rename from docs/codeExamples/flex/flexAlignmentUsage.ts rename to docs/containers/Flex/examples/flexAlignmentUsage.ts diff --git a/docs/codeExamples/flex/flexColumnSizingUsage.ts b/docs/containers/Flex/examples/flexColumnSizingUsage.ts similarity index 100% rename from docs/codeExamples/flex/flexColumnSizingUsage.ts rename to docs/containers/Flex/examples/flexColumnSizingUsage.ts diff --git a/docs/codeExamples/flex/flexOffsetUsage.ts b/docs/containers/Flex/examples/flexOffsetUsage.ts similarity index 100% rename from docs/codeExamples/flex/flexOffsetUsage.ts rename to docs/containers/Flex/examples/flexOffsetUsage.ts diff --git a/docs/codeExamples/flex/flexTotalColumnsUsage.ts b/docs/containers/Flex/examples/flexTotalColumnsUsage.ts similarity index 100% rename from docs/codeExamples/flex/flexTotalColumnsUsage.ts rename to docs/containers/Flex/examples/flexTotalColumnsUsage.ts diff --git a/docs/codeExamples/flex/index.tsx b/docs/containers/Flex/examples/index.tsx similarity index 100% rename from docs/codeExamples/flex/index.tsx rename to docs/containers/Flex/examples/index.tsx diff --git a/docs/containers/Generator.tsx b/docs/containers/Generator/Generator.tsx similarity index 61% rename from docs/containers/Generator.tsx rename to docs/containers/Generator/Generator.tsx index c1aae17..152a591 100644 --- a/docs/containers/Generator.tsx +++ b/docs/containers/Generator/Generator.tsx @@ -1,23 +1,19 @@ -import { H4, Paragraph, Strong, SmallParagraph, SmallLead } from '../components/Typography'; -import { Syntax } from '../components/Syntax'; -import { ParamsTable } from '../components/ParamsTable'; -import { FlexRow, FlexCol } from 'artifak'; - +import { Paragraph, Strong } from '../../components/Typography'; +import { Syntax } from '../../components/Code/Syntax'; +import { ParamsTable } from '../../components/Code/ParamsTable'; import { createStyledComponentUsage, createBaseComponentsUsage -} from '../codeExamples/generator'; - -import { HR } from '../components/HR'; -import { FlexTable } from '../components/FlexTable'; -import { ArticleDoc } from '../components/ArticleDoc'; -import { APIheading } from '../components/APIheading'; +} from './examples'; +import { HR } from '../../components/Global/HR'; +import { Doc } from '../../components/Article'; +import { APIheading } from '../../components/APIheading'; export function Generator() { return ( - + - + ); } @@ -50,7 +46,7 @@ const createStyledComponentCells = [ content: 'Dictate which HTML element you would like to use for this base component.' } -] +]; const createBaseComponentsCells = [ { @@ -65,7 +61,7 @@ const createBaseComponentsCells = [ defaultValue: 'N/A', content: 'Adds attributes to the component.' } -] +]; export function GeneratorContent() { return ( @@ -74,15 +70,19 @@ export function GeneratorContent() { The component-generator library or generator for short, comprises of 2 utility functions namely createStyledComponent and   - createBaseComponents. The purpose of the Generator is to help setup a base Styled Component loaded with Styled System properties to which is then used to generate components. Usage of the Generator is limited in a sense that it is meant to be used in lieu with simpler, less complex components or in other words, helping in creating primitive building blocks for your application. + createBaseComponents. The purpose of the Generator is + to help setup a base Styled Component loaded with Styled System + properties to which is then used to generate components. Usage of the + Generator is limited in a sense that it is meant to be used in lieu with + simpler, less complex components or in other words, helping in creating + primitive building blocks for your application. - As you might have guessed, these - are the core functions of the Artifak library. But for the purposes of - greater flexibility, these functions have been made available as not all - style properties are available right off the bat and you may need the - option to further extend the system. + As you might have guessed, these are the core functions of the Artifak + library. But for the purposes of greater flexibility, these functions + have been made available as not all style properties are available right + off the bat and you may need the option to further extend the system.
@@ -94,12 +94,17 @@ export function GeneratorContent() { }} /> - '} cells={createStyledComponentCells} /> + '} + cells={createStyledComponentCells} + /> The purpose of this utility function is to generate a base styled component which would then be used in createBaseComponents (or not if - you don't want to). You can load up on Styled System properties or default attributes here if you wish. + you don't want to). You can load up on Styled System properties or + default attributes here if you wish. {createStyledComponentUsage} @@ -110,11 +115,16 @@ export function GeneratorContent() { name="createBaseComponents" params={{ Base: 'AnyStyledComponent', - settings: '{ [key in keyof S]: Settings> | StyledSystemCSSObject }' + settings: + '{ [key in keyof S]: Settings> | StyledSystemCSSObject }' }} /> - > | StyledSystemCSSObject'} cells={createBaseComponentsCells} /> + > | StyledSystemCSSObject'} + cells={createBaseComponentsCells} + /> createBaseComponents, as implied, would generate a bunch of styled diff --git a/docs/codeExamples/generator/createBaseComponentsUsage.ts b/docs/containers/Generator/examples/createBaseComponentsUsage.ts similarity index 100% rename from docs/codeExamples/generator/createBaseComponentsUsage.ts rename to docs/containers/Generator/examples/createBaseComponentsUsage.ts diff --git a/docs/codeExamples/generator/createStyledComponentUsage.ts b/docs/containers/Generator/examples/createStyledComponentUsage.ts similarity index 100% rename from docs/codeExamples/generator/createStyledComponentUsage.ts rename to docs/containers/Generator/examples/createStyledComponentUsage.ts diff --git a/docs/codeExamples/generator/index.tsx b/docs/containers/Generator/examples/index.tsx similarity index 100% rename from docs/codeExamples/generator/index.tsx rename to docs/containers/Generator/examples/index.tsx diff --git a/docs/containers/GettingStarted/GettingStarted.tsx b/docs/containers/GettingStarted/GettingStarted.tsx index 26f203e..4f427dd 100644 --- a/docs/containers/GettingStarted/GettingStarted.tsx +++ b/docs/containers/GettingStarted/GettingStarted.tsx @@ -1,12 +1,12 @@ -import { ArticleDoc } from '../../components/ArticleDoc'; -import { HR } from '../../components/HR'; +import { Doc } from '../../components/Article'; +import { HR } from '../../components/Global/HR'; import { Building, Variants, Setup, Installation, Theming } from './content'; export function GettingStarted() { return ( - + - + ); } diff --git a/docs/containers/GettingStarted/content/Building.tsx b/docs/containers/GettingStarted/content/Building.tsx index f5b7f27..065e96f 100644 --- a/docs/containers/GettingStarted/content/Building.tsx +++ b/docs/containers/GettingStarted/content/Building.tsx @@ -1,7 +1,7 @@ import { H3, Paragraph } from '../../../components/Typography'; -import { Syntax } from '../../../components/Syntax'; +import { Syntax } from '../../../components/Code/Syntax'; import { theme } from '../../../theme'; -import { buildExample } from '../codeExamples'; +import { buildExample } from '../examples'; export function Building() { return ( diff --git a/docs/containers/GettingStarted/content/Installation.tsx b/docs/containers/GettingStarted/content/Installation.tsx index 3aab66a..39e495d 100644 --- a/docs/containers/GettingStarted/content/Installation.tsx +++ b/docs/containers/GettingStarted/content/Installation.tsx @@ -1,7 +1,7 @@ import { H3, Paragraph } from '../../../components/Typography'; -import { Syntax } from '../../../components/Syntax'; +import { Syntax } from '../../../components/Code/Syntax'; import { theme } from '../../../theme'; -import { installationExample } from '../codeExamples'; +import { installationExample } from '../examples'; export function Installation() { return ( diff --git a/docs/containers/GettingStarted/content/Setup.tsx b/docs/containers/GettingStarted/content/Setup.tsx index 8bb6d93..495e85d 100644 --- a/docs/containers/GettingStarted/content/Setup.tsx +++ b/docs/containers/GettingStarted/content/Setup.tsx @@ -1,7 +1,7 @@ import { H3, Paragraph } from '../../../components/Typography'; -import { Syntax } from '../../../components/Syntax'; +import { Syntax } from '../../../components/Code/Syntax'; import { theme } from '../../../theme'; -import { setupExample } from '../codeExamples'; +import { setupExample } from '../examples'; export function Setup() { return ( diff --git a/docs/containers/GettingStarted/content/Theming.tsx b/docs/containers/GettingStarted/content/Theming.tsx index 059bcf3..22f1f2d 100644 --- a/docs/containers/GettingStarted/content/Theming.tsx +++ b/docs/containers/GettingStarted/content/Theming.tsx @@ -1,7 +1,7 @@ import { H3, Paragraph } from '../../../components/Typography'; -import { Syntax } from '../../../components/Syntax'; +import { Syntax } from '../../../components/Code/Syntax'; import { theme } from '../../../theme'; -import { themingExample } from '../codeExamples'; +import { themingExample } from '../examples'; export function Theming() { return ( diff --git a/docs/containers/GettingStarted/content/Variants.tsx b/docs/containers/GettingStarted/content/Variants.tsx index fcd1bfc..5afccb6 100644 --- a/docs/containers/GettingStarted/content/Variants.tsx +++ b/docs/containers/GettingStarted/content/Variants.tsx @@ -1,7 +1,7 @@ import { H3, Paragraph } from '../../../components/Typography'; -import { Syntax } from '../../../components/Syntax'; +import { Syntax } from '../../../components/Code/Syntax'; import { theme } from '../../../theme'; -import { variantsExample } from '../codeExamples'; +import { variantsExample } from '../examples'; export function Variants() { return ( diff --git a/docs/containers/GettingStarted/codeExamples/build.ts b/docs/containers/GettingStarted/examples/build.ts similarity index 100% rename from docs/containers/GettingStarted/codeExamples/build.ts rename to docs/containers/GettingStarted/examples/build.ts diff --git a/docs/containers/GettingStarted/codeExamples/index.ts b/docs/containers/GettingStarted/examples/index.ts similarity index 100% rename from docs/containers/GettingStarted/codeExamples/index.ts rename to docs/containers/GettingStarted/examples/index.ts diff --git a/docs/containers/GettingStarted/codeExamples/installation.ts b/docs/containers/GettingStarted/examples/installation.ts similarity index 100% rename from docs/containers/GettingStarted/codeExamples/installation.ts rename to docs/containers/GettingStarted/examples/installation.ts diff --git a/docs/containers/GettingStarted/codeExamples/setup.ts b/docs/containers/GettingStarted/examples/setup.ts similarity index 100% rename from docs/containers/GettingStarted/codeExamples/setup.ts rename to docs/containers/GettingStarted/examples/setup.ts diff --git a/docs/containers/GettingStarted/codeExamples/theming.ts b/docs/containers/GettingStarted/examples/theming.ts similarity index 100% rename from docs/containers/GettingStarted/codeExamples/theming.ts rename to docs/containers/GettingStarted/examples/theming.ts diff --git a/docs/containers/GettingStarted/codeExamples/variants.ts b/docs/containers/GettingStarted/examples/variants.ts similarity index 100% rename from docs/containers/GettingStarted/codeExamples/variants.ts rename to docs/containers/GettingStarted/examples/variants.ts diff --git a/docs/containers/Grid.tsx b/docs/containers/Grid/Grid.tsx similarity index 85% rename from docs/containers/Grid.tsx rename to docs/containers/Grid/Grid.tsx index bf28b47..5a07309 100644 --- a/docs/containers/Grid.tsx +++ b/docs/containers/Grid/Grid.tsx @@ -1,31 +1,26 @@ -import { Paragraph, Strong } from '../components/Typography'; -import { Syntax } from '../components/Syntax'; - +import { Paragraph, Strong } from '../../components/Typography'; +import { Syntax } from '../../components/Code/Syntax'; import { columnWidthExample, columnWidthMqExample, columnLengthExample, - columnLengthMqExample -} from '../codeExamples/grid/grid'; - -import { + columnLengthMqExample, ColumnWidthDemo, ColumnWidthMqDemo, ColumnLengthDemo, ColumnLengthMqDemo -} from '../codeExamples/grid/GridDemo'; - -import { HR } from '../components/HR'; -import { FlexTable } from '../components/FlexTable'; -import { ArticleDoc } from '../components/ArticleDoc'; -import { APIheading } from '../components/APIheading'; -import { ArticleSubSectionTitle } from '../components/ArticleSubSectionTitle'; +} from './examples'; +import { HR } from '../../components/Global/HR'; +import { FlexTable } from '../../components/FlexTable'; +import { Doc } from '../../components/Article'; +import { APIheading } from '../../components/APIheading'; +import { ArticleSubSectionTitle } from '../../components/Article/ArticleSubSectionTitle'; export function Grid() { return ( - + - + ); } diff --git a/docs/codeExamples/grid/GridDemo.tsx b/docs/containers/Grid/examples/GridDemo.tsx similarity index 100% rename from docs/codeExamples/grid/GridDemo.tsx rename to docs/containers/Grid/examples/GridDemo.tsx diff --git a/docs/codeExamples/grid/grid.ts b/docs/containers/Grid/examples/grid.ts similarity index 100% rename from docs/codeExamples/grid/grid.ts rename to docs/containers/Grid/examples/grid.ts diff --git a/docs/containers/Grid/examples/index.tsx b/docs/containers/Grid/examples/index.tsx new file mode 100644 index 0000000..bb0df30 --- /dev/null +++ b/docs/containers/Grid/examples/index.tsx @@ -0,0 +1,13 @@ +export { + columnWidthExample, + columnWidthMqExample, + columnLengthExample, + columnLengthMqExample +} from './grid'; + +export { + ColumnWidthDemo, + ColumnWidthMqDemo, + ColumnLengthDemo, + ColumnLengthMqDemo +} from './GridDemo'; diff --git a/docs/containers/Imagery.tsx b/docs/containers/Imagery/Imagery.tsx similarity index 69% rename from docs/containers/Imagery.tsx rename to docs/containers/Imagery/Imagery.tsx index 6ff7bab..57206ff 100644 --- a/docs/containers/Imagery.tsx +++ b/docs/containers/Imagery/Imagery.tsx @@ -1,15 +1,15 @@ -import { Paragraph, Strong } from '../components/Typography'; -import { Syntax } from '../components/Syntax'; -import { ImageryUsage, ImageryBaseUsage } from '../codeExamples/imagery'; -import { HR } from '../components/HR'; -import { ArticleDoc } from '../components/ArticleDoc'; -import { APIheading } from '../components/APIheading'; +import { Paragraph, Strong } from '../../components/Typography'; +import { Syntax } from '../../components/Code/Syntax'; +import { ImageryUsage, ImageryBaseUsage } from './examples'; +import { HR } from '../../components/Global/HR'; +import { Doc } from '../../components/Article'; +import { APIheading } from '../../components/APIheading'; export function Imagery() { return ( - + - + ); } diff --git a/docs/codeExamples/imagery/ImageryBaseUsage.tsx b/docs/containers/Imagery/examples/ImageryBaseUsage.tsx similarity index 100% rename from docs/codeExamples/imagery/ImageryBaseUsage.tsx rename to docs/containers/Imagery/examples/ImageryBaseUsage.tsx diff --git a/docs/codeExamples/imagery/ImageryUsage.tsx b/docs/containers/Imagery/examples/ImageryUsage.tsx similarity index 100% rename from docs/codeExamples/imagery/ImageryUsage.tsx rename to docs/containers/Imagery/examples/ImageryUsage.tsx diff --git a/docs/codeExamples/imagery/index.tsx b/docs/containers/Imagery/examples/index.tsx similarity index 100% rename from docs/codeExamples/imagery/index.tsx rename to docs/containers/Imagery/examples/index.tsx diff --git a/docs/containers/Introduction/content/Installation.tsx b/docs/containers/Introduction/content/Installation.tsx index c667303..297a47a 100644 --- a/docs/containers/Introduction/content/Installation.tsx +++ b/docs/containers/Introduction/content/Installation.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from 'styled-components'; import { Paragraph } from '../../../components/Typography'; -import { Syntax } from '../../../components/Syntax'; +import { Syntax } from '../../../components/Code/Syntax'; export function Installation() { return ; diff --git a/docs/containers/Media.tsx b/docs/containers/Media/Media.tsx similarity index 92% rename from docs/containers/Media.tsx rename to docs/containers/Media/Media.tsx index b7c692e..8c6dd9a 100644 --- a/docs/containers/Media.tsx +++ b/docs/containers/Media/Media.tsx @@ -1,17 +1,17 @@ -import { Paragraph, Strong } from '../components/Typography'; -import { Syntax } from '../components/Syntax'; -import { min, max, minMax, and, or, single } from '../codeExamples/media'; -import { ArticleSubSectionTitle } from '../components/ArticleSubSectionTitle'; -import { HR } from '../components/HR'; -import { ArticleDoc } from '../components/ArticleDoc'; -import { APIheading } from '../components/APIheading'; -import { FlexTable } from '../components/FlexTable'; +import { Paragraph, Strong } from '../../components/Typography'; +import { Syntax } from '../../components/Code/Syntax'; +import { min, max, minMax, and, or, single } from './examples'; +import { ArticleSubSectionTitle } from '../../components/Article/ArticleSubSectionTitle'; +import { HR } from '../../components/Global/HR'; +import { Doc } from '../../components/Article'; +import { APIheading } from '../../components/APIheading'; +import { FlexTable } from '../../components/FlexTable'; export function Media() { return ( - + - + ); } diff --git a/docs/codeExamples/media/and.ts b/docs/containers/Media/examples/and.ts similarity index 100% rename from docs/codeExamples/media/and.ts rename to docs/containers/Media/examples/and.ts diff --git a/docs/codeExamples/media/index.ts b/docs/containers/Media/examples/index.ts similarity index 100% rename from docs/codeExamples/media/index.ts rename to docs/containers/Media/examples/index.ts diff --git a/docs/codeExamples/media/max.ts b/docs/containers/Media/examples/max.ts similarity index 100% rename from docs/codeExamples/media/max.ts rename to docs/containers/Media/examples/max.ts diff --git a/docs/codeExamples/media/min.ts b/docs/containers/Media/examples/min.ts similarity index 100% rename from docs/codeExamples/media/min.ts rename to docs/containers/Media/examples/min.ts diff --git a/docs/codeExamples/media/minMax.ts b/docs/containers/Media/examples/minMax.ts similarity index 100% rename from docs/codeExamples/media/minMax.ts rename to docs/containers/Media/examples/minMax.ts diff --git a/docs/codeExamples/media/or.ts b/docs/containers/Media/examples/or.ts similarity index 100% rename from docs/codeExamples/media/or.ts rename to docs/containers/Media/examples/or.ts diff --git a/docs/codeExamples/media/single.ts b/docs/containers/Media/examples/single.ts similarity index 100% rename from docs/codeExamples/media/single.ts rename to docs/containers/Media/examples/single.ts diff --git a/docs/containers/Typography.tsx b/docs/containers/Typography/Typography.tsx similarity index 80% rename from docs/containers/Typography.tsx rename to docs/containers/Typography/Typography.tsx index af91e74..70fa26b 100644 --- a/docs/containers/Typography.tsx +++ b/docs/containers/Typography/Typography.tsx @@ -1,23 +1,21 @@ -import { Paragraph } from '../components/Typography'; -import { Syntax } from '../components/Syntax'; -import { List } from '../components/List'; +import { Paragraph } from '../../components/Typography'; +import { Syntax } from '../../components/Code/Syntax'; +import { List } from '../../components/List'; import { createTypographComponentsExampleUsage, - createTypographyComponentsDemo -} from '../codeExamples/typography/createTypographyComponents'; - -import { fluidSizingExampleUsage } from '../codeExamples/typography/fluidSizing'; -import { fontWeightExampleUsage } from '../codeExamples/typography/fontWeight'; - -import { HR } from '../components/HR'; -import { ArticleDoc } from '../components/ArticleDoc'; -import { APIheading } from '../components/APIheading'; + createTypographyComponentsDemo, + fluidSizingExampleUsage, + fontWeightExampleUsage +} from './examples'; +import { HR } from '../../components/Global/HR'; +import { Doc } from '../../components/Article'; +import { APIheading } from '../../components/APIheading'; export function Typography() { return ( - + - + ); } diff --git a/docs/codeExamples/typography/createTypographyComponents.ts b/docs/containers/Typography/examples/createTypographyComponents.ts similarity index 100% rename from docs/codeExamples/typography/createTypographyComponents.ts rename to docs/containers/Typography/examples/createTypographyComponents.ts diff --git a/docs/codeExamples/typography/fluidSizing.ts b/docs/containers/Typography/examples/fluidSizing.ts similarity index 100% rename from docs/codeExamples/typography/fluidSizing.ts rename to docs/containers/Typography/examples/fluidSizing.ts diff --git a/docs/codeExamples/typography/fontWeight.ts b/docs/containers/Typography/examples/fontWeight.ts similarity index 100% rename from docs/codeExamples/typography/fontWeight.ts rename to docs/containers/Typography/examples/fontWeight.ts diff --git a/docs/containers/Typography/examples/index.tsx b/docs/containers/Typography/examples/index.tsx new file mode 100644 index 0000000..1b345fd --- /dev/null +++ b/docs/containers/Typography/examples/index.tsx @@ -0,0 +1,6 @@ +export { + createTypographComponentsExampleUsage, + createTypographyComponentsDemo +} from './createTypographyComponents'; +export { fluidSizingExampleUsage } from './fluidSizing'; +export { fontWeightExampleUsage } from './fontWeight'; diff --git a/docs/containers/Variants.tsx b/docs/containers/Variants/Variants.tsx similarity index 79% rename from docs/containers/Variants.tsx rename to docs/containers/Variants/Variants.tsx index 68d099b..d5482a1 100644 --- a/docs/containers/Variants.tsx +++ b/docs/containers/Variants/Variants.tsx @@ -1,20 +1,20 @@ -import { Paragraph } from '../components/Typography'; -import { Syntax } from '../components/Syntax'; +import { Paragraph } from '../../components/Typography'; +import { Syntax } from '../../components/Code/Syntax'; import { generateWithVariants, addingVariantsStyledSystem, addingVariantsStyledComponents -} from '../codeExamples/variants'; -import { ArticleDoc } from '../components/ArticleDoc'; -import { ArticleSubSectionTitle } from '../components/ArticleSubSectionTitle'; -import { APIheading } from '../components/APIheading'; -import { HR } from '../components/HR'; +} from './examples'; +import { Doc } from '../../components/Article'; +import { ArticleSubSectionTitle } from '../../components/Article/ArticleSubSectionTitle'; +import { APIheading } from '../../components/APIheading'; +import { HR } from '../../components/Global/HR'; export function Variants() { return ( - + - + ); } diff --git a/docs/codeExamples/variants/addingVariants.ts b/docs/containers/Variants/examples/addingVariants.ts similarity index 100% rename from docs/codeExamples/variants/addingVariants.ts rename to docs/containers/Variants/examples/addingVariants.ts diff --git a/docs/codeExamples/variants/generateWithVariants.ts b/docs/containers/Variants/examples/generateWithVariants.ts similarity index 100% rename from docs/codeExamples/variants/generateWithVariants.ts rename to docs/containers/Variants/examples/generateWithVariants.ts diff --git a/docs/codeExamples/variants/index.ts b/docs/containers/Variants/examples/index.ts similarity index 100% rename from docs/codeExamples/variants/index.ts rename to docs/containers/Variants/examples/index.ts diff --git a/docs/containers/index.tsx b/docs/containers/index.tsx index 64f3690..2173e32 100644 --- a/docs/containers/index.tsx +++ b/docs/containers/index.tsx @@ -1,13 +1,13 @@ import { Introduction } from './Introduction/Introduction'; -import { Block } from './Block'; -import { Grid } from './Grid'; -import { Typography } from './Typography'; -import { Flex } from './Flex'; -import { Generator } from './Generator'; -import { Imagery } from './Imagery'; -import { Media } from './Media'; -import { Variants } from './Variants'; -import { Customisation } from './Customisation'; +import { Block } from './Block/Block'; +import { Grid } from './Grid/Grid'; +import { Typography } from './Typography/Typography'; +import { Flex } from './Flex/Flex'; +import { Generator } from './Generator/Generator'; +import { Imagery } from './Imagery/Imagery'; +import { Media } from './Media/Media'; +import { Variants } from './Variants/Variants'; +import { Customisation } from './Customisation/Customisation'; import { GettingStarted } from './GettingStarted/GettingStarted'; export const content = { diff --git a/docs/pages/_app.tsx b/docs/pages/_app.tsx index da0cf28..9a560da 100644 --- a/docs/pages/_app.tsx +++ b/docs/pages/_app.tsx @@ -1,5 +1,5 @@ import { ThemeProvider } from 'styled-components'; -import { GlobalStyles } from '../components/GlobalStyles'; +import { GlobalStyles } from '../components/Global/GlobalStyles'; import { theme } from '../theme'; export default function App({ Component, pageProps }) { From 6ca8732193a8765f2185fcec4d30a0fc76098c7c Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Wed, 9 Dec 2020 14:21:05 +1100 Subject: [PATCH 05/16] fix paths, move Header, Dropdown and Footer to Global --- docs/components/{ => Global}/Container.tsx | 2 +- docs/components/{ => Global}/Dropdown/Dropdown.tsx | 0 .../{ => Global}/Dropdown/components/DropdownHead.tsx | 0 .../{ => Global}/Dropdown/components/DropdownText.tsx | 0 .../{ => Global}/Dropdown/components/Options.tsx | 0 .../{ => Global}/Dropdown/components/OptionsList.tsx | 0 .../{ => Global}/Dropdown/components/index.tsx | 0 docs/components/{ => Global}/Dropdown/typings.ts | 0 docs/components/{ => Global}/Footer.tsx | 2 +- docs/components/{ => Global}/Header/Brand.tsx | 5 ++--- docs/components/Global/Header/Tagline.tsx | 10 ++++++++++ docs/components/{ => Global}/Header/index.tsx | 0 docs/components/Header/Tagline.tsx | 6 ------ docs/pages/index.tsx | 2 +- 14 files changed, 15 insertions(+), 12 deletions(-) rename docs/components/{ => Global}/Container.tsx (85%) rename docs/components/{ => Global}/Dropdown/Dropdown.tsx (100%) rename docs/components/{ => Global}/Dropdown/components/DropdownHead.tsx (100%) rename docs/components/{ => Global}/Dropdown/components/DropdownText.tsx (100%) rename docs/components/{ => Global}/Dropdown/components/Options.tsx (100%) rename docs/components/{ => Global}/Dropdown/components/OptionsList.tsx (100%) rename docs/components/{ => Global}/Dropdown/components/index.tsx (100%) rename docs/components/{ => Global}/Dropdown/typings.ts (100%) rename docs/components/{ => Global}/Footer.tsx (92%) rename docs/components/{ => Global}/Header/Brand.tsx (95%) create mode 100644 docs/components/Global/Header/Tagline.tsx rename docs/components/{ => Global}/Header/index.tsx (100%) delete mode 100644 docs/components/Header/Tagline.tsx diff --git a/docs/components/Container.tsx b/docs/components/Global/Container.tsx similarity index 85% rename from docs/components/Container.tsx rename to docs/components/Global/Container.tsx index 2ad31b9..7b613e5 100644 --- a/docs/components/Container.tsx +++ b/docs/components/Global/Container.tsx @@ -1,4 +1,4 @@ -import { theme } from '../theme'; +import { theme } from '../../theme'; import { createBlockComponents } from 'artifak'; const styles = { diff --git a/docs/components/Dropdown/Dropdown.tsx b/docs/components/Global/Dropdown/Dropdown.tsx similarity index 100% rename from docs/components/Dropdown/Dropdown.tsx rename to docs/components/Global/Dropdown/Dropdown.tsx diff --git a/docs/components/Dropdown/components/DropdownHead.tsx b/docs/components/Global/Dropdown/components/DropdownHead.tsx similarity index 100% rename from docs/components/Dropdown/components/DropdownHead.tsx rename to docs/components/Global/Dropdown/components/DropdownHead.tsx diff --git a/docs/components/Dropdown/components/DropdownText.tsx b/docs/components/Global/Dropdown/components/DropdownText.tsx similarity index 100% rename from docs/components/Dropdown/components/DropdownText.tsx rename to docs/components/Global/Dropdown/components/DropdownText.tsx diff --git a/docs/components/Dropdown/components/Options.tsx b/docs/components/Global/Dropdown/components/Options.tsx similarity index 100% rename from docs/components/Dropdown/components/Options.tsx rename to docs/components/Global/Dropdown/components/Options.tsx diff --git a/docs/components/Dropdown/components/OptionsList.tsx b/docs/components/Global/Dropdown/components/OptionsList.tsx similarity index 100% rename from docs/components/Dropdown/components/OptionsList.tsx rename to docs/components/Global/Dropdown/components/OptionsList.tsx diff --git a/docs/components/Dropdown/components/index.tsx b/docs/components/Global/Dropdown/components/index.tsx similarity index 100% rename from docs/components/Dropdown/components/index.tsx rename to docs/components/Global/Dropdown/components/index.tsx diff --git a/docs/components/Dropdown/typings.ts b/docs/components/Global/Dropdown/typings.ts similarity index 100% rename from docs/components/Dropdown/typings.ts rename to docs/components/Global/Dropdown/typings.ts diff --git a/docs/components/Footer.tsx b/docs/components/Global/Footer.tsx similarity index 92% rename from docs/components/Footer.tsx rename to docs/components/Global/Footer.tsx index 570dad6..4ffe494 100644 --- a/docs/components/Footer.tsx +++ b/docs/components/Global/Footer.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { SmallParagraph } from './Typography'; +import { SmallParagraph } from '../Typography'; import styled, { css } from 'styled-components'; import { Container } from './Container'; diff --git a/docs/components/Header/Brand.tsx b/docs/components/Global/Header/Brand.tsx similarity index 95% rename from docs/components/Header/Brand.tsx rename to docs/components/Global/Header/Brand.tsx index 227b544..8439430 100644 --- a/docs/components/Header/Brand.tsx +++ b/docs/components/Global/Header/Brand.tsx @@ -1,6 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import { Logo } from '../Logo'; +import { Logo } from '../../Logo'; // import { BrandLink } from '../styled'; // import { Logo } from '../../Logo'; @@ -9,7 +9,7 @@ export function Brand() { - ) + ); } export const BrandLink = styled.div` @@ -43,4 +43,3 @@ export const BrandLink = styled.div` // } // } // `; - diff --git a/docs/components/Global/Header/Tagline.tsx b/docs/components/Global/Header/Tagline.tsx new file mode 100644 index 0000000..1e4697c --- /dev/null +++ b/docs/components/Global/Header/Tagline.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { Paragraph } from '../../Typography'; + +export function Tagline() { + return ( + + a light, modular and extensible ReactJS UI primitives library + + ); +} diff --git a/docs/components/Header/index.tsx b/docs/components/Global/Header/index.tsx similarity index 100% rename from docs/components/Header/index.tsx rename to docs/components/Global/Header/index.tsx diff --git a/docs/components/Header/Tagline.tsx b/docs/components/Header/Tagline.tsx deleted file mode 100644 index e495861..0000000 --- a/docs/components/Header/Tagline.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import { Paragraph } from '../Typography'; - -export function Tagline() { - return a light, modular and extensible ReactJS UI primitives library -} \ No newline at end of file diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx index 78a99be..7851af6 100644 --- a/docs/pages/index.tsx +++ b/docs/pages/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Layout } from '../components/Layout'; +import { Layout } from '../components/Global/Layout'; import { useRouter } from 'next/router'; import { content } from '../containers'; From 220e139c27fd46dabc6907a3e4bfad55fefd07b9 Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Fri, 11 Dec 2020 15:20:45 +1100 Subject: [PATCH 06/16] Update Components - update Brand to use new Logo component - move logo styles to Logo - add new DesktopNav component - split NavTop styles, typings and component --- docs/components/DesktopNav/DesktopNav.tsx | 28 ++++++ docs/components/DesktopNav/DesktopNavLink.tsx | 36 +++++++ docs/components/DesktopNav/constants.ts | 60 ++++++++++++ docs/components/DesktopNav/index.tsx | 1 + docs/components/DesktopNav/styles.tsx | 96 +++++++++++++++++++ docs/components/DesktopNav/typings.ts | 20 ++++ docs/components/Global/Brand/Brand.tsx | 12 +++ docs/components/Global/Brand/index.tsx | 1 + docs/components/Global/Brand/styles.tsx | 8 ++ docs/components/Global/Brand/typings.ts | 5 + docs/components/Global/Header/Brand.tsx | 45 --------- docs/components/Global/Header/index.tsx | 4 +- docs/components/Global/NavTop/NavTop.tsx | 6 ++ docs/components/Global/NavTop/index.tsx | 1 + .../NavTop.tsx => Global/NavTop/styles.ts} | 11 +-- .../Global/{Header => Tagline}/Tagline.tsx | 5 +- docs/components/Global/Tagline/index.tsx | 2 + docs/components/Global/Tagline/typings.ts | 5 + docs/components/Logo.tsx | 10 -- docs/components/Logo/Logo.tsx | 52 ++++++++++ docs/components/Logo/index.tsx | 1 + docs/components/Logo/styles.ts | 11 +++ docs/components/Logo/typings.ts | 4 + 23 files changed, 356 insertions(+), 68 deletions(-) create mode 100644 docs/components/DesktopNav/DesktopNav.tsx create mode 100644 docs/components/DesktopNav/DesktopNavLink.tsx create mode 100644 docs/components/DesktopNav/constants.ts create mode 100644 docs/components/DesktopNav/index.tsx create mode 100644 docs/components/DesktopNav/styles.tsx create mode 100644 docs/components/DesktopNav/typings.ts create mode 100644 docs/components/Global/Brand/Brand.tsx create mode 100644 docs/components/Global/Brand/index.tsx create mode 100644 docs/components/Global/Brand/styles.tsx create mode 100644 docs/components/Global/Brand/typings.ts delete mode 100644 docs/components/Global/Header/Brand.tsx create mode 100644 docs/components/Global/NavTop/NavTop.tsx create mode 100644 docs/components/Global/NavTop/index.tsx rename docs/components/{NavTop/NavTop.tsx => Global/NavTop/styles.ts} (84%) rename docs/components/Global/{Header => Tagline}/Tagline.tsx (56%) create mode 100644 docs/components/Global/Tagline/index.tsx create mode 100644 docs/components/Global/Tagline/typings.ts delete mode 100644 docs/components/Logo.tsx create mode 100644 docs/components/Logo/Logo.tsx create mode 100644 docs/components/Logo/index.tsx create mode 100644 docs/components/Logo/styles.ts create mode 100644 docs/components/Logo/typings.ts diff --git a/docs/components/DesktopNav/DesktopNav.tsx b/docs/components/DesktopNav/DesktopNav.tsx new file mode 100644 index 0000000..94bc521 --- /dev/null +++ b/docs/components/DesktopNav/DesktopNav.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { Brand } from '../Global/Brand/Brand'; +import { Tagline } from '../Global/Tagline/Tagline'; +import { NavContainer, ListItem } from './styles'; +import { DesktopNavLink } from './DesktopNavLink'; +import { links } from './constants'; + +export function DesktopNav() { + return ( + + ); +} diff --git a/docs/components/DesktopNav/DesktopNavLink.tsx b/docs/components/DesktopNav/DesktopNavLink.tsx new file mode 100644 index 0000000..5605e82 --- /dev/null +++ b/docs/components/DesktopNav/DesktopNavLink.tsx @@ -0,0 +1,36 @@ +import { + Link, + NavContainer, + ChildLinkContainer, + LinkItem, + Counter, + LinkCount +} from './styles'; + +export function DesktopNavLink({ children, link, name }) { + return ( + <> + + {name} + + + {!!children && ( + + {children.map((child, i) => { + i += 1; + return ( + + + + {`0${i}`.slice(-2)} + + + + + ); + })} + + )} + + ); +} diff --git a/docs/components/DesktopNav/constants.ts b/docs/components/DesktopNav/constants.ts new file mode 100644 index 0000000..c3b9c8d --- /dev/null +++ b/docs/components/DesktopNav/constants.ts @@ -0,0 +1,60 @@ +import { LinkItems } from './typings'; + +export const links: LinkItems = [ + { + component: 'Home', + name: 'Home' + }, + { + component: 'GettingStarted', + name: 'Getting Started' + }, + { + component: 'Components', + name: 'Components', + children: [ + { + component: 'Block', + name: 'Block' + }, + { + component: 'Flex', + name: 'Flex' + }, + { + component: 'Grid', + name: 'Grid' + }, + { + component: 'Imagery', + name: 'Imagery' + }, + { + component: 'Typography', + name: 'Typography' + } + ] + }, + { + component: 'Utilities', + name: 'Utilities', + children: [ + { + component: 'Media', + name: 'Media' + }, + { + component: 'Generator', + name: 'Generator' + } + ] + }, + { + component: 'Cusomisation', + name: 'Cusomisation' + }, + { + component: 'Variants', + name: 'Variants' + } +]; diff --git a/docs/components/DesktopNav/index.tsx b/docs/components/DesktopNav/index.tsx new file mode 100644 index 0000000..6593033 --- /dev/null +++ b/docs/components/DesktopNav/index.tsx @@ -0,0 +1 @@ +export { DesktopNav } from './DesktopNav'; diff --git a/docs/components/DesktopNav/styles.tsx b/docs/components/DesktopNav/styles.tsx new file mode 100644 index 0000000..caa6475 --- /dev/null +++ b/docs/components/DesktopNav/styles.tsx @@ -0,0 +1,96 @@ +import styled from 'styled-components'; +import { AnchorLink } from '../AnchorLink'; +import { LinkProps } from './typings'; + +export const Link = styled(AnchorLink)` + display: block; + font-weight: ${({ hasChildren }) => (!!hasChildren ? '400' : '900')}; +`; + +export const LinkItem = styled.div` + margin: 0; + display: flex; + flex-direction: row; + align-items: center; +`; + +export const NavContainer = styled.ul` + position: relative; + padding-left: 0; +`; + +export const ListItem = styled.li` + list-style: none; + margin-bottom: 1em; + + > a { + margin-bottom: 1em; + } +`; + +export const ChildLinkContainer = styled.li` + position: relative; + padding-left: 1em; + padding-bottom: 1em; + list-style: none; + + &::before, + &::after { + content: ''; + display: block; + position: absolute; + left: 2px; + } + + ${({ theme }) => ` + &::before { + border-top: 1px solid ${theme.colors.primary}; + width: 16px; + height: 0; + top: calc(50% - 0.5em); + left: 0; + transform: translateY(-50%); + } + + &::after { + position: absolute; + top: 0; + left: 0; + border-left: 1px solid ${theme.colors.primary}; + height: 100%; + width: 0px; + } + + :last-child { + &::after { + height: calc(50% - 0.5em); + } + } + `} +`; + +export const LinkCount = styled.span` + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 1rem; + font-weight: bold; + padding-top: 2px; + + ${({ theme }) => ` + color: ${theme.colors.white}; + `} +`; + +export const Counter = styled.div` + position: relative; + width: 28px; + height: 28px; + border-radius: 50%; + margin-right: 0.5em; + + ${({ theme }) => ` + background: ${theme.colors.primary}; + `} +`; diff --git a/docs/components/DesktopNav/typings.ts b/docs/components/DesktopNav/typings.ts new file mode 100644 index 0000000..fc7d21e --- /dev/null +++ b/docs/components/DesktopNav/typings.ts @@ -0,0 +1,20 @@ +export type LinkItem = { + name: string; + component: string; +}; + +export type LinkItems = Array< + { + children?: LinkItem[]; + } & LinkItem +>; + +export type LinkProps = { + hasChildren: boolean; +}; + +export type DesktopNavLinkProps = { + children; + link; + name; +}; diff --git a/docs/components/Global/Brand/Brand.tsx b/docs/components/Global/Brand/Brand.tsx new file mode 100644 index 0000000..8d154d5 --- /dev/null +++ b/docs/components/Global/Brand/Brand.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Logo } from '../../Logo/Logo'; +import { BrandProps } from './typings'; +import { LogoContainer } from './styles'; + +export function Brand({ position = 'center' }: BrandProps) { + return ( + + + + ); +} diff --git a/docs/components/Global/Brand/index.tsx b/docs/components/Global/Brand/index.tsx new file mode 100644 index 0000000..3432e51 --- /dev/null +++ b/docs/components/Global/Brand/index.tsx @@ -0,0 +1 @@ +export { Brand } from './Brand'; diff --git a/docs/components/Global/Brand/styles.tsx b/docs/components/Global/Brand/styles.tsx new file mode 100644 index 0000000..0306f7a --- /dev/null +++ b/docs/components/Global/Brand/styles.tsx @@ -0,0 +1,8 @@ +import styled from 'styled-components'; +import { BlockBase } from 'artifak'; +import { BrandProps } from './typings'; + +export const LogoContainer = styled(BlockBase)` + display: flex; + justify-content: ${({ position }) => position}; +`; diff --git a/docs/components/Global/Brand/typings.ts b/docs/components/Global/Brand/typings.ts new file mode 100644 index 0000000..96a1f50 --- /dev/null +++ b/docs/components/Global/Brand/typings.ts @@ -0,0 +1,5 @@ +import { Property } from 'csstype'; + +export type BrandProps = { + position?: Property.JustifyContent; +}; diff --git a/docs/components/Global/Header/Brand.tsx b/docs/components/Global/Header/Brand.tsx deleted file mode 100644 index 8439430..0000000 --- a/docs/components/Global/Header/Brand.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import { Logo } from '../../Logo'; -// import { BrandLink } from '../styled'; -// import { Logo } from '../../Logo'; - -export function Brand() { - return ( - - - - ); -} - -export const BrandLink = styled.div` - > svg { - display: block; - width: 80px; - padding-bottom: 1em; - margin: 0 auto; - } - - @media (min-width: 1025px) { - > svg { - width: 140px; - } - } -`; - -// import styled from 'styled-components'; -// import { AnchorLink } from '../../AnchorLink'; -// import { Tagline } from '../styled'; - -// export const BrandLink = styled(AnchorLink)` -// > svg { -// width: 80px; -// padding-bottom: 0.25em; -// } - -// @media (min-width: 1025px) { -// > svg { -// width: 100px; -// } -// } -// `; diff --git a/docs/components/Global/Header/index.tsx b/docs/components/Global/Header/index.tsx index d6ee03d..618eef2 100644 --- a/docs/components/Global/Header/index.tsx +++ b/docs/components/Global/Header/index.tsx @@ -1,8 +1,8 @@ import React from 'react'; import styled from 'styled-components'; import { Dropdown } from '../Dropdown/Dropdown'; -import { Brand } from './Brand'; -import { Tagline } from './Tagline'; +import { Brand } from '../Brand'; +import { Tagline } from '../Tagline'; const links = [ { diff --git a/docs/components/Global/NavTop/NavTop.tsx b/docs/components/Global/NavTop/NavTop.tsx new file mode 100644 index 0000000..20c4273 --- /dev/null +++ b/docs/components/Global/NavTop/NavTop.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { NavTopContainer } from './styles'; + +export function NavTop() { + return ; +} diff --git a/docs/components/Global/NavTop/index.tsx b/docs/components/Global/NavTop/index.tsx new file mode 100644 index 0000000..76756f4 --- /dev/null +++ b/docs/components/Global/NavTop/index.tsx @@ -0,0 +1 @@ +export { NavTop } from './NavTop'; diff --git a/docs/components/NavTop/NavTop.tsx b/docs/components/Global/NavTop/styles.ts similarity index 84% rename from docs/components/NavTop/NavTop.tsx rename to docs/components/Global/NavTop/styles.ts index 4141588..e066dce 100644 --- a/docs/components/NavTop/NavTop.tsx +++ b/docs/components/Global/NavTop/styles.ts @@ -1,11 +1,6 @@ -import React from 'react'; import styled from 'styled-components'; -export function NavTop() { - return -} - -const NavTopContainer = styled.div` +export const NavTopContainer = styled.div` position: relative; width: 100%; height: 60px; @@ -37,6 +32,4 @@ const NavTopContainer = styled.div` rgba(241, 94, 34, 1) 8px ); } - -` - +`; diff --git a/docs/components/Global/Header/Tagline.tsx b/docs/components/Global/Tagline/Tagline.tsx similarity index 56% rename from docs/components/Global/Header/Tagline.tsx rename to docs/components/Global/Tagline/Tagline.tsx index 1e4697c..130b2ee 100644 --- a/docs/components/Global/Header/Tagline.tsx +++ b/docs/components/Global/Tagline/Tagline.tsx @@ -1,9 +1,10 @@ import React from 'react'; import { Paragraph } from '../../Typography'; +import { TaglineProps } from './typings'; -export function Tagline() { +export function Tagline({ align = 'center' }: TaglineProps) { return ( - + a light, modular and extensible ReactJS UI primitives library ); diff --git a/docs/components/Global/Tagline/index.tsx b/docs/components/Global/Tagline/index.tsx new file mode 100644 index 0000000..208296c --- /dev/null +++ b/docs/components/Global/Tagline/index.tsx @@ -0,0 +1,2 @@ +export { Tagline } from './Tagline'; +export type { TaglineProps } from './typings'; \ No newline at end of file diff --git a/docs/components/Global/Tagline/typings.ts b/docs/components/Global/Tagline/typings.ts new file mode 100644 index 0000000..c809f84 --- /dev/null +++ b/docs/components/Global/Tagline/typings.ts @@ -0,0 +1,5 @@ +import { Property } from 'csstype'; + +export type TaglineProps = { + align?: Property.TextAlign; +}; diff --git a/docs/components/Logo.tsx b/docs/components/Logo.tsx deleted file mode 100644 index 67294e2..0000000 --- a/docs/components/Logo.tsx +++ /dev/null @@ -1,10 +0,0 @@ -type Props = { - logoColor?: string; - textColor?: string; -}; - -export function Logo({ logoColor = '#F05E22', textColor = '#273434' }: Props) { - return ( - - ); -} diff --git a/docs/components/Logo/Logo.tsx b/docs/components/Logo/Logo.tsx new file mode 100644 index 0000000..1f87e4e --- /dev/null +++ b/docs/components/Logo/Logo.tsx @@ -0,0 +1,52 @@ +import { LogoProps } from './typings'; +import { SVGlogo } from './styles'; + +export function Logo({ + logoColor = '#F05E22', + textColor = '#273434' +}: LogoProps) { + return ( + + + + + + + + + + + + + + + + ); +} diff --git a/docs/components/Logo/index.tsx b/docs/components/Logo/index.tsx new file mode 100644 index 0000000..33af505 --- /dev/null +++ b/docs/components/Logo/index.tsx @@ -0,0 +1 @@ +export { Logo } from './Logo'; diff --git a/docs/components/Logo/styles.ts b/docs/components/Logo/styles.ts new file mode 100644 index 0000000..842f471 --- /dev/null +++ b/docs/components/Logo/styles.ts @@ -0,0 +1,11 @@ +import styled from 'styled-components'; + +export const SVGlogo = styled.svg` + width: 100%; + max-width: 80px; + padding-bottom: 1em; + + @media (min-width: 1025px) { + max-width: 140px; + } +`; diff --git a/docs/components/Logo/typings.ts b/docs/components/Logo/typings.ts new file mode 100644 index 0000000..279b206 --- /dev/null +++ b/docs/components/Logo/typings.ts @@ -0,0 +1,4 @@ +export type LogoProps = { + logoColor?: string; + textColor?: string; +}; From f5f5830017a01166c4335cefe65f8a6b4ea29994 Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Fri, 11 Dec 2020 15:21:03 +1100 Subject: [PATCH 07/16] add isplainobject dependency --- docs/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/package.json b/docs/package.json index 0fe4351..d3af28d 100644 --- a/docs/package.json +++ b/docs/package.json @@ -11,6 +11,7 @@ "dependencies": { "artifak": "^1.1.5", "csstype": "^3.0.5", + "lodash.isplainobject": "^4.0.6", "next": "10.0.3", "next-seo": "^4.17.0", "react": "^16.14.0", From 935cc1649d42dc54d8052d9d77fcfec41d834393 Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Fri, 11 Dec 2020 20:42:24 +1100 Subject: [PATCH 08/16] Page Structure Update - move Introduction to pages and rename as HomePage - add new Docs page - update Layout to toggle centred brand visibility - replace HomePage header nav with GetStarted link - add routes to links constants for DesktopNav --- docs/components/DesktopNav/DesktopNav.tsx | 8 +- docs/components/DesktopNav/DesktopNavLink.tsx | 14 ++- docs/components/DesktopNav/constants.ts | 11 +++ docs/components/DesktopNav/styles.tsx | 1 - docs/components/DesktopNav/typings.ts | 1 + docs/components/Global/Header/index.tsx | 96 +------------------ docs/components/Global/Header/styles.ts | 28 ++++++ docs/components/Global/Layout.tsx | 5 +- docs/containers/index.tsx | 22 ++--- .../HomePage/HomePage.tsx} | 2 +- .../HomePage}/content/About.tsx | 0 .../HomePage}/content/Features/Features.tsx | 2 +- .../content/Features/Icons/BuildIcon.tsx | 0 .../content/Features/Icons/ExtensibleIcon.tsx | 0 .../Features/Icons/LightweightIcon.tsx | 0 .../content/Features/Icons/ModularIcon.tsx | 0 .../content/Features/Icons/SimpleIcon.tsx | 0 .../content/Features/Icons/TSIcon.tsx | 0 .../content/Features/Icons/index.tsx | 0 .../Features/components/FeatureItem.tsx | 0 .../Features/components/FeaturedItemIcon.tsx | 0 .../Features/components/FeaturesGrid.tsx | 0 .../content/Features/components/index.tsx | 0 .../HomePage}/content/Installation.tsx | 0 .../HomePage}/content/Modules.tsx | 0 .../HomePage}/content/Specs/Specs.tsx | 0 .../content/Specs/components/Spec.tsx | 0 .../content/Specs/components/SpecCol.tsx | 0 .../Specs/components/SpecContainer.tsx | 0 .../content/Specs/components/index.tsx | 0 .../HomePage}/content/index.tsx | 0 docs/pages/docs.tsx | 36 +++++++ docs/pages/index.tsx | 20 +++- 33 files changed, 126 insertions(+), 120 deletions(-) create mode 100644 docs/components/Global/Header/styles.ts rename docs/{containers/Introduction/Introduction.tsx => pages/HomePage/HomePage.tsx} (87%) rename docs/{containers/Introduction => pages/HomePage}/content/About.tsx (100%) rename docs/{containers/Introduction => pages/HomePage}/content/Features/Features.tsx (96%) rename docs/{containers/Introduction => pages/HomePage}/content/Features/Icons/BuildIcon.tsx (100%) rename docs/{containers/Introduction => pages/HomePage}/content/Features/Icons/ExtensibleIcon.tsx (100%) rename docs/{containers/Introduction => pages/HomePage}/content/Features/Icons/LightweightIcon.tsx (100%) rename docs/{containers/Introduction => pages/HomePage}/content/Features/Icons/ModularIcon.tsx (100%) rename docs/{containers/Introduction => pages/HomePage}/content/Features/Icons/SimpleIcon.tsx (100%) rename docs/{containers/Introduction => pages/HomePage}/content/Features/Icons/TSIcon.tsx (100%) rename docs/{containers/Introduction => pages/HomePage}/content/Features/Icons/index.tsx (100%) rename docs/{containers/Introduction => pages/HomePage}/content/Features/components/FeatureItem.tsx (100%) rename docs/{containers/Introduction => pages/HomePage}/content/Features/components/FeaturedItemIcon.tsx (100%) rename docs/{containers/Introduction => pages/HomePage}/content/Features/components/FeaturesGrid.tsx (100%) rename docs/{containers/Introduction => pages/HomePage}/content/Features/components/index.tsx (100%) rename docs/{containers/Introduction => pages/HomePage}/content/Installation.tsx (100%) rename docs/{containers/Introduction => pages/HomePage}/content/Modules.tsx (100%) rename docs/{containers/Introduction => pages/HomePage}/content/Specs/Specs.tsx (100%) rename docs/{containers/Introduction => pages/HomePage}/content/Specs/components/Spec.tsx (100%) rename docs/{containers/Introduction => pages/HomePage}/content/Specs/components/SpecCol.tsx (100%) rename docs/{containers/Introduction => pages/HomePage}/content/Specs/components/SpecContainer.tsx (100%) rename docs/{containers/Introduction => pages/HomePage}/content/Specs/components/index.tsx (100%) rename docs/{containers/Introduction => pages/HomePage}/content/index.tsx (100%) create mode 100644 docs/pages/docs.tsx diff --git a/docs/components/DesktopNav/DesktopNav.tsx b/docs/components/DesktopNav/DesktopNav.tsx index 94bc521..8f30a5b 100644 --- a/docs/components/DesktopNav/DesktopNav.tsx +++ b/docs/components/DesktopNav/DesktopNav.tsx @@ -11,14 +11,10 @@ export function DesktopNav() { - {links.map(({ children, component, name }, i) => { + {links.map(({ children, route, name }, i) => { return ( - + ); })} diff --git a/docs/components/DesktopNav/DesktopNavLink.tsx b/docs/components/DesktopNav/DesktopNavLink.tsx index 5605e82..a36b81e 100644 --- a/docs/components/DesktopNav/DesktopNavLink.tsx +++ b/docs/components/DesktopNav/DesktopNavLink.tsx @@ -10,13 +10,17 @@ import { export function DesktopNavLink({ children, link, name }) { return ( <> - + {name} {!!children && ( - {children.map((child, i) => { + {children.map(({ route, name, children }, i) => { i += 1; return ( @@ -24,7 +28,11 @@ export function DesktopNavLink({ children, link, name }) { {`0${i}`.slice(-2)} - + ); diff --git a/docs/components/DesktopNav/constants.ts b/docs/components/DesktopNav/constants.ts index c3b9c8d..b91dcb7 100644 --- a/docs/components/DesktopNav/constants.ts +++ b/docs/components/DesktopNav/constants.ts @@ -2,10 +2,12 @@ import { LinkItems } from './typings'; export const links: LinkItems = [ { + route: '/', component: 'Home', name: 'Home' }, { + route: '/docs?content=getting-started', component: 'GettingStarted', name: 'Getting Started' }, @@ -14,22 +16,27 @@ export const links: LinkItems = [ name: 'Components', children: [ { + route: '/docs?content=block', component: 'Block', name: 'Block' }, { + route: '/docs?content=flex', component: 'Flex', name: 'Flex' }, { + route: '/docs?content=grid', component: 'Grid', name: 'Grid' }, { + route: '/docs?content=imagery', component: 'Imagery', name: 'Imagery' }, { + route: '/docs?content=typography', component: 'Typography', name: 'Typography' } @@ -40,20 +47,24 @@ export const links: LinkItems = [ name: 'Utilities', children: [ { + route: '/docs?content=media', component: 'Media', name: 'Media' }, { + route: '/docs?content=generator', component: 'Generator', name: 'Generator' } ] }, { + route: '/docs?content=customisation', component: 'Cusomisation', name: 'Cusomisation' }, { + route: '/docs?content=variants', component: 'Variants', name: 'Variants' } diff --git a/docs/components/DesktopNav/styles.tsx b/docs/components/DesktopNav/styles.tsx index caa6475..1c52cc6 100644 --- a/docs/components/DesktopNav/styles.tsx +++ b/docs/components/DesktopNav/styles.tsx @@ -4,7 +4,6 @@ import { LinkProps } from './typings'; export const Link = styled(AnchorLink)` display: block; - font-weight: ${({ hasChildren }) => (!!hasChildren ? '400' : '900')}; `; export const LinkItem = styled.div` diff --git a/docs/components/DesktopNav/typings.ts b/docs/components/DesktopNav/typings.ts index fc7d21e..e6a6138 100644 --- a/docs/components/DesktopNav/typings.ts +++ b/docs/components/DesktopNav/typings.ts @@ -1,4 +1,5 @@ export type LinkItem = { + route?: string; name: string; component: string; }; diff --git a/docs/components/Global/Header/index.tsx b/docs/components/Global/Header/index.tsx index 618eef2..a37f8c7 100644 --- a/docs/components/Global/Header/index.tsx +++ b/docs/components/Global/Header/index.tsx @@ -1,105 +1,15 @@ import React from 'react'; -import styled from 'styled-components'; -import { Dropdown } from '../Dropdown/Dropdown'; import { Brand } from '../Brand'; import { Tagline } from '../Tagline'; - -const links = [ - { - id: 'home', - title: 'Home', - component: 'Home', - selected: false, - key: 'modules' - }, - { - id: 'getting-started', - title: 'Getting Started', - component: 'GettingStarted', - selected: false, - key: 'modules' - }, - { - id: 'block', - title: 'Block', - component: 'Block', - selected: false, - key: 'modules' - }, - { - id: 'grid', - title: 'Grid', - component: 'Grid', - selected: false, - key: 'modules' - }, - { - id: 'flex', - title: 'Flex', - component: 'Flex', - selected: false, - key: 'modules' - }, - { - id: 'typography', - title: 'Typography', - component: 'Typography', - selected: false, - key: 'modules' - }, - { - id: 'imagery', - title: 'Imagery', - component: 'Imagery', - selected: false, - key: 'modules' - }, - { - id: 'generator', - title: 'Generator', - component: 'Generator', - selected: false, - key: 'modules' - }, - { - id: 'media', - title: 'Media', - component: 'Media', - selected: false, - key: 'modules' - }, - { - id: 'variants', - title: 'Variants', - component: 'Variants', - selected: false, - key: 'modules' - }, - { - id: 'customisation', - title: 'Customisation', - component: 'Customisation', - selected: false, - key: 'modules' - } -]; +import { HeaderContainer } from './styles'; +import { GetStartedButton } from './styles'; export function Header() { return ( - + Get Started ); } - -const HeaderContainer = styled.header` - padding: 2em 0 0; - - ${({ theme }) => ` - @media(min-width: ${theme.breakpoints[0]}) { - padding: 5em 0 0; - } - `} -`; diff --git a/docs/components/Global/Header/styles.ts b/docs/components/Global/Header/styles.ts new file mode 100644 index 0000000..6d2afb8 --- /dev/null +++ b/docs/components/Global/Header/styles.ts @@ -0,0 +1,28 @@ +import styled from 'styled-components'; +import { AnchorLink } from '../../AnchorLink'; + +export const HeaderContainer = styled.header` + padding: 2em 0 0; + + ${({ theme }) => ` + @media(min-width: ${theme.breakpoints[0]}) { + padding: 5em 0 0; + } + `} +`; + +export const GetStartedButton = styled(AnchorLink)` + padding: 1em 1em 0.8em; + display: block; + border-radius: 6px; + text-align: center; + font-weight: bold; + margin: 0 auto; + max-width: 120px; + width: 100%; + + ${({ theme }) => ` + color: ${theme.colors.primary}; + border: 3px solid ${theme.colors.primary}; + `} +`; diff --git a/docs/components/Global/Layout.tsx b/docs/components/Global/Layout.tsx index 81c340d..e42cbc2 100644 --- a/docs/components/Global/Layout.tsx +++ b/docs/components/Global/Layout.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useRouter } from 'next/router'; import styled from 'styled-components'; import { Container } from './Container'; import { HTMLhead, HTMLheadProps } from './HTMLhead'; @@ -17,6 +18,8 @@ export function Layout({ additionalMetaTags = [], children }: LayoutProps) { + const router = useRouter(); + return ( <> -
+ {router.pathname === '/' &&
}
diff --git a/docs/containers/index.tsx b/docs/containers/index.tsx index 2173e32..366dbbb 100644 --- a/docs/containers/index.tsx +++ b/docs/containers/index.tsx @@ -1,4 +1,3 @@ -import { Introduction } from './Introduction/Introduction'; import { Block } from './Block/Block'; import { Grid } from './Grid/Grid'; import { Typography } from './Typography/Typography'; @@ -11,15 +10,14 @@ import { Customisation } from './Customisation/Customisation'; import { GettingStarted } from './GettingStarted/GettingStarted'; export const content = { - Introduction, - Block, - Grid, - Typography, - Flex, - Generator, - Imagery, - Media, - Variants, - Customisation, - GettingStarted + block: Block, + grid: Grid, + typography: Typography, + flex: Flex, + generator: Generator, + imagery: Imagery, + media: Media, + variants: Variants, + customisation: Customisation, + ['getting-started']: GettingStarted }; diff --git a/docs/containers/Introduction/Introduction.tsx b/docs/pages/HomePage/HomePage.tsx similarity index 87% rename from docs/containers/Introduction/Introduction.tsx rename to docs/pages/HomePage/HomePage.tsx index 50c229b..270a4cf 100644 --- a/docs/containers/Introduction/Introduction.tsx +++ b/docs/pages/HomePage/HomePage.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { About, Features, Installation, Modules, Specs } from './content'; -export function Introduction() { +export function HomePage() { return ( <> diff --git a/docs/containers/Introduction/content/About.tsx b/docs/pages/HomePage/content/About.tsx similarity index 100% rename from docs/containers/Introduction/content/About.tsx rename to docs/pages/HomePage/content/About.tsx diff --git a/docs/containers/Introduction/content/Features/Features.tsx b/docs/pages/HomePage/content/Features/Features.tsx similarity index 96% rename from docs/containers/Introduction/content/Features/Features.tsx rename to docs/pages/HomePage/content/Features/Features.tsx index d13f260..35d2a9e 100644 --- a/docs/containers/Introduction/content/Features/Features.tsx +++ b/docs/pages/HomePage/content/Features/Features.tsx @@ -10,7 +10,7 @@ import { LightweightIcon, SimpleIcon } from './Icons'; -import { FeaturesGrid, FeatureItem } from './components/'; +import { FeaturesGrid, FeatureItem } from './components'; const IntroductionContent = [ { diff --git a/docs/containers/Introduction/content/Features/Icons/BuildIcon.tsx b/docs/pages/HomePage/content/Features/Icons/BuildIcon.tsx similarity index 100% rename from docs/containers/Introduction/content/Features/Icons/BuildIcon.tsx rename to docs/pages/HomePage/content/Features/Icons/BuildIcon.tsx diff --git a/docs/containers/Introduction/content/Features/Icons/ExtensibleIcon.tsx b/docs/pages/HomePage/content/Features/Icons/ExtensibleIcon.tsx similarity index 100% rename from docs/containers/Introduction/content/Features/Icons/ExtensibleIcon.tsx rename to docs/pages/HomePage/content/Features/Icons/ExtensibleIcon.tsx diff --git a/docs/containers/Introduction/content/Features/Icons/LightweightIcon.tsx b/docs/pages/HomePage/content/Features/Icons/LightweightIcon.tsx similarity index 100% rename from docs/containers/Introduction/content/Features/Icons/LightweightIcon.tsx rename to docs/pages/HomePage/content/Features/Icons/LightweightIcon.tsx diff --git a/docs/containers/Introduction/content/Features/Icons/ModularIcon.tsx b/docs/pages/HomePage/content/Features/Icons/ModularIcon.tsx similarity index 100% rename from docs/containers/Introduction/content/Features/Icons/ModularIcon.tsx rename to docs/pages/HomePage/content/Features/Icons/ModularIcon.tsx diff --git a/docs/containers/Introduction/content/Features/Icons/SimpleIcon.tsx b/docs/pages/HomePage/content/Features/Icons/SimpleIcon.tsx similarity index 100% rename from docs/containers/Introduction/content/Features/Icons/SimpleIcon.tsx rename to docs/pages/HomePage/content/Features/Icons/SimpleIcon.tsx diff --git a/docs/containers/Introduction/content/Features/Icons/TSIcon.tsx b/docs/pages/HomePage/content/Features/Icons/TSIcon.tsx similarity index 100% rename from docs/containers/Introduction/content/Features/Icons/TSIcon.tsx rename to docs/pages/HomePage/content/Features/Icons/TSIcon.tsx diff --git a/docs/containers/Introduction/content/Features/Icons/index.tsx b/docs/pages/HomePage/content/Features/Icons/index.tsx similarity index 100% rename from docs/containers/Introduction/content/Features/Icons/index.tsx rename to docs/pages/HomePage/content/Features/Icons/index.tsx diff --git a/docs/containers/Introduction/content/Features/components/FeatureItem.tsx b/docs/pages/HomePage/content/Features/components/FeatureItem.tsx similarity index 100% rename from docs/containers/Introduction/content/Features/components/FeatureItem.tsx rename to docs/pages/HomePage/content/Features/components/FeatureItem.tsx diff --git a/docs/containers/Introduction/content/Features/components/FeaturedItemIcon.tsx b/docs/pages/HomePage/content/Features/components/FeaturedItemIcon.tsx similarity index 100% rename from docs/containers/Introduction/content/Features/components/FeaturedItemIcon.tsx rename to docs/pages/HomePage/content/Features/components/FeaturedItemIcon.tsx diff --git a/docs/containers/Introduction/content/Features/components/FeaturesGrid.tsx b/docs/pages/HomePage/content/Features/components/FeaturesGrid.tsx similarity index 100% rename from docs/containers/Introduction/content/Features/components/FeaturesGrid.tsx rename to docs/pages/HomePage/content/Features/components/FeaturesGrid.tsx diff --git a/docs/containers/Introduction/content/Features/components/index.tsx b/docs/pages/HomePage/content/Features/components/index.tsx similarity index 100% rename from docs/containers/Introduction/content/Features/components/index.tsx rename to docs/pages/HomePage/content/Features/components/index.tsx diff --git a/docs/containers/Introduction/content/Installation.tsx b/docs/pages/HomePage/content/Installation.tsx similarity index 100% rename from docs/containers/Introduction/content/Installation.tsx rename to docs/pages/HomePage/content/Installation.tsx diff --git a/docs/containers/Introduction/content/Modules.tsx b/docs/pages/HomePage/content/Modules.tsx similarity index 100% rename from docs/containers/Introduction/content/Modules.tsx rename to docs/pages/HomePage/content/Modules.tsx diff --git a/docs/containers/Introduction/content/Specs/Specs.tsx b/docs/pages/HomePage/content/Specs/Specs.tsx similarity index 100% rename from docs/containers/Introduction/content/Specs/Specs.tsx rename to docs/pages/HomePage/content/Specs/Specs.tsx diff --git a/docs/containers/Introduction/content/Specs/components/Spec.tsx b/docs/pages/HomePage/content/Specs/components/Spec.tsx similarity index 100% rename from docs/containers/Introduction/content/Specs/components/Spec.tsx rename to docs/pages/HomePage/content/Specs/components/Spec.tsx diff --git a/docs/containers/Introduction/content/Specs/components/SpecCol.tsx b/docs/pages/HomePage/content/Specs/components/SpecCol.tsx similarity index 100% rename from docs/containers/Introduction/content/Specs/components/SpecCol.tsx rename to docs/pages/HomePage/content/Specs/components/SpecCol.tsx diff --git a/docs/containers/Introduction/content/Specs/components/SpecContainer.tsx b/docs/pages/HomePage/content/Specs/components/SpecContainer.tsx similarity index 100% rename from docs/containers/Introduction/content/Specs/components/SpecContainer.tsx rename to docs/pages/HomePage/content/Specs/components/SpecContainer.tsx diff --git a/docs/containers/Introduction/content/Specs/components/index.tsx b/docs/pages/HomePage/content/Specs/components/index.tsx similarity index 100% rename from docs/containers/Introduction/content/Specs/components/index.tsx rename to docs/pages/HomePage/content/Specs/components/index.tsx diff --git a/docs/containers/Introduction/content/index.tsx b/docs/pages/HomePage/content/index.tsx similarity index 100% rename from docs/containers/Introduction/content/index.tsx rename to docs/pages/HomePage/content/index.tsx diff --git a/docs/pages/docs.tsx b/docs/pages/docs.tsx new file mode 100644 index 0000000..da28d53 --- /dev/null +++ b/docs/pages/docs.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { FlexRow, FlexCol } from 'artifak'; +import { Layout } from '../components/Global/Layout'; +import { useRouter } from 'next/router'; +import { content } from '../containers'; +import { DesktopNav } from '../components/DesktopNav/DesktopNav'; + +export default function Docs() { + const router = useRouter(); + const [contentQuery, setContentQuery] = React.useState( + 'getting-started' + ); + + React.useEffect(() => { + if (!!router.query && !!router.query.content) { + setContentQuery(router.query.content as string); + } + }, [router.query]); + + const PageContent = content[contentQuery]; + + return ( + + + + + + + + {!!PageContent && } + {!PageContent &&

Page Not Found

} + + + + ); +} diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx index 7851af6..2c8fe64 100644 --- a/docs/pages/index.tsx +++ b/docs/pages/index.tsx @@ -1,7 +1,10 @@ import React from 'react'; +import { FlexRow, FlexCol } from 'artifak'; import { Layout } from '../components/Global/Layout'; import { useRouter } from 'next/router'; import { content } from '../containers'; +import { HomePage } from './HomePage/HomePage'; +import { DesktopNav } from '../components/DesktopNav/DesktopNav'; export default function Home() { const router = useRouter(); @@ -14,11 +17,24 @@ export default function Home() { }, [router.query]); const PageContent = content[contentType]; - const Home = content.Introduction; return ( - <>{!!PageContent ? : } + <> + + + {!!PageContent && ( + + + + + + + + + + )} + ); } From 203a6da522c55f8e77d8dd8037849798f78f067c Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Sat, 12 Dec 2020 11:42:58 +1100 Subject: [PATCH 09/16] Reorganise files - Move DesktopNav to new Nav dir - add framer-motion - add responsive cols for docs flex layout --- docs/components/DesktopNav/index.tsx | 1 - .../Desktop}/DesktopNav.tsx | 6 +-- .../Desktop}/DesktopNavLink.tsx | 0 .../{DesktopNav => Nav/Desktop}/styles.tsx | 2 +- .../{DesktopNav => Nav/Desktop}/typings.ts | 0 docs/components/Nav/Mobile/MobileNav.tsx | 3 ++ .../{DesktopNav => Nav}/constants.ts | 2 +- docs/components/Nav/index.tsx | 1 + docs/package.json | 1 + docs/pages/docs.tsx | 6 +-- docs/pages/index.tsx | 2 +- docs/yarn.lock | 50 ++++++++++++++++++- 12 files changed, 63 insertions(+), 11 deletions(-) delete mode 100644 docs/components/DesktopNav/index.tsx rename docs/components/{DesktopNav => Nav/Desktop}/DesktopNav.tsx (78%) rename docs/components/{DesktopNav => Nav/Desktop}/DesktopNavLink.tsx (100%) rename docs/components/{DesktopNav => Nav/Desktop}/styles.tsx (97%) rename docs/components/{DesktopNav => Nav/Desktop}/typings.ts (100%) create mode 100644 docs/components/Nav/Mobile/MobileNav.tsx rename docs/components/{DesktopNav => Nav}/constants.ts (96%) create mode 100644 docs/components/Nav/index.tsx diff --git a/docs/components/DesktopNav/index.tsx b/docs/components/DesktopNav/index.tsx deleted file mode 100644 index 6593033..0000000 --- a/docs/components/DesktopNav/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { DesktopNav } from './DesktopNav'; diff --git a/docs/components/DesktopNav/DesktopNav.tsx b/docs/components/Nav/Desktop/DesktopNav.tsx similarity index 78% rename from docs/components/DesktopNav/DesktopNav.tsx rename to docs/components/Nav/Desktop/DesktopNav.tsx index 8f30a5b..1ecdbea 100644 --- a/docs/components/DesktopNav/DesktopNav.tsx +++ b/docs/components/Nav/Desktop/DesktopNav.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import { Brand } from '../Global/Brand/Brand'; -import { Tagline } from '../Global/Tagline/Tagline'; +import { Brand } from '../../Global/Brand/Brand'; +import { Tagline } from '../../Global/Tagline/Tagline'; import { NavContainer, ListItem } from './styles'; import { DesktopNavLink } from './DesktopNavLink'; -import { links } from './constants'; +import { links } from '../constants'; export function DesktopNav() { return ( diff --git a/docs/components/DesktopNav/DesktopNavLink.tsx b/docs/components/Nav/Desktop/DesktopNavLink.tsx similarity index 100% rename from docs/components/DesktopNav/DesktopNavLink.tsx rename to docs/components/Nav/Desktop/DesktopNavLink.tsx diff --git a/docs/components/DesktopNav/styles.tsx b/docs/components/Nav/Desktop/styles.tsx similarity index 97% rename from docs/components/DesktopNav/styles.tsx rename to docs/components/Nav/Desktop/styles.tsx index 1c52cc6..54be039 100644 --- a/docs/components/DesktopNav/styles.tsx +++ b/docs/components/Nav/Desktop/styles.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import { AnchorLink } from '../AnchorLink'; +import { AnchorLink } from '../../AnchorLink'; import { LinkProps } from './typings'; export const Link = styled(AnchorLink)` diff --git a/docs/components/DesktopNav/typings.ts b/docs/components/Nav/Desktop/typings.ts similarity index 100% rename from docs/components/DesktopNav/typings.ts rename to docs/components/Nav/Desktop/typings.ts diff --git a/docs/components/Nav/Mobile/MobileNav.tsx b/docs/components/Nav/Mobile/MobileNav.tsx new file mode 100644 index 0000000..dc06237 --- /dev/null +++ b/docs/components/Nav/Mobile/MobileNav.tsx @@ -0,0 +1,3 @@ +export function MobileNav() { + return
Mobile
; +} diff --git a/docs/components/DesktopNav/constants.ts b/docs/components/Nav/constants.ts similarity index 96% rename from docs/components/DesktopNav/constants.ts rename to docs/components/Nav/constants.ts index b91dcb7..c55f47e 100644 --- a/docs/components/DesktopNav/constants.ts +++ b/docs/components/Nav/constants.ts @@ -1,4 +1,4 @@ -import { LinkItems } from './typings'; +import { LinkItems } from './Desktop/typings'; export const links: LinkItems = [ { diff --git a/docs/components/Nav/index.tsx b/docs/components/Nav/index.tsx new file mode 100644 index 0000000..ebddb5d --- /dev/null +++ b/docs/components/Nav/index.tsx @@ -0,0 +1 @@ +export { DesktopNav } from './Desktop/DesktopNav'; diff --git a/docs/package.json b/docs/package.json index d3af28d..005f157 100644 --- a/docs/package.json +++ b/docs/package.json @@ -11,6 +11,7 @@ "dependencies": { "artifak": "^1.1.5", "csstype": "^3.0.5", + "framer-motion": "^2.9.5", "lodash.isplainobject": "^4.0.6", "next": "10.0.3", "next-seo": "^4.17.0", diff --git a/docs/pages/docs.tsx b/docs/pages/docs.tsx index da28d53..38582c2 100644 --- a/docs/pages/docs.tsx +++ b/docs/pages/docs.tsx @@ -3,7 +3,7 @@ import { FlexRow, FlexCol } from 'artifak'; import { Layout } from '../components/Global/Layout'; import { useRouter } from 'next/router'; import { content } from '../containers'; -import { DesktopNav } from '../components/DesktopNav/DesktopNav'; +import { DesktopNav } from '../components/Nav/Desktop/DesktopNav'; export default function Docs() { const router = useRouter(); @@ -22,11 +22,11 @@ export default function Docs() { return ( - + - + {!!PageContent && } {!PageContent &&

Page Not Found

} diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx index 2c8fe64..a9732b8 100644 --- a/docs/pages/index.tsx +++ b/docs/pages/index.tsx @@ -4,7 +4,7 @@ import { Layout } from '../components/Global/Layout'; import { useRouter } from 'next/router'; import { content } from '../containers'; import { HomePage } from './HomePage/HomePage'; -import { DesktopNav } from '../components/DesktopNav/DesktopNav'; +import { DesktopNav } from '../components/Nav/Desktop/DesktopNav'; export default function Home() { const router = useRouter(); diff --git a/docs/yarn.lock b/docs/yarn.lock index 1cf99e6..09d3559 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -221,7 +221,7 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" -"@emotion/is-prop-valid@^0.8.8": +"@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.8": version "0.8.8" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== @@ -2141,6 +2141,26 @@ fragment-cache@^0.2.1: dependencies: map-cache "^0.2.2" +framer-motion@^2.9.5: + version "2.9.5" + resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-2.9.5.tgz#bbb185325d531c57f494cf3f6cf7719fc2c225c7" + integrity sha512-epSX4Co1YbDv0mjfHouuY0q361TpHE7WQzCp/xMTilxy4kXd+Z23uJzPVorfzbm1a/9q1Yu8T5bndaw65NI4Tg== + dependencies: + framesync "^4.1.0" + hey-listen "^1.0.8" + popmotion "9.0.0-rc.20" + style-value-types "^3.1.9" + tslib "^1.10.0" + optionalDependencies: + "@emotion/is-prop-valid" "^0.8.2" + +framesync@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/framesync/-/framesync-4.1.0.tgz#69a8db3ca432dc70d6a76ba882684a1497ef068a" + integrity sha512-MmgZ4wCoeVxNbx2xp5hN/zPDCbLSKiDt4BbbslK7j/pM2lg5S0vhTNv1v8BCVb99JPIo6hXBFdwzU7Q4qcAaoQ== + dependencies: + hey-listen "^1.0.5" + from2@^2.1.0: version "2.3.0" resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af" @@ -2339,6 +2359,11 @@ he@1.2.0: resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== +hey-listen@^1.0.5, hey-listen@^1.0.8: + version "1.0.8" + resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68" + integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q== + highlight.js@^10.1.1, highlight.js@~10.1.0: version "10.1.2" resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.1.2.tgz#c20db951ba1c22c055010648dfffd7b2a968e00c" @@ -3415,6 +3440,16 @@ pnp-webpack-plugin@1.6.4: dependencies: ts-pnp "^1.1.6" +popmotion@9.0.0-rc.20: + version "9.0.0-rc.20" + resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.0.0-rc.20.tgz#f3550042ae31957b5416793ae8723200951ad39d" + integrity sha512-f98sny03WuA+c8ckBjNNXotJD4G2utG/I3Q23NU69OEafrXtxxSukAaJBxzbtxwDvz3vtZK69pu9ojdkMoBNTg== + dependencies: + framesync "^4.1.0" + hey-listen "^1.0.8" + style-value-types "^3.1.9" + tslib "^1.10.0" + posix-character-classes@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab" @@ -4334,6 +4369,14 @@ style-loader@1.2.1: loader-utils "^2.0.0" schema-utils "^2.6.6" +style-value-types@^3.1.9: + version "3.1.9" + resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-3.1.9.tgz#faf7da660d3f284ed695cff61ea197d85b9122cc" + integrity sha512-050uqgB7WdvtgacoQKm+4EgKzJExVq0sieKBQQtJiU3Muh6MYcCp4T3M8+dfl6VOF2LR0NNwXBP1QYEed8DfIw== + dependencies: + hey-listen "^1.0.8" + tslib "^1.10.0" + styled-components@^5.2.1: version "5.2.1" resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.2.1.tgz#6ed7fad2dc233825f64c719ffbdedd84ad79101a" @@ -4581,6 +4624,11 @@ ts-pnp@^1.1.6: resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92" integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw== +tslib@^1.10.0: + version "1.14.1" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" + integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== + tslib@^1.9.0: version "1.13.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043" From b1ba71b1461c98380fc46370499b2e6a88f76dba Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Sat, 12 Dec 2020 13:02:57 +1100 Subject: [PATCH 10/16] add useOutsideClick hook --- docs/hooks/useOutsideClick.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 docs/hooks/useOutsideClick.tsx diff --git a/docs/hooks/useOutsideClick.tsx b/docs/hooks/useOutsideClick.tsx new file mode 100644 index 0000000..8169174 --- /dev/null +++ b/docs/hooks/useOutsideClick.tsx @@ -0,0 +1,17 @@ +import { useEffect } from 'react'; + +export function useOutsideClick(ref, callback) { + const handleClick = e => { + if (ref.current && !ref.current.contains(e.target)) { + callback(); + } + }; + + useEffect(() => { + document.addEventListener('click', handleClick); + + return () => { + document.removeEventListener('click', handleClick); + }; + }); +} From 75d87bc94a944bc6871a8b4adce57a880bcdc193 Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Sat, 19 Dec 2020 13:52:47 +1100 Subject: [PATCH 11/16] docs package update --- docs/package.json | 14 ++-- docs/yarn.lock | 210 +++++++++++++++++++++++++--------------------- 2 files changed, 123 insertions(+), 101 deletions(-) diff --git a/docs/package.json b/docs/package.json index 005f157..335775b 100644 --- a/docs/package.json +++ b/docs/package.json @@ -11,28 +11,28 @@ "dependencies": { "artifak": "^1.1.5", "csstype": "^3.0.5", - "framer-motion": "^2.9.5", + "framer-motion": "^3.0.0", "lodash.isplainobject": "^4.0.6", "next": "10.0.3", "next-seo": "^4.17.0", "react": "^16.14.0", "react-custom-scrollbars": "^4.2.1", "react-dom": "^16.14.0", - "react-intl": "^5.10.6", + "react-intl": "^5.10.9", "react-markings": "^1.3.0", "react-spring": "^8.0.27", - "react-syntax-highlighter": "^15.3.1", + "react-syntax-highlighter": "^15.4.3", "styled-components": "^5.2.1", "styled-normalize": "^8.0.7", "styled-system": "^5.1.5" }, "devDependencies": { - "@types/node": "^14.14.10", - "@types/react": "^16.9.46", - "@types/styled-components": "^5.1.4", + "@types/node": "^14.14.14", + "@types/react": "^17.0.0", + "@types/styled-components": "^5.1.6", "@types/styled-system": "^5.1.10", "babel-plugin-styled-components": "^1.12.0", - "typescript": "^4.1.2" + "typescript": "^4.1.3" }, "license": "ISC" } diff --git a/docs/yarn.lock b/docs/yarn.lock index 09d3559..722fe9a 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -100,12 +100,12 @@ dependencies: "@babel/highlight" "^7.10.4" -"@babel/generator@^7.11.0": - version "7.11.4" - resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.11.4.tgz#1ec7eec00defba5d6f83e50e3ee72ae2fee482be" - integrity sha512-Rn26vueFx0eOoz7iifCN2UHT6rGtnkSGWSoDRIy8jZN3B91PzeSULbswfLoOWuTuAcNwpG/mxy+uCTDnZ9Mp1g== +"@babel/generator@^7.12.10": + version "7.12.10" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.12.10.tgz#2b188fc329fb8e4f762181703beffc0fe6df3460" + integrity sha512-6mCdfhWgmqLdtTkhXjnIz0LcdVCd26wS2JXRtj2XY0u5klDsXBREA/pG5NVOuVnF2LUrBGNFtQkIqqTbblg0ww== dependencies: - "@babel/types" "^7.11.0" + "@babel/types" "^7.12.10" jsesc "^2.5.1" source-map "^0.5.0" @@ -160,11 +160,16 @@ chalk "^2.0.0" js-tokens "^4.0.0" -"@babel/parser@^7.10.4", "@babel/parser@^7.11.0": +"@babel/parser@^7.10.4": version "7.11.4" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.11.4.tgz#6fa1a118b8b0d80d0267b719213dc947e88cc0ca" integrity sha512-MggwidiH+E9j5Sh8pbrX5sJvMcsqS5o+7iB42M9/k0CD63MjYbdP4nhSh7uB5wnv2/RVzTZFTxzF/kIa5mrCqA== +"@babel/parser@^7.12.10": + version "7.12.10" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.10.tgz#824600d59e96aea26a5a2af5a9d812af05c3ae81" + integrity sha512-PJdRPwyoOqFAWfLytxrWwGrAxghCgh/yTNCYciOz8QgjflA7aZhECPZAa2VUedKg2+QMWkI0L9lynh2SNmNEgA== + "@babel/runtime@7.12.5": version "7.12.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e" @@ -189,16 +194,16 @@ "@babel/types" "^7.10.4" "@babel/traverse@^7.4.5": - version "7.11.0" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.11.0.tgz#9b996ce1b98f53f7c3e4175115605d56ed07dd24" - integrity sha512-ZB2V+LskoWKNpMq6E5UUCrjtDUh5IOTAyIl0dTjIEoXum/iKWkoIEKIRDnUucO6f+2FzNkE0oD4RLKoPIufDtg== + version "7.12.10" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.10.tgz#2d1f4041e8bf42ea099e5b2dc48d6a594c00017a" + integrity sha512-6aEtf0IeRgbYWzta29lePeYSk+YAFIC3kyqESeft8o5CkFlYIMX+EQDDWEiAQ9LHOA3d0oHdgrSsID/CKqXJlg== dependencies: "@babel/code-frame" "^7.10.4" - "@babel/generator" "^7.11.0" + "@babel/generator" "^7.12.10" "@babel/helper-function-name" "^7.10.4" "@babel/helper-split-export-declaration" "^7.11.0" - "@babel/parser" "^7.11.0" - "@babel/types" "^7.11.0" + "@babel/parser" "^7.12.10" + "@babel/types" "^7.12.10" debug "^4.1.0" globals "^11.1.0" lodash "^4.17.19" @@ -221,6 +226,15 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" +"@babel/types@^7.12.10": + version "7.12.10" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.10.tgz#7965e4a7260b26f09c56bcfcb0498af1f6d9b260" + integrity sha512-sf6wboJV5mGyip2hIpDSKsr80RszPinEFjsHTalMxZAZkoQ2/2yQzxlcFN52SJqsyPfLtPmenL4g2KB3KJXPDw== + dependencies: + "@babel/helper-validator-identifier" "^7.10.4" + lodash "^4.17.19" + to-fast-properties "^2.0.0" + "@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.8": version "0.8.8" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" @@ -250,51 +264,51 @@ dependencies: tslib "^2.0.1" -"@formatjs/intl-datetimeformat@3.1.0": - version "3.1.0" - resolved "https://registry.yarnpkg.com/@formatjs/intl-datetimeformat/-/intl-datetimeformat-3.1.0.tgz#d0f73a4b6147d23e08eb152c72ae06d1b0da0d9d" - integrity sha512-XKyDQ3xFgZK2w8GE2v+zE0nk/JqGKFE0UxTI716mp/+OVuws+dbQPiORfSrJceH7E3ZkfGrvO0BB8sksQNsZ+w== +"@formatjs/intl-datetimeformat@3.2.1": + version "3.2.1" + resolved "https://registry.yarnpkg.com/@formatjs/intl-datetimeformat/-/intl-datetimeformat-3.2.1.tgz#f20408cda0e932f2234ecb42fca1e90d2e75250d" + integrity sha512-teeUgUoieP0JjZYPWjJV72CoPQoukCMKGW1YUu00+TaHzZBNqVgPCdFJo2vgl1jKccOAT3VT79BHNEsR9DsBBQ== dependencies: "@formatjs/ecma402-abstract" "1.5.0" tslib "^2.0.1" -"@formatjs/intl-displaynames@4.0.1": - version "4.0.1" - resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-4.0.1.tgz#bb6a4e7881e666907e916da6a0cb5d532d93edc0" - integrity sha512-vhG9y+F0BudHU9ev0O9Tc5Uwz/MAcCzbBzceSnjcoUMyLLfFN6GSPBvU6+ocxWsfjhu/yL5ja+doZdhwDcSXrA== +"@formatjs/intl-displaynames@4.0.2": + version "4.0.2" + resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-4.0.2.tgz#31212238e7b07daa41fbac03186c532cbbb6c473" + integrity sha512-rOlDcFzr6UFYqH7BKI9vlpDC5MpTT48dsPxO9I6yciDlOb1IyqvIgUs+xsuNOj96akDCDrgwocrdJ1VEDO0Ntw== dependencies: "@formatjs/ecma402-abstract" "1.5.0" tslib "^2.0.1" -"@formatjs/intl-listformat@5.0.1": - version "5.0.1" - resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-5.0.1.tgz#25994d06acc81a2a0eaae9ac59e7a2fa851be8f0" - integrity sha512-x1gqI3xvTn8uTY0W+bL4ySW/5HFeQXkNNfsdoaRtX2b/HNa4fZoU1EaA6koAk9gUAWSR5Ofe1Ps49CXaMvwcTg== +"@formatjs/intl-listformat@5.0.2": + version "5.0.2" + resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-5.0.2.tgz#090055c437bf7176a7268a285f5d06fc7e963280" + integrity sha512-Y+7/Dw3oe29kT4afbw2KCSzast6M04ibidBMMPqjxOHHxan1LeL0KQsY/iRHTgTAcfiSIqZnneJZjZi4MzjLJg== dependencies: "@formatjs/ecma402-abstract" "1.5.0" tslib "^2.0.1" -"@formatjs/intl-relativetimeformat@8.0.0": - version "8.0.0" - resolved "https://registry.yarnpkg.com/@formatjs/intl-relativetimeformat/-/intl-relativetimeformat-8.0.0.tgz#e7234f165932a22ca6faf015b53bf7a53dbe5350" - integrity sha512-GKJvd2+Sx0BJqsKt2rBbkgGAwfBjKVnvlRTZQ+OhgSEOeRBHOtaub1jUx8ScQoS5Xe0RFLvTLL2LSnajg6EXkw== +"@formatjs/intl-relativetimeformat@8.0.1": + version "8.0.1" + resolved "https://registry.yarnpkg.com/@formatjs/intl-relativetimeformat/-/intl-relativetimeformat-8.0.1.tgz#9fcad0dba673cf0e21b4b9f83dab22ca6b482901" + integrity sha512-yMCtrDeQnqx95ucaYbHc1BP4XUP0q+JoMiP8kzMe04AgVvkfAScsoRuKfXw1EH1FkV51C/vqWIKDoGj1WoZnxQ== dependencies: "@formatjs/ecma402-abstract" "1.5.0" tslib "^2.0.1" -"@formatjs/intl@1.4.10": - version "1.4.10" - resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-1.4.10.tgz#0b9b9970649630f7904f7ff930da3cdc8a897d17" - integrity sha512-CwbOmAnM2QKBUs6Eps1ry0YBe9nIQgQp9xQyxth/0BjJ8zRE3gIUzdNrLNCZ41nHuNPVFJRRIX79+yu5l+A56w== +"@formatjs/intl@1.4.13": + version "1.4.13" + resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-1.4.13.tgz#634e8e7d29385ade5cf7e7c0ba8aae63e585cba0" + integrity sha512-GEWwkaNFnskOGGd6gq0Y0RetiH2iNnARXzQ+glR2RqU0xk00aS5KpwkEDo1hN9NaO9fRr9UDvzDoEu9foQFVmA== dependencies: "@formatjs/ecma402-abstract" "1.5.0" - "@formatjs/intl-datetimeformat" "3.1.0" - "@formatjs/intl-displaynames" "4.0.1" - "@formatjs/intl-listformat" "5.0.1" - "@formatjs/intl-relativetimeformat" "8.0.0" + "@formatjs/intl-datetimeformat" "3.2.1" + "@formatjs/intl-displaynames" "4.0.2" + "@formatjs/intl-listformat" "5.0.2" + "@formatjs/intl-relativetimeformat" "8.0.1" fast-memoize "^2.5.2" - intl-messageformat "9.3.20" - intl-messageformat-parser "6.0.18" + intl-messageformat "9.4.0" + intl-messageformat-parser "6.1.0" tslib "^2.0.1" "@hapi/accept@5.0.1": @@ -463,10 +477,10 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0" integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw== -"@types/node@^14.14.10": - version "14.14.10" - resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.10.tgz#5958a82e41863cfc71f2307b3748e3491ba03785" - integrity sha512-J32dgx2hw8vXrSbu4ZlVhn1Nm3GbeCFNw2FWL8S5QKucHGY0cyNwjdQdO+KMBZ4wpmC7KhLCiNsdk1RFRIYUQQ== +"@types/node@^14.14.14": + version "14.14.14" + resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.14.tgz#f7fd5f3cc8521301119f63910f0fb965c7d761ae" + integrity sha512-UHnOPWVWV1z+VV8k6L1HhG7UbGBgIdghqF3l9Ny9ApPghbjICXkUJSd/b9gOgQfjM1r+37cipdw/HJ3F6ICEnQ== "@types/prop-types@*": version "15.7.3" @@ -480,7 +494,7 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^16.9.46": +"@types/react@*": version "16.9.46" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.46.tgz#f0326cd7adceda74148baa9bff6e918632f5069e" integrity sha512-dbHzO3aAq1lB3jRQuNpuZ/mnu+CdD3H0WVaaBQA8LTT3S33xhVBUj232T8M3tAhSWJs/D/UqORYUlJNl/8VQZg== @@ -488,10 +502,18 @@ "@types/prop-types" "*" csstype "^3.0.2" -"@types/styled-components@^5.1.4": - version "5.1.4" - resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.4.tgz#11f167dbde268635c66adc89b5a5db2e69d75384" - integrity sha512-78f5Zuy0v/LTQNOYfpH+CINHpchzMMmAt9amY2YNtSgsk1TmlKm8L2Wijss/mtTrsUAVTm2CdGB8VOM65vA8xg== +"@types/react@^17.0.0": + version "17.0.0" + resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.0.tgz#5af3eb7fad2807092f0046a1302b7823e27919b8" + integrity sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw== + dependencies: + "@types/prop-types" "*" + csstype "^3.0.2" + +"@types/styled-components@^5.1.6": + version "5.1.6" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.6.tgz#b47460f1684072576999955b5b5153e6f238622c" + integrity sha512-YN1j99dOL92T+76qhQcrPUb2nKZLzawko9j3IIwTHdKloMx20WwcGkBwdpbi8SpAkTc362rgfIllqPdSUplmRw== dependencies: "@types/hoist-non-react-statics" "*" "@types/react" "*" @@ -2141,14 +2163,14 @@ fragment-cache@^0.2.1: dependencies: map-cache "^0.2.2" -framer-motion@^2.9.5: - version "2.9.5" - resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-2.9.5.tgz#bbb185325d531c57f494cf3f6cf7719fc2c225c7" - integrity sha512-epSX4Co1YbDv0mjfHouuY0q361TpHE7WQzCp/xMTilxy4kXd+Z23uJzPVorfzbm1a/9q1Yu8T5bndaw65NI4Tg== +framer-motion@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-3.0.0.tgz#71f786ca15ff2c6fa471eb7bcfed57169aae1b0b" + integrity sha512-jCFbtemYiEdjh6snaT9lrTEEbWKYzUNAuckzWx2R/sYa8IDGpWGb/aV5qm1sn4/sgiVGZKnPj25Gzsny/pJxcQ== dependencies: framesync "^4.1.0" hey-listen "^1.0.8" - popmotion "9.0.0-rc.20" + popmotion "9.0.1" style-value-types "^3.1.9" tslib "^1.10.0" optionalDependencies: @@ -2364,10 +2386,10 @@ hey-listen@^1.0.5, hey-listen@^1.0.8: resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68" integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q== -highlight.js@^10.1.1, highlight.js@~10.1.0: - version "10.1.2" - resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.1.2.tgz#c20db951ba1c22c055010648dfffd7b2a968e00c" - integrity sha512-Q39v/Mn5mfBlMff9r+zzA+gWxRsCRKwEMvYTiisLr/XUiFI/4puWt0Ojdko3R3JCNWGdOWaA5g/Yxqa23kC5AA== +highlight.js@^10.4.1, highlight.js@~10.4.0: + version "10.4.1" + resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.4.1.tgz#d48fbcf4a9971c4361b3f95f302747afe19dbad0" + integrity sha512-yR5lWvNz7c85OhVAEAeFhVCc/GV4C30Fjzc/rCP0aCWzc1UUOPUk55dK/qdwTZHBvMZo+eZ2jpk62ndX/xMFlg== hmac-drbg@^1.0.0: version "1.0.1" @@ -2491,21 +2513,21 @@ ini@~1.3.0: resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927" integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw== -intl-messageformat-parser@6.0.18: - version "6.0.18" - resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-6.0.18.tgz#bf2855b82b0749e1f34e452f0a15d08d3277c8c7" - integrity sha512-vLjACEunfi5uSUCWFLOR4PXQ9DGLpED3tM7o9zsYsOvjl0VIheoxyG0WZXnsnhn+S+Zu158M6CkuHXeNZfKRRg== +intl-messageformat-parser@6.1.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-6.1.0.tgz#134328151c41592d9e1a61f5c6779c06c8eb3f08" + integrity sha512-nPPh2kOrKqlh4D9bCAetxkrUiq5/6S1exPQyg52Ihusy0ECNGhZ0Qmq8pFRK9gWIuiQPVmLA7eSNp8diC2tX3w== dependencies: "@formatjs/ecma402-abstract" "1.5.0" tslib "^2.0.1" -intl-messageformat@9.3.20: - version "9.3.20" - resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-9.3.20.tgz#87ec7e5f7a0f5d13157dc8bed88fe37b4c57b2a1" - integrity sha512-jmpjYHE076J/0CIofrPhtUC4LfmsAhuv4JMQxytl2KJd2bim+3+gQJh+Z1vyHUzcj4fIHdt388ZGchb8f0NwOA== +intl-messageformat@9.4.0: + version "9.4.0" + resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-9.4.0.tgz#b9c9c00a6e88a8f1ffd9ee3e54340c9dfb765d13" + integrity sha512-zcF8OWG52dCwwePkykqqv7F038vCaixPR14Lr3YUFc9jRdGoCazl2dTE3BwBaeHr3pG/qYb6A/mwMKrj4LFt9Q== dependencies: fast-memoize "^2.5.2" - intl-messageformat-parser "6.0.18" + intl-messageformat-parser "6.1.0" tslib "^2.0.1" is-accessor-descriptor@^0.1.6: @@ -2843,13 +2865,13 @@ loose-envify@^1.1.0, loose-envify@^1.4.0: dependencies: js-tokens "^3.0.0 || ^4.0.0" -lowlight@^1.14.0: - version "1.14.0" - resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.14.0.tgz#83ebc143fec0f9e6c0d3deffe01be129ce56b108" - integrity sha512-N2E7zTM7r1CwbzwspPxJvmjAbxljCPThTFawEX2Z7+P3NGrrvY54u8kyU16IY4qWfoVIxY8SYCS8jTkuG7TqYA== +lowlight@^1.17.0: + version "1.17.0" + resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.17.0.tgz#a1143b2fba8239df8cd5893f9fe97aaf8465af4a" + integrity sha512-vmtBgYKD+QVNy7tIa7ulz5d//Il9R4MooOVh4nkOf9R9Cb/Dk5TXMSTieg/vDulkBkIWj59/BIlyFQxT9X1oAQ== dependencies: fault "^1.0.0" - highlight.js "~10.1.0" + highlight.js "~10.4.0" lru-cache@6.0.0: version "6.0.0" @@ -3440,10 +3462,10 @@ pnp-webpack-plugin@1.6.4: dependencies: ts-pnp "^1.1.6" -popmotion@9.0.0-rc.20: - version "9.0.0-rc.20" - resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.0.0-rc.20.tgz#f3550042ae31957b5416793ae8723200951ad39d" - integrity sha512-f98sny03WuA+c8ckBjNNXotJD4G2utG/I3Q23NU69OEafrXtxxSukAaJBxzbtxwDvz3vtZK69pu9ojdkMoBNTg== +popmotion@9.0.1: + version "9.0.1" + resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.0.1.tgz#63657089c124ffad500c45e6eb20b8e3cca919af" + integrity sha512-pXBHRaLz/WBlatXb0ADPGXksqr24z24z1H2/xTtsin9E6dJ0bGK1nWyZpcvdjDIIf8XxAkbf3/FN3JxayVmFbQ== dependencies: framesync "^4.1.0" hey-listen "^1.0.8" @@ -3729,21 +3751,21 @@ react-dom@^16.14.0: prop-types "^15.6.2" scheduler "^0.19.1" -react-intl@^5.10.6: - version "5.10.6" - resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-5.10.6.tgz#064dd69f3e96434f9145cac0b21c5a47f3ac6088" - integrity sha512-IWhPTGGggs/n/OKkhEHAZ7rCfQ8m/2hmYIwJtOPuNQVyKKU+R863q4xP/+uCW1NOXB+yvbF2p7CB/v2hkuEVCA== +react-intl@^5.10.9: + version "5.10.9" + resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-5.10.9.tgz#cab8d9445059d3544cffc762c3e6af47ef9bc8ad" + integrity sha512-DfUF4YMlZqaNRfgfvf46AcXxz7pDi7pkxRbQoimUJWEkjep+6QYLlH7ogypysGD1Sl5kbWi7b69bbG7wPqt1vA== dependencies: "@formatjs/ecma402-abstract" "1.5.0" - "@formatjs/intl" "1.4.10" - "@formatjs/intl-displaynames" "4.0.1" - "@formatjs/intl-listformat" "5.0.1" - "@formatjs/intl-relativetimeformat" "8.0.0" + "@formatjs/intl" "1.4.13" + "@formatjs/intl-displaynames" "4.0.2" + "@formatjs/intl-listformat" "5.0.2" + "@formatjs/intl-relativetimeformat" "8.0.1" "@types/hoist-non-react-statics" "^3.3.1" fast-memoize "^2.5.2" hoist-non-react-statics "^3.3.2" - intl-messageformat "9.3.20" - intl-messageformat-parser "6.0.18" + intl-messageformat "9.4.0" + intl-messageformat-parser "6.1.0" shallow-equal "^1.2.1" tslib "^2.0.1" @@ -3773,14 +3795,14 @@ react-spring@^8.0.27: "@babel/runtime" "^7.3.1" prop-types "^15.5.8" -react-syntax-highlighter@^15.3.1: - version "15.3.1" - resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.3.1.tgz#ba16ae8705f191956b73d0e11ae938fd255f2579" - integrity sha512-XVQuug7kQ4/cWxiYE0XfGXvbDqLLqRsMK/GpmD3v1WOLzb6REcgkL59cJo0m3Y2LB0eoRCNhV62jqQe9/Z0p9w== +react-syntax-highlighter@^15.4.3: + version "15.4.3" + resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.4.3.tgz#fffe3286677ac470b963b364916d16374996f3a6" + integrity sha512-TnhGgZKXr5o8a63uYdRTzeb8ijJOgRGe0qjrE0eK/gajtdyqnSO6LqB3vW16hHB0cFierYSoy/AOJw8z1Dui8g== dependencies: "@babel/runtime" "^7.3.1" - highlight.js "^10.1.1" - lowlight "^1.14.0" + highlight.js "^10.4.1" + lowlight "^1.17.0" prismjs "^1.22.0" refractor "^3.2.0" @@ -4671,10 +4693,10 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= -typescript@^4.1.2: - version "4.1.2" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.2.tgz#6369ef22516fe5e10304aae5a5c4862db55380e9" - integrity sha512-thGloWsGH3SOxv1SoY7QojKi0tc+8FnOmiarEGMbd/lar7QOEd3hvlx3Fp5y6FlDUGl9L+pd4n2e+oToGMmhRQ== +typescript@^4.1.3: + version "4.1.3" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.3.tgz#519d582bd94cba0cf8934c7d8e8467e473f53bb7" + integrity sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg== union-value@^1.0.0: version "1.0.1" From b53bd5fe43835d1f15efb7399c0504f85423ce7f Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Sat, 19 Dec 2020 13:53:20 +1100 Subject: [PATCH 12/16] add loading spinners --- docs/components/Global/Loader.tsx | 83 +++++++++++++++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 docs/components/Global/Loader.tsx diff --git a/docs/components/Global/Loader.tsx b/docs/components/Global/Loader.tsx new file mode 100644 index 0000000..46bb211 --- /dev/null +++ b/docs/components/Global/Loader.tsx @@ -0,0 +1,83 @@ +import styled, { keyframes } from 'styled-components'; + +const rotateClockwise = keyframes` + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +`; + +const rotateCounterClockwise = keyframes` + from { + transform: rotate(0deg); + } + to { + transform: rotate(-360deg); + } +`; + +export const Spinner = styled.div` + width: 48px; + height: 48px; + border: 3px solid red; + border-radius: 50%; + display: inline-block; + position: relative; + animation: ${rotateClockwise} 1s linear infinite; + + &::after { + content: ''; + display: block; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 56px; + height: 56px; + border-radius: 50%; + border: 3px solid transparent; + } + + ${({ theme }) => ` + border: 3px solid ${theme.colors.primary}; + &::after { + border-bottom-color: ${theme.colors.primary}; + } + `} +`; + +export const DottedSpinner = styled.div` + width: 48px; + height: 48px; + border-radius: 50%; + display: inline-block; + position: relative; + animation: ${rotateClockwise} 2s linear infinite; + + &:after { + content: ''; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + width: 24px; + height: 24px; + border-radius: 50%; + animation: ${rotateCounterClockwise} 1s linear infinite; + transform-origin: center center; + } + + ${({ theme }) => ` + border: 3px dotted ${theme.colors.primary}; + border-style: solid solid dotted dotted; + + &::after { + border: 3px dotted ${theme.colors.primary}; + border-style: solid solid dotted; + } + `} +`; From 1a72df61df3aa7417381b2158d6fbd6b2338996b Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Sat, 19 Dec 2020 13:59:06 +1100 Subject: [PATCH 13/16] Navigation - Create new MobileNv - Create new DesktopNav - Add new Home, Close, Usage, Utilities, Components Icons for mobile nav - Create new slider component for nav - Add new useMatchMedia hook - Update Docs page to use new navigation --- docs/components/Nav/Desktop/DesktopNav.tsx | 10 +- .../Nav/Desktop/{styles.tsx => styles.ts} | 4 +- docs/components/Nav/Desktop/typings.ts | 12 -- docs/components/Nav/Mobile/MobileNav.tsx | 28 ++- .../Nav/Mobile/NavSlides/NavSlides.tsx | 97 +++++++++ .../Nav/Mobile/NavSlides/Slider/Slider.tsx | 185 ++++++++++++++++++ .../Nav/Mobile/NavSlides/Slider/styles.ts | 26 +++ .../Nav/Mobile/NavSlides/Slider/typings.ts | 29 +++ .../Nav/Mobile/NavSlides/Slider/utils.ts | 29 +++ .../components/Nav/Mobile/NavSlides/index.tsx | 1 + .../components/Nav/Mobile/NavSlides/styles.ts | 54 +++++ docs/components/Nav/Mobile/Navbar/Navbar.tsx | 50 +++++ docs/components/Nav/Mobile/Navbar/index.tsx | 1 + docs/components/Nav/Mobile/Navbar/styles.ts | 39 ++++ docs/components/Nav/Mobile/context.tsx | 4 + .../components/Nav/Mobile/icons/CloseIcon.tsx | 34 ++++ .../Nav/Mobile/icons/ComponentsIcon.tsx | 30 +++ docs/components/Nav/Mobile/icons/HomeIcon.tsx | 32 +++ .../components/Nav/Mobile/icons/UsageIcon.tsx | 48 +++++ .../Nav/Mobile/icons/UtilitiesIcon.tsx | 42 ++++ docs/components/Nav/Mobile/icons/index.tsx | 5 + docs/components/Nav/Mobile/styles.ts | 15 ++ docs/components/Nav/Mobile/typings.ts | 8 + docs/components/Nav/constants.ts | 49 +++-- docs/components/Nav/typings.ts | 13 ++ docs/hooks/index.ts | 3 + docs/hooks/useMatchMedia.ts | 26 +++ docs/hooks/useOnClickOutOfBounds.ts | 20 ++ docs/hooks/useOutsideClick.tsx | 17 -- docs/hooks/useWindowSize.ts | 46 +++++ docs/pages/docs.tsx | 27 ++- 31 files changed, 920 insertions(+), 64 deletions(-) rename docs/components/Nav/Desktop/{styles.tsx => styles.ts} (99%) create mode 100644 docs/components/Nav/Mobile/NavSlides/NavSlides.tsx create mode 100644 docs/components/Nav/Mobile/NavSlides/Slider/Slider.tsx create mode 100644 docs/components/Nav/Mobile/NavSlides/Slider/styles.ts create mode 100644 docs/components/Nav/Mobile/NavSlides/Slider/typings.ts create mode 100644 docs/components/Nav/Mobile/NavSlides/Slider/utils.ts create mode 100644 docs/components/Nav/Mobile/NavSlides/index.tsx create mode 100644 docs/components/Nav/Mobile/NavSlides/styles.ts create mode 100644 docs/components/Nav/Mobile/Navbar/Navbar.tsx create mode 100644 docs/components/Nav/Mobile/Navbar/index.tsx create mode 100644 docs/components/Nav/Mobile/Navbar/styles.ts create mode 100644 docs/components/Nav/Mobile/context.tsx create mode 100644 docs/components/Nav/Mobile/icons/CloseIcon.tsx create mode 100644 docs/components/Nav/Mobile/icons/ComponentsIcon.tsx create mode 100644 docs/components/Nav/Mobile/icons/HomeIcon.tsx create mode 100644 docs/components/Nav/Mobile/icons/UsageIcon.tsx create mode 100644 docs/components/Nav/Mobile/icons/UtilitiesIcon.tsx create mode 100644 docs/components/Nav/Mobile/icons/index.tsx create mode 100644 docs/components/Nav/Mobile/styles.ts create mode 100644 docs/components/Nav/Mobile/typings.ts create mode 100644 docs/components/Nav/typings.ts create mode 100644 docs/hooks/index.ts create mode 100644 docs/hooks/useMatchMedia.ts create mode 100644 docs/hooks/useOnClickOutOfBounds.ts delete mode 100644 docs/hooks/useOutsideClick.tsx create mode 100644 docs/hooks/useWindowSize.ts diff --git a/docs/components/Nav/Desktop/DesktopNav.tsx b/docs/components/Nav/Desktop/DesktopNav.tsx index 1ecdbea..41590dc 100644 --- a/docs/components/Nav/Desktop/DesktopNav.tsx +++ b/docs/components/Nav/Desktop/DesktopNav.tsx @@ -11,10 +11,14 @@ export function DesktopNav() { - {links.map(({ children, route, name }, i) => { + {Object.keys(links).map((key, i) => { return ( - - + + ); })} diff --git a/docs/components/Nav/Desktop/styles.tsx b/docs/components/Nav/Desktop/styles.ts similarity index 99% rename from docs/components/Nav/Desktop/styles.tsx rename to docs/components/Nav/Desktop/styles.ts index 54be039..5d3549c 100644 --- a/docs/components/Nav/Desktop/styles.tsx +++ b/docs/components/Nav/Desktop/styles.ts @@ -50,7 +50,7 @@ export const ChildLinkContainer = styled.li` left: 0; transform: translateY(-50%); } - + &::after { position: absolute; top: 0; @@ -64,7 +64,7 @@ export const ChildLinkContainer = styled.li` &::after { height: calc(50% - 0.5em); } - } + } `} `; diff --git a/docs/components/Nav/Desktop/typings.ts b/docs/components/Nav/Desktop/typings.ts index e6a6138..ce94f44 100644 --- a/docs/components/Nav/Desktop/typings.ts +++ b/docs/components/Nav/Desktop/typings.ts @@ -1,15 +1,3 @@ -export type LinkItem = { - route?: string; - name: string; - component: string; -}; - -export type LinkItems = Array< - { - children?: LinkItem[]; - } & LinkItem ->; - export type LinkProps = { hasChildren: boolean; }; diff --git a/docs/components/Nav/Mobile/MobileNav.tsx b/docs/components/Nav/Mobile/MobileNav.tsx index dc06237..a071565 100644 --- a/docs/components/Nav/Mobile/MobileNav.tsx +++ b/docs/components/Nav/Mobile/MobileNav.tsx @@ -1,3 +1,29 @@ +import { useState } from 'react'; +import { MobileNavContext } from './context'; +import { NavSlides } from './NavSlides'; +import { Navbar } from './Navbar'; +import { NavContainer } from './styles'; + export function MobileNav() { - return
Mobile
; + const [panelOpen, setPanelOpen] = useState(false); + const [selectedNavOption, setSelectedNavOption] = useState(''); + const [viewIndex, setViewIndex] = useState(1); + + return ( + + + + + + + ); } diff --git a/docs/components/Nav/Mobile/NavSlides/NavSlides.tsx b/docs/components/Nav/Mobile/NavSlides/NavSlides.tsx new file mode 100644 index 0000000..96f9ca2 --- /dev/null +++ b/docs/components/Nav/Mobile/NavSlides/NavSlides.tsx @@ -0,0 +1,97 @@ +import { useContext } from 'react'; +import { useRouter } from 'next/router'; +import { links } from '../../constants'; +import { MobileNavContext } from '../context'; + +import { + NavMenu, + NavMenuPanel, + CloseButtonContainer, + MenuTitle, + NavLink +} from './styles'; + +import { Slider } from './Slider/Slider'; +import { CloseIcon } from '../icons'; + +const navMenuVariants = { + open: { + y: 0, + opacity: 0.95 + }, + closed: { + y: '-100%', + opacity: 0 + } +}; + +const closeMenuVariants = { + open: { + scale: 1 + }, + closed: { + scale: 0 + } +}; + +export function NavSlides() { + const router = useRouter(); + const { panelOpen, setPanelOpen, viewIndex, setViewIndex } = useContext( + MobileNavContext + ); + + const navPanelContent = Object.keys(links).reduce((acc, key) => { + if (!!links[key].children) { + acc[key] = links[key].children; + } + + return acc; + }, {}); + + const onClickLink = (route: string) => (e: React.SyntheticEvent) => { + e.preventDefault(); + + setPanelOpen(false); + + setTimeout(() => { + router.push(route); + }, 200); + }; + + const onClickCloseMenu = () => { + setPanelOpen(false); + }; + + return ( + + + + + + + {Object.keys(navPanelContent).map(key => { + return ( + + {key} + {navPanelContent[key].map(({ route, name }) => { + return ( + + {name} + + ); + })} + + ); + })} + + + ); +} diff --git a/docs/components/Nav/Mobile/NavSlides/Slider/Slider.tsx b/docs/components/Nav/Mobile/NavSlides/Slider/Slider.tsx new file mode 100644 index 0000000..802a4ed --- /dev/null +++ b/docs/components/Nav/Mobile/NavSlides/Slider/Slider.tsx @@ -0,0 +1,185 @@ +import * as React from 'react'; +import { CarouselContainer, CarouselSlides, CarouselSlide } from './styles'; +import { + SlidePosition, + SliderProps, + MovementDirection, + IsMouseDown +} from './typings'; + +import { getDevicePosition } from './utils'; + +export function Slider({ + children, + onChangeViewIndex, + viewIndex, + slideTransition, + slideAnimation, + slideContainerTransition, + disabled = false, + className, + disableSlideDiff, + wrapperRef +}: SliderProps) { + const THRESHOLD = 35; + + const initialPositionState = { + initial: { + x: 0, + y: 0 + }, + current: { + x: 0, + y: 0 + } + }; + + const [position, setPosition] = React.useState( + initialPositionState + ); + + const [isMouseDown, setIsMouseDown] = React.useState(false); + + const [moveDirection, setMoveDirection] = React.useState( + '' + ); + + const slides = typeof children === 'function' ? children(position) : children; + + React.useEffect(() => { + setPosition({ ...position }); + }, [viewIndex]); + + React.useEffect(() => { + setMoveDirection(getMovementDirection()); + }, [position.current]); + + const callbackOnMove = { + left() { + if (viewIndex > 0) { + onChangeViewIndex(viewIndex - 1); + } + }, + + right() { + if (viewIndex < React.Children.count(slides) - 1) { + onChangeViewIndex(viewIndex + 1); + } + } + }; + + const getMovementDirection = (): MovementDirection => { + const { initial, current } = position; + + if (initial.x > current.x + THRESHOLD) { + return 'right'; + } + + if (initial.x < current.x - THRESHOLD) { + return 'left'; + } + + return ''; + }; + + const onMouseDown = (e: React.MouseEvent | React.TouchEvent) => { + if (!disabled) { + const { x, y } = getDevicePosition(e); + + setIsMouseDown(true); + setPosition({ + initial: { x, y }, + current: { x, y } + }); + } + }; + + const onMouseMove = (e: React.MouseEvent | React.TouchEvent) => { + (isMouseDown || !disabled) && + setPosition({ + ...position, + current: { ...getDevicePosition(e) } + }); + }; + + const onMouseUp = () => { + !!callbackOnMove[moveDirection] && callbackOnMove[moveDirection](); + + setIsMouseDown(false); + setPosition(initialPositionState); + }; + + const resetState = (e: React.MouseEvent) => { + if (!!moveDirection) { + e.stopPropagation(); + e.preventDefault(); + + setIsMouseDown(false); + setPosition(initialPositionState); + } + }; + + const animateSlide = (slideIndex: number) => { + const defaultSlideAnimation = { + x: 0, + slideIndex + }; + + return !disableSlideDiff + ? animateSlideWithCallback( + getPositionXanimationValue(defaultSlideAnimation) + ) + : {}; + }; + + const getPositionXanimationValue = (config: any) => { + return !!moveDirection && config.slideIndex !== viewIndex && isMouseDown + ? { ...config, x: position.current.x - position.initial.x } + : config; + }; + + const animateSlideWithCallback = (config: any) => { + return { + x: config.x, + ...(slideAnimation?.(position, config.slideIndex) || {}) + }; + }; + + return ( + + + {React.Children.map(slides, (child, index) => { + const animate = animateSlide(index); + + return ( + + {child} + + ); + })} + + + ); +} diff --git a/docs/components/Nav/Mobile/NavSlides/Slider/styles.ts b/docs/components/Nav/Mobile/NavSlides/Slider/styles.ts new file mode 100644 index 0000000..0ee91f6 --- /dev/null +++ b/docs/components/Nav/Mobile/NavSlides/Slider/styles.ts @@ -0,0 +1,26 @@ +import styled from 'styled-components'; +import { motion, Transition } from 'framer-motion'; + +export const CarouselContainer = styled.div` + display: flex; + flex: 1 0 0%; + position: relative; + white-space: nowrap; +`; + +export const CarouselSlides = styled(motion.div)` + width: 100%; + height: 100%; + display: flex; +`; + +export const CarouselSlide = styled(motion.div)` + display: inline-flex; + flex-grow: 1; + flex-shrink: 0; + width: 100%; + height: 100%; + white-space: normal; + opacity: 1; + transition: inherit; +`; diff --git a/docs/components/Nav/Mobile/NavSlides/Slider/typings.ts b/docs/components/Nav/Mobile/NavSlides/Slider/typings.ts new file mode 100644 index 0000000..b5d2244 --- /dev/null +++ b/docs/components/Nav/Mobile/NavSlides/Slider/typings.ts @@ -0,0 +1,29 @@ +import { TargetAndTransition, Transition } from 'framer-motion'; + +export type SlidePosition = { + initial?: { x: number; y: number }; + current?: { x: number; y: number }; +}; + +export type IsMouseDown = boolean; + +export type MovementDirection = 'left' | 'right' | ''; + +export type SliderProps = { + onChangeViewIndex?: (index: number) => void; + viewIndex?: number; + disabled?: boolean; + slideAnimation?: ( + position: SlidePosition, + slideIndex: number + ) => TargetAndTransition; + slideTransition?: Transition; + slideContainerTransition?: Transition; + className?: string; + disableSlideDiff?: boolean; + wrapperRef?: React.Ref; + children?: + | ((position: SlidePosition) => React.ReactElement | React.ReactElement[]) + | React.ReactElement + | React.ReactElement[]; +}; diff --git a/docs/components/Nav/Mobile/NavSlides/Slider/utils.ts b/docs/components/Nav/Mobile/NavSlides/Slider/utils.ts new file mode 100644 index 0000000..cbbdf04 --- /dev/null +++ b/docs/components/Nav/Mobile/NavSlides/Slider/utils.ts @@ -0,0 +1,29 @@ +import React from 'react'; + +export function getDevicePosition( + e: React.MouseEvent | React.TouchEvent +): { x: number; y: number } { + return { + x: getDevicePositionX(e), + y: getDevicePositionY(e) + }; +} + +export const getDevicePositionX = getDevicePositionByOrientation.bind( + this, + 'X' +); + +export const getDevicePositionY = getDevicePositionByOrientation.bind( + this, + 'Y' +); + +export function getDevicePositionByOrientation( + orientation: 'X' | 'Y', + e: React.MouseEvent | React.TouchEvent +): number { + return (e as React.TouchEvent).changedTouches + ? (e as React.TouchEvent).changedTouches[0][`client${orientation}`] + : (e as React.MouseEvent)[`page${orientation}`]; +} diff --git a/docs/components/Nav/Mobile/NavSlides/index.tsx b/docs/components/Nav/Mobile/NavSlides/index.tsx new file mode 100644 index 0000000..ed6e792 --- /dev/null +++ b/docs/components/Nav/Mobile/NavSlides/index.tsx @@ -0,0 +1 @@ +export { NavSlides } from './NavSlides'; diff --git a/docs/components/Nav/Mobile/NavSlides/styles.ts b/docs/components/Nav/Mobile/NavSlides/styles.ts new file mode 100644 index 0000000..ce61c46 --- /dev/null +++ b/docs/components/Nav/Mobile/NavSlides/styles.ts @@ -0,0 +1,54 @@ +import styled from 'styled-components'; +import { motion } from 'framer-motion'; +import { AnchorLink } from '../../../AnchorLink'; + +export const NavMenu = styled(motion.div)` + position: relative; +`; + +export const NavMenuPanel = styled(motion.div)` + display: flex; + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + + ${({ theme }) => ` + background: ${theme.colors.primary}; + `} +`; + +export const MenuTitle = styled.p` + display: inline-block; + margin: 0 auto 2em; + padding-bottom: 0.5em; + + ${({ theme }) => ` + color: ${theme.colors.white}; + border-bottom: 1px solid ${theme.colors.white}; + `} +`; + +export const NavLink = styled(AnchorLink)` + margin: 0 auto; + width: auto; + font-size: 1.25rem; + margin-bottom: 1em; + + ${({ theme }) => ` + color: ${theme.colors.white}; + `}; +`; + +export const CloseButtonContainer = styled(motion.div)` + position: absolute; + width: 30px; + height: 30px; + background: white; + border-radius: 50%; + top: 1em; + right: 1em; + padding: 0.5em; + z-index: 1; +`; diff --git a/docs/components/Nav/Mobile/Navbar/Navbar.tsx b/docs/components/Nav/Mobile/Navbar/Navbar.tsx new file mode 100644 index 0000000..10648ba --- /dev/null +++ b/docs/components/Nav/Mobile/Navbar/Navbar.tsx @@ -0,0 +1,50 @@ +import { useContext } from 'react'; +import { useRouter } from 'next/router'; +import { links } from '../../constants'; +import { MobileNavContext } from '../context'; +import * as Icons from '../icons'; +import { NavMenuContainer, NavCategoryButton, NavCategory } from './styles'; + +export function Navbar() { + const router = useRouter(); + const { setPanelOpen, setViewIndex } = useContext(MobileNavContext); + + const onClickNavCategory = (navOption: string, navIndex: number) => ( + e: React.SyntheticEvent + ) => { + e.preventDefault(); + + if (navOption !== 'Home') { + setPanelOpen(true); + setViewIndex(navIndex); + } else { + setPanelOpen(false); + + setTimeout(() => { + router.push(links.Home.route); + }, 200); + } + }; + + return ( + + {Object.keys(links).map(key => { + const Icon = Icons[`${links[key].name}Icon`]; + + return ( + + {!!Icon && } + + {links[key].name} + + + ); + })} + + ); +} diff --git a/docs/components/Nav/Mobile/Navbar/index.tsx b/docs/components/Nav/Mobile/Navbar/index.tsx new file mode 100644 index 0000000..ec1cfd7 --- /dev/null +++ b/docs/components/Nav/Mobile/Navbar/index.tsx @@ -0,0 +1 @@ +export { Navbar } from './Navbar'; diff --git a/docs/components/Nav/Mobile/Navbar/styles.ts b/docs/components/Nav/Mobile/Navbar/styles.ts new file mode 100644 index 0000000..b3ab29a --- /dev/null +++ b/docs/components/Nav/Mobile/Navbar/styles.ts @@ -0,0 +1,39 @@ +import styled from 'styled-components'; + +export const NavMenuContainer = styled.div` + position: fixed; + bottom: 0; + left: 0; + width: 100%; + z-index: 1; + height: 60px; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + + ${({ theme }) => ` + box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.05); + background: ${theme.colors.white}; + `} +`; + +export const NavCategoryButton = styled.button` + font-size: 0.6rem; + border: none; + outline: none; + appearance: none; + background: transparent; + + ${({ theme }) => ` + color: ${theme.colors.primary}; + `} +`; + +export const NavCategory = styled.div` + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +`; diff --git a/docs/components/Nav/Mobile/context.tsx b/docs/components/Nav/Mobile/context.tsx new file mode 100644 index 0000000..7b0b005 --- /dev/null +++ b/docs/components/Nav/Mobile/context.tsx @@ -0,0 +1,4 @@ +import { createContext } from 'react'; +import { MobileNavContextType } from './typings'; + +export const MobileNavContext = createContext(null); diff --git a/docs/components/Nav/Mobile/icons/CloseIcon.tsx b/docs/components/Nav/Mobile/icons/CloseIcon.tsx new file mode 100644 index 0000000..f1c6631 --- /dev/null +++ b/docs/components/Nav/Mobile/icons/CloseIcon.tsx @@ -0,0 +1,34 @@ +export function CloseIcon() { + return ( + + + + + + + + + + + + ); +} diff --git a/docs/components/Nav/Mobile/icons/ComponentsIcon.tsx b/docs/components/Nav/Mobile/icons/ComponentsIcon.tsx new file mode 100644 index 0000000..a8addc3 --- /dev/null +++ b/docs/components/Nav/Mobile/icons/ComponentsIcon.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { SVGwrapper } from '../styles'; + +export function ComponentsIcon() { + return ( + + + + + + + + + + + + ); +} diff --git a/docs/components/Nav/Mobile/icons/HomeIcon.tsx b/docs/components/Nav/Mobile/icons/HomeIcon.tsx new file mode 100644 index 0000000..d2ea47c --- /dev/null +++ b/docs/components/Nav/Mobile/icons/HomeIcon.tsx @@ -0,0 +1,32 @@ +import { SVGwrapper } from '../styles'; + +export function HomeIcon() { + return ( + + + + + + + + + ); +} diff --git a/docs/components/Nav/Mobile/icons/UsageIcon.tsx b/docs/components/Nav/Mobile/icons/UsageIcon.tsx new file mode 100644 index 0000000..64140b7 --- /dev/null +++ b/docs/components/Nav/Mobile/icons/UsageIcon.tsx @@ -0,0 +1,48 @@ +import { SVGwrapper } from '../styles'; + +export function UsageIcon() { + return ( + + + + + + + + + + + + + + + ); +} diff --git a/docs/components/Nav/Mobile/icons/UtilitiesIcon.tsx b/docs/components/Nav/Mobile/icons/UtilitiesIcon.tsx new file mode 100644 index 0000000..7df0fe7 --- /dev/null +++ b/docs/components/Nav/Mobile/icons/UtilitiesIcon.tsx @@ -0,0 +1,42 @@ +import { SVGwrapper } from '../styles'; +import { theme } from '../../../../theme'; + +export function UtilitiesIcon() { + return ( + + + + + + + + + + + + + + + + ); +} diff --git a/docs/components/Nav/Mobile/icons/index.tsx b/docs/components/Nav/Mobile/icons/index.tsx new file mode 100644 index 0000000..658763a --- /dev/null +++ b/docs/components/Nav/Mobile/icons/index.tsx @@ -0,0 +1,5 @@ +export { HomeIcon } from './HomeIcon'; +export { UsageIcon } from './UsageIcon'; +export { ComponentsIcon } from './ComponentsIcon'; +export { UtilitiesIcon } from './UtilitiesIcon'; +export { CloseIcon } from './CloseIcon'; diff --git a/docs/components/Nav/Mobile/styles.ts b/docs/components/Nav/Mobile/styles.ts new file mode 100644 index 0000000..ea17726 --- /dev/null +++ b/docs/components/Nav/Mobile/styles.ts @@ -0,0 +1,15 @@ +import styled from 'styled-components'; + +export const NavContainer = styled.div` + position: fixed; + top: 0; + left: 0; + z-index: 1; +`; + +export const SVGwrapper = styled.svg` + display: block; + width: 26px; + height: 26px; + padding-bottom: 5px; +`; diff --git a/docs/components/Nav/Mobile/typings.ts b/docs/components/Nav/Mobile/typings.ts new file mode 100644 index 0000000..b80ce12 --- /dev/null +++ b/docs/components/Nav/Mobile/typings.ts @@ -0,0 +1,8 @@ +export type MobileNavContextType = { + panelOpen: boolean; + selectedNavOption: string; + viewIndex: number; + setPanelOpen: React.Dispatch>; + setSelectedNavOption: React.Dispatch>; + setViewIndex: React.Dispatch>; +}; diff --git a/docs/components/Nav/constants.ts b/docs/components/Nav/constants.ts index c55f47e..4445909 100644 --- a/docs/components/Nav/constants.ts +++ b/docs/components/Nav/constants.ts @@ -1,19 +1,37 @@ -import { LinkItems } from './Desktop/typings'; +import { LinkItems } from './typings'; -export const links: LinkItems = [ - { +export const links: LinkItems = { + Home: { route: '/', component: 'Home', name: 'Home' }, - { - route: '/docs?content=getting-started', - component: 'GettingStarted', - name: 'Getting Started' + Usage: { + component: 'Usage', + name: 'Usage', + mobileNavIndex: 0, + children: [ + { + route: '/docs?content=getting-started', + component: 'GettingStarted', + name: 'Getting Started' + }, + { + route: '/docs?content=customisation', + component: 'Cusomisation', + name: 'Cusomisation' + }, + { + route: '/docs?content=variants', + component: 'Variants', + name: 'Variants' + } + ] }, - { + Components: { component: 'Components', name: 'Components', + mobileNavIndex: 1, children: [ { route: '/docs?content=block', @@ -42,9 +60,10 @@ export const links: LinkItems = [ } ] }, - { + Utilities: { component: 'Utilities', name: 'Utilities', + mobileNavIndex: 2, children: [ { route: '/docs?content=media', @@ -57,15 +76,5 @@ export const links: LinkItems = [ name: 'Generator' } ] - }, - { - route: '/docs?content=customisation', - component: 'Cusomisation', - name: 'Cusomisation' - }, - { - route: '/docs?content=variants', - component: 'Variants', - name: 'Variants' } -]; +}; diff --git a/docs/components/Nav/typings.ts b/docs/components/Nav/typings.ts new file mode 100644 index 0000000..9ce0a8d --- /dev/null +++ b/docs/components/Nav/typings.ts @@ -0,0 +1,13 @@ +export type LinkItem = { + route?: string; + name: string; + component: string; +}; + +export type LinkItems = Record< + string, + { + children?: LinkItem[]; + mobileNavIndex?: number; + } & LinkItem +>; diff --git a/docs/hooks/index.ts b/docs/hooks/index.ts new file mode 100644 index 0000000..e507ff8 --- /dev/null +++ b/docs/hooks/index.ts @@ -0,0 +1,3 @@ +export { useOnClickOutOfBounds } from './useOnClickOutOfBounds'; +export { useWindowSize } from './useWindowSize'; +export { useMatchMedia } from './useMatchMedia'; diff --git a/docs/hooks/useMatchMedia.ts b/docs/hooks/useMatchMedia.ts new file mode 100644 index 0000000..3fdcff0 --- /dev/null +++ b/docs/hooks/useMatchMedia.ts @@ -0,0 +1,26 @@ +import { useRef, useState, useCallback, useEffect } from 'react'; + +export function useMatchMedia(query: string) { + const matchListRef = useRef(null); + const [isMatch, setIsMatch] = useState(false); + const onMediaQueryListEvent = useCallback((e: MediaQueryListEvent) => { + setIsMatch(e.matches); + }, []); + + useEffect(() => { + matchListRef.current = window.matchMedia(query); + matchListRef.current.addEventListener('change', onMediaQueryListEvent); + setIsMatch(matchListRef.current.matches); + + return () => { + if (matchListRef.current) { + matchListRef.current.removeEventListener( + 'change', + onMediaQueryListEvent + ); + } + }; + }, [query]); + + return isMatch; +} diff --git a/docs/hooks/useOnClickOutOfBounds.ts b/docs/hooks/useOnClickOutOfBounds.ts new file mode 100644 index 0000000..3bfa605 --- /dev/null +++ b/docs/hooks/useOnClickOutOfBounds.ts @@ -0,0 +1,20 @@ +import { useEffect, RefObject } from 'react'; + +export function useOnClickOutOfBounds( + ref: RefObject, + callback: () => void +) { + const handleClick = (e: Event) => { + if (ref.current && !ref.current.contains(e.target as Node)) { + callback(); + } + }; + + useEffect(() => { + document.addEventListener('click', handleClick); + + return () => { + document.removeEventListener('click', handleClick); + }; + }); +} diff --git a/docs/hooks/useOutsideClick.tsx b/docs/hooks/useOutsideClick.tsx deleted file mode 100644 index 8169174..0000000 --- a/docs/hooks/useOutsideClick.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { useEffect } from 'react'; - -export function useOutsideClick(ref, callback) { - const handleClick = e => { - if (ref.current && !ref.current.contains(e.target)) { - callback(); - } - }; - - useEffect(() => { - document.addEventListener('click', handleClick); - - return () => { - document.removeEventListener('click', handleClick); - }; - }); -} diff --git a/docs/hooks/useWindowSize.ts b/docs/hooks/useWindowSize.ts new file mode 100644 index 0000000..f461e2c --- /dev/null +++ b/docs/hooks/useWindowSize.ts @@ -0,0 +1,46 @@ +import { useState, useEffect } from 'react'; + +type WindowSize = { + innerHeight: number; + innerWidth: number; + outerHeight: number; + outerWidth: number; +}; + +export function useWindowSize() { + let [windowSize, setWindowSize] = useState(getSize()); + + function getSize() { + if (typeof window !== 'undefined') { + return { + innerHeight: window.innerHeight, + innerWidth: window.innerWidth, + outerHeight: window.outerHeight, + outerWidth: window.outerWidth + }; + } else { + console.error('ReferenceError: typeof window is undefined'); + + return { + innerHeight: 0, + innerWidth: 0, + outerHeight: 0, + outerWidth: 0 + }; + } + } + + function handleResize() { + setWindowSize(getSize()); + } + + useEffect(() => { + window.addEventListener('resize', handleResize); + + return function unmountUseWindowSize() { + window.removeEventListener('resize', handleResize); + }; + }, []); + + return windowSize; +} diff --git a/docs/pages/docs.tsx b/docs/pages/docs.tsx index 38582c2..677ab51 100644 --- a/docs/pages/docs.tsx +++ b/docs/pages/docs.tsx @@ -4,9 +4,12 @@ import { Layout } from '../components/Global/Layout'; import { useRouter } from 'next/router'; import { content } from '../containers'; import { DesktopNav } from '../components/Nav/Desktop/DesktopNav'; +import { MobileNav } from '../components/Nav/Mobile/MobileNav'; +import { useMatchMedia } from '../hooks'; export default function Docs() { const router = useRouter(); + const matchedMobile = useMatchMedia('(hover: none)'); const [contentQuery, setContentQuery] = React.useState( 'getting-started' ); @@ -21,16 +24,22 @@ export default function Docs() { return ( - - - - + <> + {matchedMobile && } - - {!!PageContent && } - {!PageContent &&

Page Not Found

} - - + + {!matchedMobile && ( + + + + )} + + + {!!PageContent && } + {!PageContent &&

Page Not Found

} + + + ); } From 471a3f9493596683830d665591e17e4d428687bf Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Sat, 19 Dec 2020 13:59:21 +1100 Subject: [PATCH 14/16] update LogoContainer --- docs/components/Global/Brand/styles.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/components/Global/Brand/styles.tsx b/docs/components/Global/Brand/styles.tsx index 0306f7a..a6845d3 100644 --- a/docs/components/Global/Brand/styles.tsx +++ b/docs/components/Global/Brand/styles.tsx @@ -1,8 +1,7 @@ import styled from 'styled-components'; -import { BlockBase } from 'artifak'; import { BrandProps } from './typings'; -export const LogoContainer = styled(BlockBase)` +export const LogoContainer = styled.div` display: flex; justify-content: ${({ position }) => position}; `; From f15e853ff61a7f57890fcf5a43f3f2606dc93b1d Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Sun, 20 Dec 2020 13:18:20 +1100 Subject: [PATCH 15/16] fix mobile nav menu panel width --- docs/components/Nav/Mobile/NavSlides/styles.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/components/Nav/Mobile/NavSlides/styles.ts b/docs/components/Nav/Mobile/NavSlides/styles.ts index ce61c46..03bb820 100644 --- a/docs/components/Nav/Mobile/NavSlides/styles.ts +++ b/docs/components/Nav/Mobile/NavSlides/styles.ts @@ -4,19 +4,19 @@ import { AnchorLink } from '../../../AnchorLink'; export const NavMenu = styled(motion.div)` position: relative; + + ${({ theme }) => ` + background: ${theme.colors.primary}; + `} `; export const NavMenuPanel = styled(motion.div)` display: flex; - width: 100%; + width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; - - ${({ theme }) => ` - background: ${theme.colors.primary}; - `} `; export const MenuTitle = styled.p` From ea0725cfc4eeafc81ebc4099f9e118c39061773c Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Sun, 20 Dec 2020 13:34:00 +1100 Subject: [PATCH 16/16] add source and docs link on NavTop --- docs/components/Global/NavTop/NavTop.tsx | 13 +++++++++++-- docs/components/Global/NavTop/styles.ts | 17 +++++++++++++++++ 2 files changed, 28 insertions(+), 2 deletions(-) diff --git a/docs/components/Global/NavTop/NavTop.tsx b/docs/components/Global/NavTop/NavTop.tsx index 20c4273..9ef2ed4 100644 --- a/docs/components/Global/NavTop/NavTop.tsx +++ b/docs/components/Global/NavTop/NavTop.tsx @@ -1,6 +1,15 @@ import React from 'react'; -import { NavTopContainer } from './styles'; +import { NavTopContainer, NavTopMenu, NavTopLink } from './styles'; export function NavTop() { - return ; + return ( + + + + Github + + Docs + + + ); } diff --git a/docs/components/Global/NavTop/styles.ts b/docs/components/Global/NavTop/styles.ts index e066dce..ddd039f 100644 --- a/docs/components/Global/NavTop/styles.ts +++ b/docs/components/Global/NavTop/styles.ts @@ -1,9 +1,26 @@ import styled from 'styled-components'; +import { AnchorLink } from '../../AnchorLink'; + +export const NavTopMenu = styled.nav` + display: flex; + align-items: center; + justify-content: flex-end; + height: 100%; + padding: 0 1.5rem; +`; + +export const NavTopLink = styled(AnchorLink)` + position: relative; + z-index: 1; + color: white; + margin-right: 15px; +`; export const NavTopContainer = styled.div` position: relative; width: 100%; height: 60px; + ${({ theme }) => ` background-color: ${theme.colors.primary}; background-image: repeating-linear-gradient(