PLASMA-3990: feat(plasma-themes-builder): Add new page with edit tokens

website/plasma-theme-builder/package.json

@@ -23,6 +23,7 @@
     "prettier": "^2.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.26.1",
     "react-scripts": "4.0.0",
     "styled-components": "^5.3.3"
   },

website/plasma-theme-builder/public/index.html

@@ -10,6 +10,8 @@
     />
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💎</text></svg>"/>
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css" />
+    <link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSerifDisplay.0.2.0.css" />
     <link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css" />
     <link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansTextMono.0.2.0.css" />
     <link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansCondMono.0.2.0.css" />

website/plasma-theme-builder/src/GlobalStyle.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
+import React, { useState, createContext, useContext } from 'react';
 import { createGlobalStyle } from 'styled-components';
-import { plasma } from '@salutejs/plasma-typo';
+import { plasma, ruler, sage, mage, soulmate } from '@salutejs/plasma-typo';
 import { dark } from '@salutejs/plasma-tokens-b2c/themes';
 import { text } from '@salutejs/plasma-tokens-b2c';
 import { b2c } from '@salutejs/plasma-tokens-b2c/typo';
-import type { ThemeMode } from '@salutejs/plasma-tokens-utils';
 
 import { SBSansTextMono } from './components/mixins';
 
@@ -24,18 +23,46 @@ const DocumentStyle = createGlobalStyle`
 `;
 
 const DarkThemeStyle = createGlobalStyle(dark);
-const TypoStyle = createGlobalStyle(plasma);
 const OldTypoStyle = createGlobalStyle(b2c);
 
-export const GlobalStyle = () => {
-    const theme: ThemeMode = 'dark';
+const archetypeMap = {
+    plasma: createGlobalStyle(plasma),
+    ruler: createGlobalStyle(ruler),
+    sage: createGlobalStyle(sage),
+    mage: createGlobalStyle(mage),
+    soulmate: createGlobalStyle(soulmate),
+};
+
+export type Archetype = keyof typeof archetypeMap;
+
+const ThemeContext = createContext<{
+    toggleArchetype: (value: Archetype) => void;
+}>({
+    toggleArchetype: () => {},
+});
+
+export const useTheme = () => useContext(ThemeContext);
+
+export const GlobalStyle = ({ children }: any) => {
+    const [archetype, setArchetype] = useState<Archetype>('plasma');
+
+    const toggleArchetype = (value: Archetype) => {
+        setArchetype(value);
+    };
+
+    const TypoStyle = archetypeMap[archetype];
 
     return (
-        <>
+        <ThemeContext.Provider
+            value={{
+                toggleArchetype,
+            }}
+        >
             <DocumentStyle />
-            {theme === 'dark' && <DarkThemeStyle />}
+            <DarkThemeStyle />
             <TypoStyle />
             <OldTypoStyle />
-        </>
+            {children}
+        </ThemeContext.Provider>
     );
 };

website/plasma-theme-builder/src/_new/examples/buildAndModifyMockTheme.ts

@@ -263,13 +263,13 @@ export const buildAndModifyMockTheme = async () => {
         },
     });
 
-    const onlyGradientTokens = mockTheme.getTokens('gradient');
-    console.log('onlyGradientTokens', onlyGradientTokens);
+    const allTokens = mockTheme.getTokens();
+    console.log('allTokens', allTokens);
 
     mockTheme.setTokenValue('shadow.name', 'shadow', 'android', { color: 'red', elevation: 0 });
 
-    const allTokens = mockTheme.getTokens();
-    console.log('allTokens', allTokens);
+    const onlyGradientTokens = mockTheme.getTokens('gradient');
+    console.log('onlyGradientTokens', onlyGradientTokens);
 
     const value = mockTheme.getTokenValue('shape.name', 'shape', 'ios');
     const values = mockTheme.getTokenValue('shape.name', 'shape');

website/plasma-theme-builder/src/components/App.tsx

@@ -1,5 +1,6 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled, { css } from 'styled-components';
+import { Route, Routes, useNavigate } from 'react-router-dom';
 
 import { Footer } from './Footer/Footer';
 import { Main } from './Main/Main';
@@ -12,6 +13,14 @@ import { useDefaultThemeData, useFetchTheme } from '../hooks';
 import { multipleMediaQuery } from './mixins';
 import { getURLParams, pushHistoryState } from '../utils';
 import type { Theme as ThemeType } from '../types';
+// import { useDefaultThemeData, useFetchTheme } from '../hooks';
+// import { multipleMediaQuery } from './mixins';
+// import { getURLParams, pushHistoryState } from '../utils';
+// import type { Theme as ThemeType } from '../types';
+import { ToneGenerator } from './ColorGenerator/ToneGenerator';
+import { GrayscaleGenerator } from './ColorGenerator/GrayscaleGenerator';
+import { FontFamilyGenerator } from './ColorGenerator/FontFamilyGenerator';
+import { TokensEditor } from './_new/TokensEditor';
 
 const StyledRoot = styled.div`
     min-width: 35rem;
@@ -31,82 +40,66 @@ const StyledRoot = styled.div`
 `;
 
 const PAGE_TYPE = {
-    MAIN: 'MAIN',
-    GENERATOR: 'GENERATOR',
-    THEME: 'THEME',
-    PULL_REQUEST: 'PULL_REQUEST',
-    ERROR: 'ERROR',
+    TONE: 'TONE',
+    GRAYSCALE: 'GRAYSCALE',
+    FONT_FAMILY: 'FONT_FAMILY',
+    TOKENS_EDITOR: 'TOKENS_EDITOR',
 } as const;
 
 type PageType = typeof PAGE_TYPE[keyof typeof PAGE_TYPE];
 
 const App = () => {
-    const [state, setState] = useState<PageType>(PAGE_TYPE.MAIN);
-    const [data, setData] = useState<ThemeType>();
-    const [token, setToken] = useState<string | undefined>();
-    const defaultData = useDefaultThemeData();
+    const [state, setState] = useState<PageType>(PAGE_TYPE.TONE);
+    // const [data, setData] = useState<ThemeType>();
+    // const [token, setToken] = useState<string | undefined>();
+    // const defaultData = useDefaultThemeData();
+
+    const navigate = useNavigate();
 
     const [themeName, branchName] = getURLParams(['theme', 'branch']);
     const [themeData, errorMessage] = useFetchTheme(themeName, branchName);
 
-    useEffect(() => {
-        if (!token) {
-            return;
-        }
-
-        if (themeData) {
-            setState(PAGE_TYPE.THEME);
-            setData(themeData);
-            return;
-        }
-
-        if (errorMessage) {
-            setState(PAGE_TYPE.ERROR);
-        }
-    }, [themeData, token, errorMessage]);
-
-    const onSetToken = useCallback((value: string) => {
-        setToken(value);
-    }, []);
-
-    const onMain = useCallback(() => {
-        setState(PAGE_TYPE.MAIN);
-        pushHistoryState('./');
-    }, []);
-
-    const onGenerateTheme = useCallback(() => {
-        setState(PAGE_TYPE.GENERATOR);
-        pushHistoryState('./');
-    }, []);
-
-    const onPreviewTheme = useCallback((data: ThemeType) => {
-        setState(PAGE_TYPE.THEME);
-        setData(data);
-    }, []);
-
-    const onPullRequest = useCallback((data: ThemeType) => {
-        setState(PAGE_TYPE.PULL_REQUEST);
-        setData(data);
-    }, []);
+    const onGrayScale = () => {
+        setState(PAGE_TYPE.GRAYSCALE);
+    };
+
+    const onTokensEditor = () => {
+        setState(PAGE_TYPE.TOKENS_EDITOR);
+    };
+
+    const onTone = () => {
+        setState(PAGE_TYPE.TONE);
+    };
+
+    const onFontFamily = () => {
+        setState(PAGE_TYPE.FONT_FAMILY);
+    };
 
     return (
-        <StyledRoot>
-            {state === PAGE_TYPE.MAIN && <Main onSetToken={onSetToken} onGenerateTheme={onGenerateTheme} />}
-            {state === PAGE_TYPE.GENERATOR && <Generator onMain={onMain} onPreviewTheme={onPreviewTheme} />}
-            {state === PAGE_TYPE.THEME && (
-                <Theme
-                    data={data}
-                    defaultData={defaultData}
-                    themeNameFromParam={themeName}
-                    branchNameFromParam={branchName}
-                    onGenerateTheme={onGenerateTheme}
-                    onPullRequest={onPullRequest}
-                />
-            )}
-            {state === PAGE_TYPE.PULL_REQUEST && <PullRequest data={data} token={token} />}
-            {state === PAGE_TYPE.ERROR && <Error message={errorMessage} onMain={onMain} />}
-            <Footer />
-        </StyledRoot>
+        <Routes>
+            <Route path="new" element={<TokensEditor onPreviousPage={onFontFamily} onNextPage={onTone} />} />
+            <Route
+                path="test"
+                element={
+                    <ToneGenerator
+                        onPreviousPage={onTokensEditor}
+                        onNextPage={() => {
+                            navigate('/new');
+                        }}
+                    />
+                }
+            />
+            {/* {state === PAGE_TYPE.TONE && <ToneGenerator onNextPage={onGrayScale} />}
+                {state === PAGE_TYPE.GRAYSCALE && (
+                    <GrayscaleGenerator onPreviousPage={onTone} onNextPage={onFontFamily} />
+                )}
+                {state === PAGE_TYPE.FONT_FAMILY && (
+                    <FontFamilyGenerator onPreviousPage={onGrayScale} onNextPage={onTokensEditor} />
+                )}
+                {state === PAGE_TYPE.TOKENS_EDITOR && (
+                    <TokensEditor onPreviousPage={onFontFamily} onNextPage={onTone} />
+                )} */}
+        </Routes>
     );
 };