From adb64f2db1b15de20b019be7f4af9c2a5c09f2b8 Mon Sep 17 00:00:00 2001 From: Andre H Date: Mon, 4 Mar 2024 10:14:21 +0800 Subject: [PATCH 1/9] =?UTF-8?q?=F0=9F=94=A7=20chore:=20remove=20outer=20pa?= =?UTF-8?q?dding=20on=20the=20icon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shared/CustomIcon/CheckRoundFilledIcon.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/frontend/src/components/shared/CustomIcon/CheckRoundFilledIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/CheckRoundFilledIcon.tsx index 145e68e1..7811a1ec 100644 --- a/packages/frontend/src/components/shared/CustomIcon/CheckRoundFilledIcon.tsx +++ b/packages/frontend/src/components/shared/CustomIcon/CheckRoundFilledIcon.tsx @@ -3,17 +3,11 @@ import { CustomIcon, CustomIconProps } from './CustomIcon'; export const CheckRoundFilledIcon = (props: CustomIconProps) => { return ( - + From 6c42a2297214a3288465cf2bad4c8bdff733f4a7 Mon Sep 17 00:00:00 2001 From: Andre H Date: Mon, 4 Mar 2024 10:38:12 +0800 Subject: [PATCH 2/9] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20implement=20st?= =?UTF-8?q?eps/=20timeline?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shared/Steps/Step/Step.theme.ts | 43 +++++++++++++ .../src/components/shared/Steps/Step/Step.tsx | 60 +++++++++++++++++++ .../src/components/shared/Steps/Step/index.ts | 2 + .../components/shared/Steps/Steps.theme.ts | 18 ++++++ .../src/components/shared/Steps/Steps.tsx | 42 +++++++++++++ .../src/components/shared/Steps/index.ts | 2 + 6 files changed, 167 insertions(+) create mode 100644 packages/frontend/src/components/shared/Steps/Step/Step.theme.ts create mode 100644 packages/frontend/src/components/shared/Steps/Step/Step.tsx create mode 100644 packages/frontend/src/components/shared/Steps/Step/index.ts create mode 100644 packages/frontend/src/components/shared/Steps/Steps.theme.ts create mode 100644 packages/frontend/src/components/shared/Steps/Steps.tsx create mode 100644 packages/frontend/src/components/shared/Steps/index.ts diff --git a/packages/frontend/src/components/shared/Steps/Step/Step.theme.ts b/packages/frontend/src/components/shared/Steps/Step/Step.theme.ts new file mode 100644 index 00000000..82531ace --- /dev/null +++ b/packages/frontend/src/components/shared/Steps/Step/Step.theme.ts @@ -0,0 +1,43 @@ +import { VariantProps, tv } from 'tailwind-variants'; + +export const stepTheme = tv({ + slots: { + wrapper: ['relative', 'px-1.5', 'py-1.5', 'flex', 'gap-2', 'items-center'], + step: [ + 'bg-base-bg-emphasized', + 'rounded-full', + 'w-7', + 'h-7', + 'flex', + 'items-center', + 'justify-center', + 'text-elements-mid-em', + 'shadow-button', + 'shrink-0', + ], + label: ['text-sm', 'font-sans', 'text-elements-mid-em'], + connector: ['bg-border-interactive-hovered'], + }, + variants: { + orientation: { + vertical: { connector: ['w-px', 'h-3', 'ml-5'] }, + horizontal: { connector: ['h-px', 'w-full'] }, + }, + active: { + true: { + step: ['bg-controls-secondary-hovered', 'text-elements-on-secondary'], + label: ['text-elements-high-em'], + }, + }, + completed: { + true: { + step: ['text-controls-primary'], + }, + }, + }, + defaultVariants: { + orientation: 'vertical', + }, +}); + +export type StepTheme = VariantProps; diff --git a/packages/frontend/src/components/shared/Steps/Step/Step.tsx b/packages/frontend/src/components/shared/Steps/Step/Step.tsx new file mode 100644 index 00000000..001ed6b6 --- /dev/null +++ b/packages/frontend/src/components/shared/Steps/Step/Step.tsx @@ -0,0 +1,60 @@ +import React, { useCallback, ComponentPropsWithoutRef } from 'react'; +import { stepTheme, StepTheme } from './Step.theme'; +import { CheckRoundFilledIcon } from 'components/shared/CustomIcon'; + +export interface StepProps extends ComponentPropsWithoutRef<'li'>, StepTheme { + /** + * The label for the step + */ + label: string; + /** + * The index of the step + */ + index: number; + /** + * The total number of steps + */ + currentIndex: number; +} + +export const Step = ({ + label, + index, + currentIndex, + orientation, + ...props +}: StepProps) => { + const theme = stepTheme(); + + const active = currentIndex === index; + const completed = currentIndex > index; + + const renderConnector = useCallback( + (index: number) => { + if (index === 0) { + return null; + } + + return
; + }, + [theme], + ); + + return ( + <> + {renderConnector(index)} +
  • + { +
    + {completed ? ( + + ) : ( + index + 1 + )} +
    + } +

    {label}

    +
    • + + ); +}; diff --git a/packages/frontend/src/components/shared/Steps/Step/index.ts b/packages/frontend/src/components/shared/Steps/Step/index.ts new file mode 100644 index 00000000..84d83fcb --- /dev/null +++ b/packages/frontend/src/components/shared/Steps/Step/index.ts @@ -0,0 +1,2 @@ +export * from './Step'; +export * from './Step.theme'; diff --git a/packages/frontend/src/components/shared/Steps/Steps.theme.ts b/packages/frontend/src/components/shared/Steps/Steps.theme.ts new file mode 100644 index 00000000..a5d62e99 --- /dev/null +++ b/packages/frontend/src/components/shared/Steps/Steps.theme.ts @@ -0,0 +1,18 @@ +import { VariantProps, tv } from 'tailwind-variants'; + +export const stepsTheme = tv({ + slots: { + root: [], + }, + variants: { + orientation: { + vertical: { root: ['flex', 'flex-col'] }, + horizontal: { root: ['flex', 'items-center'] }, + }, + }, + defaultVariants: { + orientation: 'vertical', + }, +}); + +export type StepsTheme = VariantProps; diff --git a/packages/frontend/src/components/shared/Steps/Steps.tsx b/packages/frontend/src/components/shared/Steps/Steps.tsx new file mode 100644 index 00000000..51d4eb2d --- /dev/null +++ b/packages/frontend/src/components/shared/Steps/Steps.tsx @@ -0,0 +1,42 @@ +import React, { Fragment, ComponentPropsWithoutRef } from 'react'; +import { stepsTheme, StepsTheme } from './Steps.theme'; +import { Step, StepProps, StepTheme } from './Step'; + +interface StepsProps + extends ComponentPropsWithoutRef<'ul'>, + StepsTheme, + Pick { + /** + * The index of the current step + */ + currentIndex: number; + /** + * The steps to render + */ + steps: Pick[]; +} + +export const Steps = ({ + currentIndex, + steps = [], + className, + orientation, + ...props +}: StepsProps) => { + const theme = stepsTheme(); + + return ( +
      + {steps.map((step, i) => ( + + + + ))} +
    + ); +}; diff --git a/packages/frontend/src/components/shared/Steps/index.ts b/packages/frontend/src/components/shared/Steps/index.ts new file mode 100644 index 00000000..27d56a3b --- /dev/null +++ b/packages/frontend/src/components/shared/Steps/index.ts @@ -0,0 +1,2 @@ +export * from './Steps'; +export * from './Steps.theme'; From 8f0c39022dde1874a423b211c655e1952d108291 Mon Sep 17 00:00:00 2001 From: Andre H Date: Mon, 4 Mar 2024 10:40:06 +0800 Subject: [PATCH 3/9] =?UTF-8?q?=F0=9F=94=A7=20chore:=20add=20render=20comp?= =?UTF-8?q?onent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../frontend/src/pages/components/index.tsx | 12 ++++++ .../src/pages/components/renders/steps.tsx | 41 +++++++++++++++++++ 2 files changed, 53 insertions(+) create mode 100644 packages/frontend/src/pages/components/renders/steps.tsx diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx index aab2d652..077434d5 100644 --- a/packages/frontend/src/pages/components/index.tsx +++ b/packages/frontend/src/pages/components/index.tsx @@ -26,6 +26,7 @@ import { import { renderInputs } from './renders/input'; import { RADIO_OPTIONS } from './renders/radio'; import { SEGMENTED_CONTROLS_OPTIONS } from './renders/segmentedControls'; +import { renderHorizontalSteps, renderVerticalSteps } from './renders/steps'; import { renderTabWithBadges, renderTabs, @@ -56,6 +57,17 @@ const Page: React.FC = () => {
    + {/* Steps */} +
    +
    +

    Steps

    +
    + {renderVerticalSteps()} + {renderHorizontalSteps()} +
    +
    +
    + {/* Tag */}
    diff --git a/packages/frontend/src/pages/components/renders/steps.tsx b/packages/frontend/src/pages/components/renders/steps.tsx new file mode 100644 index 00000000..2d3f3da5 --- /dev/null +++ b/packages/frontend/src/pages/components/renders/steps.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { Steps } from 'components/shared/Steps'; + +export const renderVerticalSteps = () => { + return ( + + ); +}; + +export const renderHorizontalSteps = () => { + return ( + + ); +}; From f5296e9b8d00e586fa341ced47481fd061a412a1 Mon Sep 17 00:00:00 2001 From: Andre H Date: Mon, 4 Mar 2024 11:52:31 +0800 Subject: [PATCH 4/9] =?UTF-8?q?=F0=9F=94=A7=20chore:=20first=20index=20to?= =?UTF-8?q?=20be=20'1'=20for=20`Steps`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/components/shared/Steps/Step/Step.tsx | 4 ++-- packages/frontend/src/components/shared/Steps/Steps.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/frontend/src/components/shared/Steps/Step/Step.tsx b/packages/frontend/src/components/shared/Steps/Step/Step.tsx index 001ed6b6..06c49368 100644 --- a/packages/frontend/src/components/shared/Steps/Step/Step.tsx +++ b/packages/frontend/src/components/shared/Steps/Step/Step.tsx @@ -31,7 +31,7 @@ export const Step = ({ const renderConnector = useCallback( (index: number) => { - if (index === 0) { + if (index === 1) { return null; } @@ -49,7 +49,7 @@ export const Step = ({ {completed ? ( ) : ( - index + 1 + index )}
    } diff --git a/packages/frontend/src/components/shared/Steps/Steps.tsx b/packages/frontend/src/components/shared/Steps/Steps.tsx index 51d4eb2d..cac61ff9 100644 --- a/packages/frontend/src/components/shared/Steps/Steps.tsx +++ b/packages/frontend/src/components/shared/Steps/Steps.tsx @@ -33,7 +33,7 @@ export const Steps = ({ {...step} orientation={orientation} currentIndex={currentIndex} - index={i} + index={i + 1} /> ))} From 460f8a80b8f12e0f91d0e043a0bf3b5dfb77c6d9 Mon Sep 17 00:00:00 2001 From: Andre H Date: Mon, 4 Mar 2024 11:52:55 +0800 Subject: [PATCH 5/9] =?UTF-8?q?=F0=9F=94=A7=20chore:=20replace=20`Stepper`?= =?UTF-8?q?=20with=20`Steps`=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../frontend/src/pages/org-slug/projects/create/Template.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx index d819a6f1..0633540c 100644 --- a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx +++ b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx @@ -8,8 +8,8 @@ import { import { Avatar } from '@material-tailwind/react'; -import Stepper from '../../../../components/Stepper'; import templates from '../../../../assets/templates'; +import { Steps } from 'components/shared/Steps'; // TODO: Set dynamic route for template and load details from DB const CreateWithTemplate = () => { @@ -62,7 +62,7 @@ const CreateWithTemplate = () => {
    - +
    From add2559860c34a7bffd1ffe7be0190cd693153a2 Mon Sep 17 00:00:00 2001 From: Andre H Date: Mon, 4 Mar 2024 17:41:33 +0800 Subject: [PATCH 6/9] =?UTF-8?q?=F0=9F=94=A7=20chore:=20adjust=20other=20Ch?= =?UTF-8?q?eckRoundFilledIcon=20user?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../frontend/src/components/projects/create/DeployStep.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/frontend/src/components/projects/create/DeployStep.tsx b/packages/frontend/src/components/projects/create/DeployStep.tsx index 71283ddb..de78f789 100644 --- a/packages/frontend/src/components/projects/create/DeployStep.tsx +++ b/packages/frontend/src/components/projects/create/DeployStep.tsx @@ -101,7 +101,12 @@ const DeployStep = ({ )} {status === DeployStatus.COMPLETE && (
    - +
    + +
    {' '}
    )} From c1da92bc991b085576936c0a7056e076a4bc4d51 Mon Sep 17 00:00:00 2001 From: Andre H Date: Mon, 4 Mar 2024 17:50:04 +0800 Subject: [PATCH 7/9] =?UTF-8?q?=F0=9F=94=A7=20chore:=20adjust=20design=20t?= =?UTF-8?q?o=20figma?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/shared/Steps/Step/Step.theme.ts | 10 +++++++--- .../src/components/shared/Steps/Step/Step.tsx | 13 ++++++++++--- .../src/components/shared/Steps/Steps.theme.ts | 2 +- 3 files changed, 18 insertions(+), 7 deletions(-) diff --git a/packages/frontend/src/components/shared/Steps/Step/Step.theme.ts b/packages/frontend/src/components/shared/Steps/Step/Step.theme.ts index 82531ace..30d190f8 100644 --- a/packages/frontend/src/components/shared/Steps/Step/Step.theme.ts +++ b/packages/frontend/src/components/shared/Steps/Step/Step.theme.ts @@ -16,12 +16,16 @@ export const stepTheme = tv({ 'shrink-0', ], label: ['text-sm', 'font-sans', 'text-elements-mid-em'], - connector: ['bg-border-interactive-hovered'], + connector: [], }, variants: { orientation: { - vertical: { connector: ['w-px', 'h-3', 'ml-5'] }, - horizontal: { connector: ['h-px', 'w-full'] }, + vertical: { + connector: ['bg-border-interactive-hovered', 'w-px', 'h-3', 'ml-5'], + }, + horizontal: { + connector: ['text-border-interactive-hovered', 'h-3', 'w-3'], + }, }, active: { true: { diff --git a/packages/frontend/src/components/shared/Steps/Step/Step.tsx b/packages/frontend/src/components/shared/Steps/Step/Step.tsx index 06c49368..9d731139 100644 --- a/packages/frontend/src/components/shared/Steps/Step/Step.tsx +++ b/packages/frontend/src/components/shared/Steps/Step/Step.tsx @@ -1,6 +1,9 @@ import React, { useCallback, ComponentPropsWithoutRef } from 'react'; import { stepTheme, StepTheme } from './Step.theme'; -import { CheckRoundFilledIcon } from 'components/shared/CustomIcon'; +import { + CheckRoundFilledIcon, + ChevronRight, +} from 'components/shared/CustomIcon'; export interface StepProps extends ComponentPropsWithoutRef<'li'>, StepTheme { /** @@ -35,9 +38,13 @@ export const Step = ({ return null; } - return
    ; + return ( +
    + {orientation === 'horizontal' && } +
    + ); }, - [theme], + [orientation, theme], ); return ( diff --git a/packages/frontend/src/components/shared/Steps/Steps.theme.ts b/packages/frontend/src/components/shared/Steps/Steps.theme.ts index a5d62e99..4c3b2acb 100644 --- a/packages/frontend/src/components/shared/Steps/Steps.theme.ts +++ b/packages/frontend/src/components/shared/Steps/Steps.theme.ts @@ -7,7 +7,7 @@ export const stepsTheme = tv({ variants: { orientation: { vertical: { root: ['flex', 'flex-col'] }, - horizontal: { root: ['flex', 'items-center'] }, + horizontal: { root: ['flex', 'items-center', 'gap-1'] }, }, }, defaultVariants: { From 0a2686d5ec94db3f7fe96351a08ecab0f69a47d7 Mon Sep 17 00:00:00 2001 From: Andre H Date: Mon, 4 Mar 2024 17:50:23 +0800 Subject: [PATCH 8/9] =?UTF-8?q?=F0=9F=94=A7=20chore:=20add=20divider=20to?= =?UTF-8?q?=20render=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/pages/components/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx index 077434d5..feee4595 100644 --- a/packages/frontend/src/pages/components/index.tsx +++ b/packages/frontend/src/pages/components/index.tsx @@ -68,6 +68,8 @@ const Page: React.FC = () => {
    +
    + {/* Tag */}
    From e8ae4177725d86156a15745966b765809ee32981 Mon Sep 17 00:00:00 2001 From: Andre H Date: Tue, 5 Mar 2024 09:39:00 +0800 Subject: [PATCH 9/9] =?UTF-8?q?=F0=9F=94=A7=20chore:=20whitespace=20nowrap?= =?UTF-8?q?=20to=20prevent=20text=20warping=20on=20steps?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/shared/Steps/Step/Step.theme.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/frontend/src/components/shared/Steps/Step/Step.theme.ts b/packages/frontend/src/components/shared/Steps/Step/Step.theme.ts index 30d190f8..8e2b7a53 100644 --- a/packages/frontend/src/components/shared/Steps/Step/Step.theme.ts +++ b/packages/frontend/src/components/shared/Steps/Step/Step.theme.ts @@ -15,7 +15,12 @@ export const stepTheme = tv({ 'shadow-button', 'shrink-0', ], - label: ['text-sm', 'font-sans', 'text-elements-mid-em'], + label: [ + 'text-sm', + 'font-sans', + 'text-elements-mid-em', + 'whitespace-nowrap', + ], connector: [], }, variants: {