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/generator/createBaseComponentsUsage.ts b/docs/codeExamples/generator/createBaseComponentsUsage.ts deleted file mode 100644 index 887cd36..0000000 --- a/docs/codeExamples/generator/createBaseComponentsUsage.ts +++ /dev/null @@ -1,31 +0,0 @@ -export const createBaseComponentsUsage = ` - import { position, PositionProps } from 'styled-system'; - import { createStyledComponent, createBaseComponents } from 'artifak'; - - // Create your base component - const BaseComponent = createStyledComponent( - { position: 'relative' }, {}, [position], 'article' - ); - - // Define your styles - const styles = { - Article1: { - margin: 0, - }, - - Article2: { - margin: 15px - }, - - Article3: { - margin: 15px - } - }; - - // And put it all here - export const { - Article1, - Article2, - Article3 - } = createBaseComponents(BaseComponent, styles); -`; diff --git a/docs/codeExamples/generator/createStyledComponentUsage.ts b/docs/codeExamples/generator/createStyledComponentUsage.ts deleted file mode 100644 index 2d9b985..0000000 --- a/docs/codeExamples/generator/createStyledComponentUsage.ts +++ /dev/null @@ -1,7 +0,0 @@ -export const createStyledComponentUsage = ` - import { position, PositionProps } from 'styled-system'; - - const StyledArticle = createStyledComponent( - { position: 'relative' }, {}, [position], 'article' - ); -`; diff --git a/docs/components/APIheading.tsx b/docs/components/APIheading.tsx index 8de3efe..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 './Syntax'; +import { Params } from './Code/Params'; import { theme } from '../theme'; type Props = { @@ -17,13 +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/Code/ParamsDescription.tsx b/docs/components/Code/ParamsDescription.tsx new file mode 100644 index 0000000..a212c6f --- /dev/null +++ b/docs/components/Code/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/Code/ParamsTable.tsx b/docs/components/Code/ParamsTable.tsx new file mode 100644 index 0000000..83b7450 --- /dev/null +++ b/docs/components/Code/ParamsTable.tsx @@ -0,0 +1,76 @@ +import React from 'react'; +import { FlexRow, FlexCol } from 'artifak'; +import { + H4, + Paragraph, + Strong, + SmallParagraph, + SmallLead +} from '../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} + + + ); + })} +
+ ); +} diff --git a/docs/components/Syntax.tsx b/docs/components/Code/Syntax.tsx similarity index 59% rename from docs/components/Syntax.tsx rename to docs/components/Code/Syntax.tsx index 2730b6a..08e3b58 100644 --- a/docs/components/Syntax.tsx +++ b/docs/components/Code/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/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/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..a6845d3 --- /dev/null +++ b/docs/components/Global/Brand/styles.tsx @@ -0,0 +1,7 @@ +import styled from 'styled-components'; +import { BrandProps } from './typings'; + +export const LogoContainer = styled.div` + 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/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 81% rename from docs/components/Dropdown/Dropdown.tsx rename to docs/components/Global/Dropdown/Dropdown.tsx index 7a3ed16..17e96bd 100644 --- a/docs/components/Dropdown/Dropdown.tsx +++ b/docs/components/Global/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/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 92% rename from docs/components/Dropdown/components/Options.tsx rename to docs/components/Global/Dropdown/components/Options.tsx index e21d4ea..3778924 100644 --- a/docs/components/Dropdown/components/Options.tsx +++ b/docs/components/Global/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/Global/Dropdown/components/OptionsList.tsx similarity index 87% rename from docs/components/Dropdown/components/OptionsList.tsx rename to docs/components/Global/Dropdown/components/OptionsList.tsx index e552229..6316a66 100644 --- a/docs/components/Dropdown/components/OptionsList.tsx +++ b/docs/components/Global/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/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 80% rename from docs/components/Dropdown/typings.ts rename to docs/components/Global/Dropdown/typings.ts index 8bb0f51..47553bf 100644 --- a/docs/components/Dropdown/typings.ts +++ b/docs/components/Global/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/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/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/Global/Header/index.tsx b/docs/components/Global/Header/index.tsx new file mode 100644 index 0000000..a37f8c7 --- /dev/null +++ b/docs/components/Global/Header/index.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { Brand } from '../Brand'; +import { Tagline } from '../Tagline'; +import { HeaderContainer } from './styles'; +import { GetStartedButton } from './styles'; + +export function Header() { + return ( + + + + Get Started + + ); +} 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/Layout.tsx b/docs/components/Global/Layout.tsx similarity index 88% rename from docs/components/Layout.tsx rename to docs/components/Global/Layout.tsx index 81c340d..e42cbc2 100644 --- a/docs/components/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/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; + } + `} +`; diff --git a/docs/components/Global/NavTop/NavTop.tsx b/docs/components/Global/NavTop/NavTop.tsx new file mode 100644 index 0000000..9ef2ed4 --- /dev/null +++ b/docs/components/Global/NavTop/NavTop.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { NavTopContainer, NavTopMenu, NavTopLink } from './styles'; + +export function NavTop() { + return ( + + + + Github + + Docs + + + ); +} 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 65% rename from docs/components/NavTop/NavTop.tsx rename to docs/components/Global/NavTop/styles.ts index 4141588..ddd039f 100644 --- a/docs/components/NavTop/NavTop.tsx +++ b/docs/components/Global/NavTop/styles.ts @@ -1,14 +1,26 @@ -import React from 'react'; import styled from 'styled-components'; +import { AnchorLink } from '../../AnchorLink'; -export function NavTop() { - return -} +export const NavTopMenu = styled.nav` + display: flex; + align-items: center; + justify-content: flex-end; + height: 100%; + padding: 0 1.5rem; +`; -const NavTopContainer = styled.div` +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( @@ -37,6 +49,4 @@ const NavTopContainer = styled.div` rgba(241, 94, 34, 1) 8px ); } - -` - +`; diff --git a/docs/components/Global/Tagline/Tagline.tsx b/docs/components/Global/Tagline/Tagline.tsx new file mode 100644 index 0000000..130b2ee --- /dev/null +++ b/docs/components/Global/Tagline/Tagline.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { Paragraph } from '../../Typography'; +import { TaglineProps } from './typings'; + +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/Header/Brand.tsx b/docs/components/Header/Brand.tsx deleted file mode 100644 index 227b544..0000000 --- a/docs/components/Header/Brand.tsx +++ /dev/null @@ -1,46 +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/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/components/Header/index.tsx b/docs/components/Header/index.tsx deleted file mode 100644 index 6036caa..0000000 --- a/docs/components/Header/index.tsx +++ /dev/null @@ -1,88 +0,0 @@ -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', - selected: false, - key: 'modules' - }, - { - id: 'block', - title: 'Block', - selected: false, - key: 'modules' - }, - { - id: 'grid', - title: 'Grid', - selected: false, - key: 'modules' - }, - { - id: 'flex', - title: 'Flex', - selected: false, - key: 'modules' - }, - { - id: 'typography', - title: 'Typography', - selected: false, - key: 'modules' - }, - { - id: 'imagery', - title: 'Imagery', - selected: false, - key: 'modules' - }, - { - id: 'generator', - title: 'Generator', - selected: false, - key: 'modules' - }, - { - id: 'media', - title: 'Media', - selected: false, - key: 'modules' - }, - { - id: 'variants', - title: 'Variants', - selected: false, - key: 'modules' - }, - { - id: 'customisation', - title: 'Customisation', - selected: false, - key: 'modules' - } -]; - -export function Header() { - return ( - - - - - - ); -} - -const HeaderContainer = styled.header` - padding: 2em 0 0; - - ${({ theme }) => ` - @media(min-width: ${theme.breakpoints[0]}) { - padding: 5em 0 0; - } - `} -`; 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; +}; diff --git a/docs/components/Nav/Desktop/DesktopNav.tsx b/docs/components/Nav/Desktop/DesktopNav.tsx new file mode 100644 index 0000000..41590dc --- /dev/null +++ b/docs/components/Nav/Desktop/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/Nav/Desktop/DesktopNavLink.tsx b/docs/components/Nav/Desktop/DesktopNavLink.tsx new file mode 100644 index 0000000..a36b81e --- /dev/null +++ b/docs/components/Nav/Desktop/DesktopNavLink.tsx @@ -0,0 +1,44 @@ +import { + Link, + NavContainer, + ChildLinkContainer, + LinkItem, + Counter, + LinkCount +} from './styles'; + +export function DesktopNavLink({ children, link, name }) { + return ( + <> + + {name} + + + {!!children && ( + + {children.map(({ route, name, children }, i) => { + i += 1; + return ( + + + + {`0${i}`.slice(-2)} + + + + + ); + })} + + )} + + ); +} diff --git a/docs/components/Nav/Desktop/styles.ts b/docs/components/Nav/Desktop/styles.ts new file mode 100644 index 0000000..5d3549c --- /dev/null +++ b/docs/components/Nav/Desktop/styles.ts @@ -0,0 +1,95 @@ +import styled from 'styled-components'; +import { AnchorLink } from '../../AnchorLink'; +import { LinkProps } from './typings'; + +export const Link = styled(AnchorLink)` + display: block; +`; + +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/Nav/Desktop/typings.ts b/docs/components/Nav/Desktop/typings.ts new file mode 100644 index 0000000..ce94f44 --- /dev/null +++ b/docs/components/Nav/Desktop/typings.ts @@ -0,0 +1,9 @@ +export type LinkProps = { + hasChildren: boolean; +}; + +export type DesktopNavLinkProps = { + children; + link; + name; +}; diff --git a/docs/components/Nav/Mobile/MobileNav.tsx b/docs/components/Nav/Mobile/MobileNav.tsx new file mode 100644 index 0000000..a071565 --- /dev/null +++ b/docs/components/Nav/Mobile/MobileNav.tsx @@ -0,0 +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() { + 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..03bb820 --- /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; + + ${({ theme }) => ` + background: ${theme.colors.primary}; + `} +`; + +export const NavMenuPanel = styled(motion.div)` + display: flex; + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; +`; + +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 new file mode 100644 index 0000000..4445909 --- /dev/null +++ b/docs/components/Nav/constants.ts @@ -0,0 +1,80 @@ +import { LinkItems } from './typings'; + +export const links: LinkItems = { + Home: { + route: '/', + component: 'Home', + name: 'Home' + }, + 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', + 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' + } + ] + }, + Utilities: { + component: 'Utilities', + name: 'Utilities', + mobileNavIndex: 2, + children: [ + { + route: '/docs?content=media', + component: 'Media', + name: 'Media' + }, + { + route: '/docs?content=generator', + component: 'Generator', + name: 'Generator' + } + ] + } +}; 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/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/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.tsx deleted file mode 100644 index ee798f6..0000000 --- a/docs/containers/Generator.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { Paragraph, Strong } from '../components/Typography'; -import { Syntax } from '../components/Syntax'; - -import { - createStyledComponentUsage, - createBaseComponentsUsage -} from '../codeExamples/generator'; - -import { HR } from '../components/HR'; -import { ArticleDoc } from '../components/ArticleDoc'; -import { APIheading } from '../components/APIheading'; - -export function Generator() { - return ( - - - - ); -} - -export function GeneratorContent() { - return ( - <> - - The component-generator library or generator for short, comprises of 2 - utility functions namely createStyledComponent and -   - createBaseComponents. 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. - - -
- - - - 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). - - - {createStyledComponentUsage} - -
- - - - createBaseComponents, as implied, would generate a bunch of styled - components in accordance to the styles that you provide. This would - require a base styled component. - - - {createBaseComponentsUsage} - - ); -} diff --git a/docs/containers/Generator/Generator.tsx b/docs/containers/Generator/Generator.tsx new file mode 100644 index 0000000..152a591 --- /dev/null +++ b/docs/containers/Generator/Generator.tsx @@ -0,0 +1,138 @@ +import { Paragraph, Strong } from '../../components/Typography'; +import { Syntax } from '../../components/Code/Syntax'; +import { ParamsTable } from '../../components/Code/ParamsTable'; +import { + createStyledComponentUsage, + createBaseComponentsUsage +} from './examples'; +import { HR } from '../../components/Global/HR'; +import { Doc } from '../../components/Article'; +import { APIheading } from '../../components/APIheading'; + +export function Generator() { + return ( + + + + ); +} + +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 ( + <> + + 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. + + + + 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. + + +
+ + ' + }} + /> + + '} + 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. + + + {createStyledComponentUsage} + +
+ + > | StyledSystemCSSObject }' + }} + /> + + > | StyledSystemCSSObject'} + cells={createBaseComponentsCells} + /> + + + createBaseComponents, as implied, would generate a bunch of styled + components in accordance to the styles that you provide. This would + require a base styled component. + + + {createBaseComponentsUsage} + + ); +} diff --git a/docs/containers/Generator/examples/createBaseComponentsUsage.ts b/docs/containers/Generator/examples/createBaseComponentsUsage.ts new file mode 100644 index 0000000..f6fd268 --- /dev/null +++ b/docs/containers/Generator/examples/createBaseComponentsUsage.ts @@ -0,0 +1,51 @@ +export const createBaseComponentsUsage = ` + import { position, PositionProps } from 'styled-system'; + import { createStyledComponent, createBaseComponents } from 'artifak'; + + // Create your base component + const BaseComponent = createStyledComponent({ + styles: { position: 'relative' } + styleProps: [position] + }); + + // Define your styles + const config = { + Container: { + styles: { + margin: 0 auto, + padding: ['1em', '1.5em 1em'], + width: '100%', + maxWidth: ['320px', '768px', '996px', '1200px'] + }, + attrs: { + role: 'region' + } + }, + + UnpaddedContainer: { + styles: { + padding: 0 + }, + attrs: { + role: 'region' + } + }, + + FlexContainer: { + styles: { + display: 'flex', + padding: ['1em', '1.5em 1em'], + } + attrs: { + role: 'region' + } + } + }; + + // And put it all here + export const { + Container, + UnpaddedContainer, + FlexContainer + } = createBaseComponents(BaseComponent, config); +`; diff --git a/docs/containers/Generator/examples/createStyledComponentUsage.ts b/docs/containers/Generator/examples/createStyledComponentUsage.ts new file mode 100644 index 0000000..819f468 --- /dev/null +++ b/docs/containers/Generator/examples/createStyledComponentUsage.ts @@ -0,0 +1,18 @@ +export const createStyledComponentUsage = ` + import { position, PositionProps } from 'styled-system'; + + // 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/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 new file mode 100644 index 0000000..4f427dd --- /dev/null +++ b/docs/containers/GettingStarted/GettingStarted.tsx @@ -0,0 +1,27 @@ +import { Doc } from '../../components/Article'; +import { HR } from '../../components/Global/HR'; +import { Building, Variants, Setup, Installation, Theming } from './content'; + +export function GettingStarted() { + return ( + + + + ); +} + +export function GettingStartedContent() { + return ( + <> + +
+ +
+ +
+ +
+ + + ); +} diff --git a/docs/containers/GettingStarted/content/Building.tsx b/docs/containers/GettingStarted/content/Building.tsx new file mode 100644 index 0000000..065e96f --- /dev/null +++ b/docs/containers/GettingStarted/content/Building.tsx @@ -0,0 +1,20 @@ +import { H3, Paragraph } from '../../../components/Typography'; +import { Syntax } from '../../../components/Code/Syntax'; +import { theme } from '../../../theme'; +import { buildExample } from '../examples'; + +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..39e495d --- /dev/null +++ b/docs/containers/GettingStarted/content/Installation.tsx @@ -0,0 +1,15 @@ +import { H3, Paragraph } from '../../../components/Typography'; +import { Syntax } from '../../../components/Code/Syntax'; +import { theme } from '../../../theme'; +import { installationExample } from '../examples'; + +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..495e85d --- /dev/null +++ b/docs/containers/GettingStarted/content/Setup.tsx @@ -0,0 +1,22 @@ +import { H3, Paragraph } from '../../../components/Typography'; +import { Syntax } from '../../../components/Code/Syntax'; +import { theme } from '../../../theme'; +import { setupExample } from '../examples'; + +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..22f1f2d --- /dev/null +++ b/docs/containers/GettingStarted/content/Theming.tsx @@ -0,0 +1,18 @@ +import { H3, Paragraph } from '../../../components/Typography'; +import { Syntax } from '../../../components/Code/Syntax'; +import { theme } from '../../../theme'; +import { themingExample } from '../examples'; + +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..5afccb6 --- /dev/null +++ b/docs/containers/GettingStarted/content/Variants.tsx @@ -0,0 +1,22 @@ +import { H3, Paragraph } from '../../../components/Typography'; +import { Syntax } from '../../../components/Code/Syntax'; +import { theme } from '../../../theme'; +import { variantsExample } from '../examples'; + +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/GettingStarted/examples/build.ts b/docs/containers/GettingStarted/examples/build.ts new file mode 100644 index 0000000..608889a --- /dev/null +++ b/docs/containers/GettingStarted/examples/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/examples/theming.ts b/docs/containers/GettingStarted/examples/theming.ts new file mode 100644 index 0000000..8c3af98 --- /dev/null +++ b/docs/containers/GettingStarted/examples/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/examples/variants.ts b/docs/containers/GettingStarted/examples/variants.ts new file mode 100644 index 0000000..fa9e6a7 --- /dev/null +++ b/docs/containers/GettingStarted/examples/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/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/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 75% rename from docs/codeExamples/media/and.ts rename to docs/containers/Media/examples/and.ts index b2ad78e..57fdb23 100644 --- a/docs/codeExamples/media/and.ts +++ b/docs/containers/Media/examples/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/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 82% rename from docs/codeExamples/media/max.ts rename to docs/containers/Media/examples/max.ts index 5336770..b2b59b8 100644 --- a/docs/codeExamples/media/max.ts +++ b/docs/containers/Media/examples/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/containers/Media/examples/min.ts similarity index 81% rename from docs/codeExamples/media/min.ts rename to docs/containers/Media/examples/min.ts index 4aefcf9..e035763 100644 --- a/docs/codeExamples/media/min.ts +++ b/docs/containers/Media/examples/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/containers/Media/examples/minMax.ts similarity index 78% rename from docs/codeExamples/media/minMax.ts rename to docs/containers/Media/examples/minMax.ts index c874af5..80306f2 100644 --- a/docs/codeExamples/media/minMax.ts +++ b/docs/containers/Media/examples/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/containers/Media/examples/or.ts similarity index 70% rename from docs/codeExamples/media/or.ts rename to docs/containers/Media/examples/or.ts index b8db72a..3b2c0d7 100644 --- a/docs/codeExamples/media/or.ts +++ b/docs/containers/Media/examples/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/containers/Media/examples/single.ts similarity index 83% rename from docs/codeExamples/media/single.ts rename to docs/containers/Media/examples/single.ts index a29becb..4218580 100644 --- a/docs/codeExamples/media/single.ts +++ b/docs/containers/Media/examples/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/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 86% rename from docs/codeExamples/variants/generateWithVariants.ts rename to docs/containers/Variants/examples/generateWithVariants.ts index c64c439..dda8cc1 100644 --- a/docs/codeExamples/variants/generateWithVariants.ts +++ b/docs/containers/Variants/examples/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/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 c4a7db9..366dbbb 100644 --- a/docs/containers/index.tsx +++ b/docs/containers/index.tsx @@ -1,23 +1,23 @@ -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 = { - Introduction, - Block, - Grid, - Typography, - Flex, - Generator, - Imagery, - Media, - Variants, - Customisation + 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/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/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/package.json b/docs/package.json index 0fe4351..335775b 100644 --- a/docs/package.json +++ b/docs/package.json @@ -11,26 +11,28 @@ "dependencies": { "artifak": "^1.1.5", "csstype": "^3.0.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/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 93% rename from docs/containers/Introduction/content/Installation.tsx rename to docs/pages/HomePage/content/Installation.tsx index c667303..297a47a 100644 --- a/docs/containers/Introduction/content/Installation.tsx +++ b/docs/pages/HomePage/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/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/_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 }) { diff --git a/docs/pages/docs.tsx b/docs/pages/docs.tsx new file mode 100644 index 0000000..677ab51 --- /dev/null +++ b/docs/pages/docs.tsx @@ -0,0 +1,45 @@ +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/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' + ); + + React.useEffect(() => { + if (!!router.query && !!router.query.content) { + setContentQuery(router.query.content as string); + } + }, [router.query]); + + const PageContent = content[contentQuery]; + + return ( + + <> + {matchedMobile && } + + + {!matchedMobile && ( + + + + )} + + + {!!PageContent && } + {!PageContent &&

Page Not Found

} + + + + + ); +} diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx index 78a99be..a9732b8 100644 --- a/docs/pages/index.tsx +++ b/docs/pages/index.tsx @@ -1,7 +1,10 @@ import React from 'react'; -import { Layout } from '../components/Layout'; +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/Nav/Desktop/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 && ( + + + + + + + + + + )} + ); } diff --git a/docs/yarn.lock b/docs/yarn.lock index 1cf99e6..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,7 +226,16 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" -"@emotion/is-prop-valid@^0.8.8": +"@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" integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== @@ -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,6 +2163,26 @@ fragment-cache@^0.2.1: dependencies: map-cache "^0.2.2" +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.1" + 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,10 +2381,15 @@ he@1.2.0: resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== -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== +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.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" @@ -2466,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: @@ -2818,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" @@ -3415,6 +3462,16 @@ pnp-webpack-plugin@1.6.4: dependencies: ts-pnp "^1.1.6" +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" + 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" @@ -3694,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" @@ -3738,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" @@ -4334,6 +4391,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 +4646,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" @@ -4623,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"