Repository: MahiroK/-Mahiro--frontend-basic-2024-todoapp
Pull request #6: Task
Author: login: ghost
Created: 2025-05-05T12:17:05Z | Merged: 2025-05-29T11:57:20Z



Diff:
diff --git a/.gitignore b/.gitignore
index 3c3629e..41045c1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,3 @@
 node_modules
+
+**/.DS_Store
\ No newline at end of file
diff --git a/src/components/atoms/AddTaskButton/index.jsx b/src/components/Atoms/AddTaskButton/index.jsx
similarity index 93%
rename from src/components/atoms/AddTaskButton/index.jsx
rename to src/components/Atoms/AddTaskButton/index.jsx
index 5362981..fb94380 100644
--- a/src/components/atoms/AddTaskButton/index.jsx
+++ b/src/components/Atoms/AddTaskButton/index.jsx
@@ -5,7 +5,7 @@ import COLOR from "../../../variables/color.js";
 import TEXTS from "../../../variables/texts.js";
 import FONTFAMILY from "../../../variables/font_family.js";
 
-export const AddTaskButton = () => {
+const AddTaskButton = () => {
   return (
     <ButtonStyle>
       <ButtonImage src={Plus} />
@@ -13,6 +13,9 @@ export const AddTaskButton = () => {
     </ButtonStyle>
   );
 };
+
+export default AddTaskButton;
+
 const ButtonImage = styled.img`
   width: 20px;
   height: 20px;
diff --git a/src/components/Atoms/AddTaskButton/index.stories.jsx b/src/components/Atoms/AddTaskButton/index.stories.jsx
new file mode 100644
index 0000000..7078e70
--- /dev/null
+++ b/src/components/Atoms/AddTaskButton/index.stories.jsx
@@ -0,0 +1,6 @@
+import AddTaskButton from "./index.jsx";
+// ここで呼び出している
+//storybookで確認できるようにしている
+export default { component: AddTaskButton };
+
+export const Default = {};
diff --git a/src/components/atoms/CheckBox/index.jsx b/src/components/Atoms/CheckBox/index.jsx
similarity index 100%
rename from src/components/atoms/CheckBox/index.jsx
rename to src/components/Atoms/CheckBox/index.jsx
diff --git a/src/components/atoms/CheckBox/index.stories.jsx b/src/components/Atoms/CheckBox/index.stories.jsx
similarity index 50%
rename from src/components/atoms/CheckBox/index.stories.jsx
rename to src/components/Atoms/CheckBox/index.stories.jsx
index 8155bd8..998155b 100644
--- a/src/components/atoms/CheckBox/index.stories.jsx
+++ b/src/components/Atoms/CheckBox/index.stories.jsx
@@ -1,5 +1,5 @@
 import { CheckBox } from "./index";
 
-export default { component: CheckBox, title: "Atoms/CheckBox" };
+export default { component: CheckBox };
 
 export const Default = {};
diff --git a/src/components/atoms/Editbutton/index.jsx b/src/components/Atoms/EditButton/index.jsx
similarity index 100%
rename from src/components/atoms/Editbutton/index.jsx
rename to src/components/Atoms/EditButton/index.jsx
diff --git a/src/components/atoms/Editbutton/index.stories.jsx b/src/components/Atoms/EditButton/index.stories.jsx
similarity index 75%
rename from src/components/atoms/Editbutton/index.stories.jsx
rename to src/components/Atoms/EditButton/index.stories.jsx
index 0fbb1f9..6540b5d 100644
--- a/src/components/atoms/Editbutton/index.stories.jsx
+++ b/src/components/Atoms/EditButton/index.stories.jsx
@@ -1,4 +1,4 @@
-import { EditButton } from "./index.jsx";
+import { EditButton } from "./index";
 export default { component: EditButton };
 
 export const Default = {
diff --git a/src/components/atoms/input/index.jsx b/src/components/Atoms/Input/index.jsx
similarity index 92%
rename from src/components/atoms/input/index.jsx
rename to src/components/Atoms/Input/index.jsx
index 2d37c4a..1880f70 100644
--- a/src/components/atoms/input/index.jsx
+++ b/src/components/Atoms/Input/index.jsx
@@ -3,9 +3,8 @@ import COLOR from "../../../variables/color";
 import FONTFAMILY from "../../../variables/font_family";
 import TEXTS from "../../../variables/texts";
 import styled from "styled-components";
-import { use } from "react";
 
-export const input = (onEditComplete, defaultValue) => {
+export const Input = ({ onEditComplete, defaultValue }) => {
   const inputRef = useRef();
   const handleBlur = () => {
     const value = inputRef.current.value;
diff --git a/src/components/atoms/input/index.stories.jsx b/src/components/Atoms/Input/index.stories.jsx
similarity index 61%
rename from src/components/atoms/input/index.stories.jsx
rename to src/components/Atoms/Input/index.stories.jsx
index 71d6982..cb65a47 100644
--- a/src/components/atoms/input/index.stories.jsx
+++ b/src/components/Atoms/Input/index.stories.jsx
@@ -1,6 +1,6 @@
-import { input } from "./index";
+import { Input } from "./index";
 // ここで呼び出している
 //storybookで確認できるようにしている
-export default { component: input };
+export default { component: Input };
 
 export const Default = {};
diff --git a/src/components/atoms/Title/index.jsx b/src/components/Atoms/Title/index.jsx
similarity index 95%
rename from src/components/atoms/Title/index.jsx
rename to src/components/Atoms/Title/index.jsx
index 4f1080d..c179865 100644
--- a/src/components/atoms/Title/index.jsx
+++ b/src/components/Atoms/Title/index.jsx
@@ -7,10 +7,12 @@ import FONTFAMILY from "../../../variables/font_family.js";
 import BREAKPOINT from "../../../variables/breakpoint.js";
 
 // 画面に表示する部分を作っている　exportを書くことによって、外部からでも参照ができるようになる
-export const Title = () => {
+const Title = () => {
   return <StyledText>SIMPLE TODO APP</StyledText>;
 };
 
+export default Title;
+
 // CSS部分　スタイリングを行う
 // styled-componentsを使っている
 const StyledText = styled.div`
diff --git a/src/components/atoms/Title/index.stories.jsx b/src/components/Atoms/Title/index.stories.jsx
similarity index 81%
rename from src/components/atoms/Title/index.stories.jsx
rename to src/components/Atoms/Title/index.stories.jsx
index f8139a6..ceb9ce7 100644
--- a/src/components/atoms/Title/index.stories.jsx
+++ b/src/components/Atoms/Title/index.stories.jsx
@@ -1,4 +1,4 @@
-import { Title } from "./index";
+import Title from "./index";
 // ここで呼び出している
 //storybookで確認できるようにしている
 export default { component: Title };
diff --git a/src/components/Molecules/Task/index.jsx b/src/components/Molecules/Task/index.jsx
new file mode 100644
index 0000000..9f8fa05
--- /dev/null
+++ b/src/components/Molecules/Task/index.jsx
@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import COLOR from "../../../variables/color";
+import FONTFAMILY from "../../../variables/font_family";
+import TEXT from "../../../variables/texts";
+
+import { CheckBox } from "../../Atoms/CheckBox/index";
+import { EditButton } from "../../Atoms/EditButton/index";
+import { Input } from "../../Atoms/Input/index";
+
+export const Task = ({
+  onTaskNameChange,
+  onTaskComplete,
+  taskName,
+  defaultIsEditing,
+}) => {
+  const [isEditing, setIsEditing] = useState(defaultIsEditing);
+
+  const onEditComplete = (value) => {
+    setIsEditing(false);
+    onTaskNameChange(value);
+  };
+
+  const onEditButtonClick = () => {
+    setIsEditing(true);
+  };
+
+  return (
+    <StyledWrapper>
+      <CheckBox onClick={onTaskComplete} />
+      {isEditing ? (
+        <Input onEditComplete={onEditComplete} defaultValue={taskName} />
+      ) : (
+        <StyleTextButton>
+          <StyledText>{taskName}</StyledText>
+          <EditButton onClick={onEditButtonClick} />
+        </StyleTextButton>
+      )}
+    </StyledWrapper>
+  );
+};
+
+const StyleTextButton = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+const StyledWrapper = styled.div`
+  display: flex;
+  gap: 10px;
+  padding: 2px 6px;
+`;
+
+const StyledText = styled.p`
+  color: ${COLOR.LIGHT_GRAY};
+  font-family: ${FONTFAMILY.NOTO_SANS};
+  ${TEXT.S};
+  margin: 0;
+`;
diff --git a/src/components/Molecules/Task/index.stories.jsx b/src/components/Molecules/Task/index.stories.jsx
new file mode 100644
index 0000000..a14cd38
--- /dev/null
+++ b/src/components/Molecules/Task/index.stories.jsx
@@ -0,0 +1,11 @@
+import { Task } from "./index";
+export default { component: Task };
+
+export const Default = {
+  args: {
+    onTaskNameChange: (value) => console.log("Task name changed to:", value),
+    onTaskComplete: () => console.log("Task completed"),
+    taskName: "taskname",
+    defaultIsEditing: false,
+  },
+};
diff --git a/src/components/atoms/AddTaskButton/index.stories.jsx b/src/components/atoms/AddTaskButton/index.stories.jsx
deleted file mode 100644
index e2073e6..0000000
--- a/src/components/atoms/AddTaskButton/index.stories.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { AddTaskButton } from "./index.jsx";
-// ここで呼び出している
-//storybookで確認できるようにしている
-export default { component: AddTaskButton, title: "Atoms/AddTaskButton" };
-
-export const Default = {};


Reviews:
user: login: KugaChihiro
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-08T07:59:13Z
user: login: luck-tech
state: CHANGES_REQUESTED
author_association: NONE
submitted_at: 2025-05-14T16:15:41Z
user: login: luck-tech
state: CHANGES_REQUESTED
author_association: NONE
submitted_at: 2025-05-26T16:34:55Z

Review comments:
diff_hunk: @@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import COLOR from "../../../variables/color";
+import FONTFAMILY from "../../../variables/font_family";
+import TEXT from "../../../variables/texts";
+
+import CheckBox from "../../Atoms/CheckBox";
+import EditButton from "../../Atoms/EditButton";
+import Input from "../../Atoms/input";
path: src/components/Molecules/Task/index.jsx
user: login: KugaChihiro
body: export const で定義したものは全て{}をつけてインポートする必要があります。
Chromaticのエラーはこれが原因の可能性があります。

例）import {CheckBox} from "../../Atoms/CheckBox";
created_at: 2025-05-08T07:02:04Z
author_association: NONE
diff_hunk: @@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import COLOR from "../../../variables/color";
+import FONTFAMILY from "../../../variables/font_family";
+import TEXT from "../../../variables/texts";
+
+import CheckBox from "../../Atoms/CheckBox";
+import EditButton from "../../Atoms/EditButton";
+import Input from "../../Atoms/input";
path: src/components/Molecules/Task/index.jsx
user: login: KugaChihiro
body: export default の場合は{}なしでOKです
created_at: 2025-05-08T07:03:46Z
author_association: NONE
diff_hunk: @@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import COLOR from "../../../variables/color";
+import FONTFAMILY from "../../../variables/font_family";
+import TEXT from "../../../variables/texts";
+
+import CheckBox from "../../Atoms/CheckBox";
+import EditButton from "../../Atoms/EditButton";
+import Input from "../../Atoms/input";
+
+const Task = ({
+  onTaskNameChange,
+  onTaskComplete,
+  taskName,
+  defaultIsEditing,
path: src/components/Molecules/Task/index.jsx
user: login: KugaChihiro
body: 設計書によると、以下のように初期値を与える必要があるため、変更をお願いします。
taskName = "", defaultIsEditing = false,
created_at: 2025-05-08T07:04:57Z
author_association: NONE
diff_hunk: @@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import COLOR from "../../../variables/color";
+import FONTFAMILY from "../../../variables/font_family";
+import TEXT from "../../../variables/texts";
+
+import CheckBox from "../../Atoms/CheckBox";
path: src/components/Molecules/Task/index.jsx
user: login: KugaChihiro
body: 見たところによるとAtoms ⇒ atomsな気がします
created_at: 2025-05-08T07:47:05Z
author_association: NONE
diff_hunk: @@ -1 +1,4 @@
 node_modules
+
+src/components/Atoms/.DS_Store
+src/components/.DS_Store
path: .gitignore
user: login: luck-tech
body: これだとディレクトリ追加するたびに書く必要が出てきて大変なので、正規表現を使ってこう書こう

```suggestion
**/.DS_Store
```
created_at: 2025-05-14T15:41:44Z
author_association: NONE
diff_hunk: @@ -5,14 +5,14 @@ import COLOR from "../../../variables/color.js";
 import TEXTS from "../../../variables/texts.js";
 import FONTFAMILY from "../../../variables/font_family.js";
 
-export const AddTaskButton = () => {
+export default function AddTaskButton() {
path: src/components/Atoms/AddTaskButton/index.jsx
user: login: luck-tech
body: こう書いたらマズいのでは
設計思想といって、基本的に書き方は他のファイルと同じように書いた方が統一性があって良いね
created_at: 2025-05-14T15:43:06Z
author_association: NONE
path: src/components/Atoms/input/index.jsx
user: login: luck-tech
body: これ前言った気がするけど、Inputであるべきでは？他のフォルダと統一性がないので
created_at: 2025-05-14T15:44:45Z
author_association: NONE
diff_hunk: @@ -5,12 +5,13 @@ import TEXTS from "../../../variables/texts";
 import styled from "styled-components";
 import { use } from "react";
 
-export const input = (onEditComplete, defaultValue) => {
+const input = ({ onEditComplete, defaultValue }) => {
path: src/components/Atoms/input/index.jsx
user: login: luck-tech
body: Reactコンポーネントは頭文字大文字で始めるべきだね
Taskの方ではInputってimportしてるじゃん？それはReactコンポーネントが頭文字大文字じゃないと認識されないからだったよね。
ってことは、そもそも元のファイルで頭文字が小文字なのわけわからなくない？
created_at: 2025-05-14T15:47:16Z
author_association: NONE
diff_hunk: @@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import COLOR from "../../../variables/color";
+import FONTFAMILY from "../../../variables/font_family";
+import TEXT from "../../../variables/texts";
+
+import CheckBox from "../../Atoms/CheckBox";
+import EditButton from "../../Atoms/EditButton";
+import Input from "../../Atoms/input";
+
+const Task = ({
+  onTaskNameChange,
+  onTaskComplete,
+  taskName = "",
+  defaultIsEditing = false,
+}) => {
+  const [isEditing, setIsEditing] = useState(defaultIsEditing);
+
+  const onEditComplete = (value) => {
+    setIsEditing(false);
+    onTaskNameChange(value);
+  };
+
+  const onEditButtonClick = () => {
+    setIsEditing(true);
+  };
+
+  return (
+    <StyledWrapper>
+      <Left>
+        <CheckBox onClick={onTaskComplete} />
+        {isEditing ? (
+          <Input onEditComplete={onEditComplete} defaultValue={taskName} />
+        ) : (
+          <StyledText>{taskName}</StyledText>
+        )}
+      </Left>
+      {!isEditing && <EditButton onClick={onEditButtonClick} />}
+    </StyledWrapper>
+  );
+};
+export default Task;
+
+const Left = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+`;
path: src/components/Molecules/Task/index.jsx
user: login: luck-tech
body: Leftという割にはやってることがLeftじゃないのが気になるかなー
多分位置的にってことだと思うんだけど、UIが見れない状態でコードを見た時に、意味がわかりやすい命名がベストだよね
created_at: 2025-05-14T15:51:18Z
author_association: NONE
diff_hunk: @@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import COLOR from "../../../variables/color";
+import FONTFAMILY from "../../../variables/font_family";
+import TEXT from "../../../variables/texts";
+
+import CheckBox from "../../Atoms/CheckBox";
+import EditButton from "../../Atoms/EditButton";
+import Input from "../../Atoms/input";
+
+const Task = ({
+  onTaskNameChange,
+  onTaskComplete,
+  taskName = "",
+  defaultIsEditing = false,
+}) => {
+  const [isEditing, setIsEditing] = useState(defaultIsEditing);
+
+  const onEditComplete = (value) => {
+    setIsEditing(false);
+    onTaskNameChange(value);
+  };
+
+  const onEditButtonClick = () => {
+    setIsEditing(true);
+  };
+
+  return (
+    <StyledWrapper>
+      <Left>
+        <CheckBox onClick={onTaskComplete} />
+        {isEditing ? (
+          <Input onEditComplete={onEditComplete} defaultValue={taskName} />
+        ) : (
+          <StyledText>{taskName}</StyledText>
+        )}
+      </Left>
+      {!isEditing && <EditButton onClick={onEditButtonClick} />}
path: src/components/Molecules/Task/index.jsx
user: login: luck-tech
body: isEditingの三項演算子が二つ存在しているのが冗長に感じるね
Leftがあるから、こういう書き方をしていると思うんだけど、そもそもLeftって要るかな？
Left消せばこれ一まとまりで書けると思うので、挑戦してみてください。
created_at: 2025-05-14T16:00:56Z
author_association: NONE
path: src/components/Organisms/TodoCard/index.jsx
user: login: luck-tech
body: TodoCardのコミットはこのブランチに含めちゃダメだね
TodoCardのブランチを切って、そこでコミットするべき
created_at: 2025-05-14T16:02:29Z
author_association: NONE
path: src/components/Organisms/TodoCard/index.stories.jsx
user: login: luck-tech
body: こちらも同様。
もうコミットしてしまったものを、どうやって消せばいいかについては2通り方法があって、

1. 普通に削除してコミットする（非推奨。コミットした履歴が残り続けるため）
2. git rebase...で直していく（推奨。コミット履歴を綺麗にできる）

できればgit rebaseにチャレンジしてほしいね。[こちら](https://zenn.dev/ka_projects/articles/929b8c9d47ab47)の記事を参考に。コミットのハッシュ値は画像のように、commitsタブから確認できます。

![スクリーンショット 2025-05-15 1 13 38](https://github.com/user-attachments/assets/73294f99-f01a-4831-a2a1-07e7f06eda02)
created_at: 2025-05-14T16:11:38Z
author_association: NONE
path: src/components/atoms/Molecules2/index.jsx
user: login: luck-tech
body: このフォルダはなんだ？
今ciでfailしているのも、このフォルダ周りがキッカケぽい
created_at: 2025-05-26T16:34:44Z
author_association: NONE

PR comments:
user: login: KugaChihiro
created_at: 2025-05-08T06:50:49Z
body: まずは[Chromatic]で失敗しているので、そちらを修正しましょう。
(https://github.com/MahiroK/-Mahiro--frontend-basic-2024-todoapp/actions/workflows/chromatic.yml)

「non-zero exit code」というメッセージは、コマンド（この場合は yarn run build-storybook）が正常に完了せず失敗したことを示しているようです。
author_association: NONE
user: login: KugaChihiro
created_at: 2025-05-08T07:45:53Z
body: components/Molecules/Task/index.jsxかMolecules2/index.jsxのどちらを見ればよいのかわからなかったため、Molecules2が最新のコードの場合と仮定して気になったことを挙げます。

1. ディレクトリ構成の一貫性
Task コンポーネントの最新のファイルは、components/Molecules2/Task/index.jsx に配置しなおし、Storybook 側の設定やインポートもそれに合わせる必要があります。（間にTaskの階層がないため、作成しましょう。他の構造と合わせた方が混乱が少ないです）
また、components/Molecules/Task/index.jsx のような古いファイルが残っていると混乱を招くため、構成を整理しましょう。

2. 相対パスの調整
コンポーネントの位置が変わると、import 文での相対パスも当然変わります。たとえば ../../atoms/CheckBox は、1階層深くなれば ../../../atoms/CheckBox のように調整が必要です。
このパスが正しくないと、undefined のまま読み込まれ、Storybookでは「component annotation is missing」などのエラーが出る原因になります。

3. 大文字・小文字の統一
import { Input } from "../../atoms/input"; のように、小文字・大文字が混在していると、エラー及びミスの原因になります。
加えて、input を定義した過去のこーそを参照して export const Input = ... と書かれているか、ファイル名と大文字小文字が一致しているかを確認しておくと安心です。

命名はたとえば以下のように統一するとミスを減らせます：
components/Atoms/Input/index.jsx
import { Input } from "../../Atoms/Input"

＜次のステップ＞
・Task のファイルの置き場所を確定し、それに沿ってStorybookの title や import を揃える
・相対パスをすべて見直す
・atoms 内の各コンポーネントが、適切に export されているかチェック
・可能であれば、大文字小文字のルールをプロジェクト全体で統一する
author_association: NONE
user: login: KugaChihiro
created_at: 2025-05-08T07:48:56Z
body: Figmaを見ると鉛筆アイコンのボタン（EditButton）が右側に配置されています。
正しい位置に配置しましょう。
author_association: NONE
user: login: KugaChihiro
created_at: 2025-05-13T13:44:13Z
body: LGTM!
author_association: NONE
user: login: luck-tech
created_at: 2025-05-29T11:57:10Z
body: LGTM
author_association: NONE