feat: add app and config

packages/components/src/index.tsx

@@ -1 +1,6 @@
-export * from './theme';
+export * from './theme';
+
+/**
+ * 输入组件, 使用theme的defaultProps
+ */
+export * from './input/TextField';

packages/components/src/input/TextField.tsx

@@ -0,0 +1,23 @@
+import { TextField as MuiTextField, TextFieldProps, Tooltip } from '@mui/material';
+import { useTheme } from '../theme';
+import { HelpCircle } from 'lucide-react';
+
+export const TextField = (props: TextFieldProps) => {
+  const theme = useTheme();
+  const defaultProps = theme.components?.MuiTextField?.defaultProps;
+  return <MuiTextField {...defaultProps} {...props} />;
+};
+
+export const TextFieldLabel = ({ children, tips, label }: { children?: React.ReactNode; tips?: string; label?: any }) => {
+  return (
+    <div className='flex items-center gap-1'>
+      {label}
+      {children}
+      {tips && (
+        <Tooltip title={tips}>
+          <HelpCircle size={16} />
+        </Tooltip>
+      )}
+    </div>
+  );
+};

packages/components/src/select/TagsInput.tsx

@@ -6,9 +6,10 @@ type TagsInputProps = {
   value: string[];
   onChange: (value: string[]) => void;
   placeholder?: string;
-  label?: string;
+  label?: any;
+  showLabel?: boolean;
 };
-export const TagsInput = ({ value, onChange, placeholder = 'Add a tag', label = 'Tags' }: TagsInputProps) => {
+export const TagsInput = ({ value, onChange, placeholder = '', label = '', showLabel = false }: TagsInputProps) => {
   const [tags, setTags] = useState<string[]>(value);
   useEffect(() => {
     setTags(value);
@@ -26,6 +27,9 @@ export const TagsInput = ({ value, onChange, placeholder = 'Add a tag', label =
         // setTags(newValue as string[]);
         onChange(newValue as string[]);
       }}
+      sx={{
+        width: '100%',
+      }}
       renderTags={(value: string[], getTagProps) => {
         const id = randomid();
         const com = value.map((option: string, index: number) => (
@@ -33,6 +37,13 @@ export const TagsInput = ({ value, onChange, placeholder = 'Add a tag', label =
             variant='outlined'
             sx={{
               borderColor: 'primary.main',
+              borderRadius: '4px',
+              '&:hover': {
+                borderColor: 'primary.main',
+              },
+              '& .MuiChip-deleteIcon': {
+                color: 'secondary.main',
+              },
             }}
             label={option}
             {...getTagProps({ index })}
@@ -41,7 +52,7 @@ export const TagsInput = ({ value, onChange, placeholder = 'Add a tag', label =
         ));
         return <Fragment key={id}>{com}</Fragment>;
       }}
-      renderInput={(params) => <TextField {...params} variant='outlined' label={label} placeholder={placeholder} />}
+      renderInput={(params) => <TextField {...params} label={showLabel ? label : ''} placeholder={placeholder} />}
     />
   );
 };

packages/components/src/theme/index.tsx

@@ -35,19 +35,21 @@ const generateShadows = (color: string): Shadows => {
     `0px 13px 17px -8px ${color}`,
   ];
 };
+const primaryMain = amber[300]; // #ffc107
+const secondaryMain = amber[500]; // #ffa000
 export const themeOptions: ThemeOptions = {
   // @ts-ignore
   // cssVariables: true,
   palette: {
     primary: {
-      main: '#ffc107', // amber[300]
+      main: primaryMain, // amber[300]
     },
     secondary: {
-      main: '#ffa000', // amber[500]
+      main: secondaryMain, // amber[500]
     },
     divider: amber[200],
     common: {
-      white: '#ffa000',
+      white: secondaryMain,
     },
     text: {
       primary: amber[600],
@@ -78,7 +80,7 @@ export const themeOptions: ThemeOptions = {
           '&.MuiButton-contained': {
             color: '#ffffff',
             ':hover': {
-              color: amber[500],
+              color: secondaryMain,
             },
           },
         },
@@ -96,6 +98,7 @@ export const themeOptions: ThemeOptions = {
     MuiTextField: {
       defaultProps: {
         fullWidth: true,
+        size: 'small',
         slotProps: {
           inputLabel: {
             shrink: true,
@@ -121,6 +124,11 @@ export const themeOptions: ThemeOptions = {
         },
       },
     },
+    MuiAutocomplete: {
+      defaultProps: {
+        size: 'small',
+      },
+    },
     MuiSelect: {
       styleOverrides: {
         root: {
@@ -156,7 +164,10 @@ export const themeOptions: ThemeOptions = {
     MuiFormControlLabel: {
       defaultProps: {
         labelPlacement: 'top',
-        sx: {
+      },
+      styleOverrides: {
+        root: {
+          color: amber[600],
           alignItems: 'flex-start',
           '& .MuiFormControlLabel-label': {
             textAlign: 'left',
@@ -170,9 +181,18 @@ export const themeOptions: ThemeOptions = {
           },
         },
       },
+    },
+    MuiMenuItem: {
       styleOverrides: {
         root: {
-          color: amber[600],
+          '&.Mui-selected': {
+            backgroundColor: amber[500],
+            color: '#ffffff',
+            '&:hover': {
+              backgroundColor: amber[600],
+              color: '#ffffff',
+            },
+          },
         },
       },
     },
@@ -201,3 +221,6 @@ export const CustomThemeProvider = ({ children, themeOptions: customThemeOptions
   const theme = createTheme(customThemeOptions || themeOptions);
   return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
 };
+
+// TODO: think
+export const getComponentProps = () => {};