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

package/lib/components/Timeline/Timeline.stories.tsx

@@ -1,272 +0,0 @@
-import * as React from 'react';
-
-import {CardContent} from '../Card';
-import {SimpleInlineDropdown} from '../InlineDropdown';
-import {BodyMedium, BodyMediumBold} from '../Text';
-
-import type {TimelineProps} from './';
-import {ORIENTATION, Timeline} from './Timeline';
-import {TimelineItem} from './TimelineItem';
-
-import css from './Timeline.stories.module.css';
-
-
-const orientationOptions: Array<unknown> = [...Object.values(ORIENTATION)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Timeline/Timeline',
-  component: Timeline,
-  argTypes: {
-    classNames: {
-      description: 'Provide an optional className to be applied to the wrapper',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: '{wrapper?: string}',
-        },
-      },
-    },
-    orientation: {
-      control: {type: 'select'},
-      options: orientationOptions,
-      description: 'The main content\'s placement with respect to the timeline.',
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: ORIENTATION.left},
-        disable: true, // to hide argType's row from the table
-      },
-    },
-    children: {
-      description:
-        'A list of `TimelineItem` components to be displayed as timeline.',
-      type: {required: true},
-      table: {
-        type: {
-          summary: 'React.ReactNode',
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Timeline component.',
-      description: {
-        component: `
-\`\`\`js
-import type {TimelineProps} from '@spaced-out/ui-design-system/lib/components/Timeline';
-import {Timeline, TimelineItem} from '@spaced-out/ui-design-system/lib/components/Timeline';
-\`\`\`
-
-The timeline component displays events in chronological order, showing dates and descriptions to track progress over time.
-
-### Usage
-
-The Timeline component takes in the following props:
-
-\`\`\`jsx
-<Timeline
-  orientation="left"
-  classNames={{}}
->
-  {/* TimelineItem components go here */}
-</Timeline>
-\`\`\`
-
-The Timeline component should be used with one or more TimelineItem components as children. Each TimelineItem component represents an individual event in the Timeline. The TimelineItem component is responsible for rendering the TimelineItem title and content. Make sure to import the TimelineItem component as well.
-
-### TimelineItem Component
-
-The TimelineItem component represents a single Event within the Timeline. It should be used as a child component of the Timeline. Each TimelineItem component can have its own unique icon, title and content.
-
-\`\`\`jsx
-import { TimelineItem } from "@spaced-out/ui-design-system/lib/components/Timeline";
-
-<Timeline orientation="left / right">
-  <TimelineItem id="convocation" iconName="calendar" title="Convocation 2024" classNames={{wrapper: css.timelineItemWrapper}}>
-    {/* TimelineItem content go here */}
-  </TimelineItem>
-  {/* Add more TimelineItem components for additional events */}
-</Timeline>
-\`\`\`
-
-Please note that the TimelineItem component should be imported separately in order to use it within the Timeline component.
-
-Remember to customize the props, title, and content according to your specific use case.`,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Timeline/Timeline.jsx',
-    },
-  },
-};
-
-export const _Timeline = (args: TimelineProps) => (<Timeline {...args}>
-  <TimelineItem
-    iconName="calendar"
-    title="Yesterday"
-    description="Wed, June 28"
-  >
-    <CardContent className={css.content}>
-      <BodyMediumBold>Aristotle</BodyMediumBold>
-      <BodyMedium color="secondary">
-        Happiness depends upon ourselves.
-      </BodyMedium>
-    </CardContent>
-  </TimelineItem>
-  <TimelineItem iconName="calendar" title="Today" description="Wed, June 29">
-    <CardContent className={css.content}>
-      <BodyMediumBold>Nelson Mandela</BodyMediumBold>
-      <BodyMedium color="secondary">
-        It always seems impossible until it's done.
-      </BodyMedium>
-    </CardContent>
-  </TimelineItem>
-  <TimelineItem
-    iconName="calendar"
-    title="Tomorrow"
-    description="Wed, June 30"
-  >
-    <CardContent className={css.content}>
-      <BodyMediumBold>Mahatma Gandhi</BodyMediumBold>
-      <BodyMedium color="secondary">
-        Live as if you were to die tomorrow.
-      </BodyMedium>
-    </CardContent>
-  </TimelineItem>
-  <TimelineItem
-    iconName="calendar"
-    title="Next month"
-    description="Wed, July 1"
-  >
-    <CardContent className={css.content}>
-      <BodyMediumBold>Martin Luther King Jr. </BodyMediumBold>
-      <BodyMedium color="secondary">
-        The time is always right to do what is right.
-      </BodyMedium>
-    </CardContent>
-  </TimelineItem>
-</Timeline>);
-
-const DATE_OPTIONS = [
-  {
-    key: 'today',
-    label: 'Today',
-  },
-  {
-    key: 'yesterday',
-    label: 'Yesterday',
-  },
-  {
-    key: 'last-week',
-    label: 'Last week',
-  },
-  {
-    key: 'last-month',
-    label: 'Last month',
-  },
-  {
-    key: 'beginning',
-    label: 'The very beginning',
-  },
-];
-
-const DropdownComponent = (
-  {
-    id,
-  }: {
-    id: string;
-  },
-) => (<SimpleInlineDropdown
-  size="small"
-  children={id}
-  options={DATE_OPTIONS.filter(({label}) => label !== id)}
-  onOptionSelect={(option) => {
-    const elementId = option.key;
-    const element = document.getElementById(elementId);
-    if (element) {
-      element.scrollIntoView({
-        behavior: 'smooth',
-        block: 'start',
-      });
-    }
-  }}
-/>);
-
-const DummyContent = (
-  {
-    count,
-  }: {
-    count: number;
-  },
-) => (<CardContent className={css.content}>
-  <BodyMediumBold>Timeline Item {count}</BodyMediumBold>
-  <BodyMedium color="secondary">
-    Cupcake ipsum dolor. Sit amet candy canes powder cotton candy. Gummy bears
-    cotton candy halvah candy canes. Sweet roll lollipop tootsie roll
-    cheesecake marshmallow macaroon chocolate bar biscuit candy.
-  </BodyMedium>
-</CardContent>);
-
-export const _DynamicTimeline = (args: TimelineProps) => (<Timeline {...args}>
-  <TimelineItem
-    id="today"
-    title="Today"
-    iconName="calendar"
-    description="7:12 AM"
-    parentComponent={<DropdownComponent id="Today" />}
-  >
-    <DummyContent count={1} />
-  </TimelineItem>
-  <TimelineItem title="Today" description="1:12 PM" iconName="calendar">
-    <DummyContent count={2} />
-  </TimelineItem>
-  <TimelineItem title="Today" description="5:24 PM" iconName="calendar">
-    <DummyContent count={3} />
-  </TimelineItem>
-  <TimelineItem
-    id="yesterday"
-    title="Yesterday"
-    iconName="calendar"
-    description="May 8, 2024, 8:00 AM"
-    parentComponent={<DropdownComponent id="Yesterday" />}
-  >
-    <DummyContent count={4} />
-  </TimelineItem>
-  <TimelineItem
-    title="Yesterday"
-    description="May 8, 2024, 12:01 PM"
-    iconName="calendar"
-  >
-    <DummyContent count={5} />
-  </TimelineItem>
-  <TimelineItem
-    id="last-week"
-    title="Last week"
-    iconName="calendar"
-    description="May 2, 2024"
-    parentComponent={<DropdownComponent id="Last week" />}
-  >
-    <DummyContent count={6} />
-  </TimelineItem>
-  <TimelineItem
-    id="last-month"
-    title="Last month"
-    iconName="calendar"
-    description="Apr 12, 2024"
-    parentComponent={<DropdownComponent id="Last month" />}
-  >
-    <DummyContent count={7} />
-  </TimelineItem>
-  <TimelineItem
-    id="beginning"
-    title="Beginning"
-    iconName="calendar"
-    description="Jan 1, 2024"
-    parentComponent={<DropdownComponent id="The very beginning" />}
-  >
-    <DummyContent count={8} />
-  </TimelineItem>
-</Timeline>);

package/lib/components/Timeline/Timeline.tsx

@@ -1,57 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-import * as React from 'react';
-
-import {classify} from '../../utils/classify';
-
-import css from './Timeline.module.css';
-
-
-export const ORIENTATION = Object.freeze({
-  left: 'left',
-  right: 'right',
-});
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-}>;
-export type Orientation = typeof ORIENTATION[keyof typeof ORIENTATION];
-
-export type TimelineProps = {
-  children: React.ReactNode;
-  classNames?: ClassNames;
-  orientation?: Orientation;
-};
-
-const Timeline_ = (
-  {
-    classNames,
-    orientation = ORIENTATION.left,
-    children,
-  }: TimelineProps,
-  ref: ((arg1: null | HTMLDivElement) => unknown) | {
-    current: null | HTMLDivElement;
-  },
-) => {
-  const childrenArray = React.Children.toArray(children).filter(Boolean);
-  const timelineItems = childrenArray.map((timelineItem) =>
-// @ts-ignore - TS2769 - No overload matches this call.
-    React.cloneElement(timelineItem, {
-// @ts-ignore - TS2339 - Property 'props' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<React.ReactNode> | ReactPortal | Promise<...>'.
-      ...timelineItem.props,
-      orientation,
-    }),
-  );
-  return (
-    <div
-// @ts-ignore - TS2322 - Type '{ current: HTMLDivElement | null; } | ((arg1: HTMLDivElement | null) => unknown)' is not assignable to type 'Ref<HTMLDivElement> | undefined'.
-      ref={ref}
-      className={classify(css.timelineWrapper, classNames?.wrapper)}
-      data-testid="Timeline"
-    >
-      {timelineItems}
-    </div>
-  );
-};
-
-// @ts-ignore - TS2345 - Argument of type '({ classNames, orientation, children, }: TimelineProps, ref: { current: null | HTMLDivElement; } | ((arg1: null | HTMLDivElement) => unknown)) => React.JSX.Element' is not assignable to parameter of type 'ForwardRefRenderFunction<HTMLDivElement, TimelineProps>'.
-export const Timeline = (React.forwardRef<HTMLDivElement, TimelineProps>(Timeline_) as Flow.AbstractComponent<TimelineProps, HTMLDivElement>);

package/lib/components/Timeline/TimelineItem/TimelineItem.stories.tsx

@@ -1,216 +0,0 @@
-import * as React from 'react';
-
-import {TEXT_COLORS} from '../../../types/typography';
-import {CardContent} from '../../Card';
-import {SimpleInlineDropdown} from '../../InlineDropdown';
-import {BodyMedium, BodyMediumBold} from '../../Text';
-import {ORIENTATION} from '../Timeline';
-
-import type {TimelineItemProps} from './TimelineItem';
-import {TimelineItem} from './TimelineItem';
-
-import css from '../Timeline.stories.module.css';
-
-
-const colorOptions: Array<unknown> = [...Object.values(TEXT_COLORS)];
-const orientationOptions: Array<unknown> = [...Object.values(ORIENTATION)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Timeline/Anatomy',
-  component: TimelineItem,
-  argTypes: {
-    id: {
-      name: 'id',
-      control: {type: 'text'},
-      description: 'id for TimelineItem',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    title: {
-      name: 'title',
-      description:
-        'The title to be displayed can be a react node or simple text.',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'React.Component | string'},
-      },
-    },
-    description: {
-      name: 'description',
-      description:
-        'The description to be displayed can be a react node or simple text.',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'React.Component | string'},
-      },
-    },
-    parentComponent: {
-      name: 'parentComponent',
-      description: 'additional content to be shown at the top of timelineItem.',
-      table: {
-        type: {summary: 'React.Component'},
-      },
-    },
-    enableCardWrapper: {
-      description: 'If **true**, the children will be wrapped in a card.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: true},
-      },
-    },
-    iconName: {
-      name: 'iconName',
-      type: {required: true},
-      control: {type: 'text'},
-      description: 'Icon name for TimelineItem',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    iconType: {
-      description:
-        'Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',
-      options: ['regular', 'solid', 'duotone', 'brands'],
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'solid'},
-      },
-    },
-    iconColor: {
-      description: 'Same set of colors as supported in text',
-      options: colorOptions,
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'information'},
-      },
-    },
-    classNames: {
-      control: {type: 'object'},
-      description: 'Class names for custom styling.',
-      type: {
-        summary:
-          '{wrapper?: string, card?: string, icon?: string, title?: string, description?: string}',
-      },
-    },
-    orientation: {
-      control: {type: 'select'},
-      options: orientationOptions,
-      description: 'The main content\'s placement with respect to the timeline.',
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: ORIENTATION.left},
-        disable: true, // to hide argType's row from the table
-      },
-    },
-    children: {
-      name: 'children',
-      description:
-        'The content to be displayed can be a react node or simple text.',
-      control: {
-        type: 'text',
-      },
-      type: {required: true},
-      table: {
-        type: {summary: 'React.Component | string'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a TimelineItem component.',
-      description: {
-        component: `
-\`\`\`jsx
-import { TimelineItem } from "@spaced-out/ui-design-system/lib/components/Timeline";
-\`\`\`
-
-The TimelineItem component represents a single Event within the Timeline. It should be used as a child component of the Timeline. Each TimelineItem component can have its own unique icon, title and content. The TimelineItem component includes a **parentComponent** that adds a customizable header to each item, allowing key details such as date, duration, or other event-specific information to be displayed. This feature provides context for each event, with options for unique identifiers or classifications that enhance the timeline's relevance and make information easily selectable at a glance.
-
-### Usage
-
-\`\`\`jsx
-<TimelineItem id="wizard" iconName="hat-wizard" title="Hogwarts">
-{/* TimelineItem content go here */}
-</TimelineItem>
-\`\`\`
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Timeline/Timeline.jsx',
-    },
-  },
-};
-
-export const _Anatomy = (args: TimelineItemProps) => (<TimelineItem {...args}>
-  <CardContent className={css.content}>
-    <BodyMediumBold>Harry Potter</BodyMediumBold>
-    <BodyMedium color="secondary">
-      I'm going to keep going until I succeed
-    </BodyMedium>
-  </CardContent>
-</TimelineItem>);
-
-_Anatomy.args = {
-  id: 'wizard',
-  title: 'Hogwarts',
-  iconName: 'hat-wizard',
-  description: 'School of magic',
-};
-
-export const _WithParentComponent = (args: TimelineItemProps) => {
-  const [name, setName] = React.useState('Harry Potter');
-
-  const options = [
-    {
-      key: 'harry',
-      label: 'Harry Potter',
-    },
-    {
-      key: 'lily',
-      label: 'Lily Potter',
-    },
-  ];
-
-  return (
-    <div className={css.container}>
-      <TimelineItem
-        {...args}
-        parentComponent={
-          <SimpleInlineDropdown
-            size="small"
-            options={options}
-            children={name}
-// @ts-ignore - TS2345 - Argument of type 'string | undefined' is not assignable to parameter of type 'SetStateAction<string>'.
-            onOptionSelect={({label}) => setName(label)}
-          />
-        }
-      >
-        <CardContent className={css.content}>
-          <BodyMediumBold>{name}</BodyMediumBold>
-          <BodyMedium color="secondary">
-            I'm going to keep going until I succeed
-          </BodyMedium>
-        </CardContent>
-      </TimelineItem>
-    </div>
-  );
-};
-
-_WithParentComponent.args = {
-  id: 'wizard',
-  title: 'Hogwarts',
-  iconName: 'hat-wizard',
-  description: 'School of magic',
-};

package/lib/components/Timeline/TimelineItem/TimelineItem.tsx

@@ -1,128 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-import * as React from 'react';
-
-import type {ColorTypes} from '../../../types/typography';
-import {TEXT_COLORS} from '../../../types/typography';
-import {classify} from '../../../utils/classify';
-import {Card, PADDING_SIZES} from '../../Card';
-import {ConditionalWrapper} from '../../ConditionalWrapper';
-import type {IconType} from '../../Icon';
-import {Icon, ICON_SIZE, ICON_TYPE} from '../../Icon';
-import type {Orientation} from '../Timeline';
-import {ORIENTATION} from '../Timeline';
-
-import css from '../Timeline.module.css';
-
-
-type ClassNames = Readonly<{
-  card?: string;
-  icon?: string;
-  title?: string;
-  wrapper?: string;
-  description?: string;
-}>;
-
-export type TimelineItemProps = {
-  id?: string;
-  title?: React.ReactNode;
-  iconName: string;
-  children: React.ReactNode;
-  iconType?: IconType;
-  iconColor?: ColorTypes;
-  classNames?: ClassNames;
-  description?: React.ReactNode;
-  orientation?: Orientation;
-  parentComponent?: React.ReactNode;
-  enableCardWrapper?: boolean;
-};
-
-const TimelineItem_ = (
-  {
-    id,
-    title,
-    iconName,
-// @ts-ignore - TS2322 - Type 'string' is not assignable to type '"regular" | "solid" | "duotone" | "brands"'.
-    iconType = ICON_TYPE.solid,
-    children,
-    iconColor = TEXT_COLORS.information,
-    classNames,
-    description,
-    orientation = ORIENTATION.left,
-    parentComponent,
-    enableCardWrapper = true,
-  }: TimelineItemProps,
-  ref: ((arg1: null | HTMLDivElement) => unknown) | {
-    current: null | HTMLDivElement;
-  },
-) => (<div
-  id={id}
-  key={id}
-  data-testid="Timeline-item"
-  className={classify(css.timelineItemWrapper, classNames?.wrapper)}
-  style={{
-    '--align': orientation === 'left' ? 'flex-start' : 'flex-end',
-  }}
-// @ts-ignore - TS2322 - Type '{ current: HTMLDivElement | null; } | ((arg1: HTMLDivElement | null) => unknown)' is not assignable to type 'Ref<HTMLDivElement> | undefined'.
-  ref={ref}
->
-  {parentComponent}
-  <div
-    style={{
-      '--direction': orientation === 'left' ? 'row' : 'row-reverse',
-    }}
-    className={css.timelineItemContent}
-  >
-    <div className={css.timelineItemIconWrapper}>
-      <Icon
-        name={iconName}
-        type={iconType}
-// @ts-ignore - TS2769 - No overload matches this call.
-        size={ICON_SIZE.small}
-        color={iconColor}
-        className={classify(css.timelineItemIcon, classNames?.icon)}
-      />
-      <div className={css.timelineItemBorder}>
-        <div className={css.border} />
-      </div>
-    </div>
-    <div className={css.timelineItemEventDetails}>
-      <div className={css.timelineItemInfo}>
-        <div className={classify(css.timelineItemTitle, classNames?.title)}>
-          {title}
-        </div>
-        {description ? (
-          <div
-            className={classify(
-              css.timelineItemDescription,
-              classNames?.description,
-            )}
-          >
-            {description}
-          </div>
-        ) : null}
-      </div>
-      <ConditionalWrapper
-        condition={enableCardWrapper}
-        wrapper={(children) => (
-          <Card
-            paddingTop={PADDING_SIZES.small}
-            paddingBottom={PADDING_SIZES.small}
-            classNames={{
-              wrapper: classify(
-                css.timelineItemCardWrapper,
-                classNames?.card,
-              ),
-            }}
-          >
-            {children}
-          </Card>
-        )}
-      >
-        {children}
-      </ConditionalWrapper>
-    </div>
-  </div>
-</div>);
-
-// @ts-ignore - TS2345 - Argument of type '({ id, title, iconName, iconType, children, iconColor, classNames, description, orientation, parentComponent, enableCardWrapper, }: TimelineItemProps, ref: { current: null | HTMLDivElement; } | ((arg1: null | HTMLDivElement) => unknown)) => React.JSX.Element' is not assignable to parameter of type 'ForwardRefRenderFunction<HTMLDivElement, TimelineItemProps>'.
-export const TimelineItem = (React.forwardRef<HTMLDivElement, TimelineItemProps>(TimelineItem_) as Flow.AbstractComponent<TimelineItemProps, HTMLDivElement>);

package/lib/components/Timeline/TimelineItem/index.ts

@@ -1 +0,0 @@
-export * from './TimelineItem';

package/lib/components/Timeline/index.ts

@@ -1,2 +0,0 @@
-export * from './Timeline';
-export * from './TimelineItem';