Forem: 鳥山明

Create a commit message in an interactive format. with Deno

鳥山明 — Wed, 16 Nov 2022 04:21:02 +0000

https://github.com/bird-studio/hoipoi_capsule

Hoipoi capsule

What is this?

Create a commit message in an interactive format.

Sorry, your browser doesn't support embedded videos.

Try

# Go to git directory
brew install deno

deno run --allow-net --allow-write --allow-run "https://deno.land/x/hoipoi_capsule/demo/fill_in_commit_message/conventionalcommits_style.ts?source"
cat .git/COMMIT_EDITMSG

Use

Run with Git hook.

It works without gh.gh is used to obtain github issues.Please complete the gh
setup in advance.

brew install deno gh

Prepare Git hook.

mkdir .githooks

cat <<EOF > .githooks/prepare-commit-msg
#!/bin/sh

exec < /dev/tty deno run --allow-net --allow-write --allow-run "https://deno.land/x/hoipoi_capsule/demo/fill_in_commit_message/conventionalcommits_style.ts?source"

EOF

git config --local core.hooksPath .githooks
chmod +x .githooks/prepare-commit-msg

Execution.

touch myFile.txt
git add myFile.txt
git commit

Customize

Here is a reference.

conventionalcommits_style

import * as hoipoiCapsule from "https://deno.land/x/hoipoi_capsule/mod.ts";

const commitMessageTemplate = `{{type}}({{scope}}): {{summary}}

{{body}}

BREAKING CHANGE: {{breakingChange}}`;

hoipoiCapsule.useCase.fillInCommitMessage.run({
  commitMessageTemplate,
  questionList: [
    {
      /**
       * The answer applies to the {{type}} part of commitMessageTemplate.
       */
      target: "type",
      /**
       * Pre-prepared questions.
       */
      q: hoipoiCapsule.preset.fillInCommitMessage.conventionalcommits.qMap.type,

      /**
       * Thus, you can also create your own questions.
       */
      //   q: typeQ,

      /**
       * Modify the commit message.
       * Use this function when a message is unanswered, for example.
       */
      fixCommitMessage: (p) => {
        if (p.answerMap["type"] === "???") {
          return p.commitMessage.replace(/\r?\n{2,}/, "\n").trim();
        }
        return p.commitMessage;
      },
    },
  ],
});

/**
 * Please check here.
 * https://github.com/c4spar/deno-cliffy
 */
const typeQ = () =>
  hoipoiCapsule.userInterface.prompt.Select.prompt({
    message: "Select type.",
    search: true,
    options: [
      {
        name:
          "Build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)",
        value: "Build",
      },
      {
        name:
          "CI: Changes to our CI configuration files and scripts (examples: CircleCi, SauceLabs)",
        value: "CI",
      },
      { name: "Docs: Documentation only changes", value: "Docs" },
      { name: "Feat: A new feature", value: "Feat" },
      { name: "Fix: A bug fix", value: "Fix:" },
      { name: "Perf: A code change that improves performance", value: "Perf" },
      {
        name:
          "Refactor: A code change that neither fixes a bug nor adds a feature",
        value: "Refactor",
      },
      {
        name: "Test: Adding missing tests or correcting existing tests",
        value: "Test",
      },
    ],
  });

Convenient Use

gitmoji_style

Sorry, your browser doesn't support embedded videos.

Next.js template

鳥山明 — Tue, 08 Nov 2022 12:44:46 +0000

https://github.com/akira-toriyama/next.js-tpl

Next.js template

App

Displays the data registered in Hygraph.

Design system

This is a design system, but it does not use styles.

React has various ways to apply styles, such as css in js, css module, comport library, etc., and there is no best practice. Please consider the style in consideration of the contents of your application.

How to use

Required libraries

asdf
docker

First.

Prepare environment variables and schema for mock.
The SCHEMA_DOWNLOAD_URL in .env.example is the URL of the Hygraph resource. Please prepare it by yourself at the time of development. It is released to the public for operation check.

yarn mockServer
yarn generate:fromGQL
yarn dev

open "http://localhost:4000/graphql"
open "http://localhost:4000/voyager"
open "http://localhost:3000"

Development

During development, develop while communicating with the mock server.

yarn mockServer
yarn generate:fromGQL
yarn dev

open "http://localhost:4000/graphql"
open "http://localhost:4000/voyager"
open "http://localhost:3000"

design system

storybook is well known, but we use ladle.

yarn designSystem
open "http://localhost:6006"

comport generation

Generate comport with hygen.

# Please git commit in advance.

yarn generate:ui/general
yarn generate:ui/domain

Snapshot update

Update snapshot when adding or updating stories.tsx.

# It takes time.

yarn updateSnapshot

directory structure.

src
├── env.ts
├── infra
│  └── graphql
│     ├── client.ts
│     ├── types.ts
│     └── util
│        ├── index.ts
│        ├── util.test.ts
│        └── util.ts
└── ui
   ├── domain
   │  └── item
   │     ├── Item
   │     │  ├── coLocation
   │     │  │  ├── dao.ts
   │     │  │  ├── Item.gql.generated.ts
   │     │  │  └── Item.gql.ts
   │     │  ├── component
   │     │  │  ├── index.ts
   │     │  │  ├── Item.stories.tsx
   │     │  │  ├── Item.test.tsx
   │     │  │  └── Item.tsx
   │     │  ├── hook
   │     │  │  ├── index.ts
   │     │  │  ├── item.hook.test.ts
   │     │  │  ├── item.hook.ts
   │     │  │  └── service
   │     │  │     ├── index.ts
   │     │  │     ├── service.test.ts
   │     │  │     └── service.ts
   │     │  ├── index.ts
   │     │  └── Item.type.ts
   │     └── Items
   │        ├── coLocation
   │        │  ├── dao.ts
   │        │  ├── Items.gql.generated.ts
   │        │  └── Items.gql.ts
   │        ├── component
   │        │  ├── index.ts
   │        │  ├── Items.stories.tsx
   │        │  ├── Items.test.tsx
   │        │  └── Items.tsx
   │        ├── hook
   │        │  ├── index.ts
   │        │  ├── items.hook.test.ts
   │        │  ├── items.hook.ts
   │        │  └── service
   │        │     ├── index.ts
   │        │     ├── service.test.ts
   │        │     └── service.ts
   │        ├── index.ts
   │        └── Items.type.ts
   ├── general
   │  ├── Card
   │  │  ├── Card.stories.tsx
   │  │  ├── Card.test.tsx
   │  │  ├── Card.tsx
   │  │  └── index.ts
   │  └── List
   │     ├── index.ts
   │     ├── List.stories.tsx
   │     ├── List.test.tsx
   │     └── List.tsx
   ├── provider
   │  ├── ErrorBoundary.tsx
   │  ├── ReactQuery.tsx
   │  └── Wrapper.tsx
   └── util
      └── tag
         ├── index.ts
         ├── tag.test.ts
         └── tag.ts

Development flow.

GithubActions is executed when you submit a pull request on main branch. (example)

GithubActions executes type checking, lint, unused code detection, snapshotting, etc. App and Design system are also published by pull requests.

Implementation policy

Directory structure

The directory structure directly under src/ is based on the layered architecture. Please be aware of where to implement this process.
Avoid using src/graphql, src/component, etc., as it will result in a technology-driven structure.

mock server

During development, it is not necessary to communicate with the actual resource. Prepare a mock that returns convenient data in _server/grphqlServer/mocks.ts.

Template.

Use yarn generate:ui/general, yarn generate:ui/domain to align the basic implementation.

domain component

In SPA, UI and logic and UI and storage are tightly coupled. Please do not prepare directories with the same name, but use extensions and directory structure to express the roles.

# Bad

src/graphql/animal/cat.gql.ts
src/component/animal/Cat.tsx

# Good

src/ui/domain/animal/cat/coLocation/cat.gql.ts
src/ui/domain/animal/cat/component/Cat.tsx

Not everything fits this rule, but implement everything of interest in src/ui/domain/.

tsx

Do not implement non-testable components.
Please refer to eslint-plugin-use-encapsulation.

# Bad

const Cat: React.FC = () => {
  const [v, setV] = useState("Tama");

  return <>name of the cat {v}</>;
};

# Good

const useCat = () => {
  const [v, setV] = useState("Tama");

  return {
    name: v,
  };
};

const Cat: React.FC = () => {
  const cat = useCat();

  return <>cat's name {cat.name}</>;
};

Testing

Please write unit tests well. Don't write tests knowing too much about the processing of the file you are importing.

state.

ts-pattern, type refinement, more state, etc. __tag is better than isXxx.
example

React hooks and Business Logic

鳥山明 — Tue, 20 Sep 2022 11:41:14 +0000

Overview

hooks can use map.
It is a very lightweight library. There are no dependencies.

https://www.npmjs.com/package/@bird-studio/use-map

Use case

with `useSWR`

import useSWR from "swr";
import type { SWRResponse } from "swr";
import { useMap } from "@bird-studio/use-map";

type MainRes = {
  value: string;
};

// Easy to test because it does not use hook
const businessLogic = (p: SWRResponse<MainRes>) => {
  if (p.data.value === "foo") {
    return {
      ...p,
      data: {
        ...p.data,
        isFoo: true,
      },
    };
  }
  return {
    ...p,
    data: {
      ...p.data,
      isFoo: false,
    },
  };
};

const useMain = () => {
  const res = useMap({ useHook: () => useSWR("/main", fetchMain) })
    .map(businessLogic)
    // Can be continuous.
    .map((v) => v).value;
};

with `useQuery`

import { useQuery } from "@apollo/client";
import { useMap } from "@bird-studio/use-map";
import { QUERY } from "./QUERY";

// Easy to test because it does not use hook
const reducer = (p) => {
  if (p.loading) {
    return {
      type: "loading",
    };
  }

  if (p.error) {
    return {
      type: "error",
      ...p,
    };
  }

  if (p.data) {
    return {
      type: "success",
      data: p.data,
    };
  }

  return new Error("🤬");
};

const useMain = () => {
  const res = useMap({ useHook: () => useQuery(QUERY) }).map(reducer).value;
};

Create a commit message in an interactive format.

鳥山明 — Tue, 12 Apr 2022 15:17:55 +0000

bird-studio/interactive-message

Create a commit message in an interactive format.
Set up a question and type your message.

GitHub

https://github.com/bird-studio/interactive-message

npm

https://www.npmjs.com/package/@bird-studio/interactive-message

I want to try it.

https://github.com/akira-toriyama/interactive-message-demo

Forem: 鳥山明

Create a commit message in an interactive format. with Deno

Hoipoi capsule

What is this?

Try

Use

Customize

Convenient Use

Next.js template

Next.js template

How to use

Required libraries

First.

Development

design system

comport generation

Snapshot update

directory structure.

Development flow.

Implementation policy

Directory structure

mock server

Template.

domain component

tsx

Testing

state.

React hooks and Business Logic

Overview

Use case

with useSWR

with useQuery

Create a commit message in an interactive format.

bird-studio/interactive-message

GitHub

npm

I want to try it.

with `useSWR`

with `useQuery`