polpo 0.1.0

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "polpo",
+  "version": "0.1.0",
+  "sideEffects": false,
+  "license": "MIT",
+  "type": "module",
+  "imports": {
+    "@juanmsl/ui": "./src",
+    "@juanmsl/hooks": "./src/hooks",
+    "@juanmsl/helpers": "./src/helpers"
+  },
+  "exports": {
+    ".": null,
+    "./ui": {
+      "main": "./dist/polpo.cjs",
+      "module": "./dist/polpo.js",
+      "types": "./dist/polpo.d.ts"
+    },
+    "./hooks": {
+      "main": "./dist/hooks.cjs",
+      "module": "./dist/hooks.js",
+      "types": "./dist/hooks.d.ts"
+    },
+    "./helpers": {
+      "main": "./dist/helpers.cjs",
+      "module": "./dist/helpers.js",
+      "types": "./dist/helpers.d.ts"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "directory": "packages/polpo",
+    "url": "git+https://github.com/juanmsl/monorepo-juanmsl.git"
+  },
+  "website": "https://ui.juanmsl.com/",
+  "scripts": {
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "yarn lint --fix",
+    "build:watch": "tsup --watch",
+    "clean": "rm -rf ./dist",
+    "build": "yarn clean && tsup",
+    "publish-package": "yarn lint && yarn build && yarn publish --no-git-tag-version",
+    "transform-svgs": "node ../../node_modules/@juanmsl/svg-to-react && yarn lint:fix",
+    "dev": "storybook dev -p 6006 --quiet",
+    "build-storybook": "storybook build"
+  },
+  "devDependencies": {
+    "@juanmsl/svg-to-react": "*",
+    "@storybook/addon-essentials": "^8.5.2",
+    "@storybook/addon-interactions": "^8.5.2",
+    "@storybook/addon-links": "^8.5.2",
+    "@storybook/blocks": "^8.5.2",
+    "@storybook/manager-api": "^8.5.2",
+    "@storybook/react": "^8.5.2",
+    "@storybook/react-vite": "^8.5.2",
+    "@storybook/test": "^8.5.2",
+    "@storybook/theming": "^8.5.2",
+    "@types/color": "^3.0.3",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.18",
+    "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
+    "@typescript-eslint/parser": "^7.4.0",
+    "@vitejs/plugin-react": "^4.3.2",
+    "eslint": "^8.57.0",
+    "eslint-config-custom": "*",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-storybook": "^0.11.2",
+    "framer-motion": "^11.0.24",
+    "react": "^18.2.0",
+    "react-hook-form": "^7.44.2",
+    "storybook": "^8.5.2",
+    "styled-components": "^6.1.11",
+    "tsconfig": "*",
+    "tsup": "^8.0.1",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.8"
+  },
+  "peerDependencies": {
+    "framer-motion": "^11.0.24",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.44.2",
+    "styled-components": "^6.1.11"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.1.0",
+    "axios": "^1.4.0",
+    "color": "^4.2.3",
+    "moment": "^2.30.1",
+    "react-colorful": "^5.6.1",
+    "use-eye-dropper": "^1.6.1",
+    "yup": "^1.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/accordion/accordion-item.stories.tsx

@@ -0,0 +1,128 @@
+import { Grid } from '../../layouts';
+import { Icon, IconNames } from '../icon';
+import { Line } from '../line';
+import { Typography } from '../typography';
+
+import { Accordion } from './accordion';
+import { AccordionItem } from './accordion-item';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof AccordionItem> = {
+  title: 'Accordion/AccordionItem',
+  component: AccordionItem,
+  argTypes: {
+    children: { control: false },
+    className: { control: false },
+    classNames: { control: false },
+    style: { control: false },
+    icon: { control: 'select', options: [undefined, ...IconNames.toSorted()] },
+    title: { control: 'text' },
+    subtitle: { control: 'text' },
+    startContent: { control: false },
+    endContent: { control: false },
+    content: { control: false },
+  },
+  args: {},
+  render: args => (
+    <Accordion>
+      <AccordionItem {...args}>
+        <Typography variant='header4'>Title</Typography>
+        <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>
+        <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>
+      </AccordionItem>
+    </Accordion>
+  ),
+  decorators: [
+    Story => (
+      <Grid style={{ width: '500px' }}>
+        <Story />
+      </Grid>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof AccordionItem>;
+
+export const Default: Story = {
+  args: {
+    title: 'Accordion Item',
+    subtitle: 'Default with Title and Subtitle',
+  },
+};
+
+export const LeftContent: Story = {
+  args: {
+    title: 'Accordion Item',
+    subtitle: 'Custom left content',
+    startContent: isOpen => (
+      <Grid
+        pc='center'
+        style={{
+          borderRadius: '8px',
+          color: `${isOpen ? 'tomato' : 'currentColor'}`,
+          border: '1px solid',
+          filter: `grayscale(${isOpen ? 0 : 1})`,
+          width: '40px',
+          height: '40px',
+        }}
+      >
+        <Icon name='airplane' />
+      </Grid>
+    ),
+  },
+};
+
+export const CustomContent: Story = {
+  argTypes: {
+    title: { control: false },
+    subtitle: { control: false },
+  },
+  args: {
+    content: isOpen => (
+      <Grid flow='column' gap='1em' ai='center' gtc='auto 1fr auto'>
+        <section>
+          <Typography variant='body' weight='bold' noPadding style={{ color: `${isOpen ? 'tomato' : 'currentColor'}` }}>
+            Accordion item
+          </Typography>
+          <Typography variant='small'>Custom content</Typography>
+        </section>
+        <Line />
+        <Grid
+          pc='center'
+          style={{
+            borderRadius: '8px',
+            color: `${isOpen ? 'tomato' : 'currentColor'}`,
+            border: '1px solid',
+            filter: `grayscale(${isOpen ? 0 : 1})`,
+            width: '40px',
+            height: '40px',
+          }}
+        >
+          <Icon name={isOpen ? 'eye' : 'eye-hidden'} />
+        </Grid>
+      </Grid>
+    ),
+  },
+};
+
+export const RightContent: Story = {
+  args: {
+    title: 'Item',
+    subtitle: 'Subtitle',
+    endContent: isOpen => (
+      <section>
+        <Typography variant='small'>{isOpen ? 'Close' : 'Open'}</Typography>
+      </section>
+    ),
+  },
+};

package/src/components/accordion/accordion-item.tsx

@@ -0,0 +1,119 @@
+import React, { useMemo } from 'react';
+
+import { SlideCard } from '../cards';
+import { Icon, IconNameT } from '../icon';
+import { Typography } from '../typography';
+
+import { useAccordionItem } from './accordion';
+import { AccordionItemStyle } from './accordion.style';
+
+import { useClassNames } from '@polpo/hooks';
+
+type NodeFunction = (isOpen: boolean) => React.ReactNode;
+
+type ContentType = React.ReactNode | NodeFunction;
+
+type AccordionItemCommonProps = {
+  icon?: IconNameT;
+  children: React.ReactNode;
+  startContent?: ContentType;
+  endContent?: ContentType;
+  className?: string;
+  style?: React.CSSProperties;
+  classNames?: {
+    header?: string;
+    headerContent?: string;
+    title?: string;
+    subtitle?: string;
+    toggleIcon?: string;
+    body?: string;
+  };
+};
+
+type AccordionItemTitleProps = AccordionItemCommonProps & {
+  title?: ContentType;
+  subtitle?: ContentType;
+  content?: never;
+};
+
+type AccordionItemContentProps = AccordionItemCommonProps & {
+  title?: never;
+  subtitle?: never;
+  content?: ContentType;
+};
+
+type AccordionItemProps = AccordionItemTitleProps | AccordionItemContentProps;
+
+const getContent = (content: ContentType | undefined, isOpen: boolean): React.ReactNode | undefined => {
+  if (typeof content === 'function') {
+    return content(isOpen);
+  }
+
+  return content;
+};
+
+export const AccordionItem: React.FC<AccordionItemProps> = ({
+  title,
+  subtitle,
+  children,
+  icon = 'caret-left',
+  startContent,
+  content,
+  endContent,
+  classNames = {},
+  className = '',
+  style = {},
+}: AccordionItemProps) => {
+  const id = useMemo(() => crypto.randomUUID(), []);
+  const [isOpen, toggle] = useAccordionItem(id);
+  const headerClassName = useClassNames({
+    'accordion-header': true,
+    'has-start-content': !!startContent,
+    [classNames?.header ?? '']: !!classNames?.header,
+    'is-open': isOpen,
+  });
+
+  const headerContentClassName = useClassNames({
+    'accordion-header-content': true,
+    [classNames?.headerContent ?? '']: !!classNames?.headerContent,
+  });
+
+  const toggleIconClassName = useClassNames({
+    'accordion-toggle-icon': true,
+    isOpen: isOpen,
+    [classNames?.toggleIcon ?? '']: !!classNames?.toggleIcon,
+  });
+
+  const bodyContentClassName = useClassNames({
+    'accordion-body': true,
+    [classNames?.body ?? '']: !!classNames?.body,
+  });
+
+  const titleContent = getContent(title, isOpen);
+  const subtitleContent = getContent(subtitle, isOpen);
+  const headerStart = getContent(startContent, isOpen);
+  const headerMiddle = getContent(content, isOpen) ?? (
+    <section className={headerContentClassName}>
+      <Typography className={classNames?.title} variant='body' noPadding weight='bold'>
+        {titleContent}
+      </Typography>
+      <Typography className={classNames?.subtitle} variant='label' noPadding weight='light'>
+        {subtitleContent}
+      </Typography>
+    </section>
+  );
+  const headerEnd = getContent(endContent, isOpen) ?? <Icon className={toggleIconClassName} name={icon} />;
+
+  return (
+    <AccordionItemStyle className={className} style={style}>
+      <section className={headerClassName} onClick={toggle}>
+        {headerStart}
+        {headerMiddle}
+        {headerEnd}
+      </section>
+      <SlideCard isOpen={isOpen}>
+        <section className={bodyContentClassName}>{children}</section>
+      </SlideCard>
+    </AccordionItemStyle>
+  );
+};

package/src/components/accordion/accordion.stories.tsx

@@ -0,0 +1,74 @@
+import { Grid } from '../../layouts';
+import { Typography } from '../typography';
+
+import { Accordion } from './accordion';
+import { AccordionItem } from './accordion-item';
+import { CustomContent as AccordionItemStories } from './accordion-item.stories';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Accordion/Accordion',
+  component: Accordion,
+  argTypes: {
+    children: { control: false },
+    className: { control: false },
+    noSeparators: { control: 'boolean' },
+    style: { control: false },
+  },
+  args: {
+    noSeparators: false,
+  },
+  decorators: [
+    Story => (
+      <Grid style={{ width: '500px' }}>
+        <Story />
+      </Grid>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+export const Default: Story = {
+  args: {
+    children: Array.from(new Array(10)).map((_, key) => (
+      <AccordionItem {...AccordionItemStories.args} key={key}>
+        <Typography variant='header4'>Title {key + 1}</Typography>
+        <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>
+      </AccordionItem>
+    )),
+  },
+};
+
+export const FAQ: Story = {
+  args: {
+    noSeparators: true,
+    style: {
+      gap: '1em',
+    },
+    children: Array.from(new Array(10)).map((_, key) => (
+      <AccordionItem
+        key={key}
+        title={`Is there a question #${key + 1}?`}
+        style={{
+          border: '1px solid',
+          borderRadius: '1em',
+          overflow: 'hidden',
+          padding: '0 1em',
+        }}
+      >
+        <Typography noPadding>
+          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>
+      </AccordionItem>
+    )),
+  },
+};

package/src/components/accordion/accordion.style.ts

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+
+export const AccordionStyle = styled.section`
+  display: grid;
+`;
+
+export const AccordionItemStyle = styled.section`
+  display: grid;
+  position: relative;
+
+  .accordion-header {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    gap: 20px;
+    cursor: pointer;
+    position: sticky;
+    top: 0;
+    padding: 20px 0;
+    background: ${props => props.theme.colors.background.main};
+
+    &.has-start-content {
+      grid-template-columns: auto 1fr auto;
+    }
+  }
+
+  .accordion-header-content {
+    display: grid;
+  }
+
+  .accordion-toggle-icon {
+    transition: all 300ms ease;
+
+    &.isOpen {
+      transform: rotate(-90deg);
+    }
+  }
+
+  .accordion-body {
+    padding: 10px 0 20px;
+  }
+`;

package/src/components/accordion/accordion.tsx

@@ -0,0 +1,56 @@
+import React, { createContext, useCallback, useContext, useState } from 'react';
+
+import { Line } from '../line';
+
+import { AccordionStyle } from './accordion.style';
+
+type AccordionContextState = {
+  toggleItem: (id: string) => void;
+  openedItem: string;
+};
+
+const AccordionContext = createContext<AccordionContextState | null>(null);
+
+export const useAccordionItem = (id: string): [boolean, () => void] => {
+  const context = useContext(AccordionContext);
+
+  if (!context) {
+    throw new Error('You cant use this component out off an Accordion component');
+  }
+
+  const { toggleItem, openedItem } = context;
+
+  const toggle = () => toggleItem(id);
+
+  return [openedItem === id, toggle];
+};
+
+type AccordionProps = {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  noSeparators?: boolean;
+};
+
+export const Accordion = ({ children, className = '', noSeparators, style = {} }: AccordionProps) => {
+  const [openedItem, setOpenedItem] = useState<string>('');
+
+  const toggleItem = useCallback((id: string) => {
+    setOpenedItem(prev => (prev === id ? '' : id));
+  }, []);
+
+  return (
+    <AccordionContext.Provider
+      value={{
+        toggleItem,
+        openedItem,
+      }}
+    >
+      <AccordionStyle className={className} style={style}>
+        {(Array.isArray(children) ? children : [children]).flatMap((child, key) => {
+          return key === 0 ? child : [noSeparators ? null : <Line orientation='horizontal' key={`${key}.5`} />, child];
+        })}
+      </AccordionStyle>
+    </AccordionContext.Provider>
+  );
+};

package/src/components/accordion/index.ts

@@ -0,0 +1,2 @@
+export * from './accordion';
+export * from './accordion-item';

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

@@ -0,0 +1,103 @@
+import { RadiusVariants, SizeVariants } from '../../../core/variants';
+import { Grid } from '../../../layouts';
+import { IconNames } from '../../icon';
+
+import { Button, ButtonColor, ButtonVariant } from './button';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Button> = {
+  title: 'Buttons/Button',
+  component: Button,
+  argTypes: {
+    children: { control: 'text' },
+    className: { control: false },
+    color: {
+      control: 'inline-radio',
+      options: [undefined, ...Object.values(ButtonColor)],
+    },
+    disabled: { control: 'boolean' },
+    isLoading: { control: 'boolean' },
+    leftIcon: { options: [undefined, ...IconNames.toSorted()] },
+    noShadow: { control: 'boolean' },
+    onClick: { control: false },
+    size: { control: 'inline-radio', options: Object.values(SizeVariants) },
+    style: { control: false },
+    rightIcon: { options: [undefined, ...IconNames.toSorted()] },
+    radius: { control: 'inline-radio', options: Object.values(RadiusVariants) },
+    type: { control: false, options: ['button', 'submit', 'reset'] },
+    variant: { control: 'inline-radio', options: Object.values(ButtonVariant) },
+    width: { control: 'inline-radio', options: ['fit', 'full'] },
+  },
+  args: {
+    width: 'full',
+    size: 'medium',
+    radius: 'medium',
+    children: 'Button',
+    noShadow: false,
+    disabled: false,
+    isLoading: false,
+  },
+  decorators: [
+    Story => (
+      <Grid ji='center' gtc='300px'>
+        <Story />
+      </Grid>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {};
+
+export const Variants: Story = {
+  argTypes: {
+    variant: { control: false },
+    children: { control: false },
+  },
+  render: args => (
+    <Grid gtc='300px' ji='center' gap='1em' ai='center'>
+      {Object.values(ButtonVariant).map(variant => (
+        <Button {...args} variant={variant} key={variant}>
+          {variant}
+        </Button>
+      ))}
+    </Grid>
+  ),
+};
+
+export const Sizes: Story = {
+  argTypes: {
+    size: { control: false },
+    children: { control: false },
+  },
+  render: args => (
+    <Grid gtc='300px' ji='center' gap='1em' ai='center'>
+      {Object.values(SizeVariants).map(size => (
+        <Button {...args} size={size} key={size}>
+          {size}
+        </Button>
+      ))}
+    </Grid>
+  ),
+};
+
+export const Colors: Story = {
+  argTypes: {
+    color: { control: false },
+    children: { control: false },
+  },
+  render: args => (
+    <Grid gtc='300px' ji='center' gap='1em' ai='center'>
+      <Button {...args}>Default</Button>
+      {Object.values(ButtonColor).map(color => (
+        <Button {...args} color={color} key={color}>
+          {color}
+        </Button>
+      ))}
+    </Grid>
+  ),
+};