feat: themes and refactor

package.json

@@ -21,6 +21,8 @@
     "react-color": "^2.19.3",
     "react-draggable": "^4.4.5",
     "react-modal": "^3.16.1",
+    "react-toastify": "^9.1.3",
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
     "vf-ext-framework": "github:vanflux/vf-ext-framework"
   }
 }

src/page/components/app/index.tsx

@@ -1,16 +1,22 @@
 import styles from "./styles.module.css";
 import React from "react";
-import { ThemerContextProvider } from "../../contexts/themer";
-import { ConfigsOpenContextProvider } from "../../contexts/configs-open";
-import { Windows } from "../windows";
+import { ConfigsOpenContextProvider } from "@page-contexts/configs-open";
+import { ThemerConfigContextProvider } from "@page-contexts/themer-config";
+import { Windows } from "@page-components/windows";
+import { ThemerThemesContextProvider } from "@page-contexts/themer-themes";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 export function App() {
   return (
     <div className={styles.container}>
       <ConfigsOpenContextProvider>
-        <ThemerContextProvider>
-          <Windows />
-        </ThemerContextProvider>
+        <ThemerConfigContextProvider>
+          <ThemerThemesContextProvider>
+            <ToastContainer theme="dark" newestOnTop autoClose={2000} toastClassName={styles.toastContainer} />
+            <Windows />
+          </ThemerThemesContextProvider>
+        </ThemerConfigContextProvider>
       </ConfigsOpenContextProvider>
     </div>
   );

src/page/components/app/styles.module.css

@@ -5,4 +5,10 @@
   inset: 0px;
   pointer-events: none;
   z-index: 999999999;
+  color: white;
+}
+
+.toastContainer {
+  --toastify-color-dark: #00000066;
+  backdrop-filter: blur(4px);
 }

src/page/components/basic/background-picker/index.tsx

@@ -1,6 +1,6 @@
+import { themerGradients } from "@page-features/themer/gradients";
+import { useOutsideAlert } from "@page-hooks/use-outside-alert";
 import React, { useMemo, useRef, useState } from "react";
-import { useOutsideAlert } from "../../../hooks/use-outside-alert";
-import { themerGradients } from "../../../mods/themer/gradients";
 import styles from "./styles.module.css";
 
 export interface BackgroundPickerProps {

src/page/components/basic/button/index.tsx

@@ -1,15 +1,17 @@
-import React, { ReactNode } from "react";
+import React, { CSSProperties, ReactNode } from "react";
 import styles from "./styles.module.css";
 
 interface Props {
   children?: ReactNode;
   onClick?: () => void;
   fullWidth?: boolean;
+  style?: CSSProperties;
+  className?: string;
 }
 
-export const Button = ({ children, onClick, fullWidth }: Props) => {
+export const Button = ({ children, onClick, fullWidth, style, className }: Props) => {
   return (
-    <button style={{ width: fullWidth ? "100%" : undefined }} onClick={onClick} className={styles.container}>
+    <button style={{ width: fullWidth ? "100%" : undefined, ...style }} onClick={onClick} className={`${styles.container} ${className ?? ""}`}>
       {children}
     </button>
   );

src/page/components/basic/button/styles.module.css

@@ -8,6 +8,7 @@
   color: #ddd;
   border-radius: 4px;
   transition: background-color 100ms;
+  padding: 4px 8px;
 }
 
 .container:hover {

src/page/components/basic/color-picker/index.tsx

@@ -1,6 +1,6 @@
+import { useOutsideAlert } from "@page-hooks/use-outside-alert";
 import React, { useRef, useState } from "react";
 import { ChromePicker, ColorResult } from "react-color";
-import { useOutsideAlert } from "../../../hooks/use-outside-alert";
 import styles from "./styles.module.css";
 
 export interface ColorPickerProps {

src/page/components/basic/flex/index.tsx

@@ -1,10 +1,13 @@
-import React, { ReactNode } from "react";
+import React, { CSSProperties, ReactNode } from "react";
 
 interface Props {
   direction?: "column" | "row" | "column-reverse" | "row-reverse";
   align?: "center" | "start" | "end";
   justify?: "center" | "start" | "end" | "between" | "around";
   gap?: number;
+  flex?: number;
+  style?: CSSProperties;
+  className?: string;
   children?: ReactNode;
 }
 
@@ -22,15 +25,18 @@ const justifyMapping = {
   around: "space-around",
 };
 
-export const Flex = ({ direction, align, justify, gap, children }: Props) => {
+export const Flex = ({ direction, align, justify, gap, flex, style, className, children }: Props) => {
   return (
     <div
+      className={className}
       style={{
         display: "flex",
         alignItems: alignMapping[align!],
         justifyContent: justifyMapping[justify!],
         flexDirection: direction,
         gap,
+        flex,
+        ...style,
       }}
     >
       {children}

src/page/components/icons/config-icon/index.tsx → src/page/components/basic/icon/icons/config.tsx

@@ -1,12 +1,8 @@
 import React from "react";
 
-interface Props {
-  size: number;
-}
-
-export const ConfigIcon = ({ size }: Props) => {
+export const ConfigIcon = () => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} fill="white" viewBox="0 0 512 512">
+    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 512 512">
       <path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z" />
     </svg>
   );

src/page/components/basic/icon/icons/confirm.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const ConfirmIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 512 512">
+      <path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z" />
+    </svg>
+  );
+};

src/page/components/basic/icon/icons/delete.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const DeleteIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 448 512">
+      <path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z" />
+    </svg>
+  );
+};

src/page/components/basic/icon/icons/export.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const ExportIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 576 512">
+      <path d="M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V288H216c-13.3 0-24 10.7-24 24s10.7 24 24 24H384V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zM384 336V288H494.1l-39-39c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l80 80c9.4 9.4 9.4 24.6 0 33.9l-80 80c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l39-39H384zm0-208H256V0L384 128z" />
+    </svg>
+  );
+};

src/page/components/basic/icon/icons/import.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const ImportIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 512 512">
+      <path d="M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z" />
+    </svg>
+  );
+};

src/page/components/icons/logo/index.tsx → src/page/components/basic/icon/icons/logo.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export const Logo = () => {
+export const LogoIcon = () => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

src/page/components/basic/icon/icons/paint-roller.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const PaintRollerIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 512 512">
+      <path d="M0 64C0 28.7 28.7 0 64 0H352c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zM160 352c0-17.7 14.3-32 32-32V304c0-44.2 35.8-80 80-80H416c17.7 0 32-14.3 32-32V160 69.5c37.3 13.2 64 48.7 64 90.5v32c0 53-43 96-96 96H272c-8.8 0-16 7.2-16 16v16c17.7 0 32 14.3 32 32V480c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32V352z" />
+    </svg>
+  );
+};