From 791de20b8b398bb2374d912b1279a6cc0fb27bdf Mon Sep 17 00:00:00 2001 From: jgresham Date: Wed, 28 Sep 2022 11:51:12 -0700 Subject: [PATCH] feat: AddNodeStepper ui working. fix stories container component --- .../Generics/redesign/Button/button.css.ts | 2 +- .../Generics/redesign/RedesignContainer.tsx | 17 ++- .../Generics/redesign/Stepper/Stepper.tsx | 22 +--- .../Generics/redesign/Stepper/stepper.css.ts | 25 +--- src/renderer/Generics/redesign/theme.css.ts | 4 +- .../AddNodeStepper/AddNodeStepper.tsx | 124 ++++++++---------- .../AddNodeStepper/addNodeStepper.css.ts | 11 +- .../DockerInstallation/DockerInstallation.tsx | 2 +- .../NodeRequirements/NodeRequirements.tsx | 13 +- .../Presentational/AddNodeStepper.stories.tsx | 2 +- .../NodeRequirements.stories.tsx | 4 + 11 files changed, 106 insertions(+), 120 deletions(-) diff --git a/src/renderer/Generics/redesign/Button/button.css.ts b/src/renderer/Generics/redesign/Button/button.css.ts index ef3a7042e..e69629e8c 100644 --- a/src/renderer/Generics/redesign/Button/button.css.ts +++ b/src/renderer/Generics/redesign/Button/button.css.ts @@ -45,7 +45,7 @@ export const primaryButton = style([ export const secondaryButton = style([ { color: vars.color.font, - background: vars.color.background96, + background: vars.components.secondaryButtonBackground, boxShadow: vars.components.buttonBoxShadow, selectors: { '&:hover:enabled': { diff --git a/src/renderer/Generics/redesign/RedesignContainer.tsx b/src/renderer/Generics/redesign/RedesignContainer.tsx index 8eda344b3..80c962284 100644 --- a/src/renderer/Generics/redesign/RedesignContainer.tsx +++ b/src/renderer/Generics/redesign/RedesignContainer.tsx @@ -5,9 +5,10 @@ const RedesignContainerStoryBook: React.FC = ({ children }) => { const [isDarkTheme, setIsDarkTheme] = useState(false); return ( -
+

Toggle dark mode

-
-
+
+
+
+
+
); diff --git a/src/renderer/Generics/redesign/Stepper/stepper.css.ts b/src/renderer/Generics/redesign/Stepper/stepper.css.ts index 88b361af9..8506d8cdb 100644 --- a/src/renderer/Generics/redesign/Stepper/stepper.css.ts +++ b/src/renderer/Generics/redesign/Stepper/stepper.css.ts @@ -3,6 +3,7 @@ import { vars } from '../theme.css'; export const bottomBar = style({ height: 60, + width: '100%', borderTop: '1px solid', borderColor: vars.color.font10, display: 'flex', @@ -10,35 +11,11 @@ export const bottomBar = style({ }); export const previousButton = style({ - // boxSizing: 'border-box', - // display: 'flex', - // flexDirection: 'row', - // justifyContent: 'center', - // alignItems: 'center', - // padding: '8px 12px', - // gap: '10px', - // width: '78px', - // height: '32px', marginLeft: '14px', marginTop: '14px', }); export const nextButton = style({ - // boxSizing: 'border-box', - // display: 'flex', - // flexDirection: 'row', - // justifyContent: 'center', - // alignItems: 'center', - // padding: '8px 12px', - // gap: '10px', - // width: '78px', - // height: '32px', marginRight: '14px', marginTop: '14px', }); - -export const titleFont = style({ - fontWeight: 600, - fontSize: 15, - lineHeight: '20px', -}); diff --git a/src/renderer/Generics/redesign/theme.css.ts b/src/renderer/Generics/redesign/theme.css.ts index 4ab013406..90c365232 100644 --- a/src/renderer/Generics/redesign/theme.css.ts +++ b/src/renderer/Generics/redesign/theme.css.ts @@ -19,7 +19,7 @@ export const [lightTheme, vars] = createTheme({ font50: 'rgba(0, 0, 2, 0.50)', font70: 'rgba(0, 0, 2, 0.70)', fontDisabled: common.color.black25, - background: 'rgba(255, 255, 255, 1)', + background: common.color.white, background96: 'rgba(0, 0, 2, 0.04)', background92: 'rgba(0, 0, 2, 0.08)', backgroundActiveGradient: @@ -37,6 +37,7 @@ export const [lightTheme, vars] = createTheme({ buttonBoxShadow: '0px 1px 2px rgba(0, 0, 0, 0.08)', selectCardBackground: 'rgba(115, 81, 235, 0.08)', selectCardBoxShadow: 'inset 0px 0px 0px 4px rgba(255, 255, 255, 0.08)', + secondaryButtonBackground: common.color.white, }, }); @@ -66,5 +67,6 @@ export const darkTheme = createTheme(vars, { buttonBoxShadow: '0px 1px 2px rgba(0, 0, 0, 0.24)', selectCardBackground: 'rgba(130, 103, 239, 0.08)', selectCardBoxShadow: 'none', + secondaryButtonBackground: common.color.white4, }, }); diff --git a/src/renderer/Presentational/AddNodeStepper/AddNodeStepper.tsx b/src/renderer/Presentational/AddNodeStepper/AddNodeStepper.tsx index 2824aa268..2838db3db 100644 --- a/src/renderer/Presentational/AddNodeStepper/AddNodeStepper.tsx +++ b/src/renderer/Presentational/AddNodeStepper/AddNodeStepper.tsx @@ -1,86 +1,72 @@ +// This component could be made into a Generic "FullScreenStepper" component +// Just make sure to always render each child so that children component state isn't cleard import { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { - container, - descriptionFont, - sectionFont, - titleFont, -} from './addNodeStepper.css'; -import ExternalLink from '../../Generics/redesign/Link/ExternalLink'; -import SpecialSelect from '../../Generics/redesign/SpecialSelect/SpecialSelect'; -import electron from '../../electronGlobal'; -import Button from '../../Generics/redesign/Button/Button'; -import Input from '../../Generics/redesign/Input/Input'; -import DropdownLink from '../../Generics/redesign/Link/DropdownLink'; -import Select from '../../Generics/redesign/Select/Select'; +import { componentContainer, container } from './addNodeStepper.css'; +import Stepper from '../../Generics/redesign/Stepper/Stepper'; +import AddEthereumNode from '../AddEthereumNode/AddEthereumNode'; +import DockerInstallation from '../DockerInstallation/DockerInstallation'; +import NodeRequirements from '../NodeRequirements/NodeRequirements'; export interface AddNodeStepperProps { - /** - * Listen to node config changes - */ - onChange: (newValue: string) => void; + onChange: (newValue: 'done' | 'cancel') => void; } +const TOTAL_STEPS = 3; + const AddNodeStepper = ({ onChange }: AddNodeStepperProps) => { const { t } = useTranslation(); - const [sIsOptionsOpen, setIsOptionsOpen] = useState(); + const [sStep, setStep] = useState(0); + + const onChangeAddEthereumNode = (newValue: string) => { + console.log('onChangeAddEthereumNode newValue ', newValue); + }; + + const onStep = (newValue: string) => { + console.log('onChangeAddEthereumNode newValue ', newValue); + if (newValue === 'next') { + // = sign because sStep index starts at 0 + if (sStep + 1 >= TOTAL_STEPS) { + // done + onChange('done'); + } else { + setStep(sStep + 1); + } + } else if (newValue === 'previous') { + if (sStep - 1 < 0) { + // cancelled + onChange('cancel'); + } else { + setStep(sStep - 1); + } + } + }; return (
-
{t('EthereumNode')}
-
- <>{t('AddNodeStepperDescription')} -
- -

Recommended execution client

- console.log('val', newEc)} /> -

Recommended consensus client

- console.log('val', newcc)} /> -

Data location

- setIsOptionsOpen(!sIsOptionsOpen)} - isDown={!sIsOptionsOpen} - /> - {sIsOptionsOpen && ( -
- Network{' '} -
- + + {/* Step 1 */} +
+
-
+ +
+
); diff --git a/src/renderer/Presentational/AddNodeStepper/addNodeStepper.css.ts b/src/renderer/Presentational/AddNodeStepper/addNodeStepper.css.ts index 8b9c2aefc..765c65571 100644 --- a/src/renderer/Presentational/AddNodeStepper/addNodeStepper.css.ts +++ b/src/renderer/Presentational/AddNodeStepper/addNodeStepper.css.ts @@ -2,10 +2,17 @@ import { style } from '@vanilla-extract/css'; import { vars } from '../../Generics/redesign/theme.css'; export const container = style({ + height: '100%', + width: '100%', display: 'flex', flexDirection: 'column', - alignItems: 'flex-start', - gap: 16, +}); + +export const componentContainer = style({ + width: '100%', + flexGrow: 1, + overflow: 'auto', + boxSizing: 'border-box', }); export const titleFont = style({ diff --git a/src/renderer/Presentational/DockerInstallation/DockerInstallation.tsx b/src/renderer/Presentational/DockerInstallation/DockerInstallation.tsx index a9d56a1b3..f8fa20044 100644 --- a/src/renderer/Presentational/DockerInstallation/DockerInstallation.tsx +++ b/src/renderer/Presentational/DockerInstallation/DockerInstallation.tsx @@ -9,7 +9,7 @@ import { } from './dockerInstallation.css'; import ExternalLink from '../../Generics/redesign/Link/ExternalLink'; import electron from '../../electronGlobal'; -import { Button } from '../../Generics/redesign/Button/Button'; +import Button from '../../Generics/redesign/Button/Button'; import ProgressBar from '../../Generics/redesign/ProgressBar/ProgressBar'; export interface DockerInstallationProps { diff --git a/src/renderer/Presentational/NodeRequirements/NodeRequirements.tsx b/src/renderer/Presentational/NodeRequirements/NodeRequirements.tsx index 7bc9c2c5d..79bc989cd 100644 --- a/src/renderer/Presentational/NodeRequirements/NodeRequirements.tsx +++ b/src/renderer/Presentational/NodeRequirements/NodeRequirements.tsx @@ -14,11 +14,11 @@ export interface NodeRequirementsProps { /** * Node requirements */ - nodeRequirements: SystemRequirements; + nodeRequirements?: SystemRequirements; /** * Title of the checklist */ - systemData: SystemData; + systemData?: SystemData; } const NodeRequirements = ({ @@ -47,7 +47,7 @@ const NodeRequirements = ({
Node Requirements
- {nodeRequirements.description ? ( + {nodeRequirements?.description ? ( nodeRequirements.description ) : ( <> @@ -56,12 +56,17 @@ const NodeRequirements = ({ )}
- {nodeRequirements.documentationUrl && ( + {nodeRequirements?.documentationUrl && ( )} + {!nodeRequirements && ( + <> + The requirements are unavailable. Please check with the node provider. + + )}
); diff --git a/src/stories/Presentational/AddNodeStepper.stories.tsx b/src/stories/Presentational/AddNodeStepper.stories.tsx index c86fe24e8..5fa969ecd 100644 --- a/src/stories/Presentational/AddNodeStepper.stories.tsx +++ b/src/stories/Presentational/AddNodeStepper.stories.tsx @@ -13,5 +13,5 @@ const Template: ComponentStory = (args) => console.log(newValue) + onChange: (newValue: string) => console.log(newValue) }; diff --git a/src/stories/Presentational/NodeRequirements.stories.tsx b/src/stories/Presentational/NodeRequirements.stories.tsx index 4b9afc633..bcbf56372 100644 --- a/src/stories/Presentational/NodeRequirements.stories.tsx +++ b/src/stories/Presentational/NodeRequirements.stories.tsx @@ -572,3 +572,7 @@ Primary.args = { ] } }; + +export const NoRequirements = Template.bind({}); +NoRequirements.args = { +}