Merge branch 'staging' of github.com:jedmund/hensei-web into staging

.eslintrc.json

@@ -1,7 +1,6 @@
 {
   "extends": "next/core-web-vitals",
   "rules": {
-    // Other rules
     "@next/next/no-img-element": "off"
   }
 }

.storybook/main.ts

@@ -0,0 +1,43 @@
+import type { StorybookConfig } from '@storybook/nextjs'
+const path = require('path')
+
+const config: StorybookConfig = {
+  stories: [
+    '../components/**/*.mdx',
+    '../components/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    {
+      name: '@storybook/addon-styling',
+      options: {
+        sass: {
+          // Require your Sass preprocessor here
+          implementation: require('sass'),
+          additionalData: `
+              @import "./styles/variables.scss";
+            `,
+        },
+      },
+    },
+  ],
+  staticDirs: ['../public'],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  webpackFinal: async (config: any, { configType }) => {
+    config.resolve.roots = [
+      path.resolve(__dirname, '../public'),
+      'node_modules',
+    ]
+    config.resolve.fallback.fs = false
+    return config
+  },
+}
+export default config

.storybook/preview.ts

@@ -0,0 +1,17 @@
+import type { Preview } from '@storybook/react'
+
+import '../styles/globals.scss'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+}
+
+export default preview

components/ElementToggle/index.scss

@@ -8,6 +8,12 @@
   height: $height;
   gap: calc($unit / 4);
   padding: calc($unit / 2);
+  flex-wrap: wrap;
+
+  @include breakpoint(phone) {
+    border-radius: $unit-2x;
+    height: auto;
+  }
 
   .ToggleItem {
     background: var(--toggle-bg);
@@ -16,7 +22,14 @@
     color: var(--input-secondary);
     flex-grow: 1;
     font-size: $font-regular;
-    padding: ($unit) $unit * 2;
+    padding-top: $unit;
+    padding-bottom: $unit;
+
+    @include breakpoint(phone) {
+      border-radius: $card-corner;
+      padding-left: $unit-2x;
+      padding-right: $unit-2x;
+    }
 
     &.ja {
       padding-top: 6px;

components/ErrorSection/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import Link from 'next/link'
 import { useTranslation } from 'next-i18next'
 
-import Button from '~components/Button'
+import Button from '~components/common/Button'
 import { ResponseStatus } from '~types'
 
 import './index.scss'

components/FilterBar/index.tsx

@@ -5,9 +5,9 @@ import equals from 'fast-deep-equal'
 
 import FilterModal from '~components/FilterModal'
 import RaidDropdown from '~components/RaidDropdown'
-import Select from '~components/Select'
-import SelectItem from '~components/SelectItem'
-import Button from '~components/Button'
+import Select from '~components/common/Select'
+import SelectItem from '~components/common/SelectItem'
+import Button from '~components/common/Button'
 
 import { defaultFilterset } from '~utils/defaultFilters'
 

components/FilterModal/index.tsx

@@ -8,15 +8,15 @@ import {
   DialogTrigger,
   DialogClose,
   DialogTitle,
-} from '~components/Dialog'
-import DialogContent from '~components/DialogContent'
+} from '~components/common/Dialog'
+import DialogContent from '~components/common/DialogContent'
 
-import Button from '~components/Button'
-import InputTableField from '~components/InputTableField'
-import SelectTableField from '~components/SelectTableField'
-import SliderTableField from '~components/SliderTableField'
-import SwitchTableField from '~components/SwitchTableField'
-import SelectItem from '~components/SelectItem'
+import Button from '~components/common/Button'
+import InputTableField from '~components/common/InputTableField'
+import SelectTableField from '~components/common/SelectTableField'
+import SliderTableField from '~components/common/SliderTableField'
+import SwitchTableField from '~components/common/SwitchTableField'
+import SelectItem from '~components/common/SelectItem'
 
 import type { DialogProps } from '@radix-ui/react-dialog'
 

components/GridRep/index.tsx

@@ -9,7 +9,7 @@ import 'fix-date'
 import { accountState } from '~utils/accountState'
 import { formatTimeAgo } from '~utils/timeAgo'
 
-import Button from '~components/Button'
+import Button from '~components/common/Button'
 
 import SaveIcon from '~public/icons/Save.svg'
 import ShieldIcon from '~public/icons/Shield.svg'

components/Header/index.tsx

@@ -22,13 +22,13 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuLabel,
-} from '~components/DropdownMenuContent'
-import LoginModal from '~components/LoginModal'
-import SignupModal from '~components/SignupModal'
-import AccountModal from '~components/AccountModal'
-import Toast from '~components/Toast'
-import Button from '~components/Button'
-import Tooltip from '~components/Tooltip'
+} from '~components/common/DropdownMenuContent'
+import LoginModal from '~components/auth/LoginModal'
+import SignupModal from '~components/auth/SignupModal'
+import AccountModal from '~components/auth/AccountModal'
+import Toast from '~components/common/Toast'
+import Button from '~components/common/Button'
+import Tooltip from '~components/common/Tooltip'
 import * as Switch from '@radix-ui/react-switch'
 
 import ArrowIcon from '~public/icons/Arrow.svg'

components/Layout/index.tsx

@@ -6,7 +6,7 @@ import { getCookie } from 'cookies-next'
 import { appState } from '~utils/appState'
 
 import TopHeader from '~components/Header'
-import UpdateToast from '~components/UpdateToast'
+import UpdateToast from '~components/about/UpdateToast'
 
 import './index.scss'
 

components/RaidDropdown/index.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 
-import Select from '~components/Select'
-import SelectItem from '~components/SelectItem'
-import SelectGroup from '~components/SelectGroup'
+import Select from '~components/common/Select'
+import SelectItem from '~components/common/SelectItem'
+import SelectGroup from '~components/common/SelectGroup'
 
 import api from '~utils/api'
 import organizeRaids from '~utils/organizeRaids'

components/about/ContentUpdate/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'next-i18next'
-import ChangelogUnit from '~components/ChangelogUnit'
+import ChangelogUnit from '~components/about/ChangelogUnit'
 
 import './index.scss'
 

components/about/UpdateToast/index.tsx

@@ -4,8 +4,8 @@ import { setCookie } from 'cookies-next'
 import { add, format } from 'date-fns'
 import classNames from 'classnames'
 
-import Button from '~components/Button'
-import Toast from '~components/Toast'
+import Button from '~components/common/Button'
+import Toast from '~components/common/Toast'
 
 import './index.scss'
 import { useTranslation } from 'next-i18next'

components/about/UpdatesPage/index.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 
 import { useTranslation } from 'next-i18next'
 
-import ContentUpdate from '~components/ContentUpdate'
-import ChangelogUnit from '~components/ChangelogUnit'
+import ContentUpdate from '~components/about/ContentUpdate'
+import ChangelogUnit from '~components/about/ChangelogUnit'
 
 import './index.scss'
 

components/auth/AccountModal/index.tsx

@@ -9,12 +9,12 @@ import {
   DialogClose,
   DialogTitle,
   DialogTrigger,
-} from '~components/Dialog'
-import DialogContent from '~components/DialogContent'
-import Button from '~components/Button'
-import SelectItem from '~components/SelectItem'
-import PictureSelectItem from '~components/PictureSelectItem'
-import SelectTableField from '~components/SelectTableField'
+} from '~components/common/Dialog'
+import DialogContent from '~components/common/DialogContent'
+import Button from '~components/common/Button'
+import SelectItem from '~components/common/SelectItem'
+import PictureSelectItem from '~components/common/PictureSelectItem'
+import SelectTableField from '~components/common/SelectTableField'
 // import * as Switch from '@radix-ui/react-switch'
 
 import api from '~utils/api'

components/auth/LoginModal/index.tsx

@@ -8,10 +8,10 @@ import api from '~utils/api'
 import { setHeaders } from '~utils/userToken'
 import { accountState } from '~utils/accountState'
 
-import Button from '~components/Button'
-import Input from '~components/Input'
-import { Dialog, DialogTrigger, DialogClose } from '~components/Dialog'
-import DialogContent from '~components/DialogContent'
+import Button from '~components/common/Button'
+import Input from '~components/common/Input'
+import { Dialog, DialogTrigger, DialogClose } from '~components/common/Dialog'
+import DialogContent from '~components/common/DialogContent'
 import changeLanguage from '~utils/changeLanguage'
 
 import CrossIcon from '~public/icons/Cross.svg'

components/auth/SignupModal/index.tsx

@@ -8,10 +8,10 @@ import api from '~utils/api'
 import { setHeaders } from '~utils/userToken'
 import { accountState } from '~utils/accountState'
 
-import Button from '~components/Button'
-import Input from '~components/Input'
-import { Dialog, DialogTrigger, DialogClose } from '~components/Dialog'
-import DialogContent from '~components/DialogContent'
+import Button from '~components/common/Button'
+import Input from '~components/common/Input'
+import { Dialog, DialogTrigger, DialogClose } from '~components/common/Dialog'
+import DialogContent from '~components/common/DialogContent'
 import CrossIcon from '~public/icons/Cross.svg'
 import './index.scss'
 

components/character/CharacterConflictModal/index.tsx

@@ -2,10 +2,10 @@ import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { Trans, useTranslation } from 'next-i18next'
 
-import { Dialog } from '~components/Dialog'
-import DialogContent from '~components/DialogContent'
-import Button from '~components/Button'
-import Overlay from '~components/Overlay'
+import { Dialog } from '~components/common/Dialog'
+import DialogContent from '~components/common/DialogContent'
+import Button from '~components/common/Button'
+import Overlay from '~components/common/Overlay'
 
 import { appState } from '~utils/appState'
 

components/character/CharacterGrid/index.tsx

@@ -7,10 +7,10 @@ import { useTranslation } from 'next-i18next'
 import { AxiosError, AxiosResponse } from 'axios'
 import debounce from 'lodash.debounce'
 
-import Alert from '~components/Alert'
-import JobSection from '~components/JobSection'
-import CharacterUnit from '~components/CharacterUnit'
-import CharacterConflictModal from '~components/CharacterConflictModal'
+import Alert from '~components/common/Alert'
+import JobSection from '~components/job/JobSection'
+import CharacterUnit from '~components/character/CharacterUnit'
+import CharacterConflictModal from '~components/character/CharacterConflictModal'
 
 import type { DetailsObject, JobSkillObject, SearchableObject } from '~types'
 

components/character/CharacterHovercard/index.tsx

@@ -6,10 +6,10 @@ import {
   Hovercard,
   HovercardContent,
   HovercardTrigger,
-} from '~components/Hovercard'
-import Button from '~components/Button'
-import WeaponLabelIcon from '~components/WeaponLabelIcon'
-import UncapIndicator from '~components/UncapIndicator'
+} from '~components/common/Hovercard'
+import Button from '~components/common/Button'
+import WeaponLabelIcon from '~components/weapon/WeaponLabelIcon'
+import UncapIndicator from '~components/uncap/UncapIndicator'
 
 import {
   overMastery,

components/character/CharacterModal/index.tsx

@@ -16,13 +16,13 @@ import {
   DialogClose,
   DialogTitle,
   DialogTrigger,
-} from '~components/Dialog'
-import DialogContent from '~components/DialogContent'
-import Button from '~components/Button'
-import SelectWithInput from '~components/SelectWithInput'
-import AwakeningSelect from '~components/AwakeningSelect'
-import RingSelect from '~components/RingSelect'
-import Switch from '~components/Switch'
+} from '~components/common/Dialog'
+import DialogContent from '~components/common/DialogContent'
+import Button from '~components/common/Button'
+import SelectWithInput from '~components/common/SelectWithInput'
+import AwakeningSelect from '~components/mastery/AwakeningSelect'
+import RingSelect from '~components/mastery/RingSelect'
+import Switch from '~components/common/Switch'
 
 // Utilities
 import api from '~utils/api'

components/character/CharacterResult/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { useRouter } from 'next/router'
 
-import UncapIndicator from '~components/UncapIndicator'
-import WeaponLabelIcon from '~components/WeaponLabelIcon'
+import UncapIndicator from '~components/uncap/UncapIndicator'
+import WeaponLabelIcon from '~components/weapon/WeaponLabelIcon'
 
 import './index.scss'
 

components/character/CharacterSearchFilterBar/index.tsx

@@ -5,8 +5,8 @@ import cloneDeep from 'lodash.clonedeep'
 
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 
-import SearchFilter from '~components/SearchFilter'
-import SearchFilterCheckboxItem from '~components/SearchFilterCheckboxItem'
+import SearchFilter from '~components/search/SearchFilter'
+import SearchFilterCheckboxItem from '~components/search/SearchFilterCheckboxItem'
 
 import './index.scss'
 import {

components/character/CharacterUnit/index.tsx

@@ -5,18 +5,18 @@ import { Trans, useTranslation } from 'next-i18next'
 import { AxiosResponse } from 'axios'
 import classNames from 'classnames'
 
-import Alert from '~components/Alert'
-import Button from '~components/Button'
-import CharacterHovercard from '~components/CharacterHovercard'
-import CharacterModal from '~components/CharacterModal'
+import Alert from '~components/common/Alert'
+import Button from '~components/common/Button'
+import CharacterHovercard from '~components/character/CharacterHovercard'
+import CharacterModal from '~components/character/CharacterModal'
 import {
   ContextMenu,
   ContextMenuTrigger,
   ContextMenuContent,
-} from '~components/ContextMenu'
-import ContextMenuItem from '~components/ContextMenuItem'
-import SearchModal from '~components/SearchModal'
-import UncapIndicator from '~components/UncapIndicator'
+} from '~components/common/ContextMenu'
+import ContextMenuItem from '~components/common/ContextMenuItem'
+import SearchModal from '~components/search/SearchModal'
+import UncapIndicator from '~components/uncap/UncapIndicator'
 
 import api from '~utils/api'
 import { appState } from '~utils/appState'

components/common/Alert/index.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import * as AlertDialog from '@radix-ui/react-alert-dialog'
 
 import './index.scss'
-import Button from '~components/Button'
-import Overlay from '~components/Overlay'
+import Button from '~components/common/Button'
+import Overlay from '~components/common/Overlay'
 
 // Props
 interface Props {

components/common/DialogContent/index.scss

@@ -29,7 +29,7 @@
     height: auto;
     min-width: $unit * 48;
     // min-height: $unit-12x;
-    overflow-y: scroll;
+    overflow-y: auto;
     // height: 80vh;
     max-height: 80vh;
     min-width: 580px;

components/common/DialogContent/index.tsx

@@ -3,7 +3,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog'
 import classNames from 'classnames'
 import debounce from 'lodash.debounce'
 
-import Overlay from '~components/Overlay'
+import Overlay from '~components/common/Overlay'
 import './index.scss'
 
 interface Props

components/common/DurationInput/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, ChangeEvent, KeyboardEvent } from 'react'
 import classNames from 'classnames'
 
-import Input from '~components/Input'
+import Input from '~components/common/Input'
 import './index.scss'
 
 interface Props

components/common/Hovercard/index.scss

@@ -12,7 +12,7 @@ div[data-radix-popper-content-wrapper] {
   flex-direction: column;
   gap: $unit-2x;
   max-height: 30vh;
-  overflow-y: scroll;
+  overflow-y: auto;
   padding: $unit-2x;
   width: 300px;
 

components/common/InputTableField/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
-import Input from '~components/Input'
-import TableField from '~components/TableField'
+import Input from '~components/common/Input'
+import TableField from '~components/common/TableField'
 
 import './index.scss'
 

components/common/PopoverContent/index.scss

@@ -8,4 +8,10 @@
   padding: $unit;
   transform-origin: var(--radix-popover-content-transform-origin);
   z-index: 5;
+
+  .Arrow {
+    fill: var(--dialog-bg);
+    filter: drop-shadow(0px 1px 1px rgb(0 0 0 / 0.18));
+    margin-top: -1px;
+  }
 }

components/common/Select/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import * as RadixSelect from '@radix-ui/react-select'
 import classNames from 'classnames'
 
-import Overlay from '~components/Overlay'
+import Overlay from '~components/common/Overlay'
 
 import ArrowIcon from '~public/icons/Arrow.svg'
 

components/common/SelectTableField/index.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import { useEffect, useState } from 'react'
-import Select from '~components/Select'
-import TableField from '~components/TableField'
+import Select from '~components/common/Select'
+import TableField from '~components/common/TableField'
 
 import './index.scss'
 

components/common/SelectWithInput/index.tsx

@@ -5,9 +5,9 @@ import { useTranslation } from 'next-i18next'
 import classNames from 'classnames'
 
 // UI Dependencies
-import Input from '~components/Input'
-import Select from '~components/Select'
-import SelectItem from '~components/SelectItem'
+import Input from '~components/common/Input'
+import Select from '~components/common/Select'
+import SelectItem from '~components/common/SelectItem'
 
 // Styles and icons
 import './index.scss'

components/common/SliderTableField/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
-import Input from '~components/Input'
-import Slider from '~components/Slider'
-import TableField from '~components/TableField'
+import Input from '~components/common/Input'
+import Slider from '~components/common/Slider'
+import TableField from '~components/common/TableField'
 
 import './index.scss'
 

components/common/SwitchTableField/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
-import Switch from '~components/Switch'
-import TableField from '~components/TableField'
+import Switch from '~components/common/Switch'
+import TableField from '~components/common/TableField'
 
 import './index.scss'