buttonコンポーネントを実装 (#120)

* Merge pull request #100 from suzuka-kosen-festa/renovate/dependencies (#103) * [figma] first site tokens * generate scss by style-dictionary * 🤖 auto-fixable format by github-actions * [skip ci] generate json by style-dictionary * Update Yarn to v3.2.2 * [skip ci] auto-fixable format by github-actions * Update devDependencies * Update devDependencies * Update dependencies (non-major) * 🚑️ NextJSが12.2.3にあがったことによる、ESLintのルールが変わったためそれに対応する修正詳細はchangelog見てください。NextJSの * fix: fix test message Co-authored-by: Shoma Kobayashi <60056125+shoma3571@users.noreply.github.com> Co-authored-by: re-taro <re-taro@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: renovate[bot] <renovate[bot]@users.noreply.github.com> * 🏷️ buttonコンポーネントを<button />以外で使用できるようにする <a />などの型を使えるようにした * 🏷️ ButtonPropertiesの追加 boxStyles: button自身のスタイル textStyles: 内部のテキストに対するスタイル ref: refは今回なし as: as={'a'}などで型をオーバーライド * ✨ Tailwindに初期サイトのトークンを読み込ませる extendsしているので名前がかぶるとコチラが優先される * 🚧 wip * Merge branch 'feature/#63' into dev (#118) * [figma] first site tokens * generate scss by style-dictionary * 🤖 auto-fixable format by github-actions * [skip ci] generate json by style-dictionary * Update Yarn to v3.2.2 * [skip ci] auto-fixable format by github-actions * Update devDependencies * Update devDependencies * Update dependencies (non-major) * 🚑️ NextJSが12.2.3にあがったことによる、ESLintのルールが変わったためそれに対応する修正詳細はchangelog見てください。NextJSの * fix: fix test message * 🚧 wip * ✨ webフォントの追加及び最適化 (#104) Zen Kurenaidoかわいいですね * ✨ webフォントの追加及び最適化 (#104) (#106) Zen Kurenaidoかわいいですね * APIのリファクタリング (#107) * 🔥 定数を置いておくファイルの削除使わない実装に変更した * ➕ ts-patternの追加 * ♻️ 汚いAPIの実装を修正主に型周りを整備した * [skip ci] auto-fixable format by github-actions * 📌 バージョンを固定する Co-authored-by: re-taro <re-taro@users.noreply.github.com> * APIのリファクタリング (#107) (#108) * ✨ webフォントの追加及び最適化 (#104) Zen Kurenaidoかわいいですね * APIのリファクタリング (#107) * 🔥 定数を置いておくファイルの削除使わない実装に変更した * ➕ ts-patternの追加 * ♻️ 汚いAPIの実装を修正主に型周りを整備した * [skip ci] auto-fixable format by github-actions * 📌 バージョンを固定する Co-authored-by: re-taro <re-taro@users.noreply.github.com> Co-authored-by: re-taro <re-taro@users.noreply.github.com> * 🔍️ langを日本語に変更したなんでenだったんだ??? * ➕ Storybook似必要な依存を追加した a11yを確認できるアドオンと、emotionのキャッシング * ✨ フォントをtwin.macroで読み込める形で追加した IEやSafariでも対応している。はず。 * ✨ Storybookの設定を変更した静的ファイルを置くディレクトリを指定した * ✨ 設定したフォントや、twin.macroようにチューニングされたreset cssを読み込ますようにした unocssを採用する可能性あり * ✨ typographyコンポーネントを作成したダークモード非対応 * 🩹 storiesに値の変更はいらないと感じたので削除したあくまでカタログ * 📸 スナップショットの更新実装が変わったため * レイアウトコンポーネントの追加 (#111) * ♻️ 型定義の修正が漏れていたため修正 * 🚚 ファイル名を変更した定数を置いておくファイルの削除に伴い修正するのを忘れていたため * ✨ レイアウトコンポーネントの追加 _app.tsxへの対応は別ブランチで対応予定 * [skip ci] auto-fixable format by github-actions * ♿️ roleを追加した Co-authored-by: re-taro <re-taro@users.noreply.github.com> * 🚑️ コンフリクトの修正 * レイアウトコンポーネントの追加 (#111) (#112) * ✨ webフォントの追加及び最適化 (#104) Zen Kurenaidoかわいいですね * APIのリファクタリング (#107) * 🔥 定数を置いておくファイルの削除使わない実装に変更した * ➕ ts-patternの追加 * ♻️ 汚いAPIの実装を修正主に型周りを整備した * [skip ci] auto-fixable format by github-actions * 📌 バージョンを固定する Co-authored-by: re-taro <re-taro@users.noreply.github.com> * レイアウトコンポーネントの追加 (#111) * ♻️ 型定義の修正が漏れていたため修正 * 🚚 ファイル名を変更した定数を置いておくファイルの削除に伴い修正するのを忘れていたため * ✨ レイアウトコンポーネントの追加 _app.tsxへの対応は別ブランチで対応予定 * [skip ci] auto-fixable format by github-actions * ♿️ roleを追加した Co-authored-by: re-taro <re-taro@users.noreply.github.com> Co-authored-by: re-taro <re-taro@users.noreply.github.com> * ✨ レイアウトコンポーネントを読み込ませる _app.tsxとpreview.js * ✅ テストコードを更新した表示内容の変更 * fix: fix test message (#115) * Merge commit (#114) * ✨ webフォントの追加及び最適化 (#104) Zen Kurenaidoかわいいですね * APIのリファクタリング (#107) * 🔥 定数を置いておくファイルの削除使わない実装に変更した * ➕ ts-patternの追加 * ♻️ 汚いAPIの実装を修正主に型周りを整備した * [skip ci] auto-fixable format by github-actions * 📌 バージョンを固定する Co-authored-by: re-taro <re-taro@users.noreply.github.com> * レイアウトコンポーネントの追加 (#111) * ♻️ 型定義の修正が漏れていたため修正 * 🚚 ファイル名を変更した定数を置いておくファイルの削除に伴い修正するのを忘れていたため * ✨ レイアウトコンポーネントの追加 _app.tsxへの対応は別ブランチで対応予定 * [skip ci] auto-fixable format by github-actions * ♿️ roleを追加した Co-authored-by: re-taro <re-taro@users.noreply.github.com> Co-authored-by: re-taro <re-taro@users.noreply.github.com> * fix: fix test message * 🔧 Storybookの設定を変えた背景色を高専祭のHPの色に * 📸 snapshotの更新 layoutコンポーネントを毎回使うとテストが落ちるバグの修正 * ⚡️ 整形 Co-authored-by: re-taro <re-taro@users.noreply.github.com> * Update devDependencies (#117) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency next to v12.2.4 (#116) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Shoma Kobayashi <60056125+shoma3571@users.noreply.github.com> Co-authored-by: re-taro <re-taro@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: renovate[bot] <renovate[bot]@users.noreply.github.com> * 🔧 tailwindの設定を変更した * 🏷️ buttonコンポーネントのモデルを作成 * ✨ design tokenに対応したスタイルに変更したコンフリクト原因 * ✨ contextの修正テスト内容がややわかりにくい文面になっていた、またそれに対応してsnapshotも更新される * ✨ buttonコンポーネントを実装型定義が曖昧だがこうするしかなかった。他にいい方法があったらリファクタリングする * ✨ storiesの追加 button以外に変換するとスタイルがずれるバグを確認 * ✅ testを追加 * 📸 snapshotを更新 * ⚡️ 整形 * ✨ フォントをboldにした見づらかったので * 📸 snapshotを更新した * ✨ storiesのタイトルを付けないことで統一 test用途が多いため冗長と判断 * 🚑️ anchor buttonにした際などにUIが崩れるバグを修正 inline blockにしてあげたら世界は救われる * ✨ 付与するロールの変更 anchor buttonはa11yの観点から[role=button]であるべきと判断 * 📸 snap shot の更新 * ⚡️ 整形 * ✅ テストの修正 snap shotテストに用いていたnodeがmainでtreeがmain mainになっていてだめになっていた * ✏️ typoを治すなんで空白無いんだ愚か者 Co-authored-by: Shoma Kobayashi <60056125+shoma3571@users.noreply.github.com> Co-authored-by: re-taro <re-taro@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: renovate[bot] <renovate[bot]@users.noreply.github.com>
suzuka-kosen-festa · Aug 10, 2022 · 17c5b00 · 17c5b00
1 parent 228be29
commit 17c5b00
Show file tree

Hide file tree

Showing 14 changed files with 134 additions and 18 deletions.
diff --git a/src/@types/common.d.ts b/src/@types/common.d.ts
@@ -0,0 +1,7 @@
+type AnyComponent = keyof React.ReactHTML | React.ComponentType;
+
+type PropertiesOf<T> = T extends keyof JSX.IntrinsicElements
+  ? JSX.IntrinsicElements[T]
+  : T extends React.ComponentType<infer Properties>
+  ? Properties & JSX.IntrinsicAttributes
+  : never;
diff --git a/src/components/atoms/button/__snapshots__/button.test.tsx.snap b/src/components/atoms/button/__snapshots__/button.test.tsx.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`(components) atoms/button take anchor button's snap shot 1`] = `
+<div>
+  <a
+    class="twin-1fs6bgp-ButtonBox ewpnij50"
+    role="button"
+  >
+    <p
+      class="twin-i22tqs-Text-Button e8xjir80"
+    >
+      This is test
+    </p>
+  </a>
+</div>
+`;
+
+exports[`(components) atoms/button take default button's snap shot 1`] = `
+<div>
+  <button
+    class="twin-1fs6bgp-ButtonBox ewpnij50"
+  >
+    <p
+      class="twin-i22tqs-Text-Button e8xjir80"
+    >
+      This is test
+    </p>
+  </button>
+</div>
+`;
diff --git a/src/components/atoms/button/button.stories.tsx b/src/components/atoms/button/button.stories.tsx
@@ -0,0 +1,20 @@
+import type { ComponentStoryObj, ComponentMeta } from "@storybook/react";
+import { Button } from ".";
+
+type T = typeof Button;
+type Story = ComponentStoryObj<T>;
+
+const data = {
+  sentence: "This is test",
+};
+
+export default { args: { children: data.sentence }, component: Button } as ComponentMeta<T>;
+
+export const Default: Story = {};
+
+export const AnchorButton: Story = {
+  args: {
+    as: "a",
+    role: "button",
+  },
+};
diff --git a/src/components/atoms/button/button.test.tsx b/src/components/atoms/button/button.test.tsx
@@ -0,0 +1,31 @@
+import { composeStories } from "@storybook/testing-react";
+import "@testing-library/jest-dom";
+import { render } from "@testing-library/react";
+import * as stories from "./button.stories";
+
+const { Default, AnchorButton } = composeStories(stories);
+
+const options = { name: "This is test" };
+
+describe("(components) atoms/button", () => {
+  test("default button should be atom", () => {
+    const { container } = render(<Default />);
+    expect(container).toBeAtom();
+  });
+  test("to be [role=button]", () => {
+    const { getByRole } = render(<Default />);
+    expect(getByRole("button", options)).toBeInTheDocument();
+  });
+  test("to be [role=button]", () => {
+    const { getByRole } = render(<AnchorButton />);
+    expect(getByRole("button", options)).toBeInTheDocument();
+  });
+  test("take default button's snap shot", () => {
+    const { container } = render(<Default />);
+    expect(container).toMatchSnapshot();
+  });
+  test("take anchor button's snap shot", () => {
+    const { container } = render(<AnchorButton />);
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/components/atoms/button/index.tsx b/src/components/atoms/button/index.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import tw from "twin.macro";
+import { ButtonProperties } from "../../../models";
+import { Text } from "../text";
+
+const ButtonBox = tw.button`bg-white hover:bg-button-hover inline-block items-start px-8 py-2 gap-2.5 rounded-[2rem]`;
+
+const Button = <T extends AnyComponent>({
+  children,
+  boxStyles,
+  textStyles,
+  as,
+  ...rest
+}: ButtonProperties<T>): JSX.Element => (
+  <ButtonBox css={boxStyles} as={as} {...rest}>
+    <Text css={[tw`text-xs font-bold text-black`, textStyles]}>{children}</Text>
+  </ButtonBox>
+);
+
+export { Button };
diff --git a/src/components/atoms/text/__snapshots__/text.test.tsx.snap b/src/components/atoms/text/__snapshots__/text.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`(components) atoms/text snap shot 1`] = `
+exports[`(components) atoms/text take snap shot 1`] = `
 <div>
   <p
     class="twin-fqc7rr-Text e8xjir80"

diff --git a/src/components/atoms/text/text.stories.tsx b/src/components/atoms/text/text.stories.tsx
@@ -8,6 +8,6 @@ const data = {
   sentence: "This is test",
 };
 
-export default { args: { children: data.sentence }, component: Text, title: "Text" } as ComponentMeta<T>;
+export default { args: { children: data.sentence }, component: Text } as ComponentMeta<T>;
 
 export const Default: Story = {};
diff --git a/src/components/atoms/text/text.test.tsx b/src/components/atoms/text/text.test.tsx
@@ -7,17 +7,10 @@ const { Default } = composeStories(stories);
 
 describe("(components) atoms/text", () => {
   test("to be atoms", () => {
-    // eslint-disable-next-line unicorn/consistent-function-scoping
-    const asserts = (container: HTMLElement) => {
-      expect(container).toBeAtom();
-      expect(container).not.toBeMolecule();
-      expect(container).not.toBeOrganism();
-      expect(container).not.toBeTemplate();
-    };
     const { container } = render(<Default />);
-    asserts(container);
+    expect(container).toBeAtom();
   });
-  test("snap shot", () => {
+  test("take snap shot", () => {
     const { container } = render(<Default />);
     expect(container).toMatchSnapshot();
   });

diff --git a/src/components/templates/layout/__snapshots__/layout.test.tsx.snap b/src/components/templates/layout/__snapshots__/layout.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`(components) templates/layout snap shot 1`] = `
+exports[`(components) templates/layout take snap shot 1`] = `
 <div>
   <div
     class="twin-1m2qlh2-LayoutBox exwm4bw2"
@@ -12,7 +12,7 @@ exports[`(components) templates/layout snap shot 1`] = `
         class="twin-1vrhv8u-Main exwm4bw0"
         role="main"
       >
-        <main />
+        <section />
       </div>
     </div>
   </div>

diff --git a/src/components/templates/layout/index.tsx b/src/components/templates/layout/index.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import tw from "twin.macro";
 import type { LayoutProperties } from "../../../models";
 
-const LayoutBox = tw.div`min-h-screen bg-[#211A1A]`;
+const LayoutBox = tw.div`min-h-screen bg-background-gray`;
 
 const MainBox = tw.div`flex flex-col items-center`;
 

diff --git a/src/components/templates/layout/layout.stories.tsx b/src/components/templates/layout/layout.stories.tsx
@@ -5,9 +5,9 @@ type T = typeof Layout;
 type Story = ComponentStoryObj<T>;
 
 const data = {
-  node: <main />,
+  node: <section />,
 };
 
-export default { args: { children: data.node }, component: Layout, title: "Layout" } as ComponentMeta<T>;
+export default { args: { children: data.node }, component: Layout } as ComponentMeta<T>;
 
 export const Default: Story = {};
diff --git a/src/components/templates/layout/layout.test.tsx b/src/components/templates/layout/layout.test.tsx
@@ -10,7 +10,7 @@ describe("(components) templates/layout", () => {
     const { container } = render(<Default />);
     expect(container).toBeTemplate();
   });
-  test("snap shot", () => {
+  test("take snap shot", () => {
     const { container } = render(<Default />);
     expect(container).toMatchSnapshot();
   });

diff --git a/src/models/index.ts b/src/models/index.ts
@@ -1,3 +1,4 @@
+import type { CSSInterpolation } from "@emotion/serialize";
 import React from "react";
 
 export type _Field = {
@@ -25,6 +26,15 @@ type _Test = {
 
 export type Tests = Array<_Test>;
 
+export type ButtonProperties<T extends AnyComponent> = React.PropsWithChildren<
+  PropertiesOf<T> & {
+    boxStyles?: CSSInterpolation;
+    textStyles?: CSSInterpolation;
+    ref?: never;
+    as?: T;
+  }
+>;
+
 export type LayoutProperties = React.ComponentProps<React.ReactHTML["div"]> & {
   children: React.ReactNode;
 };
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,10 +1,15 @@
+const valiables = require("./src/styles/_variables.json");
+
 /** @type {import("@types/tailwindcss/tailwind-config").TailwindConfig} */
 module.exports = {
-  darkMode: "class",
+  darkMode: false,
   plugins: [],
   content: ["./src/**/*.{ts,tsx}"],
   theme: {
     extend: {
+      colors: {
+        ...valiables.global.color,
+      },
       fontFamily: {
         zen: ["Zen Kurenaido", "sans-serif"],
       },