From 6396b257cb15d42698c1c2f813dd3b497f14b547 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Thu, 13 Feb 2025 14:57:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0M3=20Dynamic=20Scheme?=
 =?UTF-8?q?=E7=9A=84=E8=AF=A6=E7=BB=86=E9=A1=B5=E9=9D=A2=E7=BB=84=E6=88=90?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/material-3-scheme.ts                      | 17 +++++++++
 .../scheme/M3DynamicScheme.tsx                | 35 +++++++++++++++++++
 src/page-components/scheme/M3Scheme.tsx       |  2 +-
 .../scheme/m3-dynamic-scheme/Builder.tsx      |  5 +++
 .../scheme/m3-scheme/Preview.tsx              | 14 +++-----
 src/pages/SchemeDetail.tsx                    | 10 +++++-
 6 files changed, 71 insertions(+), 12 deletions(-)
 create mode 100644 src/page-components/scheme/M3DynamicScheme.tsx
 create mode 100644 src/page-components/scheme/m3-dynamic-scheme/Builder.tsx

diff --git a/src/material-3-scheme.ts b/src/material-3-scheme.ts
index 0d33e03..df16e1d 100644
--- a/src/material-3-scheme.ts
+++ b/src/material-3-scheme.ts
@@ -58,3 +58,20 @@ export type MaterialDesign3SchemeStorage = {
   scssVariables?: string;
   jsVariables?: string;
 };
+
+export type MaterialDesign3DynamicSchemeSource = {
+  source: string | null;
+  error: string | null;
+  custom_colors?: Record<string, string>;
+  variant: number | null;
+  constrastLevel: number | null;
+  harmonizeCustoms: boolean | null;
+};
+
+export type MaterialDesign3DynamicSchemeStorage = {
+  source?: MaterialDesign3DynamicSchemeSource;
+  scheme?: MaterialDesign3Scheme;
+  cssVariables?: string;
+  scssVariables?: string;
+  jsVariables?: string;
+};
diff --git a/src/page-components/scheme/M3DynamicScheme.tsx b/src/page-components/scheme/M3DynamicScheme.tsx
new file mode 100644
index 0000000..9ec474d
--- /dev/null
+++ b/src/page-components/scheme/M3DynamicScheme.tsx
@@ -0,0 +1,35 @@
+import { isEqual, isNil } from 'lodash-es';
+import { useState } from 'react';
+import { Tab } from '../../components/Tab';
+import { MaterialDesign3DynamicSchemeStorage } from '../../material-3-scheme';
+import { SchemeContent } from '../../models';
+import { SchemeExport } from './Export';
+import { M3DynamicSchemeBuilder } from './m3-dynamic-scheme/Builder';
+import { M3SchemePreview } from './m3-scheme/Preview';
+
+const tabOptions = [
+  { title: 'Overview', id: 'overview' },
+  { title: 'Builder', id: 'builder' },
+  { title: 'Exports', id: 'export' },
+];
+
+type M3SchemeProps = {
+  scheme: SchemeContent<MaterialDesign3DynamicSchemeStorage>;
+};
+
+export function M3DynamicScheme({ scheme }: M3SchemeProps) {
+  const [activeTab, setActiveTab] = useState<(typeof tabOptions)[number]['id']>(() =>
+    isNil(scheme.schemeStorage.scheme) ? 'builder' : 'overview',
+  );
+
+  return (
+    <>
+      <Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
+      {isEqual(activeTab, 'overview') && <M3SchemePreview scheme={scheme.schemeStorage.scheme} />}
+      {isEqual(activeTab, 'builder') && (
+        <M3DynamicSchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />
+      )}
+      {isEqual(activeTab, 'export') && <SchemeExport scheme={scheme} />}
+    </>
+  );
+}
diff --git a/src/page-components/scheme/M3Scheme.tsx b/src/page-components/scheme/M3Scheme.tsx
index 51c20ea..1d804bc 100644
--- a/src/page-components/scheme/M3Scheme.tsx
+++ b/src/page-components/scheme/M3Scheme.tsx
@@ -25,7 +25,7 @@ export function M3Scheme({ scheme }: M3SchemeProps) {
   return (
     <>
       <Tab tabs={tabOptions} activeTab={activeTab} onActive={(v) => setActiveTab(v as string)} />
-      {isEqual(activeTab, 'overview') && <M3SchemePreview scheme={scheme} />}
+      {isEqual(activeTab, 'overview') && <M3SchemePreview scheme={scheme.schemeStorage.scheme} />}
       {isEqual(activeTab, 'builder') && (
         <M3SchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />
       )}
diff --git a/src/page-components/scheme/m3-dynamic-scheme/Builder.tsx b/src/page-components/scheme/m3-dynamic-scheme/Builder.tsx
new file mode 100644
index 0000000..b1fc907
--- /dev/null
+++ b/src/page-components/scheme/m3-dynamic-scheme/Builder.tsx
@@ -0,0 +1,5 @@
+import { ScrollArea } from '../../../components/ScrollArea';
+
+export function M3DynamicSchemeBuilder() {
+  return <ScrollArea enableY></ScrollArea>;
+}
diff --git a/src/page-components/scheme/m3-scheme/Preview.tsx b/src/page-components/scheme/m3-scheme/Preview.tsx
index aa6d942..0bd0919 100644
--- a/src/page-components/scheme/m3-scheme/Preview.tsx
+++ b/src/page-components/scheme/m3-scheme/Preview.tsx
@@ -1,11 +1,5 @@
 import { ScrollArea } from '../../../components/ScrollArea';
-import {
-  Baseline,
-  ColorSet,
-  MaterialDesign3SchemeStorage,
-  Surface,
-} from '../../../material-3-scheme';
-import { SchemeContent } from '../../../models';
+import { Baseline, ColorSet, MaterialDesign3Scheme, Surface } from '../../../material-3-scheme';
 import styles from './Preview.module.css';
 
 type ColorSetProps = {
@@ -257,15 +251,15 @@ function PreviewBlock({ title, baseline }: PreviewBlockProps) {
 }
 
 type M3SchemePreviewProps = {
-  scheme: SchemeContent<MaterialDesign3SchemeStorage>;
+  scheme: MaterialDesign3Scheme;
 };
 
 export function M3SchemePreview({ scheme }: M3SchemePreviewProps) {
   return (
     <ScrollArea enableY>
       <div className={styles.preview_layout}>
-        <PreviewBlock title="Light Scheme" baseline={scheme.schemeStorage.scheme!.light_baseline} />
-        <PreviewBlock title="Dark Scheme" baseline={scheme.schemeStorage.scheme!.dark_baseline} />
+        <PreviewBlock title="Light Scheme" baseline={scheme.light_baseline} />
+        <PreviewBlock title="Dark Scheme" baseline={scheme.dark_baseline} />
       </div>
     </ScrollArea>
   );
diff --git a/src/pages/SchemeDetail.tsx b/src/pages/SchemeDetail.tsx
index 956f130..acc827b 100644
--- a/src/pages/SchemeDetail.tsx
+++ b/src/pages/SchemeDetail.tsx
@@ -6,10 +6,14 @@ import { EditableDescription } from '../components/EditableDescription';
 import { EditableTitle } from '../components/EditableTitle';
 import { SchemeSign } from '../components/SchemeSign';
 import { MaterialDesign2SchemeStorage } from '../material-2-scheme';
-import { MaterialDesign3SchemeStorage } from '../material-3-scheme';
+import {
+  MaterialDesign3DynamicSchemeStorage,
+  MaterialDesign3SchemeStorage,
+} from '../material-3-scheme';
 import { SchemeContent } from '../models';
 import { CorruptedScheme } from '../page-components/scheme/CorruptedScheme';
 import { M2Scheme } from '../page-components/scheme/M2Scheme';
+import { M3DynamicScheme } from '../page-components/scheme/M3DynamicScheme';
 import { M3Scheme } from '../page-components/scheme/M3Scheme';
 import { QScheme } from '../page-components/scheme/QScheme';
 import { SwatchScheme } from '../page-components/scheme/SwatchScheme';
@@ -52,6 +56,10 @@ export function SchemeDetail() {
         return <M2Scheme scheme={scheme as SchemeContent<MaterialDesign2SchemeStorage>} />;
       case 'material_3':
         return <M3Scheme scheme={scheme as SchemeContent<MaterialDesign3SchemeStorage>} />;
+      case 'material_3_dynamic':
+        return (
+          <M3DynamicScheme scheme={scheme as SchemeContent<MaterialDesign3DynamicSchemeStorage>} />
+        );
       default:
         return <CorruptedScheme />;
     }