React/refactoring chk button base

frontend/.storybook/chkDecorator.tsx

@@ -1,21 +1,33 @@
 import "normalize.css";
 
 import React from "react";
+import styled from "styled-components";
 import { BrowserRouter } from "react-router-dom";
 import { makeDecorator } from "@storybook/addons";
 import GlobalStyle from "../src/constants/styles/global";
+import { ChkThemeProvider } from "../src/theme/ChkThemeProvider";
 
 export const chkDecorator = makeDecorator({
   name: "withSomething",
   parameterName: "something",
   wrapper: (storyFn, context) => {
     return (
       <BrowserRouter>
-        <>
-          {storyFn(context)}
+        <ChkThemeProvider themeName="chk">
+          <Spacer>{storyFn(context)}</Spacer>
           <GlobalStyle />
-        </>
+        </ChkThemeProvider>
       </BrowserRouter>
     );
   }
 });
+
+const Spacer = styled.div`
+  margin: 1rem;
+  > * {
+    margin-right: 1rem;
+  }
+  p {
+    margin-bottom: 0.5rem;
+  }
+`;

frontend/src/components/App/index.tsx

@@ -8,15 +8,18 @@ import Main from "@/layouts/Main";
 import Footer from "@/layouts/Footer";
 import { isDevelopment } from "@/utils";
 import { CHK } from "@/constants/url";
+import { ChkThemeProvider } from "@/theme/ChkThemeProvider";
 
 export default () => (
   <Provider
     value={
       new RootStore(isDevelopment() ? CHK.BACK_END.DEV : CHK.BACK_END.PROD)
     }
   >
-    <Header />
-    <Main />
-    <Footer />
+    <ChkThemeProvider themeName="chk">
+      <Header />
+      <Main />
+      <Footer />
+    </ChkThemeProvider>
   </Provider>
 );

frontend/src/components/atoms/AboutBottom/index.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import styled from "styled-components";
+import { Link } from "react-router-dom";
 
-import { color, device } from "@/constants/styles";
-import ChkButtonBase from "@/components/atoms/Buttons/ChkButtonBase";
+import { device } from "@/constants/styles";
+import { OrangeButton } from "@/components/atoms/Buttons/Button";
 
 import img from "./bg.jpg";
 
@@ -15,7 +16,14 @@ export default () => (
           インキュベーションワークが始まった2015年頃から、呉高専の学生は縦のつながりと横のつながりが広がっていきました。しかし、まだ多くの学生は同じクラス、部活動の友だちなどのコミュニティで完結してしまっています。私たちはこれまで多様な人とつながったことで、将来の選択肢が増えていきました。後輩たちにも同じようにもっとたくさんの人とつながりを作って、多くの経験をしてほしいという想いから、この活動を開始しました。
         </ParagraphStyle>
         <ButtonWrapper>
-          <ButtonStyle to="/contact" text="contact" />
+          <OrangeButton
+            as={Link}
+            to="/contact"
+            maxWidth={200}
+            style={{ margin: "0 auto" }}
+          >
+            contact
+          </OrangeButton>
         </ButtonWrapper>
       </ContentStyle>
     </MaskStyle>
@@ -51,18 +59,16 @@ const ContentStyle = styled.div`
 `;
 
 const TitleStyle = styled.h2`
-  color: ${color.ORANGE};
+  color: ${({ theme }) => theme.color.orange};
   text-align: center;
 `;
 
 const ParagraphStyle = styled.p`
-  color: ${color.WHITE};
+  color: ${({ theme }) => theme.color.white};
   line-height: 1.42em;
 `;
 
 const ButtonWrapper = styled.div`
   margin: 80px auto 0;
   width: 40%;
 `;
-
-const ButtonStyle = styled(ChkButtonBase)``;

frontend/src/components/atoms/Buttons/Base.tsx

@@ -0,0 +1,80 @@
+import { ComponentPropsWithRef } from "react";
+import styled, { css } from "styled-components";
+import { Link } from "react-router-dom";
+
+export type ButtonSize = "large" | "medium" | "small" | "xSmall";
+
+export type ButtonSizes = {
+  [size in ButtonSize]: {
+    size: number;
+    fontSize: number;
+  }
+};
+
+export const buttonSizes: ButtonSizes = {
+  large: {
+    size: 44,
+    fontSize: 16
+  },
+  medium: {
+    size: 36,
+    fontSize: 14
+  },
+  small: {
+    size: 32,
+    fontSize: 14
+  },
+  xSmall: {
+    size: 28,
+    fontSize: 12
+  }
+};
+
+export const buttonSizeStyle = (buttonSize: ButtonSize = "medium") => {
+  const { size, fontSize } = buttonSizes[buttonSize];
+  return css`
+    height: ${size}px;
+    line-height: ${size}px;
+    font-size: ${fontSize}px;
+  `;
+};
+
+export type ButtonProps = {
+  size?: ButtonSize;
+  disabled?: boolean;
+  inverse?: boolean;
+  minWidth?: number;
+  maxWidth?: number;
+} & Partial<ComponentPropsWithRef<"button">> &
+  Partial<ComponentPropsWithRef<"a">> &
+  Partial<ComponentPropsWithRef<typeof Link>>;
+
+export const BaseButton = styled.button<ButtonProps>`
+  display: block;
+  text-align: center;
+  cursor: pointer;
+  outline: none;
+  border: none;
+  font-weight: 600;
+  margin: 0;
+  width: 100%;
+  background-color: transparent;
+
+  border-radius: ${({ theme }) => theme.utils.unitPx(3)};
+  padding-left: ${({ theme }) => theme.utils.unitPx(2)};
+  padding-right: ${({ theme }) => theme.utils.unitPx(2)};
+
+  transition: 200ms all;
+
+  ${({ minWidth }) => minWidth && `min-width: ${minWidth}px;`}
+  ${({ maxWidth }) => maxWidth && `max-width: ${maxWidth}px;`}
+  ${({ size }) => buttonSizeStyle(size)};
+
+  &:disabled {
+    cursor: default;
+    pointer-events: none;
+    color: rgba(0, 0, 0, 0.24);
+    background-color: rgba(0, 0, 0, 0.06);
+    box-shadow: none;
+  }
+`;

frontend/src/components/atoms/Buttons/Button.tsx

@@ -0,0 +1,32 @@
+import styled, { css } from "styled-components";
+import { BaseButton } from "./Base";
+
+export const Button = styled(BaseButton)`
+  color: rgba(0, 0, 0, 0.56);
+  background-color: ${({ theme }) => theme.color.white};
+  box-shadow: rgba(0, 0, 0, 0.02) 0px 0px 0px 1px,
+    rgba(0, 0, 0, 0.1) 0px 0px 0px 1px;
+`;
+
+export const ShadowButton = styled(BaseButton)`
+  box-shadow: 4px 3px 10px 0px ${({ theme }) => theme.color.shadow};
+`;
+
+export const OrangeButton = styled(BaseButton)`
+  color: ${({ theme }) => theme.color.white};
+  background-color: ${({ theme }) => theme.color.orange};
+  width: 200px;
+`;
+
+export const BlueButton = styled(BaseButton)`
+  ${({ inverse }) =>
+    inverse
+      ? css`
+          color: ${({ theme }) => theme.color.blue};
+          border: 1px solid ${({ theme }) => theme.color.blue};
+        `
+      : css`
+          color: ${({ theme }) => theme.color.white};
+          background-color: ${({ theme }) => theme.color.blue};
+        `}
+`;