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

package/src/core/border/border.style.ts

@@ -1,31 +0,0 @@
-import { Border, ColorToken, getValue, UniTheme } from '@uni-design-system/uni-core';
-import { CSSProperties } from 'react';
-
-export function BorderStyle(border: Border | undefined, theme: UniTheme): 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: UniTheme, border: Border, key: string): string | undefined {
-  const colorToken = getValue(border, key, 'color') as ColorToken;
-  return colorToken ? theme.colors[colorToken] : undefined;
-}

package/src/core/border/index.ts

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

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

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

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

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

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

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

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

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

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

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

package/src/core/filter/index.ts

@@ -1,4 +0,0 @@
-export * from './filter.component';
-export * from './filter.config';
-export * from './filter.model';
-export * from './filter.types';

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

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

@@ -1,106 +0,0 @@
-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',
-};

package/src/core/flex/index.ts

@@ -1,2 +0,0 @@
-export * from './flex.style';
-export * from './flex.component';

package/src/core/hooks/index.ts

@@ -1,2 +0,0 @@
-export * from './use-toggle';
-export * from './use-media';

package/src/core/hooks/use-media.ts

@@ -1,29 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export const useMedia = <T>(queries: string[], values: T[], defaultValue: T) => {
-  // Array containing a media query list for each query
-  const mediaQueryLists = queries.map((q) => window.matchMedia(q));
-  // Function that gets value based on matching media query
-  const getValue = () => {
-    // Get index of first media query that matches
-    const index = mediaQueryLists.findIndex((mql) => mql.matches);
-    // Return related value or defaultValue if none
-    return values?.[index] || defaultValue;
-  };
-  // State and setter for matched value
-  const [value, setValue] = useState<T>(getValue);
-  useEffect(
-    () => {
-      // Event listener callback
-      // Note: By defining getValue outside of useEffect we ensure that it has ...
-      // ... current values of hook args (as this hook callback is created once on mount).
-      const handler = () => setValue(getValue);
-      // Set a listener for each media query with above handler as callback.
-      mediaQueryLists.forEach((mql) => mql.addListener(handler));
-      // Remove listeners on cleanup
-      return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));
-    },
-    [] // Empty array ensures effect is only run on mount and unmount
-  );
-  return value;
-};

package/src/core/hooks/use-toggle.tsx

@@ -1,23 +0,0 @@
-import { useMemo, useState } from 'react';
-
-type InitialState = boolean | (() => boolean);
-
-/**
- * React hook to manage boolean (on - off) states
- *
- * @param initialState the initial boolean state value
- *
- * @see Docs https://chakra-ui.com/docs/hooks/use-boolean
- */
-export function useToggle(initialState: InitialState = false) {
-  const [value, setValue] = useState(initialState);
-  const callbacks = useMemo(
-    () => ({
-      on: () => setValue(true),
-      off: () => setValue(false),
-      toggle: () => setValue((prev) => !prev),
-    }),
-    []
-  );
-  return [value, callbacks] as const;
-}

package/src/core/icon/icon.component.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { ContentColorToken } from '@uni-design-system/uni-core';
-
-import { useTheme } from '../theme';
-import { IconDictionary, type IconName } from '@uni-design-system/uni-react-icons/dist/cjs/src';
-
-export interface IconProps {
-  name?: IconName;
-  color?: ContentColorToken;
-  height?: number;
-  width?: number;
-}
-
-export function Icon({ name, color = 'on-surface', height = 24, width = 24 }: IconProps) {
-  if (!name) return <></>;
-  const { colors } = useTheme();
-  const Icon = IconDictionary[name];
-  return <Icon width={width} height={height} color={colors[color]} />;
-}

package/src/core/icon/icon.stories.tsx

@@ -1,52 +0,0 @@
-import React, { useState } from 'react';
-import { Icon, IconProps } from './icon.component';
-import { Button } from '../../components';
-import { IconKeys, IconName } from './index';
-
-export default {
-  title: 'Typography/Icons',
-  component: Icon,
-};
-
-export const IconPlayground = (args: IconProps) => <Icon {...args} />;
-
-IconPlayground.args = {
-  name: IconKeys[0],
-  height: 48,
-  width: 48,
-};
-
-export const IconManifest = (): JSX.Element => {
-  const [filteredIcons, setFilteredIcons] = useState<string[]>(IconKeys);
-
-  const Filter = (filter: string): string[] => {
-    return IconKeys.filter((name: string) => name.toLowerCase().indexOf(filter.toLowerCase()) > -1);
-  };
-
-  const copyToClipboard = async (iconName: string): Promise<void> => {
-    await navigator.clipboard.writeText(iconName);
-    alert(`Copied ${iconName} to clipboard.`);
-  };
-
-  return (
-    <div>
-      <input
-        onChange={(e): void => setFilteredIcons(Filter(e.target.value))}
-        placeholder="Filter Icons by Name"
-      />
-      <div>
-        {filteredIcons.map((iconName) => {
-          return (
-            <Button
-              buttonType="icon"
-              iconName={iconName as IconName}
-              onClick={(): Promise<void> => copyToClipboard(iconName)}
-            >
-              {iconName}
-            </Button>
-          );
-        })}
-      </div>
-    </div>
-  );
-};

package/src/core/icon/index.ts

@@ -1,6 +0,0 @@
-export {
-  IconDictionary,
-  type IconName,
-  IconKeys,
-} from '@uni-design-system/uni-react-icons/dist/cjs/src';
-export * from './icon.component';

package/src/core/image/image.argTypes.ts

@@ -1,23 +0,0 @@
-import { filterArgTypes } from '../filter/filter.argTypes';
-
-export const imageArgTypes = {
-  url: {
-    control: { type: 'text' },
-    table: { summary: 'string' },
-  },
-  fit: {
-    options: ['contain', 'cover', 'fill', 'none', 'scale-down'],
-    control: { type: 'inline-radio' },
-    table: {
-      type: { summary: 'string literal' },
-      defaultValue: { summary: 'cover' },
-    },
-  },
-  height: {
-    control: { type: 'number' },
-  },
-  width: {
-    control: { type: 'number' },
-  },
-  ...filterArgTypes,
-};