From f64d8871dd14e5dfc9e34754ba1794760499a46d Mon Sep 17 00:00:00 2001 From: Sebastian Sebald Date: Thu, 13 Jul 2023 10:27:43 +0200 Subject: [PATCH 01/14] setup Co-authored-by: Osama Abdul Latif Co-authored-by: sarahgm --- docs/content/components/.eslintrc.js | 8 ++++++++ docs/content/components/button/button-variant-demo.tsx | 8 -------- docs/content/components/button/button-variant.demo.tsx | 10 ++++++++++ docs/content/components/button/button.mdx | 2 ++ docs/tailwind.config.ts | 2 +- docs/ui/ComponentDemo.tsx | 4 ++++ docs/ui/mdx.tsx | 6 +++++- 7 files changed, 30 insertions(+), 10 deletions(-) create mode 100644 docs/content/components/.eslintrc.js delete mode 100644 docs/content/components/button/button-variant-demo.tsx create mode 100644 docs/content/components/button/button-variant.demo.tsx create mode 100644 docs/ui/ComponentDemo.tsx diff --git a/docs/content/components/.eslintrc.js b/docs/content/components/.eslintrc.js new file mode 100644 index 0000000000..ed0d67d029 --- /dev/null +++ b/docs/content/components/.eslintrc.js @@ -0,0 +1,8 @@ +module.exports = { + rules: { + /** + * We use default exports for demos. + */ + 'import/no-anonymous-default-export': 'off', + }, +}; diff --git a/docs/content/components/button/button-variant-demo.tsx b/docs/content/components/button/button-variant-demo.tsx deleted file mode 100644 index e4e7ddbaa3..0000000000 --- a/docs/content/components/button/button-variant-demo.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { Inline, Button } from '@marigold/components'; - - - - - - -; diff --git a/docs/content/components/button/button-variant.demo.tsx b/docs/content/components/button/button-variant.demo.tsx new file mode 100644 index 0000000000..be06a015cf --- /dev/null +++ b/docs/content/components/button/button-variant.demo.tsx @@ -0,0 +1,10 @@ +import { Inline, Button } from '@marigold/components'; + +export default () => ( + + + + + + +); diff --git a/docs/content/components/button/button.mdx b/docs/content/components/button/button.mdx index 4a45548a59..bed1e62ee6 100644 --- a/docs/content/components/button/button.mdx +++ b/docs/content/components/button/button.mdx @@ -63,3 +63,5 @@ import { Button } from '@marigold/components'; /> ## Examples + + diff --git a/docs/tailwind.config.ts b/docs/tailwind.config.ts index 093c0551a0..d3abdd93e7 100644 --- a/docs/tailwind.config.ts +++ b/docs/tailwind.config.ts @@ -9,7 +9,7 @@ const config: Config = { './theme/root.ts', './theme/*.ts', './theme/**/*.ts', - './components/**/*.{js,ts,jsx,tsx,mdx}', + './ui/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}', // Marigold components diff --git a/docs/ui/ComponentDemo.tsx b/docs/ui/ComponentDemo.tsx new file mode 100644 index 0000000000..2e8df99f60 --- /dev/null +++ b/docs/ui/ComponentDemo.tsx @@ -0,0 +1,4 @@ +export const ComponentDemo = () => { + // Use React-live + return
hello
; +}; diff --git a/docs/ui/mdx.tsx b/docs/ui/mdx.tsx index c2489211d8..26d9751118 100644 --- a/docs/ui/mdx.tsx +++ b/docs/ui/mdx.tsx @@ -3,8 +3,11 @@ import { HTMLAttributes } from 'react'; import { useMDXComponent } from 'next-contentlayer/hooks'; import * as DocComponents from '@/app/components/components'; -import { Headline, Message, Link, Text } from './'; import { IconList } from '@/app/components'; + +import { Headline, Message, Link, Text } from './'; +import { ComponentDemo } from './ComponentDemo'; + // Typography // --------------- const typography = { @@ -46,6 +49,7 @@ const typography = { // --------------- const components = { // TODO: wrap Marigold's Image/Link with next's image/link component + ComponentDemo, Headline, Message, Text, From 1742c55eeea1d2265231f501634d80f3e4b9ae69 Mon Sep 17 00:00:00 2001 From: Sebastian Sebald Date: Thu, 13 Jul 2023 12:05:49 +0200 Subject: [PATCH 02/14] first working demo --- docs/content/components/button/button.mdx | 2 +- docs/contentlayer.config.ts | 12 +- docs/lib/mdx/rehype-component-demo.tsx | 115 +++++++++++++ docs/package.json | 4 +- docs/ui/ComponentDemo.tsx | 11 +- pnpm-lock.yaml | 201 +++++++++++++++++++++- 6 files changed, 334 insertions(+), 11 deletions(-) create mode 100644 docs/lib/mdx/rehype-component-demo.tsx diff --git a/docs/content/components/button/button.mdx b/docs/content/components/button/button.mdx index bed1e62ee6..3bbd570e15 100644 --- a/docs/content/components/button/button.mdx +++ b/docs/content/components/button/button.mdx @@ -64,4 +64,4 @@ import { Button } from '@marigold/components'; ## Examples - + diff --git a/docs/contentlayer.config.ts b/docs/contentlayer.config.ts index d51327f338..f1f2d86765 100644 --- a/docs/contentlayer.config.ts +++ b/docs/contentlayer.config.ts @@ -9,6 +9,8 @@ import remarkGfm from 'remark-gfm'; import rehypeSlug from 'rehype-slug'; import rehypeAutolinkHeadings from 'rehype-autolink-headings'; +import { rehypeComponentDemo } from './lib/mdx/rehype-component-demo'; + // Helpers // --------------- const commonFields: FieldDefs = { @@ -82,11 +84,17 @@ export const ComponentPage = defineDocumentType(() => ({ // Config // --------------- +const contentDirPath = './content'; + export default makeSource({ - contentDirPath: './content', + contentDirPath, mdx: { remarkPlugins: [remarkGfm], - rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'wrap' }]], + rehypePlugins: [ + [rehypeComponentDemo, { contentDirPath }], + rehypeSlug, + [rehypeAutolinkHeadings, { behavior: 'wrap' }], + ], }, documentTypes: [ContentPage, ComponentPage], }); diff --git a/docs/lib/mdx/rehype-component-demo.tsx b/docs/lib/mdx/rehype-component-demo.tsx new file mode 100644 index 0000000000..5965c1cc3a --- /dev/null +++ b/docs/lib/mdx/rehype-component-demo.tsx @@ -0,0 +1,115 @@ +import path from 'node:path'; +import fs from 'node:fs'; + +import { Node } from 'unist'; +import { u } from 'unist-builder'; +import { visit } from 'unist-util-visit'; + +// Types +// --------------- +export type MdxJsxAttribute = + | { type: 'mdxJsxAttribute'; name: string; value: string } + | { + type: 'mdxJsxAttribute'; + name: string; + value: { + type: 'mdxJsxAttributeValueExpression'; + value: string; + data: object; // maybe it is always an { estree: Programm } + }; + }; + +export interface RehypeNode extends Node { + name?: string; + attributes?: ( + | MdxJsxAttribute + // Fallback + | { type: string; name: string; value: unknown } + )[]; + children?: RehypeNode[]; +} + +export interface RehypeTree extends Node { + children: RehypeNode[]; +} + +export interface VFile { + data: { + rawDocumentData: { + sourceFilePath: string; + sourceFileName: string; + sourceFileDir: string; + contentType: string; + flattenedPath: string; + }; + }; + messages: unknown[]; + history: string[]; + cwd: string; + value: string; +} + +// Helpers +// --------------- +const getJsxAttr = (node: RehypeNode, needle: string) => + node.attributes?.find( + ({ type, name }) => type === 'mdxJsxAttribute' && name === needle + ) as MdxJsxAttribute; + +// Plugin +// --------------- +export interface RehypeComponentDemoConfig { + contentDirPath: string; +} + +export const rehypeComponentDemo = ({ + contentDirPath, +}: RehypeComponentDemoConfig) => { + return async (tree: RehypeTree, f: any) => { + const file = f as VFile; + + visit(tree, (node: RehypeNode) => { + // 1. Find our demo component component + if (node.name === 'ComponentDemo') { + // 2. Find out which demo to use + const demoPath = getJsxAttr(node, 'file')?.value; + + if (!demoPath) return; + if (typeof demoPath !== 'string') return; + + // 3. Load the demo source from the file system + const filePath = path.join( + file.cwd, + contentDirPath, + file.data.rawDocumentData.sourceFileDir, + demoPath + ); + try { + const source = fs.readFileSync(filePath, 'utf-8'); + + node.children?.push( + u('element', { + tagName: 'pre', + children: [ + u('element', { + tagName: 'code', + properties: { + className: ['language-tsx'], + }, + children: [ + { + type: 'text', + value: source, + }, + ], + }), + ], + }) + ); + } catch (err) { + console.log(err); + } + } + }); + }; +}; diff --git a/docs/package.json b/docs/package.json index 035ff38348..499e275e72 100644 --- a/docs/package.json +++ b/docs/package.json @@ -31,6 +31,8 @@ "@types/node": "18.16.19", "@types/react": "18.2.14", "@types/react-dom": "18.2.6", - "typescript": "5.0.4" + "typescript": "5.0.4", + "unist-builder": "4.0.0", + "unist-util-visit": "5.0.0" } } diff --git a/docs/ui/ComponentDemo.tsx b/docs/ui/ComponentDemo.tsx index 2e8df99f60..b7d6aeb88c 100644 --- a/docs/ui/ComponentDemo.tsx +++ b/docs/ui/ComponentDemo.tsx @@ -1,4 +1,11 @@ -export const ComponentDemo = () => { +import { ReactNode } from 'react'; + +export interface ComponentDemoProps { + name: string; + children?: ReactNode; +} + +export const ComponentDemo = ({ children }: ComponentDemoProps) => { // Use React-live - return
hello
; + return
{children}
; }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 023059348a..f3b4e9fc7d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -358,7 +358,7 @@ importers: version: 13.4.8(eslint@8.44.0)(typescript@5.0.4) next: specifier: 13.4.8 - version: 13.4.8(@babel/core@7.21.8)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0) + version: 13.4.8(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0) next-contentlayer: specifier: 0.3.4 version: 0.3.4(contentlayer@0.3.4)(esbuild@0.18.11)(next@13.4.8)(react-dom@18.2.0)(react@18.2.0) @@ -385,7 +385,7 @@ importers: version: 3.0.1 tailwindcss: specifier: 3.3.2 - version: 3.3.2(ts-node@10.9.1) + version: 3.3.2 devDependencies: '@types/node': specifier: 18.16.19 @@ -399,6 +399,12 @@ importers: typescript: specifier: 5.0.4 version: 5.0.4 + unist-builder: + specifier: 4.0.0 + version: 4.0.0 + unist-util-visit: + specifier: 5.0.0 + version: 5.0.0 packages/components: dependencies: @@ -3359,6 +3365,7 @@ packages: engines: { node: '>=12' } dependencies: '@jridgewell/trace-mapping': 0.3.9 + dev: true /@discoveryjs/json-ext@0.5.7: resolution: @@ -4492,6 +4499,7 @@ packages: integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==, } engines: { node: '>=6.0.0' } + dev: true /@jridgewell/set-array@1.1.2: resolution: @@ -4539,6 +4547,7 @@ packages: dependencies: '@jridgewell/resolve-uri': 3.1.1 '@jridgewell/sourcemap-codec': 1.4.15 + dev: true /@js-temporal/polyfill@0.4.4: resolution: @@ -8267,24 +8276,28 @@ packages: { integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==, } + dev: true /@tsconfig/node12@1.0.11: resolution: { integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==, } + dev: true /@tsconfig/node14@1.0.3: resolution: { integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==, } + dev: true /@tsconfig/node16@1.0.4: resolution: { integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==, } + dev: true /@types/acorn@4.0.6: resolution: @@ -8504,7 +8517,7 @@ packages: integrity: sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==, } dependencies: - '@types/unist': 2.0.6 + '@types/unist': 3.0.0 dev: false /@types/http-errors@2.0.1: @@ -8621,7 +8634,7 @@ packages: integrity: sha512-Y/uImid8aAwrEA24/1tcRZwpxX3pIFTSilcNDKSPn+Y2iDywSEachzRuvgAYYLR3wpGXAsMbv5lvKLDZLeYPAw==, } dependencies: - '@types/unist': 2.0.6 + '@types/unist': 3.0.0 dev: false /@types/mdx@2.0.5: @@ -8860,6 +8873,12 @@ packages: integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==, } + /@types/unist@3.0.0: + resolution: + { + integrity: sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==, + } + /@types/webpack-env@1.18.1: resolution: { @@ -9624,6 +9643,7 @@ packages: { integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==, } + dev: true /arg@5.0.2: resolution: @@ -11578,6 +11598,7 @@ packages: { integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==, } + dev: true /cross-spawn@5.1.0: resolution: @@ -12279,6 +12300,7 @@ packages: integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==, } engines: { node: '>=0.3.1' } + dev: true /diff@5.1.0: resolution: @@ -17405,6 +17427,7 @@ packages: { integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==, } + dev: true /makeerror@1.0.12: resolution: @@ -18789,7 +18812,7 @@ packages: '@contentlayer/core': 0.3.4(esbuild@0.18.11) '@contentlayer/utils': 0.3.4 contentlayer: 0.3.4(esbuild@0.18.11) - next: 13.4.8(@babel/core@7.21.8)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0) + next: 13.4.8(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) transitivePeerDependencies: @@ -18844,6 +18867,54 @@ packages: transitivePeerDependencies: - '@babel/core' - babel-plugin-macros + dev: true + + /next@13.4.8(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0): + resolution: + { + integrity: sha512-lxUjndYKjZHGK3CWeN2RI+/6ni6EUvjiqGWXAYPxUfGIdFGQ5XoisrqAJ/dF74aP27buAfs8MKIbIMMdxjqSBg==, + } + engines: { node: '>=16.8.0' } + hasBin: true + peerDependencies: + '@opentelemetry/api': ^1.1.0 + fibers: '>= 3.1.0' + react: ^18.2.0 + react-dom: ^18.2.0 + sass: ^1.3.0 + peerDependenciesMeta: + '@opentelemetry/api': + optional: true + fibers: + optional: true + sass: + optional: true + dependencies: + '@next/env': 13.4.8 + '@opentelemetry/api': 1.4.1 + '@swc/helpers': 0.5.1 + busboy: 1.6.0 + caniuse-lite: 1.0.30001512 + postcss: 8.4.14 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + styled-jsx: 5.1.1(react@18.2.0) + watchpack: 2.4.0 + zod: 3.21.4 + optionalDependencies: + '@next/swc-darwin-arm64': 13.4.8 + '@next/swc-darwin-x64': 13.4.8 + '@next/swc-linux-arm64-gnu': 13.4.8 + '@next/swc-linux-arm64-musl': 13.4.8 + '@next/swc-linux-x64-gnu': 13.4.8 + '@next/swc-linux-x64-musl': 13.4.8 + '@next/swc-win32-arm64-msvc': 13.4.8 + '@next/swc-win32-ia32-msvc': 13.4.8 + '@next/swc-win32-x64-msvc': 13.4.8 + transitivePeerDependencies: + - '@babel/core' + - babel-plugin-macros + dev: false /no-case@3.0.4: resolution: @@ -19914,6 +19985,26 @@ packages: yaml: 1.10.2 dev: true + /postcss-load-config@4.0.1(postcss@8.4.24): + resolution: + { + integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==, + } + engines: { node: '>= 14' } + peerDependencies: + postcss: '>=8.0.9' + ts-node: '>=9.0.0' + peerDependenciesMeta: + postcss: + optional: true + ts-node: + optional: true + dependencies: + lilconfig: 2.1.0 + postcss: 8.4.24 + yaml: 2.3.1 + dev: false + /postcss-load-config@4.0.1(postcss@8.4.24)(ts-node@10.9.1): resolution: { @@ -19933,6 +20024,7 @@ packages: postcss: 8.4.24 ts-node: 10.9.1(@types/node@18.16.19)(typescript@5.0.4) yaml: 2.3.1 + dev: true /postcss-loader@4.3.0(postcss@7.0.39)(webpack@4.0.0): resolution: @@ -22814,6 +22906,27 @@ packages: '@babel/core': 7.21.8 client-only: 0.0.1 react: 18.2.0 + dev: true + + /styled-jsx@5.1.1(react@18.2.0): + resolution: + { + integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==, + } + engines: { node: '>= 12.0.0' } + peerDependencies: + '@babel/core': '*' + babel-plugin-macros: '*' + react: '>= 16.8.0 || 17.x.x || ^18.0.0-0' + peerDependenciesMeta: + '@babel/core': + optional: true + babel-plugin-macros: + optional: true + dependencies: + client-only: 0.0.1 + react: 18.2.0 + dev: false /stylehacks@6.0.0(postcss@8.4.24): resolution: @@ -22933,6 +23046,41 @@ packages: } dev: false + /tailwindcss@3.3.2: + resolution: + { + integrity: sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==, + } + engines: { node: '>=14.0.0' } + hasBin: true + dependencies: + '@alloc/quick-lru': 5.2.0 + arg: 5.0.2 + chokidar: 3.5.3 + didyoumean: 1.2.2 + dlv: 1.1.3 + fast-glob: 3.3.0 + glob-parent: 6.0.2 + is-glob: 4.0.3 + jiti: 1.19.1 + lilconfig: 2.1.0 + micromatch: 4.0.5 + normalize-path: 3.0.0 + object-hash: 3.0.0 + picocolors: 1.0.0 + postcss: 8.4.24 + postcss-import: 15.1.0(postcss@8.4.24) + postcss-js: 4.0.1(postcss@8.4.24) + postcss-load-config: 4.0.1(postcss@8.4.24) + postcss-nested: 6.0.1(postcss@8.4.24) + postcss-selector-parser: 6.0.13 + postcss-value-parser: 4.2.0 + resolve: 1.22.2 + sucrase: 3.32.0 + transitivePeerDependencies: + - ts-node + dev: false + /tailwindcss@3.3.2(ts-node@10.9.1): resolution: { @@ -22966,6 +23114,7 @@ packages: sucrase: 3.32.0 transitivePeerDependencies: - ts-node + dev: true /tapable@1.1.3: resolution: @@ -23413,6 +23562,7 @@ packages: typescript: 5.0.4 v8-compile-cache-lib: 3.0.1 yn: 3.1.1 + dev: true /ts-pattern@4.3.0: resolution: @@ -23807,6 +23957,15 @@ packages: crypto-random-string: 2.0.0 dev: true + /unist-builder@4.0.0: + resolution: + { + integrity: sha512-wmRFnH+BLpZnTKpc5L7O67Kac89s9HMrtELpnNaE6TAobq5DTZZs5YaTQfAZBA9bFPECx2uVAPO31c+GVug8mg==, + } + dependencies: + '@types/unist': 3.0.0 + dev: true + /unist-util-generated@2.0.1: resolution: { @@ -23829,6 +23988,15 @@ packages: '@types/unist': 2.0.6 dev: false + /unist-util-is@6.0.0: + resolution: + { + integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==, + } + dependencies: + '@types/unist': 3.0.0 + dev: true + /unist-util-position-from-estree@1.1.2: resolution: { @@ -23885,6 +24053,16 @@ packages: unist-util-is: 5.2.1 dev: false + /unist-util-visit-parents@6.0.1: + resolution: + { + integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==, + } + dependencies: + '@types/unist': 3.0.0 + unist-util-is: 6.0.0 + dev: true + /unist-util-visit@2.0.3: resolution: { @@ -23906,6 +24084,17 @@ packages: unist-util-visit-parents: 5.1.3 dev: false + /unist-util-visit@5.0.0: + resolution: + { + integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==, + } + dependencies: + '@types/unist': 3.0.0 + unist-util-is: 6.0.0 + unist-util-visit-parents: 6.0.1 + dev: true + /universalify@0.1.2: resolution: { @@ -24118,6 +24307,7 @@ packages: { integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==, } + dev: true /v8-to-istanbul@9.1.0: resolution: @@ -24849,6 +25039,7 @@ packages: integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==, } engines: { node: '>=6' } + dev: true /yocto-queue@0.1.0: resolution: From 2e0b2baa3518dd3f9eb5158b80bfd052cd12b849 Mon Sep 17 00:00:00 2001 From: Sebastian Sebald Date: Thu, 13 Jul 2023 12:34:56 +0200 Subject: [PATCH 03/14] pass the source code --- docs/lib/mdx/rehype-component-demo.tsx | 22 +++++++++++++++------- docs/ui/ComponentDemo.tsx | 14 +++++++++++--- 2 files changed, 26 insertions(+), 10 deletions(-) diff --git a/docs/lib/mdx/rehype-component-demo.tsx b/docs/lib/mdx/rehype-component-demo.tsx index 5965c1cc3a..0c413e12c0 100644 --- a/docs/lib/mdx/rehype-component-demo.tsx +++ b/docs/lib/mdx/rehype-component-demo.tsx @@ -77,16 +77,24 @@ export const rehypeComponentDemo = ({ if (!demoPath) return; if (typeof demoPath !== 'string') return; - // 3. Load the demo source from the file system - const filePath = path.join( - file.cwd, - contentDirPath, - file.data.rawDocumentData.sourceFileDir, - demoPath - ); try { + // 3. Load the demo source from the file system + const filePath = path.join( + file.cwd, + contentDirPath, + file.data.rawDocumentData.sourceFileDir, + demoPath + ); const source = fs.readFileSync(filePath, 'utf-8'); + // 4. Add the source code (as string) to the component props + node.attributes?.push({ + type: 'mdxJsxAttribute', + name: 'source', + value: source, + }); + + // 5. Render the code as children node.children?.push( u('element', { tagName: 'pre', diff --git a/docs/ui/ComponentDemo.tsx b/docs/ui/ComponentDemo.tsx index b7d6aeb88c..668364fc8d 100644 --- a/docs/ui/ComponentDemo.tsx +++ b/docs/ui/ComponentDemo.tsx @@ -2,10 +2,18 @@ import { ReactNode } from 'react'; export interface ComponentDemoProps { name: string; + source: string; children?: ReactNode; } -export const ComponentDemo = ({ children }: ComponentDemoProps) => { - // Use React-live - return
{children}
; +export const ComponentDemo = ({ source, children }: ComponentDemoProps) => { + return ( +
+ 
+        {source}
+
+
+
{children}
+
+ ); }; From fca83fdd199457a72230c6ba7deed4618cc8568e Mon Sep 17 00:00:00 2001 From: Sebastian Sebald Date: Thu, 13 Jul 2023 13:06:06 +0200 Subject: [PATCH 04/14] its working --- docs/lib/mdx/rehype-component-demo.tsx | 20 ++++++++++++++------ docs/lib/registry.ts | 7 +++++++ docs/ui/ComponentDemo.tsx | 12 +++++++++++- 3 files changed, 32 insertions(+), 7 deletions(-) create mode 100644 docs/lib/registry.ts diff --git a/docs/lib/mdx/rehype-component-demo.tsx b/docs/lib/mdx/rehype-component-demo.tsx index 0c413e12c0..4d7c1dd514 100644 --- a/docs/lib/mdx/rehype-component-demo.tsx +++ b/docs/lib/mdx/rehype-component-demo.tsx @@ -86,13 +86,21 @@ export const rehypeComponentDemo = ({ demoPath ); const source = fs.readFileSync(filePath, 'utf-8'); + const name = path.basename(demoPath, '.demo.tsx'); - // 4. Add the source code (as string) to the component props - node.attributes?.push({ - type: 'mdxJsxAttribute', - name: 'source', - value: source, - }); + // 4. Add the name and source code (as string) to the component props + node.attributes?.push( + { + type: 'mdxJsxAttribute', + name: 'name', + value: name, + }, + { + type: 'mdxJsxAttribute', + name: 'source', + value: source, + } + ); // 5. Render the code as children node.children?.push( diff --git a/docs/lib/registry.ts b/docs/lib/registry.ts new file mode 100644 index 0000000000..c2213b1f26 --- /dev/null +++ b/docs/lib/registry.ts @@ -0,0 +1,7 @@ +import dynamic from 'next/dynamic'; + +export const registry = { + 'button-variant': dynamic( + () => import('@/content/components/button/button-variant.demo') + ), +}; diff --git a/docs/ui/ComponentDemo.tsx b/docs/ui/ComponentDemo.tsx index 668364fc8d..0676eeeb02 100644 --- a/docs/ui/ComponentDemo.tsx +++ b/docs/ui/ComponentDemo.tsx @@ -1,4 +1,5 @@ import { ReactNode } from 'react'; +import { registry } from '@/lib/registry'; export interface ComponentDemoProps { name: string; @@ -6,7 +7,13 @@ export interface ComponentDemoProps { children?: ReactNode; } -export const ComponentDemo = ({ source, children }: ComponentDemoProps) => { +export const ComponentDemo = ({ + name, + source, + children, +}: ComponentDemoProps) => { + const Demo = registry[name]; + return ( 
@@ -14,6 +21,9 @@ export const ComponentDemo = ({ source, children }: ComponentDemoProps) => {
{children}
+
+ +
); }; From 6dda6e83f43d4dc94206aee7a04b2d95f7ce59c2 Mon Sep 17 00:00:00 2001 From: Sebastian Sebald Date: Thu, 13 Jul 2023 13:14:00 +0200 Subject: [PATCH 05/14] fix ts --- docs/lib/registry.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/lib/registry.ts b/docs/lib/registry.ts index c2213b1f26..0e226a15e0 100644 --- a/docs/lib/registry.ts +++ b/docs/lib/registry.ts @@ -1,6 +1,6 @@ import dynamic from 'next/dynamic'; -export const registry = { +export const registry: any = { 'button-variant': dynamic( () => import('@/content/components/button/button-variant.demo') ), From 9b6c4d76f0a9791c5f68d024be7a173fb1d076ca Mon Sep 17 00:00:00 2001 From: OsamaAbdellateef Date: Tue, 18 Jul 2023 12:10:47 +0300 Subject: [PATCH 06/14] Adding code highlighter --- .../accordion/accordion-basic.demo.tsx | 22 + .../components/accordion/accordion.mdx | 2 + docs/contentlayer.config.ts | 64 +++ docs/lib/mdx/rehype-component-demo.tsx | 1 - docs/lib/registry.ts | 3 + docs/light.json | 380 ++++++++++++++++++ docs/package.json | 2 + docs/ui/ComponentDemo.tsx | 48 ++- docs/ui/CopyButton.tsx | 47 +++ docs/ui/mdx.tsx | 25 +- pnpm-lock.yaml | 147 +++++-- 11 files changed, 676 insertions(+), 65 deletions(-) create mode 100644 docs/content/components/accordion/accordion-basic.demo.tsx create mode 100644 docs/light.json create mode 100644 docs/ui/CopyButton.tsx diff --git a/docs/content/components/accordion/accordion-basic.demo.tsx b/docs/content/components/accordion/accordion-basic.demo.tsx new file mode 100644 index 0000000000..1c4b302b4a --- /dev/null +++ b/docs/content/components/accordion/accordion-basic.demo.tsx @@ -0,0 +1,22 @@ +import { Accordion, Headline, TextField } from '@marigold/components'; + +export default () => ( + + + {/* just to test scroll */} + + 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? + + + + + two + + + Some Imformations + + +); diff --git a/docs/content/components/accordion/accordion.mdx b/docs/content/components/accordion/accordion.mdx index c0b0a3bdb7..da69698d43 100644 --- 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 + + diff --git a/docs/contentlayer.config.ts b/docs/contentlayer.config.ts index f1f2d86765..19d0010710 100644 --- a/docs/contentlayer.config.ts +++ b/docs/contentlayer.config.ts @@ -7,7 +7,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 { getHighlighter, loadTheme } from 'shiki'; +import { visit } from 'unist-util-visit'; + +import path from 'node:path'; import { rehypeComponentDemo } from './lib/mdx/rehype-component-demo'; @@ -93,7 +98,66 @@ 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; + } + }); + }, [rehypeAutolinkHeadings, { behavior: 'wrap' }], + [ + rehypePrettyCode, + { + getHighlighter: async () => { + const theme = await loadTheme( + // loading theme file + path.join(process.cwd(), './light.json') + ); + return await getHighlighter({ theme }); + }, + 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__; + } + }); + }, ], }, documentTypes: [ContentPage, ComponentPage], diff --git a/docs/lib/mdx/rehype-component-demo.tsx b/docs/lib/mdx/rehype-component-demo.tsx index 4d7c1dd514..eddb7767c0 100644 --- a/docs/lib/mdx/rehype-component-demo.tsx +++ b/docs/lib/mdx/rehype-component-demo.tsx @@ -67,7 +67,6 @@ export const rehypeComponentDemo = ({ }: RehypeComponentDemoConfig) => { return async (tree: RehypeTree, f: any) => { const file = f as VFile; - visit(tree, (node: RehypeNode) => { // 1. Find our demo component component if (node.name === 'ComponentDemo') { diff --git a/docs/lib/registry.ts b/docs/lib/registry.ts index 0e226a15e0..acd359a769 100644 --- a/docs/lib/registry.ts +++ b/docs/lib/registry.ts @@ -4,4 +4,7 @@ export const registry: any = { 'button-variant': dynamic( () => import('@/content/components/button/button-variant.demo') ), + 'accordion-basic': dynamic( + () => import('@/content/components/accordion/accordion-basic.demo') + ), }; diff --git a/docs/light.json b/docs/light.json new file mode 100644 index 0000000000..d1a46c3b7d --- /dev/null +++ b/docs/light.json @@ -0,0 +1,380 @@ +{ + "name": "Lambda Studio — Blackout", + "semanticHighlighting": true, + "colors": { + "editorLink.activeForeground": "#ca8a0488", + "foreground": "#fff8", + "button.background": "#fff", + "button.foreground": "#000", + "button.hoverBackground": "#fffb", + "list.highlightForeground": "#fff", + "textLink.foreground": "#fff", + "scrollbar.shadow": "#000", + "textLink.activeForeground": "#fff8", + "editor.lineHighlightBackground": "#8881", + "editor.lineHighlightBorder": "#8882", + "editorCursor.foreground": "#fff", + "editor.findMatchBackground": "#fff8", + "editor.findMatchHighlightBackground": "#fff2", + "list.activeSelectionForeground": "#fff", + "list.focusForeground": "#fff", + "list.hoverForeground": "#fff", + "list.inactiveSelectionForeground": "#fff", + "list.inactiveSelectionBackground": "#000", + "list.focusBackground": "#000", + "list.focusAndSelectionOutline": "#000", + "list.focusHighlightForeground": "#fff", + "list.hoverBackground": "#000", + "list.focusOutline": "#000", + "list.activeSelectionBackground": "#000", + "editorIndentGuide.background": "#fff2", + "editor.background": "#000", + "editor.foreground": "#fff", + "editor.foldBackground": "#000", + "editor.hoverHighlightBackground": "#000", + "editor.selectionBackground": "#8888", + "editor.inactiveSelectionBackground": "#8882", + "gitDecoration.modifiedResourceForeground": "#fff", + "gitDecoration.untrackedResourceForeground": "#a7cb7b", + "gitDecoration.conflictingResourceForeground": "#ca8a04", + "gitDecoration.deletedResourceForeground": "#c97b89", + "listFilterWidget.background": "#000", + "input.background": "#fff1", + "titleBar.activeForeground": "#fff", + "editorWidget.background": "#000", + "editorGutter.background": "#000", + "debugToolBar.background": "#000", + "commandCenter.background": "#000", + "sideBarSectionHeader.background": "#000", + "focusBorder": "#fff8", + "titleBar.activeBackground": "#000", + "titleBar.inactiveBackground": "#000", + "breadcrumb.background": "#000", + "activityBar.background": "#000", + "activityBar.foreground": "#fff8", + "panel.background": "#000", + "sideBar.background": "#000", + "sideBarTitle.foreground": "#fff8", + "tab.hoverBackground": "#000", + "terminal.background": "#000", + "statusBar.background": "#000", + "statusBar.foreground": "#fff8", + "selection.background": "#fff2", + "editorPane.background": "#000", + "badge.background": "#000", + "banner.background": "#000", + "menu.background": "#000", + "activityBarBadge.background": "#000", + "activityBarBadge.foreground": "#fff8", + "editorLineNumber.foreground": "#fff2", + "editorLineNumber.activeForeground": "#fff8", + "statusBarItem.errorBackground": "#f43f5e" + }, + "semanticTokenColors": { + "comment": { + "foreground": "#fff4" + }, + "keyword": { + "foreground": "#fff8" + }, + "string": { + "foreground": "#fff8" + }, + "selfKeyword": { + "foreground": "#fff", + "bold": true + }, + "method.declaration": { + "foreground": "#fff", + "bold": true + }, + "method.definition": { + "foreground": "#fff", + "bold": true + }, + "method": { + "foreground": "#fff", + "bold": false + }, + "function.declaration": { + "foreground": "#fff", + "bold": true + }, + "function.definition": { + "foreground": "#fff", + "bold": true + }, + "function": { + "foreground": "#fff", + "bold": false + }, + "property": { + "foreground": "#fff" + }, + "enumMember": { + "foreground": "#fff8", + "bold": false + }, + "enum": { + "foreground": "#fff", + "bold": true + }, + "boolean": { + "foreground": "#fff8" + }, + "number": { + "foreground": "#fff8" + }, + "type": { + "foreground": "#fff", + "bold": true + }, + "typeAlias": { + "foreground": "#fff", + "bold": true + }, + "class": { + "foreground": "#fff", + "bold": true + }, + "selfTypeKeyword": { + "foreground": "#fff", + "bold": true + }, + "builtinType": { + "foreground": "#fff", + "bold": true + }, + "interface": { + "foreground": "#fff8", + "bold": false + }, + "typeParameter": { + "foreground": "#fff", + "bold": true + }, + "lifetime": { + "foreground": "#fff8", + "italic": false, + "bold": false + }, + "namespace": { + "foreground": "#fff" + }, + "macro": { + "foreground": "#fff", + "bold": false + }, + "decorator": { + "foreground": "#fff", + "bold": false + }, + "builtinAttribute": { + "foreground": "#fff", + "bold": false + }, + "generic.attribute": { + "foreground": "#fff" + }, + "derive": { + "foreground": "#fff" + }, + "operator": { + "foreground": "#fff8" + }, + "variable": { + "foreground": "#fff" + }, + "variable.readonly": { + "foreground": "#fff8" + }, + "parameter": { + "foreground": "#fff" + }, + "variable.mutable": { + "underline": true + }, + "parameter.mutable": { + "underline": true + }, + "selfKeyword.mutable": { + "underline": true + }, + "variable.constant": { + "foreground": "#fff8" + }, + "struct": { + "foreground": "#fff", + "bold": true + } + }, + "tokenColors": [ + { + "name": "Fallback Operator", + "scope": ["keyword.operator"], + "settings": { + "foreground": "#fff8" + } + }, + { + "name": "Fallback keywords", + "scope": [ + "storage.type.ts", + "keyword", + "keyword.other", + "keyword.control", + "storage.type", + "storage.modifier" + ], + "settings": { + "foreground": "#fff8" + } + }, + { + "name": "Fallback strings", + "scope": ["string"], + "settings": { + "foreground": "#fff8" + } + }, + { + "name": "Fallback JSON Properties", + "scope": ["support.type.property-name.json"], + "settings": { + "foreground": "#fff" + } + }, + { + "name": "Fallback string variables", + "scope": ["string variable", "string meta.interpolation"], + "settings": { + "foreground": "#fff" + } + }, + { + "name": "Fallback comments", + "scope": ["comment"], + "settings": { + "foreground": "#fff4" + } + }, + { + "name": "Fallback constants", + "scope": ["constant"], + "settings": { + "foreground": "#fff8" + } + }, + { + "name": "Fallback self/this", + "scope": ["variable.language.this"], + "settings": { + "foreground": "#fff" + } + }, + { + "name": "Fallback types", + "scope": [ + "entity.other.alias", + "source.php support.class", + "entity.name.type", + "meta.function-call support.class", + "keyword.other.type", + "entity.other.inherited-class" + ], + "settings": { + "foreground": "#fff", + "fontStyle": "bold" + } + }, + { + "name": "Fallback method calls", + "scope": ["meta.method-call entity.name.function"], + "settings": { + "foreground": "#fff", + "fontStyle": "" + } + }, + { + "name": "Fallback function calls", + "scope": [ + "meta.function-call entity.name.function", + "meta.function-call support.function", + "meta.function.call entity.name.function" + ], + "settings": { + "foreground": "#fff", + "fontStyle": "" + } + }, + { + "name": "Fallback enums & constants", + "scope": ["constant.enum", "constant.other"], + "settings": { + "foreground": "#fff8" + } + }, + { + "name": "Fallback Properties & func arguments", + "scope": [ + "variable.other.property", + "entity.name.goto-label", + "entity.name.variable.parameter" + ], + "settings": { + "foreground": "#fff" + } + }, + { + "name": "Fallback functions & methods declarations", + "scope": [ + "entity.name.function", + "support.function", + "support.function.constructor", + "entity.name.function meta.function-call meta.method-call" + ], + "settings": { + "foreground": "#fff", + "fontStyle": "bold" + } + }, + { + "name": "HTML Tags", + "scope": [ + "meta.tag entity.name.tag.html", + "entity.name.tag.template.html" + ], + "settings": { + "foreground": "#fff" + } + }, + { + "name": "HTML Attributes", + "scope": ["entity.other.attribute-name.html"], + "settings": { + "foreground": "#fff8" + } + }, + { + "name": "HTML Custom Tag", + "scope": ["meta.tag.other.unrecognized.html entity.name.tag.html"], + "settings": { + "foreground": "#fff" + } + }, + { + "name": "HTML Keywords", + "scope": ["text.html keyword"], + "settings": { + "foreground": "#fff" + } + }, + { + "name": "Punctuations", + "scope": ["punctuation", "meta.brace"], + "settings": { + "foreground": "#fff8" + } + } + ] +} diff --git a/docs/package.json b/docs/package.json index 499e275e72..610e188d3a 100644 --- a/docs/package.json +++ b/docs/package.json @@ -23,8 +23,10 @@ "react-dom": "18.2.0", "react-use": "17.4.0", "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" }, "devDependencies": { diff --git a/docs/ui/ComponentDemo.tsx b/docs/ui/ComponentDemo.tsx index 0676eeeb02..b88cc613ed 100644 --- a/docs/ui/ComponentDemo.tsx +++ b/docs/ui/ComponentDemo.tsx @@ -1,29 +1,41 @@ -import { ReactNode } from 'react'; +import { ReactNode, useState } from 'react'; import { registry } from '@/lib/registry'; - +import { Button, MarigoldProvider } from './marigold'; +import { useThemeSwitch } from '@/app/components/components'; +import { Theme } from '../../packages/system/src'; export interface ComponentDemoProps { name: string; - source: string; children?: ReactNode; } -export const ComponentDemo = ({ - name, - source, - children, -}: ComponentDemoProps) => { +export const ComponentDemo = ({ name, children }: ComponentDemoProps) => { const Demo = registry[name]; - + const { current, themes } = useThemeSwitch(); + const [showCode, setShowCode] = useState(true); + const buttonStyles = + 'rounded-none border-solid border-transparent border-b-slate-800 p-2'; return ( -
- 
-        {source}
-
-
-
{children}
-
- + +
+
+ + +
+
{children}
+
+ +
-
+ ); }; diff --git a/docs/ui/CopyButton.tsx b/docs/ui/CopyButton.tsx new file mode 100644 index 0000000000..f852eaff5a --- /dev/null +++ b/docs/ui/CopyButton.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { Button } from '@marigold/components'; + +interface CopyProps { + codeString: string; +} + +export const CopyButton = ({ codeString }: CopyProps) => { + const [isCopied, setIsCopied] = React.useState(false); + return ( + + ); +}; + +export const copyToClipboard = (codeString: string) => { + navigator.clipboard.writeText(codeString); +}; diff --git a/docs/ui/mdx.tsx b/docs/ui/mdx.tsx index 26d9751118..fa1981efab 100644 --- a/docs/ui/mdx.tsx +++ b/docs/ui/mdx.tsx @@ -7,6 +7,7 @@ import { IconList } from '@/app/components'; import { Headline, Message, Link, Text } from './'; import { ComponentDemo } from './ComponentDemo'; +import { CopyButton } from './CopyButton'; // Typography // --------------- @@ -35,14 +36,30 @@ const typography = {
), code: (props: HTMLAttributes) => ( - + ), hr: ({ ...props }: HTMLAttributes) => (
), + // `__rawString__` is source code to be copied + pre: ({ + __rawString__, + ...props + }: HTMLAttributes & { __rawString__: string }) => { + return ( +
+ 
+          

+            
+          

+          {props.children}
+
+
+ ); + }, }; // MDX Components diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f3b4e9fc7d..0c453fc449 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,9 +1,5 @@ lockfileVersion: '6.0' -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false - importers: .: dependencies: @@ -142,7 +138,7 @@ importers: version: 8.0.3(@babel/plugin-syntax-flow@7.16.7)(@babel/plugin-transform-react-jsx@7.17.3)(eslint@8.44.0) eslint-plugin-import: specifier: 2.27.5 - version: 2.27.5(@typescript-eslint/parser@5.61.0)(eslint@8.44.0) + version: 2.27.5(@typescript-eslint/parser@5.61.0)(eslint-import-resolver-typescript@3.5.5)(eslint@8.44.0) eslint-plugin-jest: specifier: 27.2.1 version: 27.2.1(@typescript-eslint/eslint-plugin@5.61.0)(eslint@8.44.0)(jest@29.5.0)(typescript@5.0.4) @@ -377,12 +373,18 @@ importers: rehype-autolink-headings: specifier: 6.1.1 version: 6.1.1 + rehype-pretty-code: + specifier: 0.10.0 + version: 0.10.0(shiki@0.14.3) rehype-slug: specifier: 5.1.0 version: 5.1.0 remark-gfm: specifier: 3.0.1 version: 3.0.1 + shiki: + specifier: 0.14.3 + version: 0.14.3 tailwindcss: specifier: 3.3.2 version: 3.3.2 @@ -9557,6 +9559,13 @@ packages: engines: { node: '>=12' } dev: false + /ansi-sequence-parser@1.1.0: + resolution: + { + integrity: sha512-lEm8mt52to2fT8GhciPCGeCXACSz2UwIN4X2e2LJSnZ5uAbn2/dsYdOmUXq0AtWS5cpAupysIneExOgH0Vd2TQ==, + } + dev: false + /ansi-styles@3.2.1: resolution: { @@ -12945,7 +12954,7 @@ packages: confusing-browser-globals: 1.0.11 eslint: 8.44.0 eslint-plugin-flowtype: 8.0.3(@babel/plugin-syntax-flow@7.16.7)(@babel/plugin-transform-react-jsx@7.17.3)(eslint@8.44.0) - eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.61.0)(eslint@8.44.0) + eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.61.0)(eslint-import-resolver-typescript@3.5.5)(eslint@8.44.0) eslint-plugin-jest: 25.7.0(@typescript-eslint/eslint-plugin@5.61.0)(eslint@8.44.0)(jest@29.5.0)(typescript@5.0.4) eslint-plugin-jsx-a11y: 6.7.1(eslint@8.44.0) eslint-plugin-react: 7.32.2(eslint@8.44.0) @@ -13088,42 +13097,6 @@ packages: - supports-color dev: false - /eslint-plugin-import@2.27.5(@typescript-eslint/parser@5.61.0)(eslint@8.44.0): - resolution: - { - integrity: sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==, - } - engines: { node: '>=4' } - peerDependencies: - '@typescript-eslint/parser': '*' - eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 - peerDependenciesMeta: - '@typescript-eslint/parser': - optional: true - dependencies: - '@typescript-eslint/parser': 5.61.0(eslint@8.44.0)(typescript@5.0.4) - array-includes: 3.1.6 - array.prototype.flat: 1.3.1 - array.prototype.flatmap: 1.3.1 - debug: 3.2.7 - doctrine: 2.1.0 - eslint: 8.44.0 - eslint-import-resolver-node: 0.3.7 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.61.0)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.44.0) - has: 1.0.3 - is-core-module: 2.12.1 - is-glob: 4.0.3 - minimatch: 3.1.2 - object.values: 1.1.6 - resolve: 1.22.2 - semver: 6.3.0 - tsconfig-paths: 3.14.2 - transitivePeerDependencies: - - eslint-import-resolver-typescript - - eslint-import-resolver-webpack - - supports-color - dev: false - /eslint-plugin-jest@25.7.0(@typescript-eslint/eslint-plugin@5.61.0)(eslint@8.44.0)(jest@29.5.0)(typescript@5.0.4): resolution: { @@ -14911,6 +14884,18 @@ packages: readable-stream: 3.6.2 safe-buffer: 5.2.1 + /hash-obj@4.0.0: + resolution: + { + integrity: sha512-FwO1BUVWkyHasWDW4S8o0ssQXjvyghLV2rfVhnN36b2bbcj45eGiuzdn9XOvOpjV3TKQD7Gm2BWNXdE9V4KKYg==, + } + engines: { node: '>=12' } + dependencies: + is-obj: 3.0.0 + sort-keys: 5.0.0 + type-fest: 1.4.0 + dev: false + /hash-wasm@4.9.0: resolution: { @@ -15850,6 +15835,14 @@ packages: } engines: { node: '>=0.12.0' } + /is-obj@3.0.0: + resolution: + { + integrity: sha512-IlsXEHOjtKhpN8r/tRFj2nDyTmHvcfNeu/nrRIcXE17ROeatXchkojffa1SpdqW4cr/Fj6QkEf/Gn4zf6KKvEQ==, + } + engines: { node: '>=12' } + dev: false + /is-path-cwd@2.2.0: resolution: { @@ -19560,6 +19553,13 @@ packages: json-parse-even-better-errors: 2.3.1 lines-and-columns: 1.2.4 + /parse-numeric-range@1.3.0: + resolution: + { + integrity: sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==, + } + dev: false + /parse5@6.0.1: resolution: { @@ -21461,6 +21461,21 @@ packages: unist-util-visit: 4.1.2 dev: false + /rehype-pretty-code@0.10.0(shiki@0.14.3): + resolution: + { + integrity: sha512-qCD071Y+vUxEy9yyrATPk2+W9q7qCbzZgtc9suZhu75bmRQvOlBhJt4d3WvqSMTamkKoFkvqtCjyAk+ggH+aXQ==, + } + engines: { node: '>=16' } + peerDependencies: + shiki: 0.x + dependencies: + '@types/hast': 2.3.4 + hash-obj: 4.0.0 + parse-numeric-range: 1.3.0 + shiki: 0.14.3 + dev: false + /rehype-slug@5.1.0: resolution: { @@ -22206,6 +22221,18 @@ packages: rechoir: 0.6.2 dev: true + /shiki@0.14.3: + resolution: + { + integrity: sha512-U3S/a+b0KS+UkTyMjoNojvTgrBHjgp7L6ovhFVZsXmBGnVdQ4K4U9oK0z63w538S91ATngv1vXigHCSWOwnr+g==, + } + dependencies: + ansi-sequence-parser: 1.1.0 + jsonc-parser: 3.2.0 + vscode-oniguruma: 1.7.0 + vscode-textmate: 8.0.0 + dev: false + /side-channel@1.0.4: resolution: { @@ -22315,6 +22342,16 @@ packages: transitivePeerDependencies: - supports-color + /sort-keys@5.0.0: + resolution: + { + integrity: sha512-Pdz01AvCAottHTPQGzndktFNdbRA75BgOfeT1hH+AMnJFv8lynkPi42rfeEhpx1saTEI3YNMWxfqu0sFD1G8pw==, + } + engines: { node: '>=12' } + dependencies: + is-plain-obj: 4.1.0 + dev: false + /source-list-map@2.0.1: resolution: { @@ -23754,6 +23791,14 @@ packages: } engines: { node: '>=8' } + /type-fest@1.4.0: + resolution: + { + integrity: sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==, + } + engines: { node: '>=10' } + dev: false + /type-fest@2.19.0: resolution: { @@ -24429,6 +24474,20 @@ packages: integrity: sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==, } + /vscode-oniguruma@1.7.0: + resolution: + { + integrity: sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==, + } + dev: false + + /vscode-textmate@8.0.0: + resolution: + { + integrity: sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==, + } + dev: false + /w3c-xmlserializer@4.0.0: resolution: { @@ -25085,3 +25144,7 @@ packages: which: 3.0.1 yaml: 2.3.1 dev: false + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false From e4ef364ea0642e956e1e2a249bb7a28cfd274594 Mon Sep 17 00:00:00 2001 From: OsamaAbdellateef Date: Tue, 18 Jul 2023 15:32:21 +0300 Subject: [PATCH 07/14] Fixing lock file --- pnpm-lock.yaml | 147 +++++++++++++++++++++++++++++++++++-------------- 1 file changed, 105 insertions(+), 42 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 20ee9044b2..6049462e5e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,9 +1,5 @@ lockfileVersion: '6.0' -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false - importers: .: dependencies: @@ -142,7 +138,7 @@ importers: version: 8.0.3(@babel/plugin-syntax-flow@7.16.7)(@babel/plugin-transform-react-jsx@7.17.3)(eslint@8.44.0) eslint-plugin-import: specifier: 2.27.5 - version: 2.27.5(@typescript-eslint/parser@5.61.0)(eslint@8.44.0) + version: 2.27.5(@typescript-eslint/parser@5.61.0)(eslint-import-resolver-typescript@3.5.5)(eslint@8.44.0) eslint-plugin-jest: specifier: 27.2.1 version: 27.2.1(@typescript-eslint/eslint-plugin@5.61.0)(eslint@8.44.0)(jest@29.5.0)(typescript@5.0.4) @@ -383,12 +379,18 @@ importers: rehype-autolink-headings: specifier: 6.1.1 version: 6.1.1 + rehype-pretty-code: + specifier: 0.10.0 + version: 0.10.0(shiki@0.14.3) rehype-slug: specifier: 5.1.0 version: 5.1.0 remark-gfm: specifier: 3.0.1 version: 3.0.1 + shiki: + specifier: 0.14.3 + version: 0.14.3 tailwindcss: specifier: 3.3.2 version: 3.3.2(ts-node@10.9.1) @@ -9546,6 +9548,13 @@ packages: engines: { node: '>=12' } dev: false + /ansi-sequence-parser@1.1.0: + resolution: + { + integrity: sha512-lEm8mt52to2fT8GhciPCGeCXACSz2UwIN4X2e2LJSnZ5uAbn2/dsYdOmUXq0AtWS5cpAupysIneExOgH0Vd2TQ==, + } + dev: false + /ansi-styles@3.2.1: resolution: { @@ -12879,7 +12888,7 @@ packages: confusing-browser-globals: 1.0.11 eslint: 8.44.0 eslint-plugin-flowtype: 8.0.3(@babel/plugin-syntax-flow@7.16.7)(@babel/plugin-transform-react-jsx@7.17.3)(eslint@8.44.0) - eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.61.0)(eslint@8.44.0) + eslint-plugin-import: 2.27.5(@typescript-eslint/parser@5.61.0)(eslint-import-resolver-typescript@3.5.5)(eslint@8.44.0) eslint-plugin-jest: 25.7.0(@typescript-eslint/eslint-plugin@5.61.0)(eslint@8.44.0)(jest@29.5.0)(typescript@5.0.4) eslint-plugin-jsx-a11y: 6.7.1(eslint@8.44.0) eslint-plugin-react: 7.32.2(eslint@8.44.0) @@ -13022,42 +13031,6 @@ packages: - supports-color dev: false - /eslint-plugin-import@2.27.5(@typescript-eslint/parser@5.61.0)(eslint@8.44.0): - resolution: - { - integrity: sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==, - } - engines: { node: '>=4' } - peerDependencies: - '@typescript-eslint/parser': '*' - eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 - peerDependenciesMeta: - '@typescript-eslint/parser': - optional: true - dependencies: - '@typescript-eslint/parser': 5.61.0(eslint@8.44.0)(typescript@5.0.4) - array-includes: 3.1.6 - array.prototype.flat: 1.3.1 - array.prototype.flatmap: 1.3.1 - debug: 3.2.7 - doctrine: 2.1.0 - eslint: 8.44.0 - eslint-import-resolver-node: 0.3.7 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@5.61.0)(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.44.0) - has: 1.0.3 - is-core-module: 2.12.1 - is-glob: 4.0.3 - minimatch: 3.1.2 - object.values: 1.1.6 - resolve: 1.22.2 - semver: 6.3.0 - tsconfig-paths: 3.14.2 - transitivePeerDependencies: - - eslint-import-resolver-typescript - - eslint-import-resolver-webpack - - supports-color - dev: false - /eslint-plugin-jest@25.7.0(@typescript-eslint/eslint-plugin@5.61.0)(eslint@8.44.0)(jest@29.5.0)(typescript@5.0.4): resolution: { @@ -14842,6 +14815,18 @@ packages: readable-stream: 3.6.2 safe-buffer: 5.2.1 + /hash-obj@4.0.0: + resolution: + { + integrity: sha512-FwO1BUVWkyHasWDW4S8o0ssQXjvyghLV2rfVhnN36b2bbcj45eGiuzdn9XOvOpjV3TKQD7Gm2BWNXdE9V4KKYg==, + } + engines: { node: '>=12' } + dependencies: + is-obj: 3.0.0 + sort-keys: 5.0.0 + type-fest: 1.4.0 + dev: false + /hash-wasm@4.9.0: resolution: { @@ -15774,6 +15759,14 @@ packages: } engines: { node: '>=0.12.0' } + /is-obj@3.0.0: + resolution: + { + integrity: sha512-IlsXEHOjtKhpN8r/tRFj2nDyTmHvcfNeu/nrRIcXE17ROeatXchkojffa1SpdqW4cr/Fj6QkEf/Gn4zf6KKvEQ==, + } + engines: { node: '>=12' } + dev: false + /is-path-cwd@2.2.0: resolution: { @@ -19418,6 +19411,13 @@ packages: json-parse-even-better-errors: 2.3.1 lines-and-columns: 1.2.4 + /parse-numeric-range@1.3.0: + resolution: + { + integrity: sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==, + } + dev: false + /parse5@6.0.1: resolution: { @@ -21306,6 +21306,21 @@ packages: unist-util-visit: 4.1.2 dev: false + /rehype-pretty-code@0.10.0(shiki@0.14.3): + resolution: + { + integrity: sha512-qCD071Y+vUxEy9yyrATPk2+W9q7qCbzZgtc9suZhu75bmRQvOlBhJt4d3WvqSMTamkKoFkvqtCjyAk+ggH+aXQ==, + } + engines: { node: '>=16' } + peerDependencies: + shiki: 0.x + dependencies: + '@types/hast': 2.3.4 + hash-obj: 4.0.0 + parse-numeric-range: 1.3.0 + shiki: 0.14.3 + dev: false + /rehype-slug@5.1.0: resolution: { @@ -22051,6 +22066,18 @@ packages: rechoir: 0.6.2 dev: true + /shiki@0.14.3: + resolution: + { + integrity: sha512-U3S/a+b0KS+UkTyMjoNojvTgrBHjgp7L6ovhFVZsXmBGnVdQ4K4U9oK0z63w538S91ATngv1vXigHCSWOwnr+g==, + } + dependencies: + ansi-sequence-parser: 1.1.0 + jsonc-parser: 3.2.0 + vscode-oniguruma: 1.7.0 + vscode-textmate: 8.0.0 + dev: false + /side-channel@1.0.4: resolution: { @@ -22160,6 +22187,16 @@ packages: transitivePeerDependencies: - supports-color + /sort-keys@5.0.0: + resolution: + { + integrity: sha512-Pdz01AvCAottHTPQGzndktFNdbRA75BgOfeT1hH+AMnJFv8lynkPi42rfeEhpx1saTEI3YNMWxfqu0sFD1G8pw==, + } + engines: { node: '>=12' } + dependencies: + is-plain-obj: 4.1.0 + dev: false + /source-list-map@2.0.1: resolution: { @@ -23531,6 +23568,14 @@ packages: } engines: { node: '>=8' } + /type-fest@1.4.0: + resolution: + { + integrity: sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==, + } + engines: { node: '>=10' } + dev: false + /type-fest@2.19.0: resolution: { @@ -24205,6 +24250,20 @@ packages: integrity: sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==, } + /vscode-oniguruma@1.7.0: + resolution: + { + integrity: sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==, + } + dev: false + + /vscode-textmate@8.0.0: + resolution: + { + integrity: sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==, + } + dev: false + /w3c-xmlserializer@4.0.0: resolution: { @@ -24848,3 +24907,7 @@ packages: which: 3.0.1 yaml: 2.3.1 dev: false + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false From bb03b9a7692d83cf14a62cbe97531e2392dafc37 Mon Sep 17 00:00:00 2001 From: OsamaAbdellateef Date: Tue, 18 Jul 2023 17:22:04 +0300 Subject: [PATCH 08/14] Resolving review comments --- docs/lib/registry.ts | 10 ---------- docs/registry/index.tsx | 6 +++++- docs/ui/ComponentDemo.tsx | 2 +- 3 files changed, 6 insertions(+), 12 deletions(-) delete mode 100644 docs/lib/registry.ts diff --git a/docs/lib/registry.ts b/docs/lib/registry.ts deleted file mode 100644 index acd359a769..0000000000 --- a/docs/lib/registry.ts +++ /dev/null @@ -1,10 +0,0 @@ -import dynamic from 'next/dynamic'; - -export const registry: any = { - 'button-variant': dynamic( - () => import('@/content/components/button/button-variant.demo') - ), - 'accordion-basic': dynamic( - () => import('@/content/components/accordion/accordion-basic.demo') - ), -}; diff --git a/docs/registry/index.tsx b/docs/registry/index.tsx index 5f70fa32c2..915cfcd467 100644 --- a/docs/registry/index.tsx +++ b/docs/registry/index.tsx @@ -3,7 +3,11 @@ // Do not edit this file directly. import dynamic from 'next/dynamic'; -export const registry = { +interface Registery { + [key: string]: any; +} + +export const registry: Registery = { 'accordion-basic': { name: 'accordion-basic', demo: dynamic( diff --git a/docs/ui/ComponentDemo.tsx b/docs/ui/ComponentDemo.tsx index cd89589c72..2256fde5b1 100644 --- a/docs/ui/ComponentDemo.tsx +++ b/docs/ui/ComponentDemo.tsx @@ -1,8 +1,8 @@ import { ReactNode, useState } from 'react'; -import { registry } from '@/lib/registry'; import { Button, MarigoldProvider } from './marigold'; import { useThemeSwitch } from '@/app/components/[...slug]/_components'; import { Theme } from '../../packages/system/src'; +import { registry } from '@/registry'; export interface ComponentDemoProps { name: string; children?: ReactNode; From 36d907f61f770610717659d7498d1af1dd05c7b2 Mon Sep 17 00:00:00 2001 From: OsamaAbdellateef Date: Tue, 18 Jul 2023 23:47:21 +0300 Subject: [PATCH 09/14] Fixing demo --- docs/registry/index.tsx | 6 +++++- docs/ui/ComponentDemo.tsx | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/docs/registry/index.tsx b/docs/registry/index.tsx index 915cfcd467..caf5ef4d40 100644 --- a/docs/registry/index.tsx +++ b/docs/registry/index.tsx @@ -4,7 +4,11 @@ import dynamic from 'next/dynamic'; interface Registery { - [key: string]: any; + [key: string]: { + name: string; + demo: any; + file: string; + }; } export const registry: Registery = { diff --git a/docs/ui/ComponentDemo.tsx b/docs/ui/ComponentDemo.tsx index 2256fde5b1..76c599ddea 100644 --- a/docs/ui/ComponentDemo.tsx +++ b/docs/ui/ComponentDemo.tsx @@ -9,7 +9,7 @@ export interface ComponentDemoProps { } export const ComponentDemo = ({ name, children }: ComponentDemoProps) => { - const Demo = registry[name]; + const Demo = registry[name].demo; const { current, themes } = useThemeSwitch(); const [showCode, setShowCode] = useState(true); const buttonStyles = From 877bc686318f98de167d8d41c9d7bc6b87726b9d Mon Sep 17 00:00:00 2001 From: OsamaAbdellateef Date: Wed, 19 Jul 2023 22:59:44 +0300 Subject: [PATCH 10/14] resolving review comments --- docs/contentlayer.config.ts | 10 - docs/light.json | 380 ------------------------------------ docs/package.json | 1 + docs/registry/index.tsx | 24 +-- docs/ui/ComponentDemo.tsx | 2 +- docs/ui/CopyButton.tsx | 15 +- 6 files changed, 15 insertions(+), 417 deletions(-) delete mode 100644 docs/light.json diff --git a/docs/contentlayer.config.ts b/docs/contentlayer.config.ts index 56cf9d97f5..fab4a4e69b 100644 --- a/docs/contentlayer.config.ts +++ b/docs/contentlayer.config.ts @@ -8,11 +8,8 @@ import remarkGfm from 'remark-gfm'; import rehypeSlug from 'rehype-slug'; import rehypePrettyCode from 'rehype-pretty-code'; import rehypeAutolinkHeadings from 'rehype-autolink-headings'; -import { getHighlighter, loadTheme } from 'shiki'; import { visit } from 'unist-util-visit'; -import path from 'node:path'; - import { rehypeComponentDemo } from './lib/mdx/rehype-component-demo'; import { siteConfig } from './lib/config'; @@ -120,13 +117,6 @@ export default makeSource({ [ rehypePrettyCode, { - getHighlighter: async () => { - const theme = await loadTheme( - // loading theme file - path.join(process.cwd(), './light.json') - ); - return await getHighlighter({ theme }); - }, onVisitLine(node: any) { if (node.children.length === 0) { node.children = [{ type: 'text', value: ' ' }]; diff --git a/docs/light.json b/docs/light.json deleted file mode 100644 index d1a46c3b7d..0000000000 --- a/docs/light.json +++ /dev/null @@ -1,380 +0,0 @@ -{ - "name": "Lambda Studio — Blackout", - "semanticHighlighting": true, - "colors": { - "editorLink.activeForeground": "#ca8a0488", - "foreground": "#fff8", - "button.background": "#fff", - "button.foreground": "#000", - "button.hoverBackground": "#fffb", - "list.highlightForeground": "#fff", - "textLink.foreground": "#fff", - "scrollbar.shadow": "#000", - "textLink.activeForeground": "#fff8", - "editor.lineHighlightBackground": "#8881", - "editor.lineHighlightBorder": "#8882", - "editorCursor.foreground": "#fff", - "editor.findMatchBackground": "#fff8", - "editor.findMatchHighlightBackground": "#fff2", - "list.activeSelectionForeground": "#fff", - "list.focusForeground": "#fff", - "list.hoverForeground": "#fff", - "list.inactiveSelectionForeground": "#fff", - "list.inactiveSelectionBackground": "#000", - "list.focusBackground": "#000", - "list.focusAndSelectionOutline": "#000", - "list.focusHighlightForeground": "#fff", - "list.hoverBackground": "#000", - "list.focusOutline": "#000", - "list.activeSelectionBackground": "#000", - "editorIndentGuide.background": "#fff2", - "editor.background": "#000", - "editor.foreground": "#fff", - "editor.foldBackground": "#000", - "editor.hoverHighlightBackground": "#000", - "editor.selectionBackground": "#8888", - "editor.inactiveSelectionBackground": "#8882", - "gitDecoration.modifiedResourceForeground": "#fff", - "gitDecoration.untrackedResourceForeground": "#a7cb7b", - "gitDecoration.conflictingResourceForeground": "#ca8a04", - "gitDecoration.deletedResourceForeground": "#c97b89", - "listFilterWidget.background": "#000", - "input.background": "#fff1", - "titleBar.activeForeground": "#fff", - "editorWidget.background": "#000", - "editorGutter.background": "#000", - "debugToolBar.background": "#000", - "commandCenter.background": "#000", - "sideBarSectionHeader.background": "#000", - "focusBorder": "#fff8", - "titleBar.activeBackground": "#000", - "titleBar.inactiveBackground": "#000", - "breadcrumb.background": "#000", - "activityBar.background": "#000", - "activityBar.foreground": "#fff8", - "panel.background": "#000", - "sideBar.background": "#000", - "sideBarTitle.foreground": "#fff8", - "tab.hoverBackground": "#000", - "terminal.background": "#000", - "statusBar.background": "#000", - "statusBar.foreground": "#fff8", - "selection.background": "#fff2", - "editorPane.background": "#000", - "badge.background": "#000", - "banner.background": "#000", - "menu.background": "#000", - "activityBarBadge.background": "#000", - "activityBarBadge.foreground": "#fff8", - "editorLineNumber.foreground": "#fff2", - "editorLineNumber.activeForeground": "#fff8", - "statusBarItem.errorBackground": "#f43f5e" - }, - "semanticTokenColors": { - "comment": { - "foreground": "#fff4" - }, - "keyword": { - "foreground": "#fff8" - }, - "string": { - "foreground": "#fff8" - }, - "selfKeyword": { - "foreground": "#fff", - "bold": true - }, - "method.declaration": { - "foreground": "#fff", - "bold": true - }, - "method.definition": { - "foreground": "#fff", - "bold": true - }, - "method": { - "foreground": "#fff", - "bold": false - }, - "function.declaration": { - "foreground": "#fff", - "bold": true - }, - "function.definition": { - "foreground": "#fff", - "bold": true - }, - "function": { - "foreground": "#fff", - "bold": false - }, - "property": { - "foreground": "#fff" - }, - "enumMember": { - "foreground": "#fff8", - "bold": false - }, - "enum": { - "foreground": "#fff", - "bold": true - }, - "boolean": { - "foreground": "#fff8" - }, - "number": { - "foreground": "#fff8" - }, - "type": { - "foreground": "#fff", - "bold": true - }, - "typeAlias": { - "foreground": "#fff", - "bold": true - }, - "class": { - "foreground": "#fff", - "bold": true - }, - "selfTypeKeyword": { - "foreground": "#fff", - "bold": true - }, - "builtinType": { - "foreground": "#fff", - "bold": true - }, - "interface": { - "foreground": "#fff8", - "bold": false - }, - "typeParameter": { - "foreground": "#fff", - "bold": true - }, - "lifetime": { - "foreground": "#fff8", - "italic": false, - "bold": false - }, - "namespace": { - "foreground": "#fff" - }, - "macro": { - "foreground": "#fff", - "bold": false - }, - "decorator": { - "foreground": "#fff", - "bold": false - }, - "builtinAttribute": { - "foreground": "#fff", - "bold": false - }, - "generic.attribute": { - "foreground": "#fff" - }, - "derive": { - "foreground": "#fff" - }, - "operator": { - "foreground": "#fff8" - }, - "variable": { - "foreground": "#fff" - }, - "variable.readonly": { - "foreground": "#fff8" - }, - "parameter": { - "foreground": "#fff" - }, - "variable.mutable": { - "underline": true - }, - "parameter.mutable": { - "underline": true - }, - "selfKeyword.mutable": { - "underline": true - }, - "variable.constant": { - "foreground": "#fff8" - }, - "struct": { - "foreground": "#fff", - "bold": true - } - }, - "tokenColors": [ - { - "name": "Fallback Operator", - "scope": ["keyword.operator"], - "settings": { - "foreground": "#fff8" - } - }, - { - "name": "Fallback keywords", - "scope": [ - "storage.type.ts", - "keyword", - "keyword.other", - "keyword.control", - "storage.type", - "storage.modifier" - ], - "settings": { - "foreground": "#fff8" - } - }, - { - "name": "Fallback strings", - "scope": ["string"], - "settings": { - "foreground": "#fff8" - } - }, - { - "name": "Fallback JSON Properties", - "scope": ["support.type.property-name.json"], - "settings": { - "foreground": "#fff" - } - }, - { - "name": "Fallback string variables", - "scope": ["string variable", "string meta.interpolation"], - "settings": { - "foreground": "#fff" - } - }, - { - "name": "Fallback comments", - "scope": ["comment"], - "settings": { - "foreground": "#fff4" - } - }, - { - "name": "Fallback constants", - "scope": ["constant"], - "settings": { - "foreground": "#fff8" - } - }, - { - "name": "Fallback self/this", - "scope": ["variable.language.this"], - "settings": { - "foreground": "#fff" - } - }, - { - "name": "Fallback types", - "scope": [ - "entity.other.alias", - "source.php support.class", - "entity.name.type", - "meta.function-call support.class", - "keyword.other.type", - "entity.other.inherited-class" - ], - "settings": { - "foreground": "#fff", - "fontStyle": "bold" - } - }, - { - "name": "Fallback method calls", - "scope": ["meta.method-call entity.name.function"], - "settings": { - "foreground": "#fff", - "fontStyle": "" - } - }, - { - "name": "Fallback function calls", - "scope": [ - "meta.function-call entity.name.function", - "meta.function-call support.function", - "meta.function.call entity.name.function" - ], - "settings": { - "foreground": "#fff", - "fontStyle": "" - } - }, - { - "name": "Fallback enums & constants", - "scope": ["constant.enum", "constant.other"], - "settings": { - "foreground": "#fff8" - } - }, - { - "name": "Fallback Properties & func arguments", - "scope": [ - "variable.other.property", - "entity.name.goto-label", - "entity.name.variable.parameter" - ], - "settings": { - "foreground": "#fff" - } - }, - { - "name": "Fallback functions & methods declarations", - "scope": [ - "entity.name.function", - "support.function", - "support.function.constructor", - "entity.name.function meta.function-call meta.method-call" - ], - "settings": { - "foreground": "#fff", - "fontStyle": "bold" - } - }, - { - "name": "HTML Tags", - "scope": [ - "meta.tag entity.name.tag.html", - "entity.name.tag.template.html" - ], - "settings": { - "foreground": "#fff" - } - }, - { - "name": "HTML Attributes", - "scope": ["entity.other.attribute-name.html"], - "settings": { - "foreground": "#fff8" - } - }, - { - "name": "HTML Custom Tag", - "scope": ["meta.tag.other.unrecognized.html entity.name.tag.html"], - "settings": { - "foreground": "#fff" - } - }, - { - "name": "HTML Keywords", - "scope": ["text.html keyword"], - "settings": { - "foreground": "#fff" - } - }, - { - "name": "Punctuations", - "scope": ["punctuation", "meta.brace"], - "settings": { - "foreground": "#fff8" - } - } - ] -} diff --git a/docs/package.json b/docs/package.json index 1f4e06f851..efd3e7f14d 100644 --- a/docs/package.json +++ b/docs/package.json @@ -25,6 +25,7 @@ "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", diff --git a/docs/registry/index.tsx b/docs/registry/index.tsx index 1979bed37f..d9d01bf3a5 100644 --- a/docs/registry/index.tsx +++ b/docs/registry/index.tsx @@ -3,15 +3,7 @@ // Do not edit this file directly. import dynamic from 'next/dynamic'; -interface Registery { - [key: string]: { - name: string; - demo: any; - file: string; - }; -} - -export const registry: Registery = { +export const registry = { 'accordion-basic': { name: 'accordion-basic', demo: dynamic( @@ -36,13 +28,6 @@ export const registry: Registery = { demo: dynamic(() => import('@/content/components/aside/space.demo')), file: 'content/components/aside/space.demo.tsx', }, - 'button-variant': { - name: 'button-variant', - demo: dynamic( - () => import('@/content/components/button/button-variant.demo') - ), - file: 'content/components/button/button-variant.demo.tsx', - }, 'horizontal-breakout': { name: 'horizontal-breakout', demo: dynamic( @@ -64,4 +49,11 @@ export const registry: Registery = { ), file: 'content/components/breakout/vertical-breakout.demo.tsx', }, + 'button-variant': { + name: 'button-variant', + demo: dynamic( + () => import('@/content/components/button/button-variant.demo') + ), + file: 'content/components/button/button-variant.demo.tsx', + }, } as const; diff --git a/docs/ui/ComponentDemo.tsx b/docs/ui/ComponentDemo.tsx index 76c599ddea..2f001adeb8 100644 --- a/docs/ui/ComponentDemo.tsx +++ b/docs/ui/ComponentDemo.tsx @@ -9,7 +9,7 @@ export interface ComponentDemoProps { } export const ComponentDemo = ({ name, children }: ComponentDemoProps) => { - const Demo = registry[name].demo; + const Demo = (registry as any)[name].demo; const { current, themes } = useThemeSwitch(); const [showCode, setShowCode] = useState(true); const buttonStyles = diff --git a/docs/ui/CopyButton.tsx b/docs/ui/CopyButton.tsx index 159b9c2da9..548860439e 100644 --- a/docs/ui/CopyButton.tsx +++ b/docs/ui/CopyButton.tsx @@ -1,20 +1,19 @@ 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, setIsCopied] = React.useState(false); + const [isCopied, setCopied] = useClipboard(codeString, { + successDuration: 1000, + }); return ( ); }; - -export const copyToClipboard = (codeString: string) => { - navigator.clipboard.writeText(codeString); -}; From 007a845a15aa0f71885adf612d20f5336733c837 Mon Sep 17 00:00:00 2001 From: OsamaAbdellateef Date: Thu, 20 Jul 2023 09:39:48 +0300 Subject: [PATCH 11/14] Fix lock file --- docs/app/[...slug]/page.tsx | 1 - pnpm-lock.yaml | 17 +++++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/docs/app/[...slug]/page.tsx b/docs/app/[...slug]/page.tsx index 3330f8c628..ee9578c6c4 100644 --- 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/pnpm-lock.yaml b/pnpm-lock.yaml index 6049462e5e..29d0f61fbe 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -376,6 +376,9 @@ importers: react-use: specifier: 17.4.0 version: 17.4.0(react-dom@18.2.0)(react@18.2.0) + react-use-clipboard: + specifier: 1.0.9 + version: 1.0.9(react-dom@18.2.0)(react@18.2.0) rehype-autolink-headings: specifier: 6.1.1 version: 6.1.1 @@ -21042,6 +21045,20 @@ packages: tslib: 2.6.0 dev: false + /react-use-clipboard@1.0.9(react-dom@18.2.0)(react@18.2.0): + resolution: + { + integrity: sha512-OcMzc14usXhqQnAkvzmhCXAbW5WBT2LSgscVh2vKHXZfg72jFsSOsEearqdeC/nUj8YxEfLnziqe7AE7YkWFwA==, + } + peerDependencies: + react: ^16.8.0 || ^17 || ^18 + react-dom: ^16.8.0 || ^17 || ^18 + dependencies: + copy-to-clipboard: 3.3.3 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /react-use@17.4.0(react-dom@18.2.0)(react@18.2.0): resolution: { From 592cf67fcbcdb9e49194dba702dac2ba5c0a5ac4 Mon Sep 17 00:00:00 2001 From: OsamaAbdellateef Date: Thu, 20 Jul 2023 10:02:51 +0300 Subject: [PATCH 12/14] Deleting duplicated plugin --- docs/contentlayer.config.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/contentlayer.config.ts b/docs/contentlayer.config.ts index fab4a4e69b..47590317fc 100644 --- a/docs/contentlayer.config.ts +++ b/docs/contentlayer.config.ts @@ -113,7 +113,6 @@ export default makeSource({ } }); }, - [rehypeAutolinkHeadings, { behavior: 'wrap' }], [ rehypePrettyCode, { From d36196e3604047ed01fb79aae3b1db4a3493696a Mon Sep 17 00:00:00 2001 From: sarahgm Date: Thu, 20 Jul 2023 10:58:36 +0200 Subject: [PATCH 13/14] save --- docs/registry/index.tsx | 46 +++++++++++++++++++-------------------- docs/ui/ComponentDemo.tsx | 12 +++++----- 2 files changed, 29 insertions(+), 29 deletions(-) diff --git a/docs/registry/index.tsx b/docs/registry/index.tsx index 5069a8744a..d9d01bf3a5 100644 --- a/docs/registry/index.tsx +++ b/docs/registry/index.tsx @@ -4,26 +4,19 @@ import dynamic from 'next/dynamic'; export const registry = { - 'horizontal-breakout': { - name: 'horizontal-breakout', - demo: dynamic( - () => import('@/content/components/breakout/horizontal-breakout.demo') - ), - file: 'content/components/breakout/horizontal-breakout.demo.tsx', - }, - 'iframe-breakout': { - name: 'iframe-breakout', + 'accordion-basic': { + name: 'accordion-basic', demo: dynamic( - () => import('@/content/components/breakout/iframe-breakout.demo') + () => import('@/content/components/accordion/accordion-basic.demo') ), - file: 'content/components/breakout/iframe-breakout.demo.tsx', + file: 'content/components/accordion/accordion-basic.demo.tsx', }, - 'vertical-breakout': { - name: 'vertical-breakout', + 'basic-accordion': { + name: 'basic-accordion', demo: dynamic( - () => import('@/content/components/breakout/vertical-breakout.demo') + () => import('@/content/components/accordion/basic-accordion.demo') ), - file: 'content/components/breakout/vertical-breakout.demo.tsx', + file: 'content/components/accordion/basic-accordion.demo.tsx', }, rightside: { name: 'rightside', @@ -35,19 +28,26 @@ export const registry = { demo: dynamic(() => import('@/content/components/aside/space.demo')), file: 'content/components/aside/space.demo.tsx', }, - 'accordion-basic': { - name: 'accordion-basic', + 'horizontal-breakout': { + name: 'horizontal-breakout', demo: dynamic( - () => import('@/content/components/accordion/accordion-basic.demo') + () => import('@/content/components/breakout/horizontal-breakout.demo') ), - file: 'content/components/accordion/accordion-basic.demo.tsx', + file: 'content/components/breakout/horizontal-breakout.demo.tsx', }, - 'basic-accordion': { - name: 'basic-accordion', + 'iframe-breakout': { + name: 'iframe-breakout', demo: dynamic( - () => import('@/content/components/accordion/basic-accordion.demo') + () => import('@/content/components/breakout/iframe-breakout.demo') ), - file: 'content/components/accordion/basic-accordion.demo.tsx', + file: 'content/components/breakout/iframe-breakout.demo.tsx', + }, + 'vertical-breakout': { + name: 'vertical-breakout', + demo: dynamic( + () => import('@/content/components/breakout/vertical-breakout.demo') + ), + file: 'content/components/breakout/vertical-breakout.demo.tsx', }, 'button-variant': { name: 'button-variant', diff --git a/docs/ui/ComponentDemo.tsx b/docs/ui/ComponentDemo.tsx index c7fb03459c..f4ddcc7d5d 100644 --- a/docs/ui/ComponentDemo.tsx +++ b/docs/ui/ComponentDemo.tsx @@ -1,24 +1,24 @@ import { ReactNode, useState } from 'react'; import { Button, MarigoldProvider } from './marigold'; -import { useThemeSwitch } from '@/app/components/[...slug]/_components'; -import { Theme } from '../../packages/system/src'; import { type Theme } from '@marigold/system'; import { registry } from '@/registry'; -import { MarigoldProvider } from './marigold'; import { useThemeSwitch } from '@/app/_components/ThemeSwitch'; export interface ComponentDemoProps { - name: string; + name: keyof typeof registry; + source: string; children?: ReactNode; } export const ComponentDemo = ({ name, children }: ComponentDemoProps) => { - const Demo = (registry as any)[name].demo; - const { current, themes } = useThemeSwitch(); + const Demo = registry[name].demo; + const { current, themes } = useThemeSwitch(); const [showCode, setShowCode] = useState(true); + const buttonStyles = 'rounded-none border-solid border-transparent border-b-slate-800 p-2'; + return (
From 8859fc10ffbc2328e553bf0b14eddc7e2d94d742 Mon Sep 17 00:00:00 2001 From: sarahgm Date: Thu, 20 Jul 2023 12:19:09 +0200 Subject: [PATCH 14/14] save --- docs/theme/components/Tabs.styles.ts | 9 ++++++ docs/theme/components/index.ts | 1 + docs/theme/tokens.ts | 5 +++- docs/ui/ComponentDemo.tsx | 42 ++++++++++------------------ 4 files changed, 28 insertions(+), 29 deletions(-) create mode 100644 docs/theme/components/Tabs.styles.ts diff --git a/docs/theme/components/Tabs.styles.ts b/docs/theme/components/Tabs.styles.ts new file mode 100644 index 0000000000..ca39bbec31 --- /dev/null +++ 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 index f2caa44e66..e6bb1a0116 100644 --- 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 index 644d1311d6..4d7917c1d9 100644 --- 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 index f4ddcc7d5d..49efd75716 100644 --- a/docs/ui/ComponentDemo.tsx +++ b/docs/ui/ComponentDemo.tsx @@ -1,5 +1,5 @@ -import { ReactNode, useState } from 'react'; -import { Button, MarigoldProvider } from './marigold'; +import { ReactNode } from 'react'; +import { MarigoldProvider, Tabs } from './marigold'; import { type Theme } from '@marigold/system'; import { registry } from '@/registry'; @@ -12,39 +12,25 @@ export interface ComponentDemoProps { export const ComponentDemo = ({ name, children }: ComponentDemoProps) => { const Demo = registry[name].demo; - const { current, themes } = useThemeSwitch(); - const [showCode, setShowCode] = useState(true); - - const buttonStyles = - 'rounded-none border-solid border-transparent border-b-slate-800 p-2'; return ( - -
-
- - -
-
{children}
-
+ + +
-
+
-
- + + + {children} + + ); };