@indico-data/design-system 2.0.3 → 2.1.3

package/lib/legacy/components/WizardWithSidebar/WizardWithSidebar.d.ts

@@ -1,58 +0,0 @@
-import React from 'react';
-import { PermafrostComponent } from '@/types';
-export type CancelText = {
-    confirmText: string;
-    message?: string;
-    rejectText: string;
-    title: string;
-};
-type Props = PermafrostComponent & {
-    children: React.ReactNode;
-    /**
-     * text for the cancel confirmation modal
-     */
-    confirmCancel: CancelText;
-    disableNextStep?: boolean;
-    disablePrevStep?: boolean;
-    disableSubmit?: boolean;
-    isLastStep?: boolean;
-    /**
-     * for testing/mocking purposes
-     */
-    startingStep?: string;
-    stepSchema: {
-        [key: string]: {
-            inputsRequiringValidation: string[];
-            description: string[];
-        };
-    };
-    /**
-     * the text to appear on the submit button
-     */
-    submitButtonLabel: string;
-    /**
-     * Puts button in "busy" mode, and replaces button label with this text
-     */
-    submitProcessing?: string;
-    wizardTitle: string;
-    onCancel?(): void;
-    onNextPress?(): boolean;
-    /**
-     * returns the current step name to the parent component
-     */
-    onStepChange(stepName: string): void;
-    onSubmit(): void;
-    /**
-     * Allows for any custom attribute to be added directly to "next button" in wizard
-     */
-    nextButtonProps?: {
-        'data-cy': string;
-    };
-    bottomNav?: boolean;
-    validationErrors?: any;
-    backgroundColor?: string;
-    color?: string;
-    buttonColor?: string;
-};
-export declare function WizardWithSidebar(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/legacy/components/WizardWithSidebar/WizardWithSidebar.stories.d.ts

@@ -1,46 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import { WizardWithSidebar } from './WizardWithSidebar';
-declare const meta: {
-    component: typeof WizardWithSidebar;
-    title: string;
-    args: {
-        buttonColor: string;
-        backgroundColor: string;
-        color: string;
-        stepSchema: {
-            'Library Details': {
-                inputsRequiringValidation: string[];
-                description: never[];
-            };
-            'Configure Source': {
-                inputsRequiringValidation: never[];
-                description: string[];
-            };
-            Summary: {
-                inputsRequiringValidation: never[];
-                description: never[];
-            };
-        };
-        onCancel: () => void;
-        onSubmit: () => void;
-        wizardTitle: string;
-        confirmCancel: {
-            title: string;
-            message: string;
-            confirmText: string;
-            rejectText: string;
-        };
-        submitButtonLabel: string;
-        onNextPress: () => true;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof WizardWithSidebar>;
-export declare const FirstStep: Story;
-export declare const SecondStep: Story;
-export declare const LastStep: Story;
-export declare const DisabledNextStep: Story;
-export declare const DisabledPreviousStep: Story;
-export declare const SubmitProcessing: Story;
-export declare const LastStepOverride: Story;
-export declare const WithValidationErrors: Story;

package/lib/legacy/components/WizardWithSidebar/WizardWithSidebar.styles.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-export declare const StyledWizardWithSidebar: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    backgroundcolor?: string | undefined;
-    color?: string | undefined;
-    buttoncolor?: string | undefined;
-    className?: string | undefined;
-    "data-cy"?: string | undefined;
-    id?: string | undefined;
-}>>;

package/lib/legacy/components/WizardWithSidebar/index.d.ts

@@ -1,2 +0,0 @@
-export { WizardWithSidebar } from './WizardWithSidebar';
-export { StyledWizardWithSidebar } from './WizardWithSidebar.styles';

package/src/legacy/components/Wizard/Wizard.stories.tsx

@@ -1,180 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Wizard } from './Wizard';
-import { WizardCard, WizardSection } from './Wizard.styles';
-
-const meta = {
-  component: Wizard,
-  title: 'legacy/wizards/Wizard',
-  args: {
-    steps: ['Task Details', 'Labels and Keywords', 'Labelers'],
-    onCancel: () => console.info('cancelling'),
-    onSubmit: () => console.info('submitting'),
-    wizardTitle: 'New Teach Task',
-    confirmCancel: {
-      title: 'Are you sure you want to stop creating this Task?',
-      message: 'Your Task will not be saved, nor available to be labeled.',
-      confirmText: 'Yes, go ahead',
-      rejectText: 'No, go back',
-    },
-    submitButtonLabel: 'Add Teach Task',
-    // Evidently, we need to add this prop or its corresponding logic within the component evaluates to false in storybook.
-    // Was not happening in earlier version, so was not necessary.
-    onNextPress: () => true,
-  },
-} satisfies Meta<typeof Wizard>;
-
-export default meta;
-type Story = StoryObj<typeof Wizard>;
-
-function StoryRender(props: any) {
-  const [currentStep, setCurrentStep] = useState('');
-
-  const currentStepContent = () => {
-    if (currentStep === 'Task Details') {
-      return (
-        <WizardCard>
-          <WizardSection>
-            <h2 className="section-heading">Task Name</h2>
-
-            <div className="section-content">hello yes this is dog</div>
-          </WizardSection>
-
-          <WizardSection>
-            <h2 className="section-heading">Dataset</h2>
-
-            <div className="section-content" />
-          </WizardSection>
-
-          <WizardSection>
-            <h2 className="section-heading">
-              Processors and Branches <span className="supporting-text">(Optional)</span>
-            </h2>
-
-            <div className="section-content" />
-          </WizardSection>
-        </WizardCard>
-      );
-    }
-
-    if (currentStep === 'Labels and Keywords') {
-      return (
-        <WizardCard>
-          <WizardSection>
-            <h2 className="section-heading">Labels</h2>
-
-            <div className="section-content" />
-          </WizardSection>
-
-          <WizardSection>
-            <h2 className="section-heading">Label Predictions</h2>
-
-            <div className="section-content" />
-          </WizardSection>
-
-          <WizardSection>
-            <h2 className="section-heading">
-              Keywords <span className="supporting-text">(Optional)</span>
-            </h2>
-
-            <div className="section-content" />
-          </WizardSection>
-        </WizardCard>
-      );
-    }
-
-    if (currentStep === 'Labelers') {
-      return (
-        <WizardCard>
-          <WizardSection>
-            <h2 className="section-heading">Labelers Required Per Example</h2>
-
-            <div className="section-content" />
-          </WizardSection>
-
-          <WizardSection>
-            <h2 className="section-heading">
-              Team
-              <span className="supporting-text" style={{ marginLeft: '0.25em' }}>
-                1
-              </span>
-            </h2>
-
-            <div className="section-content" />
-          </WizardSection>
-        </WizardCard>
-      );
-    }
-  };
-
-  return (
-    <Wizard {...props} onStepChange={(step) => setCurrentStep(step)}>
-      {currentStepContent()}
-    </Wizard>
-  );
-}
-
-export const Normal: Story = {
-  args: {
-    startingStep: 'Labels and Keywords',
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const FirstStep: Story = {
-  // args: {},
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const LastStep: Story = {
-  args: {
-    startingStep: 'Labelers',
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const DisabledNextStep: Story = {
-  args: {
-    disableNextStep: true,
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const DisabledPreviousStep: Story = {
-  args: {
-    startingStep: 'Labels and Keywords',
-    disablePrevStep: true,
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const SubmitProcessing: Story = {
-  args: {
-    submitProcessing: 'Adding Teach Task',
-    startingStep: 'Labelers',
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};
-
-export const LastStepOverride: Story = {
-  args: {
-    startingStep: 'Labelers',
-    isLastStep: false,
-  },
-  render: (args) => {
-    return <StoryRender {...args} />;
-  },
-};

package/src/legacy/components/Wizard/Wizard.styles.ts

@@ -1,72 +0,0 @@
-import styled from 'styled-components';
-
-import { COLORS, TYPOGRAPHY } from '@/legacy/tokens';
-
-export const StyledWizard = styled.div`
-  nav {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    margin-bottom: 24px;
-
-    // override for some styling in AppChrome IPA component
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-  }
-
-  h1 {
-    margin-bottom: 0;
-  }
-
-  .wizard-buttons {
-    display: flex;
-    align-items: center;
-
-    font-size: ${TYPOGRAPHY.fontSize.subheadLarge};
-
-    button.link-style {
-      font-size: inherit;
-      margin-right: 1em;
-    }
-  }
-`;
-
-const commonPadding = '20px';
-
-// todo: permafrost: move into css fragment at top level
-export const WizardCard = styled.div`
-  width: 100%;
-  padding: 14px ${commonPadding};
-
-  background-color: ${COLORS.clay};
-  border: 1px solid ${COLORS.oxfordBlue};
-  border-radius: 4px;
-  box-shadow: 1px 1px 1px 0 ${COLORS.ebony};
-`;
-
-export const WizardSection = styled.div`
-  .section-heading {
-    margin-bottom: 0;
-    // todo: store value elsewhere
-    font-size: 22px;
-    color: ${COLORS.lightFontColor};
-
-    .supporting-text {
-      font-size: ${TYPOGRAPHY.fontSize.subheadLarge};
-      color: ${COLORS.defaultFontColor};
-    }
-  }
-
-  .section-content {
-    padding: ${commonPadding};
-  }
-
-  :not(:last-of-type) {
-    margin-bottom: ${commonPadding};
-
-    .section-content {
-      border-bottom: 1px solid ${COLORS.ebony};
-    }
-  }
-`;

package/src/legacy/components/Wizard/Wizard.tsx

@@ -1,211 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React, { useEffect, useMemo, useState } from 'react';
-
-import { Button, ConfirmModal, IconButton } from '@/legacy/components';
-import { PermafrostComponent, ButtonSize } from '@/types';
-
-import { StyledWizard } from './Wizard.styles';
-
-export type CancelText = {
-  // "confirm" button text
-  confirmText: string;
-  message?: string;
-  // "reject" button text
-  rejectText: string;
-  title: string;
-  // Optional, supporting text
-};
-
-type Props = PermafrostComponent & {
-  children: React.ReactNode;
-  /**
-   * text for the cancel confirmation modal
-   */
-  confirmCancel: CancelText;
-  disableNextStep?: boolean;
-  disablePrevStep?: boolean;
-  disableSubmit?: boolean;
-  isLastStep?: boolean;
-  /**
-   * for testing/mocking purposes
-   */
-  startingStep?: string;
-  steps: string[];
-  /**
-   * the text to appear on the submit button
-   */
-  submitButtonLabel: string;
-  /**
-   * Puts button in "busy" mode, and replaces button label with this text
-   */
-  submitProcessing?: string;
-  wizardTitle: string;
-  onCancel?(): void;
-  onNextPress?(): boolean;
-  /**
-   * returns the current step name to the parent component
-   */
-  onStepChange(stepName: string): void;
-  onSubmit(): void;
-  /**
-   * Allows for any custom attribute to be added directly to "next button" in wizard
-   */
-  nextButtonProps?: {
-    'data-cy': string;
-  };
-};
-
-const commonButtonProps = {
-  size: 'large' as ButtonSize,
-};
-
-export function Wizard(props: Props) {
-  const {
-    children,
-    className,
-    confirmCancel,
-    disableNextStep,
-    disablePrevStep,
-    disableSubmit,
-    id,
-    isLastStep,
-    onCancel,
-    onNextPress,
-    onStepChange,
-    onSubmit,
-    startingStep,
-    steps,
-    submitButtonLabel,
-    submitProcessing = '',
-    wizardTitle,
-    nextButtonProps,
-  } = props;
-
-  const [currentStep, setCurrentStep] = useState<string>(startingStep || steps[0]);
-  const [openCancelConfirm, setOpenCancelConfirm] = useState<boolean>(false);
-
-  const onLastStep: boolean = useMemo(() => {
-    if (isLastStep !== undefined) {
-      return isLastStep;
-    }
-
-    return steps.indexOf(currentStep) === steps.length - 1;
-  }, [isLastStep, steps, currentStep]);
-
-  const isBusy = !!(submitProcessing && submitProcessing.length > 0);
-
-  const nextStep = () => {
-    if (!onLastStep) {
-      const currentIndex = steps.indexOf(currentStep);
-
-      setCurrentStep(steps[currentIndex + 1]);
-    }
-  };
-
-  const prevStep = () => {
-    const currentIndex = steps.indexOf(currentStep);
-
-    if (currentIndex !== 0) {
-      setCurrentStep(steps[currentIndex - 1]);
-    }
-  };
-
-  // handles the user's selection in the cancel confirmation modal
-  const handleCancelRequest = (confirmCancel: boolean) => {
-    if (confirmCancel && onCancel) {
-      onCancel();
-    }
-
-    setOpenCancelConfirm(false);
-  };
-
-  const handleNextPress = () => {
-    const allowNext = onNextPress ? onNextPress() : true;
-
-    if (!allowNext) {
-      return;
-    }
-
-    if (onLastStep) {
-      handleSubmit();
-    } else {
-      nextStep();
-    }
-  };
-
-  const handleSubmit = () => {
-    onSubmit();
-  };
-
-  // report current step to the consuming component
-  useEffect(() => {
-    onStepChange(currentStep);
-  }, [currentStep]);
-
-  // ensures `currentStep` is reset on unmount, just in case
-  useEffect(() => {
-    return () => setCurrentStep(steps[0] || '');
-  }, []);
-
-  return (
-    <StyledWizard className={className} data-cy={props['data-cy']} id={id}>
-      <nav>
-        <h1>
-          {wizardTitle}: {currentStep}
-        </h1>
-
-        <div className="wizard-buttons">
-          <Button onClick={() => setOpenCancelConfirm(true)} variant="link-style">
-            Cancel
-          </Button>
-
-          {steps.indexOf(currentStep) !== 0 && (
-            <IconButton
-              {...commonButtonProps}
-              iconName="fa-arrow-left"
-              label="Previous Step"
-              onPress={prevStep}
-              isDisabled={disablePrevStep}
-            />
-          )}
-
-          {onLastStep ? (
-            <IconButton
-              {...commonButtonProps}
-              variant="primary"
-              iconName="check"
-              busy={isBusy}
-              label={isBusy ? submitProcessing : submitButtonLabel}
-              onPress={handleNextPress}
-              isDisabled={disableSubmit}
-            />
-          ) : (
-            <IconButton
-              {...commonButtonProps}
-              variant="primary"
-              iconSide="end"
-              iconName="fa-arrow-right"
-              label="Next Step"
-              onPress={handleNextPress}
-              isDisabled={disableNextStep}
-              {...nextButtonProps}
-            />
-          )}
-        </div>
-      </nav>
-
-      <>{children}</>
-
-      <ConfirmModal
-        title={confirmCancel.title}
-        message={confirmCancel.message}
-        confirmText={confirmCancel.confirmText}
-        rejectText={confirmCancel.rejectText}
-        open={openCancelConfirm}
-        clickOutsideHandler={() => setOpenCancelConfirm(false)}
-        responseHandler={handleCancelRequest}
-      />
-    </StyledWizard>
-  );
-}

package/src/legacy/components/Wizard/index.ts

@@ -1,2 +0,0 @@
-export { Wizard } from './Wizard';
-export { WizardCard, WizardSection, StyledWizard } from './Wizard.styles';