@onewelcome/react-lib-components 6.7.1 → 7.1.0

package/src/components/Wizard/BaseWizardSteps/BaseWizardSteps.tsx

@@ -1,93 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import React, { ForwardRefRenderFunction, ComponentPropsWithRef, Fragment } from "react";
-import classes from "./BaseWizardSteps.module.scss";
-import { Icon, Icons } from "../../Icon/Icon";
-
-type StepState = "finished" | "current" | "future";
-
-export interface Step {
-  label: string;
-  disabled?: boolean;
-}
-
-export interface Props extends Omit<ComponentPropsWithRef<"div">, "onClick"> {
-  steps: Step[];
-  currentStepNo: number;
-  onClick?: (stepNo: number) => void;
-  futureStepsClickable?: boolean;
-}
-
-const BaseWizardStepsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { steps, currentStepNo, onClick, futureStepsClickable = false, ...rest }: Props,
-  ref
-) => {
-  const getStepState = (stepNo: number): StepState => {
-    if (currentStepNo === stepNo) {
-      return "current";
-    } else if (stepNo < currentStepNo) {
-      return "finished";
-    }
-    return "future";
-  };
-
-  const getStepContent = (stepState: StepState, index: number, disabled?: boolean) => {
-    const stepNumberString = String(index + 1);
-    if (stepState === "finished") {
-      return disabled ? null : <Icon className={classes["checkmark"]} icon={Icons.Checkmark} />;
-    } else {
-      return <Fragment>{stepNumberString}</Fragment>;
-    }
-  };
-
-  const generatedSteps = steps.map((step, index) => {
-    const stepState = getStepState(index);
-    const disabledStyleClassName = step.disabled ? classes["disabled"] : "";
-    const clickableClassName = futureStepsClickable ? classes["clickable"] : "";
-
-    return (
-      <button
-        key={step.label.toLowerCase().replace(/\s/, "-")}
-        disabled={
-          step.disabled ||
-          (stepState === "future" && !futureStepsClickable) ||
-          stepState === "current"
-        }
-        aria-current={stepState === "current" ? "step" : undefined}
-        onClick={() => onClick?.(index)}
-        className={`${classes["wizard-element"]} ${classes[stepState]} ${clickableClassName} ${disabledStyleClassName}`}
-      >
-        <div className={classes["number-wrapper"]}>
-          <span className={classes["number"]}>
-            {getStepContent(stepState, index, step.disabled)}
-          </span>
-        </div>
-        <div className={classes["two-line-text-overflow"]}>
-          <span className={classes["label"]}>{step.label}</span>
-        </div>
-      </button>
-    );
-  });
-
-  return (
-    <div {...rest} ref={ref} className={classes["wizard"]}>
-      {generatedSteps}
-    </div>
-  );
-};
-
-export const BaseWizardSteps = React.forwardRef(BaseWizardStepsComponent);

package/src/components/Wizard/Wizard.tsx

@@ -1,67 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import React, { Fragment, useContext, useEffect } from "react";
-import { Step } from "./BaseWizardSteps/BaseWizardSteps";
-import { WizardStateContext, WizardStateProvider } from "./WizardStateProvider";
-import { setWizardState } from "./wizardStateReducer";
-
-export type WizardMode = "add" | "edit";
-
-export interface Props {
-  steps: Step[];
-  mode: WizardMode;
-  initialStepNo?: number;
-  onStepChange: (stepNo: number) => void;
-  children: React.ReactNode;
-}
-
-const useSetWizardState = (steps: Step[], mode: WizardMode) => {
-  const { dispatch } = useContext(WizardStateContext);
-
-  useEffect(() => {
-    dispatch(setWizardState(steps, mode));
-  }, [steps, mode]);
-};
-
-const useStepChanging = (onStepChange: (stepNo: number) => void) => {
-  const {
-    state: { currentStepNo }
-  } = useContext(WizardStateContext);
-
-  useEffect(() => {
-    onStepChange(currentStepNo);
-  }, [currentStepNo]);
-};
-
-/**
- * @deprecated
- */
-const WizardContent = ({ steps, mode, onStepChange, children }: Props) => {
-  useSetWizardState(steps, mode);
-  useStepChanging(onStepChange);
-
-  return <Fragment>{children}</Fragment>;
-};
-
-export const Wizard = (props: Props) => {
-  const { steps, initialStepNo: currentStepNo = 0, mode } = props;
-  return (
-    <WizardStateProvider initialState={{ steps, currentStepNo, mode }}>
-      <WizardContent {...props} />
-    </WizardStateProvider>
-  );
-};

package/src/components/Wizard/WizardActions/WizardActions.tsx

@@ -1,116 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import React, { Fragment, useContext, useMemo } from "react";
-import { Button, Props as ButtonProps } from "../../Button/Button";
-import { Step } from "../BaseWizardSteps/BaseWizardSteps";
-import { WizardMode } from "../Wizard";
-import { WizardStateContext } from "../WizardStateProvider";
-import { changeCurrentStepNo } from "../wizardStateReducer";
-
-export interface Props extends React.HTMLProps<HTMLDivElement> {
-  actions: {
-    previous: {
-      label: string;
-      onClick: () => void;
-      previousButtonProps?: ButtonProps;
-    };
-    next: {
-      label: string;
-      onClick: (currentStepNo: number) => boolean;
-      nextButtonProps?: ButtonProps;
-    };
-    saveAndClose: {
-      label: string;
-      onClick: (currentStepNo: number) => void;
-      saveAndCloseButtonProps?: ButtonProps;
-    };
-  };
-}
-
-const calculateNextStepNo = (steps: Step[], currentStepNo: number) => () =>
-  steps.findIndex((step, stepNo) => stepNo > currentStepNo && !step.disabled);
-
-const calculatePrevStepNo = (steps: Step[], currentStepNo: number) => () => {
-  const reversedCurrentStepNo = steps.length - 1 - currentStepNo;
-  const reversedPrevStepNo = [...steps]
-    .reverse()
-    .findIndex((step, stepNo) => stepNo > reversedCurrentStepNo && !step.disabled);
-  if (reversedPrevStepNo > 0) {
-    return steps.length - 1 - reversedPrevStepNo;
-  }
-  return -1;
-};
-
-const useNextStepNo = (mode: WizardMode, currentStepNo: number, steps: Step[]) =>
-  useMemo(calculateNextStepNo(steps, currentStepNo), [mode, currentStepNo, steps]);
-
-const usePreviousStepNo = (mode: WizardMode, currentStepNo: number, steps: Step[]) =>
-  useMemo(calculatePrevStepNo(steps, currentStepNo), [mode, currentStepNo, steps]);
-
-/**
- * @deprecated
- */
-export const WizardActions = ({ actions }: Props) => {
-  const {
-    state: { mode, steps, currentStepNo },
-    dispatch
-  } = useContext(WizardStateContext);
-  const nextStepNo = useNextStepNo(mode, currentStepNo, steps);
-  const hasNextStep = nextStepNo !== -1;
-  const previousStepNo = usePreviousStepNo(mode, currentStepNo, steps);
-  const hasPreviousStep = previousStepNo !== -1;
-  const isLastStepOrEditMode = !hasNextStep || mode === "edit";
-
-  const changeStepNo = (direction: "forward" | "backward") => {
-    if (direction === "forward") {
-      hasNextStep && dispatch(changeCurrentStepNo(nextStepNo));
-    } else {
-      hasPreviousStep && dispatch(changeCurrentStepNo(previousStepNo));
-    }
-  };
-
-  const onNextWrapper = () => {
-    actions.next.onClick(currentStepNo) && changeStepNo("forward");
-  };
-
-  const onPreviousWrapper = () => {
-    actions.previous.onClick?.();
-    changeStepNo("backward");
-  };
-
-  const onSaveAndCloseWrapper = () => {
-    actions.saveAndClose.onClick(currentStepNo);
-  };
-
-  return (
-    <Fragment>
-      {hasPreviousStep && (
-        <Button variant="outline" onClick={onPreviousWrapper}>
-          {actions.previous.label}
-        </Button>
-      )}
-      {hasNextStep && (
-        <Button variant={mode === "edit" ? "outline" : "fill"} onClick={onNextWrapper}>
-          {actions.next.label}
-        </Button>
-      )}
-      {isLastStepOrEditMode && (
-        <Button onClick={onSaveAndCloseWrapper}>{actions.saveAndClose.label}</Button>
-      )}
-    </Fragment>
-  );
-};

package/src/components/Wizard/WizardStateProvider.tsx

@@ -1,45 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import React, { createContext, Dispatch, useReducer } from "react";
-import { WizardActions, WizardStateType, reducer } from "./wizardStateReducer";
-
-const WizardStateContext = createContext<{
-  state: WizardStateType;
-  dispatch: Dispatch<WizardActions>;
-}>({
-  state: {} as WizardStateType,
-  dispatch: () => null
-});
-
-export interface Props {
-  initialState: WizardStateType;
-  children?: React.ReactNode;
-}
-
-/**
- * @deprecated
- */
-const WizardStateProvider = ({ children, initialState }: Props) => {
-  const [state, dispatch] = useReducer(reducer, initialState);
-  return (
-    <WizardStateContext.Provider value={{ state, dispatch }}>
-      {children}
-    </WizardStateContext.Provider>
-  );
-};
-
-export { WizardStateProvider, WizardStateContext };

package/src/components/Wizard/WizardSteps/WizardSteps.tsx

@@ -1,54 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import React, { ForwardRefRenderFunction, ComponentPropsWithRef, useContext } from "react";
-import { WizardStateContext } from "../WizardStateProvider";
-import { BaseWizardSteps } from "../BaseWizardSteps/BaseWizardSteps";
-import { changeCurrentStepNo } from "../wizardStateReducer";
-
-export interface Props extends ComponentPropsWithRef<"div"> {
-  onStepClick: (currentStepNo: number, selectedStepNo: number) => boolean;
-}
-
-const WizardStepsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { onStepClick, ...rest }: Props,
-  ref
-) => {
-  const {
-    state: { currentStepNo, mode, steps },
-    dispatch
-  } = useContext(WizardStateContext);
-
-  const onClick = (selectedStepNo: number) => {
-    onStepClick(currentStepNo, selectedStepNo) && dispatch(changeCurrentStepNo(selectedStepNo));
-  };
-
-  return (
-    <BaseWizardSteps
-      {...rest}
-      ref={ref}
-      onClick={onClick}
-      steps={steps}
-      currentStepNo={currentStepNo}
-      futureStepsClickable={mode === "edit"}
-    />
-  );
-};
-
-/**
- * @deprecated
- */
-export const WizardSteps = React.forwardRef(WizardStepsComponent);

package/src/components/Wizard/wizardStateReducer.ts

@@ -1,61 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import { Reducer } from "react";
-import { Step } from "./BaseWizardSteps/BaseWizardSteps";
-import { WizardMode } from "./Wizard";
-
-type WizardStateType = {
-  steps: Step[];
-  currentStepNo: number;
-  mode: WizardMode;
-};
-
-interface SetWizardStateAction {
-  type: "SET_STATE";
-  payload: {
-    steps: Step[];
-    mode: WizardMode;
-  };
-}
-
-interface ChangeCurrentStepNoAction {
-  type: "CHANGE_CURRENT_STEP_NO";
-  payload: number;
-}
-
-const setWizardState = (steps: Step[], mode: WizardMode): SetWizardStateAction => {
-  return { type: "SET_STATE", payload: { steps, mode } };
-};
-
-const changeCurrentStepNo = (currentStepNo: number): ChangeCurrentStepNoAction => {
-  return { type: "CHANGE_CURRENT_STEP_NO", payload: currentStepNo };
-};
-
-type WizardActions = SetWizardStateAction | ChangeCurrentStepNoAction;
-
-const reducer: Reducer<WizardStateType, WizardActions> = (state, action) => {
-  switch (action.type) {
-    case "SET_STATE":
-      return { ...state, ...action.payload };
-    case "CHANGE_CURRENT_STEP_NO":
-      return { ...state, currentStepNo: action.payload };
-    default:
-      return state;
-  }
-};
-
-export { setWizardState, changeCurrentStepNo, reducer, WizardActions, WizardStateType };