temp: add resources

packages/components/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@kevisual/center-components",
+  "version": "0.0.1",
+  "description": "center components",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "files": [
+    "src"
+  ],
+  "keywords": [],
+  "author": "abearxiong <xiongxiao@xiongxiao.me>",
+  "license": "MIT",
+  "type": "module",
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^6.4.7",
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
+  },
+  "exports": {
+    ".": "./src/index.tsx",
+    "./theme": "./src/theme/index.tsx",
+    "./button": "./src/button/index.tsx"
+  },
+  "devDependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.0.2"
+  }
+}

packages/components/src/button/index.tsx

@@ -0,0 +1,5 @@
+import MuiButton, { ButtonProps } from '@mui/material/Button';
+
+export const Button = (props: ButtonProps) => {
+  return <MuiButton {...props} />;
+};

packages/components/src/clsx/index.ts

@@ -0,0 +1,7 @@
+import clsx, { ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const clsxMerge = (...args: ClassValue[]) => {
+  return twMerge(clsx(...args));
+};
+export { clsx };

packages/components/src/index.tsx

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

packages/components/src/theme/index.tsx

@@ -0,0 +1,64 @@
+import { createTheme, ThemeOptions } from '@mui/material/styles';
+import { useTheme as useMuiTheme, Theme } from '@mui/material/styles';
+import { amber } from '@mui/material/colors';
+export const themeOptions: ThemeOptions = {
+  palette: {
+    primary: {
+      main: '#ffc107', // amber[300]
+    },
+    secondary: {
+      main: '#ffa000', // amber[500]
+    },
+    divider: amber[200],
+    common: {
+      white: '#ffa000',
+    },
+    text: {
+      primary: amber[600],
+      secondary: amber[600],
+    },
+    background: {
+      default: '#ffffff', // 设置默认背景颜色
+      // paper: '#f5f5f5',   // 设置纸张背景颜色
+    },
+  },
+  typography: {
+    // fontFamily: 'Roboto, sans-serif',
+  },
+  components: {
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true,
+      },
+    },
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          '& .MuiOutlinedInput-root': {
+            '& fieldset': {
+              borderColor: amber[300],
+            },
+            '&:hover fieldset': {
+              borderColor: amber[500],
+            },
+            '& .MuiInputBase-input': {
+              color: amber[600],
+            },
+          },
+          '& .MuiInputLabel-root': {
+            color: amber[600],
+          },
+        },
+      },
+    },
+  },
+};
+
+/**
+ * https://bareynol.github.io/mui-theme-creator/
+ */
+export const theme = createTheme(themeOptions);
+
+export const useTheme = () => {
+  return useMuiTheme<Theme>();
+};

packages/components/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "baseUrl": "./",
+    "typeRoots": [
+      "node_modules/@types",
+      "node_modules/@kevisual/types",
+    ],
+    "paths": {},
+    /* Linting */
+    "strict": true,
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src",
+    "typings.d.ts",
+  ]
+}