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

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

@@ -1,17 +0,0 @@
-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/src/core/image/image.model.ts

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

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

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

@@ -1,19 +0,0 @@
-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/image/image.types.ts

@@ -1 +0,0 @@
-export type ImageFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';

package/src/core/image/index.ts

@@ -1,2 +0,0 @@
-export * from './image.component';
-export * from './image.model';

package/src/core/index.ts

@@ -1,14 +0,0 @@
-export * from './background';
-export * from './border';
-export * from './container';
-export * from './flex';
-export * from './hooks';
-export * from './icon';
-export * from './image';
-export * from './layout';
-export * from './overlay';
-export * from './padding';
-export * from './shadow';
-export * from './text';
-export * from './theme';
-export * from './transition';

package/src/core/layout/index.ts

@@ -1,2 +0,0 @@
-export * from './layout.hook';
-export * from './layout.provider';

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

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

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

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

@@ -1,2 +0,0 @@
-export * from './overlay.component';
-export * from './overlay.model';

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

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

@@ -1,30 +0,0 @@
-import { UniTheme, HSLAToString } from '@uni-design-system/uni-core';
-import { CSSProperties } from 'react';
-import { OverlayProps } from './overlay.model';
-
-export const OverlayStyle = (
-  theme: UniTheme,
-  {
-    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

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

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

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

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

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

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

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

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

package/src/core/text/index.ts

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

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

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

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

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

package/src/core/theme/theming.tsx

@@ -1,30 +0,0 @@
-import React, { createContext, useContext, useMemo } from 'react';
-import { LightTheme, type UniTheme } from '@uni-design-system/uni-core';
-
-const defaultTheme = LightTheme;
-
-const ThemeContext = createContext<UniTheme>(defaultTheme);
-
-export const ThemeProvider: React.FC<{ theme?: UniTheme; 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: UniTheme }>(
-  Component: React.ComponentType<P>
-): React.ComponentType<Omit<P, 'theme'>> {
-  return function WrappedComponent(props: any) {
-    const theme = useTheme();
-    return <Component {...props} theme={theme} />;
-  };
-}

package/src/core/transition/collapse/collapse.component.tsx

@@ -1,141 +0,0 @@
-import React from 'react';
-import { AnimatePresence, HTMLMotionProps, motion, Variants as _Variants } from 'framer-motion';
-import { forwardRef, useEffect, useState } from 'react';
-import {
-  TRANSITION_EASINGS,
-  Variants,
-  withDelay,
-  WithTransitionConfig,
-  cx,
-  warn,
-} from '../transition.utils';
-
-const isNumeric = (value?: string | number) => value != null && parseInt(value.toString(), 10) > 0;
-
-export interface CollapseOptions {
-  /**
-   * If `true`, the opacity of the content will be animated
-   * @default true
-   */
-  animateOpacity?: boolean;
-  /**
-   * The height you want the content in its collapsed state.
-   * @default 0
-   */
-  startingHeight?: number | string;
-  /**
-   * The height you want the content in its expanded state.
-   * @default "auto"
-   */
-  endingHeight?: number | string;
-}
-
-const defaultTransitions = {
-  exit: {
-    height: { duration: 0.2, ease: TRANSITION_EASINGS.ease },
-    opacity: { duration: 0.3, ease: TRANSITION_EASINGS.ease },
-  },
-  enter: {
-    height: { duration: 0.3, ease: TRANSITION_EASINGS.ease },
-    opacity: { duration: 0.4, ease: TRANSITION_EASINGS.ease },
-  },
-};
-
-const variants: Variants<CollapseOptions> = {
-  exit: ({ animateOpacity, startingHeight, transition, transitionEnd, delay }) => ({
-    ...(animateOpacity && { opacity: isNumeric(startingHeight) ? 1 : 0 }),
-    height: startingHeight,
-    transitionEnd: transitionEnd?.exit as any,
-    transition: transition?.exit ?? withDelay.exit(defaultTransitions.exit, delay),
-  }),
-  enter: ({ animateOpacity, endingHeight, transition, transitionEnd, delay }) => ({
-    ...(animateOpacity && { opacity: 1 }),
-    height: endingHeight,
-    transitionEnd: transitionEnd?.enter as any,
-    transition: transition?.enter ?? withDelay.enter(defaultTransitions.enter, delay),
-  }),
-};
-
-export type ICollapse = CollapseProps;
-
-export interface CollapseProps
-  extends WithTransitionConfig<HTMLMotionProps<'div'>>, CollapseOptions {}
-
-export const Collapse = forwardRef<HTMLDivElement, CollapseProps>((props, ref) => {
-  const {
-    in: isOpen,
-    unmountOnExit,
-    animateOpacity = true,
-    startingHeight = 0,
-    endingHeight = 'auto',
-    style,
-    className,
-    transition,
-    transitionEnd,
-    ...rest
-  } = props;
-
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setMounted(true);
-    });
-    return () => clearTimeout(timeout);
-  }, []);
-
-  /**
-   * Warn 🚨: `startingHeight` and `unmountOnExit` are mutually exclusive
-   *
-   * If you specify a starting height, the collapsed needs to be mounted
-   * for the height to take effect.
-   */
-  warn({
-    condition: Boolean(parseFloat(startingHeight.toString()) > 0 && unmountOnExit),
-    message: `startingHeight and unmountOnExit are mutually exclusive. You can't use them together`,
-  });
-
-  const hasStartingHeight = parseFloat(startingHeight.toString()) > 0;
-
-  const custom = {
-    startingHeight,
-    endingHeight,
-    animateOpacity,
-    transition: !mounted ? { enter: { duration: 0 } } : transition,
-    transitionEnd: {
-      enter: transitionEnd?.enter,
-      exit: unmountOnExit
-        ? transitionEnd?.exit
-        : {
-            ...transitionEnd?.exit,
-            display: hasStartingHeight ? 'block' : 'none',
-          },
-    },
-  };
-
-  const show = unmountOnExit ? isOpen : true;
-  const animate = isOpen || unmountOnExit ? 'enter' : 'exit';
-
-  return (
-    <AnimatePresence initial={false} custom={custom}>
-      {show && (
-        <motion.div
-          ref={ref}
-          {...rest}
-          className={cx('chakra-collapse', className)}
-          style={{
-            overflow: 'hidden',
-            display: 'block',
-            ...style,
-          }}
-          custom={custom}
-          variants={variants as _Variants}
-          initial={unmountOnExit ? 'exit' : false}
-          animate={animate}
-          exit="exit"
-        />
-      )}
-    </AnimatePresence>
-  );
-});
-
-Collapse.displayName = 'Collapse';

package/src/core/transition/collapse/index.ts

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

package/src/core/transition/fade/fade.argTypes.ts

@@ -1,5 +0,0 @@
-export const fadeArgTypes = {
-  transition: {},
-  transitionEnd: {},
-  delay: {},
-};