Merge pull request #6 from CASru-IT/5-グローバルによく使う部品を実装

5 グローバルによく使う部品を実装
CASru-IT · Sep 13, 2024 · 1a17206 · 1a17206
2 parents 2b78e35 + 7f7871a
commit 1a17206
Show file tree

Hide file tree

Showing 15 changed files with 3,298 additions and 477 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -12,49 +12,13 @@
 			"installZsh": true,
 			"configureZshAsDefaultShell": true,
 			"installOhMyZsh": true,
-			"upgradePackages": true,
+			"upgradePackages": false,
 			"username": "node"
 		}
 	},
 	"postStartCommand": "git config --global --add safe.directory ${containerWorkspaceFolder}",
 	"customizations": {
 		"vscode": {
-			"settings": {
-				// ファイル保存時にフォーマット処理を実行
-				"editor.formatOnSave": true,
-				// 各ファイルのデフォルトのフォーマッターを指定
-				"[javascript]": {
-					"editor.defaultFormatter": "esbenp.prettier-vscode"
-				},
-				"[javascriptreact]": {
-					"editor.defaultFormatter": "esbenp.prettier-vscode"
-				},
-				"[typescript]": {
-					"editor.defaultFormatter": "esbenp.prettier-vscode"
-				},
-				"[typescriptreact]": {
-					"editor.defaultFormatter": "esbenp.prettier-vscode"
-				},
-				"[json]": {
-					"editor.defaultFormatter": "esbenp.prettier-vscode"
-				},
-				"[postcss]": {
-					"editor.defaultFormatter": "esbenp.prettier-vscode"
-				},
-				"[css]": {
-					"editor.defaultFormatter": "esbenp.prettier-vscode"
-				},
-				// ESLintの対象を設定
-				"eslint.validate": [
-					"javascript",
-					"javascriptreact",
-					"typescript",
-					"typescriptreact"
-				],
-				// VSCodeのデフォルトのフォーマッターを無効に
-				"javascript.format.enable": false,
-				"typescript.format.enable": false
-			},
 			// 拡張機能を追加
 			"extensions": [
 				"dbaeumer.vscode-eslint", // ESLint
@@ -66,7 +30,8 @@
 				"mhutchie.git-graph", // Git Graph
 				"mosapride.zenkaku", // zenkaku
 				"shardulm94.trailing-spaces", // Trailing Spaces
-				"christian-kohler.path-intellisense" // Path Intellisense
+				"christian-kohler.path-intellisense", // Path Intellisense
+				"stylelint.vscode-stylelint" // stylelint
 			]
 		}
 	}

diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -0,0 +1,16 @@
+module.exports = {
+  extends: [
+    "stylelint-config-recess-order",
+    "stylelint-config-standard-scss",
+  ],
+  plugins:["stylelint-scss"],
+  rules: {
+    // ::before, ::afterのコロンを2つにする
+    "selector-pseudo-element-colon-notation": "double",
+    // クラス名でアンパサンド（&）は禁止（&:hoverなどはOK）
+    "scss/selector-no-union-class-name": true,
+    // シングルクォーテーションに統一
+    "string-quotes": "double",
+  },
+  ignoreFiles: ["**/node_modules/**"],
+};
diff --git a/.vscode/setting.json b/.vscode/setting.json
@@ -0,0 +1,36 @@
+{
+  "editor.formatOnSave": true,
+  "edito.defaultFormatter": "esbenp.prettier-vscode",
+  "[css]": {
+    "editor.formatOnSave": false,
+    "editor.codeActionsOnSave": {
+      "source.fixAll.stylelint": true
+    }
+  },
+  "[scss]": {
+    "editor.formatOnSave": false,
+    "editor.codeActionsOnSave": {
+      "source.fixAll.stylelint": true
+    }
+  },
+  "css.validate": false,
+  "scss.validate": false,
+  "sass.validate": false,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+    "source.addMissingImports": true
+  },
+  "javascript.format.enable": false,
+  "typescript.format.enable": false,
+  "stylelint.validate": [
+    "css",
+    "scss",
+    "less"
+  ]
+}
diff --git a/app/components/button/button.module.scss b/app/components/button/button.module.scss
@@ -0,0 +1,76 @@
+@import "../size";
+@import "../color";
+
+.buttonContainer {
+  @include font-size-n(6);
+
+  position: relative;
+  display: block;
+  width: fit-content;
+  height: 28px;
+  line-height: 1;
+  color: $ForeGroundColor;
+  text-decoration: none;
+
+  &::before {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    z-index: -1;
+    display: block;
+    width: 100%;
+    height: 26px;
+    content: "";
+    border: 1px solid $ForeGroundColor;
+    border-radius: 4px;
+  }
+
+  &:active {
+    color: black;
+
+    &::before {
+      display: none;
+    }
+
+    .buttonInner {
+      position: relative;
+      top: 2px;
+      left: 2px;
+      height: 26px;
+    }
+  }
+}
+
+.icon {
+  position: relative;
+  top: 1px;
+  display: inline-block;
+  color: $ForeGroundColor;
+  stroke-width: 1px;
+}
+
+.beforeIcon {
+  width: 16px;
+  height: 16px;
+
+  @extend .icon;
+}
+
+.afterIcon {
+  width: 10px;
+  height: 10px;
+  margin-left: 2px;
+  color: $ForeGroundColor;
+  stroke-width: 2px;
+
+  @extend .icon;
+}
+
+.buttonInner {
+  display: inline-block;
+  height: 26px;
+  padding: 4px;
+  background-color: $BackGroundColor;
+  border: 1px solid $ForeGroundColor;
+  border-radius: 4px;
+}
diff --git a/app/components/button/button.tsx b/app/components/button/button.tsx
@@ -0,0 +1,57 @@
+"use client";
+import Link from "next/link";
+import style from "./button.module.scss";
+import { Twitter, Instagram, Github, ExternalLink } from "lucide-react";
+
+export default function Button({
+  children,
+  beforeIcon: BeforeIconName,
+  external,
+  action,
+}: Readonly<{
+  children: React.ReactNode;
+  beforeIcon?: "Twitter" | "Instagram" | "GitHub";
+  external?: boolean;
+  action: (() => void) | string;
+}>) {
+  function BeforeIcon(): React.ReactNode {
+    switch (BeforeIconName) {
+      case "Twitter":
+        return <Twitter className={style.beforeIcon} />;
+      case "Instagram":
+        return <Instagram className={style.beforeIcon} />;
+      case "GitHub":
+        return <Github className={style.beforeIcon} />;
+    }
+  }
+
+  if (typeof action === "string") {
+    if (external) {
+      return (
+        <a href={action} className={style.buttonContainer} target="_blank">
+          <div className={style.buttonInner}>
+            <BeforeIcon />
+            {children}
+            {external ? <ExternalLink className={style.afterIcon} /> : null}
+          </div>
+        </a>
+      );
+    } else {
+      return (
+        <Link href={action} className={style.buttonContainer}>
+          <div className={style.buttonInner}>
+            <BeforeIcon />
+            {children}
+          </div>
+        </Link>
+      );
+    }
+  } else if (typeof action === "function") {
+    return (
+      <button onClick={action} className={style.buttonContainer}>
+        <BeforeIcon />
+        <div className={style.buttonInner}>{children}</div>
+      </button>
+    );
+  }
+}
diff --git a/app/components/color.scss b/app/components/color.scss
@@ -0,0 +1,2 @@
+$ForeGroundColor: #0a0a18;
+$BackGroundColor: #f9f9f9;
diff --git a/app/components/size.scss b/app/components/size.scss
@@ -0,0 +1,59 @@
+// フォントサイズからline-heightを計算するfunction
+// $font-size:実数
+// @return:実数
+@function calc-line-height($font-size) {
+  $i: 1;
+
+  @while $i * 4<=$font-size {
+    $i: $i + 1;
+  }
+
+  @return $i * 4 / $font-size;
+}
+
+// 数字からfont-sizeとline-heightを設定するmixin
+// $n:非負整数
+// @return:font-sizeとline-height
+@mixin font-size-n($n) {
+  $font-size: 16 * 8/ ($n + 3);
+
+  @if $font-size<16 {
+    $font-size: 16;
+  }
+
+  font-size: #{$font-size}px;
+  line-height: calc-line-height($font-size);
+}
+
+// 単語からfont-sizeとline-heightを設定するmixin
+// $string:main|small|tiny
+// @return:font-sizeとline-height
+@mixin font-size-string($string) {
+  $font-size-main: 16;
+  $font-size-small: 12;
+  $font-size-tiny: 8;
+  $font-size: 0;
+
+  @if $string== "main" {
+    $font-size: $font-size-main;
+
+    line-height: 32px;
+  } @else if $string== "small" {
+    $font-size: $font-size-small;
+
+    line-height: calc-line-height($font-size);
+  } @else if $string== "tiny" {
+    $font-size: $font-size-tiny;
+
+    line-height: calc-line-height($font-size);
+  }
+
+  font-size: #{$font-size}px;
+}
+
+// 数字から余白の大きさを計算するfunction
+// $n:非負整数
+// @return:非負整数px
+@function white-space($n) {
+  @return #{$n * 4}px;
+}