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

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

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

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

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

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

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

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

package/src/core/image/image.component.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ImageProps } from './image.model';
+import { ImageStyle } from './image.style';
+
+export const Image = ({ url, alt, height, width, opacity, fit = 'cover', ...rest }: ImageProps): JSX.Element | null => {
+  return url ? <img src={url} alt={alt} style={ImageStyle({ fit, opacity, height, width, ...rest })} /> : null;
+};

package/{dist/esm/core/image/image.model.d.ts → src/core/image/image.model.ts}

@@ -1,9 +1,10 @@
 import { ImageFit } from './image.types';
 import { FilterProps } from '../filter';
+
 export interface ImageProps extends FilterProps {
-    url?: string | undefined;
-    alt?: string;
-    fit?: ImageFit;
-    height?: number;
-    width?: number;
+  url?: string | undefined;
+  alt?: string;
+  fit?: ImageFit;
+  height?: number;
+  width?: number;
 }

package/src/core/image/image.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Image } from './image.component';
+import { ImageProps } from './image.model';
+import { imageArgTypes } from './image.argTypes';
+
+export default {
+  title: 'Core/Image',
+  component: Image,
+  argTypes: { ...imageArgTypes },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const ImagePlayground = (args: ImageProps) => <Image {...args} />;
+
+const ImagePlaygroundProps: Partial<ImageProps> = {
+  fit: 'contain',
+  url: 'https://www.rollingstone.com/wp-content/uploads/2018/06/rs-108784-e569415749457a65514cfe8b509d7ead8b7b4013.jpg?w=500',
+};
+
+ImagePlayground.args = ImagePlaygroundProps;

package/src/core/image/image.style.ts

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+import { ImageProps } from './image.model';
+import { FilterStyle } from '../filter/filter.style';
+
+export const ImageStyle = (props: Partial<ImageProps>): CSSProperties => {
+  const { fit, opacity, height, width, ...rest } = props;
+
+  const filter = FilterStyle({ ...rest });
+
+  const objectFit = height || width ? {} : { objectFit: fit };
+
+  return {
+    ...objectFit,
+    width: (width && `${width}px`) || '100vw',
+    height: (height && `${height}px`) || '100vh',
+    opacity,
+    ...filter,
+  };
+};

package/src/core/layout/layout.context.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+interface ScreenSize {
+  height: number;
+  width: number;
+}
+
+const LayoutContext = React.createContext<ScreenSize>({ height: 1000, width: 1000 });
+
+if (process.env.NODE_ENV !== 'production') {
+  LayoutContext.displayName = 'LayoutContext';
+}
+
+export default LayoutContext;

package/src/core/layout/layout.hook.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { getDeviceOrientation, getDeviceSize, Layout } from '@uni-design-system/uni-core';
+import LayoutContext from './layout.context';
+
+export function useLayout(): Layout {
+  const { height, width } = React.useContext(LayoutContext);
+  const deviceSize = getDeviceSize(height, width);
+  const orientation = getDeviceOrientation(height, width);
+
+  return { orientation, deviceSize };
+}

package/src/core/layout/layout.provider.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import LayoutContext from './layout.context';
+
+// @ts-ignore
+export const LayoutProvider = ({children}) => {
+
+  const getWidth = () => document.documentElement.clientWidth;
+  const getHeight = () => document.documentElement.clientHeight;
+
+  const [width, setWidth] = React.useState(getWidth);
+  const [height, setHeight] = React.useState(getHeight);
+
+  const handleWindowResize = () => {
+    setWidth(getWidth);
+    setHeight(getHeight);
+  };
+
+  React.useEffect(() => {
+    window.addEventListener("resize", handleWindowResize);
+    return () => window.removeEventListener("resize", handleWindowResize);
+  }, []);
+
+  return (
+    <LayoutContext.Provider value={{ height, width }}>
+      { children }
+    </LayoutContext.Provider>
+  )
+}

package/src/core/overlay/overlay.component.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { OverlayStyle } from './overlay.config';
+import { useTheme } from '../theme';
+import { OverlayProps } from './overlay.model';
+
+export const Overlay = (props: OverlayProps): JSX.Element => {
+  const { isOpen, fadeDuration = 0.35 } = props;
+  const theme = useTheme();
+  const overlayStyle = OverlayStyle(theme, props);
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: fadeDuration }}
+          style={overlayStyle}
+        >
+          {props.children}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};

package/src/core/overlay/overlay.config.ts

@@ -0,0 +1,23 @@
+import { Theme, HSLAToString } from '@uni-design-system/uni-core';
+import { CSSProperties } from 'react';
+import { OverlayProps } from './overlay.model';
+
+export const OverlayStyle = (
+  theme: Theme,
+  { hueRotateDeg = 0, hueDeg = 0, saturation = 0, lightness = 0, transparency = 0.5, blurPx = 0 }: OverlayProps,
+): CSSProperties => {
+  const backgroundColor = HSLAToString({ hue: hueDeg, saturation, lightness, alpha: transparency });
+
+  return {
+    position: 'fixed',
+    left: '0',
+    top: '0',
+    width: '100vw',
+    height: '100vh',
+    backgroundColor,
+    backdropFilter: `blur(${blurPx}px) hue-rotate(${hueRotateDeg}deg)`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+};

package/src/core/overlay/overlay.model.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+
+export interface OverlayProps {
+  children?: ReactNode;
+  blurPx?: number;
+  hueRotateDeg?: number;
+  hueDeg?: number;
+  saturation?: number;
+  lightness?: number;
+  transparency?: number;
+  isOpen?: boolean;
+  fadeDuration?: number;
+}

package/src/core/overlay/overlay.stories.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Overlay } from './overlay.component';
+import { OverlayProps } from './overlay.model';
+import { transitionArgTypes } from '../transition/transition.argTypes';
+
+export default {
+  title: 'Core/Overlay',
+  component: Overlay,
+  argTypes: {
+    hueDeg: {
+      control: { type: 'range', min: 0, max: 360, step: 1 },
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '0' },
+      },
+      description: 'The hue in degrees.',
+    },
+
+    saturation: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '0' },
+      },
+      description: 'A number from 1-100 to define the color saturation percentage.',
+    },
+
+    lightness: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '0' },
+      },
+      description: 'A number from 1-100 to define the color lightness percentage.',
+    },
+
+    transparency: {
+      control: { type: 'range', min: 0, max: 1, step: 0.01 },
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '0.5' },
+      },
+      description: 'A decimal of 1 to define the color lightness percentage.',
+    },
+
+    blurPx: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '0' },
+      },
+      description: 'The amount of blur defined in pixels.',
+    },
+
+    hueRotateDeg: {
+      control: { type: 'range', min: 0, max: 360, step: 1 },
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '0' },
+      },
+      description: 'The hue in degrees.',
+    },
+    ...transitionArgTypes,
+  },
+};
+
+export const OverlayPlayground = (args: OverlayProps) => <Overlay {...args} />;
+
+const OverlayPlaygroundProps: Partial<OverlayProps> = {
+  isOpen: true,
+};
+
+OverlayPlayground.args = OverlayPlaygroundProps;

package/src/core/padding/padding.style.ts

@@ -0,0 +1,36 @@
+import { CSSProperties } from 'react';
+import { Apply, Size } from '@uni-design-system/uni-core';
+
+export function Padding(size: Size, apply: Apply): CSSProperties {
+
+  const amount: number = 16;
+  const unit: string = 'px';
+
+  const PaddingMap: Record<Apply, CSSProperties> = {
+    top: {
+      paddingTop: amount + unit
+    },
+    bottom: {
+      paddingBottom: amount + unit
+    },
+    left: {
+      paddingLeft: amount + unit
+    },
+    right: {
+      paddingRight: amount + unit
+    },
+    vertical: {
+      paddingTop: amount + unit,
+      paddingBottom: amount + unit
+    },
+    horizontal: {
+      paddingLeft: amount + unit,
+      paddingRight: amount + unit
+    },
+    all: {
+      padding: amount + unit
+    }
+  }
+
+  return PaddingMap[apply];
+}

package/src/core/shadow/shadow.style.ts

@@ -0,0 +1,5 @@
+import { ShadowElevation, ShadowCssMap } from '@uni-design-system/uni-core';
+
+export function BoxShadow(elevation: ShadowElevation) {
+  return ShadowCssMap[elevation];
+}

package/src/core/text/text.component.tsx

@@ -0,0 +1,47 @@
+import React, { ReactNode, useContext } from 'react';
+
+import {
+  ColorToken,
+  ContentColorToken,
+  FontWeight,
+  FontWeightMap,
+  HorizontalAlign,
+  Size,
+  TextRole,
+} from '@uni-design-system/uni-core';
+import { useTheme } from '../theme';
+import { ContainerContext } from '../container';
+
+export interface TextProps {
+  text?: string;
+  children?: ReactNode;
+  align?: HorizontalAlign;
+  role?: TextRole;
+  scale?: Size;
+  colorToken?: ContentColorToken;
+}
+
+export function Text(props: TextProps) {
+  const { text, children, align, role = 'body-1-long', colorToken: overridingColorToken } = props;
+  const { colors, typography } = useTheme();
+
+  const { colorToken: containerColorToken } = useContext(ContainerContext);
+
+  const colorToken = containerColorToken ? (`on-${containerColorToken}` as ColorToken) : undefined;
+
+  const { fontSize, letterSpacing, lineHeight, fontWeight, fontFamily, fontStyle, textTransform } = typography[role];
+
+  const style = {
+    color: colors[overridingColorToken || colorToken || 'on-surface'],
+    fontSize: fontSize + 'px',
+    letterSpacing,
+    textAlign: align,
+    textTransform,
+    lineHeight: lineHeight + 'px',
+    fontFamily,
+    fontStyle,
+    fontWeight: FontWeightMap[fontWeight as FontWeight],
+  };
+
+  return <div style={style}>{text || children}</div>;
+}

package/src/core/text/text.stories.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { Text, TextProps } from './text.component';
+
+export default {
+  title: 'Typography/Text',
+  component: Text
+};
+
+const baseArgs: Partial<TextProps> = {
+  text: 'UNI Design System',
+  colorToken: 'on-background'
+}
+
+export const DisplayLarge = (args: TextProps) => <Text {...args} />;
+DisplayLarge.args = { ...baseArgs,
+  role: 'display-large'
+}
+DisplayLarge.story = {
+  name: 'Display (large)',
+};
+
+export const DisplayMedium = (args: TextProps) => <Text {...args} />;
+DisplayMedium.args = { ...baseArgs,
+  role: 'display-medium'
+}
+DisplayMedium.story = {
+  name: 'Display (medium)',
+};
+
+export const DisplaySmall = (args: TextProps) => <Text {...args} />;
+DisplaySmall.args = { ...baseArgs,
+  role: 'display-small'
+}
+DisplaySmall.story = {
+  name: 'Display (small)',
+};
+
+export const HeadlineLarge = (args: TextProps) => <Text {...args} />;
+HeadlineLarge.args = { ...baseArgs,
+  role: 'headline-large'
+}
+HeadlineLarge.story = {
+  name: 'Headline (large)',
+};
+
+export const HeadlineMedium = (args: TextProps) => <Text {...args} />;
+HeadlineMedium.args = { ...baseArgs,
+  role: 'headline-medium'
+}
+HeadlineMedium.story = {
+  name: 'Headline (medium)',
+};
+
+export const HeadlineSmall = (args: TextProps) => <Text {...args} />;
+HeadlineSmall.args = { ...baseArgs,
+  role: 'headline-small'
+}
+HeadlineSmall.story = {
+  name: 'Headline (small)',
+};
+
+export const TitleLarge = (args: TextProps) => <Text {...args} />;
+TitleLarge.args = { ...baseArgs,
+  role: 'title-large'
+}
+TitleLarge.story = {
+  name: 'Title (large)',
+};
+
+export const TitleMedium = (args: TextProps) => <Text {...args} />;
+TitleMedium.args = { ...baseArgs,
+  role: 'title-medium'
+}
+TitleMedium.story = {
+  name: 'Title (medium)',
+};
+
+export const TitleSmall = (args: TextProps) => <Text {...args} />;
+TitleSmall.args = { ...baseArgs,
+  role: 'title-small'
+}
+TitleSmall.story = {
+  name: 'Title (small)',
+};

package/src/core/theme/index.ts

@@ -0,0 +1 @@
+export { ThemeProvider, withTheme, useTheme } from './theming';

package/src/core/theme/theming.tsx

@@ -0,0 +1,29 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import {LightTheme, type Theme} from "@uni-design-system/uni-core";
+
+const defaultTheme = LightTheme;
+
+const ThemeContext = createContext<Theme>(defaultTheme);
+
+export const ThemeProvider: React.FC<{ theme?: Theme; children: React.ReactNode }> = ({ theme, children }) => {
+  // Use useMemo to prevent unnecessary re-renders when the parent re-renders
+  const value = useMemo(() => theme || defaultTheme, [theme]);
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+};
+
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) throw new Error("useTheme must be used within ThemeProvider");
+  return context;
+};
+
+
+export function withTheme<P extends { theme: Theme }>(
+  Component: React.ComponentType<P>
+): React.ComponentType<Omit<P, 'theme'>> {
+  return function WrappedComponent(props: any) {
+    const theme = useTheme();
+    return <Component {...props} theme={theme} />;
+  };
+}