PR作成時にlintとtestをgithub actionで実行する

.github/workflows/lint.yml

@@ -0,0 +1,28 @@
+name: Lint
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.node-version'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run Lint
+        run: npm run lint

.github/workflows/test.yml

@@ -0,0 +1,28 @@
+name: Test
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.node-version'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run Tests
+        run: npm run test

.vscode/settings.json

@@ -15,5 +15,7 @@
   "files.insertFinalNewline": true,
   "[markdown]": {
     "files.trimTrailingWhitespace": false
-  }
+  },
+  "stylelint.stylelintPath": "node_modules/stylelint",
+  "stylelint.validate": ["scss"]
 }

packages/adapter/functions/size/_border.scss

@@ -51,7 +51,7 @@ $border-size-tokens: map.get(
 
 @function get-progress-indicator-border-size($size: l) {
   $tokens: map.get($border-size-tokens, progress-indicator);
-  $available-sizes: ('s', 'm', 'l');
+  $available-sizes: ("s", "m", "l");
 
   @if list.index($available-sizes, $size) == null {
     @error error-message.any-one-of(

packages/button/_functions.test.scss

@@ -43,4 +43,3 @@
 
   @return assert.equals("#{$actual}", "calc(2.5rem - 0.125rem)");
 }
-

packages/button/_mixins.scss

@@ -314,14 +314,14 @@
     adapter.get-button-border-size(
       $appearance: $appearance
     );
+  outline: functions.get-outline($state: $state);
+  outline-offset: adapter.get-focus-ring-outline-offset();
   box-shadow:
     functions.get-box-shadow(
       $appearance: $appearance,
       $color: $color,
       $state: $state
     );
-  outline: functions.get-outline($state: $state);
-  outline-offset: adapter.get-focus-ring-outline-offset();
 }
 
 @mixin -appearance-state-ruleset($appearance, $brightness, $color) {

packages/callout/_mixins.scss

@@ -5,12 +5,12 @@
 
 @mixin style($options: variables.$default-options) {
   display: flex;
-  $options: map.merge(variables.$default-options, $options);
   padding: adapter.get-spacing-size(map.get($options, size));
-  border-radius: adapter.get-radius-size(map.get($options, size));
-  box-shadow: adapter.get-elevation-box-shadow(1);
   font-size: adapter.get-font-size(map.get($options, size));
   line-height: adapter.get-line-height($level: map.get($options, size), $density: normal);
+  border-radius: adapter.get-radius-size(map.get($options, size));
+  box-shadow: adapter.get-elevation-box-shadow(1);
+  $options: map.merge(variables.$default-options, $options);
 
   ._leading {
     padding-right: adapter.get-spacing-size(s);
@@ -54,18 +54,18 @@
     @include -state-style(notice);
   }
 
-  @each $size in 's', 'm', 'l' {
+  @each $size in "s", "m", "l" {
     &.-size-#{$size} {
       @include -size-style($size);
     }
   }
 }
 
 @mixin -state-style($state) {
-  background-color: adapter.get-semantic-color($state, 100);
   color: adapter.get-semantic-color($state, 800);
+  background-color: adapter.get-semantic-color($state, 100);
 
-  ._leading:after {
+  ._leading::after {
     content: map.get(variables.$icon-map, $state);
   }
 }

packages/callout/_variables.scss

@@ -14,4 +14,4 @@ $title-margin-map: (
   s: xxs,
   m: xs,
   l: s
-)
+);

packages/card/_mixins.scss

@@ -44,6 +44,7 @@
     @include -gapless-rule;
   } @else {
     padding: adapter.get-spacing-size(m);
+
     @include adapter.mq-boundary(up, m) {
       padding: adapter.get-spacing-size(l);
     }
@@ -65,12 +66,12 @@
 
   ._media {
     line-height: 0;
+
     ._thumbnail {
       max-width: 100%;
       height: auto;
     }
   }
-
 }
 
 @mixin export {
@@ -105,8 +106,8 @@
 
 @mixin -shape-rule($shape: circle) {
   @if $shape == circle {
-    border-radius: adapter.get-radius-size($level: l);
     overflow: hidden;
+    border-radius: adapter.get-radius-size($level: l);
   } @else if $shape == square {
     border-radius: 0;
   }

packages/card/_variables.scss

@@ -12,4 +12,3 @@ $available-appearance: (
   filled,
   outlined
 );
-

packages/checkbox/_mixins.scss

@@ -89,9 +89,9 @@
   padding: 0;
   background-color: transparent;
   border: none;
+  border-radius: adapter.get-radius-size($level: m);
   outline: none;
   appearance: unset;
-  border-radius: adapter.get-radius-size($level: m);
 }
 
 @mixin -child-element-proto() {

packages/progress-indicator/_mixins.scss

@@ -62,17 +62,18 @@
     left: adapter.get-spacing-size($level: xxs);
     display: block;
     box-sizing: border-box;
-    border-style: solid;
     border-color: adapter.get-progress-indicator-indicator-surface-color();
-    border-radius: 50%;
+    border-style: solid;
     border-width: adapter.get-progress-indicator-border-size($size: l);
+    border-radius: 50%;
     transform: rotate(45deg);
     transform-origin: center;
     transition: clip-path 0.1s ease;
     content: "";
     clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%, 50% 50%);
   }
-  @each $size in 's', 'm', 'l' {
+
+  @each $size in "s", "m", "l" {
     &.-size-#{$size} {
       @include -size-style($size);
     }

packages/radio/_mixins.scss

@@ -90,11 +90,11 @@
 @mixin -ruleset($states: (enabled)) {
   @include -proto;
 
-  cursor: functions.get-cursor($states: $states);
-  opacity: functions.get-opacity($states: $states);
+  border-radius: 50%;
   outline: functions.get-outline($states: $states);
   outline-offset: adapter.get-focus-ring-outline-offset();
-  border-radius: 50%;
+  cursor: functions.get-cursor($states: $states);
+  opacity: functions.get-opacity($states: $states);
 
   &::before {
     @include -background-style($states: $states);

packages/select/_mixins.scss

@@ -16,6 +16,9 @@
   position: relative;
   display: inline-block;
   box-sizing: border-box;
+
+  // width
+  width: auto; // stylelint-disable-line order/properties-order
   vertical-align: text-bottom;
 
   ._select {
@@ -44,9 +47,6 @@
     clip-path: polygon(0 0, 100% 0, 50% 100%);
   }
 
-  // width
-  width: auto; // stylelint-disable-line order/properties-order
-
   @include -width-rule(
     $width: map.get($options, width)
   );

packages/snackbar/_mixins.scss

@@ -6,16 +6,17 @@
   $options: map.merge(variables.$default-options, $options);
 
   display: flex;
+  gap: adapter.get-spacing-size(map.get($options, size));
   align-items: center;
-  font-size: adapter.get-font-size(map.get($options, size));
   padding: adapter.get-spacing-size(map.get($options, size));
-  gap: adapter.get-spacing-size(map.get($options, size));
+  font-size: adapter.get-font-size(map.get($options, size));
   border-radius: adapter.get-radius-size(map.get($options, size));
   box-shadow: adapter.get-elevation-box-shadow(1);
   visibility: hidden;
-  opacity: 0;
-  translate: 0 10%;
+  opacity: 0%;
   transition: all 0.4s;
+  translate: 0 10%;
+
   @include -state-style(map.get($options, color));
 
   &.-color-positive {
@@ -37,20 +38,19 @@
   &:active,
   &.--active {
     visibility: visible;
-    opacity: 1;
+    opacity: 100%;
     translate: 0 0;
     transition: all 0.4s;
   }
 
-
   ._trailing {
     margin-left: auto;
   }
 }
 
 @mixin -state-style($state) {
-  background-color: adapter.get-semantic-color($state, 100);
   color: adapter.get-semantic-color($state, 800);
+  background-color: adapter.get-semantic-color($state, 100);
 }
 
 @mixin export {

packages/stories-web/src/card.stories.tsx

@@ -1,20 +1,19 @@
-import type { StoryFn, Meta } from '@storybook/react'
-import React from 'react'
-import Card, { Props } from './components/card/Card'
-import fixture from '../assets/fixture.jpg'
+import type { StoryFn, Meta } from "@storybook/react";
+import React from "react";
+import Card, { Props } from "./components/card/Card";
 
 export default {
-  title: 'Components/Card',
-  component: Card
-} as Meta
+  title: "Components/Card",
+  component: Card,
+} as Meta;
 
-const Template: StoryFn<Props> = (args) => <Card {...args} />
+const Template: StoryFn<Props> = (args) => <Card {...args} />;
 
-export const Index = Template.bind({})
+export const Index = Template.bind({});
 Index.args = {
-  appearance: 'elevated',
-  body: 'Card body',
-  color: 'primary',
+  appearance: "elevated",
+  body: "Card body",
+  color: "primary",
   isGapless: false,
-  shape: 'circle'
-}
+  shape: "circle",
+};

packages/stories-web/src/components/card/Card.tsx

@@ -1,50 +1,40 @@
-import React, { FC, ReactNode } from 'react'
-import { Shape } from '../types'
+import React, { FC } from "react";
+import { Shape } from "../types";
 
 export interface Props {
-  appearance?: 'filled' | 'outlined' | 'elevated';
-  body?: string
-  color?: 'primary' | 'secondary' | 'tertiary';
-  isGapless?: boolean
-  shape?: Shape
+  appearance?: "filled" | "outlined" | "elevated";
+  body?: string;
+  color?: "primary" | "secondary" | "tertiary";
+  isGapless?: boolean;
+  shape?: Shape;
 }
 
 const Card: FC<Props> = (props: Props) => {
-  const {
-    appearance,
-    body,
-    color,
-    isGapless,
-    shape,
-    ...rest
-  } = props;
-
-  const classes = [`in-card`]
-
-  if (typeof appearance !== 'undefined') {
-    classes.push(`-appearance-${appearance}`)
+  const { appearance, body, color, isGapless, shape, ...rest } = props;
+
+  const classes = [`in-card`];
+
+  if (typeof appearance !== "undefined") {
+    classes.push(`-appearance-${appearance}`);
   }
 
-  if (typeof color !== 'undefined') {
-    classes.push(`-color-${color}`)
+  if (typeof color !== "undefined") {
+    classes.push(`-color-${color}`);
   }
 
   if (isGapless) {
-    classes.push('-is-gapless')
+    classes.push("-is-gapless");
   }
 
-  if (typeof shape !== 'undefined') {
-    classes.push(`-shape-${shape}`)
+  if (typeof shape !== "undefined") {
+    classes.push(`-shape-${shape}`);
   }
 
   return (
-    <div
-      className={classes.join(' ')}
-      {...rest}
-    >
+    <div className={classes.join(" ")} {...rest}>
       {body || null}
     </div>
   );
-}
+};
 
-export default Card
+export default Card;