## 環境

- node: `v14.19.0`

## 概要

https://www8.cao.go.jp/chosei/shukujitsu/syukujitsu.csv をnode環境で取得し、S3にアップロードする。

### 要件の詳細

- 取得したCSVファイルは、`holidays/${date}-holidays.csv`として保存する。
- 既存のファイルと差分を確認し、差分があった場合、`holidays/holidays.csv`を更新する。（既存ファイルがない場合は、新規作成する。）

## Cron

毎月初めに実行する。

```sh
00 00 01 * *
```

毎2分実行する。開発環境で試す用のもの。

```sh
*/2 * * * *
```

## ライブラリ

- [Task Scheduling | NestJS - A progressive Node.js framework](https://docs.nestjs.com/techniques/task-scheduling)
- [ashtuchkin/iconv-lite: Convert character encodings in pure javascript.](https://github.com/ashtuchkin/iconv-lite)

S3にCSVをアップロードする

## 環境

- NXを使用したmonorepoプロジェクト

## コード

- `dist/storybook/client-component`にstorybookのビルド時成果物を置いている。
- `./.github/actions/setup`は`yarn install`とか実行している。
- `libs/client/component/**`は`libs/client/theme/**`にmasterにマージ時に、変更があった場合に動く。
- storybookのビルドとデプロイは分ける
- `gh-pages`ブランチに`.nojekyll`と`dist/storybook/client-component`が同ディレクトリに置かれる。何かうまくいかない時は確認する。

```yml
name: Deploy Storybook to GitHub Pages

on:
  push:
    branches:
      - master
    paths:
      - 'libs/client/component/**'
      - 'libs/client/theme/**'

env:
  GITHUB_PACKAGE_TOKEN: ${{ secrets.XXX }}

jobs:
  setup:
    runs-on: ubuntu-22.04
    steps:
      - uses: actions/checkout@v3
      - uses: ./.github/actions/setup

  gh-pages:
    timeout-minutes: 10
    name: deploy Storybook to GitHub Pages
    runs-on: ubuntu-22.04
    needs: setup
    steps:
      - uses: actions/checkout@v3
      - uses: ./.github/actions/setup

      - name: Build Storybook
        run: yarn nx run client-component:build-storybook

      - name: Deploy Storybook
        uses: JamesIves/github-pages-deploy-action@v4.4.1
        with:
          branch: gh-pages
          folder: dist/storybook/client-component
          clean: true
          token: ${{ secrets.GITHUB_TOKEN }}
          commit-message: 'Deploy Storybook to GitHub Pages'
```

## ドキュメント

- https://github.com/JamesIves/github-pages-deploy-action
- https://github.com/storybookjs/storybook-deployer ： buildとdeployを分けて、実行するようなアクションではななさそうなので、やめた。オプションはあったが、うまく行かなかった
- https://github.com/peaceiris/actions-gh-pages : gh-pagesブランチのディレクトリ構成がおかしくなっていたので、やめた（おそらく設定を間違えている）

StoryboookをGitHub Pagesにデプロイする

## appsとlibs間のスタイルの共有

[Configuring styles and preprocessor options for Angular projects with a Storybook configuration | Nx](https://nx.dev/storybook/angular-configuring-styles#configuring-styles-and-preprocessor-options-for-angular-projects-with-a-storybook-configuration) を参照

`apps` client(React.jsのプロジェクト)に `libs`(muiのプロジェクト)で設定された`scss`ファイルを読み込む設定を書く。

`projectType: application`

では、下記のような設定でスタイルが当たっていることを確認できた。

```json
{
  "projectType": "application",
  "build": {
    "options": {
      "styles": ["libs/client/component/src/lib/app.scss"]
    }
  }
}
```

## libsとlibs間のスタイルの共有

`projectType: library`

不明。あまり使用するケースはないと思う。相対パスで指定する形になると推測。

[css - How to add global style to angular 6/7 library - Stack Overflow](https://stackoverflow.com/questions/53377419/how-to-add-global-style-to-angular-6-7-library)

NXでappsにlibsのscssを読み込ませる

既存のディレクトリ配下から`__snapshots__`というディレクトリを見つけ、ディレクトリごと削除するコマンド

```sh
find . -type d -name "__snapshots__" -print0 | xargs -0 -I {} /bin/rm -rf "{}"
```

## 参考

- [https://unix.stackexchange.com/questions/422392/delete-all-folders-inside-a-folder-except-one-with-specific-name?newreg=59c45436e74e4157a12930f95d638c3a](https://unix.stackexchange.com/questions/422392/delete-all-folders-inside-a-folder-except-one-with-specific-name?newreg=59c45436e74e4157a12930f95d638c3a)
- [https://unix.stackexchange.com/questions/569361/remove-all-files-directories-except-specified-ones-in-multiple-levels](https://unix.stackexchange.com/questions/569361/remove-all-files-directories-except-specified-ones-in-multiple-levels)
- [https://www.cyberciti.biz/faq/delete-or-remove-a-directory-linux-command/](https://www.cyberciti.biz/faq/delete-or-remove-a-directory-linux-command/)
- [https://www.cyberciti.biz/faq/how-to-find-and-delete-directory-recursively-on-linux-or-unix-like-system/](https://www.cyberciti.biz/faq/how-to-find-and-delete-directory-recursively-on-linux-or-unix-like-system/)

## 試行錯誤の記録（見ないで）

```sh
find ./component -mindepth 3 ! -regex '^./component/__snapshots__$/.*$?'
find ./component -mindepth 3 ! -regex '^./component/__snapshots__$/.*$?'

# __snapshots__の中身のみを削除
find ./component -mindepth 3 ! -regex '^./component/__snapshots__$/.*$?' -delete

find ./component -mindepth 3 ! -regex '^./component/__snapshots__$/.*$?' -empty -delete
find ./component -mindepth 3 ! -regex '^./component/__snapshots__$/.*$?' -exec rm -f {}

# __snapshots__dirを削除

find ./component -maxdepth 3 -type d ! -iname __snapshots__ -exec rm -rvf {} \;

ls component/ | grep -v "__snapshots__" | xargs rm -r

find . -type d -iname "__snapshots__" | xargs rm -r

find . -type d -name "__snapshots__" -print0 | xargs -0 -I {} /bin/rm -rf "{}"
```

シェルで特定のディレクトリを削除する

TODO: ブラウザバックも制御したい

`useWindowEvent`

```ts
import { DependencyList, useEffect } from 'react'

export const useWindowEvent = <K extends keyof WindowEventMap>(
  type: K,
  listener: (this: Window, ev: WindowEventMap[K]) => any,
  deps: DependencyList,
  options?: boolean | AddEventListenerOptions
) =>
  useEffect(() => {
    if (window) {
      window.addEventListener(type, listener, options)
      return () => {
        window.removeEventListener(type, listener, options)
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [deps])
```

`useBeforeUnloadAlert`

```ts
import { DependencyList, useCallback } from 'react'

import { useWindowEvent } from './useWindowEvent'

export const useBeforeUnloadAlert = (diff: boolean | (() => boolean), deps: DependencyList) => {
  const handler = useCallback(
    (e: BeforeUnloadEvent) => {
      if (typeof diff === 'boolean' ? diff : diff()) {
        e.preventDefault()
        e.returnValue = ''
      }
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [deps]
  )
  useWindowEvent('beforeunload', handler, deps)
}
```

使い方

```tsx
useBeforeUnloadAlert(dirty, [dirty])
```


useBeforeUnloadAlert

`TextField`（select）に`MenuProps: { autoFocus: false }`をつける。

```tsx
<TextField
  select
  SelectProps={{
    displayEmpty: true,
    MenuProps: {
      autoFocus: false,
    },
  }}
>
```

MUI v5 Select で Value が空の時にbackgroundColorが変わる

## 前提

- `@emotion/react`と`mui`を使用しています。

## Child Component

```tsx
import { SerializedStyles } from '@emotion/react'

interface Props {
  className?: string
  css?: SerializedStyles
}

export function Child({ className }: Props) {
  return (
    <div className={className}>
    </div>
  )
}
```

## Parent Component

下記のケースでは、`some-class`と`emotion`で作成されたクラス名が、`Child`の`<div className={className}>`で適用される。

```tsx
<Child
  className="some-class"
  css={css`
    color: red;
  `}
/>
```

React で css propを子コンポーネントに渡す

ユーザーエージェント シャドウDOMを表示をオンにする

![スクリーンショット 2022-10-25 17.25.33](//images.ctfassets.net/0jyj5pjwic68/1RgOKhHxyoU86KB3NvQVne/85b6a195e565a7da692bd9ad99ebd151/____________________________2022-10-25_17.25.33.png)

[Shadow DOM v1 - 自己完結型 Web コンポーネント](https://web.dev/shadowdom-v1/)


PlaceholderのDOMを確認する

## 前提

MUI v5 の`createTheme()`の実行時に渡す`options`をパッケージで配布することが目的

## Paletteに独自のプロパティを定義する

`custom`と`gradient`というプロパティを定義する。

```palette.ts
import { PaletteOptions } from '@mui/material/styles'

type CustomPaletteOptions = {
  custom: Record<string, `#${string}`>
  gradient: Record<string, string>
}

export const palette: PaletteOptions & CustomPaletteOptions = {
  custom: {
    green: '#12B886',
  },
  gradient: {
    primary: 'linear-gradient(180deg, #1EB990 0%, #15A881 100%)',
  },
}
```

```components.ts
import { ThemeOptions } from '@mui/material/styles'

export const components: ThemeOptions['components'] = {
}
```

```theme.ts
import { ThemeOptions } from '@mui/material/styles'
import { components } from './components'
import { palette } from './palette'

export const theme: ThemeOptions = {
  components,
  palette,
}
```

## PaletteOptionsの一部をRequiredにする

`options: ThemeOptions`を吐き出す前に、`palette.ts`(`PaletteOptions(ThemeOptions['palette'])`)を使用して、`components.ts`(`ThemeOptions['components']`)を定義するという利用ケースがあったが、型エラーが発生していた。

```components.ts
export const components: ThemeOptions['components'] = {
  MuiTooltip: {
    styleOverrides: {
      tooltip: {
        color: palette.primary?.main, // 👈 型エラー
      },
    },
  },
}
```

```error
プロパティ 'main' は型 'PaletteColorOptions' に存在しません。
プロパティ 'main' は型 'Partial<Color>' に存在しません。
```

`PaletteColorOptions`はユニオン型なので、型解決できていない。型を絞り込むか、`palette.ts`型を変更することで対応できる。

[ユニオン型 (union type) | TypeScript入門『サバイバルTypeScript』](https://typescriptbook.jp/reference/values-types-variables/union)

```ts
import { CommonColors, TypeAction } from '@material-ui/core/styles/createPalette'
import { Color } from '@mui/material'
import { alpha, PaletteOptions, SimplePaletteColorOptions } from '@mui/material/styles'

type CustomPaletteOptions = {
  custom: Record<string, `#${string}`>
  gradient: Record<string, string>
}

type RequiredPaletteOptions = {
  common: CommonColors
  primary: Required<SimplePaletteColorOptions> // PaletteColorでも良いと思う
  secondary: Required<SimplePaletteColorOptions>
  error: Required<SimplePaletteColorOptions>
  warning: Required<SimplePaletteColorOptions>
  info: Required<SimplePaletteColorOptions>
  success: Required<SimplePaletteColorOptions>
  grey: Color
  action: TypeAction
}

export const palette: PaletteOptions & CustomPaletteOptions & RequiredPaletteOptions = {
  ...
}
```

修正後

```components.ts
color: palette.primary.main
```

MUIv5 Themeの拡張 with TypeScript の調査

1.正規表現で検索する

<kbd>cmd</kbd> + <kbd>shift</kbd> + <kbd>f</kbd>で検索ウィンドウを開き、`.*`をクリックし、`#(?:[0-9a-fA-F]{3}){1,2}`で正規表現検索を実行します。

2.対象の文字列を選択する

検索結果ウィンドウで、<kbd>cmd</kbd> + <kbd>a</kbd>し、<kbd>cmd</kbd> + <kbd>shift</kbd> + <kbd>l</kbd>で対象の文字列を選択します。

3.コマンドパレットを開く

<kbd>cmd</kbd> + <kbd>shift</kbd> + <kbd>p</kbd>でコマンドパレットを開きます。

4.大文字に変換する

コマンドパレット上で`upper`or`lower`をタイプし、実行します。

![Hex Upper](//images.ctfassets.net/0jyj5pjwic68/7tSE5s70dfdDBf4PFLxNA0/b603fc1f9798549b27c06fe1d0fb1882/____________________________2022-10-21_13.28.28.png)

## 参考
- [visual studio code - How to tranform css hex to uppercase in vscode? - Stack Overflow](https://stackoverflow.com/questions/65730110/how-to-tranform-css-hex-to-uppercase-in-vscode)
- [intellij 15 - VS Code Regex find and replace with lowercase, use \l or \L if possible - Stack Overflow](https://stackoverflow.com/questions/59785124/vs-code-regex-find-and-replace-with-lowercase-use-l-or-l-if-possible)

## 英語

Since `\U$0` did not work well, we looked for alternatives.

1. Search by regular expression

Open a search window with <kbd>cmd</kbd> + <kbd>shift</kbd> + <kbd>f</kbd>, click `.*`, and execute a regular expression search with `#(?:[0-9a-fA-F]{3}){1,2}`.

2. Select the target string

In the search results window, use <kbd>cmd</kbd> + <kbd>a</kbd> to select all and <kbd>cmd</kbd> + <kbd>shift</kbd> + <kbd>l</kbd> to select the target string.

3. Open the command palette

Open the command palette with the <kbd>cmd</kbd> + <kbd>shift</kbd> + <kbd>p</kbd>.

4. Convert to upper case

Type `upper`or `lower` on the command palette and execute.


【VSCode】CSSのHexを大文字に変換する方法

```ts
export function scrollToBottom(element: HTMLElement) {
  if (element.scrollTo) {
    element.scrollTo({
      top: Number.MAX_SAFE_INTEGER,
      behavior: 'smooth',
    })
    return
  }
  element.scrollTop = Number.MAX_SAFE_INTEGER
}
```

```ts
scrollToBottom($divRef.current)
```

## 参考
- [Number.MAX_SAFE_INTEGER - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER)

【JavaScript】対象の要素を一番下までスクロールさせる

`setFieldValue`は、Promiseを返すので、awaitしてから、handleBlurでバリデーションを実行する

```ts
<TextField
  name="name"
  onBlur={async event => {
    const newValue = convert(formik.values.name)
    await formik.setFieldValue('name', newValue)
    formik.handleBlur(event)
  }}
/>
```

【Formik】onBlur時にフォームのバリデーションと変換処理

以下、Google Analyticsのカスタムイベントのコード

```ts
export const event1 = () => {
  window.gtag('event', 'example1', {
    event_category: 'example1',
    event_label: 'example1',
  })
}

export const event2 = () => {
  window.gtag('event', 'example2', {
    event_category: 'example2',
    event_label: 'example2',
  })
}
```

classのstaticメソッドに定義してexportすることで、importをシンプルにし、CustomEventクラスを使用することで、メソッドの使用箇所を明確にする。

```ts
export class CustomEvent {
  static event1 = () => {
    window.gtag('event', 'example1', {
      event_category: 'example1',
      event_label: 'example1',
    })
  }

  static event2 = () => {
    window.gtag('event', 'example2', {
      event_category: 'example2',
      event_label: 'example2',
    })
  }
}
```

【JavaScript】関数をまとめてexportする

```ts
/**
 * lockedAtから日を跨いでいる場合、trueを返す。それ以外は、falseを返す。
 * @param {string} target ロックした日時
 * @returns {boolean} 日を跨いでいる場合、trueを返す。それ以外は、falseを返す。
 */
export const isCrossDay = (target: string): boolean => {
  const targetDate = dayjs(target)
  const now = dayjs()
  return targetDate.isSameOrBefore(now, 'day') && !targetDate.isSame(now, 'day')
}
```

【JavaScript】対象の日付が日を跨いだか判定する

```ts
const kanaMap = {
  ｶﾞ: 'ガ',
  ｷﾞ: 'ギ',
  ｸﾞ: 'グ',
  ｹﾞ: 'ゲ',
  ｺﾞ: 'ゴ',
  ｻﾞ: 'ザ',
  ｼﾞ: 'ジ',
  ｽﾞ: 'ズ',
  ｾﾞ: 'ゼ',
  ｿﾞ: 'ゾ',
  ﾀﾞ: 'ダ',
  ﾁﾞ: 'ヂ',
  ﾂﾞ: 'ヅ',
  ﾃﾞ: 'デ',
  ﾄﾞ: 'ド',
  ﾊﾞ: 'バ',
  ﾋﾞ: 'ビ',
  ﾌﾞ: 'ブ',
  ﾍﾞ: 'ベ',
  ﾎﾞ: 'ボ',
  ﾊﾟ: 'パ',
  ﾋﾟ: 'ピ',
  ﾌﾟ: 'プ',
  ﾍﾟ: 'ペ',
  ﾎﾟ: 'ポ',
  ｳﾞ: 'ヴ',
  ﾜﾞ: 'ヷ',
  ｦﾞ: 'ヺ',
  ｱ: 'ア',
  ｲ: 'イ',
  ｳ: 'ウ',
  ｴ: 'エ',
  ｵ: 'オ',
  ｶ: 'カ',
  ｷ: 'キ',
  ｸ: 'ク',
  ｹ: 'ケ',
  ｺ: 'コ',
  ｻ: 'サ',
  ｼ: 'シ',
  ｽ: 'ス',
  ｾ: 'セ',
  ｿ: 'ソ',
  ﾀ: 'タ',
  ﾁ: 'チ',
  ﾂ: 'ツ',
  ﾃ: 'テ',
  ﾄ: 'ト',
  ﾅ: 'ナ',
  ﾆ: 'ニ',
  ﾇ: 'ヌ',
  ﾈ: 'ネ',
  ﾉ: 'ノ',
  ﾊ: 'ハ',
  ﾋ: 'ヒ',
  ﾌ: 'フ',
  ﾍ: 'ヘ',
  ﾎ: 'ホ',
  ﾏ: 'マ',
  ﾐ: 'ミ',
  ﾑ: 'ム',
  ﾒ: 'メ',
  ﾓ: 'モ',
  ﾔ: 'ヤ',
  ﾕ: 'ユ',
  ﾖ: 'ヨ',
  ﾗ: 'ラ',
  ﾘ: 'リ',
  ﾙ: 'ル',
  ﾚ: 'レ',
  ﾛ: 'ロ',
  ﾜ: 'ワ',
  ｦ: 'ヲ',
  ﾝ: 'ン',
  ｧ: 'ァ',
  ｨ: 'ィ',
  ｩ: 'ゥ',
  ｪ: 'ェ',
  ｫ: 'ォ',
  ｯ: 'ッ',
  ｬ: 'ャ',
  ｭ: 'ュ',
  ｮ: 'ョ',
  '｡': '。',
  '､': '、',
  ｰ: 'ー',
  '｢': '「',
  '｣': '」',
  '･': '・',
} as const

export function convertKanaHalfToFull(str: string) {
  let reg = new RegExp('(' + Object.keys(kanaMap).join('|') + ')', 'g')
  return str
    .replace(reg, s => {
      return kanaMap[s as keyof typeof kanaMap]
    })
    .replace(/ﾞ/g, '゛')
    .replace(/ﾟ/g, '゜')
}
```

New