Fix checkbox to use createRef

- Add emotion plugin to swc(of nextjs) and babel(of storybook)
Team-Crops · Mar 1, 2024 · f335040 · f335040
1 parent 59035af
commit f335040
Show file tree

Hide file tree

Showing 8 changed files with 5,355 additions and 5,654 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/.pnp.loader.mjs b/.pnp.loader.mjs
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -22,6 +22,12 @@ const config: StorybookConfig = {
     name: getAbsolutePath('@storybook/nextjs'),
     options: {},
   },
+  babel: async (config) => {
+    return {
+      ...config,
+      plugins: [...config.plugins, '@emotion'],
+    };
+  },
   docs: {
     autodocs: 'tag',
   },

diff --git a/next.config.js b/next.config.js
@@ -1,5 +1,8 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  compiler: {
+    emotion: true,
+  },
   webpack: (config) => {
     // Grab the existing rule that handles SVG imports
     const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));

diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "swiper": "^11.0.5"
   },
   "devDependencies": {
+    "@emotion/babel-plugin": "^11.11.0",
     "@storybook/addon-essentials": "^8.0.0-alpha.8",
     "@storybook/addon-interactions": "^8.0.0-alpha.8",
     "@storybook/addon-links": "^8.0.0-alpha.8",

diff --git a/src/components/atoms/CheckBox.tsx b/src/components/atoms/CheckBox.tsx
@@ -1,35 +1,50 @@
-import type { InputHTMLAttributes } from 'react';
+import { forwardRef, type InputHTMLAttributes } from 'react';
 
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import CheckIcon from 'src/assets/icons/check.svg';
 
-function inputColorCSS({ checked, disabled }: CheckBoxProps) {
-  // background-color: ${({ checked, disabled }) => (checked && !disabled ? '#ff706c' : '#ffffff')};
-  if (checked && !disabled) {
-    return css`
-      border-color: #ff706c;
-      background-color: #ffffff;
-    `;
-  } else if (checked && disabled) {
-    return css`
-      border-color: #ffc7c6;
-      background-color: #ffffff;
-    `;
-  } else if (!checked && !disabled) {
-    return css`
-      border-color: #9e9e9e;
-      background-color: #ffffff;
-    `;
-  } else if (!checked && disabled) {
-    return css`
-      border-color: #eeeeee;
-      background-color: #ffffff;
-    `;
-  } else {
-    throw new Error(`Invalid props: checked: ${checked}, disabled: ${disabled}`);
+const StyledCheckIcon = styled(CheckIcon)`
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+
+  width: 14px;
+  height: 14px;
+`;
+
+const inputColorCSS = css`
+  border-color: #9e9e9e;
+  background-color: #ffffff;
+
+  &:disabled {
+    border-color: #eeeeee;
+    background-color: #ffffff;
   }
-}
+
+  &:checked {
+    border-color: #ff706c;
+    background-color: #ffffff;
+
+    + ${StyledCheckIcon} {
+      display: block;
+      stroke: #ff706c;
+    }
+  }
+
+  &:checked:disabled {
+    border-color: #ffc7c6;
+    background-color: #ffffff;
+
+    + ${StyledCheckIcon} {
+      display: block;
+      stroke: #ffc7c6;
+    }
+  }
+`;
 
 const StyledContainer = styled.div`
   display: inline-block;
@@ -42,7 +57,7 @@ const StyledContainer = styled.div`
   height: 24px;
 `;
 
-const StyledInput = styled.input<CheckBoxProps>`
+const StyledInput = styled.input`
   appearance: none;
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
 
@@ -59,29 +74,15 @@ const StyledInput = styled.input<CheckBoxProps>`
   ${inputColorCSS}
 `;
 
-const StyledCheckIcon = styled(CheckIcon)<CheckBoxProps>`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-
-  width: 14px;
-  height: 14px;
-  stroke: ${({ disabled }) => (disabled ? '#ffc7c6' : '#ff706c')};
-`;
-
 interface CheckBoxProps extends InputHTMLAttributes<HTMLInputElement> {}
 
-export function CheckBox({ checked, ...props }: CheckBoxProps) {
-  return (
+export const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(
+  ({ checked, ...props }, ref) => (
     <StyledContainer>
-      {checked === undefined ? (
-        <StyledInput type="checkbox" {...props} />
-      ) : (
-        <StyledInput type="checkbox" checked={checked} {...props} />
-      )}
-      {checked && <StyledCheckIcon {...props} />}
+      <StyledInput ref={ref} type="checkbox" checked={checked} {...props} />
+      <StyledCheckIcon />
     </StyledContainer>
-  );
-}
+  )
+);
+
+CheckBox.displayName = 'CheckBox';
diff --git a/src/stories/CheckBox.stories.tsx b/src/stories/CheckBox.stories.tsx
@@ -33,10 +33,12 @@ function DefaultTemplate(args: Story['args']) {
   );
 }
 
-export const Default: Story = {
+export const WithState: Story = {
   args: {
     checked: false,
     disabled: false,
   },
   render: DefaultTemplate,
 };
+
+export const WithoutState: Story = {};