polpo 0.1.0

package/src/components/buttons/button/button.style.ts

@@ -0,0 +1,147 @@
+import styled from 'styled-components';
+
+import { RadiusStyles, SizeStyles } from '../../../core/variants';
+
+export type ButtonStyleProps = {
+  $color: string;
+  $colorDark: string;
+  $colorContrast: string;
+};
+
+export const ButtonStyle = styled.button<ButtonStyleProps>`
+  cursor: pointer;
+  font-weight: bold;
+  display: grid;
+  grid-auto-flow: column;
+  gap: 0.7em;
+  align-items: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  justify-items: center;
+  text-align: center;
+  justify-content: center;
+  position: relative;
+  user-select: none;
+
+  ${SizeStyles}
+  ${RadiusStyles}
+
+  .button-loader-icon {
+    animation: spin 800ms linear infinite;
+    font-size: 1.2em;
+  }
+
+  &.fit {
+    width: fit-content;
+  }
+
+  &.full {
+    width: 100%;
+  }
+
+  .button-left-icon,
+  .button-right-icon {
+    font-size: 1.2em;
+    opacity: 1;
+  }
+
+  .button-text {
+    display: grid;
+    align-items: center;
+  }
+
+  .ripple-effect {
+    background: ${props => props.$colorContrast};
+  }
+
+  padding: 1em;
+  font-size: ${props => props.theme.constants.typography.label.fontSize};
+  background: ${props => props.$color};
+  color: ${props => props.$colorContrast};
+  box-shadow: 0 0 0 0 transparent;
+  transition: all 250ms ease;
+  border: 1px solid ${props => props.$color};
+
+  &:not(:disabled) {
+    &:not(.no-shadow) {
+      &:hover {
+        box-shadow:
+          0 1.4em 0.5em -1em ${props => props.theme.colors.black}88,
+          0 0.7em 1em -0.5em ${props => props.theme.colors.black}88;
+      }
+
+      &:active {
+        box-shadow:
+          0 0.3em 0.4em -0.2em ${props => props.theme.colors.black}88,
+          0 0.2em 0.8em -0.1em ${props => props.theme.colors.black}88;
+      }
+    }
+
+    &:hover {
+      transform: scale(1.02);
+    }
+
+    &:active {
+      background: ${props => props.$colorDark};
+      border-color: ${props => props.$colorDark};
+      transform: scale(0.98);
+    }
+  }
+
+  &:disabled {
+    background: ${props => props.theme.colors.gray6};
+    color: ${props => props.theme.colors.gray9};
+    border: 1px solid ${props => props.theme.colors.gray6};
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  &.is-loading {
+    pointer-events: none;
+  }
+
+  &.ghost-variant {
+    background: transparent;
+    color: ${props => props.$color};
+    border: 1px solid;
+
+    &:not(:disabled):hover {
+      background: ${props => props.$color}22;
+    }
+
+    &:not(:disabled):active {
+      background: ${props => props.$color}55;
+    }
+
+    &:disabled {
+      color: ${props => props.theme.colors.gray6};
+    }
+
+    .ripple-effect {
+      background: ${props => props.$color};
+    }
+  }
+
+  &.flat-variant {
+    background: transparent;
+    color: ${props => props.$color};
+    border: 0;
+
+    &:not(:disabled):hover {
+      background: ${props => props.$color}22;
+    }
+
+    &:not(:disabled):active {
+      background: ${props => props.$color}55;
+    }
+
+    &:disabled {
+      color: ${props => props.theme.colors.gray6};
+    }
+
+    .ripple-effect {
+      background: ${props => props.$color};
+    }
+  }
+`;

package/src/components/buttons/button/button.tsx

@@ -0,0 +1,119 @@
+import React, { ButtonHTMLAttributes } from 'react';
+import { useTheme } from 'styled-components';
+
+import { ThemeColor } from '../../../contexts';
+import { SizeVariants, useSizeClassName, RadiusVariants, useRadiusClassName } from '../../../core/variants';
+import { Icon, IconNameT } from '../../icon';
+import { Ripple } from '../../ripple';
+
+import { ButtonStyle, ButtonStyleProps } from './button.style';
+
+import { useClassNames } from '@polpo/hooks';
+
+export enum ButtonVariant {
+  SOLID = 'solid',
+  GHOST = 'ghost',
+  FLAT = 'flat',
+}
+
+export enum ButtonColor {
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary',
+  TERTIARY = 'tertiary',
+  INFO = 'info',
+  WARNING = 'warning',
+  ALERT = 'alert',
+  ACTIVE = 'active',
+}
+
+const getColor = (color?: ThemeColor): ButtonStyleProps | null => {
+  if (color) {
+    return {
+      $color: color.main,
+      $colorDark: color.dark,
+      $colorContrast: color.contrast,
+    };
+  }
+
+  return null;
+};
+
+export type ButtonProps = {
+  children?: React.ReactNode;
+  disabled?: boolean;
+  isLoading?: boolean;
+  size?: `${SizeVariants}`;
+  radius?: `${RadiusVariants}`;
+  variant?: `${ButtonVariant}`;
+  leftIcon?: IconNameT;
+  rightIcon?: IconNameT;
+  onClick?: ButtonHTMLAttributes<HTMLButtonElement>['onClick'];
+  width?: 'fit' | 'full';
+  className?: string;
+  style?: React.CSSProperties;
+  type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  noShadow?: boolean;
+  color?: `${ButtonColor}`;
+};
+
+const ButtonComponent = (
+  {
+    children,
+    disabled = false,
+    radius = RadiusVariants.Medium,
+    isLoading = false,
+    size = SizeVariants.Medium,
+    variant = 'solid',
+    leftIcon,
+    rightIcon,
+    onClick,
+    width = 'fit',
+    className = '',
+    style = {},
+    noShadow = false,
+    color,
+    type = 'button',
+  }: ButtonProps,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) => {
+  const theme = useTheme();
+  const buttonSize = useSizeClassName(size);
+  const buttonRadius = useRadiusClassName(radius);
+  const buttonClassName = useClassNames({
+    [buttonRadius]: true,
+    [buttonSize]: true,
+    'ghost-variant': variant === ButtonVariant.GHOST,
+    'flat-variant': variant === ButtonVariant.FLAT,
+    'is-loading': !disabled && isLoading,
+    'no-shadow': noShadow,
+    [width]: !!width,
+    [className]: !!className,
+  });
+
+  const buttonColors: ButtonStyleProps = (color && getColor(theme.colors[color])) || {
+    $color: theme.colors.text.main,
+    $colorDark: theme.colors.text.dark,
+    $colorContrast: theme.colors.background.main,
+  };
+
+  return (
+    <ButtonStyle
+      ref={ref}
+      {...buttonColors}
+      className={buttonClassName}
+      style={style}
+      disabled={disabled}
+      onClick={onClick}
+      type={type}
+    >
+      {leftIcon && (!isLoading || disabled) && <Icon className='button-left-icon' name={leftIcon} />}
+      <span className='button-text'>
+        {!disabled && isLoading ? <Icon name='spinner' className='button-loader-icon' /> : children}
+      </span>
+      {rightIcon && (!isLoading || disabled) && <Icon className='button-right-icon' name={rightIcon} />}
+      <Ripple />
+    </ButtonStyle>
+  );
+};
+
+export const Button = React.forwardRef(ButtonComponent);

package/src/components/buttons/button/index.ts

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

package/src/components/buttons/index.ts

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

package/src/components/cards/flip-card/flip-card.stories.tsx

@@ -0,0 +1,61 @@
+import { Grid } from '../../../layouts';
+import { Typography } from '../../typography';
+
+import { FlipCard } from './flip-card';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof FlipCard> = {
+  title: 'Cards/FlipCard',
+  component: FlipCard,
+  argTypes: {
+    cardZIndex: { control: false },
+    flipDirection: {
+      control: 'inline-radio',
+      options: ['horizontal', 'vertical'],
+    },
+    flipSpeed: {
+      control: { type: 'range', step: 25, min: 0, max: 2000 },
+    },
+    isFlipped: { control: 'boolean' },
+    children: { control: false },
+  },
+  args: {
+    flipDirection: 'vertical',
+    flipSpeed: 500,
+    isFlipped: false,
+  },
+  render: args => (
+    <FlipCard {...args}>
+      <Grid
+        pc='center'
+        style={{
+          background: 'linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)',
+          width: '300px',
+          height: '300px',
+          borderRadius: '10px',
+        }}
+      >
+        <Typography variant='hero'>A</Typography>
+      </Grid>
+      <Grid
+        pc='center'
+        style={{
+          background: 'linear-gradient(90deg, rgba(230,96,255,1) 0%, rgba(91,170,255,1) 100%)',
+          width: '300px',
+          height: '300px',
+          borderRadius: '10px',
+        }}
+      >
+        <Typography variant='hero'>B</Typography>
+      </Grid>
+    </FlipCard>
+  ),
+};
+
+export default meta;
+type Story = StoryObj<typeof FlipCard>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/components/cards/flip-card/flip-card.style.ts

@@ -0,0 +1,45 @@
+import { CSSProperties } from 'react';
+import styled from 'styled-components';
+
+type FlipCardStyleProps = {
+  $cardZIndex: CSSProperties['zIndex'];
+  $isFlipped: boolean;
+  $flipSpeed: number;
+  $frontRotate: CSSProperties['transform'];
+  $backRotate: CSSProperties['transform'];
+};
+
+export const FlipCardStyle = styled.section<FlipCardStyleProps>`
+  perspective: 1000px;
+  z-index: ${({ $cardZIndex }) => $cardZIndex};
+
+  .flipper {
+    height: 100%;
+    position: relative;
+    width: 100%;
+    transform-style: preserve-3d;
+  }
+
+  .front,
+  .back {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
+    transition: ${({ $flipSpeed }) => $flipSpeed}ms;
+    height: 100%;
+    left: 0;
+    top: 0;
+    width: 100%;
+  }
+
+  .front {
+    position: ${({ $isFlipped }) => ($isFlipped ? 'absolute' : 'relative')};
+    transform: ${({ $frontRotate }) => $frontRotate};
+    z-index: 2;
+  }
+
+  .back {
+    position: ${({ $isFlipped }) => ($isFlipped ? 'relative' : 'absolute')};
+    transform: ${({ $backRotate }) => $backRotate};
+  }
+`;

package/src/components/cards/flip-card/flip-card.tsx

@@ -0,0 +1,55 @@
+import { CSSProperties, useMemo } from 'react';
+
+import { FlipCardStyle } from './flip-card.style';
+
+type FlipCardProps = {
+  cardZIndex?: CSSProperties['zIndex'];
+  isFlipped?: boolean;
+  flipSpeed?: number;
+  flipDirection?: 'horizontal' | 'vertical';
+  children: [React.ReactNode, React.ReactNode];
+};
+
+export const FlipCard = ({
+  cardZIndex = 'auto',
+  flipDirection = 'vertical',
+  flipSpeed = 500,
+  isFlipped = false,
+  children,
+}: FlipCardProps): React.ReactElement => {
+  const getComponent = (key: 0 | 1): React.ReactNode => {
+    if (children.length !== 2) {
+      throw new Error('Component FlipCard requires 2 children');
+    }
+
+    return children[key] as React.ReactNode;
+  };
+
+  const frontRotate = useMemo(() => {
+    const deg = isFlipped ? 180 : 0;
+
+    return `rotate${flipDirection === 'horizontal' ? 'Y' : 'X'}(${deg}deg)`;
+  }, [flipDirection, isFlipped]);
+
+  const backRotate = useMemo(() => {
+    const deg = isFlipped ? 0 : -180;
+
+    return `rotate${flipDirection === 'horizontal' ? 'Y' : 'X'}(${deg}deg)`;
+  }, [flipDirection, isFlipped]);
+
+  return (
+    <FlipCardStyle
+      $cardZIndex={cardZIndex}
+      $flipSpeed={flipSpeed}
+      $isFlipped={isFlipped}
+      $frontRotate={frontRotate}
+      $backRotate={backRotate}
+    >
+      <section className='flipper'>
+        <section className='front'>{getComponent(0)}</section>
+
+        <section className='back'>{getComponent(1)}</section>
+      </section>
+    </FlipCardStyle>
+  );
+};

package/src/components/cards/flip-card/index.ts

@@ -0,0 +1 @@
+export * from './flip-card';

package/src/components/cards/hover-card/hover-card.stories.tsx

@@ -0,0 +1,45 @@
+import { Grid } from '../../../layouts';
+import { Typography } from '../../typography';
+
+import { HoverCard } from './hover-card';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof HoverCard> = {
+  title: 'Cards/HoverCard',
+  component: HoverCard,
+  argTypes: {
+    className: { control: false },
+    width: { control: 'inline-radio', options: ['fit-content', '100%'] },
+    translationZ: { control: { type: 'range', min: 1, max: 60 } },
+    threshold: { control: { type: 'range', min: 1, max: 60 } },
+    children: { control: false },
+  },
+  render: ({ children, ...args }) => (
+    <HoverCard {...args}>
+      <Grid
+        pc='center'
+        style={{
+          background: 'linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)',
+          width: '300px',
+          height: '300px',
+          borderRadius: '10px',
+        }}
+      >
+        <Typography variant='header4'>{children}</Typography>
+      </Grid>
+    </HoverCard>
+  ),
+  args: {
+    children: 'Hover me',
+    threshold: 5,
+    translationZ: 25,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HoverCard>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/components/cards/hover-card/hover-card.style.ts

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const HoverCardStyle = styled.span`
+  display: inline-block;
+  transition: all 300ms ease;
+
+  .card-hover-layer {
+    transition: all 100ms ease;
+    width: 100%;
+    height: 100%;
+    display: grid;
+  }
+`;

package/src/components/cards/hover-card/hover-card.tsx

@@ -0,0 +1,71 @@
+import { MouseEvent, MouseEventHandler, useCallback, useRef } from 'react';
+
+import { HoverCardStyle } from './hover-card.style';
+
+import { useEventListener } from '@polpo/hooks';
+
+type HoverCardProps = {
+  children: React.ReactNode;
+  threshold?: number;
+  translationZ?: number;
+  width?: 'fit-content' | '100%';
+  className?: string;
+};
+
+export const HoverCard = ({
+  children,
+  threshold = 5,
+  translationZ = 25,
+  width = 'fit-content',
+  className = '',
+}: HoverCardProps) => {
+  const refCard = useRef<HTMLElement>(null);
+  const refLayer = useRef<HTMLElement>(null);
+
+  const mouseMoveCallback = useCallback(
+    (e: MouseEvent) => {
+      const card = refCard.current;
+      const layer = refLayer.current;
+
+      if (!card || !layer) return;
+
+      const { clientX, clientY, currentTarget } = e;
+      const { clientWidth, clientHeight } = currentTarget;
+      const { top, left } = card.getBoundingClientRect();
+
+      const horizontal = (clientX - left) / clientWidth;
+      const vertical = (clientY - top) / clientHeight;
+
+      const relativePercentageX = horizontal * 2 - 1;
+      const relativePercentageY = vertical * 2 - 1;
+
+      const rotateY = (relativePercentageY * threshold).toFixed(2);
+      const rotateX = (relativePercentageX * threshold).toFixed(2);
+
+      layer.style.transform = `perspective(${clientWidth}px) rotateX(${-rotateY}deg) rotateY(${rotateX}deg)`;
+      card.style.transform = `perspective(${clientWidth}px) translateZ(${translationZ}px)`;
+    },
+    [threshold, translationZ],
+  );
+
+  const mouseLeaveCallback = useCallback<MouseEventHandler>(e => {
+    const card = refCard.current;
+    const layer = refLayer.current;
+
+    if (!card || !layer) return;
+
+    layer.style.transform = `perspective(${e.currentTarget.clientWidth}px) rotateX(0) rotateY(0)`;
+    card.style.transform = `perspective(${e.currentTarget.clientWidth}px) translateZ(0)`;
+  }, []);
+
+  useEventListener('mousemove', mouseMoveCallback as unknown as EventListener, refCard);
+  useEventListener('mouseleave', mouseLeaveCallback as unknown as EventListener, refCard);
+
+  return (
+    <HoverCardStyle ref={refCard} style={{ width }} className={className}>
+      <span className='card-hover-layer' ref={refLayer}>
+        {children}
+      </span>
+    </HoverCardStyle>
+  );
+};

package/src/components/cards/hover-card/index.ts

@@ -0,0 +1 @@
+export * from './hover-card';

package/src/components/cards/index.ts

@@ -0,0 +1,3 @@
+export * from './slide-card';
+export * from './flip-card';
+export * from './hover-card';

package/src/components/cards/slide-card/index.ts

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

package/src/components/cards/slide-card/slide-card.stories.tsx

@@ -0,0 +1,47 @@
+import { Grid } from '../../../layouts';
+import { Typography } from '../../typography';
+
+import { SlideCard } from './slide-card';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof SlideCard> = {
+  title: 'Cards/SlideCard',
+  component: SlideCard,
+  argTypes: {
+    children: { control: false },
+    className: { control: false },
+    style: { control: false },
+    isOpen: { control: 'boolean' },
+  },
+  decorators: [
+    Story => (
+      <Grid gap='1em' style={{ width: '500px' }}>
+        <section>
+          <Typography variant='header4'>Slide Card</Typography>
+          <Typography variant='label'>Toggle the card on the controls</Typography>
+        </section>
+        <Story />
+      </Grid>
+    ),
+  ],
+  args: {
+    isOpen: true,
+    children: (
+      <section style={{ border: '1px solid', padding: '1em', borderRadius: '1em' }}>
+        <Typography>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque blanditiis commodi delectus
+          deleniti distinctio excepturi explicabo facere fuga laboriosam natus nihil pariatur perspiciatis quaerat qui
+          recusandae rerum sed, unde voluptatem.
+        </Typography>
+      </section>
+    ),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SlideCard>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/components/cards/slide-card/slide-card.tsx

@@ -0,0 +1,42 @@
+import { motion } from 'framer-motion';
+import React from 'react';
+
+const variants = {
+  vertical: {
+    open: {
+      height: 'auto',
+      /*
+       * transition: {
+       *   type: 'spring',
+       *   damping: 10,
+       *   stiffness: 200,
+       *   restDelta: 0.01,
+       * },
+       */
+    },
+    closed: {
+      height: 0,
+    },
+  },
+};
+
+type SlideCardProps = {
+  children: React.ReactNode;
+  isOpen: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export const SlideCard = ({ children, isOpen, className = '', style = {} }: SlideCardProps) => {
+  return (
+    <motion.section
+      variants={variants.vertical}
+      initial={isOpen ? 'open' : 'closed'}
+      animate={isOpen ? 'open' : 'closed'}
+      className={className}
+      style={{ overflow: 'hidden', ...style }}
+    >
+      {children}
+    </motion.section>
+  );
+};