polpo 0.1.0

package/src/components/tag/tag.tsx

@@ -0,0 +1,44 @@
+import { HTMLAttributes } from 'react';
+
+import { RadiusVariants, SizeVariants, useRadiusClassName, useSizeClassName } from '../../core/variants';
+
+import { TagStyle } from './tag.style';
+
+import { useClassNames } from '@polpo/hooks';
+
+export enum TagSize {
+  SMALL = 'small',
+  REGULAR = 'regular',
+  LARGE = 'large',
+}
+
+type TagProps = HTMLAttributes<HTMLElement> & {
+  children: React.ReactNode;
+  isSelected?: boolean;
+  size?: `${SizeVariants}`;
+  radius?: `${RadiusVariants}`;
+};
+
+export const Tag = ({
+  children,
+  className: customClassName = '',
+  isSelected = false,
+  size = SizeVariants.Medium,
+  radius = RadiusVariants.Medium,
+  ...props
+}: TagProps) => {
+  const tagSize = useSizeClassName(size);
+  const tagRadius = useRadiusClassName(radius);
+  const className = useClassNames({
+    [customClassName]: !!customClassName,
+    [tagRadius]: true,
+    [tagSize]: true,
+    'tag-selected': isSelected,
+  });
+
+  return (
+    <TagStyle className={className} {...props}>
+      {children}
+    </TagStyle>
+  );
+};

package/src/components/tooltips/click-to-copy/click-to-copy.stories.tsx

@@ -0,0 +1,39 @@
+import TooltipStory from '../tooltip/tooltip.stories';
+
+import { ClickToCopy } from './click-to-copy';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof ClickToCopy> = {
+  title: 'Tooltips/ClickToCopy',
+  component: ClickToCopy,
+  argTypes: {
+    position: TooltipStory.argTypes?.position,
+    offset: TooltipStory.argTypes?.offset,
+    children: { control: 'text' },
+    value: { control: 'text' },
+    tooltipText: { control: 'text' },
+    tooltipCopiedText: { control: 'text' },
+    copiedTextTimeout: { control: { type: 'range', min: 100, max: 2000, step: 100 } },
+  },
+  args: {
+    tooltipText: 'Copy to clipboard',
+    tooltipCopiedText: 'Copied!',
+    value: 'Hello world',
+  },
+  render: (args, { children }) => <ClickToCopy {...args}>{children}</ClickToCopy>,
+  decorators: [
+    Story => (
+      <Story>
+        <span>Hello world</span>
+      </Story>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ClickToCopy>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/components/tooltips/click-to-copy/click-to-copy.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+
+import { Tooltip, TooltipProps } from '../tooltip';
+
+type ClickToCopyProps = {
+  children?: React.ReactNode;
+  position?: TooltipProps['position'];
+  offset?: TooltipProps['offset'];
+  value: string;
+  tooltipText: string;
+  tooltipCopiedText?: string;
+  copiedTextTimeout?: number;
+};
+
+export const ClickToCopy = ({
+  children,
+  value,
+  position,
+  offset,
+  tooltipText,
+  tooltipCopiedText,
+  copiedTextTimeout = 500,
+}: ClickToCopyProps) => {
+  const [justCopied, setJustCopied] = useState(false);
+
+  const handleCopy = () => {
+    setJustCopied(true);
+    navigator.clipboard.writeText(value);
+    setTimeout(() => setJustCopied(false), copiedTextTimeout);
+  };
+
+  return (
+    <Tooltip
+      content={justCopied && tooltipCopiedText ? tooltipCopiedText : tooltipText}
+      position={position}
+      offset={offset}
+    >
+      <span onClick={handleCopy}>{children}</span>
+    </Tooltip>
+  );
+};

package/src/components/tooltips/click-to-copy/index.ts

@@ -0,0 +1 @@
+export * from './click-to-copy';

package/src/components/tooltips/index.ts

@@ -0,0 +1,2 @@
+export * from './click-to-copy';
+export * from './tooltip';

package/src/components/tooltips/tooltip/index.ts

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

package/src/components/tooltips/tooltip/tooltip.stories.tsx

@@ -0,0 +1,35 @@
+import { Tooltip } from './tooltip';
+
+import { POSITION } from '@polpo/helpers';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'Tooltips/Tooltip',
+  component: Tooltip,
+  argTypes: {
+    position: { control: 'inline-radio', options: Object.values(POSITION) },
+    offset: { control: { type: 'range', min: 0, max: 200, step: 1 } },
+    disabled: { control: 'boolean' },
+    content: { control: 'text' },
+    children: { control: false },
+  },
+  args: {
+    content: 'Tooltip content',
+  },
+  render: (args, { children }) => <Tooltip {...args}>{children}</Tooltip>,
+  decorators: [
+    Story => (
+      <Story>
+        <span>Hello world</span>
+      </Story>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/components/tooltips/tooltip/tooltip.style.ts

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+
+export const TooltipStyle = styled.span`
+  background: ${props => props.theme.colors.background.main};
+  color: ${props => props.theme.colors.text.main};
+  font-size: ${props => props.theme.constants.typography.small.fontSize};
+  line-height: 1em;
+  border-radius: 5px;
+  position: fixed;
+  padding: 0.5em 1em;
+  z-index: 1000;
+  display: block;
+  animation: fadeIn 250ms ease-out;
+  border: 1px solid;
+
+  &::before {
+    content: '';
+    display: block;
+    background: ${props => props.theme.colors.background.main};
+    position: absolute;
+    z-index: 1;
+    width: 10px;
+    height: 10px;
+    border-left: 1px solid transparent;
+    border-top: 1px solid transparent;
+    border-right: 1px solid ${props => props.theme.colors.text.main};
+    border-bottom: 1px solid ${props => props.theme.colors.text.main};
+    border-radius: 0 0 3px 0;
+  }
+
+  &.left {
+    &::before {
+      top: 50%;
+      left: 100%;
+      transform: translate(-50%, -50%) rotate(-45deg);
+    }
+  }
+
+  &.right {
+    &::before {
+      top: 50%;
+      right: 100%;
+      transform: translate(50%, -50%) rotate(135deg);
+    }
+  }
+
+  &.top {
+    &::before {
+      top: 100%;
+      left: 50%;
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+  }
+
+  &.bottom {
+    &::before {
+      left: 50%;
+      bottom: 100%;
+      transform: translate(-50%, 50%) rotate(-135deg);
+    }
+  }
+`;

package/src/components/tooltips/tooltip/tooltip.tsx

@@ -0,0 +1,45 @@
+import React, { cloneElement, ReactElement } from 'react';
+
+import { Modal } from '../../modals';
+
+import { TooltipStyle } from './tooltip.style';
+
+import { POSITION } from '@polpo/helpers';
+import { useClassNames, useEventListener, useModalInContainer } from '@polpo/hooks';
+
+export type TooltipProps = {
+  position?: `${POSITION}`;
+  offset?: number | `${number}`;
+  disabled?: boolean;
+  children: React.ReactElement;
+  content: React.ReactNode;
+};
+
+export const Tooltip = ({ position = POSITION.top, children, content, offset = 5, disabled = false }: TooltipProps) => {
+  const { modalRef, containerRef, isVisible, setIsVisible, modalStyle } = useModalInContainer({
+    closeOnClickOutside: false,
+    position,
+    offset: 6 + +offset,
+    windowOffset: 10,
+  });
+
+  const classNames = useClassNames({
+    [position]: true,
+  });
+
+  useEventListener('mouseenter', () => setIsVisible(true), containerRef);
+  useEventListener('mouseleave', () => setIsVisible(false), containerRef);
+
+  if (disabled) return children;
+
+  return (
+    <>
+      {cloneElement(children as ReactElement, { ref: containerRef })}
+      <Modal isOpen={isVisible} id='tooltip' backdrop='none'>
+        <TooltipStyle ref={modalRef} style={modalStyle} className={classNames}>
+          <span className='tooltip-content'>{content}</span>
+        </TooltipStyle>
+      </Modal>
+    </>
+  );
+};

package/src/components/typography/index.ts

@@ -0,0 +1,2 @@
+export * from './typography.constants';
+export * from './typography';

package/src/components/typography/typography.constants.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+
+export enum TypographyVariant {
+  HERO = 'hero',
+  HEADER1 = 'header1',
+  HEADER2 = 'header2',
+  HEADER3 = 'header3',
+  HEADER4 = 'header4',
+  BODY = 'body',
+  LABEL = 'label',
+  LABEL_FORM = 'label-form',
+  SMALL = 'small',
+}
+
+export const TypographyVariantsElements: Record<TypographyVariant, keyof React.ReactHTML> = {
+  [TypographyVariant.HERO]: 'h1',
+  [TypographyVariant.HEADER1]: 'h1',
+  [TypographyVariant.HEADER2]: 'h2',
+  [TypographyVariant.HEADER3]: 'h3',
+  [TypographyVariant.HEADER4]: 'h4',
+  [TypographyVariant.BODY]: 'p',
+  [TypographyVariant.LABEL]: 'span',
+  [TypographyVariant.LABEL_FORM]: 'label',
+  [TypographyVariant.SMALL]: 'small',
+};
+
+export const TypographyVariantsClassNames: Record<TypographyVariant, string> = {
+  [TypographyVariant.HERO]: 'hero',
+  [TypographyVariant.HEADER1]: 'header1',
+  [TypographyVariant.HEADER2]: 'header2',
+  [TypographyVariant.HEADER3]: 'header3',
+  [TypographyVariant.HEADER4]: 'header4',
+  [TypographyVariant.BODY]: 'body',
+  [TypographyVariant.LABEL]: 'label',
+  [TypographyVariant.LABEL_FORM]: 'label',
+  [TypographyVariant.SMALL]: 'small',
+};
+
+export enum TypographyWeight {
+  LIGHT = 'light',
+  REGULAR = 'regular',
+  BOLD = 'bold',
+}

package/src/components/typography/typography.stories.tsx

@@ -0,0 +1,106 @@
+import { Grid } from '../../layouts';
+
+import { Typography } from './typography';
+import { TypographyVariant, TypographyWeight } from './typography.constants';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Typography> = {
+  title: 'Typography',
+  component: Typography,
+  argTypes: {
+    variant: { control: 'inline-radio', options: Object.values(TypographyVariant) },
+    weight: { control: 'inline-radio', options: Object.values(TypographyWeight) },
+    nowrap: { control: 'boolean' },
+    recommendedWith: { control: 'boolean' },
+    as: { control: false },
+    children: { control: 'text' },
+    noPadding: { control: 'boolean' },
+    align: { control: 'inline-radio', options: ['left', 'center', 'right'] },
+    family: { control: 'inline-radio', options: ['primary', 'code'] },
+    className: { control: false },
+    style: { control: false },
+    htmlFor: { control: false },
+  },
+  args: {
+    children: 'Hello world',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Typography>;
+
+export const Default: Story = {
+  args: {},
+  decorators: [
+    Story => (
+      <Grid gap={16} gtc='500px'>
+        <Story />
+        <Typography>
+          Sample text to compare, lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa cumque dolores
+          doloribus, eaque earum eligendi est excepturi explicabo inventore, perferendis, quisquam recusandae ullam
+          voluptatum. Dolores?
+        </Typography>
+      </Grid>
+    ),
+  ],
+};
+
+export const Paragraph: Story = {
+  args: {
+    weight: 'light',
+  },
+  argTypes: {
+    children: { control: false },
+    variant: { control: false },
+  },
+  decorators: [],
+  render: args => (
+    <Grid gtc='500px'>
+      <Typography {...args} variant='body'>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad at deserunt, dolorum eum necessitatibus, nihil
+        nobis placeat qui quidem repellat, temporibus totam voluptates. Accusamus amet aspernatur atque dolorum eligendi
+        est fugiat, illum labore, nam nobis obcaecati perferendis quod recusandae sed?
+      </Typography>
+    </Grid>
+  ),
+};
+
+export const Variants: Story = {
+  args: {
+    weight: 'light',
+  },
+  argTypes: {
+    children: { control: false },
+    variant: { control: false },
+  },
+  decorators: [],
+  render: args => (
+    <Grid>
+      <Typography {...args} variant='hero'>
+        Hero
+      </Typography>
+      <Typography {...args} variant='header1'>
+        Header1
+      </Typography>
+      <Typography {...args} variant='header2'>
+        Header2
+      </Typography>
+      <Typography {...args} variant='header3'>
+        Header3
+      </Typography>
+      <Typography {...args} variant='header4'>
+        Header4
+      </Typography>
+      <Typography {...args} variant='body'>
+        Body
+      </Typography>
+      <Typography {...args} variant='label'>
+        Label
+      </Typography>
+      <Typography {...args} variant='small'>
+        Small
+      </Typography>
+    </Grid>
+  ),
+};

package/src/components/typography/typography.style.ts

@@ -0,0 +1,76 @@
+import { createGlobalStyle, css } from 'styled-components';
+
+export const TypographyStyle = createGlobalStyle(({ theme: { constants } }) =>
+  Object.entries(constants.typography).map(
+    ([key, { breakpoints, fontSize, lineHeight, defaultWeight, weights }]) => css`
+      .${key} {
+        font-size: ${fontSize};
+        line-height: ${lineHeight};
+        font-weight: ${defaultWeight};
+        margin: 0;
+        padding: 0.5em 0 0.4em;
+
+        &.recommended-width {
+          max-width: 70ch;
+        }
+
+        &.code-family {
+          font-family: monospace;
+        }
+
+        &.no-padding {
+          padding: 0;
+        }
+
+        &.nowrap {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        &.nowrap-max-lines {
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+        }
+
+        &.nowrap-max-lines-2 {
+          -webkit-line-clamp: 2;
+          line-clamp: 2;
+        }
+
+        &.nowrap-max-lines-3 {
+          -webkit-line-clamp: 3;
+          line-clamp: 3;
+        }
+
+        &.nowrap-max-lines-4 {
+          -webkit-line-clamp: 4;
+          line-clamp: 4;
+        }
+
+        &.nowrap-max-lines-5 {
+          -webkit-line-clamp: 5;
+          line-clamp: 5;
+        }
+
+        ${Object.entries(weights).map(
+          ([fontWeight, weight]) => css`
+            &.${fontWeight} {
+              font-weight: ${weight};
+            }
+          `,
+        )}
+
+        ${breakpoints.map(
+          ({ fontSize, lineHeight, from }) => css`
+            @media all and (min-width: ${constants.breakpoints[from as keyof typeof constants.breakpoints]}) {
+              font-size: ${fontSize};
+              line-height: ${lineHeight};
+            }
+          `,
+        )}
+      }
+    `,
+  ),
+);

package/src/components/typography/typography.tsx

@@ -0,0 +1,79 @@
+import React, { HTMLAttributes, createElement, forwardRef, useMemo } from 'react';
+
+import {
+  TypographyVariant,
+  TypographyVariantsClassNames,
+  TypographyVariantsElements,
+  TypographyWeight,
+} from './typography.constants';
+
+import { useClassNames } from '@polpo/hooks';
+
+type TypographyProps = HTMLAttributes<HTMLElement | HTMLLabelElement> & {
+  variant?: `${TypographyVariant}`;
+  nowrap?: boolean | number;
+  as?: keyof React.ReactHTML;
+  weight?: `${TypographyWeight}`;
+  children: React.ReactNode;
+  noPadding?: boolean;
+  htmlFor?: string;
+  align?: React.CSSProperties['textAlign'];
+  family?: 'primary' | 'code';
+  recommendedWidth?: boolean;
+};
+
+export const TypographyComponent = (
+  {
+    variant = 'body',
+    nowrap = false,
+    className: customClassname = '',
+    style = {},
+    children,
+    as,
+    weight,
+    family = 'primary',
+    noPadding = false,
+    align,
+    htmlFor,
+    recommendedWidth = false,
+    ...props
+  }: TypographyProps,
+  ref: React.ForwardedRef<unknown>,
+) => {
+  const className = useClassNames({
+    [TypographyVariantsClassNames[variant]]: TypographyVariantsClassNames[variant] !== undefined,
+    [customClassname]: !!customClassname,
+    [weight ?? '']: !!weight,
+    'no-padding': noPadding,
+    'code-family': family === 'code',
+    'recommended-width': recommendedWidth,
+    'nowrap-max-lines': typeof nowrap === 'number',
+    'nowrap-max-lines-2': nowrap === 2,
+    'nowrap-max-lines-3': nowrap === 3,
+    'nowrap-max-lines-4': nowrap === 4,
+    'nowrap-max-lines-5': nowrap === 5,
+    nowrap: nowrap === true,
+  });
+
+  const component = useMemo(
+    () => TypographyVariantsElements[variant] ?? TypographyVariantsElements[TypographyVariant.BODY],
+    [variant],
+  );
+
+  return createElement(
+    as ?? component,
+    {
+      ...props,
+      className,
+      ref,
+      htmlFor,
+      style: {
+        textAlign: align,
+        ...style,
+      },
+    },
+    children,
+  );
+};
+
+export const Typography = forwardRef(TypographyComponent);