more shadcn, tailwind, and storybook impl

.eslintrc.cjs

@@ -4,6 +4,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
+    'plugin:storybook/recommended',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {

.prettierrc.cjs

@@ -1,9 +1,8 @@
 module.exports = {
-    ...require('eslint-config-mantine/.prettierrc.js'),
-    printWidth: 100,
-    singleQuote: true,
-    trailingComma: 'all',
-    jsxSingleQuote: true,
-    tabWidth: 2,
-    plugins: ['prettier-plugin-organize-imports'],
-}
+  printWidth: 100,
+  singleQuote: true,
+  trailingComma: 'all',
+  jsxSingleQuote: true,
+  tabWidth: 2,
+  plugins: ['prettier-plugin-organize-imports'],
+};

.storybook/main.ts

@@ -2,11 +2,17 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.story.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-essentials', 'storybook-dark-mode'],
+  addons: ['@storybook/addon-essentials', 'storybook-dark-mode', 'storybook-css-modules-preset'],
   framework: {
     name: '@storybook/react-vite',
     options: {},
   },
+  typescript: {
+    reactDocgen: 'react-docgen',
+  },
+  docs: {
+    autodocs: true,
+  },
 };
 
 export default config;

.storybook/preview.tsx

@@ -1,15 +1,14 @@
-import { MantineProvider, useMantineColorScheme } from '@mantine/core';
-import '@mantine/core/styles.css';
+import '@/globals.css';
 import { addons } from '@storybook/preview-api';
 import React, { useEffect } from 'react';
 import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
-import { theme } from '../src/theme';
+import { ThemeProvider, useTheme } from '../src/components/theme-provider';
 
 const channel = addons.getChannel();
 
-function ColorSchemeWrapper({ children }: { children: React.ReactNode }) {
-  const { setColorScheme } = useMantineColorScheme();
-  const handleColorScheme = (value: boolean) => setColorScheme(value ? 'dark' : 'light');
+function Wrapper({ children }: { children: React.ReactNode }) {
+  const { setTheme } = useTheme();
+  const handleColorScheme = (value: boolean) => setTheme(value ? 'dark' : 'light');
 
   useEffect(() => {
     channel.on(DARK_MODE_EVENT_NAME, handleColorScheme);
@@ -20,6 +19,10 @@ function ColorSchemeWrapper({ children }: { children: React.ReactNode }) {
 }
 
 export const decorators = [
-  (renderStory: any) => <ColorSchemeWrapper>{renderStory()}</ColorSchemeWrapper>,
-  (renderStory: any) => <MantineProvider theme={theme}>{renderStory()}</MantineProvider>,
+  (renderStory: any) => (
+    <ThemeProvider defaultTheme='dark' storageKey='vite-ui-theme'>
+      <Wrapper>{renderStory()}</Wrapper>
+    </ThemeProvider>
+  ),
+  // (renderStory: any) => <MantineProvider theme={theme}>{renderStory()}</MantineProvider>,
 ];

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
-  "cSpell.words": ["fastify", "mantine", "stylelint", "typecheck"],
+  "cSpell.words": ["fastify", "mantine", "protoc", "stylelint", "typecheck"],
   "prettier.prettierPath": "./node_modules/prettier/index.cjs",
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "editor.tabSize": 2
 }

README.md

@@ -1,14 +1,11 @@
-# Mantine Vite template
+# grpc-forms
 
 ## Features
 
-This template comes with the following features:
-
 - [PostCSS](https://postcss.org/) with [mantine-postcss-preset](https://mantine.dev/styles/postcss-preset)
 - [TypeScript](https://www.typescriptlang.org/)
 - [Storybook](https://storybook.js.org/)
 - [Vitest](https://vitest.dev/) setup with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)
-- ESLint setup with [eslint-config-mantine](https://github.com/mantinedev/eslint-config-mantine)
 
 ## npm scripts