Merge pull request #61 from omnifed/60-feature-create-show-component

60 feature create show component

.vscode/settings.json

@@ -9,7 +9,8 @@
     "Shiki",
     "shikijs",
     "tseslint",
-    "Twoslash"
+    "Twoslash",
+    "Unauthenticate"
   ],
   "prettier.configPath": ".prettierrc",
   "prettier.prettierPath": "./node_modules/prettier",

docs/app/components/CodePreview.tsx

@@ -0,0 +1,121 @@
+'use client'
+
+import { useState, type PropsWithChildren, type ReactNode } from 'react'
+import { Show } from '@cerberus-design/react'
+import { Code, CodeHide } from '@cerberus-design/icons'
+import { css } from '@/styled-system/css'
+import { hstack, vstack } from '@/styled-system/patterns'
+
+// TODO: Replace with Badge component
+// TODO: Replace with Button component
+
+const tempBtnStyles = css({
+  alignItems: 'center',
+  display: 'inline-flex',
+  gap: '2',
+})
+
+interface CodePreviewProps {
+  preview: ReactNode
+}
+
+export default function CodePreview(
+  props: PropsWithChildren<CodePreviewProps>,
+) {
+  const [viewCode, setViewCode] = useState<boolean>(false)
+
+  function handleShowCode() {
+    setViewCode(true)
+  }
+
+  function handleHideCode() {
+    setViewCode(false)
+  }
+
+  return (
+    <Show
+      when={viewCode}
+      fallback={
+        <PreviewLayout onShowCode={handleShowCode}>
+          {props.preview}
+        </PreviewLayout>
+      }
+    >
+      <header
+        className={hstack({
+          bgColor: 'neutral.surface.100',
+          justifyContent: 'flex-end',
+          p: '4',
+        })}
+      >
+        <button
+          className={tempBtnStyles}
+          onClick={handleHideCode}
+          type="button"
+        >
+          Hide code
+          <CodeHide aria-hidden size="1.5rem" />
+        </button>
+      </header>
+      {props.children}
+    </Show>
+  )
+}
+
+interface PreviewLayoutProps {
+  onShowCode: () => void
+}
+
+export function PreviewLayout(props: PropsWithChildren<PreviewLayoutProps>) {
+  return (
+    <div>
+      <header
+        className={hstack({
+          justifyContent: 'flex-end',
+          p: '4',
+        })}
+      >
+        <button
+          className={tempBtnStyles}
+          onClick={props.onShowCode}
+          type="button"
+        >
+          Show code
+          <Code aria-hidden size="1.5rem" />
+        </button>
+      </header>
+      <section
+        className={vstack({
+          bgColor: 'info.surface.initial',
+          border: '3px solid',
+          borderColor: 'info.border.initial',
+          borderRadius: 'xl',
+          justify: 'center',
+          mb: '4',
+          minH: '18.75rem',
+          overflow: 'hidden',
+          position: 'relative',
+          py: '8',
+        })}
+      >
+        <span
+          className={css({
+            bgColor: 'neutral.surface.initial',
+            pxi: '2',
+            rounded: 'md',
+            position: 'absolute',
+            top: '4',
+            left: '4',
+            textStyle: 'body-xs',
+            textTransform: 'uppercase',
+            zIndex: 'banner',
+          })}
+        >
+          preview mode
+        </span>
+
+        {props.children}
+      </section>
+    </div>
+  )
+}

docs/app/components/Nav.tsx

@@ -6,11 +6,50 @@ import { css } from '@/styled-system/css'
 import { grid, gridItem, hstack } from '@/styled-system/patterns'
 import navData from '@/app/data/navLinks.json'
 import { LogoGithub } from '@cerberus-design/icons'
-import { useThemeContext } from '@cerberus-design/react'
+import { Show, useThemeContext } from '@cerberus-design/react'
 import { AnimatingSunIcon } from './icons/AnimatingSunIcon'
 import { AnimatingMoonIcon } from './icons/AnimatingMoonIcon'
 import { usePathname } from 'next/navigation'
 
+const navLogoContent = (
+  <section
+    className={gridItem({
+      gridColumnStart: 1,
+      gridColumnEnd: 3,
+      md: {
+        gridColumnStart: 1,
+        gridColumnEnd: 2,
+      },
+    })}
+  >
+    <Link
+      href="/"
+      className={css({
+        pxi: '2',
+        textStyle: 'body-xl',
+        _active: {
+          color: 'neutral.text.initial',
+        },
+      })}
+    >
+      <strong>Cerberus </strong>
+      Design System
+    </Link>
+  </section>
+)
+const navGHLogoContent = (
+  <li>
+    <a
+      aria-label="View Github repo"
+      href="https://github.com/omnifed/cerberus"
+      rel="noreferrer"
+      target="_blank"
+    >
+      <LogoGithub aria-hidden size="1.5rem" />
+    </a>
+  </li>
+)
+
 export function Nav() {
   const pathname = usePathname()
   const { mode, updateMode } = useThemeContext()
@@ -36,30 +75,7 @@ export function Nav() {
         },
       })}
     >
-      <section
-        className={gridItem({
-          gridColumnStart: 1,
-          gridColumnEnd: 3,
-          md: {
-            gridColumnStart: 1,
-            gridColumnEnd: 2,
-          },
-        })}
-      >
-        <Link
-          href="/"
-          className={css({
-            pxi: '2',
-            textStyle: 'body-xl',
-            _active: {
-              color: 'neutral.text.initial',
-            },
-          })}
-        >
-          <strong>Cerberus </strong>
-          Design System
-        </Link>
-      </section>
+      {navLogoContent}
 
       <section
         className={gridItem({
@@ -173,23 +189,16 @@ export function Nav() {
             gap: '4',
           })}
         >
-          <li>
-            <a
-              aria-label="View Github repo"
-              href="https://github.com/omnifed/cerberus"
-              rel="noreferrer"
-              target="_blank"
-            >
-              <LogoGithub aria-hidden size="1.5rem" />
-            </a>
-          </li>
+          {navGHLogoContent}
           <li
             className={css({
               h: '1.5rem',
             })}
           >
             <button aria-label={ariaLabel} onClick={updateMode}>
-              {mode === 'light' ? <AnimatingSunIcon /> : <AnimatingMoonIcon />}
+              <Show when={mode === 'light'} fallback={<AnimatingMoonIcon />}>
+                <AnimatingSunIcon />
+              </Show>
             </button>
           </li>
         </ul>

docs/app/icons/layout.tsx

@@ -1,21 +1,18 @@
 import type { PropsWithChildren } from 'react'
-import { cx } from '@/styled-system/css'
-import { container } from '@/styled-system/patterns'
-import { markdown } from '../styles/markdown'
+import { PageLayout, PageSideNav } from '../components/PageLayout'
+import SideNav, { type NavList } from '../components/SideNav'
+import sideNavData from './side-nav.json'
 
 interface IconsProps {}
 
 export default function IconsLayout(props: PropsWithChildren<IconsProps>) {
   return (
-    <div
-      className={cx(
-        container({
-          pt: '12',
-        }),
-        markdown,
-      )}
-    >
+    <PageLayout>
+      <PageSideNav>
+        <SideNav navList={sideNavData as NavList} />
+      </PageSideNav>
+
       {props.children}
-    </div>
+    </PageLayout>
   )
 }

docs/app/icons/page.tsx

@@ -1,14 +1,19 @@
-import { css } from '@/styled-system/css'
+import OnThisPage from '../components/OnThisPage'
+import { PageMainContent, PageSections } from '../components/PageLayout'
 import Overview from './overview.mdx'
 
 export default function IconsPage() {
   return (
-    <main
-      className={css({
-        py: '6',
-      })}
-    >
-      <Overview />
-    </main>
+    <>
+      <PageMainContent>
+        <main>
+          <Overview />
+        </main>
+      </PageMainContent>
+
+      <PageSections>
+        <OnThisPage />
+      </PageSections>
+    </>
   )
 }

docs/app/icons/side-nav.json

@@ -0,0 +1,19 @@
+[
+  {
+    "id": "1",
+    "label": "Overview",
+    "type": "heading"
+  },
+  {
+    "id": "1:a",
+    "label": "Installation",
+    "route": "/icons",
+    "type": "route"
+  },
+  {
+    "id": "1:b",
+    "label": "Icons",
+    "route": "/icons/all",
+    "type": "route"
+  }
+]

docs/app/preset/colors/colors.mdx

@@ -4,9 +4,26 @@ import PaletteList from './components/PaletteList'
 
 The Cerberus preset provides a set of semantic color tokens that can be used to style your application.
 
+## Neutral
+
 <PaletteList palette="neutral" />
+
+## Action
+
 <PaletteList palette="action" />
+
+## Info
+
 <PaletteList palette="info" />
+
+## Success
+
 <PaletteList palette="success" />
+
+## Warning
+
 <PaletteList palette="warning" />
+
+## Danger
+
 <PaletteList palette="danger" />

docs/app/preset/colors/components/PaletteList.tsx

@@ -97,14 +97,6 @@ export default function PaletteList(props: PaletteListProps) {
         mb: '8',
       })}
     >
-      <p
-        className={css({
-          textStyle: 'h3 !important',
-          textTransform: 'capitalize',
-        })}
-      >
-        {palette}
-      </p>
       <ul
         className={grid({
           bgColor: 'neutral.surface.100',

docs/app/preset/colors/page.tsx

@@ -1,9 +1,19 @@
+import OnThisPage from '../../components/OnThisPage'
+import { PageMainContent, PageSections } from '../../components/PageLayout'
 import Colors from './colors.mdx'
 
 export default function ColorsPage() {
   return (
-    <main>
-      <Colors />
-    </main>
+    <>
+      <PageMainContent>
+        <main>
+          <Colors />
+        </main>
+      </PageMainContent>
+
+      <PageSections>
+        <OnThisPage />
+      </PageSections>
+    </>
   )
 }