create-specment 0.2.9 → 0.3.0

package/templates/package.json.template

@@ -0,0 +1,46 @@
+{
+  "name": "{{projectName}}",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@docusaurus/core": "^3.9.2",
+    "@docusaurus/preset-classic": "^3.9.2"{{#hasMermaid}},
+    "@docusaurus/theme-mermaid": "^3.9.2"{{/hasMermaid}},
+    "@easyops-cn/docusaurus-search-local": "^0.52.2",
+    "@mdx-js/react": "^3.0.0",
+    "clsx": "^2.0.0"{{#hasPlantUML}},
+    "docusaurus-theme-plantuml": "^1.0.2"{{/hasPlantUML}},
+    "prism-react-renderer": "^2.4.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"{{#hasRedoc}},
+    "redocusaurus": "^2.5.0"{{/hasRedoc}}
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "^3.9.2",
+    "@docusaurus/tsconfig": "3.9.2",
+    "@docusaurus/types": "^3.9.2",
+    "@types/node": "^24.2.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "~5.9.2"
+  },
+  "browserslist": {
+    "production": [">0.5%", "not dead", "not op_mini all"],
+    "development": ["last 3 chrome version", "last 3 firefox version", "last 5 safari version"]
+  },
+  "engines": {
+    "node": ">=22.0"
+  }
+}

package/templates/src/components/Highlight/index.tsx

@@ -0,0 +1,68 @@
+/**
+ * Module Text highlighting. Color designation is possible.
+ * @module Highlight
+ * @example
+ * import { Highlight } from '@site/src/components/Highlight';
+ * <Highlight color='#25C2A0'>Green</Highlight>
+ * <Highlight color='#1877F2'>Blue</Highlight>
+ * <TBD/>
+ */
+import type { ReactElement, ReactNode } from 'react';
+
+type HighlightProps = {
+  /** 強調したい文字列（子要素） */
+  children: ReactNode;
+  /** 背景色（16進数表記 #RRGGBB か #RGB） */
+  color: string;
+};
+
+/**
+ * Highlight tag.
+ * @param {{chidren: string, color: string}}
+ * @returns {JSX.Element}
+ */
+export function Highlight({ children, color }: HighlightProps): ReactElement {
+  return (
+    <span
+      style={{
+        backgroundColor: color,
+        borderRadius: '0.5rem',
+        color: blackOrWhite(color),
+        padding: '0.2rem',
+      }}
+    >
+      {children}
+    </span>
+  );
+}
+
+/**
+ * @see {@link https://www.w3.org/TR/AERT/#color-contract}
+ * @param  hex - example. '11AAFF' or '1AF'
+ */
+function blackOrWhite(hex: string): '#FFF' | '#000' {
+  const [r, g, b] = hex2rgb(hex);
+  return (r * 299 + g * 587 + b * 114) / 1000 < 120 ? '#FFF' : '#000';
+}
+
+/**
+ * @param hexVal - example. '11AAFF' or '1AF'
+ */
+function hex2rgb(hexVal: string): [number, number, number] {
+  let hex = hexVal.startsWith('#') ? hexVal.slice(1) : hexVal;
+
+  if (![3, 6].includes(hex.length)) {
+    throw new Error(`Invalid hex string: digit must be 3 or 6. hex=${hexVal}`);
+  }
+
+  if (hex.length === 3) hex = hex.replace(/(.)/g, '$1$1');
+  if (!/^[0-9A-Fa-f]{6}$/.test(hex)) {
+    throw new Error(`Invalid hex string. not hex number. hex=${hex}`);
+  }
+  const rgb = hex.match(/../g);
+  if (!rgb) {
+    throw new Error(`Invalid hex string. unknown. hex=${hex}`);
+  }
+
+  return [Number.parseInt(rgb[0], 16), Number.parseInt(rgb[1], 16), Number.parseInt(rgb[2], 16)];
+}

package/templates/src/components/PriorityMatrix/index.tsx

@@ -0,0 +1,97 @@
+import type { PriorityScale } from '@site/src/types/requirements';
+/**
+ * Priority Matrix Component.
+ * @module PriorityMatrix
+ * @example
+ * import { PriorityMatrix } from '@site/src/components/PriorityMatrix';
+ * <PriorityMatrix urgency={frontMatter.urgency} importance={frontMatter.importance} />
+ */
+import type { ReactElement } from 'react';
+
+interface PriorityMatrixProps {
+  importance: PriorityScale;
+  urgency: PriorityScale;
+}
+
+const getBackgroundColor = (value: number, selectedValue: number): string => {
+  if (value === selectedValue) return '#007bff';
+  if (value >= 7) return 'rgba(220, 53, 69, 0.2)';
+  if (value >= 4) return 'rgba(255, 193, 7, 0.2)';
+  return 'rgba(40, 167, 69, 0.2)';
+};
+
+export function PriorityMatrix({ importance, urgency }: PriorityMatrixProps): ReactElement {
+  return (
+    <div
+      style={{
+        marginTop: '1rem',
+        color: 'var(--ifm-color-content)',
+      }}
+    >
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '80px repeat(9, 40px)',
+          gap: '4px',
+          fontSize: '0.875rem',
+        }}
+      >
+        {/* 緊急度の行 */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '4px',
+          }}
+        >
+          緊急度
+        </div>
+        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => (
+          <div
+            key={`urgency-${num}`}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '8px 4px',
+              backgroundColor: getBackgroundColor(num, urgency),
+              borderRadius: '4px',
+              color: num === urgency ? '#ffffff' : 'var(--ifm-color-content)',
+            }}
+          >
+            {num}
+          </div>
+        ))}
+
+        {/* 重要度の行 */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '4px',
+          }}
+        >
+          重要度
+        </div>
+        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => (
+          <div
+            key={`importance-${num}`}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '8px 4px',
+              backgroundColor: getBackgroundColor(num, importance),
+              borderRadius: '4px',
+              color: num === importance ? '#ffffff' : 'var(--ifm-color-content)',
+            }}
+          >
+            {num}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/src/components/TBD/index.tsx

@@ -0,0 +1,16 @@
+/**
+ * Module TBD Label.
+ * @module TBD
+ * @example
+ * import TBD from '@site/src/components/TBD';
+ * <TBD/>
+ */
+import type { ReactNode } from 'react';
+import { Highlight } from '../Highlight/index';
+
+export function TBD(): ReactNode {
+  return <Highlight color="#1877F2">TBD</Highlight>;
+}
+
+// デフォルトエクスポートも提供
+export default TBD;

package/templates/src/css/custom.css

@@ -0,0 +1,81 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #2e8555;
+  --ifm-color-primary-dark: #29784c;
+  --ifm-color-primary-darker: #277148;
+  --ifm-color-primary-darkest: #205d3b;
+  --ifm-color-primary-light: #33925d;
+  --ifm-color-primary-lighter: #359962;
+  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme='dark'] {
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-light: #29d5b0;
+  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lightest: #4fddbf;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
+.docusaurus-highlight-code-line {
+  background-color: rgba(0, 0, 0, 0.1);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+}
+
+[data-theme='dark'] .docusaurus-highlight-code-line {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+/* Chapter number */
+main div.container article div.theme-doc-markdown {
+  counter-reset: ch-lv1;
+}
+main div.container article div.theme-doc-markdown > h2 {
+  counter-reset: ch-lv2;
+}
+main div.container article div.theme-doc-markdown > h3 {
+  counter-reset: ch-lv3;
+}
+main div.container article div.theme-doc-markdown > h4 {
+  counter-reset: ch-lv4;
+}
+
+main div.container article div.theme-doc-markdown > h2::before {
+  counter-increment: ch-lv1;
+  content: counter(ch-lv1) '. ';
+}
+main div.container article div.theme-doc-markdown > h3::before {
+  counter-increment: ch-lv2;
+  content: counter(ch-lv1) '.' counter(ch-lv2) '. ';
+}
+main div.container article div.theme-doc-markdown > h4::before {
+  counter-increment: ch-lv3;
+  content: counter(ch-lv1) '.' counter(ch-lv2) '.' counter(ch-lv3) '. ';
+}
+main div.container article div.theme-doc-markdown > h5::before {
+  counter-increment: ch-lv4;
+  content: counter(ch-lv1) '.' counter(ch-lv2) '.' counter(ch-lv3) '.' counter(ch-lv4) '. ';
+}
+
+/* Table of contents number */
+main div[class^='tableOfContents_'] ul {
+  counter-reset: toc-lv;
+  list-style: none;
+}
+main div[class^='tableOfContents_'] ul > li > a::before {
+  counter-increment: toc-lv;
+  content: counters(toc-lv, '.') '. ';
+}

package/templates/src/types/requirements.ts

@@ -0,0 +1,19 @@
+/**
+ * Requirements related type definitions
+ */
+
+/**
+ * Priority scale from 1 to 9
+ * 1-3: Low priority
+ * 4-6: Medium priority
+ * 7-9: High priority
+ */
+export type PriorityScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+
+/**
+ * Requirement priority matrix
+ */
+export interface RequirementPriority {
+  importance: PriorityScale;
+  urgency: PriorityScale;
+}