polpo 0.1.0

package/src/components/icon/index.ts

@@ -0,0 +1,5 @@
+import { IconNameT } from './icon';
+import { Icons } from './icons';
+
+export * from './icon';
+export const IconNames: Array<IconNameT> = Object.keys(Icons) as Array<IconNameT>;

package/src/components/image/image.stories.tsx

@@ -0,0 +1,25 @@
+import { Image } from './image';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Image> = {
+  title: 'Image',
+  component: Image,
+  argTypes: {
+    src: { control: { type: 'text' } },
+    alt: { control: { type: 'text' } },
+    loading: { control: 'select', options: ['eager', 'lazy'] },
+  },
+  args: {
+    src: 'https://t4.ftcdn.net/jpg/07/28/89/61/360_F_728896171_M2pPUCPkTyFiSYWhDsJI5A45TsI6B5Gk.jpg',
+    alt: 'Image',
+    loading: 'eager',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Image>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/components/image/image.tsx

@@ -0,0 +1,7 @@
+import { DetailedHTMLProps, ImgHTMLAttributes } from 'react';
+
+type ImageProps = DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> & {};
+
+export const Image = ({ alt = '', loading = 'eager', ...props }: ImageProps) => {
+  return <img loading={loading} alt={alt} {...props} width='100%' />;
+};

package/src/components/image/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,16 @@
+export * from './accordion';
+export * from './buttons';
+export * from './cards';
+export * from './form';
+export * from './icon';
+export * from './image';
+export * from './infinity-scroll';
+export * from './line';
+export * from './loaders';
+export * from './modals';
+export * from './ripple';
+export * from './smart-table';
+export * from './tabs';
+export * from './tag';
+export * from './tooltips';
+export * from './typography';

package/src/components/infinity-scroll/index.ts

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

package/src/components/infinity-scroll/infinity-scroll.stories.tsx

@@ -0,0 +1,75 @@
+import { useCallback, useState } from 'react';
+
+import { Grid } from '../../layouts';
+import { Typography } from '../typography';
+
+import { InfinityScroll } from './infinity-scroll';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof InfinityScroll> = {
+  title: 'InfinityScroll',
+  component: InfinityScroll,
+  argTypes: {
+    isLoading: { control: 'boolean' },
+    hasNextPage: { control: 'boolean' },
+    loadMore: { control: false },
+    data: { control: false },
+    renderItem: { control: false },
+    customLoadMoreElement: { control: false },
+    emptyMessage: { control: 'text' },
+    children: { control: 'text' },
+  },
+  args: {
+    renderItem: (item, key) => <p key={key}>{item as string}</p>,
+  },
+  decorators: [
+    Story => (
+      <Grid style={{ height: '300px', width: '300px', overflow: 'auto', border: '1px solid' }}>
+        <Story />
+      </Grid>
+    ),
+  ],
+  render: args => {
+    const [data, setData] = useState<Array<string>>([]);
+    const [hasNextPage, setHasNextPage] = useState(true);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const loadMore = useCallback(() => {
+      if (!hasNextPage) return;
+
+      setIsLoading(true);
+      setTimeout(() => {
+        setData([...data, ...['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']]);
+        setHasNextPage(data.length < 100);
+        setIsLoading(false);
+      }, 1000);
+    }, [data, hasNextPage]);
+
+    return (
+      <Grid gap='10px' style={{ padding: '10px' }}>
+        <InfinityScroll
+          {...args}
+          data={data}
+          hasNextPage={hasNextPage}
+          isLoading={isLoading}
+          loadMore={loadMore}
+          renderItem={(v: string) => (
+            <section style={{ padding: '10px', background: '#55882233' }}>
+              <Typography variant='label' weight='bold' align='center' as='p'>
+                {v}
+              </Typography>
+            </section>
+          )}
+        />
+      </Grid>
+    );
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof InfinityScroll>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/components/infinity-scroll/infinity-scroll.style.ts

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+export const InfiniteScrollStyle = styled.section`
+  display: grid;
+  gap: 1em;
+`;
+
+export const InfinityScrollFooterStyle = styled.section`
+  display: grid;
+  place-content: start center;
+  place-items: start center;
+
+  .loading {
+    width: 100%;
+    height: 30px;
+    display: grid;
+    place-content: center;
+
+    &--icon {
+      animation: spin 0.5s linear infinite;
+      font-size: 20px;
+    }
+  }
+
+  .empty-message {
+    font-size: 0.8em;
+    text-align: center;
+    color: #a6a6a6;
+  }
+`;

package/src/components/infinity-scroll/infinity-scroll.tsx

@@ -0,0 +1,56 @@
+import { LegacyRef, RefObject, useEffect } from 'react';
+
+import { Icon } from '../icon';
+
+import { InfinityScrollFooterStyle } from './infinity-scroll.style';
+
+import { useDebounce, useInView } from '@polpo/hooks';
+
+type InfinityScrollProps<T> = {
+  isLoading: boolean;
+  hasNextPage: boolean;
+  loadMore: () => void;
+  data: Array<T>;
+  renderItem: (item: T, key: number) => React.ReactElement;
+  customLoadMoreElement?: (ref: RefObject<Element>) => React.ReactElement;
+  emptyMessage?: string;
+  children?: React.ReactNode;
+};
+
+export const InfinityScroll = <T,>({
+  isLoading: isLoadingProp = false,
+  hasNextPage = false,
+  loadMore,
+  data = [],
+  renderItem,
+  customLoadMoreElement,
+  emptyMessage,
+  children,
+}: InfinityScrollProps<T>): React.ReactElement => {
+  const { ref, inView } = useInView();
+  const isLoading = useDebounce(isLoadingProp, 100);
+
+  useEffect(() => {
+    if (hasNextPage && inView && !isLoading) {
+      loadMore();
+    }
+  }, [hasNextPage, isLoading, loadMore, inView]);
+
+  return (
+    <>
+      {children}
+      {data.map(renderItem)}
+      <InfinityScrollFooterStyle>
+        {!!emptyMessage && data.length === 0 && !isLoading && <p className='empty-message'>{emptyMessage}</p>}
+        {(hasNextPage || isLoading) &&
+          (customLoadMoreElement ? (
+            customLoadMoreElement(ref)
+          ) : (
+            <section ref={ref as LegacyRef<HTMLElement>} className='loading'>
+              {isLoading && <Icon name='spinner' className='loading--icon' />}
+            </section>
+          ))}
+      </InfinityScrollFooterStyle>
+    </>
+  );
+};

package/src/components/line/index.ts

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

package/src/components/line/line.stories.tsx

@@ -0,0 +1,67 @@
+import { Grid } from '../../layouts';
+import { Typography } from '../typography';
+
+import { Line, LineOrientation, LineStyle } from './line';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Line> = {
+  title: 'Line',
+  component: Line,
+  argTypes: {
+    orientation: { control: false },
+    className: { control: false },
+    style: { control: false },
+    color: { control: 'color' },
+    lineStyle: { control: false },
+    lineWidth: { control: { type: 'range', min: 1, max: 10 }, if: { arg: 'lineStyle', neq: LineStyle.DOTTED } },
+    dotSize: { control: { type: 'range', min: 1, max: 100 }, if: { arg: 'lineStyle', eq: LineStyle.DOTTED } },
+    dashedSize: { control: { type: 'range', min: 1, max: 100 }, if: { arg: 'lineStyle', eq: LineStyle.DASHED } },
+    spacing: { control: { type: 'range', min: 1, max: 100 }, if: { arg: 'lineStyle', neq: LineStyle.SOLID } },
+  },
+  args: {
+    color: 'currentColor',
+  },
+  render: (args, { orientation }) => <Line {...args} orientation={orientation} />,
+  decorators: [
+    Story => (
+      <Grid ac='start' gtr='auto 1fr auto auto' gap='0.5em' style={{ width: '300px', height: '300px' }}>
+        <Typography variant='small' noPadding>
+          Vertical
+        </Typography>
+        <Story orientation={LineOrientation.VERTICAL} />
+        <Typography variant='small' noPadding>
+          Horizontal
+        </Typography>
+        <Story orientation={LineOrientation.HORIZONTAL} />
+      </Grid>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Line>;
+
+export const Solid: Story = {
+  args: {
+    lineStyle: LineStyle.SOLID,
+    lineWidth: 1,
+  },
+};
+
+export const Dotted: Story = {
+  args: {
+    lineStyle: LineStyle.DOTTED,
+    dotSize: 2,
+    spacing: 5,
+  },
+};
+
+export const Dashed: Story = {
+  args: {
+    lineStyle: LineStyle.DASHED,
+    lineWidth: 2,
+    dashedSize: 10,
+    spacing: 15,
+  },
+};

package/src/components/line/line.style.ts

@@ -0,0 +1,57 @@
+import styled, { css } from 'styled-components';
+
+export type LineStyleProps = {
+  $color: string;
+  $size: number;
+  $spacing: number;
+  $dashSize: number;
+};
+
+export const LineStyle = styled.span<LineStyleProps>`
+  &.horizontal,
+  &.vertical {
+    background: ${props => props.$color ?? 'currentColor'};
+    display: inline-block;
+    border-radius: 100px;
+  }
+
+  &.horizontal {
+    width: 100%;
+    height: ${props => props.$size}px;
+    ${({ $size: sz, $spacing: sp, $color: cl, $dashSize: ds }) => css`
+      &.dotted {
+        background: radial-gradient(${sz / 2}px ${sz / 2}px, ${cl} 100%, transparent) 0 0 / ${sp + sz}px 100%;
+      }
+
+      &.dashed {
+        background: repeating-linear-gradient(
+          90deg,
+          ${cl},
+          ${cl} ${ds}px,
+          transparent ${ds}px,
+          transparent ${sp + ds}px
+        );
+      }
+    `}
+  }
+
+  &.vertical {
+    height: 100%;
+    width: ${props => props.$size}px;
+    ${({ $size: sz, $spacing: sp, $color: cl, $dashSize: ds }) => css`
+      &.dotted {
+        background: radial-gradient(${sz / 2}px ${sz / 2}px, ${cl} 100%, transparent) 0 0 / 100% ${sp + sz}px;
+      }
+
+      &.dashed {
+        background: repeating-linear-gradient(
+          0deg,
+          ${cl},
+          ${cl} ${ds}px,
+          transparent ${ds}px,
+          transparent ${sp + ds}px
+        );
+      }
+    `}
+  }
+`;

package/src/components/line/line.tsx

@@ -0,0 +1,76 @@
+import { LineStyle as LineComponentStyle } from './line.style';
+
+import { useClassNames } from '@polpo/hooks';
+
+export enum LineOrientation {
+  VERTICAL = 'vertical',
+  HORIZONTAL = 'horizontal',
+}
+
+export enum LineStyle {
+  SOLID = 'solid',
+  DOTTED = 'dotted',
+  DASHED = 'dashed',
+}
+
+type LineCommonProps = {
+  orientation?: `${LineOrientation}`;
+  className?: string;
+  style?: React.CSSProperties;
+  color?: string;
+};
+
+type LineSolidProps = LineCommonProps & {
+  lineStyle?: `${LineStyle.SOLID}`;
+  spacing?: never;
+  dotSize?: never;
+  dashedSize?: never;
+  lineWidth?: number;
+};
+
+type LineDottedProps = LineCommonProps & {
+  lineStyle: `${LineStyle.DOTTED}`;
+  spacing?: number;
+  dotSize?: number;
+  dashedSize?: never;
+  lineWidth?: never;
+};
+
+type LineDashedProps = LineCommonProps & {
+  lineStyle: `${LineStyle.DASHED}`;
+  spacing?: number;
+  dotSize?: never;
+  dashedSize?: number;
+  lineWidth?: number;
+};
+
+type LineProps = LineSolidProps | LineDottedProps | LineDashedProps;
+
+export const Line = ({
+  orientation = LineOrientation.HORIZONTAL,
+  className = '',
+  style = {},
+  color = 'currentColor',
+  lineWidth = 1,
+  lineStyle = LineStyle.SOLID,
+  dotSize = 1,
+  dashedSize = 1,
+  spacing = 1,
+}: LineProps) => {
+  const classNames = useClassNames({
+    [orientation]: true,
+    [className]: !!className,
+    [lineStyle]: true,
+  });
+
+  return (
+    <LineComponentStyle
+      className={classNames}
+      style={style}
+      $dashSize={dashedSize}
+      $color={color}
+      $size={lineStyle === LineStyle.DOTTED ? dotSize : lineWidth}
+      $spacing={spacing}
+    />
+  );
+};

package/src/components/loaders/index.ts

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

package/src/components/loaders/simple-loader/index.ts

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

package/src/components/loaders/simple-loader/simple-loader.stories.tsx

@@ -0,0 +1,21 @@
+import { SimpleLoader } from './simple-loader';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof SimpleLoader> = {
+  title: 'SimpleLoader',
+  component: SimpleLoader,
+  argTypes: {
+    spinDuration: { control: { type: 'range', min: 100, max: 1000, step: 50 } },
+  },
+  args: {
+    spinDuration: 500,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SimpleLoader>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/components/loaders/simple-loader/simple-loader.style.ts

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const SimpleLoaderStyle = styled.section`
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-content: center;
+
+  .simple-loader-spinner {
+    animation: spin linear infinite;
+    font-size: 3em;
+  }
+`;

package/src/components/loaders/simple-loader/simple-loader.tsx

@@ -0,0 +1,15 @@
+import { Icon } from '../../icon';
+
+import { SimpleLoaderStyle } from './simple-loader.style';
+
+type SimpleLoaderProps = {
+  spinDuration?: number;
+};
+
+export const SimpleLoader = ({ spinDuration = 500 }: SimpleLoaderProps) => {
+  return (
+    <SimpleLoaderStyle>
+      <Icon name='spinner' className='simple-loader-spinner' style={{ animationDuration: `${spinDuration}ms` }} />
+    </SimpleLoaderStyle>
+  );
+};

package/src/components/modals/action-modal/action-modal.stories.tsx

@@ -0,0 +1,134 @@
+import { useState } from 'react';
+
+import { Grid } from '../../../layouts';
+import { Button } from '../../buttons';
+import { IconNames } from '../../icon';
+import { Line } from '../../line';
+import { Typography } from '../../typography';
+
+import { ActionModal } from './action-modal';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof ActionModal> = {
+  title: 'Modals/ActionModal',
+  component: ActionModal,
+  argTypes: {
+    isOpen: { control: false },
+    onClose: { control: false },
+    actionRequired: { control: 'boolean' },
+    icon: { options: [undefined, ...IconNames.toSorted()] },
+    noCloseButton: { control: 'boolean' },
+    noPadding: { control: 'boolean' },
+    className: { control: false },
+    style: { control: false },
+    lineOnTop: { control: 'boolean' },
+    backCard: { control: 'boolean' },
+    children: { control: 'text' },
+  },
+  args: {
+    children: 'Action modal content',
+  },
+  decorators: [
+    Story => {
+      const [isOpen, setIsOpen] = useState(false);
+
+      return (
+        <>
+          <Button onClick={() => setIsOpen(true)}>Open modal</Button>
+          <Story isOpen={isOpen} onClose={() => setIsOpen(false)} />
+        </>
+      );
+    },
+  ],
+  render: (args, { isOpen, onClose }) => {
+    return <ActionModal {...args} isOpen={isOpen} onClose={onClose} />;
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ActionModal>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Confirmation: Story = {
+  argTypes: {
+    children: { control: false },
+  },
+  args: {
+    backCard: true,
+    lineOnTop: true,
+    icon: 'user',
+  },
+  render: (args, { isOpen, onClose }) => {
+    return (
+      <ActionModal {...args} isOpen={isOpen} onClose={onClose}>
+        <Typography variant='header4' align='center' noPadding>
+          Action modal
+        </Typography>
+        <Typography>Are you sure want to execute an action?</Typography>
+        <Grid ai='center' gtc='repeat(2, minmax(100px, 1fr))' jc='center' gap='1em' style={{ margin: 'auto' }}>
+          <ActionModal.ActionButton
+            size='small'
+            width='full'
+            variant='ghost'
+            onClick={() => alert('Action button clicked')}
+          >
+            No
+          </ActionModal.ActionButton>
+          <ActionModal.ActionButton
+            size='small'
+            width='full'
+            color='primary'
+            onClick={() => alert('Action button clicked')}
+          >
+            Yes
+          </ActionModal.ActionButton>
+        </Grid>
+      </ActionModal>
+    );
+  },
+};
+
+export const Classic: Story = {
+  argTypes: {
+    children: { control: false },
+  },
+  args: {
+    lineOnTop: true,
+    noPadding: true,
+  },
+  render: (args, { isOpen, onClose }) => {
+    return (
+      <ActionModal {...args} isOpen={isOpen} onClose={onClose}>
+        <Typography variant='header4' noPadding style={{ padding: '0 1rem' }}>
+          Action modal
+        </Typography>
+        <Line />
+        <Grid gap='1em' style={{ padding: '0 1rem 1rem' }}>
+          <Typography>Are you sure want to execute an action?</Typography>
+        </Grid>
+        <Grid ai='center' gtc='repeat(2, 80px)' jc='end' gap='1em' style={{ padding: '0 1rem 1rem' }}>
+          <ActionModal.ActionButton
+            size='small'
+            width='full'
+            variant='ghost'
+            onClick={() => alert('Action button clicked')}
+          >
+            No
+          </ActionModal.ActionButton>
+          <ActionModal.ActionButton
+            size='small'
+            width='full'
+            color='primary'
+            onClick={() => alert('Action button clicked')}
+          >
+            Yes
+          </ActionModal.ActionButton>
+        </Grid>
+      </ActionModal>
+    );
+  },
+};