Merge pull request #304 from suzuka-kosen-festa/dev

v2.0.0-rc

.eslintrc.yml

@@ -33,3 +33,5 @@ rules:
     - 2
     - namedComponents: arrow-function
   react/jsx-props-no-spreading: off
+  react/no-unknown-property: off
+  react/prop-types: off

.github/workflows/chromatic-test.yml

@@ -7,8 +7,6 @@ on:
     paths:
       - src/components/**
       - src/stories/**
-      - package.json
-      - yarn.lock
 
 jobs:
   run-chromatic-test:

.github/workflows/codeql.yml

@@ -18,7 +18,7 @@ jobs:
       fail-fast: false
       matrix:
         language:
-          - javascript
+          - typescript # https://git.io/codeql-language-support
     steps:
       - name: Checkout
         uses: actions/checkout@v3

.github/workflows/test.yml

@@ -18,17 +18,65 @@ jobs:
           cache: yarn
       - name: Install Dependencies
         run: yarn install --immutable
-      - name: Check codes types
-        run: yarn run type
       - name: Build the project
         run: yarn run build
       - name: Test
         run: yarn run test
         env:
           VITE_GOOGLE_MAP_API_KEY: ${{ secrets.VITE_GOOGLE_MAP_API_KEY }}
+  run-storybook-test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: yarn
+      - name: Install Dependencies
+        run: yarn install --immutable
+      - name: Build the project
+        run: yarn run build
+      - name: Build Storybook test
+        run: yarn run build-storybook
+  run-type:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: yarn
+      - name: Install Dependencies
+        run: yarn install --immutable
+      - name: Build the project
+        run: yarn run build
+      - name: Type check test
+        run: yarn run type
+  run-prettier:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: yarn
+      - name: Install Dependencies
+        run: yarn install --immutable
+      - name: Format the code
+        run: yarn run fmt:check
   run-test-check:
     if: ${{ ! failure() }}
-    needs: run-test
+    needs:
+      - run-test
+      - run-storybook-test
+      - run-type
+      - run-prettier
     runs-on: ubuntu-latest
     steps:
       - run: echo "Type check, Build, Test are successfully executed."

.gitignore

@@ -338,10 +338,6 @@ Cargo.lock
 .AppleDouble
 .LSOverride
 
-# Icon must end with two \r
-Icon
-
-
 # Thumbnails
 ._*
 

.hygen.js

@@ -0,0 +1,3 @@
+module.exports = {
+  templates: `${__dirname}/.hygen`,
+};

.hygen/new/fc/Component.model.ts.ejs.t

@@ -0,0 +1,4 @@
+---
+to: "<%= have_props ? `${abs_path}/types/model.ts` : null %>"
+---
+export type <%= upper_component_name %>Properties = {};

.hygen/new/fc/Component.stories.tsx.ejs.t

@@ -0,0 +1,20 @@
+---
+to: <%= abs_path %>/<%= component_name %>.stories.tsx
+---
+import type { ComponentStoryObj, ComponentMeta } from "@storybook/react";
+import { ComponentPropsWithoutRef } from 'react';
+import { <%= upper_component_name %> } from ".";
+
+type T = typeof <%= upper_component_name %>;
+type Story = ComponentStoryObj<T>;
+type Meta = ComponentMeta<T>;
+
+const args: ComponentPropsWithoutRef<T> = {};
+
+export default {
+  args,
+  argTypes: {},
+  component: <%= upper_component_name %>,
+} as Meta;
+
+export const Default: Story = {};

.hygen/new/fc/Component.test.tsx.ejs.t

@@ -0,0 +1,16 @@
+---
+to: <%= abs_path %>/<%= component_name %>.test.tsx
+---
+import { composeStories } from "@storybook/testing-react";
+import "@testing-library/jest-dom";
+import { render } from "@testing-library/react";
+import * as stories from "./<%= component_name %>.stories";
+
+const { Default } = composeStories(stories);
+
+describe("(components) <%= category %>/<%= component_name %>", () => {
+  test("take snap shot", () => {
+    const { container } = render(<Default />);
+    expect(container).toMatchSnapshot();
+  });
+});

.hygen/new/fc/Component.tsx.ejs.t

@@ -0,0 +1,14 @@
+---
+to: <%= abs_path %>/index.tsx
+---
+import type { FC } from "react";
+import tw from "twin.macro";
+<% if (have_props) { -%>
+import type { <%= upper_component_name %>Properties } from "./types/model";
+<% } -%>
+
+const <%= upper_component_name %>:<% if (have_props) { -%> FC<<%= upper_component_name %>Properties> <% } else { -%> FC <% } -%>= <%= props %> => (
+  <div></div>
+);
+
+export { <%= upper_component_name %> };

.hygen/new/fc/index.js

@@ -0,0 +1,48 @@
+/**
+ *
+ * @param {string} text
+ * @return {string}
+ */
+function clearAndUpper(text) {
+  return text.replace(/-/, "").toUpperCase();
+}
+
+/**
+ *
+ * npm run new:fc
+ */
+module.exports = {
+  prompt: ({ inquirer }) => {
+    const questions = [
+      {
+        type: "select",
+        name: "category",
+        message: "Which Atomic Design category?",
+        choices: ["atoms", "molecules", "organisms", "templates"],
+      },
+      {
+        type: "input",
+        name: "component_name",
+        message: "What is the name of component?",
+      },
+      {
+        type: "input",
+        name: "dir",
+        message: "Where is the directory? (No problem in blank)",
+      },
+      {
+        type: "confirm",
+        name: "have_props",
+        message: "Is it have props?",
+      },
+    ];
+    return inquirer.prompt(questions).then(answers => {
+      const { category, component_name, dir, have_props } = answers;
+      const path = `${category}/${dir ? `${dir}/` : ``}${component_name}`;
+      const abs_path = `src/components/${path}`;
+      const upper_component_name = component_name.replace(/(^\w|-\w)/g, clearAndUpper);
+      const props = have_props ? "({})" : "()";
+      return { ...answers, path, abs_path, upper_component_name, props };
+    });
+  },
+};

.storybook/preview-body.html

@@ -0,0 +1 @@
+<div id="portal"></div>

.storybook/preview.jsx

@@ -17,7 +17,7 @@ export const parameters = {
     values: [
       {
         name: "kosen-fes",
-        value: "#211A1A",
+        value: "#FFFFFF",
       },
     ],
   },

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.2.3.cjs
+yarnPath: .yarn/releases/yarn-3.2.4.cjs

README.md

@@ -8,7 +8,7 @@
 
 <h2>コンポーネントカタログ</h2>
 
-[chromatic]()
+[chromatic](https://www.chromatic.com/library?appId=6256f5d6e0b94a003ab4a0e1)
 
 <h2>デザイナー向け初期セットアップ</h2>
 直接コードを編集することはしませんが、デザイントークンの生成まではやっていきたいので以下のリンクを参考にセットアップしてみてください