docs: add storybook themes customization for pages (#185)

* docs: add storybook themes customization for pages

* fix: page components to apply themes correctly

* test: update snapshot

.changeset/wicked-hornets-move.md

@@ -0,0 +1,6 @@
+---
+'storybook-pages': patch
+'@smile/haring-react': patch
+---
+
+fix FoldableColumnLayout and SearchResults styles to apply themes correclty

.storybook/WithProvider.tsx

@@ -1,3 +1,4 @@
+import type { DefaultMantineColor } from '@mantine/core';
 import type { StoryContext, StoryFn } from '@storybook/react';
 import type { ReactElement } from 'react';
 
@@ -12,8 +13,22 @@ export default function WithProvider(
   context: StoryContext,
 ): ReactElement {
   const {
+    args,
     globals: { theme },
+    title,
   } = context;
+
+  const isPage = title.toLowerCase().startsWith('3-custom/pages/');
+  if (isPage) {
+    return (
+      <Provider
+        primaryColor={args.themePrimaryColor as DefaultMantineColor}
+        secondaryColor={args.themeSecondaryColor as DefaultMantineColor}
+      >
+        <Story />
+      </Provider>
+    );
+  }
   return (
     <Provider>
       <MantineProvider

packages/haring-react/src/Layouts/FoldableColumnLayout/FoldableColumnLayout.module.css

@@ -2,6 +2,7 @@
   padding: 40px 64px 0 64px;
   position: relative;
   width: 100%;
+  border-radius: 0;
 
   /*noinspection CssInvalidAtRule*/
   @mixin smaller-than $mantine-breakpoint-md {
@@ -18,6 +19,10 @@
   }
 }
 
+.boxWithoutMotif {
+  background: transparent;
+}
+
 .collapseButton {
   /*noinspection CssInvalidAtRule*/
   @mixin smaller-than $mantine-breakpoint-md {

packages/haring-react/src/Layouts/FoldableColumnLayout/FoldableColumnLayout.stories.tsx

@@ -18,7 +18,7 @@ const meta = {
   parameters: {
     layout: 'fullscreen',
   },
-  title: '3-Custom/Layouts/FoldableColumnLayout',
+  title: '3-custom/Layouts/FoldableColumnLayout',
 } satisfies Meta<typeof Cmp>;
 
 export default meta;

packages/haring-react/src/Layouts/FoldableColumnLayout/FoldableColumnLayout.tsx

@@ -7,7 +7,7 @@ import type {
 } from '@mantine/core';
 import type { ReactElement, ReactNode } from 'react';
 
-import { Box, Button, Container, Grid, Switch, Text } from '@mantine/core';
+import { Button, Container, Grid, Paper, Switch, Text } from '@mantine/core';
 import { useUncontrolled } from '@mantine/hooks';
 import { CaretDown, CaretUp } from '@phosphor-icons/react';
 import { NestedProvider, useMainTheme } from '@smile/haring-react-shared';
@@ -66,9 +66,10 @@ export function FoldableColumnLayout(
   return (
     <>
       <NestedProvider theme={theme}>
-        <Box
-          className={`${classes.box} ${boxMotif ? classes.boxWithMotif : ''}`}
-          color="primary"
+        <Paper
+          className={`${classes.box} ${
+            boxMotif ? classes.boxWithMotif : classes.boxWithoutMotif
+          }`}
           {...boxProps}
         >
           {Boolean(boxMotif) && (
@@ -108,7 +109,7 @@ export function FoldableColumnLayout(
               </Grid.Col>
             )}
           </Grid>
-        </Box>
+        </Paper>
       </NestedProvider>
       <div
         className={`${classes.collapseButton} ${

packages/haring-react/src/Layouts/FoldableColumnLayout/__snapshots__/FoldableColumnLayout.test.tsx.snap

@@ -31,8 +31,7 @@ exports[`FoldableColumnLayout matches snapshot 1`] = `
     id=":r0:"
   >
     <div
-      class="undefined "
-      color="primary"
+      class="undefined undefined m_1b7284a3 mantine-Paper-root"
     >
       <style
         data-mantine-styles="inline"

packages/storybook-pages/src/Pages/BrowsingPage/BrowsingPage.stories.tsx

@@ -1,13 +1,17 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { sharedMeta } from '../pages-story';
+
 import { BrowsingPage as Cmp } from './BrowsingPage';
 
 const meta = {
+  ...sharedMeta,
+  args: { themePrimaryColor: 'cyan', themeSecondaryColor: 'gray' },
   component: Cmp,
   parameters: {
     layout: 'fullscreen',
   },
-  title: '3-Custom/Pages/BrowsingPage',
+  title: '3-custom/Pages/BrowsingPage',
 } satisfies Meta<typeof Cmp>;
 
 export default meta;

packages/storybook-pages/src/Pages/DashboardPage/DashboardPage.stories.tsx

@@ -1,10 +1,11 @@
-'use client';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { sharedMeta } from '../pages-story';
+
 import { DashboardPage as Cmp } from './DashboardPage';
 
 const meta = {
+  ...sharedMeta,
   component: Cmp,
   parameters: {
     layout: 'fullscreen',

packages/storybook-pages/src/Pages/DocumentDetails/DocumentDetails.stories.tsx

@@ -1,15 +1,16 @@
-'use client';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { sharedMeta } from '../pages-story';
+
 import { DocumentDetails as Cmp } from './DocumentDetails';
 
 const meta = {
+  ...sharedMeta,
   component: Cmp,
   parameters: {
     layout: 'fullscreen',
   },
-  title: '3-Custom/Pages/DocumentDetails',
+  title: '3-custom/Pages/DocumentDetails',
 } satisfies Meta<typeof Cmp>;
 
 export default meta;

packages/storybook-pages/src/Pages/SearchResults/SearchResults.stories.tsx

@@ -1,13 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { sharedMeta } from '../pages-story';
+
 import { SearchResults as Cmp } from './SearchResults';
 
 const meta = {
+  ...sharedMeta,
   component: Cmp,
   parameters: {
     layout: 'fullscreen',
   },
-  title: '3-Custom/Pages/SearchResults',
+  title: '3-custom/Pages/SearchResults',
 } satisfies Meta<typeof Cmp>;
 
 export default meta;

packages/storybook-pages/src/Pages/SearchResults/SearchResults.tsx

@@ -408,11 +408,8 @@ export function SearchResults(): ReactElement {
       </AppShell.Header>
       <AppShell.Main>
         <FoldableColumnLayout
-          boxMotif={<Motif style={{ fill: '#868E96' }} />}
-          boxProps={{
-            p: { lg: '48px 64px' },
-            style: { background: theme.colors.gray[8] },
-          }}
+          boxMotif={<Motif />}
+          boxProps={{ p: { lg: '48px 64px' } }}
           isColumnVisible={isColumnVisible}
           onChangeIsColumnVisible={setIsColumnVisible}
           sidebarContent={

packages/storybook-pages/src/Pages/pages-story.ts

@@ -0,0 +1,17 @@
+import { DEFAULT_THEME } from '@mantine/core';
+
+const colorOptions = Object.keys(DEFAULT_THEME.colors);
+
+export const sharedMeta = {
+  argTypes: {
+    themePrimaryColor: {
+      control: 'select',
+      options: colorOptions,
+    },
+    themeSecondaryColor: {
+      control: 'select',
+      options: colorOptions,
+    },
+  },
+  args: { themePrimaryColor: 'cyan', themeSecondaryColor: 'gray' },
+};

turbo/generators/templates/pageStory.hbs

@@ -1,10 +1,11 @@
-'use client';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { sharedMeta } from '../pages-story';
+
 import { {{pascalCase name}} as Cmp } from './{{pascalCase name}}';
 
 const meta = {
+  ...sharedMeta,
   component: Cmp,
   parameters: {
     layout: 'fullscreen',