From 9fed2bd5299819972bea8c08cdeeda825e7d68be Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Mon, 23 Feb 2026 12:46:35 +0100 Subject: [PATCH 01/10] Theme generator skeleton --- .../{ => configuration}/index.tsx | 2 +- .../theme-generator/ThemeGeneratorPage.tsx | 93 +++++++++++++ .../components/BottomButtons.tsx | 59 ++++++++ .../theme-generator/components/ColorCard.tsx | 128 ++++++++++++++++++ .../components/PageHeading.tsx | 15 ++ .../theme-generator/ThemeGeneratorPage.tsx | 4 - 6 files changed, 296 insertions(+), 5 deletions(-) rename apps/website/pages/theme-generator/{ => configuration}/index.tsx (72%) create mode 100644 apps/website/screens/theme-generator/ThemeGeneratorPage.tsx create mode 100644 apps/website/screens/theme-generator/components/BottomButtons.tsx create mode 100644 apps/website/screens/theme-generator/components/ColorCard.tsx create mode 100644 apps/website/screens/theme-generator/components/PageHeading.tsx delete mode 100644 apps/website/screens/utilities/theme-generator/ThemeGeneratorPage.tsx diff --git a/apps/website/pages/theme-generator/index.tsx b/apps/website/pages/theme-generator/configuration/index.tsx similarity index 72% rename from apps/website/pages/theme-generator/index.tsx rename to apps/website/pages/theme-generator/configuration/index.tsx index 35283e0fcd..d5a0415ac1 100644 --- a/apps/website/pages/theme-generator/index.tsx +++ b/apps/website/pages/theme-generator/configuration/index.tsx @@ -1,5 +1,5 @@ import Head from "next/head"; -import ThemeGeneratorPage from "screens/utilities/theme-generator/ThemeGeneratorPage"; +import ThemeGeneratorPage from "screens/theme-generator/ThemeGeneratorPage"; const Index = () => { return ( diff --git a/apps/website/screens/theme-generator/ThemeGeneratorPage.tsx b/apps/website/screens/theme-generator/ThemeGeneratorPage.tsx new file mode 100644 index 0000000000..2086f43948 --- /dev/null +++ b/apps/website/screens/theme-generator/ThemeGeneratorPage.tsx @@ -0,0 +1,93 @@ +import { useState } from "react"; +import { DxcContainer, DxcFlex, DxcWizard } from "@dxc-technology/halstack-react"; +import { PageHeading } from "./components/PageHeading"; +import { BottomButtons } from "./components/BottomButtons"; +// import { FileData } from "../../../../packages/lib/src/file-input/types"; + +const steps = [ + { label: "Configure theme", description: "Branding details" }, + { label: "Preview", description: "Components and templates" }, + { label: "Export theme", description: "Review and export" }, +]; + +const ThemeGeneratorPage = () => { + const [currentStep, setCurrentStep] = useState<0 | 1 | 2>(0); + // Descomentar cuándo se implementen las funcionalidades de cada paso + /** const [colors, setColors] = useState({ + primary: "#5f249f", + secondary: "#00b4d8", + tertiary: "#ffa500", + neutral: "#666666", + info: "#0095FF", + success: "#2FD05D", + error: "#FE0123", + warning: "#F38F20", + }); + const [logos, setLogos] = useState({ + mainLogo: [] as FileData[], + footerLogo: [] as FileData[], + footerReducedLogo: [] as FileData[], + favicon: [] as FileData[], + }); + */ + + const handleChangeStep = (step: 0 | 1 | 2) => { + setCurrentStep(step); + }; + + return ( + + + + { + if (i === 0) handleChangeStep(0); + else if (i === 1) handleChangeStep(1); + else if (i === 2) handleChangeStep(2); + }} + /> + + + + + + {currentStep === 0 ? <> : currentStep === 1 ? <> : <>} + + + + + + + ); +}; + +export default ThemeGeneratorPage; diff --git a/apps/website/screens/theme-generator/components/BottomButtons.tsx b/apps/website/screens/theme-generator/components/BottomButtons.tsx new file mode 100644 index 0000000000..b0e3ca75f6 --- /dev/null +++ b/apps/website/screens/theme-generator/components/BottomButtons.tsx @@ -0,0 +1,59 @@ +import { DxcButton, DxcContainer, DxcFlex } from "@dxc-technology/halstack-react"; + +interface BottomButtonsProps { + currentStep: 0 | 1 | 2; + onChangeStep: (step: 0 | 1 | 2) => void; +} + +export const BottomButtons = ({ currentStep, onChangeStep }: BottomButtonsProps) => { + const handlePrevious = () => { + if (currentStep === 1) { + onChangeStep(0); + } else if (currentStep === 2) { + onChangeStep(1); + } + }; + + const handleNext = () => { + if (currentStep === 0) { + onChangeStep(1); + } else if (currentStep === 1) { + onChangeStep(2); + } + }; + + return ( + + + + {currentStep === 2 ? ( + + ) : ( + + )} + + + ); +}; diff --git a/apps/website/screens/theme-generator/components/ColorCard.tsx b/apps/website/screens/theme-generator/components/ColorCard.tsx new file mode 100644 index 0000000000..24224797e8 --- /dev/null +++ b/apps/website/screens/theme-generator/components/ColorCard.tsx @@ -0,0 +1,128 @@ +import { useCallback, useRef, useState } from "react"; +import { DxcContainer, DxcFlex, DxcPopover, DxcTextInput } from "@dxc-technology/halstack-react"; +import styled from "@emotion/styled"; +import { SketchPicker } from "react-color"; + +const ColorBox = styled.button<{ color: string }>` + min-width: 71px; + height: 71px; + border-radius: var(--border-radius-m); + background-color: ${(props) => props.color}; + cursor: pointer; + border: none; + padding: var(--spacing-padding-none); +`; + +interface ColorCardProps { + label: string; + helperText: string; + color: string; + onChange: (color: string) => void; +} + +export const ColorCard = ({ label, helperText, color, onChange }: ColorCardProps) => { + const [isOpen, setIsOpen] = useState(false); + const [inputValue, setInputValue] = useState(color); + const [error, setError] = useState(""); + const buttonRef = useRef(null); + + const handleChange = useCallback( + (newColor: { hex: string }) => { + setInputValue(newColor.hex); + onChange(newColor.hex); + }, + [onChange] + ); + + const handleInputChange = useCallback( + ({ value }: { value: string }) => { + setInputValue(value); + // Solo propagar si es un hexadecimal válido (el patrón lo valida el DxcTextInput) + const hexPattern = /^#[0-9A-Fa-f]{3}$|^#[0-9A-Fa-f]{6}$/; + if (hexPattern.test(value)) { + onChange(value); + setError(""); + } + }, + [onChange] + ); + + const onBlur = useCallback( + ({ value, error }: { value: string; error?: string }) => { + let normalizedValue = value; + if (value && !value.startsWith("#")) { + normalizedValue = "#" + value; + setInputValue(normalizedValue); + + const hexPattern = /^#[0-9A-Fa-f]{3}$|^#[0-9A-Fa-f]{6}$/; + if (hexPattern.test(normalizedValue)) { + onChange(normalizedValue); + setError(""); + return; + } + } + setError(error || ""); + }, + [onChange] + ); + + return ( + + + setIsOpen(false)} + popoverContent={ + + } + hasTip + side="bottom" + asChild + > + setIsOpen((prev) => !prev)} ref={buttonRef} color={color} /> + + + { + navigator.clipboard.writeText(color).catch(() => { + alert("Failed attempt to copy the hex value."); + }); + }, + title: "Copy the hex value", + }} + /> + + + + ); +}; diff --git a/apps/website/screens/theme-generator/components/PageHeading.tsx b/apps/website/screens/theme-generator/components/PageHeading.tsx new file mode 100644 index 0000000000..f6171a22af --- /dev/null +++ b/apps/website/screens/theme-generator/components/PageHeading.tsx @@ -0,0 +1,15 @@ +import { DxcFlex, DxcHeading, DxcParagraph, DxcContainer } from "@dxc-technology/halstack-react"; + +interface PageHeadingProps { + title: string; + subtitle: string; +} + +export const PageHeading = ({ title, subtitle }: PageHeadingProps) => ( + + + + {subtitle} + + +); diff --git a/apps/website/screens/utilities/theme-generator/ThemeGeneratorPage.tsx b/apps/website/screens/utilities/theme-generator/ThemeGeneratorPage.tsx deleted file mode 100644 index 66606ec62e..0000000000 --- a/apps/website/screens/utilities/theme-generator/ThemeGeneratorPage.tsx +++ /dev/null @@ -1,4 +0,0 @@ -const ThemeGeneratorPage = () => { - return <>; -}; -export default ThemeGeneratorPage; From 0ec0d3856abce43b92b2916f6985534233306903 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Mon, 23 Feb 2026 12:55:10 +0100 Subject: [PATCH 02/10] conditionate wrapper in app.tsx and fix padding to BottomButtons --- apps/website/pages/_app.tsx | 2 +- apps/website/screens/theme-generator/ThemeGeneratorPage.tsx | 1 - .../screens/theme-generator/components/BottomButtons.tsx | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx index 388290d1a0..fa1fab48a9 100644 --- a/apps/website/pages/_app.tsx +++ b/apps/website/pages/_app.tsx @@ -142,7 +142,7 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo > - {componentWithLayout} + {isThemeGenerator ? <>{componentWithLayout} : {componentWithLayout}} diff --git a/apps/website/screens/theme-generator/ThemeGeneratorPage.tsx b/apps/website/screens/theme-generator/ThemeGeneratorPage.tsx index 2086f43948..0c79cdb0be 100644 --- a/apps/website/screens/theme-generator/ThemeGeneratorPage.tsx +++ b/apps/website/screens/theme-generator/ThemeGeneratorPage.tsx @@ -38,7 +38,6 @@ const ThemeGeneratorPage = () => { return ( From b3f7c2c3d9146cec463da3a7420fd83fb4f81f50 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Tue, 24 Feb 2026 09:36:24 +0100 Subject: [PATCH 03/10] Change name to ThemeGeneratorConfigPage --- apps/website/pages/theme-generator/configuration/index.tsx | 2 +- .../{ThemeGeneratorPage.tsx => ThemeGeneratorConfigPage.tsx} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename apps/website/screens/theme-generator/{ThemeGeneratorPage.tsx => ThemeGeneratorConfigPage.tsx} (100%) diff --git a/apps/website/pages/theme-generator/configuration/index.tsx b/apps/website/pages/theme-generator/configuration/index.tsx index d5a0415ac1..25c20fe2a8 100644 --- a/apps/website/pages/theme-generator/configuration/index.tsx +++ b/apps/website/pages/theme-generator/configuration/index.tsx @@ -1,5 +1,5 @@ import Head from "next/head"; -import ThemeGeneratorPage from "screens/theme-generator/ThemeGeneratorPage"; +import ThemeGeneratorPage from "screens/theme-generator/ThemeGeneratorConfigPage"; const Index = () => { return ( diff --git a/apps/website/screens/theme-generator/ThemeGeneratorPage.tsx b/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx similarity index 100% rename from apps/website/screens/theme-generator/ThemeGeneratorPage.tsx rename to apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx From 38e4d73b42c667e9b7ffc54f0bb38fab47b272af Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Thu, 26 Feb 2026 11:14:35 +0100 Subject: [PATCH 04/10] Remove unnecesary files for this PR --- .../theme-generator/components/ColorCard.tsx | 128 ------------------ 1 file changed, 128 deletions(-) delete mode 100644 apps/website/screens/theme-generator/components/ColorCard.tsx diff --git a/apps/website/screens/theme-generator/components/ColorCard.tsx b/apps/website/screens/theme-generator/components/ColorCard.tsx deleted file mode 100644 index 24224797e8..0000000000 --- a/apps/website/screens/theme-generator/components/ColorCard.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import { useCallback, useRef, useState } from "react"; -import { DxcContainer, DxcFlex, DxcPopover, DxcTextInput } from "@dxc-technology/halstack-react"; -import styled from "@emotion/styled"; -import { SketchPicker } from "react-color"; - -const ColorBox = styled.button<{ color: string }>` - min-width: 71px; - height: 71px; - border-radius: var(--border-radius-m); - background-color: ${(props) => props.color}; - cursor: pointer; - border: none; - padding: var(--spacing-padding-none); -`; - -interface ColorCardProps { - label: string; - helperText: string; - color: string; - onChange: (color: string) => void; -} - -export const ColorCard = ({ label, helperText, color, onChange }: ColorCardProps) => { - const [isOpen, setIsOpen] = useState(false); - const [inputValue, setInputValue] = useState(color); - const [error, setError] = useState(""); - const buttonRef = useRef(null); - - const handleChange = useCallback( - (newColor: { hex: string }) => { - setInputValue(newColor.hex); - onChange(newColor.hex); - }, - [onChange] - ); - - const handleInputChange = useCallback( - ({ value }: { value: string }) => { - setInputValue(value); - // Solo propagar si es un hexadecimal válido (el patrón lo valida el DxcTextInput) - const hexPattern = /^#[0-9A-Fa-f]{3}$|^#[0-9A-Fa-f]{6}$/; - if (hexPattern.test(value)) { - onChange(value); - setError(""); - } - }, - [onChange] - ); - - const onBlur = useCallback( - ({ value, error }: { value: string; error?: string }) => { - let normalizedValue = value; - if (value && !value.startsWith("#")) { - normalizedValue = "#" + value; - setInputValue(normalizedValue); - - const hexPattern = /^#[0-9A-Fa-f]{3}$|^#[0-9A-Fa-f]{6}$/; - if (hexPattern.test(normalizedValue)) { - onChange(normalizedValue); - setError(""); - return; - } - } - setError(error || ""); - }, - [onChange] - ); - - return ( - - - setIsOpen(false)} - popoverContent={ - - } - hasTip - side="bottom" - asChild - > - setIsOpen((prev) => !prev)} ref={buttonRef} color={color} /> - - - { - navigator.clipboard.writeText(color).catch(() => { - alert("Failed attempt to copy the hex value."); - }); - }, - title: "Copy the hex value", - }} - /> - - - - ); -}; From 10b313c203832e5968e9ec8a6358c68e8a5db138 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Thu, 26 Feb 2026 13:13:46 +0100 Subject: [PATCH 05/10] change name to ThemeGeneratorConfigPage --- apps/website/pages/theme-generator/configuration/index.tsx | 4 ++-- .../screens/theme-generator/ThemeGeneratorConfigPage.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/website/pages/theme-generator/configuration/index.tsx b/apps/website/pages/theme-generator/configuration/index.tsx index 25c20fe2a8..9d37a727ac 100644 --- a/apps/website/pages/theme-generator/configuration/index.tsx +++ b/apps/website/pages/theme-generator/configuration/index.tsx @@ -1,5 +1,5 @@ import Head from "next/head"; -import ThemeGeneratorPage from "screens/theme-generator/ThemeGeneratorConfigPage"; +import ThemeGeneratorConfigPage from "screens/theme-generator/ThemeGeneratorConfigPage"; const Index = () => { return ( @@ -7,7 +7,7 @@ const Index = () => { Theme generator — Halstack Design System - + ); }; diff --git a/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx b/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx index 0c79cdb0be..15005b5786 100644 --- a/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx +++ b/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx @@ -10,7 +10,7 @@ const steps = [ { label: "Export theme", description: "Review and export" }, ]; -const ThemeGeneratorPage = () => { +const ThemeGeneratorConfigPage = () => { const [currentStep, setCurrentStep] = useState<0 | 1 | 2>(0); // Descomentar cuándo se implementen las funcionalidades de cada paso /** const [colors, setColors] = useState({ @@ -89,4 +89,4 @@ const ThemeGeneratorPage = () => { ); }; -export default ThemeGeneratorPage; +export default ThemeGeneratorConfigPage; From e97145fe91acf5e0c3a51bc926858a7ce563fe78 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Fri, 27 Feb 2026 09:01:43 +0100 Subject: [PATCH 06/10] Change Heading level --- apps/website/screens/theme-generator/components/PageHeading.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/screens/theme-generator/components/PageHeading.tsx b/apps/website/screens/theme-generator/components/PageHeading.tsx index f6171a22af..ef32cdf97b 100644 --- a/apps/website/screens/theme-generator/components/PageHeading.tsx +++ b/apps/website/screens/theme-generator/components/PageHeading.tsx @@ -8,7 +8,7 @@ interface PageHeadingProps { export const PageHeading = ({ title, subtitle }: PageHeadingProps) => ( - + {subtitle} From 5978aa02ff943e1215a84bc6c4c87bf7b13b76e7 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Fri, 27 Feb 2026 13:07:10 +0100 Subject: [PATCH 07/10] Update PageHeading to StepHeading and make it responsive --- .../ThemeGeneratorConfigPage.tsx | 4 ++-- .../theme-generator/components/PageHeading.tsx | 15 --------------- .../theme-generator/components/StepHeading.tsx | 17 +++++++++++++++++ 3 files changed, 19 insertions(+), 17 deletions(-) delete mode 100644 apps/website/screens/theme-generator/components/PageHeading.tsx create mode 100644 apps/website/screens/theme-generator/components/StepHeading.tsx diff --git a/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx b/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx index 15005b5786..dc8135e515 100644 --- a/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx +++ b/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; import { DxcContainer, DxcFlex, DxcWizard } from "@dxc-technology/halstack-react"; -import { PageHeading } from "./components/PageHeading"; +import { StepHeading } from "./components/StepHeading"; import { BottomButtons } from "./components/BottomButtons"; // import { FileData } from "../../../../packages/lib/src/file-input/types"; @@ -63,7 +63,7 @@ const ThemeGeneratorConfigPage = () => { margin={{ left: "auto", right: "auto" }} > - ( - - - - {subtitle} - - -); diff --git a/apps/website/screens/theme-generator/components/StepHeading.tsx b/apps/website/screens/theme-generator/components/StepHeading.tsx new file mode 100644 index 0000000000..5143f8a788 --- /dev/null +++ b/apps/website/screens/theme-generator/components/StepHeading.tsx @@ -0,0 +1,17 @@ +import { DxcFlex, DxcHeading, DxcContainer, DxcTypography } from "@dxc-technology/halstack-react"; + +interface PageHeadingProps { + title: string; + subtitle: string; +} + +export const StepHeading = ({ title, subtitle }: PageHeadingProps) => ( + + + + + {subtitle} + + + +); From 2fe52842f73f87388f8d677ab3489ede181fbaa7 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Fri, 27 Feb 2026 14:55:04 +0100 Subject: [PATCH 08/10] Fix based on comments --- .../ThemeGeneratorConfigPage.tsx | 48 +++++++++---------- .../components/BottomButtons.tsx | 39 +++++++-------- .../components/StepHeading.tsx | 4 +- 3 files changed, 44 insertions(+), 47 deletions(-) diff --git a/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx b/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx index dc8135e515..452410780b 100644 --- a/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx +++ b/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx @@ -1,18 +1,35 @@ import { useState } from "react"; import { DxcContainer, DxcFlex, DxcWizard } from "@dxc-technology/halstack-react"; -import { StepHeading } from "./components/StepHeading"; -import { BottomButtons } from "./components/BottomButtons"; +import StepHeading from "./components/StepHeading"; +import BottomButtons from "./components/BottomButtons"; // import { FileData } from "../../../../packages/lib/src/file-input/types"; +export type Step = 0 | 1 | 2; + const steps = [ { label: "Configure theme", description: "Branding details" }, { label: "Preview", description: "Components and templates" }, { label: "Export theme", description: "Review and export" }, ]; +const stepHeadings = [ + { + title: "Add your theme specifics", + subtitle: "Review your uploaded theme or define your brand colors and logos to preview them in real life. ", + }, + { + title: "Preview how your theme applies", + subtitle: "Choose components or examples from Halstack catalogue to see how your theme behaves.", + }, + { + title: "Review and export your theme", + subtitle: "Check your colors and branding assets before exporting your Halstack theme.", + }, +]; + const ThemeGeneratorConfigPage = () => { - const [currentStep, setCurrentStep] = useState<0 | 1 | 2>(0); - // Descomentar cuándo se implementen las funcionalidades de cada paso + const [currentStep, setCurrentStep] = useState(0); + // Uncomment when implementing the Branding details screen /** const [colors, setColors] = useState({ primary: "#5f249f", secondary: "#00b4d8", @@ -31,7 +48,7 @@ const ThemeGeneratorConfigPage = () => { }); */ - const handleChangeStep = (step: 0 | 1 | 2) => { + const handleChangeStep = (step: Step) => { setCurrentStep(step); }; @@ -48,9 +65,7 @@ const ThemeGeneratorConfigPage = () => { steps={steps} currentStep={currentStep} onStepClick={(i) => { - if (i === 0) handleChangeStep(0); - else if (i === 1) handleChangeStep(1); - else if (i === 2) handleChangeStep(2); + handleChangeStep(i as Step); }} /> @@ -63,22 +78,7 @@ const ThemeGeneratorConfigPage = () => { margin={{ left: "auto", right: "auto" }} > - + {currentStep === 0 ? <> : currentStep === 1 ? <> : <>} diff --git a/apps/website/screens/theme-generator/components/BottomButtons.tsx b/apps/website/screens/theme-generator/components/BottomButtons.tsx index aa80f25786..35889b10eb 100644 --- a/apps/website/screens/theme-generator/components/BottomButtons.tsx +++ b/apps/website/screens/theme-generator/components/BottomButtons.tsx @@ -1,24 +1,18 @@ import { DxcButton, DxcContainer, DxcFlex } from "@dxc-technology/halstack-react"; +import { Step } from "../ThemeGeneratorConfigPage"; + +const MIN_STEP: Step = 0; +const MAX_STEP: Step = 2; interface BottomButtonsProps { - currentStep: 0 | 1 | 2; - onChangeStep: (step: 0 | 1 | 2) => void; + currentStep: Step; + onChangeStep: (step: Step) => void; } -export const BottomButtons = ({ currentStep, onChangeStep }: BottomButtonsProps) => { - const handlePrevious = () => { - if (currentStep === 1) { - onChangeStep(0); - } else if (currentStep === 2) { - onChangeStep(1); - } - }; - - const handleNext = () => { - if (currentStep === 0) { - onChangeStep(1); - } else if (currentStep === 1) { - onChangeStep(2); +const BottomButtons = ({ currentStep, onChangeStep }: BottomButtonsProps) => { + const goToStep = (step: number) => { + if (step >= MIN_STEP && step <= MAX_STEP) { + onChangeStep(step as Step); } }; @@ -33,23 +27,22 @@ export const BottomButtons = ({ currentStep, onChangeStep }: BottomButtonsProps) goToStep(currentStep - 1)} disabled={currentStep === 0} size={{ height: "medium", width: "fitContent" }} /> {currentStep === 2 ? ( console.log("download theme")} size={{ height: "medium", width: "fitContent" }} /> ) : ( goToStep(currentStep + 1)} size={{ height: "medium", width: "fitContent" }} /> )} @@ -57,3 +50,5 @@ export const BottomButtons = ({ currentStep, onChangeStep }: BottomButtonsProps) ); }; + +export default BottomButtons; diff --git a/apps/website/screens/theme-generator/components/StepHeading.tsx b/apps/website/screens/theme-generator/components/StepHeading.tsx index 5143f8a788..48b1db8fbf 100644 --- a/apps/website/screens/theme-generator/components/StepHeading.tsx +++ b/apps/website/screens/theme-generator/components/StepHeading.tsx @@ -5,7 +5,7 @@ interface PageHeadingProps { subtitle: string; } -export const StepHeading = ({ title, subtitle }: PageHeadingProps) => ( +const StepHeading = ({ title, subtitle }: PageHeadingProps) => ( @@ -15,3 +15,5 @@ export const StepHeading = ({ title, subtitle }: PageHeadingProps) => ( ); + +export default StepHeading; From 70020afad342b2e0cc7fec3ef08083f7072bfe9c Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Mon, 2 Mar 2026 10:52:59 +0100 Subject: [PATCH 09/10] Change based on comments. Remove icon to "Export theme" button and merge steps and stepsHeading. --- .../ThemeGeneratorConfigPage.tsx | 23 +++++++++++-------- .../components/BottomButtons.tsx | 2 +- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx b/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx index 452410780b..dc5674aaab 100644 --- a/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx +++ b/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx @@ -7,25 +7,25 @@ import BottomButtons from "./components/BottomButtons"; export type Step = 0 | 1 | 2; const steps = [ - { label: "Configure theme", description: "Branding details" }, - { label: "Preview", description: "Components and templates" }, - { label: "Export theme", description: "Review and export" }, -]; - -const stepHeadings = [ { + label: "Configure theme", + description: "Branding details", title: "Add your theme specifics", subtitle: "Review your uploaded theme or define your brand colors and logos to preview them in real life. ", }, { + label: "Preview", + description: "Components and templates", title: "Preview how your theme applies", subtitle: "Choose components or examples from Halstack catalogue to see how your theme behaves.", }, { + label: "Export theme", + description: "Review and export", title: "Review and export your theme", subtitle: "Check your colors and branding assets before exporting your Halstack theme.", }, -]; +] as const; const ThemeGeneratorConfigPage = () => { const [currentStep, setCurrentStep] = useState(0); @@ -52,6 +52,11 @@ const ThemeGeneratorConfigPage = () => { setCurrentStep(step); }; + const wizardSteps = steps.map(({ label, description }) => ({ + label, + description, + })); + return ( { { handleChangeStep(i as Step); @@ -78,7 +83,7 @@ const ThemeGeneratorConfigPage = () => { margin={{ left: "auto", right: "auto" }} > - + {currentStep === 0 ? <> : currentStep === 1 ? <> : <>} diff --git a/apps/website/screens/theme-generator/components/BottomButtons.tsx b/apps/website/screens/theme-generator/components/BottomButtons.tsx index 35889b10eb..571691c952 100644 --- a/apps/website/screens/theme-generator/components/BottomButtons.tsx +++ b/apps/website/screens/theme-generator/components/BottomButtons.tsx @@ -35,7 +35,7 @@ const BottomButtons = ({ currentStep, onChangeStep }: BottomButtonsProps) => { {currentStep === 2 ? ( console.log("download theme")} size={{ height: "medium", width: "fitContent" }} /> From 80bef741790f7e5559a77f0b12c41dc3c2fcd63c Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Mon, 2 Mar 2026 10:56:50 +0100 Subject: [PATCH 10/10] Move wizardSteps outside of the component --- .../theme-generator/ThemeGeneratorConfigPage.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx b/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx index dc5674aaab..e6191805da 100644 --- a/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx +++ b/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx @@ -27,6 +27,11 @@ const steps = [ }, ] as const; +const wizardSteps = steps.map(({ label, description }) => ({ + label, + description, +})); + const ThemeGeneratorConfigPage = () => { const [currentStep, setCurrentStep] = useState(0); // Uncomment when implementing the Branding details screen @@ -52,11 +57,6 @@ const ThemeGeneratorConfigPage = () => { setCurrentStep(step); }; - const wizardSteps = steps.map(({ label, description }) => ({ - label, - description, - })); - return (