Camilo Barraza - Frontend

frontend/.eslintrc.js

@@ -1,107 +1,35 @@
-const tsconfigs = ['./tsconfig.json'];
-
-const ruleOverrides = {
-  '@typescript-eslint/no-redeclare': 0,
-  'arrow-body-style': 0,
-  'canonical/destructuring-property-newline': 0,
-  'canonical/export-specifier-newline': 0,
-  'canonical/filename-match-regex': 0,
-  'canonical/import-specifier-newline': 0,
-  'default-case': 0,
-  'default-case-last': 0,
-  'import/extensions': 0,
-  'jest/prefer-strict-equal': 0,
-  'jsx-a11y/anchor-is-valid': 0,
-  'jsx-a11y/mouse-events-have-key-events': 0,
-  'no-restricted-properties': [
-    2,
-    {
-      message: 'Use fast-safe-stringify',
-      object: 'JSON',
-      property: 'stringify',
-    },
-  ],
-  'no-warning-comments': 0,
-  'prefer-destructuring': 0,
-  'prefer-object-spread': 0,
-  'react/no-unstable-nested-components': 0,
-  'react/prop-types': 0,
-  'require-unicode-regexp': 0,
-  'unicorn/no-array-callback-reference': 0,
-  'unicorn/no-array-for-each': 0,
-  'unicorn/no-array-reduce': 0,
-  'unicorn/no-unsafe-regex': 0,
-};
-
 module.exports = {
-  ignorePatterns: ['sanity/', 'public/'],
-  overrides: [
-    {
-      excludedFiles: '*.test.ts',
-      extends: [
-        'next',
-        'canonical',
-        'canonical/react',
-        'canonical/typescript',
-        'prettier',
-      ],
-      files: '*.ts',
-      parserOptions: {
-        project: tsconfigs,
-      },
-      rules: ruleOverrides,
-    },
-    {
-      extends: [
-        'next',
-        'canonical',
-        'canonical/react',
-        'canonical/jsx-a11y',
-        'canonical/typescript',
-        'prettier',
-      ],
-      files: '*.tsx',
-      parserOptions: {
-        project: tsconfigs,
-      },
-      rules: ruleOverrides,
-    },
-    {
-      extends: [
-        'canonical',
-        'canonical/typescript',
-        'canonical/jest',
-        'prettier',
-      ],
-      files: '*.test.{ts,tsx}',
-      parserOptions: {
-        project: tsconfigs,
-      },
-      rules: ruleOverrides,
-    },
-    {
-      extends: ['next', 'canonical', 'canonical/node', 'prettier'],
-      files: '*.{js,mjs}',
-      parserOptions: {
-        sourceType: 'module',
-      },
-      rules: ruleOverrides,
-    },
-    {
-      extends: ['canonical/json'],
-      files: '*.json',
-      rules: {
-        'jsonc/no-comments': 0,
-      },
-    },
-    {
-      extends: ['canonical/yaml'],
-      files: '*.yaml',
-      rules: {
-        'yml/no-empty-mapping-value': 0,
-        'yml/require-string-key': 0,
-      },
-    },
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
   ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2_021,
+    sourceType: 'module',
+  },
+  plugins: ['react', '@typescript-eslint'],
   root: true,
+  rules: {
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-empty-interface': 'off',
+    'react/prop-types': 'off',
+    'react/react-in-jsx-scope': 'off',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
 };

frontend/next.config.js

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 
 const nextConfig = {
+  compiler: {
+    styledComponents: true,
+  },
   reactStrictMode: true,
 };
 

frontend/package.json

@@ -13,22 +13,29 @@
     "test:ci": "NODE_ENV=test jest --ci --reporters jest-silent-reporter"
   },
   "dependencies": {
+    "@next/font": "^13.3.0",
+    "focus-trap-react": "^10.1.1",
     "next": "12.1.6",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "styled-components": "^5.3.9"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "5.16.0",
+    "@testing-library/react": "^14.0.0",
     "@types/jest": "28.1.3",
     "@types/node": "18.0.0",
     "@types/react": "18.0.14",
     "@types/react-dom": "18.0.5",
+    "@types/styled-components": "^5.1.26",
     "eslint": "8.18.0",
     "eslint-config-canonical": "35.0.1",
     "eslint-config-next": "12.1.6",
     "eslint-config-prettier": "8.5.0",
     "jest": "28.1.1",
+    "jest-environment-jsdom": "^29.5.0",
     "lint-staged": "13.0.3",
     "prettier": "2.7.1",
     "typescript": "4.7.4"
   }
-}
+}

frontend/src/common/Button.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { HTMLButton, ButtonThemeCSSProps, Div } from './utils';
+
+const ButtonTypes = [
+  'primary',
+  'secondaryPrimary',
+  'secondary',
+  'tertiary',
+  'destructive',
+] as const;
+export type ButtonType = typeof ButtonTypes[number];
+
+const isDisabledCss = css`
+  border: none;
+  color: ${(p) => p.theme.colors.black40};
+  background: ${(props) => props.theme.colors.gray3};
+  pointer-events: none;
+`;
+
+type Styles = {
+  [K in ButtonType]?: any;
+};
+const styles: Styles = {
+  primary: css`
+    background: ${(props) => props.theme.colors.navy};
+    color: ${(props) => props.theme.colors.white};
+    :hover {
+      background: ${(props) => props.theme.colors.navy60};
+    }
+    ${(p: any) => p.isDisabled && isDisabledCss}
+  `,
+  secondaryPrimary: css`
+    background: ${(props) => props.theme.colors.white};
+    border: solid 1px ${(props) => props.theme.colors.navy};
+    color: ${(props) => props.theme.colors.navy};
+    :hover {
+      border: solid 1px transparent;
+      background: ${(props) => props.theme.colors.navy60};
+      color: ${(p) => p.theme.colors.white};
+    }
+    ${(p: any) => p.isDisabled && isDisabledCss}
+  `,
+  secondary: css`
+    background: ${(props) => props.theme.colors.white};
+    color: ${(props) => props.theme.colors.black80};
+    border: solid 1px ${(p) => p.theme.colors.black20};
+    :hover {
+      border: solid 1px transparent;
+    }
+    ${(p: any) => p.isDisabled && isDisabledCss}
+  `,
+  tertiary: css`
+    background: transparent;
+    color: ${(props) => props.theme.colors.black60};
+    border: none;
+    ${(p: any) =>
+      p.isDisabled &&
+      css`
+        ${isDisabledCss};
+        background: transparent;
+        color: ${(p) => p.theme.colors.black40};
+      `}
+    :hover {
+      color: ${(p) => p.theme.colors.black80};
+      background: ${(p) => p.theme.colors.gray2};
+      box-shadow: none;
+    }
+  `,
+  destructive: css`
+    background: ${(p) => p.theme.colors.red};
+    color: ${(props) => props.theme.colors.white};
+    ${(p: any) => p.isDisabled && isDisabledCss}
+  `,
+};
+
+type ButtonBaseProps = {
+  variant?: ButtonType;
+  isDisabled?: boolean;
+};
+export const ButtonBase = styled(HTMLButton)<ButtonBaseProps>`
+  height: 44px;
+  border-radius: 4px;
+  border: solid 1px transparent;
+  user-select: none;
+  padding: 10px 12px;
+  :hover {
+    cursor: pointer;
+    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
+  }
+  :focus {
+    /* outline: none; */
+  }
+
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 23px;
+  ${(p) => {
+    const c = p.theme.css;
+    return [c.centered];
+  }};
+
+  ${({ variant }) => styles[variant || 'primary']};
+`;
+
+type BtnProps = {
+  onClick?: () => void;
+  variant?: ButtonType;
+  children: any;
+  icon?: JSX.Element;
+  isDisabled?: boolean;
+} & ButtonThemeCSSProps;
+
+export const Button = ({
+  onClick = () => {},
+  isDisabled = false,
+  icon,
+  variant = 'primary',
+  children,
+  type = 'button',
+  ...props
+}: BtnProps) => {
+  return (
+    <ButtonBase
+      w100
+      alignCenter
+      type={type}
+      tabIndex={0}
+      onKeyDown={({ code }: { code: string }) => {
+        if (code === 'Space' || (code === 'Enter' && onClick)) onClick();
+      }}
+      aria-disabled={isDisabled}
+      aria-label={children}
+      {...{ variant, isDisabled, onClick, ...props }}
+    >
+      {icon && (
+        <Div mr={12} centered>
+          {icon}
+        </Div>
+      )}
+      {children}
+    </ButtonBase>
+  );
+};