feat(website): add colour and scheme picker

coveo · Dec 18, 2024 · 879baf1 · 879baf1
1 parent 6641204
commit 879baf1
Show file tree

Hide file tree

Showing 10 changed files with 172 additions and 110 deletions.
diff --git a/packages/website/src/App.tsx b/packages/website/src/App.tsx
@@ -1,16 +1,17 @@
-import {AppShell, Notifications, Plasmantine} from '@coveord/plasma-mantine';
+import {AppShell, createTheme, DefaultMantineColor, Notifications, Plasmantine} from '@coveord/plasma-mantine';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import {FunctionComponent, ReactNode, useMemo, useState} from 'react';
 import {Outlet} from 'react-router-dom';
 import {Navigation} from './Navigation';
-import TopBar from './TopBar';
 import {EngineProvider} from './search/engine/EngineProvider';
+import {ThemePickerProvider} from './theme-picker/ThemePickerContext';
+import TopBar from './TopBar';
 
 import './styles/colors.css';
 import './styles/home.css';
 import './styles/loading-screen.css';
 import './styles/main.css';
 import './styles/plasmaSearchBar.css';
-import './styles/props-table.css';
 import './styles/spacing.css';
 import './styles/tile.css';
 
@@ -19,7 +20,7 @@ const queryClient = new QueryClient();
 const App = () => (
     <QueryClientProvider client={queryClient}>
         <EngineProvider>
-            <Plasmantine>
+            <PlatformAppTheme>
                 <Notifications position="top-center" />
                 <AppShell navbar={{width: 245, breakpoint: undefined}} header={{height: 100}}>
                     <AppShell.Header>
@@ -30,9 +31,30 @@ const App = () => (
                     </AppShell.Navbar>
                     <Outlet />
                 </AppShell>
-            </Plasmantine>
+            </PlatformAppTheme>
         </EngineProvider>
     </QueryClientProvider>
 );
 
+interface PlatformAppThemeProps {
+    children?: ReactNode;
+}
+
+export const PlatformAppTheme: FunctionComponent<PlatformAppThemeProps> = ({children}) => {
+    const [primaryColor, setPrimaryColor] = useState<DefaultMantineColor>('blue');
+    const PlasmaWebsiteTheme = useMemo(
+        () =>
+            createTheme({
+                primaryColor,
+            }),
+        [primaryColor],
+    );
+
+    return (
+        <ThemePickerProvider value={{setPrimaryColor}}>
+            <Plasmantine theme={PlasmaWebsiteTheme}>{children}</Plasmantine>
+        </ThemePickerProvider>
+    );
+};
+
 export default App;
diff --git a/packages/website/src/TopBar.tsx b/packages/website/src/TopBar.tsx
@@ -1,19 +1,73 @@
-import {Group, Image} from '@coveord/plasma-mantine';
+import {
+    ActionIcon,
+    ColorSwatch,
+    Group,
+    Image,
+    useComputedColorScheme,
+    useMantineColorScheme,
+} from '@coveord/plasma-mantine';
+import {CheckSize16Px, MoonAndStarsSize32Px, SunSize32Px} from '@coveord/plasma-react-icons';
+import {DefaultMantineColor, useMantineTheme} from '@mantine/core';
+import {FunctionComponent} from 'react';
 import githubLogo from './assets/github-mark.svg';
 import plasmaLogo from './assets/plasma-logo.svg';
 import StandaloneSearchBar from './search/StandaloneSearchBar';
 import classes from './styles/TopBar.module.css';
+import {useThemePicker} from './theme-picker/ThemePickerContext';
 
 const TopBar = () => (
     <Group justify="space-between" px="lg" py="xs" h="100%" wrap="nowrap" className={classes.topBar}>
         <div>
             <Image src={plasmaLogo} className="header-logo" height={80} fit="contain" alt="Plasma Design System" />
         </div>
         <StandaloneSearchBar />
-        <a href="https://github.com/coveo/plasma#readme" aria-label="README" target="_blank">
-            <Image src={githubLogo} width={32} height={32} className={classes.githubImage} />
-        </a>
+        <Group gap="sm">
+            <a href="https://github.com/coveo/plasma#readme" aria-label="README" target="_blank">
+                <Image src={githubLogo} width={32} height={32} className={classes.githubImage} />
+            </a>
+            <ColorSchemePicker />
+            <PrimaryColorPicker />
+        </Group>
     </Group>
 );
 
 export default TopBar;
+
+const ColorSchemePicker = () => {
+    const {setColorScheme} = useMantineColorScheme();
+    const computedColorScheme = useComputedColorScheme('light', {getInitialValueInEffect: true});
+
+    return (
+        <ActionIcon
+            onClick={() => setColorScheme(computedColorScheme === 'light' ? 'dark' : 'light')}
+            color="white"
+            variant="subtle"
+            size="xl"
+            aria-label="Toggle color scheme"
+        >
+            {computedColorScheme === 'light' ? <MoonAndStarsSize32Px height={32} /> : <SunSize32Px height={32} />}
+        </ActionIcon>
+    );
+};
+
+const PrimaryColorPicker = () => (
+    <Group gap="xs">
+        <ColorPickerSwatch color="blue" />
+        <ColorPickerSwatch color="violet" />
+    </Group>
+);
+
+const ColorPickerSwatch: FunctionComponent<{color: DefaultMantineColor}> = ({color}) => {
+    const {setPrimaryColor} = useThemePicker();
+    const {primaryColor: currentColor} = useMantineTheme();
+    return (
+        <ColorSwatch
+            size="32"
+            component="button"
+            color={`var(--mantine-color-${color}-filled`}
+            onClick={() => setPrimaryColor(color)}
+        >
+            {currentColor === color ? <CheckSize16Px color="#fff" height={24} /> : null}
+        </ColorSwatch>
+    );
+};
diff --git a/packages/website/src/building-blocs/Demo.module.css b/packages/website/src/building-blocs/Demo.module.css
@@ -1,8 +1,6 @@
-.root {
-    background-color: var(--mantine-color-gray-0);
-}
-
 .anchor {
+    color: var(--mantine-color-text);
+
     &:hover {
         .anchorIcon {
             opacity: 1;
@@ -43,7 +41,6 @@
     min-height: 100px;
     display: flex;
     flex-direction: column;
-    background-color: white;
 }
 
 .flexPreviewWrapper {

diff --git a/packages/website/src/building-blocs/Demo.tsx b/packages/website/src/building-blocs/Demo.tsx
@@ -51,9 +51,9 @@ const Demo = ({
         }
     };
     return (
-        <div className={DemoClasses.root}>
+        <div>
             {title ? (
-                <Anchor href={`#${id}`} c="gray.9" className={DemoClasses.anchor}>
+                <Anchor href={`#${id}`} className={DemoClasses.anchor}>
                     <Title order={5} mb="xs" id={id} className={DemoClasses.title}>
                         {title}
                     </Title>

diff --git a/packages/website/src/building-blocs/PageHeader.tsx b/packages/website/src/building-blocs/PageHeader.tsx
@@ -26,7 +26,7 @@ export const PageHeader: FunctionComponent<PageHeaderProps> = ({
 }) => (
     <Header description={<span data-coveo-field="description">{description}</span>}>
         <Header.Breadcrumbs>
-            <Text c="gray.6">{section}</Text>
+            <Text c="dimmed">{section}</Text>
         </Header.Breadcrumbs>
         <span data-coveo-field="title">{title}</span>
         <Header.Actions>

diff --git a/packages/website/src/building-blocs/PageLayout.tsx b/packages/website/src/building-blocs/PageLayout.tsx
@@ -54,7 +54,7 @@ export const PageLayout = ({
                     </Tabs.List>
                 </Container>
                 <Divider />
-                <Box bg="gray.0" h="100%">
+                <Box h="100%">
                     <Container size="xl" py="xl">
                         <Tabs.Panel value="implementation">
                             <ResetScroll />

diff --git a/packages/website/src/building-blocs/PropsTable.tsx b/packages/website/src/building-blocs/PropsTable.tsx
@@ -1,5 +1,6 @@
 import {ComponentMetadata} from '@coveord/plasma-components-props-analyzer';
-import {Badge, Box, Code, Text} from '@coveord/plasma-mantine';
+import {Badge, Box, Code, ScrollArea, Text} from '@coveord/plasma-mantine';
+import {Table as MantineTable} from '@mantine/core';
 import {FunctionComponent} from 'react';
 
 export interface PropsTableProps {
@@ -13,60 +14,64 @@ export const PropsTable: FunctionComponent<PropsTableProps> = ({propsMetadata =
 
     return (
         <div className="props-table">
-            <table>
-                <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                        <th>Description</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {propsMetadata
-                        .sort(requiredFirst)
-                        .map(({name, type, description, optional, deprecation, defaultValue, params}) => (
-                            <tr key={name}>
-                                <td>
-                                    <Code>{name}</Code>
-                                    {optional ? null : (
-                                        <Badge color="info" ml="xs">
-                                            REQUIRED
-                                        </Badge>
-                                    )}
-                                    {deprecation !== null ? (
-                                        <Badge color="warning" ml="xs">
-                                            DEPRECATED
-                                        </Badge>
-                                    ) : null}
-                                </td>
-                                <td>
-                                    <Code>{type}</Code>
-                                </td>
-                                <td>{defaultValue ? <Code>{defaultValue}</Code> : null}</td>
-                                <td>
-                                    <Text span size="sm">
-                                        {deprecation !== null && <div>{deprecation}</div>}
-                                        {description}
-                                        {params?.length > 0 && (
-                                            <ul>
-                                                {params.map(({parameterName, text}) => (
-                                                    <li key={parameterName}>
-                                                        <Code>{parameterName}</Code>
-                                                        <Box component="span" px="xs">
-                                                            &ndash;
-                                                        </Box>
-                                                        {text}
-                                                    </li>
-                                                ))}
-                                            </ul>
+            <ScrollArea.Autosize mah={500}>
+                <MantineTable stickyHeader striped>
+                    <MantineTable.Thead>
+                        <MantineTable.Tr>
+                            <MantineTable.Th>Name</MantineTable.Th>
+                            <MantineTable.Th>Type</MantineTable.Th>
+                            <MantineTable.Th>Default</MantineTable.Th>
+                            <MantineTable.Th>Description</MantineTable.Th>
+                        </MantineTable.Tr>
+                    </MantineTable.Thead>
+                    <MantineTable.Tbody>
+                        {propsMetadata
+                            .sort(requiredFirst)
+                            .map(({name, type, description, optional, deprecation, defaultValue, params}) => (
+                                <MantineTable.Tr key={name}>
+                                    <MantineTable.Td>
+                                        <Code>{name}</Code>
+                                        {optional ? null : (
+                                            <Badge color="info" ml="xs">
+                                                REQUIRED
+                                            </Badge>
                                         )}
-                                    </Text>
-                                </td>
-                            </tr>
-                        ))}
-                </tbody>
-            </table>
+                                        {deprecation !== null ? (
+                                            <Badge color="warning" ml="xs">
+                                                DEPRECATED
+                                            </Badge>
+                                        ) : null}
+                                    </MantineTable.Td>
+                                    <MantineTable.Td>
+                                        <Code>{type}</Code>
+                                    </MantineTable.Td>
+                                    <MantineTable.Td>
+                                        {defaultValue ? <Code>{defaultValue}</Code> : null}
+                                    </MantineTable.Td>
+                                    <MantineTable.Td>
+                                        <Text span size="sm">
+                                            {deprecation !== null && <div>{deprecation}</div>}
+                                            {description}
+                                            {params?.length > 0 && (
+                                                <ul>
+                                                    {params.map(({parameterName, text}) => (
+                                                        <li key={parameterName}>
+                                                            <Code>{parameterName}</Code>
+                                                            <Box component="span" px="xs">
+                                                                &ndash;
+                                                            </Box>
+                                                            {text}
+                                                        </li>
+                                                    ))}
+                                                </ul>
+                                            )}
+                                        </Text>
+                                    </MantineTable.Td>
+                                </MantineTable.Tr>
+                            ))}
+                    </MantineTable.Tbody>
+                </MantineTable>
+            </ScrollArea.Autosize>
         </div>
     );
 };

diff --git a/packages/website/src/styles/CodeHighlight.theme.module.css b/packages/website/src/styles/CodeHighlight.theme.module.css
@@ -16,6 +16,19 @@
         --code-title-color: #dcdcaa;
     }
 
+    @mixin dark {
+        --_color: var(--mantine-color-dark-1);
+        --_background: var(--mantine-color-dark-8);
+        --code-comment-color: #6a9955;
+        --code-keyword-color: #559cd6;
+        --code-tag-color: #4ec9b0;
+        --code-literal-color: #79c0ff;
+        --code-string-color: #ce9178;
+        --code-variable-color: #79c0ff;
+        --code-class-color: #9cdcfe;
+        --code-title-color: #dcdcaa;
+    }
+
     .hljs-comment .hljs-quote {
         font-style: italic;
         color: var(--mantine-color-dark-3);

diff --git a/packages/website/src/styles/props-table.css b/packages/website/src/styles/props-table.css
diff --git a/packages/website/src/theme-picker/ThemePickerContext.ts b/packages/website/src/theme-picker/ThemePickerContext.ts
@@ -0,0 +1,9 @@
+import {createSafeContext, type DefaultMantineColor} from '@coveord/plasma-mantine';
+
+interface ThemePickerContextType {
+    setPrimaryColor: (newColor: DefaultMantineColor) => void;
+}
+
+export const [ThemePickerProvider, useThemePicker] = createSafeContext<ThemePickerContextType>(
+    'ThemePickerProvider component was not found in tree',
+);