0.9.x

.storybook/ColorScheme.tsx

@@ -0,0 +1,24 @@
+import type { MantineColorScheme } from '@mantine/core';
+import type { StoryContext } from '@storybook/react';
+
+import { useMantineColorScheme } from '@mantine/core';
+import { useEffect } from 'react';
+
+interface IColorSchemeProps {
+  context: StoryContext;
+}
+
+export default function ColorScheme(props: IColorSchemeProps): null {
+  const {
+    context: {
+      globals: { colorScheme },
+    },
+  } = props;
+  const { setColorScheme } = useMantineColorScheme();
+
+  useEffect(() => {
+    setColorScheme(colorScheme as MantineColorScheme);
+  }, [colorScheme, setColorScheme]);
+
+  return null;
+}

.storybook/WithProvider.tsx

@@ -0,0 +1,27 @@
+import type { StoryContext, StoryFn } from '@storybook/react';
+import type { ReactElement } from 'react';
+
+import { MantineProvider } from '@mantine/core';
+
+import { Provider, themes } from '@smile/react-front-kit-shared';
+
+import ColorScheme from './ColorScheme';
+
+export default function WithProvider(
+  Story: StoryFn,
+  context: StoryContext,
+): ReactElement {
+  const {
+    globals: { theme },
+  } = context;
+  return (
+    <Provider>
+      <MantineProvider
+        theme={themes[theme as 'main' | 'primary' | 'secondary'].theme}
+      >
+        <ColorScheme context={context} />
+        <Story />
+      </MantineProvider>
+    </Provider>
+  );
+}

.storybook/preview-head.html

@@ -4,3 +4,7 @@
   href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap"
   rel="stylesheet"
 />
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/gh/lipis/[email protected]/css/flag-icons.min.css"
+/>

.storybook/preview.tsx

@@ -1,25 +1,18 @@
-import type { Preview, StoryContext, StoryFn } from '@storybook/react';
-import type { ReactElement } from 'react';
+/* eslint-disable import/order */
 
-import { MantineProvider } from '@mantine/core';
+import type { Preview } from '@storybook/react';
 
-import { Provider, themes } from '@smile/react-front-kit-shared';
+import '@mantine/core/styles.css';
+import '@mantine/dates/styles.css';
+import '@mantine/dropzone/styles.css';
+import '@mantine/carousel/styles.css';
+import { themes } from '@smile/react-front-kit-shared';
+import '@smile/react-front-kit-shared/style.css';
+import '@smile/react-front-kit/style.css';
+import '@smile/react-front-kit-dropzone/style.css';
+import '@smile/react-front-kit-table/style.css';
 
-function withProvider(Story: StoryFn, context: StoryContext): ReactElement {
-  return (
-    <Provider>
-      <MantineProvider
-        theme={{
-          ...themes[context.globals.theme as 'main' | 'primary' | 'secondary']
-            .theme,
-          colorScheme: context.globals.colorScheme as 'dark' | 'light',
-        }}
-      >
-        <Story />
-      </MantineProvider>
-    </Provider>
-  );
-}
+import WithProvider from './WithProvider';
 
 const style = {
   border: '1px solid lightgrey',
@@ -28,7 +21,7 @@ const style = {
   width: 14,
 };
 const preview: Preview = {
-  decorators: [withProvider],
+  decorators: [WithProvider],
   globalTypes: {
     colorScheme: {
       defaultValue: 'light',

apps/next/app/layout.tsx

@@ -1,7 +1,15 @@
 import type { ReactElement, ReactNode } from 'react';
 
+import '@mantine/core/styles.css';
+import '@mantine/dates/styles.css';
+import '@mantine/dropzone/styles.css';
+import '@smile/react-front-kit/style.css';
+import '@smile/react-front-kit-dropzone/style.css';
 import { Provider } from '@smile/react-front-kit-shared';
+import '@smile/react-front-kit-shared/style.css';
+import '@smile/react-front-kit-table/style.css';
 import { Open_Sans } from 'next/font/google';
+import 'storybook-pages/style.css';
 
 const openSans = Open_Sans({
   display: 'swap',

apps/next/app/page.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement } from 'react';
 
-import { BrowsingPage } from 'storybook-pages/src';
+import { BrowsingPage } from 'storybook-pages';
 
 export default function Page(): ReactElement {
   return <BrowsingPage />;

apps/next/next.config.js

@@ -1,4 +1,3 @@
 module.exports = {
   reactStrictMode: true,
-  transpilePackages: ['@smile/react-front-kit'],
 };

apps/next/package.json

@@ -9,15 +9,18 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@mantine/core": "^6.0.20",
-    "@mantine/hooks": "^6.0.20",
-    "@mantine/styles": "^6.0.20",
+    "@mantine/core": "^7.5.1",
+    "@mantine/dates": "^7.5.1",
+    "@mantine/dropzone": "^7.5.1",
+    "@mantine/hooks": "^7.5.1",
     "@phosphor-icons/react": "^2.0.10",
+    "@smile/react-front-kit": "*",
+    "@smile/react-front-kit-dropzone": "*",
+    "@smile/react-front-kit-shared": "*",
+    "@smile/react-front-kit-table": "*",
     "next": "^13.4.19",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@smile/react-front-kit": "*",
-    "@smile/react-front-kit-shared": "*",
     "storybook-pages": "*"
   },
   "devDependencies": {

global.d.ts

@@ -7,3 +7,5 @@ declare module '*.png' {
   const value: string;
   export default value;
 }
+
+declare module '*.module.css';