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

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

@@ -0,0 +1,133 @@
+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/fade/fade.argTypes.ts

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

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

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { AnimatePresence, HTMLMotionProps, motion, Variants as _Variants } from 'framer-motion';
+
+import { forwardRef } from 'react';
+import { TRANSITION_DEFAULTS, Variants, withDelay, WithTransitionConfig } from '../transition.utils';
+
+export interface FadeProps extends WithTransitionConfig<HTMLMotionProps<'div'>> {}
+
+const variants: Variants = {
+  enter: ({ transition, transitionEnd, delay } = {}) => ({
+    opacity: 1,
+    transition: transition?.enter ?? withDelay.enter(TRANSITION_DEFAULTS.enter, delay),
+    transitionEnd: transitionEnd?.enter as any,
+  }),
+  exit: ({ transition, transitionEnd, delay } = {}) => ({
+    opacity: 0,
+    transition: transition?.exit ?? withDelay.exit(TRANSITION_DEFAULTS.exit, delay),
+    transitionEnd: transitionEnd?.exit as any,
+  }),
+};
+
+export const fadeConfig: HTMLMotionProps<'div'> = {
+  initial: 'exit',
+  animate: 'enter',
+  exit: 'exit',
+  variants: variants as _Variants,
+};
+
+export const Fade = forwardRef<HTMLDivElement, FadeProps>(function Fade(props, ref) {
+  const { unmountOnExit, in: isOpen, className, transition, transitionEnd, delay, ...rest } = props;
+
+  const animate = isOpen || unmountOnExit ? 'enter' : 'exit';
+  const show = unmountOnExit ? isOpen && unmountOnExit : true;
+
+  const custom = { transition, transitionEnd, delay };
+
+  return (
+    <AnimatePresence custom={custom}>
+      {show && <motion.div ref={ref} className={'fade'} custom={custom} {...fadeConfig} animate={animate} {...rest} />}
+    </AnimatePresence>
+  );
+});
+
+Fade.displayName = 'Fade';

package/src/core/transition/fade/fade.stories.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Fade, FadeProps } from './fade.component';
+import { useToggle } from '../../hooks';
+import { Button, Card } from '../../../components';
+import { Text } from '../../text';
+import { fadeArgTypes } from './fade.argTypes';
+
+export default {
+  title: 'Components / Transition / Fade',
+  argTypes: fadeArgTypes,
+};
+
+const Example = (props: FadeProps) => {
+  const [open, { toggle }] = useToggle(false);
+  return (
+    <>
+      <Button onClick={toggle}>Toggle Fade</Button>
+      <Fade in={open} {...props}>
+        <Card cardType="elevated" colorToken="background">
+          <Text>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</Text>
+        </Card>
+      </Fade>
+    </>
+  );
+};
+
+export const BasicFade = (props: FadeProps) => <Example {...props} />;
+const BasicFadeProps: FadeProps = {};
+BasicFade.props = BasicFadeProps;
+
+export const FadeWithCustomTransition = (props: FadeProps) => <Example {...props} />;
+const FadeWithCustomTransitionProps: FadeProps = {
+  transition: { enter: { duration: 0.3 }, exit: { duration: 0.5 } },
+};
+FadeWithCustomTransition.props = FadeWithCustomTransitionProps;
+
+export const FadeWithTransitionEnd = (props: FadeProps) => <Example {...props} />;
+const FadeFadeWithTransitionEndProps: FadeProps = {
+  style: { display: 'block' },
+  transitionEnd: { exit: { display: 'none' } },
+};
+FadeWithTransitionEnd.props = FadeFadeWithTransitionEndProps;
+
+export const FadeWithTransitionDelay = (props: FadeProps) => <Example {...props} />;
+const FadeWithTransitionDelayProps: FadeProps = {
+  delay: { enter: 0.2 },
+  style: {
+    maxWidth: 400,
+    paddingTop: 20,
+  },
+};
+FadeWithTransitionDelay.props = FadeWithTransitionDelayProps;

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

@@ -0,0 +1,101 @@
+import React from 'react';
+import { AnimatePresence, HTMLMotionProps, motion, MotionStyle, Variants as TVariants } from 'framer-motion';
+import { forwardRef } from 'react';
+import {
+  SlideDirection,
+  getSlideTransition,
+  TRANSITION_EASINGS,
+  Variants,
+  withDelay,
+  WithTransitionConfig,
+  cx,
+} from '../transition.utils';
+
+export type { SlideDirection };
+
+const defaultTransition = {
+  exit: {
+    duration: 0.15,
+    ease: TRANSITION_EASINGS.easeInOut,
+  },
+  enter: {
+    type: 'spring' as const,
+    damping: 25,
+    stiffness: 180,
+  },
+};
+
+const variants: Variants<SlideOptions> = {
+  exit: ({ direction, transition, transitionEnd, delay }) => {
+    const { exit: exitStyles } = getSlideTransition({ direction });
+    return {
+      ...exitStyles,
+      transition: transition?.exit ?? withDelay.exit(defaultTransition.exit, delay),
+      transitionEnd: transitionEnd?.exit as any,
+    };
+  },
+  enter: ({ direction, transitionEnd, transition, delay }) => {
+    const { enter: enterStyles } = getSlideTransition({ direction });
+    return {
+      ...enterStyles,
+      transition: transition?.enter ?? withDelay.enter(defaultTransition.enter, delay),
+      transitionEnd: transitionEnd?.enter as any,
+    };
+  },
+};
+
+export interface SlideOptions {
+  /**
+   * The direction to slide from
+   * @default "right"
+   */
+  direction?: SlideDirection;
+}
+
+export interface SlideProps extends WithTransitionConfig<HTMLMotionProps<'div'>>, SlideOptions {
+  motionProps?: HTMLMotionProps<'div'>;
+}
+
+export const Slide = forwardRef<HTMLDivElement, SlideProps>(function Slide(props, ref) {
+  const {
+    direction = 'right',
+    style,
+    unmountOnExit,
+    in: isOpen,
+    className,
+    transition,
+    transitionEnd,
+    delay,
+    motionProps,
+    ...rest
+  } = props;
+
+  const transitionStyles = getSlideTransition({ direction });
+  const computedStyle: MotionStyle = Object.assign({ position: 'fixed' }, transitionStyles.position, style);
+
+  const show = unmountOnExit ? isOpen && unmountOnExit : true;
+  const animate = isOpen || unmountOnExit ? 'enter' : 'exit';
+
+  const custom = { transitionEnd, transition, direction, delay };
+
+  return (
+    <AnimatePresence custom={custom}>
+      {show && (
+        <motion.div
+          {...rest}
+          ref={ref}
+          initial="exit"
+          className={cx('chakra-slide', className)}
+          animate={animate}
+          exit="exit"
+          custom={custom}
+          variants={variants as TVariants}
+          style={computedStyle}
+          {...motionProps}
+        />
+      )}
+    </AnimatePresence>
+  );
+});
+
+Slide.displayName = 'Slide';

package/src/core/transition/slide/slide.stories.tsx

@@ -0,0 +1,38 @@
+import { useToggle } from '../../hooks';
+import * as React from 'react';
+import { Slide, SlideProps } from './slide.component';
+import { Button, Card } from '../../../components';
+
+export default {
+  title: 'Components / Transition / Slide',
+  component: Slide,
+};
+
+export const Sidebar = ({ ...args }: SlideProps) => {
+  const [open, { toggle }] = useToggle(false);
+  return (
+    <>
+      <Button onClick={toggle}>Toggle Sidebar</Button>
+      <Slide
+        style={{
+          maxWidth: 400,
+          padding: 0,
+        }}
+        in={open}
+        {...args}
+      >
+        <Card
+          colorToken="background"
+          borderRadius="none"
+          cardType={open ? 'elevated' : undefined}
+          elevation="modal"
+          height="100%"
+        >
+          <Button buttonType="icon" iconName="xmarkSolid" onClick={toggle} />
+        </Card>
+      </Slide>
+    </>
+  );
+};
+
+Sidebar.args = {};

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

@@ -0,0 +1,10 @@
+export const transitionArgTypes = {
+  fadeDuration: {
+    control: { type: 'range', min: 0, max: 2, step: 0.01 },
+    table: {
+      type: { summary: 'number' },
+      defaultValue: { summary: '0' },
+    },
+    description: 'The amount of time (in seconds) for the fade transition to complete.',
+  },
+};

package/src/core/transition/transition.utils.ts

@@ -0,0 +1,159 @@
+import type { Target, TargetAndTransition, Transition } from 'framer-motion';
+
+export type TransitionProperties = {
+  /**
+   * Custom `transition` definition for `enter` and `exit`
+   */
+  transition?: TransitionConfig;
+  /**
+   * Custom `transitionEnd` definition for `enter` and `exit`
+   */
+  transitionEnd?: TransitionEndConfig;
+  /**
+   * Custom `delay` definition for `enter` and `exit`
+   */
+  delay?: number | DelayConfig;
+};
+
+type TargetResolver<P = {}> = (props: P & TransitionProperties) => TargetAndTransition;
+
+type Variant<P = {}> = TargetAndTransition | TargetResolver<P>;
+
+export type Variants<P = {}> = {
+  enter: Variant<P>;
+  exit: Variant<P>;
+  initial?: Variant<P>;
+};
+
+type WithMotionState<P> = Partial<Record<'enter' | 'exit', P>>;
+
+export type TransitionConfig = WithMotionState<Transition>;
+
+export type TransitionEndConfig = WithMotionState<Target>;
+
+export type DelayConfig = WithMotionState<number>;
+
+export const TRANSITION_EASINGS = {
+  ease: [0.25, 0.1, 0.25, 1],
+  easeIn: [0.4, 0, 1, 1],
+  easeOut: [0, 0, 0.2, 1],
+  easeInOut: [0.4, 0, 0.2, 1],
+} as const;
+
+export const TRANSITION_VARIANTS = {
+  scale: {
+    enter: { scale: 1 },
+    exit: { scale: 0.95 },
+  },
+  fade: {
+    enter: { opacity: 1 },
+    exit: { opacity: 0 },
+  },
+  pushLeft: {
+    enter: { x: '100%' },
+    exit: { x: '-30%' },
+  },
+  pushRight: {
+    enter: { x: '-100%' },
+    exit: { x: '30%' },
+  },
+  pushUp: {
+    enter: { y: '100%' },
+    exit: { y: '-30%' },
+  },
+  pushDown: {
+    enter: { y: '-100%' },
+    exit: { y: '30%' },
+  },
+  slideLeft: {
+    position: { left: 0, top: 0, bottom: 0, width: '100%' },
+    enter: { x: 0, y: 0 },
+    exit: { x: '-100%', y: 0 },
+  },
+  slideRight: {
+    position: { right: 0, top: 0, bottom: 0, width: '100%' },
+    enter: { x: 0, y: 0 },
+    exit: { x: '100%', y: 0 },
+  },
+  slideUp: {
+    position: { top: 0, left: 0, right: 0, maxWidth: '100vw' },
+    enter: { x: 0, y: 0 },
+    exit: { x: 0, y: '-100%' },
+  },
+  slideDown: {
+    position: { bottom: 0, left: 0, right: 0, maxWidth: '100vw' },
+    enter: { x: 0, y: 0 },
+    exit: { x: 0, y: '100%' },
+  },
+};
+
+export type SlideDirection = 'top' | 'left' | 'bottom' | 'right';
+
+export function getSlideTransition(options?: { direction?: SlideDirection }) {
+  const side = options?.direction ?? 'right';
+  switch (side) {
+    case 'right':
+      return TRANSITION_VARIANTS.slideRight;
+    case 'left':
+      return TRANSITION_VARIANTS.slideLeft;
+    case 'bottom':
+      return TRANSITION_VARIANTS.slideDown;
+    case 'top':
+      return TRANSITION_VARIANTS.slideUp;
+    default:
+      return TRANSITION_VARIANTS.slideRight;
+  }
+}
+
+export const TRANSITION_DEFAULTS = {
+  enter: {
+    duration: 0.2,
+    ease: TRANSITION_EASINGS.easeOut,
+  },
+  exit: {
+    duration: 0.1,
+    ease: TRANSITION_EASINGS.easeIn,
+  },
+} as const;
+
+export type WithTransitionConfig<P extends object> = Omit<P, 'transition'> &
+  TransitionProperties & {
+    /**
+     * If `true`, the element will unmount when `in={false}` and animation is done
+     */
+    unmountOnExit?: boolean;
+    /**
+     * Show the component; triggers when enter or exit states
+     */
+    in?: boolean;
+  };
+
+export const withDelay = {
+  enter: (transition: Transition, delay?: number | DelayConfig): Transition & { delay: number | undefined } => ({
+    ...transition,
+    delay: typeof delay === 'number' ? delay : delay?.['enter'],
+  }),
+  exit: (transition: Transition, delay?: number | DelayConfig): Transition & { delay: number | undefined } => ({
+    ...transition,
+    delay: typeof delay === 'number' ? delay : delay?.['exit'],
+  }),
+};
+
+// chakra-ui/packages/utilities/shared-utils
+export const cx = (...classNames: any[]) => classNames.filter(Boolean).join(' ');
+
+function isDev() {
+  return process.env.NODE_ENV !== 'production';
+}
+
+type MessageOptions = {
+  condition: boolean;
+  message: string;
+};
+
+export const warn = (options: MessageOptions) => {
+  const { condition, message } = options;
+  if (condition && isDev()) {
+    console.warn(message);
+  }
+};

package/src/layouts/parallax-hero/parallax-hero.component.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ParallaxHeroProps } from './parallax-hero.model';
+
+export const ParallaxHero = ({ layers, children }: ParallaxHeroProps): JSX.Element => {
+  return (
+    <div>
+      <div id="hero">
+        {layers.map((layer) => (
+          <div
+            className={layer.name + 'layer'}
+            data-depth={layer.depth}
+            data-type="parallax"
+            style={{ backgroundImage: layer.src }}
+          />
+        ))}
+      </div>
+
+      <div id="static-hero">
+        <div className="static-hero-image" />
+      </div>
+
+      <div>{children}</div>
+    </div>
+  );
+};

package/{dist/esm/layouts/parallax-hero/parallax-hero.model.d.ts → src/layouts/parallax-hero/parallax-hero.model.ts}

@@ -1,10 +1,12 @@
 import { ReactNode } from 'react';
+
 export interface ImageLayer {
-    name: string;
-    src: string;
-    depth: number;
+  name: string;
+  src: string;
+  depth: number;
 }
+
 export interface ParallaxHeroProps {
-    layers: ImageLayer[];
-    children: ReactNode;
+  layers: ImageLayer[];
+  children: ReactNode;
 }

package/src/stories/Button.stories.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { fn } from 'storybook/test';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

package/src/stories/Button.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import './button.css';
+
+export interface ButtonProps {
+  /** Is this the principal call to action on the page? */
+  primary?: boolean;
+  /** What background color to use */
+  backgroundColor?: string;
+  /** How large should the button be? */
+  size?: 'small' | 'medium' | 'large';
+  /** Button contents */
+  label: string;
+  /** Optional click handler */
+  onClick?: () => void;
+}
+
+/** Primary UI component for user interaction */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};