diff --git a/docs/lib/components/CodeBox/index.tsx b/docs/lib/components/CodeBox/index.tsx index a6e1c194..c9d76399 100644 --- a/docs/lib/components/CodeBox/index.tsx +++ b/docs/lib/components/CodeBox/index.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useState } from 'react'; +import React, { useContext } from 'react'; import { Language } from 'prism-react-renderer'; import { LiveProvider } from 'react-live'; import { mdx, MDXContext } from '@mdx-js/react'; diff --git a/docs/lib/components/CodeBox/use-code-demo.ts b/docs/lib/components/CodeBox/use-code-demo.ts index 5d376e76..9a17965a 100644 --- a/docs/lib/components/CodeBox/use-code-demo.ts +++ b/docs/lib/components/CodeBox/use-code-demo.ts @@ -1,26 +1,4 @@ import { get, cloneDeep } from 'lodash'; -import * as React from 'react'; - -export const useCodeDemo = ({ scope, code: inputCode }) => { - let code = cloneDeep(inputCode?.trim()); - let noInline = false; - - const scopeKeys = Object.keys(scope); - const scopeValues = scopeKeys.map((key) => { - return { [key]: `${key}` }; - }); - - // add 'React' to scopeValues - scopeValues.push({ React: 'React' }); - // convert scopeValues to object - const imports = Object.assign({}, ...scopeValues); - code = transformCode(code, imports); - noInline = code.includes('render'); - return { - code, - noInline, - }; -}; const importRegex = /^(import)\s(?!type(of\s|\s)(?!from)).*?$/gm; const exportDefaultRegex = /export\s+default\s+function\s+\w+\s*\(\s*\)\s*\{/; @@ -63,3 +41,24 @@ export const transformCode = (code: string, imports = {}, compName = 'App') => { return cleanedCode; }; + +export const useCodeDemo = ({ scope, code: inputCode }) => { + let code = cloneDeep(inputCode?.trim()); + let noInline = false; + + const scopeKeys = Object.keys(scope); + const scopeValues = scopeKeys.map((key) => { + return { [key]: `${key}` }; + }); + + // add 'React' to scopeValues + scopeValues.push({ React: 'React' }); + // convert scopeValues to object + const imports = Object.assign({}, ...scopeValues); + code = transformCode(code, imports); + noInline = code.includes('render'); + return { + code, + noInline, + }; +}; diff --git a/docs/lib/components/IconList/IconList.tsx b/docs/lib/components/IconList/IconList.tsx index 6f013f02..4fca782f 100644 --- a/docs/lib/components/IconList/IconList.tsx +++ b/docs/lib/components/IconList/IconList.tsx @@ -1,7 +1,8 @@ +import * as React from 'react'; import * as KubeIcon from '@kubed/icons'; import styled from 'styled-components'; -import { Text, notify, Notify } from "@kubed/components"; -import { useClipboard } from "@kubed/hooks"; +import { Text, notify, Notify } from '@kubed/components'; +import { useClipboard } from '@kubed/hooks'; const Content = styled.div` cursor: pointer; @@ -17,22 +18,25 @@ const Content = styled.div` `; const GridContent = styled.div` display: grid; - grid-template-columns: repeat(auto-fill, 90px); + grid-template-columns: repeat(auto-fill, 120px); grid-gap: 5px; `; const IconList = () => { const icons = Object.entries(KubeIcon); - const { copy } = useClipboard() + const { copy } = useClipboard(); const renderIconList = () => { return icons.map((icon) => { const [iconName, Svg] = icon; return ( - { - const copyElement = `<${iconName}/>` - copy(copyElement) - notify.success(copyElement+ ' copied 🎉') - }}> + { + const copyElement = `<${iconName}/>`; + copy(copyElement); + notify.success(`${copyElement} copied 🎉`); + }} + > {iconName} @@ -40,7 +44,12 @@ const IconList = () => { }); }; - return {renderIconList()}; + return ( + + {renderIconList()} + + + ); }; export default IconList; diff --git a/docs/lib/menuData.ts b/docs/lib/menuData.ts index ea0ea51d..ead276f1 100644 --- a/docs/lib/menuData.ts +++ b/docs/lib/menuData.ts @@ -1,76 +1,76 @@ export default { guide: [ { - title: "Getting Started", - menu: ["Introduction", "Installation", "Changelog"] + title: 'Getting Started', + menu: ['Introduction', 'Installation', 'Changelog'], }, { - title: "Customization", - menu: ["Colors", "Themes"] - } + title: 'Customization', + menu: ['Colors', 'Themes'], + }, ], Icons: [], components: [ { - title: "Layout", - menu: ["Grid", "Group", "Divider", "Container", "Center"] + title: 'Layout', + menu: ['Grid', 'Group', 'Divider', 'Container', 'Center'], }, { - title: "General", - menu: ["Button", "Text"] + title: 'General', + menu: ['Button', 'Text'], }, { - title: "Data Entry", + title: 'Data Entry', menu: [ - "Checkbox", - "DatePicker", - "AutoComplete", - "Input", - "InputNumber", - "Radio", - "Select", - "Slider", - "Switch" - ] + 'Checkbox', + 'DatePicker', + 'AutoComplete', + 'Input', + 'InputNumber', + 'Radio', + 'Select', + 'Slider', + 'Switch', + ], }, { - title: "Data Display", + title: 'Data Display', menu: [ - "Badge", - "Card", - "Popover", - "Tabs", - "Tag", - "Tooltip", - "menu", - "Navs", - "Notify", - "Banner", - "Descriptions", - "Entity", - "Empty", - "Form", - "Dropdown", - "Table" - ] + 'Badge', + 'Card', + 'Popover', + 'Tabs', + 'Tag', + 'Tooltip', + 'menu', + 'Navs', + 'Notify', + 'Banner', + 'Descriptions', + 'Entity', + 'Empty', + 'Form', + 'Dropdown', + 'Table', + ], }, { - title: "Feedback", - menu: ["Alert", "Loading", "LoadingOverlay", "Modal", "StatusDot"] - } + title: 'Feedback', + menu: ['Alert', 'Loading', 'LoadingOverlay', 'Modal', 'StatusDot'], + }, ], hooks: [ { - title: "State Management", - menu: ["useId", "useToggle"] + title: 'State Management', + menu: ['useId', 'useToggle'], }, { - title: "UI and Dom", - menu: ["useClickOutside", "useScrollLock"] + title: 'UI and Dom', + menu: ['useClickOutside', 'useScrollLock'], }, { - title: "Others", - menu: ["useClipboard", "useDidUpdate", "useForceUpdate"] - } - ] + title: 'Others', + menu: ['useClipboard', 'useDidUpdate', 'useForceUpdate'], + }, + ], }; diff --git a/docs/pages/[category]/[slug].tsx b/docs/pages/[category]/[slug].tsx index 31621747..f144af21 100644 --- a/docs/pages/[category]/[slug].tsx +++ b/docs/pages/[category]/[slug].tsx @@ -1,19 +1,19 @@ -import React from "react"; -import Head from "next/head"; -import { MDXRemote } from "next-mdx-remote"; -import styled from "styled-components"; -import { Tabs, Tab } from "@kubed/components"; -import * as Kubed from "@kubed/components"; -import * as KubeIcon from "@kubed/icons"; -import * as KubeHooks from "@kubed/hooks"; -import { serverSideTranslations } from "next-i18next/serverSideTranslations"; -import { getMdxData } from "../../lib/getMdx"; -import { DocLayout } from "../../lib/layouts/DocLayout"; -import MetadataCard from "../../lib/components/MetadataCard"; -import TOC from "../../lib/components/TOC"; -import CodeBox from "../../lib/components/CodeBox"; -import PropsTable from "../../lib/components/PropsTable"; -import IconList from "../../lib/components/IconList/IconList"; +import React from 'react'; +import Head from 'next/head'; +import { MDXRemote } from 'next-mdx-remote'; +import styled from 'styled-components'; +import { Tabs, Tab } from '@kubed/components'; +import * as Kubed from '@kubed/components'; +import * as KubeIcon from '@kubed/icons'; +import * as KubeHooks from '@kubed/hooks'; +import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; +import { getMdxData } from '../../lib/getMdx'; +import { DocLayout } from '../../lib/layouts/DocLayout'; +import MetadataCard from '../../lib/components/MetadataCard'; +import TOC from '../../lib/components/TOC'; +import CodeBox from '../../lib/components/CodeBox'; +import PropsTable from '../../lib/components/PropsTable'; +import IconList from '../../lib/components/IconList/IconList'; const Pre = ({ children }: React.PropsWithChildren) => <>{children}; @@ -23,7 +23,7 @@ const components = { KubeIcon, pre: Pre, code: CodeBox, - IconList + IconList, }; const MainContent = styled.div` @@ -96,7 +96,7 @@ export default function Slug(props: any) { {title} - Kube Design - {group === "components" && ( + {group === 'components' && ( <> )} - {group === "hooks" && ( + {group === 'hooks' && ( <> )} - {group === "guide" && ( + {group === 'guide' && ( <> @@ -147,7 +147,7 @@ export default function Slug(props: any) { )} - {group === "Icons" && ( + {group === 'Icons' && ( <> @@ -173,7 +173,7 @@ export async function getServerSideProps({ params, locale }: Params) { toc, locale, metaData, - ...(await serverSideTranslations(locale, ["common", "menu"])) - } + ...(await serverSideTranslations(locale, ['common', 'menu'])), + }, }; }