polpo 0.1.7 → 0.1.8

package/src/components/smart-table/smart-table.types.ts

@@ -1,41 +0,0 @@
-import React from 'react';
-
-import { KeyValuesOf } from '../../types';
-import { IconNameT } from '../icon';
-
-export type Primitive = string | number | boolean;
-
-export type RowDataObject = { [key: string]: Primitive | object };
-
-export type Order = 'asc' | 'desc';
-
-type ColumnDataCommon<RowData extends RowDataObject> = {
-  header: React.ReactNode;
-  sortBy?: KeyValuesOf<RowData, Primitive>;
-  icon?: IconNameT;
-  width?: `${number}px` | `${number}em` | `${number}%`;
-};
-
-type ColumnDataField<RowData extends RowDataObject> = ColumnDataCommon<RowData> & {
-  field: KeyValuesOf<RowData, Primitive>;
-  sortBy?: never;
-  render?: never;
-  Component?: never;
-};
-
-type ColumnDataRender<RowData extends RowDataObject> = ColumnDataCommon<RowData> & {
-  field?: never;
-  render: (row: RowData, rowKey: React.Key) => React.ReactNode;
-  Component?: never;
-};
-
-type ColumnDataComponent<RowData extends RowDataObject> = ColumnDataCommon<RowData> & {
-  field?: never;
-  render?: never;
-  Component: React.FC<{ data: RowData; rowKey: React.Key }>;
-};
-
-export type ColumnData<RowData extends RowDataObject> =
-  | ColumnDataField<RowData>
-  | ColumnDataRender<RowData>
-  | ColumnDataComponent<RowData>;

package/src/components/tabs/index.ts

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

package/src/components/tabs/tabs-container.stories.tsx

@@ -1,159 +0,0 @@
-import { RadiusVariants, SizeVariants } from '../../core/variants';
-import { Grid } from '../../layouts';
-import { Typography } from '../typography';
-
-import { Tabs } from './tabs';
-import { TabListColor, TabListVariant } from './tabs-list';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-const meta: Meta<typeof Tabs.TabList> = {
-  title: 'Tabs/Tab List',
-  component: Tabs.TabList,
-  argTypes: {
-    variant: { control: 'inline-radio', options: Object.values(TabListVariant) },
-    size: { control: 'inline-radio', options: Object.values(SizeVariants) },
-    color: { control: 'inline-radio', options: [undefined, ...Object.values(TabListColor)] },
-    radius: { control: 'inline-radio', options: Object.values(RadiusVariants) },
-    direction: { control: false },
-    tabs: { control: false },
-    className: { control: false },
-    style: { control: false },
-  },
-  args: {
-    tabs: [
-      { id: 'home', label: 'Home' },
-      { id: 'about', label: 'About us' },
-      { id: 'products', label: 'Products' },
-      { id: 'categories', label: 'Categories' },
-      { id: 'services', label: 'Services' },
-    ],
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Tabs.TabList>;
-
-export const Default: Story = {
-  args: {},
-  decorators: [
-    Story => (
-      <Grid gap='1em'>
-        <Tabs defaultOpenTab='home'>
-          <Story />
-
-          <Tabs.TabPanel id='home'>
-            <Typography variant='header4' align='center'>
-              Home
-            </Typography>
-          </Tabs.TabPanel>
-          <Tabs.TabPanel id='about'>
-            <Typography variant='header4' align='center'>
-              About us
-            </Typography>
-          </Tabs.TabPanel>
-          <Tabs.TabPanel id='products'>
-            <Typography variant='header4' align='center'>
-              Products
-            </Typography>
-          </Tabs.TabPanel>
-          <Tabs.TabPanel id='categories'>
-            <Typography variant='header4' align='center'>
-              Categories
-            </Typography>
-          </Tabs.TabPanel>
-          <Tabs.TabPanel id='services'>
-            <Typography variant='header4' align='center'>
-              Services
-            </Typography>
-          </Tabs.TabPanel>
-        </Tabs>
-      </Grid>
-    ),
-  ],
-};
-
-export const Vertical: Story = {
-  args: {
-    direction: 'vertical',
-  },
-  decorators: [
-    Story => (
-      <Grid gtc='auto 1fr' gap='2em' style={{ width: 700 }}>
-        <Tabs defaultOpenTab='home'>
-          <Story />
-
-          <Tabs.TabPanel id='home'>
-            <section>
-              <Typography variant='header4'>Home</Typography>
-              <Typography>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. At blanditiis, dolorem eius incidunt ipsum
-                labore maiores, modi nemo nisi nulla quia sunt, tenetur veritatis? Architecto asperiores excepturi quo.
-                Magni, maxime possimus! Adipisci facere laborum modi quod unde, velit veritatis! Voluptate!
-              </Typography>
-            </section>
-          </Tabs.TabPanel>
-          <Tabs.TabPanel id='about'>
-            <section>
-              <Typography variant='header4'>About us</Typography>
-              <Typography>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, debitis eligendi est eum, facere inventore
-                iste neque nobis, rerum tempore vel voluptas voluptates. Maiores minima molestias mollitia nisi quidem
-                unde voluptatibus. Aliquam assumenda dolores earum ex laboriosam quidem quod repellendus!
-              </Typography>
-            </section>
-          </Tabs.TabPanel>
-          <Tabs.TabPanel id='products'>
-            <section>
-              <Typography variant='header4'>Products</Typography>
-              <Typography>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet cumque cupiditate dolorum exercitationem
-                in laboriosam maxime, odio odit quod vitae. Autem consequuntur doloremque dolores, doloribus excepturi
-                fuga molestias natus nesciunt nulla obcaecati, odio quaerat quisquam reprehenderit sit tempore ullam
-                voluptas.
-              </Typography>
-            </section>
-          </Tabs.TabPanel>
-          <Tabs.TabPanel id='categories'>
-            <section>
-              <Typography variant='header4'>Categories</Typography>
-              <Typography>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate eius maxime repudiandae unde.
-                Ducimus eius eos illo incidunt qui! Dicta doloremque ea eaque earum error impedit iure, laboriosam
-                magnam maiores, odit quaerat quidem quos repudiandae sed temporibus ut voluptates.
-              </Typography>
-            </section>
-          </Tabs.TabPanel>
-          <Tabs.TabPanel id='services'>
-            <section>
-              <Typography variant='header4'>Services</Typography>
-              <Typography>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet aperiam architecto autem
-                blanditiis cupiditate dicta eius et facere in incidunt laborum libero, maiores nam nulla odit
-                praesentium, quae quis sapiente sed tenetur ullam ut. Deleniti optio possimus quae sequi!
-              </Typography>
-            </section>
-          </Tabs.TabPanel>
-        </Tabs>
-      </Grid>
-    ),
-  ],
-};
-
-export const Variants: Story = {
-  argTypes: {
-    variant: { control: false },
-  },
-  args: {},
-  decorators: Default.decorators,
-  render: args => {
-    return (
-      <Grid gap='1em'>
-        <Tabs.TabList {...args} variant='solid' />
-        <Tabs.TabList {...args} variant='ghost' />
-        <Tabs.TabList {...args} variant='flat' />
-        <Tabs.TabList {...args} variant='line' />
-      </Grid>
-    );
-  },
-};

package/src/components/tabs/tabs-list.tsx

@@ -1,134 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useTheme } from 'styled-components';
-
-import { ThemeColor } from '../../contexts';
-import { RadiusVariants, SizeVariants } from '../../core/variants';
-
-import { Tabs } from './tabs';
-import { TabListStyle, TabListColorStyle } from './tabs.style';
-
-import { useClassNames } from '@polpo/hooks';
-
-const DefaultRect = {
-  top: 0,
-  left: 0,
-  width: 0,
-  height: 0,
-};
-
-export enum TabListVariant {
-  SOLID = 'solid',
-  GHOST = 'ghost',
-  FLAT = 'flat',
-  LINE = 'line',
-}
-
-export enum TabListColor {
-  PRIMARY = 'primary',
-  SECONDARY = 'secondary',
-  TERTIARY = 'tertiary',
-}
-
-export enum TabListDirection {
-  HORIZONTAL = 'horizontal',
-  VERTICAL = 'vertical',
-}
-
-const getColor = (color?: ThemeColor): TabListColorStyle | null => {
-  if (color) {
-    return {
-      $color: color.main,
-      $colorContrast: color.contrast,
-    };
-  }
-
-  return null;
-};
-
-export type TabListProps = {
-  openTab: string;
-  variant?: `${TabListVariant}`;
-  children?: React.ReactNode;
-  size?: `${SizeVariants}`;
-  color?: `${TabListColor}`;
-  radius?: `${RadiusVariants}`;
-  direction?: `${TabListDirection}`;
-  className?: string;
-  style?: React.CSSProperties;
-  tabs?: Array<{
-    id: string;
-    label: React.ReactNode;
-  }>;
-};
-
-export const TabsList = ({
-  tabs = [],
-  variant = TabListVariant.SOLID,
-  radius = RadiusVariants.Full,
-  direction = TabListDirection.HORIZONTAL,
-  color,
-  children,
-  openTab,
-  size = SizeVariants.Medium,
-  className = '',
-  style = {},
-}: TabListProps) => {
-  const theme = useTheme();
-  const containerRef = useRef<HTMLDivElement>(null);
-  const selectedTabRef = useRef<HTMLSpanElement>(null);
-  const [isSelectorActive, setIsSelectorActive] = useState(false);
-  const [selector, setSelector] = useState(DefaultRect);
-  const containerClassNames = useClassNames({
-    'solid-variant': variant === TabListVariant.SOLID,
-    'ghost-variant': variant === TabListVariant.GHOST,
-    'flat-variant': variant === TabListVariant.FLAT,
-    'line-variant': variant === TabListVariant.LINE,
-    'vertical-direction': direction === TabListDirection.VERTICAL,
-    [className]: Boolean(className),
-  });
-
-  useEffect(() => {
-    const selectedRect = selectedTabRef.current?.getBoundingClientRect() ?? DefaultRect;
-    const containerRect = containerRef.current?.getBoundingClientRect() ?? DefaultRect;
-
-    const width = selectedRect.width;
-    const height = variant === TabListVariant.LINE ? 2 : selectedRect.height;
-    const left = selectedRect.left - containerRect.left;
-    const top =
-      variant === TabListVariant.LINE
-        ? selectedRect.top + selectedRect.height - containerRect.top
-        : selectedRect.top - containerRect.top;
-
-    setSelector({ left, top, width, height });
-
-    if (!isSelectorActive) {
-      setTimeout(() => {
-        setIsSelectorActive(true);
-      }, 100);
-    }
-  }, [isSelectorActive, variant, openTab]);
-
-  const containerColors: TabListColorStyle = (color && getColor(theme.colors[color])) || {
-    $color: theme.colors.text.main,
-    $colorContrast: theme.colors.background.main,
-  };
-
-  return (
-    <TabListStyle
-      {...containerColors}
-      className={containerClassNames}
-      ref={containerRef}
-      style={style}
-      $size={size}
-      $radius={radius}
-    >
-      {Boolean(variant) && <span className={`tabs-selector ${isSelectorActive ? 'active' : ''}`} style={selector} />}
-      {tabs.map(({ id, label }) => (
-        <Tabs.Tab key={id} id={id} ref={id === openTab ? selectedTabRef : null}>
-          {label}
-        </Tabs.Tab>
-      ))}
-      {children}
-    </TabListStyle>
-  );
-};

package/src/components/tabs/tabs.stories.tsx

@@ -1,68 +0,0 @@
-import { useState } from 'react';
-
-import { Grid } from '../../layouts';
-import { Button } from '../buttons';
-import { Typography } from '../typography';
-
-import { Tabs } from './tabs';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-const meta: Meta<typeof Tabs> = {
-  title: 'Tabs/Custom Tabs',
-  component: Tabs,
-  argTypes: {},
-  args: {},
-  render: () => {
-    const [selected, setSelected] = useState('');
-
-    const getButtonVariant = (id: string) => {
-      return selected === id ? 'solid' : 'ghost';
-    };
-
-    return (
-      <Tabs defaultOpenTab='tab-1' onChange={setSelected}>
-        <Grid flow='column' gap='1em' ai='center'>
-          <Tabs.Tab id='tab-1'>
-            <Button color='primary' variant={getButtonVariant('tab-1')}>
-              Tab 1
-            </Button>
-          </Tabs.Tab>
-          <Tabs.Tab id='tab-2'>
-            <Button color='primary' variant={getButtonVariant('tab-2')}>
-              Tab 2
-            </Button>
-          </Tabs.Tab>
-          <Tabs.Tab id='tab-3'>
-            <Button color='primary' variant={getButtonVariant('tab-3')}>
-              Tab 3
-            </Button>
-          </Tabs.Tab>
-        </Grid>
-
-        <Tabs.TabPanel id='tab-1'>
-          <Typography variant='header4' align='center'>
-            Tab 1 content
-          </Typography>
-        </Tabs.TabPanel>
-        <Tabs.TabPanel id='tab-2'>
-          <Typography variant='header4' align='center'>
-            Tab 2 content
-          </Typography>
-        </Tabs.TabPanel>
-        <Tabs.TabPanel id='tab-3'>
-          <Typography variant='header4' align='center'>
-            Tab 3 content
-          </Typography>
-        </Tabs.TabPanel>
-      </Tabs>
-    );
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Tabs>;
-
-export const Default: Story = {
-  args: {},
-};

package/src/components/tabs/tabs.style.ts

@@ -1,137 +0,0 @@
-import styled, { css } from 'styled-components';
-
-import { RadiusVariants, SizeStyles, SizeVariants } from '../../core/variants';
-
-export const TabStyle = styled.span`
-  cursor: pointer;
-  user-select: none;
-  transition: all 300ms ease;
-`;
-
-const RadiusStyles: Record<RadiusVariants, ReturnType<typeof css>> = {
-  [RadiusVariants.None]: css`
-    border-radius: 0;
-
-    ${TabStyle}, .tabs-selector {
-      border-radius: 0;
-    }
-  `,
-  [RadiusVariants.Small]: css`
-    border-radius: 0.5em;
-
-    ${TabStyle}, .tabs-selector {
-      border-radius: 0.3em;
-    }
-  `,
-  [RadiusVariants.Medium]: css`
-    border-radius: 1em;
-
-    ${TabStyle}, .tabs-selector {
-      border-radius: 0.8em;
-    }
-  `,
-  [RadiusVariants.Large]: css`
-    border-radius: 1.5em;
-
-    ${TabStyle}, .tabs-selector {
-      border-radius: 1.3em;
-    }
-  `,
-  [RadiusVariants.Full]: css`
-    border-radius: 1.8em;
-
-    ${TabStyle}, .tabs-selector {
-      border-radius: 1.6em;
-    }
-  `,
-};
-
-export type TabListColorStyle = {
-  $color: string;
-  $colorContrast: string;
-};
-
-export type TabListStyleProps = TabListColorStyle & {
-  $size: `${SizeVariants}`;
-  $radius: `${RadiusVariants}`;
-};
-
-export const TabListStyle = styled.section<TabListStyleProps>`
-  display: grid;
-  grid-auto-flow: column;
-  gap: 1em;
-  align-items: center;
-  position: relative;
-  font-size: ${props => props.theme.constants.typography.label.fontSize};
-  border-radius: 2em;
-
-  ${props => SizeStyles[props.$size]}
-
-  .tabs-selector {
-    position: absolute;
-    background: ${props => props.$color};
-    color: ${props => props.$colorContrast};
-    border-radius: 1.5em;
-
-    &.active {
-      transition: all 300ms ease;
-    }
-  }
-
-  ${TabStyle} {
-    border-radius: 1.5em;
-    padding: 0.5em 1em;
-    z-index: 1;
-    text-align: center;
-
-    &.is-open {
-      color: ${props => props.$colorContrast};
-    }
-
-    &:not(.is-open):hover {
-      color: ${props => props.theme.colors.text.dark};
-    }
-  }
-
-  ${props => RadiusStyles[props.$radius]}
-
-  &.vertical-direction {
-    grid-auto-flow: row;
-    align-items: unset;
-    align-content: start;
-  }
-
-  &.solid-variant {
-    background: ${props => props.theme.colors.background.paper};
-    color: ${props => props.theme.colors.text.main};
-    padding: 0.5em;
-  }
-
-  &.ghost-variant {
-    border: 1px solid ${props => props.$color};
-    padding: 0.5em;
-  }
-
-  &.flat-variant {
-  }
-
-  &.line-variant {
-    border-radius: 0;
-
-    &:not(.vertical-direction) {
-      border-bottom: 2px solid ${props => props.theme.colors.border.main};
-    }
-
-    .tabs-selector {
-      border-radius: 0;
-    }
-
-    ${TabStyle} {
-      border-radius: 0;
-
-      &.is-open {
-        color: ${props => props.$color};
-      }
-    }
-  }
-`;

package/src/components/tabs/tabs.tsx

@@ -1,117 +0,0 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
-
-import { TabsList as TabListComponent, TabListProps } from './tabs-list';
-import { TabStyle } from './tabs.style';
-
-import { useClassNames } from '@polpo/hooks';
-
-type TabsContextState = {
-  openTab: string;
-  changeOpenTab: (id: string) => void;
-};
-
-const TabsContext = createContext<TabsContextState | null>(null);
-
-const useTab = (id: string): [boolean, () => void] => {
-  const context = useContext(TabsContext);
-
-  if (!context) {
-    throw new Error('You cant use this component out off an Tabs component');
-  }
-
-  const { openTab, changeOpenTab } = context;
-
-  return [openTab === id, () => changeOpenTab(id)];
-};
-
-const useTabsContext = (): TabsContextState => {
-  const context = useContext(TabsContext);
-
-  if (!context) {
-    throw new Error('You cant use this component out off an Tabs component');
-  }
-
-  return context;
-};
-
-type TabsProps = {
-  children: React.ReactNode;
-  defaultOpenTab: string;
-  onChange?: (id: string) => void;
-};
-
-export const Tabs = ({ children, defaultOpenTab, onChange }: TabsProps) => {
-  const [openTab, setOpenTab] = useState(defaultOpenTab);
-
-  useEffect(() => {
-    onChange && onChange(openTab);
-  }, [openTab, onChange]);
-
-  return (
-    <TabsContext.Provider
-      value={{
-        openTab,
-        changeOpenTab: id => setOpenTab(id),
-      }}
-    >
-      {children}
-    </TabsContext.Provider>
-  );
-};
-
-type TabProps = {
-  id: string;
-  children: React.ReactNode;
-  className?: string;
-  style?: React.CSSProperties;
-  onClick?: (e: React.MouseEvent<HTMLSpanElement>) => void;
-};
-
-const TabComponent = (
-  { id, children, className = '', style = {}, onClick }: TabProps,
-  ref: React.ForwardedRef<HTMLSpanElement>,
-) => {
-  const [isOpen, openTab] = useTab(id);
-  const tabClassNames = useClassNames({
-    [className]: !!className,
-    'is-open': isOpen,
-  });
-
-  const handleClick = (e: React.MouseEvent<HTMLSpanElement>) => {
-    openTab();
-    onClick && onClick(e);
-  };
-
-  return (
-    <TabStyle className={tabClassNames} style={style} onClick={handleClick} ref={ref}>
-      {children}
-    </TabStyle>
-  );
-};
-
-const Tab = React.forwardRef(TabComponent);
-
-type TabPanelProps = {
-  id: string;
-  children: React.ReactNode;
-};
-
-const TabPanel = ({ id, children }: TabPanelProps) => {
-  const [isOpen] = useTab(id);
-
-  return isOpen ? children : null;
-};
-
-const TabList = ({ children, ...props }: Omit<TabListProps, 'openTab'>) => {
-  const { openTab } = useTabsContext();
-
-  return (
-    <TabListComponent {...props} openTab={openTab}>
-      {children}
-    </TabListComponent>
-  );
-};
-
-Tabs.Tab = Tab;
-Tabs.TabPanel = TabPanel;
-Tabs.TabList = TabList;

package/src/components/tag/index.ts

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