詳細
{detail}
@@ -113,12 +114,12 @@ export const FaqItem: React.FC<{
{/* クリックで回答を表示するボタン */}
{/* 質問を表示。ホーバーで色が変わる。 */}
-
+
{question}
{/* 開閉アイコン */}
-
+
{/* 回答 */}
@@ -141,7 +142,5 @@ export const IndentLi: React.FC<
children: React.ReactNode;
} & ComponentProps<"li">
> = ({ children, ...prop }) => {
- return (
-
{children}
- );
+ return
{children};
};
diff --git a/src/app/how-to-use/page.tsx b/packages/web/src/app/how-to-use/page.tsx
similarity index 99%
rename from src/app/how-to-use/page.tsx
rename to packages/web/src/app/how-to-use/page.tsx
index fc36cf9..4153b48 100644
--- a/src/app/how-to-use/page.tsx
+++ b/packages/web/src/app/how-to-use/page.tsx
@@ -1,4 +1,5 @@
-import React from "react";
+import type React from "react";
+import { MdOutlineInfo } from "react-icons/md";
import {
ClassMark,
FaqItem,
@@ -7,7 +8,6 @@ import {
IndentLi,
QuickStartItem,
} from "./HowToUseItem";
-import { MdOutlineInfo } from "react-icons/md";
/**
* 文字をtertiaryカラーで表示するコンポーネント
diff --git a/src/app/icon.ico b/packages/web/src/app/icon.ico
similarity index 100%
rename from src/app/icon.ico
rename to packages/web/src/app/icon.ico
diff --git a/src/app/layout.tsx b/packages/web/src/app/layout.tsx
similarity index 92%
rename from src/app/layout.tsx
rename to packages/web/src/app/layout.tsx
index 820dc63..79b0809 100644
--- a/src/app/layout.tsx
+++ b/packages/web/src/app/layout.tsx
@@ -4,13 +4,12 @@ import { Inter } from "next/font/google";
import { useState } from "react";
import "./globals.css";
-import { ThemeType, RegisterType } from "@/app/type";
import { ThemeContext } from "@/app/context";
-import Header from "./components/Header";
-import Footer from "./components/Footer";
-import { UserContext, UserContextValue } from "@/app/UserContext";
-
+import type { RegisterType, ThemeType } from "@/app/type";
+import { UserContext, type UserContextValue } from "@/app/UserContext";
import { User } from "@/app/utils/user";
+import Footer from "./components/Footer";
+import Header from "./components/Header";
const inter = Inter({ subsets: ["latin"] });
@@ -56,7 +55,7 @@ export default function RootLayout({
className={`bg-surface-container text-text-default ${theme}`}
>
{children}
diff --git a/src/app/not-found.tsx b/packages/web/src/app/not-found.tsx
similarity index 97%
rename from src/app/not-found.tsx
rename to packages/web/src/app/not-found.tsx
index 2b89577..266f712 100644
--- a/src/app/not-found.tsx
+++ b/packages/web/src/app/not-found.tsx
@@ -1,5 +1,5 @@
-import Logo from "@/../../public/syllabus_icon.svg";
import Image from "next/image";
+import Logo from "@/../public/syllabus_icon.svg";
/**
* NotFound コンポーネントは、存在しないリンクへのアクセス時に表示されます。
diff --git a/src/app/notion/page.tsx b/packages/web/src/app/notion/page.tsx
similarity index 98%
rename from src/app/notion/page.tsx
rename to packages/web/src/app/notion/page.tsx
index 4ca16c4..49c1e63 100644
--- a/src/app/notion/page.tsx
+++ b/packages/web/src/app/notion/page.tsx
@@ -1,6 +1,5 @@
-import Head from "next/head";
-import React from "react";
-import { FaqItem, HowToUseItem } from "../how-to-use/HowToUseItem";
+import type React from "react";
+import { HowToUseItem } from "../how-to-use/HowToUseItem";
const Notion: React.FC = () => {
return (
diff --git a/src/app/page.tsx b/packages/web/src/app/page.tsx
similarity index 91%
rename from src/app/page.tsx
rename to packages/web/src/app/page.tsx
index 3b03c1e..ae64a26 100644
--- a/src/app/page.tsx
+++ b/packages/web/src/app/page.tsx
@@ -1,18 +1,15 @@
"use client";
-import Logo from "@/../../public/syllabus_icon.svg";
import Image from "next/image";
-import { useUser } from "@/app/UserContext";
-import { RegisterType } from "@/app/type";
-
-import { useEffect } from "react";
+import Logo from "@/../public/syllabus_icon.svg";
+// import { useUser } from "@/app/UserContext";
/**
* Home コンポーネントは、ホームページの内容を表示します。
* @returns HTMLを生成するReactコンポーネント。
*/
export default function Home(): JSX.Element {
- const { user, setUser } = useUser();
+ // const { user, setUser } = useUser();
return (
<>
{/* バックグラウンド画像 */}
diff --git a/src/app/type.ts b/packages/web/src/app/type.ts
similarity index 100%
rename from src/app/type.ts
rename to packages/web/src/app/type.ts
diff --git a/src/app/utils/mock_data.ts b/packages/web/src/app/utils/mock_data.ts
similarity index 99%
rename from src/app/utils/mock_data.ts
rename to packages/web/src/app/utils/mock_data.ts
index 247a176..4e909e0 100644
--- a/src/app/utils/mock_data.ts
+++ b/packages/web/src/app/utils/mock_data.ts
@@ -1,4 +1,4 @@
-import { ClassDataType, RegisterType } from "@/app/type";
+import type { ClassDataType, RegisterType } from "@/app/type";
/**
* 講義詳細モーダルの動作確認に利用するサンプルデータ
diff --git a/src/app/utils/user.ts b/packages/web/src/app/utils/user.ts
similarity index 89%
rename from src/app/utils/user.ts
rename to packages/web/src/app/utils/user.ts
index 993e844..b48b9ad 100644
--- a/src/app/utils/user.ts
+++ b/packages/web/src/app/utils/user.ts
@@ -1,7 +1,7 @@
"use client";
-import { SampleClasses, SampleUser } from "@/app/utils/mock_data";
-import { ClassDataType, RegisterType } from "@/app/type";
+import type { RegisterType } from "@/app/type";
+import { SampleUser } from "@/app/utils/mock_data";
const MODE = process.env.NEXT_PUBLIC_MODE;
diff --git a/tsconfig.json b/packages/web/tsconfig.json
similarity index 85%
rename from tsconfig.json
rename to packages/web/tsconfig.json
index 7b28589..c6fbef9 100644
--- a/tsconfig.json
+++ b/packages/web/tsconfig.json
@@ -1,4 +1,5 @@
{
+ "extends": "../../tsconfig.base.json",
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
@@ -18,7 +19,8 @@
}
],
"paths": {
- "@/*": ["./src/*"]
+ "@/*": ["./src/*"],
+ "@@/*": ["../../*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
diff --git a/scripts/README.txt b/scripts/scraper/README.txt
similarity index 100%
rename from scripts/README.txt
rename to scripts/scraper/README.txt
diff --git a/scripts/data.py b/scripts/scraper/data.py
similarity index 100%
rename from scripts/data.py
rename to scripts/scraper/data.py
diff --git a/scripts/interface.py b/scripts/scraper/interface.py
similarity index 100%
rename from scripts/interface.py
rename to scripts/scraper/interface.py
diff --git a/scripts/main.py b/scripts/scraper/main.py
similarity index 100%
rename from scripts/main.py
rename to scripts/scraper/main.py
diff --git a/scripts/requirements.txt b/scripts/scraper/requirements.txt
similarity index 100%
rename from scripts/requirements.txt
rename to scripts/scraper/requirements.txt
diff --git a/scripts/scraper.py b/scripts/scraper/scraper.py
similarity index 100%
rename from scripts/scraper.py
rename to scripts/scraper/scraper.py
diff --git a/src/app/aboutus/page.tsx b/src/app/aboutus/page.tsx
deleted file mode 100644
index 7eb7747..0000000
--- a/src/app/aboutus/page.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-import { FaqItem, HowToUseItem } from "../how-to-use/HowToUseItem";
-
-const Blue: React.FC<{ children: string }> = ({ children }) => {
- return
{children};
-};
-
-const AboutUs: React.FC = () => {
- return (
- <>
-
- 私たち ut.code();
- は、2019年度に発足した東京大学のプログラミングサークルです。主にWeb関連の技術を用い、私たちの生活を彩るプログラムを開発することを目標としています。
-
- LINE add friend
-
- X(旧Twitter)
-
- Webサイト
-
-
- );
-};
-export default AboutUs;
diff --git a/src/app/components/ClassModal/index.tsx b/src/app/components/ClassModal/index.tsx
deleted file mode 100644
index 7be9182..0000000
--- a/src/app/components/ClassModal/index.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import { Dialog, DialogPanel, DialogTitle } from "@headlessui/react";
-import { FiX } from "react-icons/fi";
-import { ClassDataType, DayPeriod, dayMapping } from "@/app/type";
-import Item from "./ClassModalItem";
-
-/**
- * モーダルに渡すprops
- */
-interface ModalProps {
- /**
- * モーダルが表示中か否か
- */
- isOpen: boolean;
-
- /**
- * モーダルの閉じるボタンが押された時のコールバック
- * @param currentIsOpen 現在表示中か否か
- */
- onCloseButtonClicked: (currentIsOpen: boolean) => void;
-
- /**
- * 授業の情報
- */
- classData: ClassDataType;
-}
-
-/**
- * 講義情報のdayPeriodsを文字列に変換する
- * 曜限は"漢字+数字"
- * 集中の場合は"集中"と表示
- *
- * (例)
- * [{ "day": "mon", "period": 1 }, { "day": "wed", "period": 1 } ]
- * => "月1, 水1"
- * @param dayPeriods 講義の曜限
- * @returns 曜限を表す文字列
- */
-function dayPeriodsToString(dayPeriods: DayPeriod[] | "集中"): string {
- if (dayPeriods === "集中") {
- // 集中の場合は"集中"と表示
- return "集中";
- }
-
- // カンマ区切りで曜限を結合
- return dayPeriods
- .map((dayPeriod) => {
- // 曜日は漢字に変換
- const day = dayMapping[dayPeriod.day];
- // 曜限は、漢字の曜日 + 数字
- return day + dayPeriod.period;
- })
- .join(", ");
-}
-
-/**
- * 授業の詳細を表示するモーダル
- * 表示非表示は親コンポーネントで制御することを想定しています
- * useStateなどを利用して実装してください
- *
- * 具体的には
- * shouldOpenをuseStateのisOpenに
- * onCloseButtonClickedの中で、setIsOpenにfalseを渡す想定です
- * @param props モーダルに渡すプロパティ
- * @param props.isOpen このモーダルが表示中か否か
- * @param props.onCloseButtonClicked モーダルの閉じるボタンが押された時のコールバック
- * @param props.classData 授業の情報
- * @returns モーダルコンポーネント
- */
-const ClassModalComponent: React.FC
= ({
- isOpen,
- onCloseButtonClicked,
- classData,
-}) => {
- return (
- <>
-
-
- );
-};
-
-export default ClassModalComponent;
diff --git a/src/app/disclaimer/page.tsx b/src/app/disclaimer/page.tsx
deleted file mode 100644
index fdf802d..0000000
--- a/src/app/disclaimer/page.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from "react";
-import { FaqItem, HowToUseItem } from "../how-to-use/HowToUseItem";
-
-const Blue: React.FC<{ children: string }> = ({ children }) => {
- return {children};
-};
-
-const disclaimer: React.FC = () => {
- return (
- <>
-
-
- 本サービスにより提供されているデータは、
-
- UTAS
-
- と
-
- 東京大学授業カタログ
-
- がオンラインで公開している情報をベースとしています。データの正確性に関しては保証いたしかねますので、履修の際は必ず公式の資料に目を通してください。本サービスの利用によって生じたいかなる損害についても
- ut.code(); は責任を負いません。
-
-
- 本サービスが提供する成績評価方法の検索機能は、公式に提供されている成績評価方法の情報から「試験」「レポート」などの文字列を検索することにより提供されています。手作業での検証はしておりませんのでご留意ください。
-
-
- 本サービスでは、通信量の削減のため、初回アクセス時に全てのデータをダウンロードしてLocalStorageに保存しています。この情報は、2回目以降のアクセス時に読み込みを高速化する以外の用途には使用されません。
-
-
- 本サービスは ut.code();
- によって運営されており、東京大学は一切運営に関与していません。本サービスが提供するデータは教養学部前期課程教務課に確認の上、機械的に取得されたものです。なお、本サービスで利用されているデータの一切は
- ut.code(); が保有するサーバーに保存されています。
-
-
- 本サービスは
-
- Apacheライセンス バージョン2.0
-
- の下で提供されている Google Material Icons をその一部に含みます。
-
-
-
- );
-};
-export default disclaimer;
diff --git a/src/app/globals.css b/src/app/globals.css
deleted file mode 100644
index 0b98c3f..0000000
--- a/src/app/globals.css
+++ /dev/null
@@ -1,130 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
- /*
- 色の定義を行う。
- ここで宣言した変数は、tailwind.config.tsで参照されるが、
- ライトモードでは:rootの値が
- ダークモードでは:root[class~="dark"]の値が適用される。
- */
-
- /* 色の定義(ライトモード) */
- :root {
- /* Color Highlight というvscode拡張機能を利用すると、
- コメント部に色が付き見やすくなります */
- /* 色の種類や用途についてはtailwind.config.tsを参照 */
- --color-primary: 46 106 68; /* #2E6A44 */
- --color-surface-tint: 46 106 68; /* #2E6A44 */
- --color-on-primary: 255 255 255; /* #FFFFFF */
- --color-primary-container: 178 241 193; /* #B1F1C1 */
- --color-on-primary-container: 0 33 14; /* #00210E */
- --color-secondary: 79 99 83; /* #4F6353 */
- --color-on-secondary: 255 255 255; /* #FFFFFF */
- --color-secondary-container: 210 232 212; /* #D2E8D4 */
- --color-on-secondary-container: 13 31 19; /* #0D1F13 */
- --color-tertiary: 58 100 111; /* #3A646F */
- --color-on-tertiary: 255 255 255; /* #FFFFFF */
- --color-tertiary-container: 190 234 246; /* #BEEAF6 */
- --color-on-tertiary-container: 0 31 38; /* #001F26 */
- --color-error: 186 26 26; /* #BA1A1A */
- --color-on-error: 255 255 255; /* #FFFFFF */
- --color-error-container: 255 218 214; /* #FFDAD6 */
- --color-on-error-container: 65 0 2; /* #410002 */
- --color-background: 246 251 243; /* #F6FBF3 */
- --color-on-background: 24 29 24; /* #181D18 */
- --color-surface: 246 251 243; /* #F6FBF3 */
- --color-on-surface: 24 29 24; /* #181D18 */
- --color-surface-variant: 221 229 219; /* #DDE5DB */
- --color-on-surface-variant: 65 73 65; /* #414942 */
- --color-outline: 113 121 113; /* #717971 */
- --color-outline-variant: 193 201 191; /* #C1C9BF */
- --color-shadow: 0 0 0; /* #000000 */
- --color-scrim: 0 0 0; /* #000000 */
- --color-inverse-surface: 44 50 45; /* #2C322D */
- --color-inverse-on-surface: 237 242 234; /* #EDF2EB */
- --color-inverse-primary: 150 213 166; /* #96D5A6 */
- --color-primary-fixed: 178 241 193; /* #B1F1C1 */
- --color-on-primary-fixed: 0 33 14; /* #00210E */
- --color-primary-fixed-dim: 150 213 166; /* #96D5A6 */
- --color-on-primary-fixed-variant: 18 81 46; /* #12512E */
- --color-secondary-fixed: 210 232 212; /* #D2E8D4 */
- --color-on-secondary-fixed: 13 31 19; /* #0D1F13 */
- --color-secondary-fixed-dim: 182 204 184; /* #B6CCB8 */
- --color-on-secondary-fixed-variant: 56 75 60; /* #384B3C */
- --color-tertiary-fixed: 190 234 246; /* #BEEAF6 */
- --color-on-tertiary-fixed: 0 31 38; /* #001F26 */
- --color-tertiary-fixed-dim: 162 206 218; /* #A2CEDA */
- --color-on-tertiary-fixed-variant: 33 76 87; /* #214C57 */
- --color-surface-dim: 215 219 212; /* #D7DBD4 */
- --color-surface-bright: 246 251 243; /* #F6FBF3 */
- --color-surface-container-lowest: 255 255 255; /* #FFFFFF */
- --color-surface-container-low: 240 245 237; /* #F0F5ED */
- --color-surface-container: 235 239 232; /* #EAEFE8 */
- --color-surface-container-high: 229 234 226; /* #E5EAE2 */
- --color-surface-container-highest: 223 228 220; /* #DFE4DC */
- --color-text-default: 0 0 0;
- }
-
- /* 色の定義(ダークモード) */
- :root[class~="dark"] {
- --color-primary: 150 213 166; /* #96D5A6 */
- --color-surface-tint: 150 213 166; /* #96D5A6 */
- --color-on-primary: 0 57 28; /* #00391C */
- --color-primary-container: 18 81 46; /* #12512E */
- --color-on-primary-container: 178 241 193; /* #B1F1C1 */
- --color-secondary: 182 204 184; /* #B6CCB8 */
- --color-on-secondary: 34 53 39; /* #223527 */
- --color-secondary-container: 56 75 60; /* #384B3C */
- --color-on-secondary-container: 210 232 212; /* #D2E8D4 */
- --color-tertiary: 162 206 218; /* #A2CEDA */
- --color-on-tertiary: 2 54 63; /* #023640 */
- --color-tertiary-container: 33 76 87; /* #214C57 */
- --color-on-tertiary-container: 190 234 246; /* #BEEAF6 */
- --color-error: 255 180 171; /* #FFB4AB */
- --color-on-error: 105 0 5; /* #690005 */
- --color-error-container: 147 0 10; /* #93000A */
- --color-on-error-container: 255 218 214; /* #FFDAD6 */
- --color-background: 16 21 16; /* #101510 */
- --color-on-background: 223 228 220; /* #DFE4DC */
- --color-surface: 16 21 16; /* #101510 */
- --color-on-surface: 223 228 220; /* #DFE4DC */
- --color-surface-variant: 65 73 65; /* #414942 */
- --color-on-surface-variant: 193 201 191; /* #C1C9BF */
- --color-outline: 139 147 138; /* #8B938A */
- --color-outline-variant: 65 73 65; /* #414942 */
- --color-shadow: 0 0 0; /* #000000 */
- --color-scrim: 0 0 0; /* #000000 */
- --color-inverse-surface: 223 228 220; /* #DFE4DC */
- --color-inverse-on-surface: 44 50 45; /* #2C322D */
- --color-inverse-primary: 46 106 68; /* #2E6A44 */
- --color-primary-fixed: 178 241 193; /* #B1F1C1 */
- --color-on-primary-fixed: 0 33 14; /* #00210E */
- --color-primary-fixed-dim: 150 213 166; /* #96D5A6 */
- --color-on-primary-fixed-variant: 18 81 46; /* #12512E */
- --color-secondary-fixed: 210 232 212; /* #D2E8D4 */
- --color-on-secondary-fixed: 13 31 19; /* #0D1F13 */
- --color-secondary-fixed-dim: 182 204 184; /* #B6CCB8 */
- --color-on-secondary-fixed-variant: 56 75 60; /* #384B3C */
- --color-tertiary-fixed: 190 234 246; /* #BEEAF6 */
- --color-on-tertiary-fixed: 0 31 38; /* #001F26 */
- --color-tertiary-fixed-dim: 162 206 218; /* #A2CEDA */
- --color-on-tertiary-fixed-variant: 33 76 87; /* #214C57 */
- --color-surface-dim: 16 21 16; /* #101510 */
- --color-surface-bright: 53 58 53; /* #353A35 */
- --color-surface-container-lowest: 10 15 11; /* #0A0F0B */
- --color-surface-container-low: 24 29 24; /* #181D18 */
- --color-surface-container: 28 33 28; /* #1C211C */
- --color-surface-container-high: 38 43 38; /* #262B26 */
- --color-surface-container-highest: 49 54 49; /* #313631 */
- --color-text-default: 255 255 255;
- }
- a {
- text-decoration: underline;
- }
-
- a:hover {
- text-decoration: none;
- }
-}
diff --git a/tailwind.config.ts b/tailwind.config.ts
deleted file mode 100644
index 34fc9d5..0000000
--- a/tailwind.config.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
- content: [
- "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
- "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
- "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
- ],
- theme: {
- extend: {
- backgroundImage: {
- "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
- "gradient-conic":
- "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
- },
- gridTemplateColumns: {
- // 13列のグリッドを定義
- "11": "repeat(11, minmax(0, 1fr))",
- "13": "repeat(13, minmax(0, 1fr))",
- },
- gridTemplateRows: {
- // 15行のグリッドを定義
- "15": "repeat(15, minmax(0, 1fr))",
- },
- },
-
- colors: {
- /*
- * global.cssで定義した色の定義を参照
- * (ダークモードかライトモードかで色が変わる)
- *
- * Material designに乗っ取った配色となっている
- * 色の種類は 1-3次色とエラー色の4種類が定義されており、
- * それぞれに対し、containerとonの属性が存在
- *
- * on-xxx : xxxが背景の時の文字色
- * xxx-container : よりbgに近い、明るいxxx色(FAB(浮いて見えるボタン)や、
- * on-xxx-container : container-xxxが背景の時の文字色(トグルの塗りつぶし、input要素の塗りつぶしなどに用いる)
- *
- * material designの公式ドキュメント
- * 具体的な使い方などはこちらを参照
- * https://m3.material.io/styles/color/roles
- *
- */
-
- /* 1次色 テーマとなる色 強調したい要素に用いる */
- primary: "rgb(var(--color-primary) / )",
- "on-primary": "rgb(var(--color-on-primary) / )", // テーマ色が背景の時の文字色
- "primary-container":
- "rgb(var(--color-primary-container) / )", // よりbgに近い、明るいテーマ色(FAB(浮いて見えるボタン)や、トグルの塗りつぶし、input要素の塗りつぶしなどに用いる)
- "on-primary-container":
- "rgb(var(--color-on-primary-container) / )", // primary-containerが背景の時の文字色
-
- /* 2次色 テーマより控えめな色 primaryほど強調したくない要素に用いる */
- secondary: "rgb(var(--color-secondary) / )", // primaryに対して目立たない色(そこまで重要でないUIに用いる)
- "on-secondary": "rgb(var(--color-on-secondary) / )", // secondaryが背景の時の文字色
- "secondary-container":
- "rgb(var(--color-secondary-container) / )", // 明るい(目立たない)secondary色
- "on-secondary-container":
- "rgb(var(--color-on-secondary-container) / )", // secondary-containerが背景の時の文字色
-
- /* 3次色 テーマとは異なる色相でアクセントとなる ユーザーの目線を引く */
- tertiary: "rgb(var(--color-tertiary) / )", // テーマ色と対照的なアクセントとなり、ユーザーの目線を誘導できる
- "on-tertiary": "rgb(var(--color-on-tertiary) / )", // tertiaryが背景の時の文字色
- "tertiary-container":
- "rgb(var(--color-tertiary-container) / )", // 明るいtertiary色
- "on-tertiary-container":
- "rgb(var(--color-on-tertiary-container) / )", // tertiary-containerが背景の時の文字色
-
- /* エラー色 目立つ */
- error: "rgb(var(--color-error) / )", // エラーを示す色
- "on-error": "rgb(var(--color-on-error) / )", // errorが背景の時の文字色
- "error-container": "rgb(var(--color-error-container) / )", // 明るいerror色
- "on-error-container":
- "rgb(var(--color-on-error-container) / )", // error-containerが背景の時の文字色
-
- /*
- * 背景色(レガシー?)
- * レガシーな色の定義で、surfaceを用いるよう公式ドキュメントに記載がある(らしいが、見つからない)
- * https://stackoverflow.com/questions/77292102/what-are-the-guidelines-on-when-to-use-surface-vs-background-color-in-materi
- *
- * 公式の使用例でも主にsurfaceを用いているため、surfaceを用いるようにしたい
- */
- background: "rgb(var(--color-background) / )",
- "on-background": "rgb(var(--color-on-background) / )",
-
- /* 背景色 */
- // 画面全体を覆う色はsurface containerを用いて、
- // コンテンツを表示する(カード)要素の背景はsurfaceを用いる
- surface: "rgb(var(--color-surface) / )",
- "on-surface": "rgb(var(--color-on-surface) / )",
-
- // surface container
- // 明(lowest) -> 暗(highest)
- "surface-container-lowest":
- "rgb(var(--color-surface-container-lowest) / )",
- "surface-container-low":
- "rgb(var(--color-surface-container-low) / )",
- "surface-container":
- "rgb(var(--color-surface-container) / )",
- "surface-container-high":
- "rgb(var(--color-surface-container-high) / )",
- "surface-container-highest":
- "rgb(var(--color-surface-container-highest) / )",
-
- "surface-variant": "rgb(var(--color-surface-variant) / )", // surfaceよりも暗い色
- "on-surface-variant":
- "rgb(var(--color-on-surface-variant) / )", // surface-variantが背景の時の文字色
-
- /* アウトライン */
- // 2種類のアウトライン色
- outline: "rgb(var(--color-outline) / )", // インプットフィールドなど、重要な要素に用いる
- "outline-variant": "rgb(var(--color-outline-variant) / )", // 要素の装飾に用いる(分割線など)
-
- /* inverse colors*/
- // 背景色と文字色のコントラストを逆転する
- "inverse-surface": "rgb(var(--color-inverse-surface) / )",
- "inverse-on-surface":
- "rgb(var(--color-inverse-on-surface) / )",
- "inverse-primary": "rgb(var(--color-inverse-primary) / )", // inverse-surface上のprimary色
-
- /* Fixed accent colors */
- // ダークとライトモードで変化しない色設定
- // fixed背景には、on-xxx-fixedで文字(アイコン)を記述する
- "primary-fixed": "rgb(var(--color-primary-fixed) / )",
- "on-primary-fixed": "rgb(var(--color-on-primary-fixed) / )",
- "primary-fixed-dim":
- "rgb(var(--color-primary-fixed-dim) / )",
- "on-primary-fixed-variant":
- "rgb(var(--color-on-primary-fixed-variant) / )",
- "secondary-fixed": "rgb(var(--color-secondary-fixed) / )",
- "on-secondary-fixed":
- "rgb(var(--color-on-secondary-fixed) / )",
- "secondary-fixed-dim":
- "rgb(var(--color-secondary-fixed-dim) / )",
- "on-secondary-fixed-variant":
- "rgb(var(--color-on-secondary-fixed-variant) / )",
- "tertiary-fixed": "rgb(var(--color-tertiary-fixed) / )",
- "on-tertiary-fixed":
- "rgb(var(--color-on-tertiary-fixed) / )",
- "tertiary-fixed-dim":
- "rgb(var(--color-tertiary-fixed-dim) / )",
- "on-tertiary-fixed-variant":
- "rgb(var(--color-on-tertiary-fixed-variant) / )",
-
- /* dim and bright */
- // 通常のsurfaceと違い、
- // dim : ライトモードで、やや暗い色となる(ダークモードでは変わらない)
- // bright : ダークモードで、やや明るい色となる(ライトモードでは変わらない)
- "surface-dim": "rgb(var(--color-surface-dim) / )",
- "surface-bright": "rgb(var(--color-surface-bright) / )",
-
- /* その他 */
- shadow: "rgb(var(--color-shadow) / )", // 影
- scrim: "rgb(var(--color-scrim) / )", // スクリム(背景を暗くして目立たなくする際の色。モーダルなどで使用)
-
- "surface-tint": "rgb(var(--color-surface-tint) / )", // !!非推奨!!
-
- /* テキスト色 */
- "text-default": "rgb(var(--color-text-default) / )",
- },
- },
- plugins: [],
-};
-export default config;
diff --git a/tsconfig.base.json b/tsconfig.base.json
new file mode 100644
index 0000000..bfa0fea
--- /dev/null
+++ b/tsconfig.base.json
@@ -0,0 +1,29 @@
+{
+ "compilerOptions": {
+ // Environment setup & latest features
+ "lib": ["ESNext"],
+ "target": "ESNext",
+ "module": "Preserve",
+ "moduleDetection": "force",
+ "jsx": "react-jsx",
+ "allowJs": true,
+
+ // Bundler mode
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "noEmit": true,
+
+ // Best practices
+ "strict": true,
+ "skipLibCheck": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedIndexedAccess": true,
+ "noImplicitOverride": true,
+
+ // Some stricter flags (disabled by default)
+ "noUnusedLocals": false,
+ "noUnusedParameters": false,
+ "noPropertyAccessFromIndexSignature": false
+ }
+}