@opengeoweb/theme 9.37.0 → 10.1.0

package/README.md

@@ -226,7 +226,6 @@ export const TableDark = (): React.ReactElement => (
 // lib/components/Theme/ThemeContext.tsx
 
 // lib/stories
-// lib/stories/StoryWrapper.tsx
 // lib/stories/story.stories.tsx
 ```
 
@@ -319,7 +318,7 @@ If there are mistakes in naming, colors are missing in the Design, contact [Didi
 
 ## Theme Stories `(lib/stories)`
 
-Contains demo stories with MUI components. Every story is build with the `StoryWrapper` component and can be toggled from light to dark theme. It does not export anything, it only shows the MUI components in light or dark theme.
+Contains demo stories with MUI components. Every story is wrapped with a decorator defined in `libs/theme/.storybook/preview.js` component and can be toggled from light to dark theme. It does not export anything, it only shows the MUI components in light or dark theme.
 
 - The **Color** story shows all the colors, styles and other properties of the defined theme. Could be handy for reviewing styling values. On the right the `geowebColor` object is shown, and these values are accessible throughout all components with the ThemeProvider wrapper. Not that more values are shown than given, this is because of the parsers that adds in some cases extra properties as for example `rgba`
 - The **Elevation** shows all elevations we currently have. These can be used for defining `box-shadow` for elements. If you want to use the elevation in code:

package/index.esm.js

@@ -1,3 +1,4 @@
+import 'msw';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { SvgIcon, createTheme as createTheme$1, ThemeProvider as ThemeProvider$1, CssBaseline, GlobalStyles, StyledEngineProvider, useTheme } from '@mui/material';
 import * as React from 'react';
@@ -2397,10 +2398,10 @@ var colors$2 = {
   cards: {
     cardContainer: '#FFFFFF',
     cardContainerBorder: '#EEEEEE',
-    cardContainerMouseOver: '#D8E4F9',
+    cardContainerMouseOver: '#EFF5FF',
     cardContainerDisabled: '#EBEBEB',
     cardContainerDisabledBorder: '#E3E2E2',
-    cardContainerDisabledMouseOver: '#D8E4F9'
+    cardContainerDisabledMouseOver: '#EFF5FF'
   },
   backdrops: {
     black: {
@@ -3706,10 +3707,10 @@ var colors$1 = {
   cards: {
     cardContainer: '#313131',
     cardContainerBorder: '#404040',
-    cardContainerMouseOver: '#45556F',
+    cardContainerMouseOver: '#414751',
     cardContainerDisabled: '#252525',
     cardContainerDisabledBorder: '#363636',
-    cardContainerDisabledMouseOver: '#45556F'
+    cardContainerDisabledMouseOver: '#414751'
   },
   backdrops: {
     black: {
@@ -4385,10 +4386,10 @@ var colors = {
   cards: {
     cardContainer: '#311c1c',
     cardContainerBorder: '#404040',
-    cardContainerMouseOver: '#033E1A',
+    cardContainerMouseOver: '#045725',
     cardContainerDisabled: '#252525',
     cardContainerDisabledBorder: '#363636',
-    cardContainerDisabledMouseOver: '#45556F'
+    cardContainerDisabledMouseOver: '#045725'
   },
   backdrops: {
     black: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/theme",
-  "version": "9.37.0",
+  "version": "10.1.0",
   "description": "GeoWeb Theme library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -13,7 +13,8 @@
     "i18next": "^23.11.5",
     "@mui/material": "^6.1.1",
     "react-i18next": "^15.1.1",
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.21",
+    "msw": "^1.3.2"
   },
   "peerDependencies": {
     "react": "18",

package/src/index.d.ts

@@ -1,3 +1,4 @@
+import 'msw';
 import * as Icons from './lib/components/Icons';
 import themeTranslations from '../locales/theme.json';
 export { Icons };

package/src/lib/components/Storybook/index.d.ts

@@ -0,0 +1 @@
+export * from './StoryHeader';

package/src/lib/stories/Accordion.stories.d.ts

@@ -1,15 +1,9 @@
-import * as React from 'react';
+import { Accordion as MuiAccordion } from '@mui/material';
+import type { StoryObj } from '@storybook/react';
+type Story = StoryObj<typeof MuiAccordion>;
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AccordionLight: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-};
-export declare const AccordionDark: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-};
+export declare const AccordionLight: Story;
+export declare const AccordionDark: Story;

package/src/lib/stories/Avatar.stories.d.ts

@@ -1,27 +1,9 @@
-import * as React from 'react';
+import { Avatar as MuiAvatar } from '@mui/material';
+import type { StoryObj } from '@storybook/react';
+type Story = StoryObj<typeof MuiAvatar>;
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AvatarLight: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
-export declare const AvatarDark: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
+export declare const AvatarLight: Story;
+export declare const AvatarDark: Story;

package/src/lib/stories/Backdrop.stories.d.ts

@@ -1,16 +1,11 @@
 import * as React from 'react';
+import { Backdrop as MuiBackdrop } from '@mui/material';
+import type { StoryObj } from '@storybook/react';
+type Story = StoryObj<typeof MuiBackdrop>;
 declare const _default: {
     title: string;
 };
 export default _default;
 export declare const BackDropDemo: () => React.ReactElement;
-export declare const BackDropLight: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-};
-export declare const BackDropDark: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-};
+export declare const BackDropLight: Story;
+export declare const BackDropDark: Story;

package/src/lib/stories/Breakpoints.stories.d.ts

@@ -1,14 +1,8 @@
-import * as React from 'react';
+import type { StoryObj } from '@storybook/react';
+import { breakpoints } from '../utils/createTheme';
+type Story = StoryObj<typeof breakpoints>;
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Breakpoints: {
-    (): React.ReactElement;
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
+export declare const Breakpoints: Story;

package/src/lib/stories/Button.stories.d.ts

@@ -1,27 +1,9 @@
-import * as React from 'react';
+import { Button } from '@mui/material';
+import type { StoryObj } from '@storybook/react';
+type Story = StoryObj<typeof Button>;
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const ButtonLight: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
-export declare const ButtonDark: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
+export declare const ButtonLight: Story;
+export declare const ButtonDark: Story;

package/src/lib/stories/Card.stories.d.ts

@@ -1,27 +1,9 @@
-import * as React from 'react';
+import { Card } from '@mui/material';
+import type { StoryObj } from '@storybook/react';
+type Story = StoryObj<typeof Card>;
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const CardsLight: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
-export declare const CardsDark: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
+export declare const CardsLight: Story;
+export declare const CardsDark: Story;

package/src/lib/stories/Colors.stories.d.ts

@@ -1,29 +1,9 @@
-import * as React from 'react';
+import { Typography } from '@mui/material';
+import type { StoryObj } from '@storybook/react';
+type Story = StoryObj<typeof Typography>;
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const ColorsLight: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-        layout: string;
-    };
-};
-export declare const ColorsDark: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinkLink: {
-            name: string;
-            link: string;
-        }[];
-        layout: string;
-    };
-};
+export declare const ColorsLight: Story;
+export declare const ColorsDark: Story;

package/src/lib/stories/Elevation.stories.d.ts

@@ -1,30 +1,9 @@
-import * as React from 'react';
+import { Typography } from '@mui/material';
+import type { StoryObj } from '@storybook/react';
+type Story = StoryObj<typeof Typography>;
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const ElevationDemo: React.FC;
-export declare const ElevationLight: {
-    (): React.ReactElement;
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-        layout: string;
-    };
-    storyName: string;
-    tags: string[];
-};
-export declare const ElevationDark: {
-    (): React.ReactElement;
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-        layout: string;
-    };
-    storyName: string;
-    tags: string[];
-};
+export declare const ElevationLight: Story;
+export declare const ElevationDark: Story;

package/src/lib/stories/FormElements.stories.d.ts

@@ -1,27 +1,9 @@
-import * as React from 'react';
+import { Box } from '@mui/material';
+import type { StoryObj } from '@storybook/react';
+type Story = StoryObj<typeof Box>;
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const FormElementsLight: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
-export declare const FormElementsDark: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
+export declare const FormElementsLight: Story;
+export declare const FormElementsDark: Story;

package/src/lib/stories/IconButton.stories.d.ts

@@ -1,27 +1,9 @@
-import * as React from 'react';
+import { IconButton } from '@mui/material';
+import type { StoryObj } from '@storybook/react';
+type Story = StoryObj<typeof IconButton>;
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const IconButtonLight: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
-export declare const IconButtonDark: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
+export declare const IconButtonLight: Story;
+export declare const IconButtonDark: Story;

package/src/lib/stories/Icons.stories.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
+import type { StoryObj } from '@storybook/react';
+import * as IconList from '../components/Icons';
+type Story = StoryObj<typeof IconList>;
 declare const _default: {
     title: string;
 };
@@ -7,13 +10,5 @@ export interface IconGridItemProps {
     name: string;
     icon: React.ReactNode;
 }
-export declare const IconsLight: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-};
-export declare const IconsDark: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-};
+export declare const IconsLight: Story;
+export declare const IconsDark: Story;

package/src/lib/stories/List.stories.d.ts

@@ -1,27 +1,9 @@
-import * as React from 'react';
+import { List as MuiList } from '@mui/material';
+import type { StoryObj } from '@storybook/react';
+type Story = StoryObj<typeof MuiList>;
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const ListLight: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
-export declare const ListDark: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
+export declare const ListLight: Story;
+export declare const ListDark: Story;

package/src/lib/stories/MenuItem.stories.d.ts

@@ -1,28 +1,10 @@
-import * as React from 'react';
+import { MenuItem as MuiMenuItem } from '@mui/material';
+import type { StoryObj } from '@storybook/react';
+type Story = StoryObj<typeof MuiMenuItem>;
 declare const _default: {
     title: string;
     tags: string[];
 };
 export default _default;
-export declare const MenuItemLight: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
-export declare const MenuItemDark: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
+export declare const MenuItemLight: Story;
+export declare const MenuItemDark: Story;

package/src/lib/stories/Select.stories.d.ts

@@ -1,27 +1,9 @@
-import * as React from 'react';
+import { Select as MuiSelect } from '@mui/material';
+import type { StoryObj } from '@storybook/react';
+type Story = StoryObj<typeof MuiSelect>;
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const SelectLight: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
-export declare const SelectDark: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
+export declare const SelectLight: Story;
+export declare const SelectDark: Story;

package/src/lib/stories/Slider.stories.d.ts

@@ -1,27 +1,9 @@
-import * as React from 'react';
+import { Slider as MuiSlider } from '@mui/material';
+import type { StoryObj } from '@storybook/react';
+type Story = StoryObj<typeof MuiSlider>;
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const SliderLight: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
-export declare const SliderDark: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
+export declare const SliderLight: Story;
+export declare const SliderDark: Story;

package/src/lib/stories/Snackbar.stories.d.ts

@@ -1,27 +1,9 @@
-import * as React from 'react';
+import { Snackbar as MuiSnackbar } from '@mui/material';
+import type { StoryObj } from '@storybook/react';
+type Story = StoryObj<typeof MuiSnackbar>;
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const SnackbarLight: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
-export declare const SnackbarDark: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
+export declare const SnackbarLight: Story;
+export declare const SnackbarDark: Story;

package/src/lib/stories/Switch.stories.d.ts

@@ -1,27 +1,9 @@
-import * as React from 'react';
+import { Switch as MuiSwitch } from '@mui/material';
+import type { StoryObj } from '@storybook/react';
+type Story = StoryObj<typeof MuiSwitch>;
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const SwitchLight: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
-export declare const SwitchDark: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
+export declare const SwitchLight: Story;
+export declare const SwitchDark: Story;

package/src/lib/stories/Table.stories.d.ts

@@ -1,4 +1,6 @@
-import * as React from 'react';
+import { Table as MuiTable } from '@mui/material';
+import type { StoryObj } from '@storybook/react';
+type Story = StoryObj<typeof MuiTable>;
 declare const _default: {
     title: string;
 };
@@ -10,27 +12,5 @@ export interface ExampleRow {
     carbs: number;
     protein: number;
 }
-export declare const TableLight: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-        layout: string;
-    };
-};
-export declare const TableDark: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-        layout: string;
-    };
-};
+export declare const TableLight: Story;
+export declare const TableDark: Story;

package/src/lib/stories/Tabs.stories.d.ts

@@ -1,27 +1,9 @@
-import * as React from 'react';
+import { Tabs as MuiTabs } from '@mui/material';
+import type { StoryObj } from '@storybook/react';
+type Story = StoryObj<typeof MuiTabs>;
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const TabsLight: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
-export declare const TabsDark: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
+export declare const TabsLight: Story;
+export declare const TabsDark: Story;

package/src/lib/stories/TextField.stories.d.ts

@@ -1,27 +1,9 @@
-import * as React from 'react';
+import { TextField as MuiTextField } from '@mui/material';
+import type { StoryObj } from '@storybook/react';
+type Story = StoryObj<typeof MuiTextField>;
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const TextFieldLight: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
-export declare const TextFieldDark: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
+export declare const TextFieldLight: Story;
+export declare const TextFieldDark: Story;

package/src/lib/stories/ToggleButton.stories.d.ts

@@ -1,27 +1,9 @@
-import * as React from 'react';
+import { ToggleButton } from '@mui/material';
+import type { StoryObj } from '@storybook/react';
+type Story = StoryObj<typeof ToggleButton>;
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const ToggleButtonsLight: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
-export declare const ToggleButtonsDark: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
+export declare const ToggleButtonsLight: Story;
+export declare const ToggleButtonsDark: Story;

package/src/lib/stories/Tooltip.stories.d.ts

@@ -1,27 +1,9 @@
-import * as React from 'react';
+import { Tooltip } from '@mui/material';
+import type { StoryObj } from '@storybook/react';
+type Story = StoryObj<typeof Tooltip>;
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const TooltipLight: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
-export declare const TooltipDark: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
+export declare const TooltipLight: Story;
+export declare const TooltipDark: Story;

package/src/lib/stories/Typography.stories.d.ts

@@ -1,27 +1,9 @@
-import * as React from 'react';
+import { Typography as MuiTypography } from '@mui/material';
+import type { StoryObj } from '@storybook/react';
+type Story = StoryObj<typeof MuiTypography>;
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const TypographyLight: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
-export declare const TypographyDark: {
-    (): React.ReactElement;
-    storyName: string;
-    tags: string[];
-    parameters: {
-        zeplinLink: {
-            name: string;
-            link: string;
-        }[];
-    };
-};
+export declare const TypographyLight: Story;
+export declare const TypographyDark: Story;

package/src/lib/stories/StoryWrapper.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-interface StoryLayoutProps {
-    children: React.ReactNode;
-    isDarkTheme?: boolean;
-}
-export declare const StoryWrapper: React.FC<StoryLayoutProps>;
-export {};