polpo 0.1.7 → 0.1.9

package/src/components/tag/tag.stories.tsx

@@ -1,48 +0,0 @@
-import { RadiusVariants, SizeVariants } from '../../core/variants';
-import { Flex } from '../../layouts';
-
-import { Tag } from './tag';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-const meta: Meta<typeof Tag> = {
-  title: 'Tag',
-  component: Tag,
-  argTypes: {
-    isSelected: { control: 'boolean' },
-    children: { control: 'text' },
-    size: { control: 'inline-radio', options: Object.values(SizeVariants) },
-    radius: { control: 'inline-radio', options: Object.values(RadiusVariants) },
-  },
-  args: {
-    children: 'Tag',
-    isSelected: false,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Tag>;
-
-export const Single: Story = {
-  args: {},
-};
-
-export const Many: Story = {
-  args: {},
-  decorators: [
-    (Story, { args }) => (
-      <Flex wrap='wrap' gap='1em'>
-        <Story {...args} />
-        <Story {...args} />
-        <Story {...args} />
-        <Story {...args} />
-        <Story {...args} />
-        <Story {...args} />
-        <Story {...args} />
-        <Story {...args} />
-        <Story {...args} />
-        <Story {...args} />
-      </Flex>
-    ),
-  ],
-};

package/src/components/tag/tag.style.ts

@@ -1,29 +0,0 @@
-import styled from 'styled-components';
-
-import { RadiusStyles, RadiusVariants, SizeStyles, SizeVariants } from '../../core/variants';
-
-type TagStyleProps = {
-  $size: `${SizeVariants}`;
-  $radius: `${RadiusVariants}`;
-};
-
-export const TagStyle = styled.span<TagStyleProps>`
-  padding: 0.4em 0.8em;
-  border-radius: 0.3em;
-  border: 1px solid;
-  background: ${props => props.theme.colors.text.main}11;
-  color: ${props => props.theme.colors.text.main};
-  transition: all 300ms ease;
-  display: inline-block;
-  font-size: ${props => props.theme.constants.typography.label.fontSize};
-  user-select: none;
-
-  ${props => SizeStyles[props.$size]}
-  ${props => RadiusStyles[props.$radius]}
-
-  &:hover,
-  &.tag-selected {
-    background: ${props => props.theme.colors.primary.main};
-    color: ${props => props.theme.colors.primary.contrast};
-  }
-`;

package/src/components/tag/tag.tsx

@@ -1,34 +0,0 @@
-import { HTMLAttributes } from 'react';
-
-import { RadiusVariants, SizeVariants } from '../../core/variants';
-
-import { TagStyle } from './tag.style';
-
-import { useClassNames } from '@polpo/hooks';
-
-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 className = useClassNames({
-    [customClassName]: !!customClassName,
-    'tag-selected': isSelected,
-  });
-
-  return (
-    <TagStyle className={className} {...props} $size={size} $radius={radius}>
-      {children}
-    </TagStyle>
-  );
-};

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

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

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

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

package/src/components/tooltips/index.ts

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

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

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

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

@@ -1,38 +0,0 @@
-import { Tooltip } from './tooltip';
-
-import { PositionContainer } 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: [PositionContainer.TOP, PositionContainer.LEFT, PositionContainer.RIGHT, PositionContainer.BOTTOM],
-    },
-    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

@@ -1,93 +0,0 @@
-import styled from 'styled-components';
-
-import { Modal } from '../../modals';
-
-export const TooltipStyle = styled(Modal)`
-  color: ${props => props.theme.colors.text.main};
-  font-size: ${props => props.theme.constants.typography.small.fontSize};
-  line-height: 1em;
-  border-radius: 5px;
-  padding: 0.5em 1em;
-  display: block;
-  border: 1px solid;
-  pointer-events: none;
-
-  &::before {
-    content: '';
-    display: block;
-    background: ${props => props.theme.colors.background.paper};
-    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 {
-    animation: fadeInRight 250ms ease-out;
-
-    &.close-animation {
-      animation: fadeOutLeft 250ms ease-out;
-      transform: translateX(-10px);
-      opacity: 0;
-    }
-
-    &::before {
-      top: 50%;
-      left: 100%;
-      transform: translate(-50%, -50%) rotate(-45deg);
-    }
-  }
-
-  &.right {
-    animation: fadeInLeft 250ms ease-out;
-
-    &.close-animation {
-      animation: fadeOutRight 250ms ease-out;
-      transform: translateX(10px);
-      opacity: 0;
-    }
-
-    &::before {
-      top: 50%;
-      right: 100%;
-      transform: translate(50%, -50%) rotate(135deg);
-    }
-  }
-
-  &.top {
-    animation: fadeInDown 250ms ease-out;
-
-    &.close-animation {
-      animation: fadeOutUp 250ms ease-out;
-      transform: translateY(-10px);
-      opacity: 0;
-    }
-
-    &::before {
-      top: 100%;
-      left: 50%;
-      transform: translate(-50%, -50%) rotate(45deg);
-    }
-  }
-
-  &.bottom {
-    animation: fadeInUp 250ms ease-out;
-
-    &.close-animation {
-      animation: fadeOutDown 250ms ease-out;
-      transform: translateY(10px);
-      opacity: 0;
-    }
-
-    &::before {
-      left: 50%;
-      bottom: 100%;
-      transform: translate(-50%, 50%) rotate(-135deg);
-    }
-  }
-`;

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

@@ -1,59 +0,0 @@
-import React, { cloneElement, ReactElement } from 'react';
-
-import { TooltipStyle } from './tooltip.style';
-
-import { PositionContainer } from '@polpo/helpers';
-import { useClassNames, useEventListener, useModal } from '@polpo/hooks';
-
-export type TooltipProps = {
-  position?:
-    | `${PositionContainer.TOP}`
-    | `${PositionContainer.LEFT}`
-    | `${PositionContainer.RIGHT}`
-    | `${PositionContainer.BOTTOM}`;
-  offset?: number | `${number}`;
-  disabled?: boolean;
-  children: React.ReactElement;
-  content: React.ReactNode;
-};
-
-export const Tooltip = ({
-  position = PositionContainer.TOP,
-  children,
-  content,
-  offset = 5,
-  disabled = false,
-}: TooltipProps) => {
-  const { containerRef, openModal, closeModal, isOpen } = useModal();
-
-  const classNames = useClassNames({
-    [position]: true,
-  });
-
-  useEventListener('mouseenter', () => openModal(), containerRef);
-  useEventListener('mouseleave', () => closeModal(), containerRef);
-
-  if (disabled) return children;
-
-  return (
-    <>
-      {cloneElement(children as ReactElement, { ref: containerRef })}
-
-      <TooltipStyle
-        backdrop='none'
-        id='tooltip'
-        isOpen={isOpen}
-        containerRef={containerRef}
-        onClose={closeModal}
-        position={position}
-        className={classNames}
-        closeOnClickOutside={false}
-        offset={6 + +offset}
-        windowOffset={10}
-        transitionDuration={250}
-      >
-        <span className='tooltip-content'>{content}</span>
-      </TooltipStyle>
-    </>
-  );
-};

package/src/components/typography/index.ts

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

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

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

@@ -1,108 +0,0 @@
-import { ColorVariants } from '../../core/variants';
-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) },
-    color: { control: 'inline-radio', options: [...Object.values(ColorVariants), undefined] },
-    nowrap: { control: 'boolean' },
-    recommendedWidth: { 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

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