feat: onboarding ui flow (#464)

* feat: onboarding ui flow * fix: route naming and auth * fix: clean unused imports * fix: remove react.fc * fix: infra dev remove package.json * fix: remove usefull memoization * fix: button stories * fix: use type instead of interface * fix: remove debug
2023-06-30 08:26:06 +02:00
parent 3731380ce6
commit 433962321a
45 changed files with 1461 additions and 401 deletions
@@ -0,0 +1,152 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import { rgba } from '@/ui/themes/colors';
+
+type Variant =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'tertiaryBold'
+  | 'tertiaryLight'
+  | 'danger';
+
+type Size = 'medium' | 'small';
+
+type Props = {
+  icon?: React.ReactNode;
+  title: string;
+  fullWidth?: boolean;
+  variant?: Variant;
+  size?: Size;
+} & React.ComponentProps<'button'>;
+
+const StyledButton = styled.button<
+  Pick<Props, 'fullWidth' | 'variant' | 'size'>
+>`
+  align-items: center;
+  background: ${({ theme, variant, disabled }) => {
+    switch (variant) {
+      case 'primary':
+        if (disabled) {
+          return rgba(theme.color.blue, 0.4);
+        } else {
+          return theme.color.blue;
+        }
+      default:
+        return theme.background.primary;
+    }
+  }};
+  border: ${({ theme, variant }) => {
+    switch (variant) {
+      case 'primary':
+      case 'secondary':
+        return `1px solid ${theme.background.transparent.medium}`;
+      case 'tertiary':
+      default:
+        return 'none';
+    }
+  }};
+  border-radius: 4px;
+  box-shadow: ${({ theme, variant }) => {
+    switch (variant) {
+      case 'primary':
+      case 'secondary':
+        return theme.boxShadow.extraLight;
+      default:
+        return 'none';
+    }
+  }};
+  color: ${({ theme, variant, disabled }) => {
+    if (disabled) {
+      if (variant === 'primary') {
+        return theme.color.gray0;
+      } else {
+        return theme.font.color.extraLight;
+      }
+    }
+
+    switch (variant) {
+      case 'primary':
+        return theme.color.gray0;
+      case 'tertiaryLight':
+        return theme.font.color.tertiary;
+      case 'danger':
+        return theme.color.red;
+      default:
+        return theme.font.color.secondary;
+    }
+  }};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  display: flex;
+  flex-direction: row;
+  font-family: ${({ theme }) => theme.font.family};
+  font-weight: ${({ theme, variant }) => {
+    switch (variant) {
+      case 'tertiary':
+      case 'tertiaryLight':
+        return theme.font.weight.regular;
+      default:
+        return theme.font.weight.medium;
+    }
+  }};
+  gap: ${({ theme }) => theme.spacing(2)};
+  height: ${({ size }) => (size === 'small' ? '24px' : '32px')};
+  justify-content: flex-start;
+  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
+
+  transition: background 0.1s ease;
+
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+
+  &:hover,
+  &:active {
+    ${({ theme, variant, disabled }) => {
+      if (disabled) {
+        return '';
+      }
+
+      switch (variant) {
+        case 'primary':
+          return `background: linear-gradient(0deg, ${theme.background.transparent.medium} 0%, ${theme.background.transparent.medium} 100%), ${theme.color.blue}`;
+        default:
+          return `background: ${theme.background.tertiary}`;
+      }
+    }};
+  }
+
+  &:focus {
+    outline: none;
+    ${({ theme, variant }) => {
+      switch (variant) {
+        case 'tertiaryLight':
+        case 'tertiaryBold':
+        case 'tertiary':
+          return `color: ${theme.color.blue};`;
+        default:
+          return '';
+      }
+    }};
+  }
+`;
+
+export function Button({
+  icon,
+  title,
+  fullWidth = false,
+  variant = 'primary',
+  size = 'medium',
+  ...props
+}: Props) {
+  return (
+    <StyledButton
+      fullWidth={fullWidth}
+      variant={variant}
+      size={size}
+      {...props}
+    >
+      {icon}
+      {title}
+    </StyledButton>
+  );
+}
@@ -0,0 +1,87 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+type Variant = 'primary' | 'secondary';
+
+type Props = {
+  icon?: React.ReactNode;
+  title: string;
+  fullWidth?: boolean;
+  variant?: Variant;
+} & React.ComponentProps<'button'>;
+
+const StyledButton = styled.button<Pick<Props, 'fullWidth' | 'variant'>>`
+  align-items: center;
+  background: ${({ theme, variant, disabled }) => {
+    if (disabled) {
+      return theme.background.tertiary;
+    }
+
+    switch (variant) {
+      case 'primary':
+        return `radial-gradient(
+          50% 62.62% at 50% 0%,
+          ${theme.font.color.secondary} 0%,
+          ${theme.font.color.primary} 100%
+        )`;
+      case 'secondary':
+        return theme.background.primary;
+      default:
+        return theme.background.primary;
+    }
+  }};
+  border: 1px solid ${({ theme }) => theme.border.color.light};
+  border-radius: 8px;
+  box-shadow: ${({ theme }) => theme.boxShadow.light};
+  color: ${({ theme, variant, disabled }) => {
+    if (disabled) {
+      return theme.font.color.extraLight;
+    }
+
+    switch (variant) {
+      case 'primary':
+        return theme.font.color.inverted;
+      case 'secondary':
+        return theme.font.color.primary;
+      default:
+        return theme.font.color.primary;
+    }
+  }};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  display: flex;
+  flex-direction: row;
+  font-family: ${({ theme }) => theme.font.family};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  gap: ${({ theme }) => theme.spacing(2)};
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+
+  ${({ theme, variant }) => {
+    switch (variant) {
+      case 'secondary':
+        return `
+          &:hover {
+            background: ${theme.background.tertiary};
+          }
+        `;
+      default:
+        return '';
+    }
+  }};
+`;
+
+export function MainButton({
+  icon,
+  title,
+  fullWidth = false,
+  variant = 'primary',
+  ...props
+}: Props) {
+  return (
+    <StyledButton fullWidth={fullWidth} variant={variant} {...props}>
+      {icon}
+      {title}
+    </StyledButton>
+  );
+}
@@ -1,42 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-
-type OwnProps = {
-  children: React.ReactNode;
-  fullWidth?: boolean;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>;
-
-const StyledButton = styled.button<{ fullWidth: boolean }>`
-  align-items: center;
-  background: radial-gradient(
-    50% 62.62% at 50% 0%,
-    ${({ theme }) => theme.font.color.secondary} 0%,
-    ${({ theme }) => theme.font.color.primary} 100%
-  );
-  border: 1px solid ${({ theme }) => theme.border.color.light};
-  border-radius: 8px;
-  box-shadow: 0px 0px 4px ${({ theme }) => theme.background.transparent.medium}
-      0%,
-    0px 2px 4px ${({ theme }) => theme.background.transparent.light} 0%;
-  color: ${({ theme }) => theme.font.color.inverted};
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  gap: ${({ theme }) => theme.spacing(2)};
-  justify-content: center;
-  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
-  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
-`;
-
-export function PrimaryButton({
-  children,
-  fullWidth,
-  ...props
-}: OwnProps): JSX.Element {
-  return (
-    <StyledButton fullWidth={fullWidth ?? false} {...props}>
-      {children}
-    </StyledButton>
-  );
-}
@@ -1,43 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-
-type OwnProps = {
-  children: React.ReactNode;
-  fullWidth?: boolean;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>;
-
-const StyledButton = styled.button<{ fullWidth: boolean }>`
-  align-items: center;
-  background: ${({ theme }) => theme.background.primary};
-  border: 1px solid ${({ theme }) => theme.border.color.light};
-  border-radius: 8px;
-  box-shadow: 0px 0px 4px ${({ theme }) => theme.background.transparent.medium}
-      0%,
-    0px 2px 4px ${({ theme }) => theme.background.transparent.light} 0%;
-  color: ${({ theme }) => theme.font.color.primary};
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  gap: 8px;
-  justify-content: center;
-  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
-  padding: 8px 32px;
-  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
-
-  &:hover {
-    background: ${({ theme }) => theme.background.tertiary};
-  }
-`;
-
-export function SecondaryButton({
-  children,
-  fullWidth,
-  ...props
-}: OwnProps): JSX.Element {
-  return (
-    <StyledButton fullWidth={fullWidth ?? false} {...props}>
-      {children}
-    </StyledButton>
-  );
-}
@@ -0,0 +1,230 @@
+import styled from '@emotion/styled';
+import { boolean, select, text, withKnobs } from '@storybook/addon-knobs';
+import { expect, jest } from '@storybook/jest';
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { IconSearch } from '@/ui/icons';
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { Button } from '../Button';
+
+type ButtonProps = React.ComponentProps<typeof Button>;
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 800px;
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(4)};
+  }
+`;
+
+const StyledTitle = styled.h1`
+  font-size: ${({ theme }) => theme.font.size.lg};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+  margin-top: ${({ theme }) => theme.spacing(3)};
+`;
+
+const StyledDescription = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+  text-align: center;
+  text-transform: uppercase;
+`;
+
+const StyledLine = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+const StyledButtonContainer = styled.div`
+  border: 1px solid ${({ theme }) => theme.color.gray20};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+const meta: Meta<typeof Button> = {
+  title: 'UI/Buttons/Button',
+  component: Button,
+  decorators: [withKnobs],
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+const clickJestFn = jest.fn();
+
+const variants: ButtonProps['variant'][] = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'tertiaryBold',
+  'tertiaryLight',
+  'danger',
+];
+
+const ButtonLine = (props: ButtonProps) => (
+  <>
+    <StyledButtonContainer>
+      <StyledDescription>With icon</StyledDescription>
+      <Button
+        data-testid={`${props.variant}-button-with-icon`}
+        {...props}
+        icon={<IconSearch size={14} />}
+      />
+    </StyledButtonContainer>
+    <StyledButtonContainer>
+      <StyledDescription>Default</StyledDescription>
+      <Button
+        data-testid={`${props.variant}-button-default`}
+        onClick={clickJestFn}
+        {...props}
+      />
+    </StyledButtonContainer>
+    <StyledButtonContainer>
+      <StyledDescription>Hover</StyledDescription>
+      <Button
+        id={`${props.variant}-button-hover`}
+        data-testid={`${props.variant}-button-hover`}
+        {...props}
+      />
+    </StyledButtonContainer>
+    <StyledButtonContainer>
+      <StyledDescription>Pressed</StyledDescription>
+      <Button
+        id={`${props.variant}-button-pressed`}
+        data-testid={`${props.variant}-button-pressed`}
+        {...props}
+      />
+    </StyledButtonContainer>
+    <StyledButtonContainer>
+      <StyledDescription>Disabled</StyledDescription>
+      <Button
+        data-testid={`${props.variant}-button-disabled`}
+        {...props}
+        disabled
+      />
+    </StyledButtonContainer>
+    <StyledButtonContainer>
+      <StyledDescription>Focus</StyledDescription>
+      <Button
+        id={`${props.variant}-button-focus`}
+        data-testid={`${props.variant}-button-focus`}
+        {...props}
+      />
+    </StyledButtonContainer>
+  </>
+);
+
+const ButtonContainer = (props: Partial<ButtonProps>) => {
+  const title = text('Text', 'A button title');
+
+  return (
+    <StyledContainer>
+      {variants.map((variant) => (
+        <div key={variant}>
+          <StyledTitle>{variant}</StyledTitle>
+          <StyledLine>
+            <ButtonLine {...props} title={title} variant={variant} />
+          </StyledLine>
+        </div>
+      ))}
+    </StyledContainer>
+  );
+};
+
+// Medium size
+export const MediumSize: Story = {
+  render: getRenderWrapperForComponent(<ButtonContainer />),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(0);
+
+    const button = canvas.getByTestId('primary-button-default');
+    await userEvent.click(button);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(1);
+  },
+};
+MediumSize.parameters = {
+  pseudo: {
+    hover: [
+      '#primary-button-hover',
+      '#secondary-button-hover',
+      '#tertiary-button-hover',
+      '#tertiaryBold-button-hover',
+      '#tertiaryLight-button-hover',
+      '#danger-button-hover',
+    ],
+    active: [
+      '#primary-button-pressed',
+      '#secondary-button-pressed',
+      '#tertiary-button-pressed',
+      '#tertiaryBold-button-pressed',
+      '#tertiaryLight-button-pressed',
+      '#danger-button-pressed',
+    ],
+    focus: [
+      '#primary-button-focus',
+      '#secondary-button-focus',
+      '#tertiary-button-focus',
+      '#tertiaryBold-button-focus',
+      '#tertiaryLight-button-focus',
+      '#danger-button-focus',
+    ],
+  },
+};
+
+// Small size
+export const SmallSize: Story = {
+  render: getRenderWrapperForComponent(<ButtonContainer size="small" />),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(0);
+
+    const button = canvas.getByTestId('primary-button-default');
+    await userEvent.click(button);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(1);
+  },
+};
+SmallSize.parameters = {
+  pseudo: {
+    hover: [
+      '#primary-button-hover',
+      '#secondary-button-hover',
+      '#tertiary-button-hover',
+      '#tertiaryBold-button-hover',
+      '#tertiaryLight-button-hover',
+      '#danger-button-hover',
+    ],
+    active: [
+      '#primary-button-pressed',
+      '#secondary-button-pressed',
+      '#tertiary-button-pressed',
+      '#tertiaryBold-button-pressed',
+      '#tertiaryLight-button-pressed',
+      '#danger-button-pressed',
+    ],
+    focus: [
+      '#primary-button-focus',
+      '#secondary-button-focus',
+      '#tertiary-button-focus',
+      '#tertiaryBold-button-focus',
+      '#tertiaryLight-button-focus',
+      '#danger-button-focus',
+    ],
+  },
+};
@@ -0,0 +1,104 @@
+import { expect, jest } from '@storybook/jest';
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { IconBrandGoogle } from '@/ui/icons';
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { MainButton } from '../MainButton';
+
+const meta: Meta<typeof MainButton> = {
+  title: 'UI/Buttons/MainButton',
+  component: MainButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof MainButton>;
+
+const clickJestFn = jest.fn();
+
+export const DefaultPrimary: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton title="A primary Button" onClick={clickJestFn} />,
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(0);
+    const button = canvas.getByRole('button');
+    await userEvent.click(button);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(1);
+  },
+};
+
+export const WithIconPrimary: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton
+      icon={<IconBrandGoogle size={16} stroke={4} />}
+      title="A primary Button"
+    />,
+  ),
+};
+
+export const WithIconPrimaryDisabled: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton
+      icon={<IconBrandGoogle size={16} stroke={4} />}
+      title="A primary Button"
+      disabled
+    />,
+  ),
+};
+
+export const FullWidthPrimary: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton title="A primary Button" fullWidth />,
+  ),
+};
+
+export const DefaultSecondary: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton
+      title="A secondary Button"
+      onClick={clickJestFn}
+      variant="secondary"
+    />,
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(0);
+    const button = canvas.getByRole('button');
+    await userEvent.click(button);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(1);
+  },
+};
+
+export const WithIconSecondary: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton
+      icon={<IconBrandGoogle size={16} stroke={4} />}
+      title="A secondary Button"
+      variant="secondary"
+    />,
+  ),
+};
+
+export const WithIconSecondaryDisabled: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton
+      icon={<IconBrandGoogle size={16} stroke={4} />}
+      title="A secondary Button"
+      variant="secondary"
+      disabled
+    />,
+  ),
+};
+
+export const FullWidthSecondary: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton title="A secondary Button" variant="secondary" fullWidth />,
+  ),
+};
@@ -1,47 +0,0 @@
-import { expect, jest } from '@storybook/jest';
-import type { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
-
-import { IconBrandGoogle } from '@/ui/icons';
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
-
-import { PrimaryButton } from '../PrimaryButton';
-
-const meta: Meta<typeof PrimaryButton> = {
-  title: 'UI/Buttons/PrimaryButton',
-  component: PrimaryButton,
-};
-
-export default meta;
-type Story = StoryObj<typeof PrimaryButton>;
-
-const clickJestFn = jest.fn();
-
-export const Default: Story = {
-  render: getRenderWrapperForComponent(
-    <PrimaryButton onClick={clickJestFn}>A Primary Button</PrimaryButton>,
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    expect(clickJestFn).toHaveBeenCalledTimes(0);
-    const button = canvas.getByRole('button');
-    await userEvent.click(button);
-
-    expect(clickJestFn).toHaveBeenCalledTimes(1);
-  },
-};
-
-export const WithIcon: Story = {
-  render: getRenderWrapperForComponent(
-    <PrimaryButton>
-      <IconBrandGoogle size={16} stroke={4} />A Primary Button
-    </PrimaryButton>,
-  ),
-};
-
-export const FullWidth: Story = {
-  render: getRenderWrapperForComponent(
-    <PrimaryButton fullWidth={true}>A Primary Button</PrimaryButton>,
-  ),
-};
@@ -1,47 +0,0 @@
-import { expect, jest } from '@storybook/jest';
-import type { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
-
-import { IconBrandGoogle } from '@/ui/icons';
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
-
-import { SecondaryButton } from '../SecondaryButton';
-
-const meta: Meta<typeof SecondaryButton> = {
-  title: 'UI/Buttons/SecondaryButton',
-  component: SecondaryButton,
-};
-
-export default meta;
-type Story = StoryObj<typeof SecondaryButton>;
-
-const clickJestFn = jest.fn();
-
-export const Default: Story = {
-  render: getRenderWrapperForComponent(
-    <SecondaryButton onClick={clickJestFn}>A Primary Button</SecondaryButton>,
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    expect(clickJestFn).toHaveBeenCalledTimes(0);
-    const button = canvas.getByRole('button');
-    await userEvent.click(button);
-
-    expect(clickJestFn).toHaveBeenCalledTimes(1);
-  },
-};
-
-export const WithIcon: Story = {
-  render: getRenderWrapperForComponent(
-    <SecondaryButton>
-      <IconBrandGoogle size={16} stroke={4} />A Primary Button
-    </SecondaryButton>,
-  ),
-};
-
-export const FullWidth: Story = {
-  render: getRenderWrapperForComponent(
-    <SecondaryButton fullWidth={true}>A Primary Button</SecondaryButton>,
-  ),
-};