diff --git a/design-tokens-manager/src/App.jsx b/design-tokens-manager/src/App.jsx index 87e70e126..f31b1308a 100644 --- a/design-tokens-manager/src/App.jsx +++ b/design-tokens-manager/src/App.jsx @@ -1,7 +1,12 @@ import { useContext, useEffect, useState } from 'react'; +import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'; import styled from 'styled-components'; import { + Heading, Grommet, + Form, + FormField, + TextInput, Page, Data, PageContent, @@ -15,10 +20,21 @@ import { DataContext, DataSummary, Toolbar, + Anchor, + SelectMultiple, + // ToggleGroup, } from 'grommet'; import { hpe } from 'grommet-theme-hpe'; import tokens from 'design-tokens/tree'; -import { Github, LinkNext, Moon, Sun } from 'grommet-icons'; +import { + Github, + LinkNext, + Moon, + Sun, + Previous, + Trash, + // Copy, +} from 'grommet-icons'; const tokensArr = []; Object.keys(tokens).forEach(mode => { @@ -126,8 +142,274 @@ const buildTree = (selectedToken, showValue) => { ); }; -function App() { +const Visualizer = () => { const [selected, setSelected] = useState({}); + + return ( + + + + + + + + + + + + + + + + + + {selected.name + ? buildTree(selected, true) + : 'Select a token to see dependencies.'} + + + + + + ); +}; + +const colors = ['background', 'foregroundColor', 'borderColor']; +const dimensions = ['paddingX', 'paddingY', 'borderRadius', 'borderWidth']; + +const Builder = () => { + const [value, setValue] = useState({ + prefix: 'hpe', + component: '', + size: ['medium'], + variants: [{ variant: '' }], + state: ['enabled', 'disabled', 'hover', 'selected'], + property: [...dimensions, ...colors], + }); + + // const [view, setView] = useState('compact'); + const [tokens, setTokens] = useState([]); + + const addVariant = () => { + const newVariant = { variant: '' }; + const newVariants = [...value.variants, newVariant]; + setValue({ + ...value, + variants: newVariants, + }); + }; + + const removeVariant = index => { + if (value.variants && value.variants.length > 0) { + setValue({ + ...value, + variants: value.variants.filter((v, _idx) => _idx !== index), + }); + } + }; + + const handleSubmit = ({ value: formValue }) => { + const nextTokens = []; + formValue.size.forEach(size => { + formValue.variants.forEach(variant => { + formValue.state.forEach(state => { + dimensions.forEach(property => { + nextTokens.push( + `${formValue.prefix}.${formValue.component}.${size}.${ + variant.variant ? `${variant.variant}.` : '' + }${state}.${property}`, + ); + }); + }); + }); + }); + + formValue.variants.forEach(variant => { + formValue.state.forEach(state => { + colors.forEach(property => { + nextTokens.push( + `${formValue.prefix}.${formValue.component}.${ + variant.variant ? `${variant.variant}.` : '' + }${state}.${property}`, + ); + }); + }); + }); + setTokens(nextTokens); + // let res = {}; + // nextTokens.forEach(token => { + // const parts = token.split('.'); + // parts.forEach(part => { + // if () + // }) + // }); + // console.log(res); + }; + + let VariantGroup = null; + if (value.variants !== undefined) { + VariantGroup = value.variants.map((phone, index) => ( + + + + + + + + + +