diff --git a/client/src/_new/pages/component/ComponentEditor.tsx b/client/src/_new/pages/component/ComponentEditor.tsx index a088dfb..d108307 100644 --- a/client/src/_new/pages/component/ComponentEditor.tsx +++ b/client/src/_new/pages/component/ComponentEditor.tsx @@ -11,7 +11,6 @@ import { ComponentAddStyle } from './ComponentAddStyle'; import { Config } from '../../../componentBuilder'; import { DesignSystem } from '../../../designSystem'; import { PageWrapper } from '../PageWrapper'; -import { ComponentAppearance } from './ComponentAppearance'; const StyledActions = styled.div` display: flex; @@ -100,22 +99,13 @@ export const ComponentEditor = (props: ComponentEditorProps) => { const designSystem = new DesignSystem({ name: designSystemName, version: designSystemVersion }); - const configItems = designSystem - .getComponentDataByName(componentName) - .sources.configs.map(({ name, id }) => ({ value: id, label: name })); - const [configItem, setConfigItem] = useState(configItems[0]); - const theme = useMemo(() => designSystem.createThemeInstance({ includeExtraTokens: true }), []); const componentConfig = useMemo( () => designSystem.createComponentInstance({ componentName, - configInfo: { - id: configItem.value, - name: configItem.label, - }, }), - [configItem], + [], ); const [, updateState] = useState({}); @@ -144,9 +134,8 @@ export const ComponentEditor = (props: ComponentEditorProps) => { const { sources } = designSystem.getComponentDataByName(componentName); - const configIndex = sources.configs?.findIndex(({ id }) => id === configItem.value); - sources.configs[configIndex] = { - ...sources.configs[configIndex], + sources.configs[0] = { + ...sources.configs[0], config: { defaultVariations, invariantProps, @@ -183,29 +172,10 @@ export const ComponentEditor = (props: ComponentEditorProps) => { setComponentProps({ ...componentProps, ...values }); }; - const onChangeAppearance = (value: { value: string; label: string }) => { - setConfigItem(value); - - const currentComponentConfig = designSystem.createComponentInstance({ - componentName, - configInfo: { - id: value.value, - name: value.label, - }, - }); - - setComponentProps((prev) => ({ ...prev, ...getDefaults(currentComponentConfig) })); - }; - const vars = createCSSVars(componentConfig, theme, componentProps, themeMode); return ( - item.id === configInfo.id)?.config; + const { config } = configs[0]; if (!config) { this.defaults = []; diff --git a/client/src/designSystem.ts b/client/src/designSystem.ts index 8695d14..a345f3b 100644 --- a/client/src/designSystem.ts +++ b/client/src/designSystem.ts @@ -143,10 +143,10 @@ export class DesignSystem { return buildTheme(this.themeData.meta, this.themeData.variations, data?.includeExtraTokens); } - public createComponentInstance(data: { componentName: string; configInfo: { name: string; id: string } }) { - const { componentName, configInfo } = data; + public createComponentInstance(data: { componentName: string }) { + const { componentName } = data; const componentMeta = this.getComponentDataByName(componentName); - return new Config(componentMeta, configInfo); + return new Config(componentMeta); } } diff --git a/client/src/pseudo_data_base/components/Checkbox/configs.ts b/client/src/pseudo_data_base/components/Checkbox/configs.ts index 1dba221..776ade4 100644 --- a/client/src/pseudo_data_base/components/Checkbox/configs.ts +++ b/client/src/pseudo_data_base/components/Checkbox/configs.ts @@ -275,280 +275,4 @@ export const configs = [ ], }, }, - { - name: 'outline', - id: 'd09adc72-edcb-4976-af5b-89d00f7bfa3c', - config: { - defaultVariations: [ - { - variationID: '502ae3aa-66bb-479a-8fb3-f489f7aba3b2', - styleID: 'd8001fc2-3b57-4132-b0d2-448e05df0590', - }, - { - variationID: '8b3c2972-faa4-40a4-9567-8bc1ed3f3dee', - styleID: 'd2756b40-0378-424f-9eb9-1751e09afb98', - }, - ], - invariantProps: [ - { - id: 'a8b6d4ac-b0bf-4530-bc4d-a1718bbe585b', - value: 0.4, - }, - { - id: '1b7d6e7d-7c34-45a1-bcdb-9e0fbd66f92a', - value: 'text.default.accent', - states: null, - }, - ], - variations: [ - { - id: '502ae3aa-66bb-479a-8fb3-f489f7aba3b2', - styles: [ - { - name: 'l', - id: 'f76e749f-ac09-413c-a9a4-91c503f65481', - intersections: null, - props: [ - { - id: '22e7658b-4c6f-4cca-a572-3215e7dab4de', - value: 0, - }, - { - id: '3332e569-d139-430c-bff4-647396132d45', - value: 2, - }, - { - id: 'adeac05d-65ec-4ff6-9fc0-6a8ff733f31f', - value: 20, - }, - { - id: 'e4b988a0-840e-4b5a-928f-70a539c2ba7a', - value: 20, - }, - { - id: '87f08778-e272-4f3e-9242-2e389d0d0edc', - value: 'round.xs', - }, - { - id: '50d0070a-b515-4e37-9526-b16a4cc1b899', - value: 1, - }, - { - id: '94ac045b-700a-4c02-a1d8-c7e8807d643a', - value: 1, - }, - { - id: '58de266b-cebb-4ddb-8409-c54ab00ccd1a', - value: 12, - }, - { - id: '2d5c39ff-bbaf-4072-b9cc-6bddc8f5b874', - value: 2, - }, - { - id: '88c4d943-a881-44a6-90f2-745fcd8f52ba', - value: 'body.l.normal', - }, - { - id: '78e7b265-5377-4e2a-8232-c5414646ec57', - value: 'body.m.normal', - }, - ], - }, - { - name: 'm', - id: 'd8001fc2-3b57-4132-b0d2-448e05df0590', - intersections: null, - props: [ - { - id: '22e7658b-4c6f-4cca-a572-3215e7dab4de', - value: 0, - }, - { - id: '3332e569-d139-430c-bff4-647396132d45', - value: 2, - }, - { - id: 'adeac05d-65ec-4ff6-9fc0-6a8ff733f31f', - value: 20, - }, - { - id: 'e4b988a0-840e-4b5a-928f-70a539c2ba7a', - value: 20, - }, - { - id: '87f08778-e272-4f3e-9242-2e389d0d0edc', - value: 'round.xs', - }, - { - id: '50d0070a-b515-4e37-9526-b16a4cc1b899', - value: 1, - }, - { - id: '94ac045b-700a-4c02-a1d8-c7e8807d643a', - value: 1, - }, - { - id: '58de266b-cebb-4ddb-8409-c54ab00ccd1a', - value: 12, - }, - { - id: '2d5c39ff-bbaf-4072-b9cc-6bddc8f5b874', - value: 2, - }, - { - id: '88c4d943-a881-44a6-90f2-745fcd8f52ba', - value: 'body.m.normal', - }, - { - id: '78e7b265-5377-4e2a-8232-c5414646ec57', - value: 'body.s.normal', - }, - ], - }, - { - name: 's', - id: '4dc2c7cb-b9d0-4509-9a0a-96dc14c2cfc4', - intersections: null, - props: [ - { - id: '22e7658b-4c6f-4cca-a572-3215e7dab4de', - value: 0, - }, - { - id: '3332e569-d139-430c-bff4-647396132d45', - value: 1, - }, - { - id: 'adeac05d-65ec-4ff6-9fc0-6a8ff733f31f', - value: 14, - }, - { - id: 'e4b988a0-840e-4b5a-928f-70a539c2ba7a', - value: 14, - }, - { - id: '87f08778-e272-4f3e-9242-2e389d0d0edc', - value: 'round.xxs', - }, - { - id: '50d0070a-b515-4e37-9526-b16a4cc1b899', - value: 1, - }, - { - id: '94ac045b-700a-4c02-a1d8-c7e8807d643a', - value: 0, - }, - { - id: '58de266b-cebb-4ddb-8409-c54ab00ccd1a', - value: 8, - }, - { - id: '2d5c39ff-bbaf-4072-b9cc-6bddc8f5b874', - value: 2, - }, - { - id: '88c4d943-a881-44a6-90f2-745fcd8f52ba', - value: 'body.s.normal', - }, - { - id: '78e7b265-5377-4e2a-8232-c5414646ec57', - value: 'body.xs.normal', - }, - ], - }, - ], - }, - { - id: '8b3c2972-faa4-40a4-9567-8bc1ed3f3dee', - styles: [ - { - name: 'accent', - id: 'd2756b40-0378-424f-9eb9-1751e09afb98', - intersections: null, - props: [ - { - id: 'c6034c7e-40ee-4dd1-8a45-d0a64b24da59', - value: 'transparent', - states: null, - }, - { - id: 'e52b3045-499b-4234-9699-ebf388d03e4b', - value: 'outline.default.accent', - states: null, - }, - { - id: '7eb89929-d5c4-46cd-a3e3-935747efd765', - value: 'text.default.primary', - states: null, - }, - { - id: 'ed84b708-0067-47c8-b0c6-9d5f2774ff56', - value: 'outline.default.transparent-tertiary', - states: null, - }, - { - id: '73f023a0-d36a-4018-a106-8db574a0cb5d', - value: 'transparent', - states: null, - }, - { - id: '55db8d7c-fa2d-4f89-86c8-ed9c9553439e', - value: 'text.default.secondary', - states: null, - }, - { - id: 'f37d25d8-338a-48dc-b4bb-38c827c490e8', - value: 'outline.default.accent', - states: null, - }, - ], - }, - { - name: 'negative', - id: '200076cc-141c-490c-8de1-f175078fe7d6', - intersections: null, - props: [ - { - id: 'c6034c7e-40ee-4dd1-8a45-d0a64b24da59', - value: 'transparent', - states: null, - }, - { - id: 'e52b3045-499b-4234-9699-ebf388d03e4b', - value: 'outline.default.negative', - states: null, - }, - { - id: '7eb89929-d5c4-46cd-a3e3-935747efd765', - value: 'text.default.primary', - states: null, - }, - { - id: 'ed84b708-0067-47c8-b0c6-9d5f2774ff56', - value: 'outline.default.transparent-tertiary', - states: null, - }, - { - id: '73f023a0-d36a-4018-a106-8db574a0cb5d', - value: 'transparent', - states: null, - }, - { - id: '55db8d7c-fa2d-4f89-86c8-ed9c9553439e', - value: 'text.default.secondary', - states: null, - }, - { - id: 'f37d25d8-338a-48dc-b4bb-38c827c490e8', - value: 'outline.default.negative', - states: null, - }, - ], - }, - ], - }, - ], - }, - }, ]; diff --git a/client/src/pseudo_data_base/components/Radiobox/configs.ts b/client/src/pseudo_data_base/components/Radiobox/configs.ts index 69a9597..bd64969 100644 --- a/client/src/pseudo_data_base/components/Radiobox/configs.ts +++ b/client/src/pseudo_data_base/components/Radiobox/configs.ts @@ -299,304 +299,4 @@ export const configs = [ ], }, }, - { - name: 'outline', - id: 'd09adc72-edcb-4976-af5b-89d00f7bfa3c', - config: { - defaultVariations: [ - { - variationID: '502ae3aa-66bb-479a-8fb3-f489f7aba3b2', - styleID: 'd8001fc2-3b57-4132-b0d2-448e05df0590', - }, - { - variationID: '8b3c2972-faa4-40a4-9567-8bc1ed3f3dee', - styleID: 'd2756b40-0378-424f-9eb9-1751e09afb98', - }, - ], - invariantProps: [ - { - id: 'a8b6d4ac-b0bf-4530-bc4d-a1718bbe585b', - value: 0.4, - }, - { - id: '1b7d6e7d-7c34-45a1-bcdb-9e0fbd66f92a', - value: 'text.default.accent', - states: null, - }, - ], - variations: [ - { - id: '502ae3aa-66bb-479a-8fb3-f489f7aba3b2', - styles: [ - { - name: 'l', - id: 'f76e749f-ac09-413c-a9a4-91c503f65481', - intersections: null, - props: [ - { - id: '22e7658b-4c6f-4cca-a572-3215e7dab4de', - value: 0, - }, - { - id: '3332e569-d139-430c-bff4-647396132d45', - value: 1, - }, - { - id: 'adeac05d-65ec-4ff6-9fc0-6a8ff733f31f', - value: 22, - }, - { - id: 'e4b988a0-840e-4b5a-928f-70a539c2ba7a', - value: 22, - }, - { - id: 'fba77c28-a971-44dc-92b5-79e73cae0868', - value: 10, - }, - { - id: '55137487-e87b-40d6-bf3d-7be407d4f35d', - value: 10, - }, - { - id: '87f08778-e272-4f3e-9242-2e389d0d0edc', - value: 'round.xl', - }, - { - id: '50d0070a-b515-4e37-9526-b16a4cc1b899', - value: 1, - }, - { - id: '94ac045b-700a-4c02-a1d8-c7e8807d643a', - value: 1, - }, - { - id: '58de266b-cebb-4ddb-8409-c54ab00ccd1a', - value: 12, - }, - { - id: '2d5c39ff-bbaf-4072-b9cc-6bddc8f5b874', - value: 2, - }, - { - id: '88c4d943-a881-44a6-90f2-745fcd8f52ba', - value: 'body.l.normal', - }, - { - id: '78e7b265-5377-4e2a-8232-c5414646ec57', - value: 'body.m.normal', - }, - ], - }, - { - name: 'm', - id: 'd8001fc2-3b57-4132-b0d2-448e05df0590', - intersections: null, - props: [ - { - id: '22e7658b-4c6f-4cca-a572-3215e7dab4de', - value: 0, - }, - { - id: '3332e569-d139-430c-bff4-647396132d45', - value: 1, - }, - { - id: 'adeac05d-65ec-4ff6-9fc0-6a8ff733f31f', - value: 22, - }, - { - id: 'e4b988a0-840e-4b5a-928f-70a539c2ba7a', - value: 22, - }, - { - id: 'fba77c28-a971-44dc-92b5-79e73cae0868', - value: 10, - }, - { - id: '55137487-e87b-40d6-bf3d-7be407d4f35d', - value: 10, - }, - { - id: '87f08778-e272-4f3e-9242-2e389d0d0edc', - value: 'round.xl', - }, - { - id: '50d0070a-b515-4e37-9526-b16a4cc1b899', - value: 1, - }, - { - id: '94ac045b-700a-4c02-a1d8-c7e8807d643a', - value: 1, - }, - { - id: '58de266b-cebb-4ddb-8409-c54ab00ccd1a', - value: 12, - }, - { - id: '2d5c39ff-bbaf-4072-b9cc-6bddc8f5b874', - value: 2, - }, - { - id: '88c4d943-a881-44a6-90f2-745fcd8f52ba', - value: 'body.m.normal', - }, - { - id: '78e7b265-5377-4e2a-8232-c5414646ec57', - value: 'body.s.normal', - }, - ], - }, - { - name: 's', - id: '4dc2c7cb-b9d0-4509-9a0a-96dc14c2cfc4', - intersections: null, - props: [ - { - id: '22e7658b-4c6f-4cca-a572-3215e7dab4de', - value: 0, - }, - { - id: '3332e569-d139-430c-bff4-647396132d45', - value: 1, - }, - { - id: 'adeac05d-65ec-4ff6-9fc0-6a8ff733f31f', - value: 16, - }, - { - id: 'e4b988a0-840e-4b5a-928f-70a539c2ba7a', - value: 16, - }, - { - id: 'fba77c28-a971-44dc-92b5-79e73cae0868', - value: 8, - }, - { - id: '55137487-e87b-40d6-bf3d-7be407d4f35d', - value: 8, - }, - { - id: '87f08778-e272-4f3e-9242-2e389d0d0edc', - value: 'round.xl', - }, - { - id: '50d0070a-b515-4e37-9526-b16a4cc1b899', - value: 1, - }, - { - id: '94ac045b-700a-4c02-a1d8-c7e8807d643a', - value: 0, - }, - { - id: '58de266b-cebb-4ddb-8409-c54ab00ccd1a', - value: 8, - }, - { - id: '2d5c39ff-bbaf-4072-b9cc-6bddc8f5b874', - value: 2, - }, - { - id: '88c4d943-a881-44a6-90f2-745fcd8f52ba', - value: 'body.s.normal', - }, - { - id: '78e7b265-5377-4e2a-8232-c5414646ec57', - value: 'body.xs.normal', - }, - ], - }, - ], - }, - { - id: '8b3c2972-faa4-40a4-9567-8bc1ed3f3dee', - styles: [ - { - name: 'accent', - id: 'd2756b40-0378-424f-9eb9-1751e09afb98', - intersections: null, - props: [ - { - id: 'c6034c7e-40ee-4dd1-8a45-d0a64b24da59', - value: 'transparent', - states: null, - }, - { - id: 'e52b3045-499b-4234-9699-ebf388d03e4b', - value: 'outline.default.accent', - states: null, - }, - { - id: '7eb89929-d5c4-46cd-a3e3-935747efd765', - value: 'text.default.primary', - states: null, - }, - { - id: 'ed84b708-0067-47c8-b0c6-9d5f2774ff56', - value: 'outline.default.transparent-tertiary', - states: null, - }, - { - id: '73f023a0-d36a-4018-a106-8db574a0cb5d', - value: 'transparent', - states: null, - }, - { - id: '55db8d7c-fa2d-4f89-86c8-ed9c9553439e', - value: 'text.default.secondary', - states: null, - }, - { - id: 'f37d25d8-338a-48dc-b4bb-38c827c490e8', - value: 'outline.default.accent', - states: null, - }, - ], - }, - { - name: 'negative', - id: '200076cc-141c-490c-8de1-f175078fe7d6', - intersections: null, - props: [ - { - id: 'c6034c7e-40ee-4dd1-8a45-d0a64b24da59', - value: 'transparent', - states: null, - }, - { - id: 'e52b3045-499b-4234-9699-ebf388d03e4b', - value: 'outline.default.negative', - states: null, - }, - { - id: '7eb89929-d5c4-46cd-a3e3-935747efd765', - value: 'text.default.primary', - states: null, - }, - { - id: 'ed84b708-0067-47c8-b0c6-9d5f2774ff56', - value: 'outline.default.transparent-tertiary', - states: null, - }, - { - id: '73f023a0-d36a-4018-a106-8db574a0cb5d', - value: 'transparent', - states: null, - }, - { - id: '55db8d7c-fa2d-4f89-86c8-ed9c9553439e', - value: 'text.default.secondary', - states: null, - }, - { - id: 'f37d25d8-338a-48dc-b4bb-38c827c490e8', - value: 'outline.default.negative', - states: null, - }, - ], - }, - ], - }, - ], - }, - }, ]; diff --git a/server/generator/src/generate.ts b/server/generator/src/generate.ts index ef468ef..c616e14 100644 --- a/server/generator/src/generate.ts +++ b/server/generator/src/generate.ts @@ -61,8 +61,8 @@ export const generateComponentsFiles = async ({ pathToDir, componentsMeta }: Com await fs.writeFile(`${pathToComponent}/${componentName}.ts`, component); for await (const item of configs) { - const { id, name } = item; - const config = new Config(componentMeta, { id, name }); + const { name } = item; + const config = new Config(componentMeta); const componentConfigFileName = name === 'default' ? componentName : `${componentName}.${name}`; const componentConfig = createComponentConfig(componentName, config);