From 879baf17d1adc914a6ab3e71758025d737d49f0e Mon Sep 17 00:00:00 2001 From: Germain Bergeron Date: Wed, 18 Dec 2024 15:33:39 -0500 Subject: [PATCH] feat(website): add colour and scheme picker --- packages/website/src/App.tsx | 32 ++++- packages/website/src/TopBar.tsx | 62 +++++++++- .../src/building-blocs/Demo.module.css | 7 +- packages/website/src/building-blocs/Demo.tsx | 4 +- .../website/src/building-blocs/PageHeader.tsx | 2 +- .../website/src/building-blocs/PageLayout.tsx | 2 +- .../website/src/building-blocs/PropsTable.tsx | 113 +++++++++--------- .../src/styles/CodeHighlight.theme.module.css | 13 ++ packages/website/src/styles/props-table.css | 38 ------ .../src/theme-picker/ThemePickerContext.ts | 9 ++ 10 files changed, 172 insertions(+), 110 deletions(-) delete mode 100644 packages/website/src/styles/props-table.css create mode 100644 packages/website/src/theme-picker/ThemePickerContext.ts diff --git a/packages/website/src/App.tsx b/packages/website/src/App.tsx index 53a0652537..f72f0b9b4b 100644 --- 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 = () => ( - + @@ -30,9 +31,30 @@ const App = () => ( - + ); +interface PlatformAppThemeProps { + children?: ReactNode; +} + +export const PlatformAppTheme: FunctionComponent = ({children}) => { + const [primaryColor, setPrimaryColor] = useState('blue'); + const PlasmaWebsiteTheme = useMemo( + () => + createTheme({ + primaryColor, + }), + [primaryColor], + ); + + return ( + + {children} + + ); +}; + export default App; diff --git a/packages/website/src/TopBar.tsx b/packages/website/src/TopBar.tsx index cb149bd708..6da0b6153d 100644 --- a/packages/website/src/TopBar.tsx +++ b/packages/website/src/TopBar.tsx @@ -1,8 +1,19 @@ -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 = () => ( @@ -10,10 +21,53 @@ const TopBar = () => ( Plasma Design System - - - + + + + + + + ); export default TopBar; + +const ColorSchemePicker = () => { + const {setColorScheme} = useMantineColorScheme(); + const computedColorScheme = useComputedColorScheme('light', {getInitialValueInEffect: true}); + + return ( + setColorScheme(computedColorScheme === 'light' ? 'dark' : 'light')} + color="white" + variant="subtle" + size="xl" + aria-label="Toggle color scheme" + > + {computedColorScheme === 'light' ? : } + + ); +}; + +const PrimaryColorPicker = () => ( + + + + +); + +const ColorPickerSwatch: FunctionComponent<{color: DefaultMantineColor}> = ({color}) => { + const {setPrimaryColor} = useThemePicker(); + const {primaryColor: currentColor} = useMantineTheme(); + return ( + setPrimaryColor(color)} + > + {currentColor === color ? : null} + + ); +}; diff --git a/packages/website/src/building-blocs/Demo.module.css b/packages/website/src/building-blocs/Demo.module.css index d8e79f57f4..7b2ab9cf7c 100644 --- 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 index 9d6d3026c5..1204da8102 100644 --- a/packages/website/src/building-blocs/Demo.tsx +++ b/packages/website/src/building-blocs/Demo.tsx @@ -51,9 +51,9 @@ const Demo = ({ } }; return ( -
+
{title ? ( - + {title} diff --git a/packages/website/src/building-blocs/PageHeader.tsx b/packages/website/src/building-blocs/PageHeader.tsx index 908b4b2efb..1e015834d6 100644 --- a/packages/website/src/building-blocs/PageHeader.tsx +++ b/packages/website/src/building-blocs/PageHeader.tsx @@ -26,7 +26,7 @@ export const PageHeader: FunctionComponent = ({ }) => (
{description}}> - {section} + {section} {title} diff --git a/packages/website/src/building-blocs/PageLayout.tsx b/packages/website/src/building-blocs/PageLayout.tsx index c83e2da8a1..4536475cb9 100644 --- a/packages/website/src/building-blocs/PageLayout.tsx +++ b/packages/website/src/building-blocs/PageLayout.tsx @@ -54,7 +54,7 @@ export const PageLayout = ({ - + diff --git a/packages/website/src/building-blocs/PropsTable.tsx b/packages/website/src/building-blocs/PropsTable.tsx index e7598f4023..fda9ae5833 100644 --- 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 = ({propsMetadata = return (
- - - - - - - - - - - {propsMetadata - .sort(requiredFirst) - .map(({name, type, description, optional, deprecation, defaultValue, params}) => ( - - - - - - - ))} - -
NameTypeDefaultDescription
- {name} - {optional ? null : ( - - REQUIRED - - )} - {deprecation !== null ? ( - - DEPRECATED - - ) : null} - - {type} - {defaultValue ? {defaultValue} : null} - - {deprecation !== null &&
{deprecation}
} - {description} - {params?.length > 0 && ( -
    - {params.map(({parameterName, text}) => ( -
  • - {parameterName} - - – - - {text} -
    • - ))} -
+ + + + + Name + Type + Default + Description + + + + {propsMetadata + .sort(requiredFirst) + .map(({name, type, description, optional, deprecation, defaultValue, params}) => ( + + + {name} + {optional ? null : ( + + REQUIRED + )} - -
+ {deprecation !== null ? ( + + DEPRECATED + + ) : null} + + + {type} + + + {defaultValue ? {defaultValue} : null} + + + + {deprecation !== null &&
{deprecation}
} + {description} + {params?.length > 0 && ( +
    + {params.map(({parameterName, text}) => ( +
  • + {parameterName} + + – + + {text} +
    • + ))} +
+ )} + + + + ))} + + +
); }; diff --git a/packages/website/src/styles/CodeHighlight.theme.module.css b/packages/website/src/styles/CodeHighlight.theme.module.css index 13e768e6e8..2945dd8f72 100644 --- 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 deleted file mode 100644 index 5a801f832c..0000000000 --- a/packages/website/src/styles/props-table.css +++ /dev/null @@ -1,38 +0,0 @@ -.props-table { - max-height: 500px; - overflow: auto; - border: 1px solid var(--mantine-color-gray-3); - border-radius: var(--mantine-radius-md); - - table { - color: var(--mantine-color-black); - - th { - position: sticky; - top: 0; - height: 44px; - padding: 0 24px; - text-align: left; - vertical-align: middle; - background-color: var(--mantine-color-white); - font-weight: 500; - } - - td { - padding: var(--mantine-spacing-sm); - vertical-align: middle; - } - - tr { - height: 44px; - - &:nth-child(odd) { - background-color: var(--mantine-color-gray-1); - } - } - - .code { - color: var(--mantine-color-black); - } - } -} diff --git a/packages/website/src/theme-picker/ThemePickerContext.ts b/packages/website/src/theme-picker/ThemePickerContext.ts new file mode 100644 index 0000000000..b1c02627d5 --- /dev/null +++ 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( + 'ThemePickerProvider component was not found in tree', +);