@spaced-out/ui-design-system 0.4.13-beta.0 → 0.4.13-beta.1

package/lib/components/Stepper/Step/Step.tsx

@@ -1,125 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import classify from '../../../utils/classify';
-import type {IconType} from '../../Icon';
-import {Icon, ICON_SIZE, ICON_TYPE} from '../../Icon';
-
-import css from '../Stepper.module.css';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-  stepCounter?: string;
-  content?: string;
-}>;
-
-export type StepProps = {
-  active?: boolean;
-  children: React.ReactNode;
-  completed?: boolean;
-  disabled?: boolean;
-  expanded?: boolean;
-  index: number;
-  last?: boolean;
-  classNames?: ClassNames;
-  allowClick?: boolean;
-  onClick?: (idx: number, e?: React.SyntheticEvent<HTMLElement> | null | undefined) => unknown;
-  iconName?: string;
-  iconType?: IconType;
-};
-
-export const Step: Flow.AbstractComponent<StepProps, HTMLDivElement> =
-  React.forwardRef<HTMLDivElement, StepProps>((
-    {
-      active,
-      children,
-      completed = false,
-      disabled = false,
-      expanded = false,
-      index = 0,
-      last,
-      classNames,
-      onClick,
-      allowClick,
-      iconName,
-      iconType,
-    }: StepProps,
-    ref,
-  ) => {
-    const childrenArray = React.Children.toArray(children).filter(Boolean);
-    const stepContent = childrenArray.map((stepContent) =>
-// @ts-ignore - TS2769 - No overload matches this call.
-      React.cloneElement(stepContent, {
-// @ts-ignore - TS2339 - Property 'props' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<React.ReactNode> | ReactPortal | Promise<...>'.
-        ...stepContent.props,
-        active,
-        completed,
-        disabled,
-      }),
-    );
-
-    const handleClick = (e: any) => allowClick && onClick?.(index, e);
-
-    return (
-      <div
-        ref={ref}
-        className={classify(
-          css.stepWrapper,
-          {
-            [css.active]: active,
-            [css.completed]: completed,
-            [css.expanded]: expanded,
-            [css.last]: last,
-            [css.disabled]: disabled,
-            [css.clickable]: allowClick,
-          },
-          classNames?.wrapper,
-        )}
-        onClick={handleClick}
-      >
-        <div
-          className={classify(
-            css.stepWrapperCounter,
-            {
-              [css.selected]: active,
-              [css.completed]: completed,
-              [css.expanded]: expanded,
-              [css.last]: last,
-              [css.disabled]: disabled,
-              [css.withIcon]: !!iconName,
-            },
-            classNames?.stepCounter,
-          )}
-        >
-          {completed && !active ? (
-// @ts-ignore - TS2769 - No overload matches this call.
-            <Icon
-              name="check"
-              type={ICON_TYPE.solid}
-              size={ICON_SIZE.small}
-              className={css.stepIcon}
-            />
-          ) : (
-            <React.Fragment>
-              {iconName ? (
-                <Icon
-                  name={iconName}
-                  className={css.stepIcon}
-// @ts-ignore - TS2769 - No overload matches this call.
-                  size={ICON_SIZE.small}
-                  type={iconType}
-                />
-              ) : (
-                (index + 1).toString()
-              )}
-            </React.Fragment>
-          )}
-        </div>
-        <div className={classify(css.stepContent, classNames?.content)}>
-          {stepContent}
-        </div>
-      </div>
-    );
-  });

package/lib/components/Stepper/Step/StepContent.tsx

@@ -1,40 +0,0 @@
-import * as React from 'react';
-
-import {classify} from '../../../utils/classify';
-
-import css from '../Stepper.module.css';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-}>;
-
-export type StepContentProps = {
-  children: React.ReactNode;
-  active?: boolean;
-  completed?: boolean;
-  disabled?: boolean;
-  classNames?: ClassNames;
-};
-
-export const StepContent = (
-  {
-    children,
-    classNames,
-    active,
-    completed = false,
-    disabled = false,
-  }: StepContentProps,
-) => (<div
-  className={classify(
-    css.stepContentWrapper,
-    {
-      [css.active]: active,
-      [css.completed]: completed,
-      [css.disabled]: disabled,
-    },
-    classNames?.wrapper,
-  )}
->
-  {children}
-</div>);

package/lib/components/Stepper/Step/StepLabel.tsx

@@ -1,40 +0,0 @@
-import * as React from 'react';
-
-import {classify} from '../../../utils/classify';
-
-import css from '../Stepper.module.css';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-}>;
-
-export type StepLabelProps = {
-  children: React.ReactNode;
-  active?: boolean;
-  completed?: boolean;
-  disabled?: boolean;
-  classNames?: ClassNames;
-};
-
-export const StepLabel = (
-  {
-    children,
-    classNames,
-    active,
-    completed = false,
-    disabled = false,
-  }: StepLabelProps,
-) => (<div
-  className={classify(
-    css.stepLabelWrapper,
-    {
-      [css.active]: active,
-      [css.completed]: completed,
-      [css.disabled]: disabled,
-    },
-    classNames?.wrapper,
-  )}
->
-  {children}
-</div>);

package/lib/components/Stepper/Step/index.ts

@@ -1,3 +0,0 @@
-export * from './Step';
-export * from './StepContent';
-export * from './StepLabel';

package/lib/components/Stepper/Stepper.stories.tsx

@@ -1,422 +0,0 @@
-import * as React from 'react';
-
-import {Button} from '../Button';
-import {BasicDialog} from '../Dialog';
-
-import {Step} from './Step/Step';
-import {StepContent} from './Step/StepContent';
-import {StepLabel} from './Step/StepLabel';
-import type {StepperProps} from './';
-import {Stepper} from './Stepper';
-
-import css from './Stepper.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Stepper/Stepper',
-  component: Stepper,
-  argTypes: {
-    classNames: {
-      description: 'Provide an optional className to be applied to the wrapper',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: '{wrapper?: string}',
-        },
-      },
-    },
-    activeStep: {
-      control: {type: 'number'},
-      description: 'Set the active step (zero-based index). Defaults to 0.',
-      table: {
-        type: {summary: 'number'},
-        defaultValue: {summary: '0'},
-      },
-    },
-    orientation: {
-      control: {type: 'select'},
-      options: ['horizontal', 'vertical'],
-      description:
-        'The component orientation (layout flow direction). Defaults to "horizontal".',
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'horizontal'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Stepper component.',
-      description: {
-        component: `
-\`\`\`js
-import type {StepperProps} from '@spaced-out/ui-design-system/lib/components/Stepper';
-import {Stepper, Step, StepLabel, StepContent} from '@spaced-out/ui-design-system/lib/components/Stepper';
-\`\`\`
-
-The Stepper component provides a wizard-like workflow for progressing through a series of steps.
-It is commonly used to guide users through a multi-step process, such as a form or a tutorial.
-
-### Usage
-
-The Stepper component takes in the following props:
-
-\`\`\`jsx
-<Stepper
-  activeStep={1}
-  orientation="horizontal"
-  classNames={{}}
->
-  {/* Step components go here */}
-</Stepper>
-\`\`\`
-
-The Stepper component should be used with one or more Step components as children.
-Each Step component represents an individual step in the Stepper. The Step component is responsible for
-rendering the step label and content. Make sure to import the Step component as well.
-
-### Step Component
-
-The Step component represents a single step within the Stepper. It should be used as a child component of the Stepper. Each Step component can have its own unique label and content.
-
-\`\`\`jsx
-import { Step } from "@spaced-out/ui-design-system/lib/components/Stepper";
-
-<Stepper activeStep={1} orientation="horizontal / vertical">
-  <Step index={0} completed={false} classNames={{wrapper: css.stepWrapper}}>
-    {/* Step label and content go here */}
-  </Step>
-  {/* Add more Step components for additional steps */}
-</Stepper>
-\`\`\`
-
-Please note that the Step component should be imported separately in order to use it within the Stepper component.
-
-Remember to customize the props, labels, and content according to your specific use case.
-
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Stepper/Stepper.jsx',
-    },
-  },
-};
-
-const steps = [
-  {
-    id: '1',
-    label: 'Step 1',
-    description: 'A quick brown fox jumps over the lazy dog',
-  },
-  {
-    id: '2',
-    label: 'Step 2',
-    description:
-      'A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog',
-  },
-  {
-    id: '3',
-    label: 'Step 3',
-    description:
-      'A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog',
-  },
-];
-
-// @ts-ignore - TS6133 - 'stepsWithIcon' is declared but its value is never read.
-const stepsWithIcon = [
-  {
-    id: '1',
-    label: 'Train',
-    description: 'A quick brown fox jumps over the lazy dog',
-    iconName: 'train',
-    iconType: 'duotone',
-  },
-  {
-    id: '2',
-    label: 'Bus',
-    description:
-      'A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog',
-    iconName: 'bus',
-    iconType: 'duotone',
-  },
-  {
-    id: '3',
-    label: 'Ship',
-    description:
-      'A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog',
-    iconName: 'ship',
-    iconType: 'duotone',
-  },
-];
-
-/**
- * Renders a Stepper component with Completed check
- *
- * Below conditions are required for the step to be clickable:
- *
- * 1. The step should have an `onClick` handler
- * 2. The current step should not be `active`
- * 3. The previous step should be `completed`
- *
- */
-export const _Stepper = (args: StepperProps) => {
-  const [openDialog, setOpenDialog] = React.useState(false);
-  const [activeStep, setActiveStep] = React.useState(args.activeStep || 0);
-  const [completedSteps, setCompletedSteps] = React.useState({
-    '0': false,
-    '1': false,
-    '2': false,
-  });
-
-  const handleNext = () => {
-// @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'number' can't be used to index type '{ '0': boolean; '1': boolean; '2': boolean; }'.
-    if (completedSteps[activeStep] === false) {
-      setOpenDialog(true);
-      return;
-    }
-    setActiveStep((prevStep) => prevStep + 1);
-  };
-
-  const handleBack = () => {
-    setActiveStep((prevStep) => prevStep - 1);
-  };
-
-  const handleClick = (idx: number) => {
-    setActiveStep(idx);
-  };
-
-  const handleMarkComplete = () => {
-    const newCompletedSteps = {...completedSteps} as const;
-    for (let i = 0; i <= activeStep; i++) {
-// @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'number' can't be used to index type '{ readonly '0': boolean; readonly '1': boolean; readonly '2': boolean; }'.
-      newCompletedSteps[i] = true;
-    }
-    setCompletedSteps(newCompletedSteps);
-  };
-
-  const handleMarkInComplete = () => {
-    const newCompletedSteps = {...completedSteps} as const;
-    for (let i = activeStep; i <= 2; i++) {
-// @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'number' can't be used to index type '{ readonly '0': boolean; readonly '1': boolean; readonly '2': boolean; }'.
-      newCompletedSteps[i] = false;
-    }
-    setCompletedSteps(newCompletedSteps);
-  };
-
-  React.useEffect(() => {
-    setActiveStep(args.activeStep || 0);
-  }, [args.activeStep]);
-
-  return (
-    <div className={css.container}>
-      <Stepper {...args} activeStep={activeStep}>
-        {steps.map((stepDetails, index) => (
-          <Step
-            key={stepDetails.id}
-            index={index}
-            onClick={handleClick}
-// @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'number' can't be used to index type '{ '0': boolean; '1': boolean; '2': boolean; }'.
-            completed={completedSteps[index]}
-          >
-            <StepLabel>{stepDetails.label}</StepLabel>
-            <StepContent>{stepDetails.description}</StepContent>
-          </Step>
-        ))}
-      </Stepper>
-      <div className={css.spacedActions}>
-        <div className={css.actionBlock}>
-          <Button
-            size="small"
-            type="secondary"
-            onClick={handleBack}
-            disabled={!(activeStep > 0)}
-            iconLeftName="arrow-left"
-          >
-            Back
-          </Button>
-          <Button
-            size="small"
-            type="secondary"
-            onClick={handleNext}
-            disabled={!(activeStep < steps.length - 1)}
-            iconRightName="arrow-right"
-          >
-            Next
-          </Button>
-        </div>
-        <div className={css.actionBlock}>
-          <Button
-            size="small"
-            type="primary"
-            onClick={handleMarkComplete}
-            iconLeftName="circle-check"
-// @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'number' can't be used to index type '{ '0': boolean; '1': boolean; '2': boolean; }'.
-            disabled={completedSteps[activeStep]}
-          >
-            Mark Complete
-          </Button>
-          <Button
-            size="small"
-            type="danger"
-            onClick={handleMarkInComplete}
-            iconLeftName="circle-xmark"
-// @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'number' can't be used to index type '{ '0': boolean; '1': boolean; '2': boolean; }'.
-            disabled={!completedSteps[activeStep]}
-          >
-            Mark Incomplete
-          </Button>
-        </div>
-      </div>
-
-      <BasicDialog
-        isOpen={openDialog}
-        abortText="Close"
-        body="Please mark the current step complete to move on to the next one!"
-        handleAbort={() => setOpenDialog(false)}
-        heading="Unable to proceed to next step"
-        semantic="danger"
-      />
-    </div>
-  );
-};
-
-_Stepper.args = {
-  activeStep: 0,
-};
-
-/**
- * Renders a Stepper component with Completed check
- *
- * Below conditions are required for the step to be clickable:
- *
- * 1. The step should have an `onClick` handler
- * 2. The current step should not be `active`
- * 3. The previous step should be `completed`
- *
- */
-/**
-export const _WithStepIcon = (args: StepperProps): React.ReactNode => {
-  const [openDialog, setOpenDialog] = React.useState(false);
-  const [activeStep, setActiveStep] = React.useState(args.activeStep || 0);
-  const [completedSteps, setCompletedSteps] = React.useState({
-    '0': false,
-    '1': false,
-    '2': false,
-  });
-
-  const handleNext = () => {
-    if (completedSteps[activeStep] === false) {
-      setOpenDialog(true);
-      return;
-    }
-    setActiveStep((prevStep) => prevStep + 1);
-  };
-
-  const handleBack = () => {
-    setActiveStep((prevStep) => prevStep - 1);
-  };
-
-  const handleClick = (idx) => {
-    setActiveStep(idx);
-  };
-
-  const handleMarkComplete = () => {
-    const newCompletedSteps = {...completedSteps};
-    for (let i = 0; i <= activeStep; i++) {
-      newCompletedSteps[i] = true;
-    }
-    setCompletedSteps(newCompletedSteps);
-  };
-
-  const handleMarkInComplete = () => {
-    const newCompletedSteps = {...completedSteps};
-    for (let i = activeStep; i <= 2; i++) {
-      newCompletedSteps[i] = false;
-    }
-    setCompletedSteps(newCompletedSteps);
-  };
-
-  React.useEffect(() => {
-    setActiveStep(args.activeStep || 0);
-  }, [args.activeStep]);
-
-  return (
-    <div className={css.container}>
-      <Stepper {...args} activeStep={activeStep}>
-        {stepsWithIcon.map((stepDetails, index) => (
-          <Step
-            key={stepDetails.id}
-            index={index}
-            iconName={stepDetails.iconName}
-            iconType={stepDetails.iconType}
-            onClick={handleClick}
-            completed={completedSteps[index]}
-          >
-            <StepLabel>{stepDetails.label}</StepLabel>
-            <StepContent>{stepDetails.description}</StepContent>
-          </Step>
-        ))}
-      </Stepper>
-      <div className={css.spacedActions}>
-        <div className={css.actionBlock}>
-          <Button
-            size="small"
-            type="secondary"
-            onClick={handleBack}
-            disabled={!(activeStep > 0)}
-            iconLeftName="arrow-left"
-          >
-            Back
-          </Button>
-          <Button
-            size="small"
-            type="secondary"
-            onClick={handleNext}
-            disabled={!(activeStep < steps.length - 1)}
-            iconRightName="arrow-right"
-          >
-            Next
-          </Button>
-        </div>
-        <div className={css.actionBlock}>
-          <Button
-            size="small"
-            type="primary"
-            onClick={handleMarkComplete}
-            iconLeftName="circle-check"
-            disabled={completedSteps[activeStep]}
-          >
-            Mark Complete
-          </Button>
-          <Button
-            size="small"
-            type="danger"
-            onClick={handleMarkInComplete}
-            iconLeftName="circle-xmark"
-            disabled={!completedSteps[activeStep]}
-          >
-            Mark Incomplete
-          </Button>
-        </div>
-      </div>
-
-      <BasicDialog
-        isOpen={openDialog}
-        abortText="Close"
-        body="Please mark the current step complete to move on to the next one!"
-        handleAbort={() => setOpenDialog(false)}
-        heading="Unable to proceed to next step"
-        semantic="danger"
-      />
-    </div>
-  );
-};
-
-_WithStepIcon.args = {
-  activeStep: 0,
-};
-*/

package/lib/components/Stepper/Stepper.tsx

@@ -1,68 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import {classify} from '../../utils/classify';
-
-import css from './Stepper.module.css';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-}>;
-
-export type StepperProps = {
-  classNames?: ClassNames;
-  activeStep?: number;
-  children: React.ReactNode;
-  orientation?: 'horizontal' | 'vertical';
-  disabled?: boolean;
-};
-
-export const Stepper: Flow.AbstractComponent<StepperProps, HTMLDivElement> =
-  React.forwardRef<HTMLDivElement, StepperProps>((
-    {
-      activeStep = 0,
-      children,
-      orientation = 'horizontal',
-      classNames,
-      disabled = false,
-    }: StepperProps,
-    ref,
-  ) => {
-    const childrenArray = React.Children.toArray(children).filter(Boolean);
-    const steps = childrenArray.map((step, index) => {
-      let isLastStepCompleted = false;
-// @ts-ignore - TS2339 - Property 'props' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<React.ReactNode> | ReactPortal | Promise<...>'.
-      const {disabled: disabledChild, onClick} = step.props;
-      if (index === 0) {
-        isLastStepCompleted = true;
-      } else {
-// @ts-ignore - TS2339 - Property 'props' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<React.ReactNode> | ReactPortal | Promise<...>'.
-        isLastStepCompleted = childrenArray[index - 1]?.props?.completed;
-      }
-// @ts-ignore - TS2769 - No overload matches this call.
-      return React.cloneElement(step, {
-// @ts-ignore - TS2339 - Property 'props' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<React.ReactNode> | ReactPortal | Promise<...>'.
-        ...step.props,
-        index,
-        last: index + 1 === childrenArray.length,
-        active: index === activeStep,
-        allowClick: onClick && index !== activeStep && isLastStepCompleted,
-        disabled: disabledChild || disabled,
-      });
-    });
-
-    return (
-      <div
-        className={classify(
-          css.stepperWrapper,
-          css[orientation],
-          classNames?.wrapper,
-        )}
-        ref={ref}
-      >
-        {steps}
-      </div>
-    );
-  });

package/lib/components/Stepper/index.ts

@@ -1,2 +0,0 @@
-export * from './Step';
-export * from './Stepper';