polpo 0.1.7 → 0.1.8

package/src/components/loaders/icons/spinner-1.tsx

@@ -1,162 +0,0 @@
-export const Spinner1 = () => {
-  return (
-    <svg fill='currentColor' width='1em' height='1em' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
-      <circle cx='12' cy='3' r='0'>
-        <animate
-          id='spinner_318l'
-          begin='0;spinner_cvkU.end-0.5s'
-          attributeName='r'
-          calcMode='spline'
-          dur='0.6s'
-          values='0;2;0'
-          keyTimes='0;.2;1'
-          keySplines='0,1,0,1;.53,0,.61,.73'
-          fill='freeze'
-        />
-      </circle>
-      <circle cx='16.50' cy='4.21' r='0'>
-        <animate
-          id='spinner_g5Gj'
-          begin='spinner_318l.begin+0.1s'
-          attributeName='r'
-          calcMode='spline'
-          dur='0.6s'
-          values='0;2;0'
-          keyTimes='0;.2;1'
-          keySplines='0,1,0,1;.53,0,.61,.73'
-          fill='freeze'
-        />
-      </circle>
-      <circle cx='7.50' cy='4.21' r='0'>
-        <animate
-          id='spinner_cvkU'
-          begin='spinner_Uuk0.begin+0.1s'
-          attributeName='r'
-          calcMode='spline'
-          dur='0.6s'
-          values='0;2;0'
-          keyTimes='0;.2;1'
-          keySplines='0,1,0,1;.53,0,.61,.73'
-          fill='freeze'
-        />
-      </circle>
-      <circle cx='19.79' cy='7.50' r='0'>
-        <animate
-          id='spinner_e8rM'
-          begin='spinner_g5Gj.begin+0.1s'
-          attributeName='r'
-          calcMode='spline'
-          dur='0.6s'
-          values='0;2;0'
-          keyTimes='0;.2;1'
-          keySplines='0,1,0,1;.53,0,.61,.73'
-          fill='freeze'
-        />
-      </circle>
-      <circle cx='4.21' cy='7.50' r='0'>
-        <animate
-          id='spinner_Uuk0'
-          begin='spinner_z7ol.begin+0.1s'
-          attributeName='r'
-          calcMode='spline'
-          dur='0.6s'
-          values='0;2;0'
-          keyTimes='0;.2;1'
-          keySplines='0,1,0,1;.53,0,.61,.73'
-          fill='freeze'
-        />
-      </circle>
-      <circle cx='21.00' cy='12.00' r='0'>
-        <animate
-          id='spinner_MooL'
-          begin='spinner_e8rM.begin+0.1s'
-          attributeName='r'
-          calcMode='spline'
-          dur='0.6s'
-          values='0;2;0'
-          keyTimes='0;.2;1'
-          keySplines='0,1,0,1;.53,0,.61,.73'
-          fill='freeze'
-        />
-      </circle>
-      <circle cx='3.00' cy='12.00' r='0'>
-        <animate
-          id='spinner_z7ol'
-          begin='spinner_KEoo.begin+0.1s'
-          attributeName='r'
-          calcMode='spline'
-          dur='0.6s'
-          values='0;2;0'
-          keyTimes='0;.2;1'
-          keySplines='0,1,0,1;.53,0,.61,.73'
-          fill='freeze'
-        />
-      </circle>
-      <circle cx='19.79' cy='16.50' r='0'>
-        <animate
-          id='spinner_btyV'
-          begin='spinner_MooL.begin+0.1s'
-          attributeName='r'
-          calcMode='spline'
-          dur='0.6s'
-          values='0;2;0'
-          keyTimes='0;.2;1'
-          keySplines='0,1,0,1;.53,0,.61,.73'
-          fill='freeze'
-        />
-      </circle>
-      <circle cx='4.21' cy='16.50' r='0'>
-        <animate
-          id='spinner_KEoo'
-          begin='spinner_1IYD.begin+0.1s'
-          attributeName='r'
-          calcMode='spline'
-          dur='0.6s'
-          values='0;2;0'
-          keyTimes='0;.2;1'
-          keySplines='0,1,0,1;.53,0,.61,.73'
-          fill='freeze'
-        />
-      </circle>
-      <circle cx='16.50' cy='19.79' r='0'>
-        <animate
-          id='spinner_1sIS'
-          begin='spinner_btyV.begin+0.1s'
-          attributeName='r'
-          calcMode='spline'
-          dur='0.6s'
-          values='0;2;0'
-          keyTimes='0;.2;1'
-          keySplines='0,1,0,1;.53,0,.61,.73'
-          fill='freeze'
-        />
-      </circle>
-      <circle cx='7.50' cy='19.79' r='0'>
-        <animate
-          id='spinner_1IYD'
-          begin='spinner_NWhh.begin+0.1s'
-          attributeName='r'
-          calcMode='spline'
-          dur='0.6s'
-          values='0;2;0'
-          keyTimes='0;.2;1'
-          keySplines='0,1,0,1;.53,0,.61,.73'
-          fill='freeze'
-        />
-      </circle>
-      <circle cx='12' cy='21' r='0'>
-        <animate
-          id='spinner_NWhh'
-          begin='spinner_1sIS.begin+0.1s'
-          attributeName='r'
-          calcMode='spline'
-          dur='0.6s'
-          values='0;2;0'
-          keyTimes='0;.2;1'
-          keySplines='0,1,0,1;.53,0,.61,.73'
-          fill='freeze'
-        />
-      </circle>
-    </svg>
-  );
-};

package/src/components/loaders/icons/spinner-2.tsx

@@ -1,147 +0,0 @@
-export const Spinner2 = () => {
-  return (
-    <svg fill='currentColor' width='1em' height='1em' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
-      <g>
-        <circle cx='12' cy='3' r='1'>
-          <animate
-            id='spinner_7Z73'
-            begin='0;spinner_tKsu.end-0.5s'
-            attributeName='r'
-            calcMode='spline'
-            dur='0.6s'
-            values='1;2;1'
-            keySplines='.27,.42,.37,.99;.53,0,.61,.73'
-          />
-        </circle>
-        <circle cx='16.50' cy='4.21' r='1'>
-          <animate
-            id='spinner_Wd87'
-            begin='spinner_7Z73.begin+0.1s'
-            attributeName='r'
-            calcMode='spline'
-            dur='0.6s'
-            values='1;2;1'
-            keySplines='.27,.42,.37,.99;.53,0,.61,.73'
-          />
-        </circle>
-        <circle cx='7.50' cy='4.21' r='1'>
-          <animate
-            id='spinner_tKsu'
-            begin='spinner_9Qlc.begin+0.1s'
-            attributeName='r'
-            calcMode='spline'
-            dur='0.6s'
-            values='1;2;1'
-            keySplines='.27,.42,.37,.99;.53,0,.61,.73'
-          />
-        </circle>
-        <circle cx='19.79' cy='7.50' r='1'>
-          <animate
-            id='spinner_lMMO'
-            begin='spinner_Wd87.begin+0.1s'
-            attributeName='r'
-            calcMode='spline'
-            dur='0.6s'
-            values='1;2;1'
-            keySplines='.27,.42,.37,.99;.53,0,.61,.73'
-          />
-        </circle>
-        <circle cx='4.21' cy='7.50' r='1'>
-          <animate
-            id='spinner_9Qlc'
-            begin='spinner_Khxv.begin+0.1s'
-            attributeName='r'
-            calcMode='spline'
-            dur='0.6s'
-            values='1;2;1'
-            keySplines='.27,.42,.37,.99;.53,0,.61,.73'
-          />
-        </circle>
-        <circle cx='21.00' cy='12.00' r='1'>
-          <animate
-            id='spinner_5L9t'
-            begin='spinner_lMMO.begin+0.1s'
-            attributeName='r'
-            calcMode='spline'
-            dur='0.6s'
-            values='1;2;1'
-            keySplines='.27,.42,.37,.99;.53,0,.61,.73'
-          />
-        </circle>
-        <circle cx='3.00' cy='12.00' r='1'>
-          <animate
-            id='spinner_Khxv'
-            begin='spinner_ld6P.begin+0.1s'
-            attributeName='r'
-            calcMode='spline'
-            dur='0.6s'
-            values='1;2;1'
-            keySplines='.27,.42,.37,.99;.53,0,.61,.73'
-          />
-        </circle>
-        <circle cx='19.79' cy='16.50' r='1'>
-          <animate
-            id='spinner_BfTD'
-            begin='spinner_5L9t.begin+0.1s'
-            attributeName='r'
-            calcMode='spline'
-            dur='0.6s'
-            values='1;2;1'
-            keySplines='.27,.42,.37,.99;.53,0,.61,.73'
-          />
-        </circle>
-        <circle cx='4.21' cy='16.50' r='1'>
-          <animate
-            id='spinner_ld6P'
-            begin='spinner_XyBs.begin+0.1s'
-            attributeName='r'
-            calcMode='spline'
-            dur='0.6s'
-            values='1;2;1'
-            keySplines='.27,.42,.37,.99;.53,0,.61,.73'
-          />
-        </circle>
-        <circle cx='16.50' cy='19.79' r='1'>
-          <animate
-            id='spinner_7gAK'
-            begin='spinner_BfTD.begin+0.1s'
-            attributeName='r'
-            calcMode='spline'
-            dur='0.6s'
-            values='1;2;1'
-            keySplines='.27,.42,.37,.99;.53,0,.61,.73'
-          />
-        </circle>
-        <circle cx='7.50' cy='19.79' r='1'>
-          <animate
-            id='spinner_XyBs'
-            begin='spinner_HiSl.begin+0.1s'
-            attributeName='r'
-            calcMode='spline'
-            dur='0.6s'
-            values='1;2;1'
-            keySplines='.27,.42,.37,.99;.53,0,.61,.73'
-          />
-        </circle>
-        <circle cx='12' cy='21' r='1'>
-          <animate
-            id='spinner_HiSl'
-            begin='spinner_7gAK.begin+0.1s'
-            attributeName='r'
-            calcMode='spline'
-            dur='0.6s'
-            values='1;2;1'
-            keySplines='.27,.42,.37,.99;.53,0,.61,.73'
-          />
-        </circle>
-        <animateTransform
-          attributeName='transform'
-          type='rotate'
-          dur='6s'
-          values='360 12 12;0 12 12'
-          repeatCount='indefinite'
-        />
-      </g>
-    </svg>
-  );
-};

package/src/components/loaders/icons/spinner-3.tsx

@@ -1,35 +0,0 @@
-export const Spinner3 = () => {
-  return (
-    <svg stroke='currentColor' width='1em' height='1em' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
-      <g>
-        <circle cx='12' cy='12' r='9.5' fill='none' strokeWidth='3' strokeLinecap='round'>
-          <animate
-            attributeName='stroke-dasharray'
-            dur='1.5s'
-            calcMode='spline'
-            values='0 150;42 150;42 150;42 150'
-            keyTimes='0;0.475;0.95;1'
-            keySplines='0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1'
-            repeatCount='indefinite'
-          />
-          <animate
-            attributeName='stroke-dashoffset'
-            dur='1.5s'
-            calcMode='spline'
-            values='0;-16;-59;-59'
-            keyTimes='0;0.475;0.95;1'
-            keySplines='0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1'
-            repeatCount='indefinite'
-          />
-        </circle>
-        <animateTransform
-          attributeName='transform'
-          type='rotate'
-          dur='2s'
-          values='0 12 12;360 12 12'
-          repeatCount='indefinite'
-        />
-      </g>
-    </svg>
-  );
-};

package/src/components/loaders/icons/spinner-4.tsx

@@ -1,16 +0,0 @@
-export const Spinner4 = () => {
-  return (
-    <svg fill='currentColor' width='1em' height='1em' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
-      <path d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z' opacity='.25' />
-      <path d='M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z'>
-        <animateTransform
-          attributeName='transform'
-          type='rotate'
-          dur='0.75s'
-          values='0 12 12;360 12 12'
-          repeatCount='indefinite'
-        />
-      </path>
-    </svg>
-  );
-};

package/src/components/loaders/index.ts

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

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

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

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

@@ -1,42 +0,0 @@
-import { Grid } from '../../../layouts';
-
-import { LoaderIcons, SimpleLoader } from './simple-loader';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-const meta: Meta<typeof SimpleLoader> = {
-  title: 'SimpleLoader',
-  component: SimpleLoader,
-  argTypes: {
-    icon: {
-      control: {
-        type: 'radio',
-        options: Object.values(LoaderIcons),
-      },
-    },
-  },
-  args: {},
-};
-
-export default meta;
-type Story = StoryObj<typeof SimpleLoader>;
-
-export const Default: Story = {
-  args: {},
-};
-
-export const All: Story = {
-  argTypes: {
-    icon: { control: false },
-  },
-  parameters: {
-    layout: 'padded',
-  },
-  render: args => (
-    <Grid gtc='repeat(auto-fit, 100px)' gtr='auto auto' pc='center' gap='3em'>
-      {Object.values(LoaderIcons).map(icon => (
-        <SimpleLoader key={icon} {...args} icon={icon} />
-      ))}
-    </Grid>
-  ),
-};

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

@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-
-export const SimpleLoaderStyle = styled.section`
-  width: 100%;
-  height: 100%;
-  display: grid;
-  place-content: center;
-
-  svg {
-    font-size: 3em;
-  }
-`;

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

@@ -1,99 +0,0 @@
-import { useMemo } from 'react';
-
-import { Box1 } from '../icons/box-1';
-import { Box2 } from '../icons/box-2';
-import { Box3 } from '../icons/box-3';
-import { Clock1 } from '../icons/clock-1';
-import { Clock2 } from '../icons/clock-2';
-import { Dots1 } from '../icons/dots-1';
-import { Dots2 } from '../icons/dots-2';
-import { Dots3 } from '../icons/dots-3';
-import { Dots4 } from '../icons/dots-4';
-import { Dots5 } from '../icons/dots-5';
-import { Dots6 } from '../icons/dots-6';
-import { Dots7 } from '../icons/dots-7';
-import { Dots8 } from '../icons/dots-8';
-import { Dots9 } from '../icons/dots-9';
-import { Lines1 } from '../icons/lines-1';
-import { Lines2 } from '../icons/lines-2';
-import { Pulse1 } from '../icons/pulse-1';
-import { Pulse2 } from '../icons/pulse-2';
-import { Pulse3 } from '../icons/pulse-3';
-import { Pulse4 } from '../icons/pulse-4';
-import { Pulse5 } from '../icons/pulse-5';
-import { Spinner1 } from '../icons/spinner-1';
-import { Spinner2 } from '../icons/spinner-2';
-import { Spinner3 } from '../icons/spinner-3';
-import { Spinner4 } from '../icons/spinner-4';
-
-import { SimpleLoaderStyle } from './simple-loader.style';
-
-export enum LoaderIcons {
-  BOX_1 = 'box-1',
-  BOX_2 = 'box-2',
-  BOX_3 = 'box-3',
-  CLOCK_1 = 'clock-1',
-  CLOCK_2 = 'clock-2',
-  DOTS_1 = 'dots-1',
-  DOTS_2 = 'dots-2',
-  DOTS_3 = 'dots-3',
-  DOTS_4 = 'dots-4',
-  DOTS_5 = 'dots-5',
-  DOTS_6 = 'dots-6',
-  DOTS_7 = 'dots-7',
-  DOTS_8 = 'dots-8',
-  DOTS_9 = 'dots-9',
-  LINES_1 = 'lines-1',
-  LINES_2 = 'lines-2',
-  PULSE_1 = 'pulse-1',
-  PULSE_2 = 'pulse-2',
-  PULSE_3 = 'pulse-3',
-  PULSE_4 = 'pulse-4',
-  PULSE_5 = 'pulse-5',
-  SPINNER_1 = 'spinner-1',
-  SPINNER_2 = 'spinner-2',
-  SPINNER_3 = 'spinner-3',
-  SPINNER_4 = 'spinner-4',
-}
-
-const LoaderIconsMap: Record<LoaderIcons, React.FC> = {
-  [LoaderIcons.BOX_1]: Box1,
-  [LoaderIcons.BOX_2]: Box2,
-  [LoaderIcons.BOX_3]: Box3,
-  [LoaderIcons.CLOCK_1]: Clock1,
-  [LoaderIcons.CLOCK_2]: Clock2,
-  [LoaderIcons.DOTS_1]: Dots1,
-  [LoaderIcons.DOTS_2]: Dots2,
-  [LoaderIcons.DOTS_3]: Dots3,
-  [LoaderIcons.DOTS_4]: Dots4,
-  [LoaderIcons.DOTS_5]: Dots5,
-  [LoaderIcons.DOTS_6]: Dots6,
-  [LoaderIcons.DOTS_7]: Dots7,
-  [LoaderIcons.DOTS_8]: Dots8,
-  [LoaderIcons.DOTS_9]: Dots9,
-  [LoaderIcons.LINES_1]: Lines1,
-  [LoaderIcons.LINES_2]: Lines2,
-  [LoaderIcons.PULSE_1]: Pulse1,
-  [LoaderIcons.PULSE_2]: Pulse2,
-  [LoaderIcons.PULSE_3]: Pulse3,
-  [LoaderIcons.PULSE_4]: Pulse4,
-  [LoaderIcons.PULSE_5]: Pulse5,
-  [LoaderIcons.SPINNER_1]: Spinner1,
-  [LoaderIcons.SPINNER_2]: Spinner2,
-  [LoaderIcons.SPINNER_3]: Spinner3,
-  [LoaderIcons.SPINNER_4]: Spinner4,
-};
-
-type SimpleLoaderProps = {
-  icon?: `${LoaderIcons}`;
-};
-
-export const SimpleLoader = ({ icon = LoaderIcons.SPINNER_1 }: SimpleLoaderProps) => {
-  const iconRendered = useMemo(() => {
-    const Icon = LoaderIconsMap[icon] ?? Spinner1;
-
-    return <Icon />;
-  }, [icon]);
-
-  return <SimpleLoaderStyle>{iconRendered}</SimpleLoaderStyle>;
-};

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

@@ -1,157 +0,0 @@
-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: {
-    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, { args }) => {
-      const [isOpen, setIsOpen] = useState(false);
-
-      return (
-        <>
-          <Button onClick={() => setIsOpen(true)}>Open modal</Button>
-          <Story args={{ ...args, isOpen, onClose: () => setIsOpen(false) }} />
-        </>
-      );
-    },
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof ActionModal>;
-
-export const Classic: Story = {
-  argTypes: {
-    children: { control: false },
-  },
-  args: {
-    lineOnTop: true,
-    noPadding: true,
-  },
-  render: args => {
-    return (
-      <ActionModal {...args}>
-        <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'
-          columnSize='80px'
-          ji='center'
-          flow='column'
-          jc='end'
-          gap='1em'
-          style={{ padding: '0 1rem 1rem' }}
-        >
-          <ActionModal.ActionButton
-            size='small'
-            width='full'
-            variant='ghost'
-            onClick={() =>
-              new Promise(resolve => {
-                setTimeout(resolve, 2000);
-              })
-            }
-          >
-            No
-          </ActionModal.ActionButton>
-          <ActionModal.ActionButton
-            size='small'
-            width='full'
-            color='primary'
-            onClick={() =>
-              new Promise(resolve => {
-                setTimeout(resolve, 2000);
-              })
-            }
-          >
-            Yes
-          </ActionModal.ActionButton>
-        </Grid>
-      </ActionModal>
-    );
-  },
-};
-
-export const Confirmation: Story = {
-  argTypes: {
-    children: { control: false },
-  },
-  args: {
-    backCard: true,
-    lineOnTop: true,
-    icon: 'user',
-  },
-  render: args => {
-    return (
-      <ActionModal {...args}>
-        <Typography variant='header4' align='center' noPadding>
-          Action modal
-        </Typography>
-        <Typography>Are you sure want to execute an action?</Typography>
-        <Grid
-          ai='center'
-          columnSize='minmax(100px, 1fr)'
-          ji='center'
-          flow='column'
-          jc='center'
-          gap='1em'
-          style={{ margin: 'auto' }}
-        >
-          <ActionModal.ActionButton
-            size='small'
-            width='full'
-            variant='ghost'
-            onClick={() =>
-              new Promise(resolve => {
-                setTimeout(resolve, 2000);
-              })
-            }
-          >
-            No
-          </ActionModal.ActionButton>
-          <ActionModal.ActionButton
-            size='small'
-            width='full'
-            color='primary'
-            onClick={() =>
-              new Promise(resolve => {
-                setTimeout(resolve, 2000);
-              })
-            }
-          >
-            Yes
-          </ActionModal.ActionButton>
-        </Grid>
-      </ActionModal>
-    );
-  },
-};