3 Commits

7 changed files with 2042 additions and 2494 deletions

View File

@ -7,7 +7,7 @@ const config: StorybookConfig = {
enableCrashReports: false, enableCrashReports: false,
}, },
stories: ['../components/**/*.(stories|story).@(js|jsx|ts|tsx)'], stories: ['../components/**/*.(stories|story).@(js|jsx|ts|tsx)'],
addons: ['storybook-dark-mode'], addons: ['@storybook/addon-themes'],
framework: { framework: {
name: '@storybook/nextjs', name: '@storybook/nextjs',
options: {}, options: {},

View File

@ -1,36 +1,40 @@
import '@mantine/core/styles.css'; import '@mantine/core/styles.css';
import React, { useEffect } from 'react'; import { ColorSchemeScript, MantineProvider } from '@mantine/core';
import { addons } from '@storybook/preview-api';
import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
import { MantineProvider, useMantineColorScheme } from '@mantine/core';
import { theme } from '../theme'; import { theme } from '../theme';
export const parameters = { export const parameters = {
layout: 'fullscreen', layout: 'fullscreen',
options: { options: {
showPanel: false, showPanel: false,
storySort: (a, b) => { storySort: (a: any, b: any) => a.title.localeCompare(b.title, undefined, { numeric: true }),
return a.title.localeCompare(b.title, undefined, { numeric: true }); },
backgrounds: { disable: true },
};
export const globalTypes = {
theme: {
name: 'Theme',
description: 'Mantine color scheme',
defaultValue: 'light',
toolbar: {
icon: 'mirror',
items: [
{ value: 'light', title: 'Light' },
{ value: 'dark', title: 'Dark' },
],
}, },
}, },
}; };
const channel = addons.getChannel();
function ColorSchemeWrapper({ children }: { children: React.ReactNode }) {
const { setColorScheme } = useMantineColorScheme();
const handleColorScheme = (value: boolean) => setColorScheme(value ? 'dark' : 'light');
useEffect(() => {
channel.on(DARK_MODE_EVENT_NAME, handleColorScheme);
return () => channel.off(DARK_MODE_EVENT_NAME, handleColorScheme);
}, [channel]);
return <>{children}</>;
}
export const decorators = [ export const decorators = [
(renderStory: any) => <ColorSchemeWrapper>{renderStory()}</ColorSchemeWrapper>, (renderStory: any, context: any) => {
(renderStory: any) => <MantineProvider theme={theme}>{renderStory()}</MantineProvider>, const scheme = (context.globals.theme || 'light') as 'light' | 'dark';
return (
<MantineProvider theme={theme} forceColorScheme={scheme}>
<ColorSchemeScript />
{renderStory()}
</MantineProvider>
);
},
]; ];

View File

@ -1,11 +1,22 @@
import mantine from 'eslint-config-mantine'; import mantine from 'eslint-config-mantine';
import { defineConfig } from 'eslint/config';
import tseslint from 'typescript-eslint'; import tseslint from 'typescript-eslint';
export default tseslint.config( // @ts-check
export default defineConfig(
tseslint.configs.recommended,
...mantine, ...mantine,
{ ignores: ['**/*.{mjs,cjs,js,d.ts,d.mts}'] }, { ignores: ['**/*.{mjs,cjs,js,d.ts,d.mts}', '.next'] },
{ {
files: ['**/*.story.tsx'], files: ['**/*.story.tsx'],
rules: { 'no-console': 'off' }, rules: { 'no-console': 'off' },
},
{
languageOptions: {
parserOptions: {
tsconfigRootDir: process.cwd(),
project: ['./tsconfig.json'],
},
},
} }
); );

1
next-env.d.ts vendored
View File

@ -1,5 +1,6 @@
/// <reference types="next" /> /// <reference types="next" />
/// <reference types="next/image-types/global" /> /// <reference types="next/image-types/global" />
/// <reference path="./.next/types/routes.d.ts" />
// NOTE: This file should not be edited // NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

View File

@ -9,7 +9,7 @@
"start": "next start", "start": "next start",
"typecheck": "tsc --noEmit", "typecheck": "tsc --noEmit",
"lint": "npm run eslint && npm run stylelint", "lint": "npm run eslint && npm run stylelint",
"eslint": "next lint", "eslint": "eslint .",
"stylelint": "stylelint '**/*.css' --cache", "stylelint": "stylelint '**/*.css' --cache",
"jest": "jest", "jest": "jest",
"jest:watch": "jest --watch", "jest:watch": "jest --watch",
@ -20,46 +20,48 @@
"storybook:build": "storybook build" "storybook:build": "storybook build"
}, },
"dependencies": { "dependencies": {
"@mantine/core": "8.3.0", "@mantine/core": "8.3.1",
"@mantine/hooks": "8.3.0", "@mantine/hooks": "8.3.1",
"@next/bundle-analyzer": "^15.3.3", "@next/bundle-analyzer": "^15.5.3",
"@tabler/icons-react": "^3.34.0", "@tabler/icons-react": "^3.34.1",
"next": "15.3.3", "next": "15.5.3",
"react": "19.1.0", "react": "19.1.1",
"react-dom": "19.1.0" "react-dom": "19.1.1"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.27.4", "@babel/core": "^7.28.4",
"@eslint/js": "^9.29.0", "@eslint/eslintrc": "^3",
"@ianvs/prettier-plugin-sort-imports": "^4.4.2", "@eslint/js": "^9.35.0",
"@storybook/nextjs": "^8.6.8", "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
"@storybook/react": "^8.6.8", "@storybook/addon-themes": "^9.1.5",
"@testing-library/dom": "^10.4.0", "@storybook/nextjs": "^9.1.5",
"@testing-library/jest-dom": "^6.6.3", "@storybook/react": "^9.1.5",
"@testing-library/dom": "^10.4.1",
"@testing-library/jest-dom": "^6.8.0",
"@testing-library/react": "^16.3.0", "@testing-library/react": "^16.3.0",
"@testing-library/user-event": "^14.6.1", "@testing-library/user-event": "^14.6.1",
"@types/eslint-plugin-jsx-a11y": "^6", "@types/eslint-plugin-jsx-a11y": "^6",
"@types/jest": "^29.5.14", "@types/jest": "^30.0.0",
"@types/node": "^22.13.11", "@types/node": "^24.3.1",
"@types/react": "19.1.8", "@types/react": "19.1.12",
"babel-loader": "^10.0.0", "babel-loader": "^10.0.0",
"eslint": "^9.29.0", "eslint": "^9.35.0",
"eslint-config-mantine": "^4.0.3", "eslint-config-mantine": "^4.0.3",
"eslint-config-next": "15.5.3",
"eslint-plugin-jsx-a11y": "^6.10.2", "eslint-plugin-jsx-a11y": "^6.10.2",
"eslint-plugin-react": "^7.37.5", "eslint-plugin-react": "^7.37.5",
"jest": "^30.0.0", "jest": "^30.1.3",
"jest-environment-jsdom": "^30.0.0", "jest-environment-jsdom": "^30.1.2",
"postcss": "^8.5.5", "postcss": "^8.5.6",
"postcss-preset-mantine": "1.17.0", "postcss-preset-mantine": "1.18.0",
"postcss-simple-vars": "^7.0.1", "postcss-simple-vars": "^7.0.1",
"prettier": "^3.5.3", "prettier": "^3.6.2",
"storybook": "^8.6.8", "storybook": "^9.1.5",
"storybook-dark-mode": "^4.0.2", "stylelint": "^16.24.0",
"stylelint": "^16.20.0", "stylelint-config-standard-scss": "^16.0.0",
"stylelint-config-standard-scss": "^15.0.1", "ts-jest": "^29.4.1",
"ts-jest": "^29.4.0", "typescript": "5.9.2",
"typescript": "5.8.3", "typescript-eslint": "^8.43.0"
"typescript-eslint": "^8.34.0"
}, },
"packageManager": "yarn@4.9.4" "packageManager": "yarn@4.9.4"
} }

View File

@ -17,9 +17,14 @@
"incremental": true, "incremental": true,
"paths": { "paths": {
"@/*": ["./*"] "@/*": ["./*"]
}
}, },
"plugins": [{ "name": "next" }] "include": [
}, "next-env.d.ts",
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "**/*.ts",
"**/*.tsx",
".storybook/main.ts",
".storybook/preview.tsx"
],
"exclude": ["node_modules"] "exclude": ["node_modules"]
} }

4395
yarn.lock

File diff suppressed because it is too large Load Diff