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

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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,14 @@
+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/sortableOverlay.component.tsx

@@ -0,0 +1,20 @@
+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/mockData.ts

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,69 @@
+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>
+  );
+};

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

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { SortableList } from './sortableList.component';
+import { DragHandle, SortableItem } from './components';
+import { createRange } from '../utilities';
+
+import { findManyChannelStatus } from './mockData';
+
+import { Button } from '../../button';
+import { UniqueIdentifier } from '@dnd-kit/core';
+import { Flex, Text } from '../../../core';
+
+export default {
+  title: 'Components/Draggable/Sortable List',
+  component: SortableList,
+};
+
+interface MockItem {
+  id: number;
+}
+
+const getMockItems = (): MockItem[] => createRange(50, (index) => ({ id: index + 1 }));
+
+export const BasicList = (): JSX.Element => {
+  const [items, setItems] = useState(getMockItems);
+
+  return (
+    <SortableList
+      items={items}
+      onChange={setItems}
+      renderItem={(item): JSX.Element => (
+        <SortableItem id={item.id}>
+          <DragHandle />
+          {item.id}
+        </SortableItem>
+      )}
+    />
+  );
+};
+
+export const SortableRows = (): JSX.Element => {
+  const [items, setItems] = useState(findManyChannelStatus);
+
+  const handleRemove = (id: UniqueIdentifier): void =>
+    setItems((items) => items.filter((item) => item.id !== id));
+
+  return (
+    <SortableList
+      items={items}
+      onChange={setItems}
+      renderItem={({ id, name }, index): JSX.Element => (
+        <SortableItem
+          id={id}
+          style={{
+            padding: '8px',
+            background: (index && index % 2 === 0) || index === 0 ? '#f1f5f6' : '#fff',
+          }}
+        >
+          <Flex align="center">
+            <DragHandle />
+            <Text role="paragraph">{name}</Text>
+            <Button
+              buttonType="icon"
+              onClick={(): void => handleRemove(id)}
+              iconName="trashCanRegular"
+            />
+          </Flex>
+        </SortableItem>
+      )}
+    />
+  );
+};

package/src/components/draggable/utilities/createRange.ts

@@ -0,0 +1,8 @@
+const defaultInitializer = (index: number) => index;
+
+export function createRange<T = number>(
+  length: number,
+  initializer: (index: number) => any = defaultInitializer
+): T[] {
+  return [...new Array(length)].map((_, index) => initializer(index));
+}

package/src/components/forms/text-input/text-input.component.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export interface TextInputProps {
+  value: string;
+  onChange: () => void;
+}
+
+export const TextInput = ({ value, onChange }: TextInputProps) => {
+  return (
+    <div>
+      <input type="text" value={value} onChange={onChange} />
+    </div>
+  );
+};

package/src/components/forms/utils/validations.ts

@@ -0,0 +1,62 @@
+export type ValidationRule =
+  | 'email'
+  | 'required'
+  | 'numeric'
+  | 'alphaNumeric'
+  | 'alphabetic'
+  | 'maxLength'
+  | 'minLength';
+
+export const validations: Record<ValidationRule, unknown> = {
+  email: {
+    rule: () =>
+      /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i,
+    formatter(fieldName: string) {
+      return `${fieldName} is not valid email`;
+    },
+  },
+  required: {
+    rule: () => /\S/,
+    formatter(fieldName: string) {
+      return `${fieldName} is required.`;
+    },
+  },
+  numeric: {
+    rule: () => /^\d+$/,
+    formatter(fieldName: string) {
+      return `${fieldName} should contain only numbers.`;
+    },
+  },
+  alphaNumeric: {
+    rule: () => /^[a-z0-9]+$/i,
+    formatter(fieldName: string) {
+      return `${fieldName} should not contain special characters, please use only alphabets and numbers.`;
+    },
+  },
+  alphabetic: {
+    rule: () => /^[a-z]+$/i,
+    formatter(fieldName: string) {
+      return `${fieldName} should contain only alphabets.`;
+    },
+  },
+  maxLength: {
+    rule: (number: number) => ({
+      test: (value: string) => value.length <= number,
+    }),
+    formatter(fieldName: string, number: number) {
+      return number
+        ? `${fieldName} can contain maximum ${number} characters.`
+        : `${fieldName} contains more characters than expected.`;
+    },
+  },
+  minLength: {
+    rule: (number: number) => ({
+      test: (value: string) => value.length >= number,
+    }),
+    formatter(fieldName: string, number: number) {
+      return number
+        ? `${fieldName} should contain minimum ${number} characters.`
+        : `${fieldName} contains less characters than expected.`;
+    },
+  },
+};

package/src/components/grainy-gradient-background/grainy-gradient-background.component.stories.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {
+  GrainyGradientBackground,
+  GrainyGradientProps,
+} from './grainy-gradient-background.component';
+
+export default {
+  title: 'Components/Background',
+  component: GrainyGradientBackground,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    noiseFrequency: {
+      control: { type: 'range', min: 0, max: 5, step: 0.01 },
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '0.65' },
+      },
+    },
+    noiseOctaves: {
+      control: { type: 'range', min: 0, max: 6, step: 1 },
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '3' },
+      },
+    },
+    size: {
+      control: { type: 'range', min: 0, max: 2400, step: 1 },
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '250' },
+      },
+    },
+    angle: {
+      control: { type: 'range', min: 0, max: 360, step: 1 },
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '20' },
+      },
+      description: 'The angle of the gradient.',
+    },
+    gradientColor: {
+      control: { type: 'color' },
+    },
+    backgroundColor: {
+      control: { type: 'color' },
+    },
+  },
+};
+
+export const GrainyGradient = (args: GrainyGradientProps) => {
+  return <GrainyGradientBackground {...args} />;
+};
+
+const GrainyGradientBackgroundArgs: GrainyGradientProps = {
+  minHeight: '100vh',
+};
+
+GrainyGradient.args = GrainyGradientBackgroundArgs;

package/src/components/grainy-gradient-background/grainy-gradient-background.component.tsx

@@ -0,0 +1,68 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import { Property } from 'csstype';
+
+export interface GrainyGradientProps {
+  children?: ReactNode;
+  noiseFrequency?: number;
+  noiseOctaves?: number;
+  size?: number;
+  minHeight?: Property.MinHeight;
+  angle?: number;
+  gradientColor?: Property.Color;
+  backgroundColor?: Property.Color;
+}
+
+export const GrainyGradientBackground = ({
+  children,
+  noiseFrequency = 0.65,
+  noiseOctaves = 3,
+  minHeight,
+  size = 740,
+  angle = 20,
+  gradientColor = 'rebeccapurple',
+  backgroundColor = 'moccasin',
+}: GrainyGradientProps) => {
+  const gradient = `linear-gradient(${angle}deg, ${gradientColor}, transparent)`;
+
+  const image = `url("data:image/svg+xml,%3Csvg viewBox='0 0 ${size} ${size}' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='${noiseFrequency}' numOctaves='${noiseOctaves}' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`;
+
+  const container: CSSProperties = {};
+
+  const content: CSSProperties = {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  };
+
+  const noise: CSSProperties = {
+    filter: 'contrast(290%) brightness(1000%)',
+    background: gradient + ', ' + image,
+    minHeight,
+  };
+
+  const isolate: CSSProperties = {
+    isolation: 'isolate',
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  };
+
+  const overlay: CSSProperties = {
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+    height: '100%',
+    background: backgroundColor,
+    mixBlendMode: 'multiply',
+  };
+
+  return (
+    <div style={container}>
+      <div style={isolate}>
+        <div style={noise}></div>
+        <div style={overlay}></div>
+      </div>
+      <div style={content}>{children}</div>
+    </div>
+  );
+};

package/src/components/icon-text-row/icon-text-row.component.tsx

@@ -0,0 +1,70 @@
+import React, { ReactNode } from 'react';
+import {
+  ContentColorToken,
+  getValue,
+  HorizontalAlign,
+  TextRole,
+} from '@uni-design-system/uni-core';
+
+import { alignCenter, expand, fix, row, Text, Icon, useTheme } from '../../core';
+import { IconName } from '../../core/icon';
+
+export interface IconTextRowProps {
+  iconName: IconName;
+  color: ContentColorToken;
+  align?: HorizontalAlign;
+  text?: string;
+  textRole?: TextRole;
+  children?: ReactNode;
+}
+
+export const IconTextRow = ({
+  iconName,
+  color,
+  align = 'left',
+  text,
+  textRole = 'title-medium',
+  children,
+}: IconTextRowProps): JSX.Element => {
+  const theme = useTheme();
+  const textProps = getValue(theme, `typography.${textRole}`, theme.typography['title-medium']);
+  const textHeight = textProps.fontSize;
+  const textLineHeight = textProps.lineHeight || textHeight;
+  const textMargin = text || children ? textLineHeight - textHeight : 0;
+
+  function RowIcon() {
+    return (
+      <div style={{ ...fix, maxHeight: textLineHeight }}>
+        <Icon name={iconName} width={textLineHeight} height={textLineHeight} color={color} />
+      </div>
+    );
+  }
+
+  function RowText() {
+    return (
+      <div style={{ ...expand, paddingLeft: textMargin, paddingRight: textMargin }}>
+        <Text align={align} colorToken={color} role={textRole}>
+          {text || children}
+        </Text>
+      </div>
+    );
+  }
+
+  function RowCenter() {
+    return align === 'center' ? <div style={{ ...expand }} /> : null;
+  }
+
+  return ['left', 'center'].includes(align) ? (
+    <div style={{ ...row, ...alignCenter }}>
+      <RowCenter />
+      <RowIcon />
+      <RowText />
+      <RowCenter />
+    </div>
+  ) : (
+    <div style={{ ...row, ...alignCenter }}>
+      <RowText />
+      <RowIcon />
+    </div>
+  );
+};

package/src/components/icon-text-row/icon-text-row.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { IconTextRow, IconTextRowProps } from './icon-text-row.component';
+
+export default {
+  title: 'Typography/Icon Text Row',
+  component: IconTextRow,
+};
+
+export const IconTextRowPlayground = (args: IconTextRowProps) => <IconTextRow {...args} />;
+
+const IconTextRowPlaygroundProps: IconTextRowProps = {
+  color: 'on-background',
+  iconName: 'mapLocationDotSolid',
+  text: 'Location',
+  textRole: 'headline-small',
+};
+
+IconTextRowPlayground.args = IconTextRowPlaygroundProps;

package/src/components/modal/modal-close-button.component.tsx

@@ -0,0 +1,13 @@
+import React, { CSSProperties, PropsWithChildren } from 'react';
+import { Button, ButtonProps } from '../button';
+
+export const ModalCloseButton = ({ ...rest }: PropsWithChildren<ButtonProps>): JSX.Element => {
+  const style: CSSProperties = {
+    position: 'absolute',
+    top: '8px',
+    right: '8px',
+    padding: '8px',
+  };
+
+  return <Button buttonType="icon" iconName="xmarkSolid" style={style} {...rest} />;
+};

package/src/components/modal/modal.component.tsx

@@ -0,0 +1,48 @@
+import React, { ReactNode } from 'react';
+import { Card } from '../card';
+import { Overlay } from '../../core';
+import { motion } from 'framer-motion';
+
+type ModalSize = 'sm' | 'md' | 'lg';
+
+const ModalSizes: Record<ModalSize, number> = {
+  sm: 260,
+  md: 320,
+  lg: 500,
+};
+
+export interface ModalProps {
+  size: ModalSize;
+  children: ReactNode;
+  isOpen: boolean;
+}
+
+export interface ModalOverlayProps {
+  children?: React.ReactNode;
+  fadeDuration?: number;
+}
+
+export const Modal = ({ children, isOpen, size = 'lg' }: ModalProps) => {
+  return (
+    <>
+      <Overlay isOpen={isOpen}>
+        <motion.div
+          style={{ position: 'fixed' }}
+          initial={{ y: 36, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          exit={{ y: 36, opacity: 0 }}
+          transition={{ duration: 0.2 }}
+        >
+          <Card
+            colorToken="background"
+            width={ModalSizes[size]}
+            cardType="elevated"
+            elevation="modal"
+          >
+            {children}
+          </Card>
+        </motion.div>
+      </Overlay>
+    </>
+  );
+};

package/src/components/modal/modal.stories.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import { Modal, ModalProps } from './modal.component';
+import { Text } from '../../core';
+import { Button } from '../button';
+import { ModalCloseButton } from './modal-close-button.component';
+
+export default {
+  title: 'Components/Modal',
+  component: Modal,
+};
+
+export const Basic = (args: ModalProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+
+      <Modal {...args} isOpen={isOpen}>
+        <ModalCloseButton onClick={() => setIsOpen(false)} />
+        <Text role="body-1-short">This is a simple modal component.</Text>
+      </Modal>
+    </>
+  );
+};