@uni-design-system/uni-react 2.0.0 → 2.0.2

package/dist/layouts/parallax-hero/parallax-hero.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"parallax-hero.component.d.ts","sourceRoot":"","sources":["../../../src/layouts/parallax-hero/parallax-hero.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,eAAO,MAAM,YAAY,GAAI,sBAAsB,iBAAiB,KAAG,GAAG,CAAC,OAqB1E,CAAC"}

package/dist/layouts/parallax-hero/parallax-hero.model.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"parallax-hero.model.d.ts","sourceRoot":"","sources":["../../../src/layouts/parallax-hero/parallax-hero.model.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB"}

package/dist/stories/Button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/stories/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAW;IAC1B,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mCAAmC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sCAAsC;IACtC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gDAAgD;AAChD,eAAO,MAAM,MAAM,GAAI,qDAMpB,WAAW,4CAYb,CAAC"}

package/dist/stories/Button.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAO5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;CAeqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC"}

package/dist/stories/Header.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/stories/Header.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAC;AAEtB,KAAK,IAAI,GAAG;IACV,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,MAAM,GAAI,8CAA8C,WAAW,4CAuC/E,CAAC"}

package/dist/stories/Header.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Header.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Header.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAM5D,QAAA,MAAM,IAAI;;;;;;;;;;;;CAcqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAU,CAAC"}

package/dist/stories/Page.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../src/stories/Page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,YAAY,CAAC;AAMpB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EA+DxB,CAAC"}

package/dist/stories/Page.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Page.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Page.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAM5D,QAAA,MAAM,IAAI;;;;;;CAOmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,SAAS,EAAE,KAAU,CAAC;AAGnC,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC"}

package/dist/tools/color-picker/color-picker.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"color-picker.component.d.ts","sourceRoot":"","sources":["../../../src/tools/color-picker/color-picker.component.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,oDAKzB,gBAAgB,KAAG,GAAG,CAAC,OAsIzB,CAAC"}

package/dist/tools/color-picker/color-picker.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"color-picker.stories.d.ts","sourceRoot":"","sources":["../../../src/tools/color-picker/color-picker.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;;;;;;;;AAEzE,wBAME;AAEF,eAAO,MAAM,qBAAqB;WAAU,gBAAgB;;CAA8B,CAAC"}

package/dist/tools/color-swatch/color-swatch.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"color-swatch.component.d.ts","sourceRoot":"","sources":["../../../src/tools/color-swatch/color-swatch.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAgB,GAAG,EAAY,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAG3F,MAAM,MAAM,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE1D,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,EACR,QAAqB,EACrB,SAAS,EACT,KAAK,EACL,MAAM,GACP,EAAE,gBAAgB,2CA6ClB"}

package/dist/utils/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/utils/storage-manager.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"storage-manager.d.ts","sourceRoot":"","sources":["../../src/utils/storage-manager.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,IAAI,EAAE,QAAQ,GAAG,cAAc,CAAC;IAChC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;IAC7B,GAAG,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;CACrB;AAID,eAAO,MAAM,yBAAyB,GAAI,CAAC,EAAE,KAAK,MAAM,KAAG,cAAc,CAAC,CAAC,CAoBzE,CAAC;AASH,eAAO,MAAM,0BAA0B,GACrC,KAAK,MAAM,EACX,SAAS,MAAM,KACd,cAAc,CAAC,MAAM,CAUtB,CAAC"}

package/src/components/button/button.component.tsx

@@ -1,138 +0,0 @@
-import React, { CSSProperties, ReactNode, useEffect, useState } from 'react';
-import { BoxShadow, Text, useLayout, useTheme } from '../../core';
-import {
-  UniTheme,
-  ButtonType,
-  ColorToken,
-  Size,
-  ContentColorToken,
-} from '@uni-design-system/uni-core';
-import { IconTextRow } from '../icon-text-row';
-import { IconName } from '../../core/icon';
-import { useRipple } from 'use-ripple-hook';
-
-export interface ButtonProps {
-  text?: string;
-  children?: ReactNode;
-  buttonType?: ButtonType;
-  active?: boolean;
-  disabled?: boolean;
-  iconName?: IconName;
-  contentColor?: ContentColorToken;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  disableRipple?: boolean;
-  style?: CSSProperties;
-}
-
-export const Button = ({
-  text,
-  children,
-  buttonType = 'filled',
-  disabled = false,
-  iconName,
-  contentColor: overrideContentColor,
-  onClick,
-  disableRipple = false,
-  style: userStyle,
-  ...rest
-}: ButtonProps): JSX.Element => {
-  const { deviceSize } = useLayout();
-  const theme = useTheme();
-  const [ref, createRipple] = useRipple({ disabled: disableRipple || buttonType === 'elevated' });
-  const buttonProps = theme.buttons[buttonType];
-
-  const getOnColorToken = (color: ColorToken) => `on-${color}` as ContentColorToken;
-  const contentColor = overrideContentColor || getOnColorToken(buttonProps.color);
-
-  const [hover, setHover] = useState<boolean>(false);
-  const [click, setClick] = useState<boolean>(false);
-
-  const style = Style(theme, buttonType, deviceSize, hover, disabled, click);
-
-  useEffect(() => {
-    setTimeout(() => {
-      setClick(false);
-    }, 250);
-  }, [click]);
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    setClick(true);
-    onClick && onClick(event);
-  };
-
-  return (
-    <button
-      onMouseDown={createRipple}
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
-      onClick={handleClick}
-      disabled={disabled}
-      style={{ ...style, ...userStyle }}
-      ref={ref}
-      {...rest}
-    >
-      {iconName ? (
-        <IconTextRow iconName={iconName} color={contentColor} textRole="button">
-          {text || children}
-        </IconTextRow>
-      ) : (
-        <Text align="center" role="button" colorToken={contentColor}>
-          {text || children}
-        </Text>
-      )}
-    </button>
-  );
-};
-
-function Style(
-  theme: UniTheme,
-  buttonType: ButtonType,
-  size: Size = 'md',
-  hover: boolean,
-  disabled: boolean,
-  click: boolean
-): CSSProperties {
-  const {
-    color,
-    horizontalPadding,
-    verticalPadding,
-    borderColor,
-    borderWidth,
-    borderRadius,
-    contentColor,
-  } = theme.buttons[buttonType];
-
-  const styles: CSSProperties = {
-    overflow: 'hidden',
-    transition: 'all 0.3s cubic-bezier(.25,.8,.25,1)',
-    cursor: 'pointer',
-    paddingTop: verticalPadding[size] + 'px',
-    paddingBottom: verticalPadding[size] + 'px',
-    paddingLeft: horizontalPadding[size] + 'px',
-    paddingRight: horizontalPadding[size] + 'px',
-    borderRadius: borderRadius + 'px',
-    backgroundColor: theme.colors[color],
-    borderColor: theme.colors[borderColor as ColorToken],
-    borderWidth: borderWidth + 'px',
-    borderStyle: buttonType === 'outlined' ? 'solid' : 'none',
-  };
-
-  if (buttonType === 'elevated' && !disabled) {
-    styles.boxShadow = BoxShadow(hover ? 'focussed' : 'raised');
-  }
-
-  if (disabled && buttonType === 'elevated') {
-    styles.boxShadow = BoxShadow('pressed');
-    styles.color = theme.colors[contentColor];
-  }
-
-  if (disabled) {
-    styles.cursor = 'not-allowed';
-  }
-
-  if (click && buttonType === 'elevated' && !disabled) {
-    styles.boxShadow = BoxShadow('pressed');
-  }
-
-  return styles;
-}

package/src/components/button/button.stories.tsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import { Button, ButtonProps } from './button.component';
-
-export default {
-  title: 'Components/Buttons',
-  component: Button,
-};
-
-export const Filled = (args: ButtonProps) => <Button {...args} />;
-
-Filled.args = {
-  disabled: false,
-  buttonType: 'filled',
-  text: 'Filled Button',
-};
-
-Filled.story = {
-  name: 'Filled Button',
-};
-
-export const FilledSecondary = (args: ButtonProps) => <Button {...args} />;
-
-FilledSecondary.args = {
-  disabled: false,
-  buttonType: 'filled-secondary',
-  text: 'Secondary Button',
-};
-
-FilledSecondary.story = {
-  name: 'Secondary Filled Button',
-};
-
-export const Elevated = (args: ButtonProps) => <Button {...args} />;
-
-Elevated.args = {
-  disabled: false,
-  buttonType: 'elevated',
-  text: 'Elevated Button',
-};
-
-Elevated.story = {
-  name: 'Elevated Button',
-};
-
-export const DisabledElevated = (args: ButtonProps) => <Button {...args} />;
-
-DisabledElevated.args = {
-  disabled: true,
-  buttonType: 'elevated',
-  text: 'Elevated Button',
-};
-
-DisabledElevated.story = {
-  name: 'Disabled Elevated Button',
-};
-
-export const Outlined = (args: ButtonProps) => <Button {...args} />;
-
-Outlined.args = {
-  disabled: false,
-  buttonType: 'outlined',
-  text: 'Outlined Button',
-};
-
-Outlined.story = {
-  name: 'Outlined Button',
-};
-
-export const DisabledOutlined = (args: ButtonProps) => <Button {...args} />;
-
-DisabledOutlined.args = {
-  disabled: true,
-  buttonType: 'outlined',
-  text: 'Outlined Button',
-};
-
-DisabledOutlined.story = {
-  name: 'Disabled Outlined Button',
-};

package/src/components/button/index.ts

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

package/src/components/card/card.component.tsx

@@ -1,61 +0,0 @@
-import React, { CSSProperties, HTMLAttributes, ReactNode } from 'react';
-import {
-  ColorToken,
-  ContainerColorToken,
-  ShadowElevation,
-  Size,
-} from '@uni-design-system/uni-core';
-import { BoxShadow, Padding, useTheme } from '../../core';
-import { Property } from 'csstype';
-import Container from '../../core/container/container.component';
-
-export type CardType = 'elevated' | 'filled' | 'outlined';
-
-export interface CardProps extends HTMLAttributes<HTMLDivElement> {
-  children?: ReactNode;
-  cardType?: CardType;
-  colorToken?: ContainerColorToken;
-  elevation?: ShadowElevation;
-  width?: Property.Width<number | string>;
-  height?: Property.Height<number | string>;
-  borderRadius?: Size | 'none';
-}
-
-export function Card({
-  children,
-  cardType,
-  elevation,
-  colorToken = 'surface',
-  width,
-  height,
-  borderRadius,
-  style,
-  ...rest
-}: CardProps) {
-  const { colors, containers } = useTheme();
-
-  const { borderRadii } = containers.card;
-
-  const styles: CSSProperties = {
-    height,
-    width,
-    backgroundColor: colors[colorToken || 'surface'],
-    color: colors[(`on-${colorToken}` as ColorToken) || 'on-surface'],
-    ...Padding('md', 'all'),
-    ...style,
-  };
-
-  if (cardType === 'elevated') {
-    styles.boxShadow = BoxShadow(elevation || 'raised');
-  }
-
-  if (borderRadii && borderRadius !== 'none') {
-    styles.borderRadius = borderRadii[borderRadius || 'md'];
-  }
-
-  return (
-    <Container colorToken={colorToken} style={styles} {...rest}>
-      {children}
-    </Container>
-  );
-}

package/src/components/card/card.stories.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Card, CardProps } from './card.component';
-import { Text } from '../../core';
-
-export default {
-  title: 'Components/Cards',
-  component: Card,
-};
-
-export const Elevated = (args: CardProps) => {
-  return (
-    <Card {...args}>
-      <Text role="title-large">Sample Content</Text>
-    </Card>
-  );
-};
-
-const ElevatedArgs: CardProps = {
-  cardType: 'elevated',
-};
-
-Elevated.args = ElevatedArgs;

package/src/components/card/index.ts

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

package/src/components/draggable/SortableList/components/DragHandle/dragHandle.component.tsx

@@ -1,20 +0,0 @@
-import React, { useContext } from 'react';
-import { SortableItemContext } from '../SortableItem/sortableItem.context';
-import { Button, ButtonProps } from '../../../../button';
-import { useDndContext } from '@dnd-kit/core';
-
-export const DragHandle = ({ ...rest }: ButtonProps): JSX.Element => {
-  const { attributes, listeners } = useContext(SortableItemContext);
-  const dndContext = useDndContext();
-
-  return (
-    <Button
-      style={{ cursor: dndContext.activatorEvent ? 'grabbing' : 'grab' }}
-      iconName="barsSolid"
-      buttonType="icon"
-      {...attributes}
-      {...listeners}
-      {...rest}
-    />
-  );
-};

package/src/components/draggable/SortableList/components/DragHandle/index.ts

@@ -1 +0,0 @@
-export { DragHandle } from './dragHandle.component';

package/src/components/draggable/SortableList/components/SortableItem/index.ts

@@ -1 +0,0 @@
-export { SortableItem } from './sortableItem.component';

package/src/components/draggable/SortableList/components/SortableItem/sortableItem.component.tsx

@@ -1,54 +0,0 @@
-import React, { useMemo } from 'react';
-import type { CSSProperties, PropsWithChildren } from 'react';
-import type { UniqueIdentifier } from '@dnd-kit/core';
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { SortableItemContext } from './sortableItem.context';
-
-export interface SortableItemProps {
-  id: UniqueIdentifier;
-  style?: CSSProperties;
-  onRemove?(id: UniqueIdentifier): void;
-}
-
-export const SortableItem = ({
-  children,
-  id,
-  style: userStyle,
-  onRemove,
-}: PropsWithChildren<SortableItemProps>): JSX.Element => {
-  const {
-    attributes,
-    isDragging,
-    listeners,
-    setNodeRef,
-    setActivatorNodeRef,
-    transform,
-    transition,
-  } = useSortable({
-    id,
-  });
-  const context = useMemo(
-    () => ({
-      attributes,
-      listeners,
-      ref: setActivatorNodeRef,
-    }),
-    [attributes, listeners, setActivatorNodeRef]
-  );
-  const style: CSSProperties = {
-    opacity: isDragging ? 0.4 : undefined,
-    transform: CSS.Translate.toString(transform),
-    transition,
-    listStyle: 'none',
-    ...userStyle,
-  };
-
-  return (
-    <SortableItemContext.Provider value={context}>
-      <li className="SortableItem" ref={setNodeRef} style={style}>
-        {children}
-      </li>
-    </SortableItemContext.Provider>
-  );
-};

package/src/components/draggable/SortableList/components/SortableItem/sortableItem.context.ts

@@ -1,14 +0,0 @@
-import { DraggableSyntheticListeners } from '@dnd-kit/core';
-import { createContext } from 'react';
-
-interface Context {
-  attributes: Record<string, any>;
-  listeners: DraggableSyntheticListeners;
-  ref(node: HTMLElement | null): void;
-}
-
-export const SortableItemContext = createContext<Context>({
-  attributes: {},
-  listeners: undefined,
-  ref() {},
-});

package/src/components/draggable/SortableList/components/SortableOverlay/index.ts

@@ -1 +0,0 @@
-export { SortableOverlay } from './sortableOverlay.component';

package/src/components/draggable/SortableList/components/SortableOverlay/sortableOverlay.component.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import type { PropsWithChildren } from 'react';
-import { DragOverlay, defaultDropAnimationSideEffects } from '@dnd-kit/core';
-import type { DropAnimation } from '@dnd-kit/core';
-
-const dropAnimationConfig: DropAnimation = {
-  sideEffects: defaultDropAnimationSideEffects({
-    styles: {
-      active: {
-        opacity: '0.4',
-      },
-    },
-  }),
-};
-
-interface Props {}
-
-export const SortableOverlay = ({ children }: PropsWithChildren<Props>): JSX.Element => (
-  <DragOverlay dropAnimation={dropAnimationConfig}>{children}</DragOverlay>
-);

package/src/components/draggable/SortableList/components/index.ts

@@ -1,3 +0,0 @@
-export { DragHandle } from './DragHandle';
-export { SortableItem } from './SortableItem';
-export { SortableOverlay } from './SortableOverlay';

package/src/components/draggable/SortableList/index.ts

@@ -1,2 +0,0 @@
-export * from './sortableList.component';
-export * from './components';

package/src/components/draggable/SortableList/mockData.ts

@@ -1,50 +0,0 @@
-export const findManyChannelStatus = [
-  {
-    id: 'ckj03ha63t2760708sl9i1wrt',
-    name: 'Open',
-  },
-  {
-    id: 'ckkis9tk41bjc07776r52w8vi',
-    name: 'Arrived',
-  },
-  {
-    id: 'cl0myohr5153501vkyhdttc84',
-    name: 'Completed Workflow',
-  },
-  {
-    id: 'ckziqok792091401wchnc8w0x6',
-    name: 'Confirmed',
-  },
-  {
-    id: 'cl0hr30kt2157201za2zu4z22e',
-    name: 'Connect Request',
-  },
-  {
-    id: 'cl8ow0o5q14155je153hnxnkep',
-    name: 'Service Reminder Response',
-  },
-  {
-    id: 'ckkisaejj1bkp0777q7tz03en',
-    name: 'Needs Consult',
-  },
-  {
-    id: 'cl0hqr4x91927701zaaqtpeq97',
-    name: 'Scheduled',
-  },
-  {
-    id: 'clalb5upd6062601xqa9ww3zi4',
-    name: 'Incoming Triage',
-  },
-  {
-    id: 'clcnp56pq489001wka1zxwm0k',
-    name: 'Survey Sent',
-  },
-  {
-    id: 'clcgj0vp75288301yy99juvg1f',
-    name: 'Closed w/comments',
-  },
-  {
-    id: 'ckj03ha67t2780708l1lccn1a',
-    name: 'Archived',
-  },
-];

package/src/components/draggable/SortableList/sortableList.component.tsx

@@ -1,69 +0,0 @@
-import React, { CSSProperties, useMemo, useState } from 'react';
-import type { ReactNode } from 'react';
-import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
-import type { Active, UniqueIdentifier } from '@dnd-kit/core';
-import { SortableContext, arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
-
-import { SortableOverlay } from './components';
-
-export interface SortableItemProps {
-  id: UniqueIdentifier;
-}
-
-export interface SortableProps<T extends SortableItemProps> {
-  items: T[];
-  onChange(items: T[]): void;
-  renderItem(item: T, index?: number): ReactNode;
-  style?: CSSProperties;
-}
-
-export const SortableList = <T extends SortableItemProps>({
-  items,
-  onChange,
-  renderItem,
-  style: userStyle,
-}: SortableProps<T>): JSX.Element => {
-  const [active, setActive] = useState<Active | null>(null);
-  const activeItem = useMemo(() => items.find((item) => item.id === active?.id), [active, items]);
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    })
-  );
-
-  const style: CSSProperties = {
-    display: 'flex',
-    flexDirection: 'column',
-    padding: 0,
-    listStyle: 'none',
-  };
-
-  return (
-    <DndContext
-      sensors={sensors}
-      onDragStart={({ active }): void => {
-        setActive(active);
-      }}
-      onDragEnd={({ active, over }): void => {
-        if (over && active.id !== over?.id) {
-          const activeIndex = items.findIndex(({ id }) => id === active.id);
-          const overIndex = items.findIndex(({ id }) => id === over.id);
-
-          onChange(arrayMove(items, activeIndex, overIndex));
-        }
-        setActive(null);
-      }}
-      onDragCancel={(): void => setActive(null)}
-    >
-      <SortableContext items={items}>
-        <ul style={style}>
-          {items.map((item, index) => (
-            <React.Fragment key={item.id}>{renderItem(item, index)}</React.Fragment>
-          ))}
-        </ul>
-      </SortableContext>
-      <SortableOverlay>{activeItem ? renderItem(activeItem) : null}</SortableOverlay>
-    </DndContext>
-  );
-};