From 507a152b7e879b3318ccc3b3616715d5204f6c89 Mon Sep 17 00:00:00 2001 From: resolritter Date: Mon, 6 Jul 2020 05:57:23 -0300 Subject: [PATCH] migrate from react-albus to react-step-wizard --- package.json | 5 +- src/@types/react-step-wizard.d.ts | 48 ++++++++++++ src/index.d.ts | 0 src/index.tsx | 119 ++++++++++++++++++------------ src/types.ts | 41 ++++++---- tsconfig.json | 3 +- yarn.lock | 54 +++----------- 7 files changed, 158 insertions(+), 112 deletions(-) create mode 100644 src/@types/react-step-wizard.d.ts create mode 100644 src/index.d.ts diff --git a/package.json b/package.json index 815efbf..291e205 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,6 @@ "peerDependencies": { "formik": "^2.0.1-rc.12", "react": "^16.8.6", - "react-albus": "^2.0.0", "yup": "^0.27.0" }, "devDependencies": { @@ -34,13 +33,13 @@ "formik": "^2.0.1-rc.12", "prettier": "^1.18.2", "react": "^16.8.6", - "react-albus": "^2.0.0", "rimraf": "^2.6.3", "tsdx": "^0.7.2", "typescript": "^3.5.3", "yup": "^0.27.0" }, "dependencies": { - "immer": "^3.1.3" + "immer": "^3.1.3", + "react-step-wizard": "^5.3.2" } } diff --git a/src/@types/react-step-wizard.d.ts b/src/@types/react-step-wizard.d.ts new file mode 100644 index 0000000..bd4cff5 --- /dev/null +++ b/src/@types/react-step-wizard.d.ts @@ -0,0 +1,48 @@ +// Initial typings by dmk99 - https://github.com/jcmcneal/react-step-wizard/issues/31#issuecomment-505399131 + +declare module 'react-step-wizard' { + import * as React from 'react' + + export type StepWizardProps = Partial< + React.PropsWithChildren<{ + className: string + + hashKey: string + initialStep: number + instance: (wizard: StepWizardProps) => void + isHashEnabled: boolean + isLazyMount: boolean + nav: React.ReactNode + + onStepChange: (stepChange: { + previousStep: number + activeStep: number + }) => void + + transitions: { + enterRight?: string + enterLeft?: string + exitRight?: string + exitLeft?: string + } + }> + > + + export type StepWizardChildProps< + T extends Record = {} + > = React.PropsWithChildren<{ + isActive: boolean + currentStep: number + totalSteps: number + firstStep: () => void + lastStep: () => void + nextStep: () => void + previousStep: () => void + goToStep: (step: number) => void + }> & + T + + export default class StepWizard extends React.PureComponent< + StepWizardProps + > {} +} diff --git a/src/index.d.ts b/src/index.d.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/index.tsx b/src/index.tsx index 789a092..2a60da0 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,10 +1,10 @@ import { Form as DefaultForm, Formik, FormikProps } from 'formik' import produce from 'immer' import React from 'react' -import { Step as AlbusStep, Steps as AlbusSteps, Wizard as AlbusWizard, WizardContext } from 'react-albus' +import StepWizard, { StepWizardChildProps } from 'react-step-wizard' import { - FormikWizardBaseValues, + AnyFormValue, FormikWizardContextValue, FormikWizardProps, FormikWizardStepType, @@ -12,7 +12,7 @@ import { } from './types' function getInitialValues(steps: FormikWizardStepType[]) { - return steps.reduce((curr, next) => { + return steps.reduce((curr, next) => { curr[next.id] = next.initialValues return curr }, {}) @@ -23,14 +23,14 @@ const FormikWizardContext = React.createContext ) interface FormikWizardStepProps - extends FormikWizardContextValue { + extends FormikWizardContextValue { step: FormikWizardStepType Form?: any steps: string[] FormWrapper: React.SFC> - wizard: WizardContext formikProps?: Partial> onSubmit: FormikWizardProps['onSubmit'] + childWizardProps: StepWizardChildProps } function FormikWizardStep({ @@ -38,8 +38,8 @@ function FormikWizardStep({ Form = DefaultForm, FormWrapper, steps, - wizard, formikProps, + childWizardProps, onSubmit, setStatus, status, @@ -79,7 +79,7 @@ function FormikWizardStep({ }) }) - setImmediate(wizard.next) + setImmediate(childWizardProps.nextStep) } } catch (e) { status = e @@ -95,7 +95,7 @@ function FormikWizardStep({ setValues, step, values, - wizard.next, + childWizardProps.nextStep, ] ) @@ -113,7 +113,7 @@ function FormikWizardStep({ { @@ -127,7 +127,7 @@ function FormikWizardStep({ ) } - wizard.previous() + childWizardProps.previousStep() }} status={status} values={values} @@ -144,7 +144,7 @@ function FormikWizardStep({ export function FormikWizard({ formikProps, - albusProps, + wizardProps: userWizardProps, onSubmit, steps, Form, @@ -160,44 +160,67 @@ export function FormikWizard({ const stepIds = React.useMemo(() => steps.map((step) => step.id), [steps]) - return ( - - - - {steps.map((step) => ( - ( - - )} - /> - ))} - - - + Form={Form} + FormWrapper={render} + /> + ) + } + + // react-step-wizard expects children as arrays + // https://github.com/jcmcneal/react-step-wizard/blob/6ee7978ccc08021c7e2ca54d9d77a6de3b992117/src/index.js#L179 + const renderSteps = () => { + return steps.map((_, i) => { + return React.createElement(StepRenderer, { + i, + key: i, + // other props will be passed down by react-step-wizard on render + } as any) + }) + } + + return ( + + {renderSteps()} + ) } diff --git a/src/types.ts b/src/types.ts index eb228d8..fafffe7 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,48 +1,59 @@ +import { PropsWithChildren } from 'react' import { FormikProps, FormikErrors } from 'formik' -import { WizardContext, WizardProps } from 'react-albus' import { Schema } from 'yup' +import { StepWizardProps, StepWizardChildProps } from 'react-step-wizard' -export type FormikWizardBaseValues = any +export type AnyFormValue = any -export interface FormikWizardContextValue { +export interface FormikWizardContextValue< + V extends AnyFormValue = AnyFormValue, + S = any +> { status: S setStatus: React.Dispatch> values: V setValues: React.Dispatch> } -export interface FormikWizardStepType { +export interface FormikWizardStepType< + Values extends any = AnyFormValue, + CurrentSection extends keyof Values = any +> extends StepWizardChildProps { id: string component: React.SFC<{}> validationSchema?: Schema - validate?: (values: any) => void | object | Promise>, - initialValues?: FormikWizardBaseValues + validate?: (values: any) => void | object | Promise> + initialValues?: AnyFormValue actionLabel?: string onAction?: ( - sectionValues: FormikWizardBaseValues, - formValues: FormikWizardBaseValues + sectionValues: Values, + formValues: Values[CurrentSection] ) => Promise keepValuesOnPrevious?: boolean } -export interface FormikWizardWrapperProps - extends FormikWizardContextValue { +export interface FormikWizardWrapperProps< + Values extends AnyFormValue = AnyFormValue, + Status = any +> extends PropsWithChildren> { canGoBack: boolean goToPreviousStep: () => void currentStep: string actionLabel?: string isLastStep: boolean steps: string[] - wizard: WizardContext - children: React.ReactNode + childWizardProps: StepWizardChildProps isSubmitting: boolean } -export interface FormikWizardProps { - steps: FormikWizardStepType[] +export interface FormikWizardProps< + Values extends AnyFormValue = AnyFormValue, + Status = any +> { + steps: FormikWizardStepType[] render: React.SFC> onSubmit: (values: Values) => void | Promise formikProps?: Partial> - albusProps?: Partial Form?: any + wizardProps?: StepWizardProps } diff --git a/tsconfig.json b/tsconfig.json index eae0b29..be1ea88 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -23,7 +23,8 @@ "*": ["src/*", "node_modules/*"] }, "jsx": "react", - "esModuleInterop": true + "esModuleInterop": true, + "typeRoots": ["node_modules/@types", "src/@types"] }, "include": ["src", "types"] } diff --git a/yarn.lock b/yarn.lock index 9aeedd5..9e8a5bb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -685,7 +685,7 @@ js-levenshtein "^1.1.3" semver "^5.5.0" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2": +"@babel/runtime@^7.0.0": version "7.4.4" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.4.tgz#dc2e34982eb236803aa27a07fea6857af1b9171d" integrity sha512-w0+uT71b6Yi7i5SE0co4NioIpSYS6lLiXvCzWzGSKvpK5vdQtCbICHMj+gbAKAOtxiV6HsVh/MBdaF9EQ6faSg== @@ -2872,18 +2872,6 @@ hash.js@^1.0.0, hash.js@^1.0.3: inherits "^2.0.3" minimalistic-assert "^1.0.1" -history@^4.6.0: - version "4.9.0" - resolved "https://registry.yarnpkg.com/history/-/history-4.9.0.tgz#84587c2068039ead8af769e9d6a6860a14fa1bca" - integrity sha512-H2DkjCjXf0Op9OAr6nJ56fcRkTSNrUiv41vNJ6IswJjif6wlpZK0BTfFbi7qK9dXLSYZxkq5lBsj3vUjlYBYZA== - dependencies: - "@babel/runtime" "^7.1.2" - loose-envify "^1.2.0" - resolve-pathname "^2.2.0" - tiny-invariant "^1.0.2" - tiny-warning "^1.0.0" - value-equal "^0.4.0" - hmac-drbg@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" @@ -2893,11 +2881,6 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^2.3.1: - version "2.5.5" - resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" - integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw== - hoist-non-react-statics@^3.3.0: version "3.3.0" resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b" @@ -3944,7 +3927,7 @@ log-update@^2.3.0: cli-cursor "^2.0.0" wrap-ansi "^3.0.1" -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.4.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -4762,7 +4745,7 @@ prompts@^2.0.1: kleur "^3.0.2" sisteransi "^1.0.0" -prop-types@^15.5.8, prop-types@^15.6.2: +prop-types@^15.6.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -4878,15 +4861,6 @@ rc@^1.2.7: minimist "^1.2.0" strip-json-comments "~2.0.1" -react-albus@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/react-albus/-/react-albus-2.0.0.tgz#c6ad9932ff06b1880986e79817b6709f053f9ff7" - integrity sha512-+gmvDfs75nFgHOHEPm/nA6DJFwzFm4AgFJD6L/zbjK80jHRasstyphYnPI/RHp4MuI7dBPTpvS9MvE90wBrv8A== - dependencies: - history "^4.6.0" - hoist-non-react-statics "^2.3.1" - prop-types "^15.5.8" - react-fast-compare@^2.0.1: version "2.0.4" resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" @@ -4897,6 +4871,11 @@ react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16" integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA== +react-step-wizard@^5.3.2: + version "5.3.2" + resolved "https://registry.yarnpkg.com/react-step-wizard/-/react-step-wizard-5.3.2.tgz#c8387ecfafcb02872aa637945258d8a064b36a21" + integrity sha512-bnZyTm6RRbDGY3+0ajTVyv63ieKTE97V+BZv6ryhhQ12lUQK3X1jjghepA0qnBzUSN6FJ/d0yVfF8gCJX14SXg== + react@^16.8.6: version "16.8.6" resolved "https://registry.npmjs.org/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe" @@ -5098,11 +5077,6 @@ resolve-from@^3.0.0: resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748" integrity sha1-six699nWiBvItuZTM17rywoYh0g= -resolve-pathname@^2.2.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879" - integrity sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg== - resolve-url@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" @@ -5795,12 +5769,7 @@ tiny-glob@^0.2.6: globalyzer "^0.1.0" globrex "^0.1.1" -tiny-invariant@^1.0.2: - version "1.0.4" - resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.4.tgz#346b5415fd93cb696b0c4e8a96697ff590f92463" - integrity sha512-lMhRd/djQJ3MoaHEBrw8e2/uM4rs9YMNk0iOr8rHQ0QdbM7D4l0gFl3szKdeixrlyfm9Zqi4dxHCM2qVG8ND5g== - -tiny-warning@^1.0.0, tiny-warning@^1.0.2: +tiny-warning@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.2.tgz#1dfae771ee1a04396bdfde27a3adcebc6b648b28" integrity sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q== @@ -6112,11 +6081,6 @@ validate-npm-package-license@^3.0.1: spdx-correct "^3.0.0" spdx-expression-parse "^3.0.0" -value-equal@^0.4.0: - version "0.4.0" - resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7" - integrity sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw== - verror@1.10.0: version "1.10.0" resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"