Feature/#11 entry create

src/app/(journal)/[id].tsx

@@ -144,7 +144,14 @@ export default function JournalScreen() {
           ],
         }}
       />
-      <EntryListView id={id} searchText={searchText} sortKey={sortKey} />
+      {/* TODO: 空の場合の処理を追加する */}
+      {/* エントリー一覧にはheaderTitleのデータは含まないので src/app/(journal)/entry/[id].tsx と混同しないように。 */}
+      <EntryListView
+        id={id}
+        journalName={name}
+        searchText={searchText}
+        sortKey={sortKey}
+      />
     </>
   );
 }

src/app/(journal)/create.tsx

@@ -24,11 +24,11 @@ export default function JournalCreateScreen() {
     formDisabled,
   } = useJournalField();
 
-  const handleCreate = async () => {
-    const { id, name } = await createJournal();
+  const handleJournalCreate = async () => {
+    const { id: newJournalId, name } = await createJournal();
 
     // replace でスタックせずにジャーナル詳細画面からジャーナル一覧へ戻れるようにする
-    router.replace(`/(journal)/${id}?name=${name}`);
+    router.replace(`/(journal)/${newJournalId}?name=${name}`);
   };
 
   return (
@@ -37,7 +37,7 @@ export default function JournalCreateScreen() {
         options={{
           title: "New Journal",
           headerRight: () => (
-            <Pressable onPress={handleCreate} disabled={formDisabled}>
+            <Pressable onPress={handleJournalCreate} disabled={formDisabled}>
               <SymbolView
                 name="checkmark"
                 tintColor={

src/app/(journal)/entry/[id].tsx

@@ -64,6 +64,7 @@ export default function EntryDetailScreen() {
           ],
         }}
       />
+      {/* TODO: 空の場合の処理を追加する */}
       {entry && <EntryDetailView entry={entry} />}
     </>
   );

src/app/(journal)/entry/create.tsx

@@ -0,0 +1,79 @@
+import {
+  PlatformColor,
+  Pressable,
+  Text as RNText,
+  StyleSheet,
+  View,
+} from "react-native";
+
+import { useLiveQuery } from "drizzle-orm/expo-sqlite";
+import { Stack, useLocalSearchParams, useRouter } from "expo-router";
+import { SymbolView } from "expo-symbols";
+
+import { EntryCreateView } from "@/components/entry/entry-create-view";
+import { getFieldsQuery } from "@/db/queries/fields";
+import { useEntry } from "@/utils/entry/use-entry";
+
+/**
+ * エントリー作成
+ */
+export default function EntryCreateScreen() {
+  const router = useRouter();
+
+  const { id: jounalId, name } = useLocalSearchParams<{
+    id: string;
+    name: string;
+  }>();
+
+  const { data: fields } = useLiveQuery(getFieldsQuery(jounalId));
+  const { valuesRef, setValue, createEntry } = useEntry(fields);
+
+  const handleEntryCreate = async () => {
+    const { id: newEntryId } = await createEntry(jounalId);
+    router.replace(`/(journal)/entry/${newEntryId}`);
+  };
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          headerTitle: () => (
+            <View style={styles.headerTitle}>
+              <RNText style={styles.title}>New Entry</RNText>
+              <RNText style={styles.subtitle}>{name}</RNText>
+            </View>
+          ),
+          headerRight: () => (
+            // エントリー作成では disabled は設定しない
+            <Pressable onPress={handleEntryCreate}>
+              <SymbolView
+                name="checkmark"
+                tintColor={PlatformColor("systemIndigo")}
+              />
+            </Pressable>
+          ),
+        }}
+      />
+      <EntryCreateView
+        id={jounalId}
+        values={valuesRef.current}
+        setValue={setValue}
+      />
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  headerTitle: {
+    alignItems: "center",
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: "600",
+    color: PlatformColor("label"),
+  },
+  subtitle: {
+    fontSize: 14,
+    color: PlatformColor("secondaryLabel"),
+  },
+});

src/app/(journal)/index.tsx

@@ -27,6 +27,7 @@ export default function JournalListScreen() {
           ),
         }}
       />
+      {/* TODO: 空の場合の処理を追加する */}
       <JournalView />
     </>
   );

src/app/explore.tsx

@@ -1,6 +1,8 @@
 import { PlatformColor, View } from "react-native";
 
-import { Host, Text } from "@expo/ui/swift-ui";
+import { Host } from "@expo/ui/swift-ui";
+
+import { AllformList } from "@/components/all-form-list";
 
 export default function ExploreScreen() {
   return (
@@ -9,7 +11,7 @@ export default function ExploreScreen() {
         style={{ flex: 1, backgroundColor: PlatformColor("systemBackground") }}
         useViewportSizeMeasurement
       >
-        <Text>Explore</Text>
+        <AllformList />
       </Host>
     </View>
   );

src/components/all-form-list.tsx

@@ -0,0 +1,45 @@
+import { List, Section } from "@expo/ui/swift-ui";
+import { frame, listStyle } from "@expo/ui/swift-ui/modifiers";
+
+import { EntryNumber } from "./field/emtry-number";
+import { EntryCheck } from "./field/entry-check";
+import { EntryDate } from "./field/entry-date";
+import { EntryLocation } from "./field/entry-location";
+import { EntryLongText } from "./field/entry-long-text";
+import { EntryMedia } from "./field/entry-media";
+import { EntryText } from "./field/entry-text";
+import { EntryTime } from "./field/entry-time";
+
+const edit = false;
+/**
+ * 全フィールドタイプのフォームサンプル
+ */
+export function AllformList() {
+  return (
+    <List
+      modifiers={[
+        frame({ maxWidth: 9999, maxHeight: 9999 }),
+        listStyle("plain"),
+      ]}
+    >
+      <Section>
+        <EntryText
+          label="text"
+          defaultValue="Lorem ipsum dolor sit amet"
+          edit={edit}
+        />
+        <EntryLongText
+          label="longText"
+          defaultValue="Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis atque hic accusamus sint saepe deleniti provident minus eum? Eaque repellat nobis dignissimos sapiente temporibus officia, alias similique illum ullam necessitatibus."
+          edit={edit}
+        />
+        <EntryNumber label="number" edit={edit} />
+        <EntryCheck label="checklist" defaultValue={true} edit={edit} />
+        <EntryDate label="date" edit={edit} />
+        <EntryTime label="time" edit={edit} />
+        <EntryMedia label="media" edit={edit} />
+        <EntryLocation label="location" edit={edit} />
+      </Section>
+    </List>
+  );
+}

src/components/entry/entry-create-view.tsx

@@ -0,0 +1,57 @@
+import { PlatformColor, View } from "react-native";
+
+import { Host, List, Section } from "@expo/ui/swift-ui";
+import { frame, listStyle } from "@expo/ui/swift-ui/modifiers";
+import { useLiveQuery } from "drizzle-orm/expo-sqlite";
+
+import { getFieldsQuery } from "@/db/queries/fields";
+import { formatDate } from "@/utils/date";
+import { FieldValue } from "@/utils/entry/use-entry";
+
+import { EntryFieldItem } from "./entry-field-item";
+
+type Props = {
+  /** ジャーナル id */
+  id: string;
+  /** 現在のフィールドの値 */
+  values: Record<string, FieldValue>;
+  /** フィールドに値を格納する関数 */
+  setValue: (id: string, value: FieldValue) => void;
+};
+
+/**
+ * エントリー作成画面
+ */
+export function EntryCreateView({ id, values, setValue }: Props) {
+  const now = Date.now();
+
+  const { data: fields } = useLiveQuery(getFieldsQuery(id));
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Host
+        style={{ flex: 1, backgroundColor: PlatformColor("systemBackground") }}
+        useViewportSizeMeasurement
+      >
+        <List
+          modifiers={[
+            frame({ maxWidth: 9999, maxHeight: 9999 }),
+            listStyle("plain"),
+          ]}
+        >
+          <Section title={formatDate(now)}>
+            {fields.map((field) => (
+              <EntryFieldItem
+                key={field.id}
+                field={field}
+                value={values[field.id]}
+                setValue={setValue}
+                edit
+              />
+            ))}
+          </Section>
+        </List>
+      </Host>
+    </View>
+  );
+}

src/components/entry/entry-detail.tsx

@@ -8,22 +8,19 @@ import {
   Section,
   Spacer,
   Text,
-  VStack,
 } from "@expo/ui/swift-ui";
-import {
-  font,
-  foregroundStyle,
-  frame,
-  listStyle,
-} from "@expo/ui/swift-ui/modifiers";
+import { frame, listStyle } from "@expo/ui/swift-ui/modifiers";
 
 import { EntryDetailObj } from "@/db/queries/entries";
 import { formatDate } from "@/utils/date";
 
+import { EntryFieldItem } from "./entry-field-item";
+
 type Props = {
   /** エントリーデータ */
   entry: EntryDetailObj;
 };
+
 /**
  * エントリー詳細画面
  */
@@ -63,20 +60,7 @@ export function EntryDetailView({ entry }: Props) {
             }
           >
             {sorted.map((v) => (
-              <VStack key={v.id} alignment="leading" spacing={4}>
-                <Text
-                  modifiers={[
-                    font({ size: 12 }),
-                    foregroundStyle({
-                      type: "hierarchical",
-                      style: "secondary",
-                    }),
-                  ]}
-                >
-                  {v.field.label}
-                </Text>
-                <Text>{v.value ?? ""}</Text>
-              </VStack>
+              <EntryFieldItem key={v.id} field={v.field} value={v.value} />
             ))}
           </Section>
         </List>

src/components/entry/entry-field-item.tsx

@@ -0,0 +1,60 @@
+import { EntryNumber } from "@/components/field/emtry-number";
+import { EntryCheck } from "@/components/field/entry-check";
+import { EntryDate } from "@/components/field/entry-date";
+import { EntryLocation } from "@/components/field/entry-location";
+import { EntryLongText } from "@/components/field/entry-long-text";
+import { EntryMedia } from "@/components/field/entry-media";
+import { EntryText } from "@/components/field/entry-text";
+import { EntryTime } from "@/components/field/entry-time";
+import { FieldType } from "@/core/constants";
+import type { FieldlObj } from "@/db/schemas";
+import { type FieldValue } from "@/utils/entry/use-entry";
+
+type Props = {
+  /** フィールド定義 */
+  field: FieldlObj;
+  /** 現在の値 */
+  value: FieldValue;
+  /** 値変更時のコールバック（edit=true のときのみ必要） */
+  setValue?: (id: string, value: FieldValue) => void;
+  /** 入力かどうか */
+  edit?: boolean;
+};
+
+/**
+ * フィールドタイプによってコンポーネントを切り替えるコンポーネント
+ * React Compiler がこの単位で再レンダリングを最適化する
+ */
+export function EntryFieldItem({
+  field,
+  value,
+  setValue,
+  edit = false,
+}: Props) {
+  const shared = {
+    label: field.label,
+    onValueChange: setValue
+      ? <T extends FieldValue>(v: T) => setValue(field.id, v)
+      : undefined,
+    edit,
+  };
+
+  switch (field.type as FieldType) {
+    case "text":
+      return <EntryText {...shared} defaultValue={value as string} />;
+    case "longText":
+      return <EntryLongText {...shared} defaultValue={value as string} />;
+    case "number":
+      return <EntryNumber {...shared} defaultValue={(value ?? 0) as number} />;
+    case "check":
+      return <EntryCheck {...shared} defaultValue={value as boolean} />;
+    case "date":
+      return <EntryDate {...shared} defaultValue={value as Date} />;
+    case "time":
+      return <EntryTime {...shared} defaultValue={value as Date} />;
+    case "media":
+      return <EntryMedia {...shared} />;
+    case "location":
+      return <EntryLocation {...shared} />;
+  }
+}