chore: prettier

pixiv · Jun 16, 2023 · 66e5418 · 66e5418
1 parent e8bb3fe
commit 66e5418
Show file tree

Hide file tree

Showing 3 changed files with 157 additions and 105 deletions.
diff --git a/docs/src/components/NavList.tsx b/docs/src/components/NavList.tsx
@@ -107,12 +107,12 @@ const tailwindDiffList: ListItem[] = [
 const tailwindConfigList: ListItem[] = [
   {
     text: 'クイックスタート',
-    href: '/@charcoal-ui/tailwind-config/quickstart'
+    href: '/@charcoal-ui/tailwind-config/quickstart',
   },
   {
     text: 'カスタマイズする',
-    href: '/@charcoal-ui/tailwind-config/customize'
-  }
+    href: '/@charcoal-ui/tailwind-config/customize',
+  },
 ]
 
 export const NavList: FC<{ className?: string }> = (props) => {

diff --git a/docs/src/pages/@charcoal-ui/tailwind-config/customize.page.tsx b/docs/src/pages/@charcoal-ui/tailwind-config/customize.page.tsx
@@ -1,17 +1,20 @@
-import { ContentRoot } from "../../../components/ContentRoot";
-import { InlineCode } from "../../../components/InlineCode";
-import { SSRHighlight } from "../../../components/SSRHighlight";
-import { Table } from "../../../components/Table";
-import { dedent } from "../../../utils/string";
+import { ContentRoot } from '../../../components/ContentRoot'
+import { InlineCode } from '../../../components/InlineCode'
+import { SSRHighlight } from '../../../components/SSRHighlight'
+import { Table } from '../../../components/Table'
+import { dedent } from '../../../utils/string'
 
 export default function CustomizeTailwindConfig() {
-    return (<ContentRoot>
-        <h1>カスタマイズする</h1>
-        <p>
-            <InlineCode>createTailwindConfig()</InlineCode> を利用することでお使いの環境、色などに適応させることができます。
-        </p>
+  return (
+    <ContentRoot>
+      <h1>カスタマイズする</h1>
+      <p>
+        <InlineCode>createTailwindConfig()</InlineCode>{' '}
+        を利用することでお使いの環境、色などに適応させることができます。
+      </p>
 
-        <SSRHighlight code={dedent`
+      <SSRHighlight
+        code={dedent`
             const { light, dark } = require('@charcoal-ui/theme')
             const { createTailwindConfig } = require('@charcoal-ui/tailwind-config')
             
@@ -31,37 +34,58 @@ export default function CustomizeTailwindConfig() {
                 }),
                 ],
             }
-        `} lang="javascript" />
-        <p>
-            <InlineCode>createTailwindConfig</InlineCode> には以下のオプションを渡すことができます。
-        </p>
-        <Table data={options} />
+        `}
+        lang="javascript"
+      />
+      <p>
+        <InlineCode>createTailwindConfig</InlineCode>{' '}
+        には以下のオプションを渡すことができます。
+      </p>
+      <Table data={options} />
 
-        <h2>ThemaMap について</h2>
-        <p>
-            charcoal は Tailwind.css の通常のダークモード（ <InlineCode>dark:〇〇</InlineCode> 系のクラス ）をサポートしません。<br />
-            なぜなら charcoal における「色」は、同じ名前でも light テーマと dark テーマで違うカラーコードであり得るからです。<br />
-            これを表現するために <InlineCode>@charcoal-ui/tailwind-config</InlineCode> では <InlineCode>theme</InlineCode> というオプションを受け取ります。<br />
-        </p>
-        <p>
-            以下の例は <InlineCode>:root</InlineCode>（つまり通常ケース）では light テーマを、システムの設定がダークモードである場合は dark テーマを使用するものです。 <br />
-        </p>
-        <SSRHighlight code={dedent`
+      <h2>ThemaMap について</h2>
+      <p>
+        charcoal は Tailwind.css の通常のダークモード（{' '}
+        <InlineCode>dark:〇〇</InlineCode> 系のクラス ）をサポートしません。
+        <br />
+        なぜなら charcoal における「色」は、同じ名前でも light テーマと dark
+        テーマで違うカラーコードであり得るからです。
+        <br />
+        これを表現するために{' '}
+        <InlineCode>@charcoal-ui/tailwind-config</InlineCode> では{' '}
+        <InlineCode>theme</InlineCode> というオプションを受け取ります。
+        <br />
+      </p>
+      <p>
+        以下の例は <InlineCode>:root</InlineCode>（つまり通常ケース）では light
+        テーマを、システムの設定がダークモードである場合は dark
+        テーマを使用するものです。 <br />
+      </p>
+      <SSRHighlight
+        code={dedent`
             createTailwindConfig({
                 version: 'v3',
                 theme: {
                     ':root': light,
                     '@media (prefers-color-scheme: dark)': dark,
                 },
             })
-            `} lang="javascript" />
-        <p>
-            <InlineCode>theme</InlineCode> オプションを設定する場合、ダークテーマ対応を行わないサービスであっても  <InlineCode>:root</InlineCode> に必ず自身のプロダクトのカラーテーマを渡す必要があります。
-        </p>
-        <p>
-            <InlineCode>theme</InlineCode> をこのように書くと、 このような CSS Variables を生成します。
-        </p>
-        <SSRHighlight lang="css" code={dedent`
+            `}
+        lang="javascript"
+      />
+      <p>
+        <InlineCode>theme</InlineCode>{' '}
+        オプションを設定する場合、ダークテーマ対応を行わないサービスであっても{' '}
+        <InlineCode>:root</InlineCode>{' '}
+        に必ず自身のプロダクトのカラーテーマを渡す必要があります。
+      </p>
+      <p>
+        <InlineCode>theme</InlineCode> をこのように書くと、 このような CSS
+        Variables を生成します。
+      </p>
+      <SSRHighlight
+        lang="css"
+        code={dedent`
             /* 以下はイメージです */
 
             :root {
@@ -77,12 +101,17 @@ export default function CustomizeTailwindConfig() {
                 /* ... */
               }
             }
-        `} />
-        <p>
-            このとき、以下のように書く必要はありません。<br />
-            キーが <InlineCode>@media</InlineCode> で始まる場合はビルド時に <InlineCode>:root</InlineCode> が補われます。
-        </p>
-        <SSRHighlight lang="javascript" code={dedent`
+        `}
+      />
+      <p>
+        このとき、以下のように書く必要はありません。
+        <br />
+        キーが <InlineCode>@media</InlineCode> で始まる場合はビルド時に{' '}
+        <InlineCode>:root</InlineCode> が補われます。
+      </p>
+      <SSRHighlight
+        lang="javascript"
+        code={dedent`
                 {
                     theme: {
                         // これは間違い！！
@@ -94,21 +123,31 @@ export default function CustomizeTailwindConfig() {
                         '@media (prefers-color-scheme: dark)': dark
                     }
                 }
-            `} />
-        <p>
-            <InlineCode>theme</InlineCode> のキーとして通常のセレクタを指定することもできます。<br />
-            これによりダークモードの切り替えがDOMの状態に依存するケースにも対応します。 <InlineCode>localStorage</InlineCode> などで JS での切り替えを実装しているアプリケーションはこのような手法が好ましいでしょう。
-        </p>
-        <SSRHighlight lang="javascript" code={dedent`
+            `}
+      />
+      <p>
+        <InlineCode>theme</InlineCode>{' '}
+        のキーとして通常のセレクタを指定することもできます。
+        <br />
+        これによりダークモードの切り替えがDOMの状態に依存するケースにも対応します。{' '}
+        <InlineCode>localStorage</InlineCode> などで JS
+        での切り替えを実装しているアプリケーションはこのような手法が好ましいでしょう。
+      </p>
+      <SSRHighlight
+        lang="javascript"
+        code={dedent`
             createTailwindConfig({
                 version: 'v3',
                 theme: {
                     ':root': light,
                     'html[data-theme="dark"]': dark,
                 },
             })
-        `} />
-        <SSRHighlight lang="css" code={dedent`
+        `}
+      />
+      <SSRHighlight
+        lang="css"
+        code={dedent`
             /* 以下はイメージです */
 
             :root {
@@ -122,16 +161,20 @@ export default function CustomizeTailwindConfig() {
               --tailwind-color-background2: #000000;
               /* ... */
             }
-        `} />
-    </ContentRoot>)
+        `}
+      />
+    </ContentRoot>
+  )
 }
 const options = {
-    version: {
-        type: 'v1 | v2 | v3',
-        description: 'Tailwind.cssのバージョン系統を指定します。色のキー名に使われる DEFAULT と default などの違いを内部で吸収します。'
-    },
-    theme: {
-        type: 'Record<string, Theme>',
-        description: '条件ごとの色の値のマッピングを渡します。 :root は必須のキーです。'
-    }
-}
+  version: {
+    type: 'v1 | v2 | v3',
+    description:
+      'Tailwind.cssのバージョン系統を指定します。色のキー名に使われる DEFAULT と default などの違いを内部で吸収します。',
+  },
+  theme: {
+    type: 'Record<string, Theme>',
+    description:
+      '条件ごとの色の値のマッピングを渡します。 :root は必須のキーです。',
+  },
+}
diff --git a/docs/src/pages/@charcoal-ui/tailwind-config/quickstart.page.tsx b/docs/src/pages/@charcoal-ui/tailwind-config/quickstart.page.tsx
@@ -1,49 +1,52 @@
-import Link from "next/link";
-import { ContentRoot } from "../../../components/ContentRoot";
-import { SSRHighlight } from "../../../components/SSRHighlight";
-import { dedent } from "../../../utils/string";
-import { InlineCode } from "../../../components/InlineCode";
+import Link from 'next/link'
+import { ContentRoot } from '../../../components/ContentRoot'
+import { SSRHighlight } from '../../../components/SSRHighlight'
+import { dedent } from '../../../utils/string'
+import { InlineCode } from '../../../components/InlineCode'
 
 export default function InstallPage() {
-    return (
-        <ContentRoot>
-            <h1>@charcoal-ui/tailwind-config クイックスタート</h1>
-            <Link href="https://www.npmjs.com/package/@charcoal-ui/tailwind-config">
-                <img
-                    alt="npm-badge"
-                    src="https://img.shields.io/npm/v/@charcoal-ui/tailwind-config?label=%40charcoal-ui%2Ftailwind-config&style=flat-square&logo=npm"
-                />
-            </Link>
-            <h2>インストール</h2>
-            <h3>npm</h3>
-            <SSRHighlight
-                code={dedent`
+  return (
+    <ContentRoot>
+      <h1>@charcoal-ui/tailwind-config クイックスタート</h1>
+      <Link href="https://www.npmjs.com/package/@charcoal-ui/tailwind-config">
+        <img
+          alt="npm-badge"
+          src="https://img.shields.io/npm/v/@charcoal-ui/tailwind-config?label=%40charcoal-ui%2Ftailwind-config&style=flat-square&logo=npm"
+        />
+      </Link>
+      <h2>インストール</h2>
+      <h3>npm</h3>
+      <SSRHighlight
+        code={dedent`
                     npm install --save-dev @charcoal-ui/tailwind-config
                 `}
-                lang="shell"
-            />
-            <h3>yarn</h3>
-            <SSRHighlight
-                code={dedent`
+        lang="shell"
+      />
+      <h3>yarn</h3>
+      <SSRHighlight
+        code={dedent`
                     yarn add -D @charcoal-ui/tailwind-config
                 `}
-                lang="shell"
-            />
+        lang="shell"
+      />
 
-            <hr />
+      <hr />
 
-            <h2>概要</h2>
-            <p>
-                <InlineCode>@charcoal-ui/tailwind-config</InlineCode>は、Tailwindに<InlineCode>@charcoal-ui/foundation</InlineCode>を適用します。
-            </p>
+      <h2>概要</h2>
+      <p>
+        <InlineCode>@charcoal-ui/tailwind-config</InlineCode>は、Tailwindに
+        <InlineCode>@charcoal-ui/foundation</InlineCode>を適用します。
+      </p>
 
-            <h2>使い方</h2>
-            <p>
-                tailwind.config.js の中で <InlineCode>require</InlineCode> して使います。
-            </p>
+      <h2>使い方</h2>
+      <p>
+        tailwind.config.js の中で <InlineCode>require</InlineCode>{' '}
+        して使います。
+      </p>
 
-            <h3>デフォルトのconfigを使う</h3>
-            <SSRHighlight code={dedent`
+      <h3>デフォルトのconfigを使う</h3>
+      <SSRHighlight
+        code={dedent`
                 const { config } = require('@charcoal-ui/tailwind-config')
                 
                 /** @type {import('tailwindcss').Config} */
@@ -55,10 +58,16 @@ export default function InstallPage() {
                     plugins: [],
                     presets: [config]
                 }
-                `} lang="javascript" />
-            <p>
-                テーマの調整などが必要な場合は <Link href="/@charcoal-ui/tailwind-config/customize">カスタマイズする</Link> のページを見てください。
-            </p>
-        </ContentRoot>
-    )
-}
+                `}
+        lang="javascript"
+      />
+      <p>
+        テーマの調整などが必要な場合は{' '}
+        <Link href="/@charcoal-ui/tailwind-config/customize">
+          カスタマイズする
+        </Link>{' '}
+        のページを見てください。
+      </p>
+    </ContentRoot>
+  )
+}