From 2f084f5d14de0ab60bb540b4cf2d6de231e09d24 Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Wed, 22 May 2024 11:26:37 +0200 Subject: [PATCH 01/79] first state --- docs/app/_components/SiteMenu.tsx | 88 ++++++++++++++++++++++++++++++- 1 file changed, 87 insertions(+), 1 deletion(-) diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index d326acf65c..e2d7df35cb 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -10,6 +10,7 @@ import { useRouter } from 'next/navigation'; import { Search } from '@marigold/icons'; +import { useThemeSwitch } from '@/ui/ThemeSwitch'; import { useHasMounted } from '@/ui/useHasMounted'; // Helpers @@ -55,6 +56,12 @@ export const SiteMenu = () => { setOpen(false); }; + const { updateTheme } = useThemeSwitch(); + const changeTheme = (theme: string) => { + updateTheme(theme); + setOpen(false); + }; + // register global cmd+k hotkey useEffect(() => { const onKeydown = (e: KeyboardEvent) => { @@ -70,6 +77,47 @@ export const SiteMenu = () => { const classNames = useClassNames({ component: 'Menu', variant: 'command' }); + // todo: add in new file? + const links = [ + { + name: 'Links', + items: [ + { + name: 'Slack', + href: 'https://reservix.slack.com/archives/C02727BNZ3J', + }, + { + name: 'Jira', + href: 'https://reservix.atlassian.net/jira/software/projects/DST/boards/134', + }, + { + name: 'Figma Core Kit', + href: 'https://www.figma.com/design/NbTUW9zk15nN8idlfsEttS/%F0%9F%8C%BC-Marigold-CORE?t=VfTLYo5foFEjRxFY-0', + }, + { + name: 'Support Center', + href: 'https://reservix.atlassian.net/servicedesk/customer/portal/77', + }, + ], + }, + ]; + + const themes = [ + { + name: 'Theme', + items: [ + { + name: 'Change to Core Theme', + theme: 'core', + }, + { + name: 'Change to B2B Theme', + theme: 'b2b', + }, + ], + }, + ]; + return ( - + { + if (value.toLowerCase().includes(query)) return 1; + return 0; + }} + >
{ {items.map(item => ( changeTheme(item.theme)} > From 6622e0bda87da561e4f71a9a0e28584106610805 Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Wed, 22 May 2024 14:17:26 +0200 Subject: [PATCH 07/79] save --- docs/app/_components/SiteMenu.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index 314ffe0be6..63ba1d568d 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -49,7 +49,7 @@ const Hotkey = () => { // Component // --------------- -export const SiteMenu = (value: string) => { +export const SiteMenu = () => { const router = useRouter(); const [open, setOpen] = useState(false); const [query, setQuery] = useState(''); @@ -158,7 +158,7 @@ export const SiteMenu = (value: string) => { ))} ))} - {/* add links command */} + {/* links command */} {links.map(({ name, items }) => ( { ))} ))} - {/* tokens */} + {/* tokens copy command */} Date: Wed, 22 May 2024 14:28:30 +0200 Subject: [PATCH 08/79] add commands --- docs/app/_components/SiteMenu.tsx | 29 ++++++++++++++++++++++++----- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index 63ba1d568d..44818ac484 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -3,7 +3,7 @@ import { links, themeswitch } from '@/lib/commandlist'; import { siteConfig } from '@/lib/config'; import { iterateTokens } from '@/lib/utils'; -import { Button, Dialog, useClassNames } from '@/ui'; +import { Button, Dialog, Inline, Split, useClassNames } from '@/ui'; import { Command, CommandGroup } from 'cmdk'; import { allContentPages } from 'contentlayer/generated'; import { useEffect, useState } from 'react'; @@ -11,9 +11,10 @@ import { useCopyToClipboard } from 'react-use'; import { useRouter } from 'next/navigation'; -import { Search } from '@marigold/icons'; +import { ExternalLink, Search } from '@marigold/icons'; import { useThemeSwitch } from '@/ui/ThemeSwitch'; +import { Theme } from '@/ui/icons/Theme'; import { useHasMounted } from '@/ui/useHasMounted'; // Helpers @@ -153,7 +154,13 @@ export const SiteMenu = () => { value={item.name} onSelect={() => changeTheme(item.theme)} > - {item.name} + + {item.name} + + + + + ))} @@ -172,7 +179,13 @@ export const SiteMenu = () => { value={page.href} onSelect={() => window.open(page.href, '_blank')} > - {page.name} + + {page.name} + + + + + ))} @@ -190,7 +203,13 @@ export const SiteMenu = () => { value={token} onSelect={() => copy(token.replace('-DEFAULT', ''))} > - {token.replace('-DEFAULT', '')} + + {token.replace('-DEFAULT', '')} + + + copy token + + ))} From 15946bd4e6cdc8699a1b8a5d6b80418ed0049198 Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Wed, 22 May 2024 16:22:14 +0200 Subject: [PATCH 09/79] save --- docs/app/_components/SiteMenu.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index 44818ac484..c571e0f552 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -1,5 +1,6 @@ 'use client'; +import { registry } from '@/.registry'; import { links, themeswitch } from '@/lib/commandlist'; import { siteConfig } from '@/lib/config'; import { iterateTokens } from '@/lib/utils'; @@ -94,6 +95,10 @@ export const SiteMenu = () => { const tokens = iterateTokens(themes[current].colors || {}); + const demos = Object.entries(registry); + + demos.map(item => console.log(item[1])); + // console.log('#######', demos); return (
From 97ad1c0266cb90ae1d0aed29e50ae7f1c375af63 Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Thu, 23 May 2024 08:04:32 +0200 Subject: [PATCH 10/79] save --- docs/app/_components/SiteMenu.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index c571e0f552..70b88a79d7 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -223,7 +223,24 @@ export const SiteMenu = () => { heading="Demos" key="demo" className={classNames.section} - > + > + {demos.map(item => ( + copy(JSON.stringify(`${item[1].demo}`))} + > + + {item[1].name} + + + copy token + + + + ))} + From e9f347ee09d72fce97eecc70c59a432aceb279e1 Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Thu, 23 May 2024 13:52:33 +0200 Subject: [PATCH 11/79] improvement --- docs/app/_components/SiteMenu.tsx | 74 ++++++++++++++++--------------- docs/lib/commandlist.ts | 8 ++++ 2 files changed, 47 insertions(+), 35 deletions(-) diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index 70b88a79d7..e4e67650af 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -5,7 +5,7 @@ import { links, themeswitch } from '@/lib/commandlist'; import { siteConfig } from '@/lib/config'; import { iterateTokens } from '@/lib/utils'; import { Button, Dialog, Inline, Split, useClassNames } from '@/ui'; -import { Command, CommandGroup } from 'cmdk'; +import { Command, CommandGroup, useCommandState } from 'cmdk'; import { allContentPages } from 'contentlayer/generated'; import { useEffect, useState } from 'react'; import { useCopyToClipboard } from 'react-use'; @@ -39,18 +39,21 @@ const groupedPages = siteConfig.navigation.map(({ name, slug }) => { const Hotkey = () => { const mounted = useHasMounted(); - if (!mounted) { return null; } - const isMacOS = window.navigator.userAgent.includes('Mac OS'); - return ({isMacOS ? '⌘' : 'Ctrl+'}K); }; // Component // --------------- +const SubItem = ({ ...props }) => { + const search = useCommandState(state => state.search); + if (!search) return null; + return ; +}; + export const SiteMenu = () => { const router = useRouter(); const [open, setOpen] = useState(false); @@ -89,16 +92,14 @@ export const SiteMenu = () => { const classNames = useClassNames({ component: 'Menu', variant: 'command' }); const { current, themes } = useThemeSwitch(); + const demos = Object.entries(registry); + demos.map(item => console.log(item[1])); + if (!current) { return null; } - const tokens = iterateTokens(themes[current].colors || {}); - const demos = Object.entries(registry); - - demos.map(item => console.log(item[1])); - // console.log('#######', demos); return ( + + { + const searchValue = `${value} ${keywords}`; + if (searchValue.toLowerCase().includes(query.toLowerCase())) + return 1; + return 0; + }} + > + + {groupedPages.map(({ sub, items }) => + Object.values(items).map(item => ( + + {Object.values(sub).map(item => + Object.values(item).map(item => ( + goto(page.slug)} + > + {item.text} + + )) + )} + + )) + )} + +
+ + +
+ + + + ); +}; + export const SiteMenu = () => { const router = useRouter(); const [open, setOpen] = useState(false); @@ -278,6 +373,8 @@ export const SiteMenu = () => { )} + {} + ); diff --git a/docs/contentlayer.config.ts b/docs/contentlayer.config.ts index cb8b0c9e18..0edbd313fa 100644 --- a/docs/contentlayer.config.ts +++ b/docs/contentlayer.config.ts @@ -71,6 +71,23 @@ export const ContentPage = defineDocumentType(() => ({ return path.length < 3 ? null : path.at(1); }, }, + headings: { + type: 'json', + resolve: async doc => { + const headingsRegex = /\n(?#{1,6})\s+(?.+)/g; + const headings = Array.from(doc.body.raw.matchAll(headingsRegex)).map( + ({ groups }) => { + const flag = groups?.flag; + const content = groups?.content; + return { + level: flag.length, + text: content, + }; + } + ); + return headings; + }, + }, }, })); From d75abe34a6356fad08896dc6360134a0cf4f40bc Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Mon, 3 Jun 2024 15:53:23 +0200 Subject: [PATCH 35/79] save this shit --- docs/app/_components/SiteMenu.tsx | 168 ++++++++++++++++-------------- docs/contentlayer.config.ts | 7 +- docs/package.json | 1 + pnpm-lock.yaml | 3 + 4 files changed, 96 insertions(+), 83 deletions(-) diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index 18b551d449..5f1c037a23 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -31,9 +31,13 @@ import { useHasMounted } from '@/ui/useHasMounted'; const groupedPages = siteConfig.navigation.map(({ name, slug }) => { const items = allContentPages .filter(page => page.slug.includes(slug)) - .map(({ title, slug, order }) => ({ title, slug, order })); - - const sub = allContentPages.map(page => page.headings); + .filter(page => page.headings) + .map(({ title, slug, order, headings }) => ({ + title, + slug, + order, + headings, + })); // sort by order if it's defiened, otherwise sort alphabettically items.sort((a, b) => { @@ -44,7 +48,7 @@ const groupedPages = siteConfig.navigation.map(({ name, slug }) => { } }); - return { name, slug, items, sub }; + return { name, slug, items }; }); const Hotkey = () => { @@ -96,88 +100,67 @@ const SubItem = ({ children, copyValue, ...props }: SubItemProps) => { }; interface SubCommandProps { + slug: string; + items: string[]; classNames: { item: string; container: string; section: string; }; + open?: boolean; + onOpenChange?: () => void; } -const SubCommand = ({ classNames }: SubCommandProps) => { - const [open, setOpen] = useState(false); +const SubCommand = ({ + classNames, + slug, + items, + open, + onOpenChange, +}: SubCommandProps) => { + //const [open, setOpen] = useState(false); const [query, setQuery] = useState(''); + const [loading, setLoading] = useState(false); - // register global cmd+k hotkey - useEffect(() => { - const onKeydown = (e: KeyboardEvent) => { - if (e.key === 'k' && (e.metaKey || e.ctrlKey)) { - e.preventDefault(); - setOpen(open => !open); - } - }; - document.addEventListener('keydown', onKeydown); - return () => document.removeEventListener('keydown', onKeydown); - }, []); - - groupedPages.map(({ sub }) => - Object.values(sub).map(item => - Object.values(item).map(i => console.log(i.text)) - ) - ); - + console.log(open); return ( <> - - { - const searchValue = `${value} ${keywords}`; - if (searchValue.toLowerCase().includes(query.toLowerCase())) - return 1; - return 0; - }} - > - - {groupedPages.map(({ sub, items }) => - Object.values(items).map(item => ( - - {Object.values(sub).map(item => - Object.values(item).map(item => ( - + { + const searchValue = `${value} ${keywords}`; + if (searchValue.toLowerCase().includes(query.toLowerCase())) + return 1; + return 0; + }} + > + + + {loading && Hang on…} - // onSelect={() => goto(page.slug)} - > - {item.text} - - )) - )} - - )) - )} - -
- - -
- + {items.map(item => ( + + {item.text} + + ))} + + +
+ + +
+ + ); @@ -186,14 +169,22 @@ const SubCommand = ({ classNames }: SubCommandProps) => { export const SiteMenu = () => { const router = useRouter(); const [open, setOpen] = useState(false); + const [subOpen, setSubOpen] = useState(false); const [query, setQuery] = useState(''); const ref = useRef(); + const [pages, setPages] = useState([]); + const subPage = pages[pages.length - 1]; const goto = (slug: string) => { router.push(`/${slug}`); setOpen(false); }; + const handleSub = (slug: string) => { + setPages([...pages, slug]); + setSubOpen(subOpen => !subOpen); + }; + const { updateTheme } = useThemeSwitch(); const changeTheme = (theme: string) => { updateTheme(theme); @@ -217,6 +208,7 @@ export const SiteMenu = () => { if (e.key === 'k' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); setOpen(open => !open); + setPages(pages => pages.slice(0, -1)); } }; document.addEventListener('keydown', onKeydown); @@ -267,17 +259,33 @@ export const SiteMenu = () => { className={classNames.section} > {items.map(page => ( - goto(page.slug)} - > - {page.title} - + <> +
+ handleSub(page.slug)} + > + {page.title} + + + +
+ {subPage === page.slug && ( + setSubOpen} + classNames={classNames} + items={page.headings} + slug={page.slug} + /> + )} + ))} ))} + {/* update themes command */} {themeswitch.map(({ name, items }) => ( { )} - {} - ); diff --git a/docs/contentlayer.config.ts b/docs/contentlayer.config.ts index 0edbd313fa..b03648c227 100644 --- a/docs/contentlayer.config.ts +++ b/docs/contentlayer.config.ts @@ -1,4 +1,5 @@ import { defineDocumentType, makeSource } from 'contentlayer2/source-files'; +import GithubSlugger from 'github-slugger'; import rehypeAutolinkHeadings from 'rehype-autolink-headings'; import rehypePrettyCode, { LineElement } from 'rehype-pretty-code'; import rehypeSlug from 'rehype-slug'; @@ -72,16 +73,18 @@ export const ContentPage = defineDocumentType(() => ({ }, }, headings: { - type: 'json', + type: 'string', resolve: async doc => { const headingsRegex = /\n(?#{1,6})\s+(?.+)/g; + const slugger = new GithubSlugger(); const headings = Array.from(doc.body.raw.matchAll(headingsRegex)).map( ({ groups }) => { const flag = groups?.flag; const content = groups?.content; return { - level: flag.length, + level: flag?.length, text: content, + slug: content ? slugger.slug(content) : undefined, }; } ); diff --git a/docs/package.json b/docs/package.json index c992c4f557..53c47b8edb 100644 --- a/docs/package.json +++ b/docs/package.json @@ -24,6 +24,7 @@ "contentlayer2": "0.4.6", "eslint": "8.57.0", "eslint-config-next": "14.1.4", + "github-slugger": "2.0.0", "mdast-util-toc": "7.0.1", "next": "14.1.4", "next-contentlayer2": "0.4.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3df12688b0..a5ce1f34d5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -366,6 +366,9 @@ importers: eslint-config-next: specifier: 14.1.4 version: 14.1.4(eslint@8.57.0)(typescript@5.3.3) + github-slugger: + specifier: 2.0.0 + version: 2.0.0 mdast-util-toc: specifier: 7.0.1 version: 7.0.1 From 331a6358ae4942f2cc6bb1802fc422761c107b6c Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Tue, 4 Jun 2024 09:16:52 +0200 Subject: [PATCH 36/79] direct to slug works --- docs/app/_components/SiteMenu.tsx | 15 ++++++++++++--- packages/components/src/Overlay/Popover.tsx | 1 + 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index 5f1c037a23..728c487004 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -117,17 +117,23 @@ const SubCommand = ({ open, onOpenChange, }: SubCommandProps) => { - //const [open, setOpen] = useState(false); + const router = useRouter(); const [query, setQuery] = useState(''); const [loading, setLoading] = useState(false); + const [, setOpen] = useState(false); + const goto = (slug: string) => { + router.push(`/${slug}`); + setOpen(false); + }; - console.log(open); return ( <> true} >
Hang on…} {items.map(item => ( - + goto(`${slug}#${item.slug}`)} + > {item.text} ))} diff --git a/packages/components/src/Overlay/Popover.tsx b/packages/components/src/Overlay/Popover.tsx index 4a5eab9133..4b59ccb5b9 100644 --- a/packages/components/src/Overlay/Popover.tsx +++ b/packages/components/src/Overlay/Popover.tsx @@ -42,6 +42,7 @@ const _Popover = forwardRef( const isSmallScreen = useSmallScreen(); const portal = usePortalContainer(); + console.log(props); return ( <> {isSmallScreen ? ( From f15bba2f3255b8ed89a790e6f06aa4c4692ff54c Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Tue, 4 Jun 2024 10:28:38 +0200 Subject: [PATCH 37/79] mh --- docs/app/_components/SiteMenu.tsx | 91 ++++++++++++++++--------------- 1 file changed, 46 insertions(+), 45 deletions(-) diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index 728c487004..47e98cc931 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -100,8 +100,7 @@ const SubItem = ({ children, copyValue, ...props }: SubItemProps) => { }; interface SubCommandProps { - slug: string; - items: string[]; + slug?: string; classNames: { item: string; container: string; @@ -110,28 +109,27 @@ interface SubCommandProps { open?: boolean; onOpenChange?: () => void; } -const SubCommand = ({ - classNames, - slug, - items, - open, - onOpenChange, -}: SubCommandProps) => { +const SubCommand = ({ classNames, slug, onOpenChange }: SubCommandProps) => { const router = useRouter(); const [query, setQuery] = useState(''); const [loading, setLoading] = useState(false); - const [, setOpen] = useState(false); + const [open, setOpen] = useState(false); const goto = (slug: string) => { router.push(`/${slug}`); setOpen(false); }; + console.log(open); return ( <> + setOpen} placement="right bottom" shouldCloseOnInteractOutside={() => true} > @@ -145,18 +143,24 @@ const SubCommand = ({ }} > - - {loading && Hang on…} - - {items.map(item => ( - goto(`${slug}#${item.slug}`)} + {groupedPages.map(({ items }) => + items?.map(item => ( + - {item.text} - - ))} - + {loading && Hang on…} + {Object.values(item.headings).map(sub => ( + goto(`${item.slug}#${sub.slug}`)} + > + {sub.text} + + ))} + + )) + )}
@@ -268,29 +272,15 @@ export const SiteMenu = () => { className={classNames.section} > {items.map(page => ( - <> -
- handleSub(page.slug)} - > - {page.title} - - - -
- {subPage === page.slug && ( - setSubOpen} - classNames={classNames} - items={page.headings} - slug={page.slug} - /> - )} - + goto(page.slug)} + > + {page.title} + + ))} ))} @@ -389,6 +379,17 @@ export const SiteMenu = () => { )} + + + + setSubOpen} + classNames={classNames} + /> + From 815ad1db9191381be192fe87aa0f44951b66c20c Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Tue, 4 Jun 2024 11:00:22 +0200 Subject: [PATCH 38/79] works?? --- docs/app/_components/SiteMenu.tsx | 54 +++++++++++++-------- packages/components/src/Overlay/Popover.tsx | 1 - 2 files changed, 35 insertions(+), 20 deletions(-) diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index 47e98cc931..b59128cd52 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -107,9 +107,14 @@ interface SubCommandProps { section: string; }; open?: boolean; - onOpenChange?: () => void; + setCommandOpen: () => void; + listRef: React.RefObject; } -const SubCommand = ({ classNames, slug, onOpenChange }: SubCommandProps) => { +const SubCommand = ({ + classNames, + listRef, + setCommandOpen, +}: SubCommandProps) => { const router = useRouter(); const [query, setQuery] = useState(''); const [loading, setLoading] = useState(false); @@ -117,12 +122,29 @@ const SubCommand = ({ classNames, slug, onOpenChange }: SubCommandProps) => { const goto = (slug: string) => { router.push(`/${slug}`); setOpen(false); + setCommandOpen(); }; - console.log(open); + useEffect(() => { + const el = listRef.current; + + console.log(el); + if (!el) return; + + if (open) { + el.style.overflow = 'hidden'; + } else { + el.style.overflow = ''; + } + }, [open, listRef]); + return ( <> - @@ -131,9 +153,8 @@ const SubCommand = ({ classNames, slug, onOpenChange }: SubCommandProps) => { open={open} onOpenChange={() => setOpen} placement="right bottom" - shouldCloseOnInteractOutside={() => true} > -
+
{ const searchValue = `${value} ${keywords}`; @@ -182,22 +203,15 @@ const SubCommand = ({ classNames, slug, onOpenChange }: SubCommandProps) => { export const SiteMenu = () => { const router = useRouter(); const [open, setOpen] = useState(false); - const [subOpen, setSubOpen] = useState(false); const [query, setQuery] = useState(''); const ref = useRef(); - const [pages, setPages] = useState([]); - const subPage = pages[pages.length - 1]; + const listRef = useRef(null); const goto = (slug: string) => { router.push(`/${slug}`); setOpen(false); }; - const handleSub = (slug: string) => { - setPages([...pages, slug]); - setSubOpen(subOpen => !subOpen); - }; - const { updateTheme } = useThemeSwitch(); const changeTheme = (theme: string) => { updateTheme(theme); @@ -221,7 +235,6 @@ export const SiteMenu = () => { if (e.key === 'k' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); setOpen(open => !open); - setPages(pages => pages.slice(0, -1)); } }; document.addEventListener('keydown', onKeydown); @@ -261,7 +274,10 @@ export const SiteMenu = () => { className="placeholder:text-text-primary-muted h-11 w-full bg-transparent outline-none" />
- + No results found. @@ -379,15 +395,15 @@ export const SiteMenu = () => { )} - + setSubOpen} + setCommandOpen={() => setOpen(false)} classNames={classNames} + listRef={listRef} /> diff --git a/packages/components/src/Overlay/Popover.tsx b/packages/components/src/Overlay/Popover.tsx index 4b59ccb5b9..4a5eab9133 100644 --- a/packages/components/src/Overlay/Popover.tsx +++ b/packages/components/src/Overlay/Popover.tsx @@ -42,7 +42,6 @@ const _Popover = forwardRef( const isSmallScreen = useSmallScreen(); const portal = usePortalContainer(); - console.log(props); return ( <> {isSmallScreen ? ( From 4a043b5286ce4d4a495e9507f670ef8d47f6e84e Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Tue, 4 Jun 2024 11:12:34 +0200 Subject: [PATCH 39/79] hotkeys --- docs/app/_components/SiteMenu.tsx | 39 ++++++++++++++++++------------- 1 file changed, 23 insertions(+), 16 deletions(-) diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index b59128cd52..d6d78282cd 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -51,13 +51,21 @@ const groupedPages = siteConfig.navigation.map(({ name, slug }) => { return { name, slug, items }; }); -const Hotkey = () => { +interface HotKeyProps { + letter: string; +} +const Hotkey = ({ letter }: HotKeyProps) => { const mounted = useHasMounted(); if (!mounted) { return null; } const isMacOS = window.navigator.userAgent.includes('Mac OS'); - return ({isMacOS ? '⌘' : 'Ctrl+'}K); + return ( + + ({isMacOS ? '⌘' : 'Ctrl+'} + {letter}) + + ); }; // Component @@ -125,18 +133,17 @@ const SubCommand = ({ setCommandOpen(); }; + // register cmd+d hotkey useEffect(() => { - const el = listRef.current; - - console.log(el); - if (!el) return; - - if (open) { - el.style.overflow = 'hidden'; - } else { - el.style.overflow = ''; - } - }, [open, listRef]); + const onKeydown = (e: KeyboardEvent) => { + if (e.key === 'd' && (e.metaKey || e.ctrlKey)) { + e.preventDefault(); + setOpen(open => !open); + } + }; + document.addEventListener('keydown', onKeydown); + return () => document.removeEventListener('keydown', onKeydown); + }, []); return ( <> @@ -146,7 +153,7 @@ const SubCommand = ({ onPress={() => setOpen(open => !open)} > more details - + { { onSelect={() => goto(page.slug)} > {page.title} - + ))} From 8b7b08dcf9c7f9ac1180377bcf117eeda5af14f5 Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Thu, 6 Jun 2024 14:49:00 +0200 Subject: [PATCH 40/79] adde dthe right way of nesting the command --- docs/app/_components/SiteMenu.tsx | 219 +++++++++++++----------------- 1 file changed, 92 insertions(+), 127 deletions(-) diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index d6d78282cd..b0aea7b2c3 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -3,15 +3,7 @@ import { links, themeswitch } from '@/lib/commandlist'; import { siteConfig } from '@/lib/config'; import { iterateTokens } from '@/lib/utils'; -import { - Button, - Dialog, - Icons, - Inline, - Popover, - Split, - useClassNames, -} from '@/ui'; +import { Button, Dialog, Icons, Inline, Split, cn, useClassNames } from '@/ui'; import { Command, CommandGroup, useCommandState } from 'cmdk'; import { allContentPages } from 'contentlayer/generated'; import { ReactNode, RefObject, useEffect, useRef, useState } from 'react'; @@ -70,7 +62,7 @@ const Hotkey = ({ letter }: HotKeyProps) => { // Component // --------------- -interface SubItemProps { +interface CopyItemProps { children: ReactNode; className?: string; value?: string; @@ -79,9 +71,8 @@ interface SubItemProps { copyValue: string; } -const SubItem = ({ children, copyValue, ...props }: SubItemProps) => { +const CopyItem = ({ children, copyValue, ...props }: CopyItemProps) => { const search = useCommandState(state => state.search); - const [isCopied, setCopy] = useState(false); const [, setCopied] = useCopyToClipboard(); const [isReady, cancel] = useDebounce(() => setCopy(false), 2000, [isCopied]); @@ -107,102 +98,27 @@ const SubItem = ({ children, copyValue, ...props }: SubItemProps) => { ); }; -interface SubCommandProps { - slug?: string; - classNames: { - item: string; - container: string; - section: string; - }; - open?: boolean; - setCommandOpen: () => void; - listRef: React.RefObject; +interface SubItemProps { + content: string; + value?: string; + className: string; } -const SubCommand = ({ - classNames, - listRef, - setCommandOpen, -}: SubCommandProps) => { +const SubItem = ({ content, className, ...props }: SubItemProps) => { const router = useRouter(); - const [query, setQuery] = useState(''); - const [loading, setLoading] = useState(false); const [open, setOpen] = useState(false); const goto = (slug: string) => { router.push(`/${slug}`); setOpen(false); - setCommandOpen(); }; - - // register cmd+d hotkey - useEffect(() => { - const onKeydown = (e: KeyboardEvent) => { - if (e.key === 'd' && (e.metaKey || e.ctrlKey)) { - e.preventDefault(); - setOpen(open => !open); - } - }; - document.addEventListener('keydown', onKeydown); - return () => document.removeEventListener('keydown', onKeydown); - }, []); - return ( <> - - setOpen} - placement="right bottom" - > -
- { - const searchValue = `${value} ${keywords}`; - if (searchValue.toLowerCase().includes(query.toLowerCase())) - return 1; - return 0; - }} - > - - {groupedPages.map(({ items }) => - items?.map(item => ( - - {loading && Hang on…} - {Object.values(item.headings).map(sub => ( - goto(`${item.slug}#${sub.slug}`)} - > - {sub.text} - - ))} - - )) - )} - -
- - -
- -
- + {content} + ); }; @@ -212,7 +128,12 @@ export const SiteMenu = () => { const [open, setOpen] = useState(false); const [query, setQuery] = useState(''); const ref = useRef(); - const listRef = useRef(null); + + const [pages, setPages] = useState(['']); + const [subPage, setSubPage] = useState(''); + const [isCommandDPressed, setIsCommandDPressed] = useState(false); + const [focusedPage, setFocusedPage] = useState(''); + // const subPage = pages[pages.length - 1]; const goto = (slug: string) => { router.push(`/${slug}`); @@ -242,10 +163,41 @@ export const SiteMenu = () => { if (e.key === 'k' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); setOpen(open => !open); + } else if (e.key === 'd' && (e.metaKey || e.ctrlKey)) { + e.preventDefault(); + setIsCommandDPressed(true); // Track that Command + d was pressed + setSubPage(focusedPage); // Set subPage to the focused item + } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { + e.preventDefault(); + setFocusedPage(prevFocusedPage => { + const currentIndex = pages.indexOf(prevFocusedPage); + const nextIndex = + e.key === 'ArrowDown' + ? (currentIndex + 1) % pages.length + : (currentIndex - 1 + pages.length) % pages.length; + return pages[nextIndex]; + }); } }; + document.addEventListener('keydown', onKeydown); return () => document.removeEventListener('keydown', onKeydown); + }, [pages, focusedPage]); + + useEffect(() => { + if (pages.length > 0 && focusedPage === null) { + setFocusedPage(pages[0]); + } + }, [pages, focusedPage]); + + useEffect(() => { + let newPages: string[] = []; + groupedPages.forEach(({ items }) => { + items.forEach(item => { + newPages.push(item.slug); + }); + }); + setPages(newPages); }, []); const classNames = useClassNames({ component: 'Menu', variant: 'command' }); @@ -255,6 +207,7 @@ export const SiteMenu = () => { } const tokens = iterateTokens(themes[current].colors || {}); + console.log('PAGES', subPage); return (
- + No results found. @@ -295,15 +245,33 @@ export const SiteMenu = () => { className={classNames.section} > {items.map(page => ( - goto(page.slug)} - > - {page.title} - - + <> + goto(page.slug)} + //onSelect={() => handleSelect(page.slug)} + > + + {page.title} + + + + + {isCommandDPressed && page.slug === subPage && ( + <> + {Object.values(page.headings).map(sub => ( + + ))} + + )} + ))} ))} @@ -368,7 +336,7 @@ export const SiteMenu = () => { className={classNames.section} > {tokens.map(([token]) => ( - { copyValue={token.replace('-DEFAULT', '')} > {token.replace('-DEFAULT', '')} - + ))} )} @@ -388,7 +356,7 @@ export const SiteMenu = () => { className={classNames.section} > {Object.values(iconElements).map(elements => ( - { > {elements.iconElement} {elements.icon} - + ))} )} - - - - setOpen(false)} - classNames={classNames} - listRef={listRef} - /> - +
+
+ Action ↵ +
+
+ More Details +
+
From 3326e54e6af96be83ca966ed8a7a428855108c35 Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Thu, 6 Jun 2024 16:44:49 +0200 Subject: [PATCH 41/79] save --- docs/app/_components/SiteMenu.tsx | 56 +++++++++++++++++++------------ 1 file changed, 35 insertions(+), 21 deletions(-) diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index b0aea7b2c3..b933a7be58 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -157,6 +157,21 @@ export const SiteMenu = () => { return getIcon(icon, ref as any); }); + useEffect(() => { + let newPages: string[] = []; + groupedPages.forEach(({ items }) => { + items.forEach(item => { + newPages.push(item.slug); + }); + }); + setPages(newPages); + // Set default focus to the first item + if (newPages.length > 0) { + setFocusedPage(newPages[0]); + setSubPage(newPages[0]); + } + }, [focusedPage]); + // register global cmd+k hotkey useEffect(() => { const onKeydown = (e: KeyboardEvent) => { @@ -165,24 +180,34 @@ export const SiteMenu = () => { setOpen(open => !open); } else if (e.key === 'd' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); - setIsCommandDPressed(true); // Track that Command + d was pressed + setIsCommandDPressed(() => !isCommandDPressed); // Track that Command + d was pressed setSubPage(focusedPage); // Set subPage to the focused item } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); - setFocusedPage(prevFocusedPage => { - const currentIndex = pages.indexOf(prevFocusedPage); - const nextIndex = - e.key === 'ArrowDown' - ? (currentIndex + 1) % pages.length - : (currentIndex - 1 + pages.length) % pages.length; - return pages[nextIndex]; - }); + + const current = pages.indexOf(focusedPage); + console.log('Before', focusedPage, current); + if (e.key === 'ArrowDown') { + setFocusedPage(pages[current + 1]); + console.log('arrow down', focusedPage); + } + // setFocusedPage(prevFocusedPage => { + // const currentIndex = pages.indexOf(prevFocusedPage); + + // if (e.key === 'ArrowDown' && currentIndex < pages.length - 1) { + // return pages[currentIndex + 1]; + // } else if (e.key === 'ArrowUp' && currentIndex > 0) { + // return pages[currentIndex - 1]; + // } + // return prevFocusedPage; // Return the same page if at the boundary + // }); + console.log('After', focusedPage); } }; document.addEventListener('keydown', onKeydown); return () => document.removeEventListener('keydown', onKeydown); - }, [pages, focusedPage]); + }, [pages, focusedPage, isCommandDPressed]); useEffect(() => { if (pages.length > 0 && focusedPage === null) { @@ -190,16 +215,6 @@ export const SiteMenu = () => { } }, [pages, focusedPage]); - useEffect(() => { - let newPages: string[] = []; - groupedPages.forEach(({ items }) => { - items.forEach(item => { - newPages.push(item.slug); - }); - }); - setPages(newPages); - }, []); - const classNames = useClassNames({ component: 'Menu', variant: 'command' }); const { current, themes } = useThemeSwitch(); if (!current) { @@ -207,7 +222,6 @@ export const SiteMenu = () => { } const tokens = iterateTokens(themes[current].colors || {}); - console.log('PAGES', subPage); return (
@@ -251,6 +251,7 @@ export const SiteMenu = () => { {Object.values(page.headings).map( (sub: { slug: string; text: string }) => ( Date: Wed, 12 Jun 2024 10:20:07 +0200 Subject: [PATCH 62/79] move component --- docs/app/_components/SiteMenu.tsx | 57 +++++++++++++++---------------- 1 file changed, 28 insertions(+), 29 deletions(-) diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index 9184d0c9f9..db67b0e5e9 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -28,35 +28,6 @@ import { useHasMounted } from '@/ui/useHasMounted'; // Helpers // --------------- -interface CustomInputProps { - value: string; - onValueChange: Dispatch>; - onHandlePages: (val: string) => void; -} - -const CustomInput = ({ - value, - onValueChange, - onHandlePages, -}: CustomInputProps) => { - const slug = useCommandState(state => state.value); - return ( - { - if (e.metaKey && e.key === 'd') { - e.preventDefault(); - onHandlePages(slug); - } - }} - /> - ); -}; - const groupedPages = siteConfig.navigation.map(({ name, slug }) => { const items = allContentPages .filter(page => page.slug.includes(slug)) @@ -99,6 +70,34 @@ const Hotkey = ({ letter }: HotKeyProps) => { // Component // --------------- +interface CustomInputProps { + value: string; + onValueChange: Dispatch>; + onHandlePages: (val: string) => void; +} + +const CustomInput = ({ + value, + onValueChange, + onHandlePages, +}: CustomInputProps) => { + const slug = useCommandState(state => state.value); + return ( + { + if (e.metaKey && e.key === 'd') { + e.preventDefault(); + onHandlePages(slug); + } + }} + /> + ); +}; interface CopyItemProps { children: ReactNode; className?: string; From 5af825b35bf22d5885aaa8e73747e7e7de2d093c Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Wed, 12 Jun 2024 12:51:55 +0200 Subject: [PATCH 63/79] add comments --- docs/app/_components/SiteMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index db67b0e5e9..06e689203e 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -68,7 +68,7 @@ const Hotkey = ({ letter }: HotKeyProps) => { ); }; -// Component +// Components // --------------- interface CustomInputProps { value: string; From da551f7fd6c210aa9d22d33975a9d571769eda63 Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Wed, 12 Jun 2024 12:54:34 +0200 Subject: [PATCH 64/79] add comment --- docs/contentlayer.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/contentlayer.config.ts b/docs/contentlayer.config.ts index d8571bc735..ebeb181323 100644 --- a/docs/contentlayer.config.ts +++ b/docs/contentlayer.config.ts @@ -73,6 +73,7 @@ export const ContentPage = defineDocumentType(() => ({ return path.length < 3 ? null : path.at(1); }, }, + // Collect the headings used for creating a submenu in the command headings: { type: 'json', resolve: async doc => { @@ -147,7 +148,6 @@ export default makeSource({ }, }, ], - // Headings and TOC Plugins // --------------- rehypeSlug, From bf45792db6c990afb47c2bfa8bc758049bb2efe1 Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Wed, 12 Jun 2024 12:59:45 +0200 Subject: [PATCH 65/79] removing some whitespace --- docs/app/_components/SiteMenu.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index 06e689203e..324846a529 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -201,7 +201,6 @@ export const SiteMenu = () => { className={classNames.container} filter={(value, query, keywords) => { const searchValue = `${value} ${keywords}`; - if (searchValue.toLowerCase().includes(query.toLowerCase())) return 1; return 0; @@ -267,7 +266,6 @@ export const SiteMenu = () => { ))} ))} - {/* update themes command */} {themeswitch.map(({ name, items }) => ( Date: Wed, 12 Jun 2024 13:03:15 +0200 Subject: [PATCH 66/79] remove unused import --- docs/contentlayer.config.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/contentlayer.config.ts b/docs/contentlayer.config.ts index ebeb181323..43c9b89673 100644 --- a/docs/contentlayer.config.ts +++ b/docs/contentlayer.config.ts @@ -5,7 +5,6 @@ import rehypePrettyCode, { LineElement } from 'rehype-pretty-code'; import rehypeSlug from 'rehype-slug'; import remarkGfm from 'remark-gfm'; import { visit } from 'unist-util-visit'; -import { object } from 'zod'; import { rehypeComponentDemo } from './lib/mdx/rehype-component-demo'; import { rehypeTableOfContents } from './lib/mdx/rehype-toc'; From 55afd2c38d472c2ac2dc1830674d943f5846e088 Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Wed, 12 Jun 2024 13:12:29 +0200 Subject: [PATCH 67/79] makes more sense --- docs/app/_components/SiteMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index 324846a529..8b2f25cb7c 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -208,7 +208,7 @@ export const SiteMenu = () => { onKeyDown={e => { if (e.key === 'Escape' || (e.key === 'Backspace' && !query)) { e.preventDefault(); - setPages(pages => pages.slice(0, -1)); + setPages([]); } }} > From 87d070f79b714d40e2a87092a2991b1ca570d09d Mon Sep 17 00:00:00 2001 From: sarahgm <38324334+sarahgm@users.noreply.github.com> Date: Wed, 12 Jun 2024 13:32:52 +0200 Subject: [PATCH 68/79] Create tall-coats-call.md --- .changeset/tall-coats-call.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tall-coats-call.md diff --git a/.changeset/tall-coats-call.md b/.changeset/tall-coats-call.md new file mode 100644 index 0000000000..f6c1685fc7 --- /dev/null +++ b/.changeset/tall-coats-call.md @@ -0,0 +1,5 @@ +--- +"@marigold/docs": patch +--- + +[DST-407]: enhance command menu From 40dfd5ee31d8cd83d3caa98a4227702f751ae8fc Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Fri, 14 Jun 2024 11:31:00 +0200 Subject: [PATCH 69/79] move content from file to config --- docs/app/_components/SiteMenu.tsx | 3 +- docs/lib/commandlist.ts | 61 ------------------------------ docs/lib/config.ts | 62 +++++++++++++++++++++++++++++++ 3 files changed, 63 insertions(+), 63 deletions(-) delete mode 100644 docs/lib/commandlist.ts diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index 8b2f25cb7c..db35904eba 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -1,7 +1,6 @@ 'use client'; -import { links, themeswitch } from '@/lib/commandlist'; -import { siteConfig } from '@/lib/config'; +import { links, siteConfig, themeswitch } from '@/lib/config'; import { iterateTokens } from '@/lib/utils'; import { Button, Dialog, Icons, Inline, Split, cn, useClassNames } from '@/ui'; import { Command, CommandGroup, useCommandState } from 'cmdk'; diff --git a/docs/lib/commandlist.ts b/docs/lib/commandlist.ts deleted file mode 100644 index c165b73147..0000000000 --- a/docs/lib/commandlist.ts +++ /dev/null @@ -1,61 +0,0 @@ -export const links = [ - { - name: 'Links', - items: [ - { - name: 'Slack', - href: 'https://reservix.slack.com/archives/C02727BNZ3J', - keywords: ['help'], - }, - { - name: 'Jira', - href: 'https://reservix.atlassian.net/jira/software/projects/DST/boards/134', - }, - { - name: 'Figma Core Kit', - href: 'https://www.figma.com/design/NbTUW9zk15nN8idlfsEttS/%F0%9F%8C%BC-Marigold-CORE?t=VfTLYo5foFEjRxFY-0', - keywords: ['design'], - }, - { - name: 'Support Center', - href: 'https://reservix.atlassian.net/servicedesk/customer/portal/77', - keywords: ['help'], - }, - { - name: 'Storybook', - href: 'https://marigold-latest.vercel.app/?path=/story/components-accordion--basic', - }, - { - name: 'Stackblitz', - href: 'https://stackblitz.com/edit/github-v1evcv?file=src%2FApp.tsx', - keywords: ['playground', 'starter'], - }, - { - name: 'Reference App', - href: 'https://marigold-rapp.vercel.app/', - keywords: ['help', 'example', 'code'], - }, - { - name: 'Github', - href: 'https://github.com/marigold-ui/marigold', - keywords: ['code'], - }, - ], - }, -]; - -export const themeswitch = [ - { - name: 'Theme Switch', - items: [ - { - name: 'Switch to Core Theme', - theme: 'core', - }, - { - name: 'Switch to B2B Theme', - theme: 'b2b', - }, - ], - }, -]; diff --git a/docs/lib/config.ts b/docs/lib/config.ts index e1369720bc..703ec054e7 100644 --- a/docs/lib/config.ts +++ b/docs/lib/config.ts @@ -66,3 +66,65 @@ export const siteConfig = { }, ], } as const; + +export const links = [ + { + name: 'Links', + items: [ + { + name: 'Slack', + href: 'https://reservix.slack.com/archives/C02727BNZ3J', + keywords: ['help'], + }, + { + name: 'Jira', + href: 'https://reservix.atlassian.net/jira/software/projects/DST/boards/134', + }, + { + name: 'Figma Core Kit', + href: 'https://www.figma.com/design/NbTUW9zk15nN8idlfsEttS/%F0%9F%8C%BC-Marigold-CORE?t=VfTLYo5foFEjRxFY-0', + keywords: ['design'], + }, + { + name: 'Support Center', + href: 'https://reservix.atlassian.net/servicedesk/customer/portal/77', + keywords: ['help'], + }, + { + name: 'Storybook', + href: 'https://marigold-latest.vercel.app/?path=/story/components-accordion--basic', + }, + { + name: 'Stackblitz', + href: 'https://stackblitz.com/edit/github-v1evcv?file=src%2FApp.tsx', + keywords: ['playground', 'starter'], + }, + { + name: 'Reference App', + href: 'https://marigold-rapp.vercel.app/', + keywords: ['help', 'example', 'code'], + }, + { + name: 'Github', + href: 'https://github.com/marigold-ui/marigold', + keywords: ['code'], + }, + ], + }, +]; + +export const themeswitch = [ + { + name: 'Theme Switch', + items: [ + { + name: 'Switch to Core Theme', + theme: 'core', + }, + { + name: 'Switch to B2B Theme', + theme: 'b2b', + }, + ], + }, +]; From 6fa3daebfcdaa9ae6254bff3f7dd604b72eaa180 Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Fri, 14 Jun 2024 11:34:37 +0200 Subject: [PATCH 70/79] changed some naming things --- docs/lib/config.ts | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/docs/lib/config.ts b/docs/lib/config.ts index 703ec054e7..12714cb5ac 100644 --- a/docs/lib/config.ts +++ b/docs/lib/config.ts @@ -95,19 +95,14 @@ export const links = [ href: 'https://marigold-latest.vercel.app/?path=/story/components-accordion--basic', }, { - name: 'Stackblitz', + name: 'Marigold Playground', href: 'https://stackblitz.com/edit/github-v1evcv?file=src%2FApp.tsx', - keywords: ['playground', 'starter'], + keywords: ['playground', 'starter', 'stackblitz'], }, { - name: 'Reference App', - href: 'https://marigold-rapp.vercel.app/', - keywords: ['help', 'example', 'code'], - }, - { - name: 'Github', + name: 'Code Repository', href: 'https://github.com/marigold-ui/marigold', - keywords: ['code'], + keywords: ['code', 'github'], }, ], }, From 37b755cfcbf1d0e323914e957b284aa5a6dc4db2 Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Fri, 14 Jun 2024 11:52:14 +0200 Subject: [PATCH 71/79] adjust text size --- docs/app/_components/SiteMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index db35904eba..f70a2cbd54 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -359,7 +359,7 @@ export const SiteMenu = () => { )} -
+
Action ↵
From 7c5b5d65c1fb7461f8107e4646f0f311d474d470 Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Fri, 14 Jun 2024 11:58:17 +0200 Subject: [PATCH 72/79] add comment to function --- docs/lib/utils.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/lib/utils.tsx b/docs/lib/utils.tsx index 30224e0ca9..5f8655fa7d 100644 --- a/docs/lib/utils.tsx +++ b/docs/lib/utils.tsx @@ -2,6 +2,7 @@ interface NestedStringObject { [key: string]: NestedStringObject | string; } +// used to iterate through the colors and combine it in the right way e.g. 'bg-surface-sunken' export const iterateTokens = (colors: NestedStringObject, prefix = '') => { let list: [token: string, color: string][] = []; From 0a04b293ceb6781288c52ae7324f4267e59c7889 Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Fri, 14 Jun 2024 14:41:03 +0200 Subject: [PATCH 73/79] create new components out of it --- docs/app/_components/CommandItems.tsx | 257 ++++++++++++++++++++++++++ docs/app/_components/SiteMenu.tsx | 243 +++--------------------- 2 files changed, 284 insertions(+), 216 deletions(-) create mode 100644 docs/app/_components/CommandItems.tsx diff --git a/docs/app/_components/CommandItems.tsx b/docs/app/_components/CommandItems.tsx new file mode 100644 index 0000000000..8eeb4fdf4b --- /dev/null +++ b/docs/app/_components/CommandItems.tsx @@ -0,0 +1,257 @@ +import { links, themeswitch } from '@/lib/config'; +import { iterateTokens } from '@/lib/utils'; +import { Icons, cn } from '@/ui'; +import { Command, CommandGroup, useCommandState } from 'cmdk'; +import { + Dispatch, + ReactNode, + RefObject, + SetStateAction, + useRef, + useState, +} from 'react'; +import ReactDOMServer from 'react-dom/server'; +import { useCopyToClipboard, useDebounce } from 'react-use'; + +import { useRouter } from 'next/navigation'; + +import { Inline, Split } from '@marigold/components'; +import { ExternalLink } from '@marigold/icons'; + +import { useThemeSwitch } from '@/ui/ThemeSwitch'; +import { Theme } from '@/ui/icons/Theme'; + +import { Hotkey } from './SiteMenu'; + +interface CopyItemProps { + children: ReactNode; + className?: string; + value?: string; + keywords?: string[]; + onSelect?: (value: string) => void; + copyValue: string; +} + +interface CommandItemProps { + classNames: { + item: string; + container: string; + section: string; + }; +} + +interface ChangeThemeItemProps extends CommandItemProps { + setOpen: Dispatch>; +} +interface PagesItemProps extends CommandItemProps { + name: string; + setOpen: Dispatch>; + setPages: Dispatch>; + subPage: string; + items: { + title: string; + slug: string; + order: number | undefined; + headings: JSON; + }[]; +} + +// Components +// --------------- +export const CopyItem = ({ children, copyValue, ...props }: CopyItemProps) => { + const search = useCommandState(state => state.search); + const [isCopied, setCopy] = useState(false); + const [, setCopied] = useCopyToClipboard(); + const [isReady, cancel] = useDebounce(() => setCopy(false), 2000, [isCopied]); + const copy = (value: string) => { + if (isReady()) { + cancel(); + } + setCopy(true); + setCopied(value); + }; + + if (!search) return null; + return ( + copy(copyValue)} {...props}> + + {children} + + + {isCopied ? 'COPIED!' : 'COPY ICON'} + + + + ); +}; + +export const TokenItem = ({ classNames }: CommandItemProps) => { + const { current, themes } = useThemeSwitch(); + if (!current) { + return null; + } + const tokens = iterateTokens(themes[current].colors || {}); + return ( + + {tokens.map(([token]) => ( + + {token.replace('-DEFAULT', '')} + + ))} + + ); +}; + +export const IconItem = ({ classNames }: CommandItemProps) => { + const ref = useRef(); + const getIcon = (icon: keyof typeof Icons, ref: RefObject) => { + const Component = Icons[icon]; + const iconElement = ; + const svg = ReactDOMServer.renderToString(); + return { iconElement, ref, icon, svg }; + }; + + const iconElements = Object.keys(Icons).map((icon: keyof typeof Icons) => { + return getIcon(icon, ref as any); + }); + return ( + + {Object.values(iconElements).map(elements => ( + + {elements.iconElement} + {elements.icon} + + ))} + + ); +}; + +export const ChangeThemeItem = ({ + classNames, + setOpen, +}: ChangeThemeItemProps) => { + const { updateTheme } = useThemeSwitch(); + const changeTheme = (theme: string) => { + updateTheme(theme); + setOpen(false); + }; + return ( + <> + {themeswitch.map(({ name, items }) => ( + + {items?.map(item => ( + changeTheme(item.theme)} + > + + {item.name} + + + + + + + ))} + + ))} + + ); +}; + +export const ExternalLinkItem = ({ classNames }: CommandItemProps) => ( + <> + {links.map(({ name, items }) => ( + + {items.map(page => ( + window.open(page.href, '_blank')} + keywords={page.keywords} + > + + {page.name} + + + + + + + ))} + + ))} + +); + +export const PagesItem = ({ + classNames, + items, + name, + setOpen, + subPage, + setPages, +}: PagesItemProps) => { + const router = useRouter(); + + const goto = (slug: string) => { + router.push(`/${slug}`); + setOpen(false); + setPages([]); + }; + + return ( + + {items.map(page => ( + <> + goto(page.slug)} + > + + {page.title} + + + + + {subPage === page.slug && ( + <> + {Object.values(page.headings).map( + (sub: { slug: string; text: string }) => ( + goto(`${page.slug}#${sub.slug}`)} + > + {sub.text} + + ) + )} + + )} + + ))} + + ); +}; diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index f70a2cbd54..077b0f62b5 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -1,30 +1,23 @@ 'use client'; -import { links, siteConfig, themeswitch } from '@/lib/config'; -import { iterateTokens } from '@/lib/utils'; -import { Button, Dialog, Icons, Inline, Split, cn, useClassNames } from '@/ui'; -import { Command, CommandGroup, useCommandState } from 'cmdk'; +import { siteConfig } from '@/lib/config'; +import { Button, Dialog, useClassNames } from '@/ui'; +import { Command, useCommandState } from 'cmdk'; import { allContentPages } from 'contentlayer/generated'; -import { - Dispatch, - ReactNode, - RefObject, - SetStateAction, - useEffect, - useRef, - useState, -} from 'react'; -import ReactDOMServer from 'react-dom/server'; -import { useCopyToClipboard, useDebounce } from 'react-use'; - -import { useRouter } from 'next/navigation'; +import { Dispatch, SetStateAction, useEffect, useState } from 'react'; -import { ExternalLink, Search } from '@marigold/icons'; +import { Search } from '@marigold/icons'; -import { useThemeSwitch } from '@/ui/ThemeSwitch'; -import { Theme } from '@/ui/icons/Theme'; import { useHasMounted } from '@/ui/useHasMounted'; +import { + ChangeThemeItem, + ExternalLinkItem, + IconItem, + PagesItem, + TokenItem, +} from './CommandItems'; + // Helpers // --------------- const groupedPages = siteConfig.navigation.map(({ name, slug }) => { @@ -53,7 +46,7 @@ const groupedPages = siteConfig.navigation.map(({ name, slug }) => { interface HotKeyProps { letter: string; } -const Hotkey = ({ letter }: HotKeyProps) => { +export const Hotkey = ({ letter }: HotKeyProps) => { const mounted = useHasMounted(); if (!mounted) { return null; @@ -97,47 +90,10 @@ const CustomInput = ({ /> ); }; -interface CopyItemProps { - children: ReactNode; - className?: string; - value?: string; - keywords?: string[]; - onSelect?: (value: string) => void; - copyValue: string; -} - -const CopyItem = ({ children, copyValue, ...props }: CopyItemProps) => { - const search = useCommandState(state => state.search); - const [isCopied, setCopy] = useState(false); - const [, setCopied] = useCopyToClipboard(); - const [isReady, cancel] = useDebounce(() => setCopy(false), 2000, [isCopied]); - const copy = (value: string) => { - if (isReady()) { - cancel(); - } - setCopy(true); - setCopied(value); - }; - - if (!search) return null; - return ( - copy(copyValue)} {...props}> - - {children} - - - {isCopied ? 'COPIED!' : 'COPY ICON'} - - - - ); -}; export const SiteMenu = () => { - const router = useRouter(); const [open, setOpen] = useState(false); const [query, setQuery] = useState(''); - const ref = useRef(); const [pages, setPages] = useState(['']); const subPage = pages[pages.length - 1]; @@ -146,29 +102,6 @@ export const SiteMenu = () => { setPages([...pages, slug]); }; - const goto = (slug: string) => { - router.push(`/${slug}`); - setOpen(false); - setPages([]); - }; - - const { updateTheme } = useThemeSwitch(); - const changeTheme = (theme: string) => { - updateTheme(theme); - setOpen(false); - }; - - const getIcon = (icon: keyof typeof Icons, ref: RefObject) => { - const Component = Icons[icon]; - const iconElement = ; - const svg = ReactDOMServer.renderToString(); - return { iconElement, ref, icon, svg }; - }; - - const iconElements = Object.keys(Icons).map((icon: keyof typeof Icons) => { - return getIcon(icon, ref as any); - }); - // register global cmd+k hotkey useEffect(() => { const onKeydown = (e: KeyboardEvent) => { @@ -183,11 +116,6 @@ export const SiteMenu = () => { }, [pages]); const classNames = useClassNames({ component: 'Menu', variant: 'command' }); - const { current, themes } = useThemeSwitch(); - if (!current) { - return null; - } - const tokens = iterateTokens(themes[current].colors || {}); return ( @@ -224,140 +152,23 @@ export const SiteMenu = () => { No results found. {groupedPages.map(({ name, items }) => ( - - {items.map(page => ( - <> - goto(page.slug)} - > - - {page.title} - - - - - {subPage === page.slug && ( - <> - {Object.values(page.headings).map( - (sub: { slug: string; text: string }) => ( - goto(`${page.slug}#${sub.slug}`)} - > - {sub.text} - - ) - )} - - )} - - ))} - + ))} {/* update themes command */} - {themeswitch.map(({ name, items }) => ( - - {items.map(item => ( - changeTheme(item.theme)} - > - - {item.name} - - - - - - - ))} - - ))} - {/* links command */} - {links.map(({ name, items }) => ( - - {items.map(page => ( - window.open(page.href, '_blank')} - keywords={page.keywords} - > - - {page.name} - - - - - - - ))} - - ))} + + {/* external links command */} + {/* tokens copy command */} - {query && ( - - {tokens.map(([token]) => ( - - {token.replace('-DEFAULT', '')} - - ))} - - )} + {query && } {/* copy icon command */} - {query && ( - - {Object.values(iconElements).map(elements => ( - - {elements.iconElement} - {elements.icon} - - ))} - - )} + {query && }
From ce9352825eba17b5086215d319a227cbf2b720c2 Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Fri, 14 Jun 2024 14:47:06 +0200 Subject: [PATCH 74/79] add comment --- docs/app/_components/SiteMenu.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index 077b0f62b5..2074b786ad 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -151,6 +151,7 @@ export const SiteMenu = () => { No results found. + {/* pages and subpages command */} {groupedPages.map(({ name, items }) => ( Date: Mon, 17 Jun 2024 08:55:39 +0200 Subject: [PATCH 75/79] change icon order --- docs/app/_components/CommandItems.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/app/_components/CommandItems.tsx b/docs/app/_components/CommandItems.tsx index 8eeb4fdf4b..581a2f07b8 100644 --- a/docs/app/_components/CommandItems.tsx +++ b/docs/app/_components/CommandItems.tsx @@ -160,11 +160,10 @@ export const ChangeThemeItem = ({ onSelect={() => changeTheme(item.theme)} > - {item.name} - + {item.name} ))} @@ -187,11 +186,10 @@ export const ExternalLinkItem = ({ classNames }: CommandItemProps) => ( keywords={page.keywords} > - {page.name} - + {page.name} ))} From b2915ad03b912872c6d6f239d606e099897c664d Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Mon, 17 Jun 2024 10:45:42 +0200 Subject: [PATCH 76/79] added hotkey only on selected item --- docs/app/_components/CommandItems.tsx | 6 ++---- docs/app/_components/SiteMenu.tsx | 7 ++++--- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/docs/app/_components/CommandItems.tsx b/docs/app/_components/CommandItems.tsx index 581a2f07b8..607821e53d 100644 --- a/docs/app/_components/CommandItems.tsx +++ b/docs/app/_components/CommandItems.tsx @@ -207,19 +207,17 @@ export const PagesItem = ({ setPages, }: PagesItemProps) => { const router = useRouter(); - const goto = (slug: string) => { router.push(`/${slug}`); setOpen(false); setPages([]); }; - return ( {items.map(page => ( <> goto(page.slug)} @@ -227,7 +225,7 @@ export const PagesItem = ({ {page.title} - + {subPage === page.slug && ( diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index 2074b786ad..1d6a0ed254 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -1,7 +1,7 @@ 'use client'; import { siteConfig } from '@/lib/config'; -import { Button, Dialog, useClassNames } from '@/ui'; +import { Button, Dialog, cn, useClassNames } from '@/ui'; import { Command, useCommandState } from 'cmdk'; import { allContentPages } from 'contentlayer/generated'; import { Dispatch, SetStateAction, useEffect, useState } from 'react'; @@ -45,15 +45,16 @@ const groupedPages = siteConfig.navigation.map(({ name, slug }) => { interface HotKeyProps { letter: string; + className?: string; } -export const Hotkey = ({ letter }: HotKeyProps) => { +export const Hotkey = ({ letter, className }: HotKeyProps) => { const mounted = useHasMounted(); if (!mounted) { return null; } const isMacOS = window.navigator.userAgent.includes('Mac OS'); return ( - + ({isMacOS ? '⌘' : 'Ctrl+'} {letter}) From 79f3681f66dc60aab9a1ce74ae446d9370571dbe Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Mon, 17 Jun 2024 11:13:07 +0200 Subject: [PATCH 77/79] add some styling so it looks more like keys --- docs/app/_components/SiteMenu.tsx | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index 1d6a0ed254..6947da589b 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -1,7 +1,7 @@ 'use client'; import { siteConfig } from '@/lib/config'; -import { Button, Dialog, cn, useClassNames } from '@/ui'; +import { Button, Dialog, Inline, cn, useClassNames } from '@/ui'; import { Command, useCommandState } from 'cmdk'; import { allContentPages } from 'contentlayer/generated'; import { Dispatch, SetStateAction, useEffect, useState } from 'react'; @@ -173,12 +173,19 @@ export const SiteMenu = () => { {query && }
-
- Action ↵ -
-
- More Details -
+ + Action + + ↵ + + + + More Details + +
From 000e50533bf4584dbf714c12d19e9f8cdfc7cf74 Mon Sep 17 00:00:00 2001 From: ssarahgm Date: Wed, 19 Jun 2024 15:51:50 +0200 Subject: [PATCH 78/79] change naming --- docs/app/_components/SiteMenu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index 6947da589b..559ab97818 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -174,13 +174,13 @@ export const SiteMenu = () => {
- Action + Go ↵ - More Details + Show Sublevels Date: Thu, 20 Jun 2024 10:49:44 +0200 Subject: [PATCH 79/79] change namin to expand --- docs/app/_components/SiteMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/app/_components/SiteMenu.tsx b/docs/app/_components/SiteMenu.tsx index 559ab97818..412f334d9d 100644 --- a/docs/app/_components/SiteMenu.tsx +++ b/docs/app/_components/SiteMenu.tsx @@ -180,7 +180,7 @@ export const SiteMenu = () => { - Show Sublevels + Expand