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

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

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

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

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

@@ -1,8 +0,0 @@
-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/draggable/utilities/index.ts

@@ -1 +0,0 @@
-export { createRange } from './createRange';

package/src/components/forms/index.ts

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

package/src/components/forms/text-input/index.ts

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

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

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

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

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

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

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

@@ -1,18 +0,0 @@
-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/icon-text-row/index.ts

@@ -1 +0,0 @@
-export * from './icon-text-row.component';

package/src/components/index.ts

@@ -1,7 +0,0 @@
-export * from './button';
-export * from './card';
-export * from './draggable';
-export * from './forms';
-export * from './icon-text-row';
-export * from './modal';
-export * from './switch';

package/src/components/modal/index.ts

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

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

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

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

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

package/src/components/switch/index.ts

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

package/src/components/switch/switch.component.tsx

@@ -1,59 +0,0 @@
-import { motion, Transition } from 'framer-motion';
-import React, { CSSProperties, useState } from 'react';
-import { RoleHues, Size } from '@uni-design-system/uni-core';
-import { SwitchConfigs } from './switch.config';
-
-export interface SwitchProps {
-  size?: Size;
-  on?: boolean;
-  onChange?: (on: boolean) => void;
-}
-
-export const Switch = ({ size = 'sm', on = false, onChange }: SwitchProps) => {
-  const [isOn, setIsOn] = useState(on);
-
-  const successColor = `hsl(${RoleHues.success.default}, 32%, 50%)`;
-
-  const toggleSwitch = () => {
-    setIsOn(!isOn);
-    onChange && onChange(!isOn);
-  };
-
-  const spring: Transition = {
-    type: 'spring',
-    stiffness: 700,
-    damping: 30,
-  };
-
-  const config = SwitchConfigs[size] || {
-    radius: 8,
-    padding: 2,
-  };
-
-  const handleDiameter = config.radius * 2;
-  const switchWidth = config.radius * 4;
-
-  const switchStyle: CSSProperties = {
-    cursor: 'pointer',
-    display: 'flex',
-    justifyContent: isOn ? 'flex-end' : 'flex-start',
-    backgroundColor: isOn ? successColor : 'rgba(0, 0, 0, 0.4)',
-    width: switchWidth,
-    height: handleDiameter,
-    padding: config.padding,
-    borderRadius: config.radius + config.padding,
-  };
-
-  const handleStyle: CSSProperties = {
-    width: handleDiameter,
-    height: handleDiameter,
-    backgroundColor: 'white',
-    borderRadius: config.radius,
-  };
-
-  return (
-    <div style={switchStyle} className="switch" data-isOn={isOn} onClick={toggleSwitch}>
-      <motion.div style={handleStyle} className="handle" layout transition={spring} />
-    </div>
-  );
-};

package/src/components/switch/switch.config.ts

@@ -1,24 +0,0 @@
-import { Size } from '@uni-design-system/uni-core';
-
-export const SwitchConfigs: Partial<Record<Size, { radius: number; padding: number }>> = {
-  xs: {
-    radius: 6,
-    padding: 2,
-  },
-  sm: {
-    radius: 8,
-    padding: 2,
-  },
-  md: {
-    radius: 10,
-    padding: 3,
-  },
-  lg: {
-    radius: 12,
-    padding: 4,
-  },
-  xl: {
-    radius: 14,
-    padding: 5,
-  },
-};

package/src/components/switch/switch.stories.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Switch, SwitchProps } from './switch.component';
-
-export default {
-  title: 'Components / Switch',
-  component: Switch,
-  argTypes: {
-    size: {},
-  },
-};
-
-export const SwitchPlayground = ({ ...props }: SwitchProps) => <Switch {...props} />;

package/src/core/background/background.component.tsx

@@ -1,47 +0,0 @@
-import React, { CSSProperties, ReactNode } from 'react';
-import { Property } from 'csstype';
-
-export interface BackgroundProps {
-  className?: string;
-  children?: ReactNode;
-  image?: Property.BackgroundImage;
-  imageUrl?: string;
-  gradiant?: Property.BackgroundImage;
-  position?: Property.BackgroundPosition; // https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
-  size?: Property.BackgroundSize; // https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
-  attachment?: 'fixed' | 'local' | 'scroll';
-  minHeight?: Property.MinHeight;
-  color?: string;
-}
-
-export const Background = ({
-  children,
-  image,
-  imageUrl,
-  gradiant,
-  position,
-  size,
-  attachment,
-  className,
-  minHeight,
-  color,
-}: BackgroundProps): JSX.Element => {
-  if (!!imageUrl) {
-    image = `url(${imageUrl})`;
-  }
-
-  const style: CSSProperties = {
-    backgroundColor: color,
-    backgroundImage: image || gradiant,
-    backgroundPosition: position,
-    backgroundSize: size,
-    minHeight,
-    backgroundAttachment: attachment,
-  };
-
-  return (
-    <div className={className} style={style}>
-      {children}
-    </div>
-  );
-};

package/src/core/background/background.stories.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Background, BackgroundProps } from './background.component';
-
-export default {
-  title: 'Components/Background',
-  component: Background,
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export const ImageBackground = (args: BackgroundProps) => {
-  return <Background {...args} />;
-};
-
-const ImageBackgroundArgs: BackgroundProps = {
-  imageUrl: 'promenade.webp',
-  size: 'cover',
-  minHeight: '100vh',
-};
-
-ImageBackground.args = ImageBackgroundArgs;

package/src/core/background/index.ts

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