refactor(components): rewrite form components

5 files changed, 203 insertions, 0 deletions

diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.fixture.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.fixture.tsx
new file mode 100644
index 0000000..04602f2
--- /dev/null
+++ b/src/components/organisms/forms/ackee-toggle/ackee-toggle.fixture.tsx
@@ -0,0 +1 @@
+export const storageKey = 'ackee';
diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx
new file mode 100644
index 0000000..b5f8ef8
--- /dev/null
+++ b/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx
@@ -0,0 +1,47 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { AckeeToggle } from './ackee-toggle';
+import { storageKey } from './ackee-toggle.fixture';
+
+/**
+ * AckeeToggle - Storybook Meta
+ */
+export default {
+  title: 'Organisms/Forms/Toggle',
+  component: AckeeToggle,
+  argTypes: {
+    defaultValue: {
+      control: {
+        type: 'select',
+      },
+      description: 'Set the default value.',
+      options: ['full', 'partial'],
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    storageKey: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set local storage key.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof AckeeToggle>;
+
+const Template: ComponentStory<typeof AckeeToggle> = (args) => (
+  <AckeeToggle {...args} />
+);
+
+/**
+ * Toggle Stories - Ackee
+ */
+export const Ackee = Template.bind({});
+Ackee.args = {
+  defaultValue: 'full',
+  storageKey,
+};
diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx
new file mode 100644
index 0000000..7784d5f
--- /dev/null
+++ b/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx
@@ -0,0 +1,15 @@
+import { render, screen } from '../../../../../tests/utils';
+import { AckeeToggle } from './ackee-toggle';
+import { storageKey } from './ackee-toggle.fixture';
+
+describe('AckeeToggle', () => {
+  // toHaveValue received undefined. Maybe because of localStorage hook...
+  it('renders a toggle component', () => {
+    render(<AckeeToggle storageKey={storageKey} defaultValue="full" />);
+    expect(
+      screen.getByRole('radiogroup', {
+        name: /Tracking:/i,
+      })
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx
new file mode 100644
index 0000000..681d384
--- /dev/null
+++ b/src/components/organisms/forms/ackee-toggle/ackee-toggle.tsx
@@ -0,0 +1,139 @@
+import { ChangeEvent, FC, useState } from 'react';
+import { useIntl } from 'react-intl';
+import {
+  type AckeeOptions,
+  useLocalStorage,
+  useUpdateAckeeOptions,
+} from '../../../../utils/hooks';
+import { Legend, List } from '../../../atoms';
+import {
+  Switch,
+  SwitchOption,
+  SwitchProps,
+  Tooltip,
+  TooltipProps,
+} from '../../../molecules';
+
+export type AckeeToggleProps = Omit<
+  SwitchProps,
+  'isInline' | 'items' | 'name' | 'onSwitch' | 'value'
+> &
+  Pick<TooltipProps, 'direction'> & {
+    /**
+     * Set additional classnames to the toggle wrapper.
+     */
+    className?: string;
+    /**
+     * True if motion should be reduced by default.
+     */
+    defaultValue: AckeeOptions;
+    /**
+     * The local storage key to save preference.
+     */
+    storageKey: string;
+  };
+
+/**
+ * AckeeToggle component
+ *
+ * Render a Toggle component to set reduce motion.
+ */
+export const AckeeToggle: FC<AckeeToggleProps> = ({
+  defaultValue,
+  direction,
+  storageKey,
+  ...props
+}) => {
+  const intl = useIntl();
+  const { value, setValue } = useLocalStorage<AckeeOptions>(
+    storageKey,
+    defaultValue
+  );
+  const [isTooltipOpened, setIsTooltipOpened] = useState(false);
+
+  useUpdateAckeeOptions(value);
+
+  const ackeeLabel = intl.formatMessage({
+    defaultMessage: 'Tracking:',
+    description: 'AckeeToggle: select label',
+    id: '0gVlI3',
+  });
+  const partialLabel = intl.formatMessage({
+    defaultMessage: 'Partial',
+    description: 'AckeeToggle: partial option name',
+    id: 'tIZYpD',
+  });
+  const fullLabel = intl.formatMessage({
+    defaultMessage: 'Full',
+    description: 'AckeeToggle: full option name',
+    id: '5eD6y2',
+  });
+  const tooltipTitle = intl.formatMessage({
+    defaultMessage: 'Ackee tracking (analytics)',
+    description: 'AckeeToggle: tooltip title',
+    id: 'nGss/j',
+  });
+  const tooltipPartial = intl.formatMessage({
+    defaultMessage: 'Partial includes only page url, views and duration.',
+    description: 'AckeeToggle: tooltip message',
+    id: 'ZB/Aw2',
+  });
+  const tooltipFull = intl.formatMessage({
+    defaultMessage:
+      'Full includes all information from partial as well as information about referrer, operating system, device, browser, screen size and language.',
+    description: 'AckeeToggle: tooltip message',
+    id: '7zDlQo',
+  });
+
+  const options: [SwitchOption, SwitchOption] = [
+    {
+      id: 'ackee-full',
+      label: fullLabel,
+      value: 'full',
+    },
+    {
+      id: 'ackee-partial',
+      label: partialLabel,
+      value: 'partial',
+    },
+  ];
+
+  const updateSetting = (e: ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value === 'full' ? 'full' : 'partial');
+  };
+
+  const closeTooltip = () => {
+    setIsTooltipOpened(false);
+  };
+  const toggleTooltip = () => {
+    setIsTooltipOpened((prev) => !prev);
+  };
+
+  return (
+    <Switch
+      {...props}
+      isInline
+      items={options}
+      legend={<Legend>{ackeeLabel}</Legend>}
+      name="ackee"
+      onSwitch={updateSetting}
+      tooltip={
+        <Tooltip
+          direction={direction}
+          heading={tooltipTitle}
+          isOpen={isTooltipOpened}
+          onClickOutside={closeTooltip}
+          onToggle={toggleTooltip}
+        >
+          <List
+            items={[
+              { id: 'partial', value: tooltipPartial },
+              { id: 'full', value: tooltipFull },
+            ]}
+          />
+        </Tooltip>
+      }
+      value={value}
+    />
+  );
+};
diff --git a/src/components/organisms/forms/ackee-toggle/index.ts b/src/components/organisms/forms/ackee-toggle/index.ts
new file mode 100644
index 0000000..7f6313c
--- /dev/null
+++ b/src/components/organisms/forms/ackee-toggle/index.ts
@@ -0,0 +1 @@
+export * from './ackee-toggle';