Merge pull request #253 from codeforjapan/develop

Release 20240523

.storybook/main.js

@@ -1,28 +1,30 @@
 const path = require("path");
 
 module.exports = {
-  stories: [
-    "../components/**/*.stories.mdx",
-    "../components/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
+  stories: ["../components/**/*.stories.@(js|jsx|ts|tsx)"],
+
   addons: [
-    "@storybook/storybook-addon-next",
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "@chakra-ui/storybook-addon"
+    "@chakra-ui/storybook-addon",
   ],
-  framework: "@storybook/react",
-  core: {
-    "builder": "@storybook/builder-webpack5"
+
+  framework: {
+    name: "@storybook/nextjs",
+    options: {}
   },
+
   typescript: {
     reactDocgen: false,
   },
+
   features: {
     emotionAlias: false,
   },
+
   staticDirs: ['../public', '../styles'],
+
   webpackFinal: async (config) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
@@ -43,4 +45,6 @@ module.exports = {
     // Return the altered config
     return config;
   },
+
+  docs: {}
 }

.storybook/preview.js

@@ -13,7 +13,6 @@ Object.defineProperty(NextImage, "default", {
 });
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
       color: /(background|color)$/i,
@@ -25,3 +24,4 @@ export const parameters = {
     theme,
   },
 }
+export const tags = ["autodocs"];

components/atoms/buttons/Basic.stories.tsx

@@ -1,4 +1,5 @@
 // eslint-disable-next-line import/named
+// @ts-ignore
 import { ComponentMeta, ComponentStoryObj } from '@storybook/react'
 import Basic from './Basic'
 

components/atoms/buttons/Basic.tsx

@@ -1,6 +1,5 @@
 import { FC, ReactNode, useMemo } from 'react'
 import { ChevronRightIcon } from '@chakra-ui/icons'
-// eslint-disable-next-line import/named
 import { Box, Button, ButtonProps, Spinner } from '@chakra-ui/react'
 
 type Props = {

components/atoms/buttons/Category.tsx

@@ -41,7 +41,7 @@ const CategoryButton: FC<Props> = ({ category, onClick }) => {
 
   return (
     <Button
-      background="white"
+      background={'white'}
       borderWidth="1px"
       borderColor="gray.200"
       height={{ base: '70px', md: '160px' }}
@@ -62,10 +62,13 @@ const CategoryButton: FC<Props> = ({ category, onClick }) => {
         >
           <Flex alignItems="center" flexWrap="wrap" justifyContent="center">
             <Image
-              width="40px"
-              height="40px"
+              width={40}
+              height={40}
               src={`/icons/${category}.svg`}
-              alt=""
+              alt={`${category} icons`}
+              style={{
+                height: 'auto'
+              }}
             />
             <Text
               ml={{ base: 3, md: 0 }}

components/atoms/icons/XIcon.tsx

@@ -8,26 +8,52 @@ type Props = {
 const XIcon: FC<Props> = ({ width = 48, height = 48 }: Props) => {
   return (
     <svg
-      width={ width }
-      height={ height }
+      width={width}
+      height={height}
       viewBox="0 0 256 256"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
       xmlSpace="preserve"
     >
-      <g stroke='none' strokeWidth='0' strokeDasharray='none' strokeLinecap='butt' strokeLinejoin='miter'
-         strokeMiterlimit={ 10 } fill={ 'none' }
-         fillRule='nonzero' opacity={ 1 } transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)">
-        <polygon points="24.89,23.01 57.79,66.99 65.24,66.99 32.34,23.01 " stroke='none' strokeWidth={ `1` }
-                 strokeDasharray='none' strokeLinecap='butt' strokeLinejoin='miter' strokeMiterlimit={ 10 }
-                 fill='rgb(0,0,0)'
-                 fillRule='nonzero' opacity={ 1 } transform="  matrix(1 0 0 1 0 0) "/>
+      <g
+        stroke="none"
+        strokeWidth="0"
+        strokeDasharray="none"
+        strokeLinecap="butt"
+        strokeLinejoin="miter"
+        strokeMiterlimit={10}
+        fill={'none'}
+        fillRule="nonzero"
+        opacity={1}
+        transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
+      >
+        <polygon
+          points="24.89,23.01 57.79,66.99 65.24,66.99 32.34,23.01 "
+          stroke="none"
+          strokeWidth={`1`}
+          strokeDasharray="none"
+          strokeLinecap="butt"
+          strokeLinejoin="miter"
+          strokeMiterlimit={10}
+          fill="rgb(0,0,0)"
+          fillRule="nonzero"
+          opacity={1}
+          transform="  matrix(1 0 0 1 0 0) "
+        />
         <path
           d="M 45 0 L 45 0 C 20.147 0 0 20.147 0 45 v 0 c 0 24.853 20.147 45 45 45 h 0 c 24.853 0 45 -20.147 45 -45 v 0 C 90 20.147 69.853 0 45 0 z M 56.032 70.504 L 41.054 50.477 L 22.516 70.504 h -4.765 L 38.925 47.63 L 17.884 19.496 h 16.217 L 47.895 37.94 l 17.072 -18.444 h 4.765 L 50.024 40.788 l 22.225 29.716 H 56.032 z"
-          stroke='none' strokeWidth='0' strokeDasharray='none' strokeLinecap='round' strokeLinejoin='miter'
-          strokeMiterlimit={ 10 }
-          fill='rgb(0,0,0)' fillRule='nonzero' opacity={ 1 } transform=" matrix(1 0 0 1 0 0) "/>
+          stroke="none"
+          strokeWidth="0"
+          strokeDasharray="none"
+          strokeLinecap="round"
+          strokeLinejoin="miter"
+          strokeMiterlimit={10}
+          fill="rgb(0,0,0)"
+          fillRule="nonzero"
+          opacity={1}
+          transform=" matrix(1 0 0 1 0 0) "
+        />
       </g>
     </svg>
   )

components/atoms/inputs/RadioGroup.tsx

@@ -1,7 +1,7 @@
 import { FC, useMemo } from 'react'
 import { Box, Radio, RadioGroup, Text } from '@chakra-ui/react'
-import { toBoolean } from '../../../utils/datatype'
 import style from './RadioGroup.module.scss'
+import { toBoolean } from '../../../utils/datatype'
 
 type Props = {
   onChange: (v: string | number | boolean) => void

components/molecules/action/ActionCompleteBtn/ActionCompleteBtn.stories.tsx

@@ -1,4 +1,4 @@
-// eslint-disable-next-line import/named
+// @ts-ignore
 import { ComponentMeta, ComponentStoryObj } from '@storybook/react'
 import ActionCompleteBtn from './ActionCompleteBtn'
 

components/molecules/action/ActionRateSlider/ActionRateSlider.stories.tsx

@@ -1,4 +1,4 @@
-// eslint-disable-next-line import/named
+// @ts-ignore
 import { ComponentMeta, ComponentStoryObj } from '@storybook/react'
 import ActionRateSlider from './ActionRateSlider'
 

components/molecules/action/OptionsIntensityRate/OptionsIntensityRate.module.scss

@@ -9,14 +9,12 @@
       width: 32px;
       height: 32px;
       color: black;
-      background-color: #99D9EF !important;
-
+      background-color: #99d9ef !important;
     }
 
     .radio[data-checked]::before {
       width: 12px;
       height: 12px;
-
     }
   }
 }

components/molecules/completion/CompletionActionItem/CompletionActionItem.stories.tsx

@@ -1,4 +1,4 @@
-// eslint-disable-next-line import/named
+// @ts-ignore
 import { ComponentMeta, ComponentStoryObj } from '@storybook/react'
 import CompletionActionItem from 'components/molecules/completion/CompletionActionItem/CompletionActionItem'
 

components/molecules/homes/HomeContentBody/HomeContentBody.stories.tsx

@@ -1,4 +1,4 @@
-// eslint-disable-next-line import/named
+// @ts-ignore
 import { ComponentMeta, ComponentStoryObj } from '@storybook/react'
 import HomeContentBody from './HomeContentBody'
 

components/molecules/homes/HomeContentCatchPhrase/HomeContentCatchPhrase.stories.tsx

@@ -1,4 +1,4 @@
-// eslint-disable-next-line import/named
+// @ts-ignore
 import { ComponentMeta, ComponentStoryObj } from '@storybook/react'
 import HomeContentCatchPhrase from './HomeContentCatchPhrase'
 

components/molecules/homes/HomeContentTitle/HomeContentTitle.stories.tsx

@@ -1,4 +1,4 @@
-// eslint-disable-next-line import/named
+// @ts-ignore
 import { ComponentMeta, ComponentStoryObj } from '@storybook/react'
 import HomeContentTitle from './HomeContentTitle'
 

components/molecules/homes/HomeSectionContainer/HomeSectionContainer.stories.tsx

@@ -1,4 +1,4 @@
-// eslint-disable-next-line import/named
+// @ts-ignore
 import { ComponentMeta, ComponentStoryObj } from '@storybook/react'
 import HomeSectionContainer from './HomeSectionContainer'
 

components/molecules/homes/TermOfServiceDialog/TermOfServiceDialog.stories.tsx

@@ -1,4 +1,4 @@
-// eslint-disable-next-line import/named
+// @ts-ignore
 import { ComponentMeta, ComponentStoryObj } from '@storybook/react'
 import TermOfServiceDialog from './TermOfServiceDialog'
 

components/molecules/questions/CategoryTitle.tsx

@@ -1,6 +1,6 @@
 import { FC, ReactNode, useMemo } from 'react'
 import Image from 'next/image'
-import { Box } from '@chakra-ui/react'
+import { Box, Flex } from '@chakra-ui/react'
 
 type Props = {
   category?: Questions.QuestionCategory
@@ -39,7 +39,14 @@ const CategoryTitle: FC<Props> = ({ category, title }) => {
       pt={3}
     >
       {category && (
-        <Image src={`/icons/${category}.svg`} width="70px" height="70px" />
+        <Flex alignItems="center" flexWrap="wrap" justifyContent="center">
+          <Image
+            src={`/icons/${category}.svg`}
+            width={70}
+            height={70}
+            alt={`${category} icons`}
+          />
+        </Flex>
       )}
       <p>{text}</p>
     </Box>

components/molecules/questions/Form.tsx

@@ -6,12 +6,12 @@ import DatasourceFooter from 'components/DatasourceFooter'
 import { useProfile } from 'hooks/profile'
 import { useAnswerController } from 'hooks/questions'
 import { toBoolean } from 'utils/datatype'
+import QuestionHeader from './QuestionHeader'
 import api from '../../../utils/api'
 import BasicButton from '../../atoms/buttons/Basic'
 import RadioGroups from '../../atoms/inputs/RadioGroup'
 import SelectBox from '../../atoms/inputs/Select'
 import TextField from '../../atoms/inputs/TextField'
-import QuestionHeader from './QuestionHeader'
 
 type Props = {
   questionPage: Questions.Page

components/molecules/result/ShareSNS/ShareSNS.tsx

@@ -3,7 +3,7 @@ import { Box, IconButton } from '@chakra-ui/react'
 import FacebookIcon from 'components/atoms/icons/FaceBookIcon'
 import LineIcon from 'components/atoms/icons/LineIcon'
 import TwitterIcon from 'components/atoms/icons/TwitterIcon'
-import XIcon from "components/atoms/icons/XIcon";
+import XIcon from 'components/atoms/icons/XIcon'
 import styles from 'components/molecules/result/ShareSNS/ShareSNS.module.scss'
 
 type Props = {
@@ -27,7 +27,7 @@ const ShareSNS: FC<Props> = ({ line, twitter, facebook }) => {
         {!disable_facebook && (
           <a href={facebook} target="_blank" rel="noreferrer">
             <IconButton
-              background="transparent"
+              background={'transparent'}
               _hover={{ backgroud: 'transparent' }}
               aria-label="Share result on Facebook"
               icon={<FacebookIcon />}
@@ -37,18 +37,18 @@ const ShareSNS: FC<Props> = ({ line, twitter, facebook }) => {
         {!disable_twitter && (
           <a href={twitter} target="_blank" rel="noreferrer">
             <IconButton
-              background="transparent"
+              background={'transparent'}
               _hover={{ backgroud: 'transparent' }}
               aria-label="Share result on Twitter"
-              icon={ use_x_logo ?  <XIcon /> : <TwitterIcon />}
+              icon={use_x_logo ? <XIcon /> : <TwitterIcon />}
               mx={6}
             />
           </a>
         )}
         {!disable_line && (
           <a href={line} target="_blank" rel="noreferrer">
             <IconButton
-              background="transparent"
+              background={'transparent'}
               _hover={{ backgroud: 'transparent' }}
               aria-label="Share result on Line"
               icon={<LineIcon />}

components/molecules/society/SocietyContentCatchPhrase/SocietyContentCatchPhrase.stories.tsx

@@ -1,4 +1,4 @@
-// eslint-disable-next-line import/named
+// @ts-ignore
 import { ComponentMeta, ComponentStoryObj } from '@storybook/react'
 import SocietyContentCatchPhrase from './SocietyContentCatchPhrase'
 

components/molecules/society/SocietyContentCategory/SocietyContentCategory.stories.tsx

@@ -1,4 +1,4 @@
-// eslint-disable-next-line import/named
+// @ts-ignore
 import { ComponentMeta, ComponentStoryObj } from '@storybook/react'
 import SocietyContentCategory from './SocietyContentCategory'
 

components/molecules/society/SocietyContentCategoryItem/SocietyContentCategoryItem.stories.tsx

@@ -1,4 +1,4 @@
-// eslint-disable-next-line import/named
+// @ts-ignore
 import { ComponentMeta, ComponentStoryObj } from '@storybook/react'
 import SocietyContentCategoryItem from './SocietyContentCategoryItem'
 

components/molecules/society/SocietyContentTitle/SocietyContentTitle.stories.tsx

@@ -1,4 +1,4 @@
-// eslint-disable-next-line import/named
+// @ts-ignore
 import { ComponentMeta, ComponentStoryObj } from '@storybook/react'
 import SocietyContentTitle from './SocietyContentTitle'