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

package/lib/components/Panel/Panel.stories.tsx

@@ -1,452 +0,0 @@
-import * as React from 'react';
-
-import {Button} from '../Button';
-import {Dialog, DialogBody, DialogFooter, DialogHeader} from '../Dialog';
-import {SimpleDropdown} from '../Dropdown';
-import {Input} from '../Input';
-import {BodyLarge, SubTitleLarge} from '../Text';
-import {Textarea} from '../Textarea';
-import {Tooltip} from '../Tooltip';
-
-import type {PanelProps} from './Panel';
-import {Panel, PanelBody, PanelFooter, PanelHeader} from './Panel';
-
-import css from './Panel.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Panel',
-  argTypes: {
-    isOpen: {
-      description: 'if **true**, the modal is presented',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    classNames: {
-      description: 'External classnames to be applied',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: '{container?: string, content?: string, backdrop?: string}',
-        },
-      },
-    },
-    tapOutsideToClose: {
-      description: 'if **true**, closes the modal on tap of backdrop',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'true'},
-      },
-    },
-    anchor: {
-      options: ['left', 'right'],
-      description: 'Position of Panel',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'left'},
-      },
-    },
-    allowBackgroundInteraction: {
-      description:
-        'if **true**, allows interaction with the background content. This would remove the backdrop layer for the panel and set tapOutsideToClose to false',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    size: {
-      description:
-        'Panel supports only three size variants namely small, medium and large. `small` < `medium` < `large`',
-      options: ['small', 'medium', 'large'],
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    children: {
-      description: 'The children to rendered inside the Modal window',
-      table: {
-        type: {summary: 'React.ReactNode'},
-      },
-    },
-    onClose: {
-      description: '**onClose** handler is triggered on backdrop click',
-      action: 'clicked',
-      table: {
-        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-      },
-    },
-    customAnimation: {
-      description: `
-\`<Modal>\` and its derivatives(\`<Dialog>\`, \`<Panel>\`) support
-\`customAnimation: UseTransitionStylesProps\` prop for
-all your custom animation needs.
-It defines the following properties:
-
-- \`duration\` (optional): Specifies the duration of the animation in milliseconds.
-It can be a single number to set the duration for both opening and closing animations,
-or an object with separate open and close properties to specify different durations
-for opening and closing animations.
-- \`initial\` (optional): Represents the initial CSS styles for the modal component when
-it is first mounted. This property allows you to define the initial appearance of the
-modal before any animations occur.
-- \`open\` (optional): Defines the CSS styles that should be applied when the modal is fully
-opened. This property specifies the appearance of the modal when it transitions from the
-initial state to the fully open state.
-- \`close\` (optional): Specifies the CSS styles for the modal when it is being closed. This
-property determines the appearance of the modal when it transitions from the fully open
-state to the closed state.
-- \`common\` (optional): Represents the CSS styles that are common to all states of the modal
-component. These styles will be applied throughout the entire lifecycle of the modal,
-regardless of whether it is in the initial, open, or close state. You can use this property
-to define shared styles that should be present in all states.
-
-The modal component follows a predefined order of states as it transitions through
-its lifecycle. It starts in the \`unmounted\` state, then moves to the \`initial\` state when mounted.
-From there, it can transition to the \`open\` state when fully opened, and then to the \`close\` state
-when being closed. Finally, it returns to the \`unmounted\` state when it is no longer needed.
-
-This is the transition order: \`unmounted\` -> \`initial\` -> \`open\` -> \`close\` -> \`unmounted\`
-By specifying the appropriate values for the \`duration\`, \`initial\`, \`open\`, \`close\`, and \`common\` properties,
-you can control the animation and styling of the modal at each stage of its lifecycle.
-      `,
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: 'UseTransitionStylesProps'},
-      },
-    },
-    hideBackdrop: {
-      description:
-        'if **true**, dark backdrop is removed and transparent backdrop is applied on the DOM',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'true'},
-      },
-    },
-    initialFocus: {
-      description:
-        'Which element to initially focus. Can be a number (tabbable index as specified by the order)',
-      control: {
-        type: 'number',
-      },
-      table: {
-        type: {summary: 'number'},
-        defaultValue: {summary: '-1'},
-      },
-    },
-  },
-
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Panel component',
-      description: {
-        component: `
-\`\`\`js
-import { Panel, PanelBody, PanelHeader, PanelFooter } from "@spaced-out/ui-design-system/lib/components/Panel";
-\`\`\`
-Destinations in the app are accessible through Panels. Panels are **side sheets**, which are attached to the left or
-right edge of the screen and are surfaces with extra content. Panels can either be permanently on-screen or controlled by an **action**.
-
-Panel is a variation of a **<a href="../?path=/docs/components-modal--docs">Modal</a>** with additional animation, position and size overrides.
-
-Semantically a Panel component should be composed from \`PanelHeader\`, \`PanelBody\`, and \`PanelFooter\` **components**, these are nothing but layout components which defines
-appropriate spacing for the children living in them. \`PanelHeader\` adds a close icon by default and provides a callback on click. You can pass a prop to
-show/hide the close button as well.
-Each of these components also exposes a className
-          `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Panel/Panel.jsx',
-    },
-  },
-};
-
-export const _Normal = (args: PanelProps) => {
-  const [isOpen, setIsOpen] = React.useState(args.isOpen);
-
-  React.useEffect(() => {
-    setIsOpen(args.isOpen);
-  }, [args.isOpen]);
-
-  return (
-    <div className={css.container}>
-      <Button onClick={() => setIsOpen(!isOpen)}>Open Panel</Button>
-      <Panel {...args} isOpen={isOpen} onClose={() => setIsOpen(false)}>
-        <PanelHeader onCloseButtonClick={() => setIsOpen(false)} size="medium">
-          <SubTitleLarge>Panel Title</SubTitleLarge>
-        </PanelHeader>
-
-        <PanelBody>
-          <Input
-            type="email"
-            label="Email Address"
-            placeholder="Enter your email address"
-          />
-          <br />
-          <SimpleDropdown
-            label="Issue Type"
-            placeholder="Select an issue type"
-            options={[
-              {
-                iconLeft: 'bug',
-                iconLeftType: 'duotone',
-                key: '1',
-                label: 'Production Issue',
-              },
-              {
-                iconLeft: 'bug-slash',
-                iconLeftType: 'duotone',
-                key: '2',
-                label: 'Dev Issue',
-              },
-              {
-                iconLeft: 'ban-bug',
-                iconLeftType: 'duotone',
-                key: '4',
-                label: 'Product Issue',
-              },
-            ]}
-          />
-          <br />
-          <Textarea
-            label="Description"
-            placeholder="Enter the issue description"
-          />
-        </PanelBody>
-
-        <PanelFooter>
-          <Button type="tertiary" onClick={() => setIsOpen(false)}>
-            Close
-          </Button>
-          <Button type="secondary" onClick={() => setIsOpen(false)}>
-            Save
-          </Button>
-        </PanelFooter>
-      </Panel>
-    </div>
-  );
-};
-
-_Normal.args = {
-  anchor: 'right',
-  size: 'medium',
-  tapOutsideToClose: true,
-  initialFocus: 1,
-};
-
-export const _WithNestedDialog = (args: PanelProps) => {
-  const [isOpen, setIsOpen] = React.useState(args.isOpen || false);
-  const [isOpen2, setIsOpen2] = React.useState(false);
-
-  React.useEffect(() => {
-// @ts-ignore - TS2345 - Argument of type 'boolean | undefined' is not assignable to parameter of type 'SetStateAction<boolean>'.
-    setIsOpen(args.isOpen);
-  }, [args.isOpen]);
-
-  return (
-    <div className={css.container}>
-      <Button onClick={() => setIsOpen(!isOpen)}>
-        Open Panel With Nested Dialog
-      </Button>
-      <Panel {...args} isOpen={isOpen} onClose={() => setIsOpen(false)}>
-        <PanelHeader onCloseButtonClick={() => setIsOpen(false)} size="medium">
-          <SubTitleLarge>Panel Title(First Elevation)</SubTitleLarge>
-        </PanelHeader>
-
-        <PanelBody>
-          <Input
-            type="email"
-            label="Email Address"
-            placeholder="Enter your email address"
-          />
-          <br />
-          <SimpleDropdown
-            label="Issue Type"
-            placeholder="Select an issue type"
-            options={[
-              {
-                iconLeft: 'bug',
-                iconLeftType: 'duotone',
-                key: '1',
-                label: 'Production Issue',
-              },
-              {
-                iconLeft: 'bug-slash',
-                iconLeftType: 'duotone',
-                key: '2',
-                label: 'Dev Issue',
-              },
-              {
-                iconLeft: 'ban-bug',
-                iconLeftType: 'duotone',
-                key: '4',
-                label: 'Product Issue',
-              },
-            ]}
-          />
-          <br />
-          <Textarea
-            label="Description"
-            placeholder="Enter the issue description"
-          />
-          <Dialog
-            initialFocus={1}
-            onClose={() => setIsOpen2(false)}
-            semantic="neutral"
-            isOpen={isOpen2}
-          >
-            <DialogHeader>
-              <SubTitleLarge> Dialog Title</SubTitleLarge>
-            </DialogHeader>
-            <DialogBody>
-              <BodyLarge color="secondary">
-                Dialogs should only be used occasionally because they are
-                intended to be disruptive. Dialogs come in multiple variants.
-              </BodyLarge>
-            </DialogBody>
-            <DialogFooter>
-              <Button isFluid onClick={() => setIsOpen2(false)} type="tertiary">
-                Close
-              </Button>
-              <Button
-                isFluid
-                onClick={() => setIsOpen2(false)}
-                type="secondary"
-              >
-                Confirm
-              </Button>
-            </DialogFooter>
-          </Dialog>
-        </PanelBody>
-
-        <PanelFooter>
-          <Button type="tertiary" onClick={() => setIsOpen(false)}>
-            Close
-          </Button>
-          <Button type="secondary" onClick={() => setIsOpen2(true)}>
-            Open Nested Dialog
-          </Button>
-        </PanelFooter>
-      </Panel>
-    </div>
-  );
-};
-
-_WithNestedDialog.args = {
-  anchor: 'right',
-  size: 'medium',
-  tapOutsideToClose: true,
-  initialFocus: 1,
-};
-
-export const _WithInteractiveBackground = (args: PanelProps) => {
-  const [isOpen, setIsOpen] = React.useState(args.isOpen);
-
-  React.useEffect(() => {
-    setIsOpen(args.isOpen);
-  }, [args.isOpen]);
-
-  return (
-    <div className={css.container}>
-      <Button onClick={() => setIsOpen(!isOpen)}>Open Panel</Button>
-      <div className={css.interactionContainer}>
-        <Tooltip
-          body="When the panel opens, the background content is interactive"
-          bodyMaxLines={2}
-          placement="top"
-          title="I am interactive tooltip"
-        >
-          <Button iconLeftName="face-sunglasses" type="tertiary">
-            Hover Me after opening the panel
-          </Button>
-        </Tooltip>
-      </div>
-
-      <Panel {...args} isOpen={isOpen} onClose={() => setIsOpen(false)}>
-        <PanelHeader onCloseButtonClick={() => setIsOpen(false)} size="medium">
-          <SubTitleLarge>Panel Title</SubTitleLarge>
-        </PanelHeader>
-
-        <PanelBody>
-          <Input
-            type="email"
-            label="Email Address"
-            placeholder="Enter your email address"
-          />
-          <br />
-          <SimpleDropdown
-            label="Issue Type"
-            placeholder="Select an issue type"
-            options={[
-              {
-                iconLeft: 'bug',
-                iconLeftType: 'duotone',
-                key: '1',
-                label: 'Production Issue',
-              },
-              {
-                iconLeft: 'bug-slash',
-                iconLeftType: 'duotone',
-                key: '2',
-                label: 'Dev Issue',
-              },
-              {
-                iconLeft: 'ban-bug',
-                iconLeftType: 'duotone',
-                key: '4',
-                label: 'Product Issue',
-              },
-            ]}
-          />
-          <br />
-          <Textarea
-            label="Description"
-            placeholder="Enter the issue description"
-          />
-        </PanelBody>
-
-        <PanelFooter>
-          <Button type="tertiary" onClick={() => setIsOpen(false)}>
-            Close
-          </Button>
-          <Button type="secondary" onClick={() => setIsOpen(false)}>
-            Save
-          </Button>
-        </PanelFooter>
-      </Panel>
-    </div>
-  );
-};
-
-_WithInteractiveBackground.args = {
-  anchor: 'right',
-  size: 'medium',
-  initialFocus: 1,
-  allowBackgroundInteraction: true,
-};

package/lib/components/Panel/Panel.tsx

@@ -1,181 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import useMountTransition from '../../hooks/useMountTransition';
-import {
-  motionDurationNormal,
-  motionDurationSlow,
-} from '../../styles/variables/_motion';
-import {
-  spaceFluid,
-  spaceNegFluid,
-  spaceNone,
-} from '../../styles/variables/_space';
-import classify from '../../utils/classify';
-import {Button} from '../Button';
-import type {ModalProps} from '../Modal';
-import {Modal} from '../Modal';
-import {Truncate} from '../Truncate';
-
-import css from './Panel.module.css';
-
-
-export type PanelSize = 'small' | 'medium' | 'large';
-export type PanelAnchor = 'left' | 'right';
-
-export type PanelHeaderProps = {
-  children?: React.ReactNode;
-  hideCloseBtn?: boolean;
-  onCloseButtonClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
-  className?: string;
-  size?: 'medium' | 'small';
-};
-
-type FooterClassNames = Readonly<{
-  wrapper?: string;
-  actions?: string;
-}>;
-
-export type PanelFooterProps = {
-  children?: React.ReactNode;
-  classNames?: FooterClassNames;
-};
-
-export type PanelBodyProps = {
-  children?: React.ReactNode;
-  className?: string;
-};
-
-export type PanelProps = ((ModalProps) & {
-  allowBackgroundInteraction?: boolean;
-  size?: PanelSize;
-  anchor?: PanelAnchor;
-});
-
-const getDefaultPanelAnimation = (anchor: PanelAnchor) => ({
-  // Configure both open and close durations:
-  duration: {
-    open: parseInt(motionDurationSlow),
-    close: parseInt(motionDurationNormal),
-  },
-  initial: {
-    transform: `translateX(${anchor === 'right' ? spaceFluid : spaceNegFluid})`,
-  },
-  open: {
-    transform: `translateX(${spaceNone})`,
-  },
-  close: {
-    transform: `translateX(${anchor === 'right' ? spaceFluid : spaceNegFluid})`,
-  },
-});
-
-export const PanelHeader = (
-  {
-    children,
-    hideCloseBtn,
-    onCloseButtonClick,
-    className,
-    size,
-  }: PanelHeaderProps,
-) => (<>
-  {React.Children.count(children) > 0 && (
-    <div className={classify(css.panelHeader, className)}>
-      <div className={css.headerContent}>
-        <Truncate>{children}</Truncate>
-      </div>
-      {!hideCloseBtn && (
-        <Button
-          iconLeftName="xmark"
-          type="ghost"
-          onClick={onCloseButtonClick}
-          ariaLabel="Close Button"
-          size={size}
-        ></Button>
-      )}
-    </div>
-  )}
-</>);
-
-export const PanelBody: Flow.AbstractComponent<PanelBodyProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, PanelBodyProps>((
-  {
-    children,
-    className,
-  }: PanelBodyProps,
-  ref,
-) => (<div ref={ref} className={classify(css.panelBody, className)}>
-  {children}
-</div>));
-
-export const PanelFooter = (
-  {
-    children,
-    classNames,
-  }: PanelFooterProps,
-) => (<>
-  {React.Children.count(children) > 0 && (
-    <div className={classify(css.panelFooter, classNames?.wrapper)}>
-      <div className={classify(css.panelFooterActions, classNames?.actions)}>
-        {children}
-      </div>
-    </div>
-  )}
-</>);
-
-export const Panel = (
-  {
-    children,
-    isOpen = false,
-    size = 'medium',
-    anchor = 'left',
-    onClose,
-    hideBackdrop = true,
-    classNames,
-    customAnimation,
-    tapOutsideToClose = true,
-    allowBackgroundInteraction,
-    ...restPanelProps
-  }: PanelProps,
-) => {
-  const isTransitioning = useMountTransition(
-    isOpen,
-    parseInt(motionDurationNormal),
-  );
-
-  const defaultPanelAnimation = getDefaultPanelAnimation(anchor);
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      hideBackdrop={hideBackdrop}
-      tapOutsideToClose={allowBackgroundInteraction ? false : tapOutsideToClose}
-      allowBackgroundInteraction={allowBackgroundInteraction}
-      {...restPanelProps}
-      classNames={{
-        container: classify(
-          css.panelContainer,
-          {
-            [css.in]: isTransitioning,
-            [css.open]: isOpen,
-          },
-          classNames?.container,
-        ),
-        content: classify(
-          css.panel,
-          css[anchor],
-          {
-            [css.medium]: size === 'medium',
-            [css.small]: size === 'small',
-            [css.large]: size === 'large',
-          },
-          classNames?.content,
-        ),
-        backdrop: classify(classNames?.backdrop),
-      }}
-      customAnimation={customAnimation || defaultPanelAnimation}
-    >
-      {children}
-    </Modal>
-  );
-};

package/lib/components/Panel/index.ts

@@ -1,2 +0,0 @@
-export type {PanelAnchor, PanelBodyProps, PanelFooterProps, PanelHeaderProps, PanelProps, PanelSize} from './Panel';
-export {Panel, PanelBody, PanelFooter, PanelHeader} from './Panel';