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

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

@@ -0,0 +1,56 @@
+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];
+
+  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

@@ -0,0 +1,24 @@
+import { Size } from '@uni-design-system/uni-core';
+
+export const SwitchConfigs: 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

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

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

@@ -0,0 +1,22 @@
+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/border/border.style.ts

@@ -0,0 +1,30 @@
+import { Border, ColorToken, getValue, Theme } from '@uni-design-system/uni-core';
+import { CSSProperties } from 'react';
+
+export function BorderStyle(border: Border | undefined, theme: Theme): CSSProperties {
+  if (!border) return {};
+
+  const borderTopColor = extractColor(theme, border, 'colorTop');
+  const borderBottomColor = extractColor(theme, border, 'colorBottom');
+  const borderLeftColor = extractColor(theme, border, 'colorLeft');
+  const borderRightColor = extractColor(theme, border, 'colorRight');
+  const borderTopWidth = getValue(border, 'widthTop', 'width');
+  const borderBottomWidth = getValue(border, 'widthBottom', 'width');
+  const borderLeftWidth = getValue(border, 'widthLeft', 'width');
+  const borderRightWidth = getValue(border, 'widthRight', 'width');
+
+  return {
+    borderTopColor,
+    borderBottomColor,
+    borderLeftColor,
+    borderRightColor,
+    borderTopWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    borderRightWidth,
+  };
+}
+
+function extractColor(theme: Theme, border: Border, key: string): string {
+  return theme.colors[getValue(border, key, 'color') as ColorToken];
+}

package/src/core/container/container.component.tsx

@@ -0,0 +1,20 @@
+import React, { createContext, CSSProperties, ReactNode } from 'react';
+import { ContainerColorToken } from '@uni-design-system/uni-core';
+
+export interface ContainerProps {
+  children: ReactNode;
+  style: CSSProperties;
+  colorToken?: ContainerColorToken;
+}
+
+export const ContainerContext = createContext<{ colorToken?: ContainerColorToken }>({});
+
+export default function Container({ children, style, colorToken, ...rest }: ContainerProps) {
+  return (
+    <ContainerContext.Provider value={{ colorToken }}>
+      <div style={style} {...rest}>
+        {children}
+      </div>
+    </ContainerContext.Provider>
+  );
+}

package/src/core/filter/filter.argTypes.ts

@@ -0,0 +1,111 @@
+// https://www.w3schools.com/csSref/css3_pr_filter.php
+
+export const filterArgTypes = {
+  blur: {
+    control: { type: 'range', min: 0, max: 100, step: 1 },
+    table: {
+      type: { summary: 'number' },
+      defaultValue: { summary: '0' },
+    },
+    description:
+      'Applies a blur effect to the image. A larger value will create more blur.\n' +
+      '\n' +
+      'If no value is specified, 0 is used.',
+  },
+  brightness: {
+    control: { type: 'range', min: 0, max: 100, step: 1 },
+    table: {
+      type: { summary: 'number' },
+      defaultValue: { summary: '0' },
+    },
+    description:
+      'Adjusts the brightness of the image.\n' +
+      '\n' +
+      '0% will make the image completely black.\n' +
+      '100% (1) is default and represents the original image.\n' +
+      'Values over 100% will provide brighter results.',
+  },
+  contrast: {
+    control: { type: 'range', min: 0, max: 100, step: 1 },
+    table: {
+      type: { summary: 'number' },
+      defaultValue: { summary: '0' },
+    },
+    description:
+      'Adjusts the contrast of the image.\n' +
+      '\n' +
+      '0% will make the image completely black.\n' +
+      '100% (1) is default, and represents the original image.\n' +
+      'Values over 100% will provide results with more contrast.',
+  },
+  grayscale: {
+    control: { type: 'range', min: 0, max: 100, step: 1 },
+    table: {
+      type: { summary: 'number' },
+      defaultValue: { summary: '0' },
+    },
+    description:
+      'Converts the image to grayscale.\n' +
+      '\n' +
+      '0% (0) is default and represents the original image.\n' +
+      '100% will make the image completely gray (used for black and white images).',
+  },
+  'hue-rotate': {
+    control: { type: 'range', min: 0, max: 360, step: 1 },
+    table: {
+      type: { summary: 'number' },
+      defaultValue: { summary: '0' },
+    },
+    description:
+      'Applies a hue rotation on the image. The value defines the number of degrees around the color circle the image samples will be adjusted. 0deg is default, and represents the original image.',
+  },
+  invert: {
+    control: { type: 'range', min: 0, max: 100, step: 1 },
+    table: {
+      type: { summary: 'number' },
+      defaultValue: { summary: '0' },
+    },
+    description:
+      'Inverts the samples in the image.\n' +
+      '\n' +
+      '0% (0) is default and represents the original image.\n' +
+      '100% will make the image completely inverted.',
+  },
+  opacity: {
+    control: { type: 'range', min: 0, max: 1, step: 0.01 },
+    table: {
+      type: { summary: 'number' },
+      defaultValue: { summary: '1' },
+    },
+    description:
+      'Sets the opacity level for the image. The opacity-level describes the transparency-level, where:\n' +
+      '\n' +
+      '0% is completely transparent.\n' +
+      '100% (1) is default and represents the original image (no transparency).',
+  },
+  saturate: {
+    control: { type: 'range', min: 0, max: 100, step: 1 },
+    table: {
+      type: { summary: 'number' },
+      defaultValue: { summary: '0' },
+    },
+    description:
+      'Saturates the image.\n' +
+      '\n' +
+      '0% (0) will make the image completely un-saturated.\n' +
+      '100% is default and represents the original image.\n' +
+      'Values over 100% provides super-saturated results.',
+  },
+  sepia: {
+    control: { type: 'range', min: 0, max: 100, step: 1 },
+    table: {
+      type: { summary: 'number' },
+      defaultValue: { summary: '0' },
+    },
+    description:
+      'Converts the image to sepia.\n' +
+      '\n' +
+      '0% (0) is default and represents the original image.\n' +
+      '100% will make the image completely sepia.',
+  },
+};

package/src/core/filter/filter.component.tsx

@@ -0,0 +1,11 @@
+import React, { PropsWithChildren } from 'react';
+import Container from '../container/container.component';
+import { FilterStyle } from './filter.style';
+import { FilterProps } from './filter.model';
+
+export const Filter = (filterProps: PropsWithChildren<FilterProps>) => {
+  const { children } = filterProps;
+  const style = FilterStyle(filterProps);
+
+  return <Container style={style}>{children}</Container>;
+};

package/src/core/filter/filter.config.ts

@@ -0,0 +1,68 @@
+import { FilterConfig } from './filter.model';
+import { FilterType } from './filter.types';
+
+export const FilterConfigs: Record<FilterType, FilterConfig> = {
+  blur: {
+    type: 'blur',
+    unit: 'px',
+    defaultValue: 4,
+    rangeLow: 0,
+    rangeHigh: 100,
+  },
+  brightness: {
+    type: 'brightness',
+    unit: '%',
+    defaultValue: 250,
+    rangeLow: 0,
+    rangeHigh: 100,
+  },
+  contrast: {
+    type: 'contrast',
+    unit: '%',
+    defaultValue: 180,
+    rangeLow: 0,
+    rangeHigh: 100,
+  },
+  grayscale: {
+    type: 'grayscale',
+    unit: '%',
+    defaultValue: 100,
+    rangeLow: 0,
+    rangeHigh: 100,
+  },
+  'hue-rotate': {
+    type: 'hue-rotate',
+    unit: 'deg',
+    defaultValue: 180,
+    rangeLow: 0,
+    rangeHigh: 360,
+  },
+  invert: {
+    type: 'invert',
+    unit: '%',
+    defaultValue: 100,
+    rangeLow: 0,
+    rangeHigh: 100,
+  },
+  opacity: {
+    type: 'opacity',
+    unit: '%',
+    defaultValue: 50,
+    rangeLow: 0,
+    rangeHigh: 100,
+  },
+  saturate: {
+    type: 'saturate',
+    unit: 'num',
+    defaultValue: 7,
+    rangeLow: 0,
+    rangeHigh: 100,
+  },
+  sepia: {
+    type: 'sepia',
+    unit: '%',
+    defaultValue: 100,
+    rangeLow: 0,
+    rangeHigh: 100,
+  },
+};

package/src/core/filter/filter.model.ts

@@ -0,0 +1,22 @@
+import { FilterType, FilterUnit } from './filter.types';
+
+export interface FilterProps {
+  blur?: number;
+  brightness?: number;
+  contrast?: number;
+  grayscale?: number;
+  'hue-rotate'?: number;
+  invert?: number;
+  opacity?: number;
+  saturate?: number;
+  sepia?: number;
+}
+
+export interface FilterConfig {
+  type: FilterType;
+  value?: number;
+  unit?: FilterUnit;
+  defaultValue?: number;
+  rangeLow?: number;
+  rangeHigh?: number;
+}

package/src/core/filter/filter.style.ts

@@ -0,0 +1,22 @@
+import { CSSProperties } from 'react';
+import { FilterConfig, FilterProps } from './filter.model';
+import { FilterType } from './filter.types';
+import { FilterConfigs } from './filter.config';
+
+const getFilterConfig = (filterType: FilterType): FilterConfig | undefined => {
+  return FilterConfigs[filterType];
+};
+
+const getFilterSetting = (type: FilterType, value?: number): string => {
+  if (!value) return '';
+  const unit = getFilterConfig(type)?.unit;
+  return `${type}(${value}${unit && unit !== 'num' ? unit : ''})`;
+};
+
+export const FilterStyle = (filterSettings: Partial<FilterProps>): CSSProperties => {
+  const filterNames = Object.keys(filterSettings) as FilterType[];
+
+  const filterArray = filterNames.map((type) => getFilterSetting(type, filterSettings[type]));
+  console.log(filterArray);
+  return { filter: filterArray.join(' ') };
+};

package/src/core/filter/filter.types.ts

@@ -0,0 +1,12 @@
+export type FilterType =
+  | 'blur'
+  | 'brightness'
+  | 'contrast'
+  | 'grayscale'
+  | 'hue-rotate'
+  | 'invert'
+  | 'opacity'
+  | 'saturate'
+  | 'sepia';
+
+export type FilterUnit = 'px' | '%' | 'deg' | 'num';

package/src/core/flex/flex.component.tsx

@@ -0,0 +1,91 @@
+import React, { HTMLAttributes, ReactNode } from 'react';
+import { CSSProperties, forwardRef } from 'react';
+import {
+  AlignContent,
+  FlexDirection,
+  FlexGrow,
+  FlexShrink,
+  FlexWrap,
+  JustifyContent,
+} from '@uni-design-system/uni-core';
+import { Property } from 'csstype';
+
+export interface FlexOptions extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Shorthand for `alignItems` style prop
+   * @type AlignItems
+   */
+  align?: AlignContent;
+
+  /**
+   * Shorthand for `justifyContent` style prop
+   * @type JustifyContent
+   */
+  justify?: JustifyContent;
+
+  /**
+   * Shorthand for `flexWrap` style prop
+   * @type FlexWrap
+   */
+  wrap?: FlexWrap;
+
+  /**
+   * Shorthand for `flexDirection` style prop
+   * @type FlexDirection
+   * @default "row"
+   */
+  direction?: FlexDirection;
+
+  /**
+   * Shorthand for `flexBasis` style prop
+   * @type number
+   */
+  basis?: number;
+
+  /**
+   * Shorthand for `flexGrow` style prop
+   * @type FlexGrow
+   */
+  grow?: FlexGrow;
+
+  /**
+   * Shorthand for `flexShrink` style prop
+   * @type FlexShrink
+   */
+  shrink?: FlexShrink;
+
+  gap?: Property.Gap<number | string>;
+}
+
+export interface FlexProps extends FlexOptions {
+  children: ReactNode;
+}
+
+/**
+ * React component used to create flexbox layouts.
+ *
+ * It renders a `div` with `display: flex` and
+ * comes with helpful style shorthand.
+ *
+ * @see Docs
+ */
+export const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
+  const { direction, align, justify, wrap, basis, grow, shrink, gap, style, ...rest } = props;
+
+  const styles: CSSProperties = {
+    display: 'flex',
+    flexDirection: direction,
+    alignItems: align,
+    justifyContent: justify,
+    flexWrap: wrap,
+    flexBasis: basis,
+    flexGrow: grow,
+    flexShrink: shrink,
+    gap,
+    ...style,
+  };
+
+  return <div ref={ref} style={styles} {...rest} />;
+});
+
+Flex.displayName = 'Flex';

package/src/core/flex/flex.style.ts

@@ -0,0 +1,106 @@
+import { CSSProperties } from 'react';
+import { HorizontalAlign, VerticalAlign } from '@uni-design-system/uni-core';
+
+export const flex: CSSProperties = { flex: 1 };
+
+export const row: CSSProperties = {
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'row'
+};
+
+export const column: CSSProperties = {
+  flex: 1,
+  flexDirection: 'column'
+};
+
+export const alignTop: CSSProperties = { alignItems: 'flex-start' };
+export const alignCenter: CSSProperties = { alignItems: 'center' };
+export const alignBottom: CSSProperties = { alignItems: 'flex-end' };
+
+export const FlexVerticalAlignments: Record<VerticalAlign, CSSProperties> = {
+  top: alignTop,
+  middle: alignCenter,
+  bottom: alignBottom
+};
+
+export const justifyLeft: CSSProperties = { justifyContent: 'flex-start' };
+export const justifyCenter: CSSProperties = { justifyContent: 'center' };
+export const justifyRight: CSSProperties = { justifyContent: 'flex-end' };
+
+export const FlexHorizontalAlignments: Record<HorizontalAlign, CSSProperties> = {
+  left: justifyLeft,
+  center: justifyCenter,
+  right: justifyRight
+};
+
+export const expand: CSSProperties = { flexGrow: 1 };
+export const fix: CSSProperties = { flex: 0, flexGrow: 0 };
+
+export const rowFlexItem: CSSProperties = {
+  flexGrow: 1
+};
+
+export const rowFixedItem: CSSProperties = {
+  flexGrow: 0
+};
+
+export const flexRowStart: CSSProperties = {
+  flexDirection: 'row',
+  justifyContent: 'flex-start',
+  alignItems: 'center'
+};
+
+export const flexRowCenter: CSSProperties = {
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center'
+};
+
+export const flexRowEnd: CSSProperties = {
+  flexDirection: 'row',
+  justifyContent: 'flex-end',
+  alignItems: 'center'
+};
+
+export const spaceBetween: CSSProperties = {
+  justifyContent: 'space-between'
+};
+
+export const flexRowSpaceBetween: CSSProperties = {
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  alignItems: 'center'
+};
+
+export const flexRowSpaceAround: CSSProperties = {
+  flexDirection: 'row',
+  justifyContent: 'space-around',
+  alignItems: 'center'
+};
+
+export const spaceEvenly: CSSProperties = {
+  justifyContent: 'space-evenly'
+};
+
+export const flexRowSpaceEvenly: CSSProperties = {
+  flexDirection: 'row',
+  justifyContent: 'space-evenly',
+  alignItems: 'center'
+};
+
+export const flexColumnCenter: CSSProperties = {
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center'
+};
+
+export const flexColumnSpaceAround: CSSProperties = {
+  flexDirection: 'column',
+  justifyContent: 'space-around',
+  alignItems: 'center'
+};
+
+export const flexOff: CSSProperties = {
+  position: 'relative'
+};