refactor: refactor common components

.eslintignore

@@ -2,3 +2,4 @@ jest.config.*
 test.env.*
 playwright.config.*
 rollup.config.*
+typings.d.ts

packages/example-nextjs/global.d.ts

@@ -1 +1,13 @@
 declare module '*.html';
+
+declare module '*.scss' {
+  const content: { [className: string]: string };
+  export = content;
+}
+
+declare module '*.css' {
+  const content: { [className: string]: string };
+  export = content;
+}
+
+export type {};

packages/example-nextjs/package.json

@@ -17,14 +17,15 @@
     "next": "14.2.4",
     "react": "^18",
     "react-dom": "^18",
-    "shiki": "^1.12.1",
-    "tailwind-merge": "^2.5.2"
+    "shiki": "^1.12.1"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.9",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/react-syntax-highlighter": "^15.5.13",
+    "clsx": "^2.1.1",
     "css-loader": "^7.1.2",
     "eslint": "^8",
     "eslint-config-next": "14.2.4",
@@ -35,6 +36,7 @@
     "prettier": "^3.3.2",
     "sharp": "^0.33.5",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5"
+    "typescript": "^5",
+    "typescript-plugin-css-modules": "^5.1.0"
   }
 }

packages/example-nextjs/src/app/Form-for-test.tsx

@@ -1,12 +1,10 @@
 'use client';
 import { useSearchParams } from 'next/navigation';
 import React from 'react';
-import { Field, Input, Tag } from 'shared/components';
+import { Field, Input, RefreshButton, Tag } from 'shared/components';
 import { form } from 'shared/form';
 import { useUrlState } from 'state-in-url/next';
 
-import { RefreshButton } from './components/Refresh';
-
 export const Form = ({
   className,
   searchParams,

packages/example-nextjs/src/app/Form.tsx

@@ -1,12 +1,10 @@
 'use client';
 import React from 'react';
-import { Field, Input } from 'shared/components';
+import { Field, Input, RefreshButton, Tag } from 'shared/components';
 import { form } from 'shared/form';
 import { useUrlState } from 'state-in-url/next';
 
-import { RefreshButton } from './components/Refresh';
 import { SourceCodeBtn } from './components/SourceCodeBtn';
-import { Tag } from './components/Tag';
 
 export const Form = ({
   className,

packages/example-nextjs/tailwind.config.ts

@@ -1,3 +1,4 @@
+import TailwindForm from '@tailwindcss/forms';
 import type { Config } from 'tailwindcss';
 
 import { sharedConfig } from '../shared/tailwind';
@@ -9,5 +10,6 @@ const config: Config = {
     './src/components/**/*.{js,ts,jsx,tsx,mdx}',
     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
+  plugins: [TailwindForm],
 };
 export default config;

packages/example-nextjs/tsconfig.json

@@ -5,15 +5,17 @@
     "plugins": [
       {
         "name": "next"
-      }
+      },
+      { "name": "typescript-plugin-css-modules" }
     ]
   },
   "include": [
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    "../shared/form.ts"
+    "../shared/form.ts",
+    "./global.d.ts"
   ],
   "exclude": ["node_modules"]
 }

packages/shared/components/Button.module.css

@@ -0,0 +1,3 @@
+.button {
+  @apply w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-orange-600 hover:bg-orange-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500;
+}

packages/shared/components/Button.tsx

@@ -1,3 +1,8 @@
+import { clsx } from 'clsx';
+
+// @ts-expect-error ccs module
+import styles from './Button.module.css';
+
 export const Button = ({
   className,
   children,
@@ -8,10 +13,7 @@ export const Button = ({
   return (
     <button
       disabled={disabled}
-      className={`w-full flex justify-center py-2 px-4 border border-transparent
-         rounded-md shadow-sm text-sm font-medium text-white bg-orange-600
-          hover:bg-orange-800 focus:outline-none focus:ring-2
-           focus:ring-offset-2 focus:ring-orange-500 ${className}`}
+      className={clsx(styles.button, className)}
       name={name}
       {...props}
     >

packages/shared/components/Refresh.tsx

@@ -1,12 +1,13 @@
-import { Button } from './Button';
+import { clsx } from 'clsx';
 
+import { Button } from './Button';
 export const RefreshButton = ({ className }: { className?: string }) => {
   return (
     <Button
       onClick={() => {
         window.location.reload();
       }}
-      className={`font-extrabold bg-orange-700 text-lg ${className}`}
+      className={clsx(`font-extrabold bg-orange-700 text-lg`, className)}
       name="Reload page"
     >
       Reload page

packages/shared/components/Tag.module.css

@@ -0,0 +1,10 @@
+.tag {
+  @apply px-3 py-1 text-gray-600 rounded-full
+        text-sm font-medium
+        focus:outline-none focus:ring-2 focus:ring-offset-2
+        focus:ring-orange-500 bg-gray-300 hover:bg-orange-200;
+
+  &.active {
+    @apply bg-orange-100 text-orange-800 hover:text-white hover:bg-[#ad6400];
+  }
+}

packages/shared/components/Tag.tsx

@@ -1,3 +1,8 @@
+import { clsx } from 'clsx';
+
+// @ts-expect-error ccs module
+import styles from './Tag.module.css';
+
 export const Tag = ({
   text,
   onClick,
@@ -10,15 +15,7 @@ export const Tag = ({
   return (
     <button
       onClick={onClick}
-      className={`px-3 py-1 text-grey-600 rounded-full
-        text-sm font-medium
-        focus:outline-none focus:ring-2 focus:ring-offset-2
-        focus:ring-orange-500
-        ${
-          active
-            ? `bg-orange-100 text-orange-800 hover:text-white hover:bg-[#ad6400] `
-            : `bg-gray-300 hover:bg-orange-100`
-        }`}
+      className={clsx(styles.tag, active && styles.active)}
     >
       {text}
     </button>

packages/shared/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "plugins": [{ "name": "typescript-plugin-css-modules" }]
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "../shared/form.ts",
+    "./typings.d.ts"
+  ],
+  "exclude": ["node_modules"]
+}

packages/shared/typings.d.ts

@@ -0,0 +1,13 @@
+declare module '*.html';
+
+declare module "*.scss" {
+  const content: { [className: string]: string };
+  export = content;
+}
+
+declare module "*.css" {
+  const content: { [className: string]: string };
+  export = content;
+}
+
+export type { };

rollup.config.js

@@ -4,6 +4,7 @@ import sourcemaps from 'rollup-plugin-sourcemaps';
 import typescript from '@rollup/plugin-typescript';
 import filesize from 'rollup-plugin-filesize';
 import { glob } from 'glob'
+import config from './tsconfig.json'
 
 const isProduction = !process.env.IS_DEVELOPMENT;
 const sourcemap = !isProduction;
@@ -19,7 +20,7 @@ const plugins = [
   }),
   typescript({
     tsconfig: './tsconfig.json',
-    compilerOptions: { sourceMap: sourcemap, declarationMap: sourcemap },
+    compilerOptions: { ...config.compilerOptions, sourceMap: sourcemap, declarationMap: sourcemap },
   }),
 
   !isProduction && sourcemaps(),

tsconfig.base.json

@@ -39,6 +39,10 @@
       "shared/*": ["packages/shared/*"]
     }
   },
-  "include": ["packages/example-react/vite.config.ts"],
+  "include": [
+    "packages/example-react/vite.config.ts",
+    "typings.d.ts",
+    "packages/shared"
+  ],
   "exclude": ["node_modules", "tests/**/*", ".next/**/*"]
 }

tsconfig.json

@@ -1,5 +1,5 @@
 {
   "extends": "./tsconfig.base.json",
-  "include": ["packages/urlstate/index.ts", "packages/shared"],
+  "include": ["packages/urlstate/index.ts", "packages/shared", "typings.d.ts"],
   "exclude": ["node_modules", "tests/**/*"]
 }

typings.d.ts

@@ -0,0 +1,13 @@
+declare module '*.html';
+
+declare module "*.scss" {
+  const content: { [className: string]: string };
+  export = content;
+}
+
+declare module "*.css" {
+  const content: { [className: string]: string };
+  export = content;
+}
+
+export type { };