feat: add primary color global config

makefragment · Jul 22, 2024 · dbf7b8d · dbf7b8d
1 parent 845bd3e
commit dbf7b8d
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 44 deletions.
diff --git a/src/fragment/components/time-picker.tsx b/src/fragment/components/time-picker.tsx
@@ -1,14 +1,34 @@
-import { CodeComponentMeta } from "@plasmicapp/host";
+import { CodeComponentMeta, useSelector } from "@plasmicapp/host";
+import { useEffect } from "react";
 
 import { Timeit } from "react-timeit";
 
-export const TimePicker = ({ onChange, value = "00:00" }: any) => {
+export const TimePicker = ({
+  onChange,
+  value = "00:00",
+  hourExclude,
+  minuteExclude,
+  notShowExclude,
+}: any) => {
+  const fragmentConfig = useSelector("Fragment");
+
+  useEffect(() => {
+    changeTheme(fragmentConfig?.primaryColor);
+  }, [fragmentConfig?.primaryColor]);
+
+  const changeTheme = (color: string) => {
+    document.documentElement.style.setProperty("--timeit-primary-color", color);
+  };
+
   return (
     <Timeit
       onChange={(time) => {
         if (value !== time) onChange(time);
       }}
       defualtValue={value}
+      hourExclude={hourExclude}
+      minuteExclude={minuteExclude}
+      notShowExclude={notShowExclude}
     />
   );
 };
@@ -19,6 +39,17 @@ export const timePickerMeta: CodeComponentMeta<any> = {
   importPath: "@/fragment/components/time-picker",
   props: {
     value: { type: "string", defaultValue: "00:00" },
+    hourExclude: {
+      type: "array",
+      helpText: "[18, 20, 22]",
+    },
+    minuteExclude: {
+      type: "array",
+      helpText: "[15, 30, 25]",
+    },
+    notShowExclude: {
+      type: "boolean",
+    },
     onChange: {
       type: "eventHandler",
       argTypes: [

diff --git a/src/fragment/fragment.tsx b/src/fragment/fragment.tsx
@@ -12,14 +12,24 @@ type FragmentProps = React.PropsWithChildren<{
   previewApiConfig: Record<string, any>;
   apiConfig: Record<string, any>;
   rtl: boolean;
+  primaryColor: string;
 }>;
 
 export const Fragment = ({
   children,
   previewApiConfig,
   apiConfig,
   rtl,
+  primaryColor,
 }: FragmentProps) => {
+  useEffect(() => {
+    changeTheme(primaryColor);
+  }, [primaryColor]);
+
+  const changeTheme = (color: string) => {
+    document.documentElement.style.setProperty("--primary", color);
+  };
+
   const actions = useMemo(
     () => ({
       showToast: (
@@ -79,6 +89,7 @@ export const Fragment = ({
           apiConfig: apiConfig ?? {},
           previewApiConfig: previewApiConfig ?? {},
           rtl,
+          primaryColor,
         }}
         hidden
       >
@@ -114,6 +125,12 @@ export const fragmentMeta: GlobalContextMeta<FragmentProps> = {
       type: "boolean",
       description: `Direction`,
     },
+    primaryColor: {
+      displayName: "Primary Color",
+      type: "color",
+      defaultValue: "#000000",
+      defaultValueHint: "#000000",
+    },
   },
   providesData: true,
   globalActions: {

diff --git a/src/styles/date-picker.css b/src/styles/date-picker.css
@@ -26,7 +26,7 @@
 }
 
 .fragment-day-active-cell {
-  @apply !bg-teal-500 select-none !shadow-none flex justify-center items-center p-3;
+  @apply !bg-primary select-none !shadow-none flex justify-center items-center p-3;
 }
 
 /* --------------- */
@@ -40,5 +40,15 @@
 }
 
 .fragment .rmdp-ym .rmdp-day.rmdp-selected span {
-  @apply !bg-teal-500 !text-white select-none after:!hidden !shadow-none flex justify-center items-center;
+  @apply !bg-primary !text-white select-none after:!hidden !shadow-none flex justify-center items-center;
+}
+
+.fragment .rmdp-arrow {
+  @apply border-primary m-0;
+}
+.fragment .rmdp-arrow-container {
+  @apply flex justify-center items-center;
+}
+.fragment .rmdp-arrow-container:hover {
+  @apply bg-primary;
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -13,7 +13,7 @@
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
 
-    --primary: 222.2 47.4% 11.2%;
+    --primary: hsl(222.2 47.4% 11.2%);
     --primary-foreground: 210 40% 98%;
 
     --secondary: 210 40% 96.1%;
@@ -34,36 +34,6 @@
 
     --radius: 0.5rem;
   }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-  }
 }
 
 @layer base {

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,13 +1,13 @@
-import type { Config } from "tailwindcss"
+import type { Config } from "tailwindcss";
 
 const config = {
   darkMode: ["class"],
   content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
-	],
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+  ],
   prefix: "",
   theme: {
     container: {
@@ -25,7 +25,7 @@ const config = {
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
         primary: {
-          DEFAULT: "hsl(var(--primary))",
+          DEFAULT: "var(--primary)",
           foreground: "hsl(var(--primary-foreground))",
         },
         secondary: {
@@ -75,6 +75,6 @@ const config = {
     },
   },
   plugins: [require("tailwindcss-animate")],
-} satisfies Config
+} satisfies Config;
 
-export default config
+export default config;