feat(configColor): added dark color

opensrc0 · Jan 17, 2024 · 5f2515b · 5f2515b
1 parent a72755e
commit 5f2515b
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 75 deletions.
diff --git a/__application/component/Button/Button.js b/__application/component/Button/Button.js
@@ -1,55 +1,55 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import cx from 'classnames';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React from "react"
+import PropTypes from "prop-types"
+import styled from "styled-components"
+import cx from "classnames"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 
 const styles = {
-  size: { s: 'xs', m: 's', l: 's' },
-  padding: { s: [1, 2], m: [1.5, 2], l: [2, 2] },
+  "size": { "s": "xs", "m": "s", "l": "s" },
+  "padding": { "s": [1, 2], "m": [1.5, 2], "l": [2, 2] },
 
   pointerEvents(props) {
     if (props.disabled) {
-      return 'none';
+      return "none"
     }
-    return '';
+    return ""
   },
   opacity(props) {
     if (props.disabled) {
-      return '0.5';
+      return "0.5"
     }
-    return '';
+    return ""
   },
-  hover: {
+  "hover": {
     color(props) {
-      if (props.kind === 'filled') {
-        return props.theme.color.white;
+      if (props.kind === "filled") {
+        return props.theme.color.white
       }
-      if (props.kind === 'outlined') {
-        return props.theme.color.white;
+      if (props.kind === "outlined") {
+        return props.theme.color.white
       }
-      return '';
+      return ""
     },
     backgroundColor(props) {
-      if (props.kind === 'filled') {
-        return props.theme.color[`${props.color}Dark`];
+      if (props.kind === "filled") {
+        return props.theme.color[`${props.color}Dark`]
       }
-      if (props.kind === 'outlined') {
-        return props.theme.color[props.color];
+      if (props.kind === "outlined") {
+        return props.theme.color[props.color]
       }
-      return '';
+      return ""
     },
     borderColor(props) {
-      if (props.kind === 'filled') {
-        return props.theme.color[`${props.color}Dark`];
+      if (props.kind === "filled") {
+        return props.theme.color[`${props.color}Dark`]
       }
-      if (props.kind === 'outlined') {
-        return props.theme.color[props.color];
+      if (props.kind === "outlined") {
+        return props.theme.color[props.color]
       }
-      return '';
-    },
-  },
-};
+      return ""
+    }
+  }
+}
 
 const StyledButton = styled(
   ({
@@ -60,7 +60,7 @@ const StyledButton = styled(
     fluid,
     isLoading,
     ...props
-  }) => <button {...props} />,
+  }) => <button {...props} />
 )`
   display: inline-flex;
   align-items: center;
@@ -71,7 +71,7 @@ const StyledButton = styled(
   background-color: ${(props) => props.theme.Universal.Color[props.variant]};
   font-size: ${(props) => props.theme.Universal.FontSize[styles.size[props.size]]};
   padding: ${(props) => props.theme.Universal.PXL(styles.padding[props.size])};
-  width: ${(props) => props.fluid ? '100%' : ''};
+  width: ${(props) => props.fluid ? "100%" : ""};
   border-width: 1px;
   border-style: solid;
   border-color: ${(props) => props.theme.Button[props.variant].borderColor};
@@ -84,7 +84,7 @@ const StyledButton = styled(
     background-color: ${styles.hover.backgroundColor};
     border-color: ${styles.hover.borderColor};
   }
-`;
+`
 
 function Button({ label, disabled, className, onClick, spin, ...props }) {
   return (
@@ -108,31 +108,31 @@ function Button({ label, disabled, className, onClick, spin, ...props }) {
       }
       {label}
     </StyledButton>
-  );
+  )
 }
 
 Button.propTypes = {
-  label: PropTypes.string,
-  onClick: PropTypes.func,
-  fluid: PropTypes.bool,
-  disabled: PropTypes.bool,
-  spin: PropTypes.bool,
-  className: PropTypes.string,
-  type: PropTypes.oneOf(['submit', 'button']),
-  variant: PropTypes.string,
-  size: PropTypes.oneOf(['s', 'm', 'l']),
-};
+  "label": PropTypes.string,
+  "onClick": PropTypes.func,
+  "fluid": PropTypes.bool,
+  "disabled": PropTypes.bool,
+  "spin": PropTypes.bool,
+  "className": PropTypes.string,
+  "type": PropTypes.oneOf(["submit", "button"]),
+  "variant": PropTypes.string,
+  "size": PropTypes.oneOf(["s", "m", "l"])
+}
 
 Button.defaultProps = {
-  label: 'Button',
-  onClick: () => {},
-  fluid: false,
-  disabled: false,
-  spin: false,
-  className: '',
-  type: 'submit',
-  variant: 'secondary',
-  size: 'm',
-};
+  "label": "Button",
+  "onClick": () => {},
+  "fluid": false,
+  "disabled": false,
+  "spin": false,
+  "className": "",
+  "type": "submit",
+  "variant": "secondary",
+  "size": "m"
+}
 
-export default Button;
+export default Button
diff --git a/__appset/configColor.js b/__appset/configColor.js
@@ -1,15 +1,20 @@
-const color = {
-  "primary": "#00364e",
-  "secondary": "#03567b",
-
-  "white": "#ffffff",
-  "black": "#000000",
-
-  "info": "#1976d2",
-  "success": "#43a047",
-  "warning": "#ffa000",
-  "danger": "#d32f2f",
-  "orange": "#fc6027"
+const Color = {
+  "default": {
+    "bgColor": "#ffffff",
+    "primary": "#00364e",
+    "secondary": "#03567b"
+  },
+  "dark": {
+    "bgColor": "#0a0a0a",
+    "primary": "#0a0a0a",
+    "secondary": "#1f1f1f"
+  }
 }
 
-export default color
+export default window && Color[localStorage.getItem("themeType")] ? Color[localStorage.getItem("themeType")] : Color.default
+
+// "info": "#1976d2",
+// "success": "#43a047",
+// "warning": "#ffa000",
+// "danger": "#d32f2f",
+// "orange": "#fc6027"
diff --git a/__appset/themePrepare.js b/__appset/themePrepare.js
@@ -48,16 +48,19 @@ mkdirp(createDir).then(() => {
     let appDir
     let defaultDirData
     let componentFile
+    let exportSplit
     const replaceComponentName = component.replace("config", "").replace(".js", "")
 
     if (process.env.ENVI === "local") {
       defaultDir = path.resolve(`${__dirname}`)
-      defaultDirData = fs.readFileSync(`${defaultDir}/${component}`).toString().split("export")[0].split(/=(.*)/s)[1]
+      exportSplit = fs.readFileSync(`${defaultDir}/${component}`).toString().split("export")
+      defaultDirData = exportSplit[0].split(/=(.*)/s)[1]
       appDir = `${process.env.CURRENT_APP_DIR}/${process.env.COMPONENT_CONFIG_PATH}/fe-theme`
       componentFile = `${appDir}/${component}`
     } else {
       defaultDir = path.resolve(`${__dirname}`, "../../../node_modules/fe-theme/__appset")
-      defaultDirData = fs.readFileSync(`${defaultDir}/${component}`).toString().split("export")[0].split(/=(.*)/s)[1]
+      exportSplit = fs.readFileSync(`${defaultDir}/${component}`).toString().split("export")
+      defaultDirData = exportSplit[0].split(/=(.*)/s)[1]
       appDir = path.resolve(`${__dirname}`, `../../../${process.env.COMPONENT_CONFIG_PATH}/fe-theme`)
       componentFile = path.resolve(createDir, component)
     }
@@ -102,10 +105,10 @@ export default theme;\n`
           const userAppConfig = data.split("export")[0].split(/=(.*)/s)[1]
           componentContent = `/* eslint-disable */
 const ${replaceComponentName} = ${JSON.stringify(mergeObj(JSON.parse(defaultDirData), JSON.parse(userAppConfig)), null, "\t")}
-\nexport default ${replaceComponentName};\n`
+\nexport${exportSplit[1]}\n`
         } else {
           componentContent = `/* eslint-disable */
-const ${replaceComponentName} =${defaultDirData}export default ${replaceComponentName};\n`
+const ${replaceComponentName} =${defaultDirData}export${exportSplit[1]}\n`
         }
 
         fs.writeFile(componentFile, componentContent, (writeFileErr) => {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -113,8 +113,7 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "styled-components": "^6.1.6",
-    "scheduler": "^0.23.0"
+    "styled-components": "^6.1.6"
   },
   "files": [
     "__build-es/**",