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

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

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

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

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

package/src/core/transition/index.ts

@@ -1,3 +0,0 @@
-export * from './collapse';
-export * from './fade';
-export * from './slide';

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

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

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

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

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

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

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

@@ -1,3 +0,0 @@
-export * from './core';
-export * from './components';
-export * from './utils';

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

@@ -1,25 +0,0 @@
-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/src/layouts/parallax-hero/parallax-hero.model.ts

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

package/src/stories/Button.stories.ts

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

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