refactor(components): rewrite form components

10 files changed, 0 insertions, 459 deletions

diff --git a/src/components/molecules/modals/index.ts b/src/components/molecules/modals/index.ts
deleted file mode 100644
index 595be13..0000000
--- a/src/components/molecules/modals/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './modal';
-export * from './tooltip';
diff --git a/src/components/molecules/modals/modal.module.scss b/src/components/molecules/modals/modal.module.scss
deleted file mode 100644
index 22ddb11..0000000
--- a/src/components/molecules/modals/modal.module.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-@use "../../../styles/abstracts/mixins" as mix;
-
-.wrapper {
-  padding: var(--spacing-md);
-  background: var(--color-bg-secondary);
-  border: fun.convert-px(4) solid;
-  border-image: radial-gradient(
-      ellipse at top,
-      var(--color-primary-lighter) 20%,
-      var(--color-primary) 100%
-    )
-    1;
-  box-shadow: fun.convert-px(2) fun.convert-px(-2) fun.convert-px(3)
-    fun.convert-px(-1) var(--color-shadow-dark);
-
-  @include mix.media("screen") {
-    @include mix.dimensions(null, "sm") {
-      padding: var(--spacing-xs);
-      border-left: none;
-      border-right: none;
-
-      .title {
-        margin-bottom: var(--spacing-2xs);
-      }
-    }
-  }
-}
-
-.icon {
-  --icon-size: #{fun.convert-px(30)};
-
-  margin-right: var(--spacing-2xs);
-}
diff --git a/src/components/molecules/modals/modal.stories.tsx b/src/components/molecules/modals/modal.stories.tsx
deleted file mode 100644
index 36e6bfc..0000000
--- a/src/components/molecules/modals/modal.stories.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Modal } from './modal';
-
-/**
- * Widget - Storybook Meta
- */
-export default {
-  title: 'Molecules/Modals/Modal',
-  component: Modal,
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The modal body.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the modal.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    headingClassName: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the modal heading.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    icon: {
-      control: {
-        type: 'select',
-      },
-      description: 'The title icon.',
-      options: ['', 'cogs', 'search'],
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    title: {
-      control: {
-        type: 'text',
-      },
-      description: 'The modal title.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof Modal>;
-
-const Template: ComponentStory<typeof Modal> = (args) => <Modal {...args} />;
-
-/**
- * Modal Stories - Default
- */
-export const Default = Template.bind({});
-Default.args = {
-  children:
-    'Inventore natus dignissimos aut illum modi asperiores. Et voluptatibus delectus.',
-};
-
-/**
- * Modal Stories - With title
- */
-export const WithTitle = Template.bind({});
-WithTitle.args = {
-  children:
-    'Inventore natus dignissimos aut illum modi asperiores. Et voluptatibus delectus.',
-  title: 'Alias praesentium corporis',
-};
diff --git a/src/components/molecules/modals/modal.test.tsx b/src/components/molecules/modals/modal.test.tsx
deleted file mode 100644
index 5d55b3d..0000000
--- a/src/components/molecules/modals/modal.test.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { render, screen } from '../../../../tests/utils';
-import { Modal } from './modal';
-
-const title = 'A custom title';
-const children =
-  'Labore ullam delectus sit modi quam dolores. Ratione id sint aliquid facilis ipsum. Unde necessitatibus provident minus.';
-
-describe('Modal', () => {
-  it('renders a title', () => {
-    render(<Modal title={title}>{children}</Modal>);
-    expect(screen.getByText(title)).toBeInTheDocument();
-  });
-
-  it('renders the modal body', () => {
-    render(<Modal title={title}>{children}</Modal>);
-    expect(screen.getByText(children)).toBeInTheDocument();
-  });
-});
diff --git a/src/components/molecules/modals/modal.tsx b/src/components/molecules/modals/modal.tsx
deleted file mode 100644
index 344d5b9..0000000
--- a/src/components/molecules/modals/modal.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import dynamic from 'next/dynamic';
-import { FC, ReactNode } from 'react';
-import {
-  type CogProps,
-  Heading,
-  type HeadingProps,
-  type MagnifyingGlassProps,
-} from '../../atoms';
-import styles from './modal.module.scss';
-
-export type Icons = 'cogs' | 'search';
-
-export type ModalProps = {
-  /**
-   * The modal body.
-   */
-  children: ReactNode;
-  /**
-   * Set additional classnames.
-   */
-  className?: string;
-  /**
-   * Set additional classnames to the heading.
-   */
-  headingClassName?: HeadingProps['className'];
-  /**
-   * A icon to illustrate the modal.
-   */
-  icon?: Icons;
-  /**
-   * The modal title.
-   */
-  title?: string;
-};
-
-const CogIcon = dynamic<CogProps>(
-  () => import('../../atoms/icons/cog').then((mod) => mod.Cog),
-  {
-    ssr: false,
-  }
-);
-const SearchIcon = dynamic<MagnifyingGlassProps>(
-  () =>
-    import('../../atoms/icons/magnifying-glass').then(
-      (mod) => mod.MagnifyingGlass
-    ),
-  { ssr: false }
-);
-
-/**
- * Modal component
- *
- * Render a modal component with an optional title and icon.
- */
-export const Modal: FC<ModalProps> = ({
-  children,
-  className = '',
-  headingClassName = '',
-  icon,
-  title,
-}) => {
-  const getIcon = (id: Icons) => {
-    switch (id) {
-      case 'cogs':
-        return <CogIcon />;
-      case 'search':
-        return <SearchIcon />;
-      default:
-        return <></>;
-    }
-  };
-
-  return (
-    <div className={`${styles.wrapper} ${className}`}>
-      {title && (
-        <Heading
-          isFake={true}
-          level={3}
-          className={`${styles.title} ${headingClassName}`}
-        >
-          {icon && <span className={styles.icon}>{getIcon(icon)}</span>}
-          {title}
-        </Heading>
-      )}
-      {children}
-    </div>
-  );
-};
diff --git a/src/components/molecules/modals/tooltip.fixture.tsx b/src/components/molecules/modals/tooltip.fixture.tsx
deleted file mode 100644
index 5489f08..0000000
--- a/src/components/molecules/modals/tooltip.fixture.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-export const title = 'Illum eum at';
-export const content =
-  'Non accusantium ad. Est et impedit iste animi voluptas cum accusamus accusantium. Repellat ut sint pariatur cumque cupiditate. Animi occaecati odio ut debitis ipsam similique. Repudiandae aut earum occaecati consequatur laborum ut nobis iusto. Adipisci laboriosam id.';
-export const icon = '?';
diff --git a/src/components/molecules/modals/tooltip.module.scss b/src/components/molecules/modals/tooltip.module.scss
deleted file mode 100644
index 0a177e5..0000000
--- a/src/components/molecules/modals/tooltip.module.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-
-.wrapper {
-  --title-height: #{fun.convert-px(40)};
-
-  margin-top: calc(var(--title-height) / 2);
-  padding: calc((var(--title-height) / 2) + var(--spacing-sm)) var(--spacing-sm)
-    var(--spacing-sm);
-  position: relative;
-  background: var(--color-bg);
-  border: fun.convert-px(2) solid var(--color-primary-dark);
-  border-radius: fun.convert-px(3);
-  box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow),
-    fun.convert-px(2) fun.convert-px(2) fun.convert-px(1) fun.convert-px(1)
-      var(--color-shadow-light);
-}
-
-.title {
-  display: flex;
-  align-items: center;
-  height: var(--title-height);
-  padding-right: var(--spacing-xs);
-  position: absolute;
-  top: calc(var(--title-height) / -2);
-  left: var(--spacing-xs);
-  background: var(--color-bg);
-  border: fun.convert-px(1) solid var(--color-primary-dark);
-  box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow);
-  color: var(--color-primary-darker);
-  font-size: var(--font-size-sm);
-  font-variant: small-caps;
-  font-weight: 500;
-}
-
-.icon {
-  display: flex;
-  align-items: center;
-  height: var(--title-height);
-  margin-right: var(--spacing-xs);
-  padding: 0 var(--spacing-2xs);
-  background: var(--color-primary-dark);
-  border: fun.convert-px(1) solid var(--color-primary-dark);
-  box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow);
-  color: var(--color-fg-inverted);
-  font-weight: 600;
-}
diff --git a/src/components/molecules/modals/tooltip.stories.tsx b/src/components/molecules/modals/tooltip.stories.tsx
deleted file mode 100644
index abc3526..0000000
--- a/src/components/molecules/modals/tooltip.stories.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Tooltip } from './tooltip';
-import { content, icon, title } from './tooltip.fixture';
-
-/**
- * Tooltip - Storybook Meta
- */
-export default {
-  title: 'Molecules/Modals/Tooltip',
-  component: Tooltip,
-  argTypes: {
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the tooltip.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    cloneClassName: {
-      control: {
-        type: 'text',
-      },
-      description:
-        'Set additional classnames to the tooltip when using cloneElement.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    content: {
-      control: {
-        type: 'text',
-      },
-      description: 'The tooltip body.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    icon: {
-      control: {
-        type: 'text',
-      },
-      description: 'The tooltip icon.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    title: {
-      control: {
-        type: 'text',
-      },
-      description: 'The tooltip title',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof Tooltip>;
-
-const Template: ComponentStory<typeof Tooltip> = (args) => (
-  <Tooltip {...args} />
-);
-
-/**
- * Tooltip Stories - Help
- */
-export const Help = Template.bind({});
-Help.args = {
-  content,
-  icon,
-  title,
-};
diff --git a/src/components/molecules/modals/tooltip.test.tsx b/src/components/molecules/modals/tooltip.test.tsx
deleted file mode 100644
index eb23334..0000000
--- a/src/components/molecules/modals/tooltip.test.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { render, screen } from '../../../../tests/utils';
-import { Tooltip } from './tooltip';
-import { content, icon, title } from './tooltip.fixture';
-
-describe('Tooltip', () => {
-  it('renders a title', () => {
-    render(<Tooltip title={title} content={content} icon={icon} />);
-    expect(screen.getByText(title)).toBeInTheDocument();
-  });
-
-  it('renders an explanation', () => {
-    render(<Tooltip title={title} content={content} icon={icon} />);
-    expect(screen.getByText(content)).toBeInTheDocument();
-  });
-
-  it('renders an icon', () => {
-    render(<Tooltip title={title} content={content} icon={icon} />);
-    expect(screen.getByText(icon)).toBeInTheDocument();
-  });
-});
diff --git a/src/components/molecules/modals/tooltip.tsx b/src/components/molecules/modals/tooltip.tsx
deleted file mode 100644
index 3c8a5df..0000000
--- a/src/components/molecules/modals/tooltip.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { forwardRef, ForwardRefRenderFunction, ReactNode } from 'react';
-import { List, type ListItem } from '../../atoms';
-import styles from './tooltip.module.scss';
-
-export type TooltipProps = {
-  /**
-   * Set additional classnames to the tooltip wrapper.
-   */
-  className?: string;
-  /**
-   * Set more additional classnames to the tooltip wrapper. Required when using React.cloneElement.
-   */
-  cloneClassName?: string;
-  /**
-   * The tooltip body.
-   */
-  content: string | string[];
-  /**
-   * An icon to illustrate tooltip content.
-   */
-  icon: ReactNode;
-  /**
-   * The tooltip title.
-   */
-  title: string;
-};
-
-const TooltipWithRef: ForwardRefRenderFunction<HTMLDivElement, TooltipProps> = (
-  { cloneClassName = '', className = '', content, icon, title },
-  ref
-) => {
-  /**
-   * Format an array of strings to an array of object with id and value.
-   *
-   * @param {string[]} array - An array of strings.
-   * @returns {ListItem[]} The array formatted to be used as list items.
-   */
-  const getListItems = (array: string[]): ListItem[] => {
-    return array.map((string, index) => {
-      return { id: `item-${index}`, value: string };
-    });
-  };
-
-  return (
-    <div
-      className={`${styles.wrapper} ${cloneClassName} ${className}`}
-      ref={ref}
-    >
-      <div className={styles.title}>
-        <span className={styles.icon}>{icon}</span>
-        {title}
-      </div>
-      {Array.isArray(content) ? (
-        <List items={getListItems(content)} />
-      ) : (
-        content
-      )}
-    </div>
-  );
-};
-
-/**
- * Tooltip component
- *
- * Render a tooltip modal.
- */
-export const Tooltip = forwardRef(TooltipWithRef);