polpo 0.1.0

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

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

@@ -0,0 +1,131 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useTheme } from 'styled-components';
+
+import { ThemeColor } from '../../contexts';
+import { RadiusVariants, SizeVariants, useRadiusClassName, useSizeClassName } from '../../core/variants';
+
+import { Tabs } from './tabs';
+import { TabListStyle, TabListStyleProps } 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): TabListStyleProps | 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 tabRadius = useRadiusClassName(radius);
+  const tabSize = useSizeClassName(size);
+  const containerClassNames = useClassNames({
+    [tabRadius]: true,
+    [tabSize]: true,
+    '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: TabListStyleProps = (color && getColor(theme.colors[color])) || {
+    $color: theme.colors.text.main,
+    $colorContrast: theme.colors.background.main,
+  };
+
+  return (
+    <TabListStyle {...containerColors} className={containerClassNames} ref={containerRef} style={style}>
+      {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

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

@@ -0,0 +1,132 @@
+import styled from 'styled-components';
+
+import { RadiusClassNames, SizeStyles } from '../../core/variants';
+
+export const TabStyle = styled.span`
+  cursor: pointer;
+  user-select: none;
+  transition: all 300ms ease;
+`;
+
+export type TabListStyleProps = {
+  $color: string;
+  $colorContrast: string;
+};
+
+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;
+
+  ${SizeStyles}
+
+  .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};
+    }
+  }
+
+  &.${RadiusClassNames.None} {
+    border-radius: 0;
+
+    ${TabStyle}, .tabs-selector {
+      border-radius: 0;
+    }
+  }
+
+  &.${RadiusClassNames.Small} {
+    border-radius: 0.5em;
+
+    ${TabStyle}, .tabs-selector {
+      border-radius: 0.3em;
+    }
+  }
+
+  &.${RadiusClassNames.Medium} {
+    border-radius: 1em;
+
+    ${TabStyle}, .tabs-selector {
+      border-radius: 0.8em;
+    }
+  }
+
+  &.${RadiusClassNames.Large} {
+    border-radius: 1.5em;
+
+    ${TabStyle}, .tabs-selector {
+      border-radius: 1.3em;
+    }
+  }
+
+  &.${RadiusClassNames.Full} {
+    border-radius: 1.8em;
+
+    ${TabStyle}, .tabs-selector {
+      border-radius: 1.6em;
+    }
+  }
+
+  &.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

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

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

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

@@ -0,0 +1,49 @@
+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: {},
+  render: (args, { isSelected }) => <Tag isSelected={isSelected} {...args} />,
+  decorators: [
+    Story => (
+      <Flex wrap='wrap' gap='1em'>
+        <Story />
+        <Story />
+        <Story />
+        <Story />
+        <Story />
+        <Story />
+        <Story />
+        <Story />
+        <Story />
+        <Story />
+      </Flex>
+    ),
+  ],
+};

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

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+import { RadiusStyles, SizeStyles } from '../../core/variants';
+
+export const TagStyle = styled.span`
+  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;
+
+  ${SizeStyles}
+  ${RadiusStyles}
+
+  &:hover,
+  &.tag-selected {
+    background: ${props => props.theme.colors.primary.main};
+    color: ${props => props.theme.colors.primary.contrast};
+  }
+`;