DDD

[baronTommy]

https://github.com/almin/almin

[baronTommy]

サンプルコード

// ui/component/environments/Task.tsx

import React, { FC, lazy } from "react";
const C = lazy(() => import("~/components/ecosystems/Task"));

export const Component: FC = () => <C />;

// ui/component/ecosystem/Task/Container
import {Template} from ".";
import {useTask} from "~/useCase";

export const Task: FC = () => <Template {...useTask()} />

// ui/component/ecosystem/Task/Template
// カウンターだけど...

import React from "react";

import {
  NormalButton,
  SimpleLabel,
  NormalButtonProps,
  SimpleLabelProps,
  Decoration
} from "@app/components/lib/presentational/atoms";

const HandleCountC = {
  CurrentValue: SimpleLabel,
  Decoration,
  Button: {
    Set5: NormalButton,
    Increment: NormalButton,
    Decrement: NormalButton
  }
};

type HandleCountProps = {
  value: SimpleLabelProps["value"];
  set5: NormalButtonProps["onClick"];
  onDecrement: NormalButtonProps["onClick"];
  onIncrement: NormalButtonProps["onClick"];
};

export const HandleCount: React.FC<HandleCountProps> = ({
  value,
  set5,
  onDecrement,
  onIncrement,
}) => (
  <>
    <HandleCountC.Decoration>
      <HandleCountC.CurrentValue value={value} />
    </HandleCountC.Decoration>

    <HandleCountC.Button.Set5 onClick={set5}>
      5をセット
    </HandleCountC.Button.Set5>

    <HandleCountC.Button.Increment onClick={onIncrement}>
      カウントアップ 👍
    </HandleCountC.Button.Increment>

    <HandleCountC.Button.Decrement onClick={onDecrement}>
      カウントダウン 👇
    </HandleCountC.Button.Decrement>
  </>
);

// state/

// XState

// useCase/useTask.ts

import {service} from 'domain/Task'
import {adapter, PWA} from 'infra/Task/adapter'

const TaskRepository = adapter(PWA)

service.save(task, TaskRepository)
setTask(service.fetch(task, TaskRepository))

// infra/Identity
const PWA = Symbol('PWA')
const Default = Symbol('Default')

// infra/Task/adapter
const adapter = (ID: Symbol) => [
    {ID: PWA, Repository: Repository.LocalStorage}
    {ID: Default: Repository: Repository.GQL}
]

// domain/Task/service

const save = (task: Task, TaskRepository: TaskRepository) => TaskRepository.save(task)

[baronTommy]

ディレクトリ構成

ui/
    container/
        App
        ErrorBoundary
        Page
    component/
        environments/
            Task
        ecosystem/
            Task
        organisms/
            List
            Form
            Search
        molecules/
        atoms/
            Button/
                LikeButton
                FavoriteButton
            Input/
                SimpleInput

state/
    loginUser
    progressBar
    loading
    route

useCase/
    useTask.ts
        domain.service.CRUD(data, Task.Repository.Save)

infra/
    Identity
    Task
        adapter (インターフェースを揃えるのが目的)
        Repository
            GQL/
            Location
            LocalStorage
            StaticValue

domain/
    Task/
        type (GQL?)
            Task
            TaskRepository
            type TaskRepository = (p: Task) => Task
        validation
            taskName.length < 10
        service/
            CRUD