Adding: Code hightligher & MarigoldProvider (#3150)

Co-authored-by: Osama Abdul Latif <[email protected]> Co-authored-by: sarahgm <[email protected]> Co-authored-by: Sebastian Sebald <[email protected]> Co-authored-by: Osama Abdul Latif <[email protected]> Co-authored-by: Sebastian Sebald <[email protected]> Co-authored-by: sarahgm <[email protected]>
marigold-ui · Jul 20, 2023 · 5a8dcb5 · 5a8dcb5 · vercel · Jul 20, 2023
1 parent f0484d2
commit 5a8dcb5
Show file tree

Hide file tree

Showing 13 changed files with 318 additions and 78 deletions.
diff --git a/docs/app/[...slug]/page.tsx b/docs/app/[...slug]/page.tsx
@@ -46,7 +46,6 @@ export async function generateStaticParams(): Promise<
 
 export default async function ContentPage({ params }: ContentPageProps) {
   const page = await getPageFromParams(params);
-
   if (!page) {
     notFound();
   }

diff --git a/docs/content/components/accordion/accordion-basic.demo.tsx b/docs/content/components/accordion/accordion-basic.demo.tsx
@@ -0,0 +1,22 @@
+import { Accordion, Headline, TextField } from '@marigold/components';
+
+export default () => (
+  <Accordion defaultExpandedKeys={['1']}>
+    <Accordion.Item key={1} title="Informations">
+      {/* just to test scroll */}
+      <Headline level="3">
+        Some Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem
+        voluptatem minima hic ex ullam, asperiores quaerat quas eveniet, magnam
+        quisquam dolores. Beatae eaque eveniet error ipsa veniam vero culpa
+        recusandae?
+      </Headline>
+      <TextField label="Name" />
+    </Accordion.Item>
+    <Accordion.Item key={2} title="Personal Settings">
+      two
+    </Accordion.Item>
+    <Accordion.Item key={3} title="Billing Adress">
+      <Headline level="3">Some Imformations</Headline>
+    </Accordion.Item>
+  </Accordion>
+);
diff --git a/docs/content/components/accordion/accordion.mdx b/docs/content/components/accordion/accordion.mdx
@@ -28,3 +28,5 @@ import { Accordion } from '@marigold/components';
 ### Props Accordion.Item
 
 ## Examples
+
+<ComponentDemo file="./accordion-basic.demo.tsx" />
diff --git a/docs/contentlayer.config.ts b/docs/contentlayer.config.ts
@@ -6,9 +6,12 @@ import {
 
 import remarkGfm from 'remark-gfm';
 import rehypeSlug from 'rehype-slug';
+import rehypePrettyCode from 'rehype-pretty-code';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import { visit } from 'unist-util-visit';
 
 import { rehypeComponentDemo } from './lib/mdx/rehype-component-demo';
+
 import { siteConfig } from './lib/config';
 
 // Helpers
@@ -88,6 +91,58 @@ export default makeSource({
     rehypePlugins: [
       [rehypeComponentDemo, { contentDirPath }],
       rehypeSlug,
+      // to inject the source code and other stuff inside `pre` element props
+      () => tree => {
+        visit(tree, node => {
+          if (node?.type === 'element' && node?.tagName === 'pre') {
+            const [codeEl] = node.children;
+            if (codeEl.tagName !== 'code') {
+              return;
+            }
+
+            if (codeEl.data?.meta) {
+              // Extract event from meta and pass it down the tree.
+              const regex = /event="([^"]*)"/;
+              const match = codeEl.data?.meta.match(regex);
+              if (match) {
+                node.__event__ = match ? match[1] : null;
+                codeEl.data.meta = codeEl.data.meta.replace(regex, '');
+              }
+            }
+            node.__rawString__ = codeEl.children?.[0].value;
+          }
+        });
+      },
+      [
+        rehypePrettyCode,
+        {
+          onVisitLine(node: any) {
+            if (node.children.length === 0) {
+              node.children = [{ type: 'text', value: ' ' }];
+            }
+          },
+          onVisitHighlightedLine(node: any) {
+            node.properties.className.push('line--highlighted');
+          },
+          onVisitHighlightedWord(node: any) {
+            node.properties.className = ['word--highlighted'];
+          },
+        },
+      ],
+      () => tree => {
+        visit(tree, node => {
+          if (node?.type === 'element' && node?.tagName === 'div') {
+            if (!('data-rehype-pretty-code-fragment' in node.properties)) {
+              return;
+            }
+            const preElement = node.children.at(-1);
+            if (preElement.tagName !== 'pre') {
+              return;
+            }
+            preElement.properties['__rawString__'] = node.__rawString__;
+          }
+        });
+      },
       [
         rehypeAutolinkHeadings,
         {

diff --git a/docs/package.json b/docs/package.json
@@ -27,9 +27,12 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-use": "17.4.0",
+    "react-use-clipboard": "1.0.9",
     "rehype-autolink-headings": "6.1.1",
+    "rehype-pretty-code": "0.10.0",
     "rehype-slug": "5.1.0",
     "remark-gfm": "3.0.1",
+    "shiki": "0.14.3",
     "tailwindcss": "3.3.2",
     "zx": "7.2.2"
   },

diff --git a/docs/registry/index.tsx b/docs/registry/index.tsx
@@ -4,6 +4,20 @@
 import dynamic from 'next/dynamic';
 
 export const registry = {
+  'accordion-basic': {
+    name: 'accordion-basic',
+    demo: dynamic(
+      () => import('@/content/components/accordion/accordion-basic.demo')
+    ),
+    file: 'content/components/accordion/accordion-basic.demo.tsx',
+  },
+  'basic-accordion': {
+    name: 'basic-accordion',
+    demo: dynamic(
+      () => import('@/content/components/accordion/basic-accordion.demo')
+    ),
+    file: 'content/components/accordion/basic-accordion.demo.tsx',
+  },
   rightside: {
     name: 'rightside',
     demo: dynamic(() => import('@/content/components/aside/rightside.demo')),
@@ -14,13 +28,6 @@ export const registry = {
     demo: dynamic(() => import('@/content/components/aside/space.demo')),
     file: 'content/components/aside/space.demo.tsx',
   },
-  'basic-accordion': {
-    name: 'basic-accordion',
-    demo: dynamic(
-      () => import('@/content/components/accordion/basic-accordion.demo')
-    ),
-    file: 'content/components/accordion/basic-accordion.demo.tsx',
-  },
   'horizontal-breakout': {
     name: 'horizontal-breakout',
     demo: dynamic(

diff --git a/docs/theme/components/Tabs.styles.ts b/docs/theme/components/Tabs.styles.ts
@@ -0,0 +1,9 @@
+import { ThemeComponent, cva } from '@marigold/system';
+
+export const Tabs: ThemeComponent<'Tabs'> = {
+  tabs: cva('mb-4 border-b'),
+  tab: cva([
+    'text-text-primary-muted aria-selected:text-text-primary px-2 py-1 font-medium',
+    'aria-selected:border-border -m-px border-b-2 border-transparent',
+  ]),
+};
diff --git a/docs/theme/components/index.ts b/docs/theme/components/index.ts
@@ -6,6 +6,7 @@ export * from './Headline.styles';
 export * from './Link.styles';
 export * from './Menu.styles';
 export * from './Message.styles';
+export * from './Tabs.styles';
 export * from './Table.styles';
 export * from './Text.styles';
 export * from './Underlay.styles';
diff --git a/docs/theme/tokens.ts b/docs/theme/tokens.ts
@@ -27,6 +27,7 @@ export const colors = {
   text: {
     primary: {
       DEFAULT: tw.slate[950],
+      muted: tw.slate[500],
     },
 
     // State
@@ -54,5 +55,7 @@ export const colors = {
 
   // Border
   // ---------------
-  border: {},
+  border: {
+    DEFAULT: tw.slate[900],
+  },
 };
diff --git a/docs/ui/ComponentDemo.tsx b/docs/ui/ComponentDemo.tsx
@@ -1,37 +1,36 @@
 import { ReactNode } from 'react';
+import { MarigoldProvider, Tabs } from './marigold';
 import { type Theme } from '@marigold/system';
 
-import { registry } from '../registry';
-import { MarigoldProvider } from './marigold';
-
+import { registry } from '@/registry';
 import { useThemeSwitch } from '@/app/_components/ThemeSwitch';
 export interface ComponentDemoProps {
   name: keyof typeof registry;
   source: string;
   children?: ReactNode;
 }
 
-export const ComponentDemo = ({
-  name,
-  source,
-  children,
-}: ComponentDemoProps) => {
+export const ComponentDemo = ({ name, children }: ComponentDemoProps) => {
   const Demo = registry[name].demo;
   const { current, themes } = useThemeSwitch();
 
   return (
-    <div className="bg-cyan-800 p-10 text-cyan-100">
-      <pre>
-        <code className="language-tsx">{source}</code>
-      </pre>
-      <hr />
-      <div data-theme={current}>
-        <MarigoldProvider theme={(current && themes[current]) as Theme}>
-          <div className="px-4 py-6">
-            <Demo />
-          </div>
-        </MarigoldProvider>
-      </div>
-    </div>
+    <Tabs defaultSelectedKey="preview">
+      <Tabs.Item key="preview" title="Preview">
+        <div
+          data-theme={current}
+          className="flex min-h-[150px] flex-col [&>*:first-child]:grid [&>*:first-child]:flex-1 [&>*:first-child]:place-items-center [&>*:first-child]:rounded-xl [&>*:first-child]:border"
+        >
+          <MarigoldProvider theme={(current && themes[current]) as Theme}>
+            <div className="w-full p-4">
+              <Demo />
+            </div>
+          </MarigoldProvider>
+        </div>
+      </Tabs.Item>
+      <Tabs.Item key="code" title="Code">
+        {children}
+      </Tabs.Item>
+    </Tabs>
   );
 };
diff --git a/docs/ui/CopyButton.tsx b/docs/ui/CopyButton.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Button } from '@marigold/components';
+import useClipboard from 'react-use-clipboard';
+
+interface CopyProps {
+  codeString: string;
+}
+
+export const CopyButton = ({ codeString }: CopyProps) => {
+  const [isCopied, setCopied] = useClipboard(codeString, {
+    successDuration: 1000,
+  });
+  return (
+    <Button
+      variant="copy"
+      onPress={setCopied}
+      className="border-none p-0 outline-0"
+    >
+      {isCopied ? (
+        <svg
+          className="h-5 w-5 fill-white"
+          width="48"
+          height="48"
+          viewBox="0 0 24 24"
+        >
+          <path d="M8.17368 16.6154L3.19528 11.637L1.5 13.3204L8.17368 19.994L22.5 5.66772L20.8167 3.98437L8.17368 16.6154Z"></path>
+        </svg>
+      ) : (
+        <svg
+          className="h-5 w-5 fill-white"
+          viewBox="0 0 16 16"
+          fill="text.regular"
+        >
+          <path
+            d="M8.8421 0H1.26316C0.568421 0 0 0.568421 0 1.26316V10.1053H1.26316V1.26316H8.8421V0ZM10.7368 2.52632H3.78947C3.09474 2.52632 2.52632 3.09474 2.52632 3.78947V12.6316C2.52632 13.3263 3.09474 13.8947 3.78947 13.8947H10.7368C11.4316 13.8947 12 13.3263 12 12.6316V3.78947C12 3.09474 11.4316 2.52632 10.7368 2.52632ZM10.7368 12.6316H3.78947V3.78947H10.7368V12.6316Z"
+            fill="text.regular"
+          />
+        </svg>
+      )}
+    </Button>
+  );
+};
diff --git a/docs/ui/mdx.tsx b/docs/ui/mdx.tsx
@@ -3,10 +3,12 @@
 import { HTMLAttributes } from 'react';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 
-import * as DocComponents from '@/app/components/[...slug]/_components';
 import { IconList } from '@/app/components';
-import { ComponentDemo } from './ComponentDemo';
+
 import { Headline, Message, Link, Text } from './';
+import { ComponentDemo } from './ComponentDemo';
+import { CopyButton } from './CopyButton';
+import * as DocComponents from '@/app/components/[...slug]/_components';
 
 // Typography
 // ---------------
@@ -35,14 +37,30 @@ const typography = {
     <blockquote className="mt-6 border-l-2 pl-6 italic" {...props} />
   ),
   code: (props: HTMLAttributes<HTMLElement>) => (
-    <code
-      className="bg-bg-muted rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold"
-      {...props}
-    />
+    <code className="rounded  font-mono text-sm" {...props} />
   ),
   hr: ({ ...props }: HTMLAttributes<HTMLHRElement>) => (
     <hr className="my-4 md:my-8" {...props} />
   ),
+  // `__rawString__` is source code to be copied
+  pre: ({
+    __rawString__,
+    ...props
+  }: HTMLAttributes<HTMLPreElement> & { __rawString__: string }) => {
+    return (
+      <div className="relative ">
+        <pre
+          className="max-h-[650px] overflow-x-auto rounded-lg px-3 py-4"
+          {...props}
+        >
+          <div className="absolute right-4 top-4">
+            <CopyButton codeString={__rawString__} />
+          </div>
+          {props.children}
+        </pre>
+      </div>
+    );
+  },
 };
 
 // MDX Components