shinkansen-sprockets 1.3.2 → 2.0.1

package/.prettierignore

@@ -0,0 +1,4 @@
+*.html
+*.mjs
+*.cjs
+.stylelintrc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shinkansen-sprockets",
-  "version": "1.3.2",
+  "version": "2.0.1",
   "description": "Shinkansen Sprockets",
   "keywords": [
     "Shinkansen",
@@ -10,7 +10,7 @@
     "Karakuri",
     "React"
   ],
-  "main": "./src/index.mjs",
+  "main": "./src/js/index.mjs",
   "type": "module",
   "types": "./index.d.mts",
   "author": {
@@ -27,22 +27,27 @@
     "url": "git+ssh://git@github.com/modernpoacher/shinkansen-sprockets.git"
   },
   "scripts": {
-    "build": "cross-env DEBUG=shinkansen-sprockets* webpack",
+    "build": "cross-env DEBUG=shinkansen-sprockets* webpack -c .storybook/webpack.config.mjs",
     "build-storybook": "storybook build",
-    "build:watch": "cross-env DEBUG=shinkansen-sprockets* webpack --watch",
-    "lint": "eslint",
-    "lint:fix": "npm run lint -- --fix",
+    "build:watch": "npm run build -- -w",
+    "lint": "npm run lint:js && npm run lint:sass",
+    "lint:fix": "npm run lint:js:fix && npm run lint:sass:fix",
+    "lint:js": "eslint",
+    "lint:js:fix": "npm run lint:js -- --fix",
+    "lint:sass": "stylelint src/sass .storybook/*.scss",
+    "lint:sass:fix": "npm run lint:sass -- --fix",
     "nvm": "bash nvm.sh",
+    "prebuild": "npm run nvm",
     "prelint": "npm run nvm",
     "prepare": "husky",
-    "prepublishOnly": "cross-env NODE_ENV=production npm run build",
-    "prestorybook": "npm run build && npm run transform",
+    "prestorybook": "npm run build && npm run prettier && npm run transform",
     "pretest": "npm run nvm",
+    "prettier": "prettier src/sass .storybook --write",
     "storybook": "storybook dev -p 6007",
     "test": "npm run test:mocha && npm run test:jest",
     "test:jest": "cross-env NODE_ENV=test jest",
     "test:mocha": "cross-env NODE_ENV=test mocha test --recursive",
-    "transform": "cross-env DEBUG=shinkansen-sprockets* ./transform.sh"
+    "transform": "cross-env DEBUG=shinkansen-sprockets* .storybook/transform.sh"
   },
   "dependencies": {
     "classnames": "^2.5.1",
@@ -56,9 +61,9 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/register": "^7.25.9",
-    "@modernpoacher/design-system": "1.2.0",
+    "@modernpoacher/design-system": "2.0.1",
     "@sequencemedia/eslint-config-standard": "^0.2.42",
-    "@sequencemedia/eslint-config-typescript": "^0.1.58",
+    "@sequencemedia/eslint-config-typescript": "^0.1.59",
     "@storybook/addon-actions": "^8.6.4",
     "@storybook/addon-essentials": "^8.6.4",
     "@storybook/addon-links": "^8.6.4",
@@ -76,9 +81,8 @@
     "@types/react-test-renderer": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^8.26.0",
     "@typescript-eslint/parser": "^8.26.0",
-    "autoprefixer": "^10.4.20",
+    "autoprefixer": "^10.4.21",
     "chai": "^5.2.0",
-    "clean-webpack-plugin": "^4.0.0",
     "core-js": "^3.41.0",
     "cross-env": "^7.0.3",
     "eslint": "^9.22.0",
@@ -96,6 +100,7 @@
     "postcss-import": "^16.1.0",
     "postcss-loader": "^8.1.1",
     "postcss-map": "^0.11.0",
+    "prettier": "^3.5.3",
     "prop-types": "^15.8.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -105,57 +110,59 @@
     "sass": "^1.85.1",
     "sass-loader": "^16.0.5",
     "storybook": "^8.6.4",
+    "stylelint": "^16.15.0",
+    "stylelint-config-recommended-scss": "^14.1.0",
+    "stylelint-scss": "^6.11.1",
     "webpack": "^5.98.0",
     "webpack-cli": "^6.0.1"
   },
   "imports": {
-    "#build/paths": "./build/paths.mjs",
     "#sprockets": {
-      "require": "./src/index.cjs",
-      "import": "./src/index.mjs"
+      "require": "./src/js/index.cjs",
+      "import": "./src/js/index.mjs"
     },
     "#sprockets/components": {
-      "require": "./src/components/index.cjs",
-      "import": "./src/components/index.mjs"
+      "require": "./src/js/components/index.cjs",
+      "import": "./src/js/components/index.mjs"
     },
-    "#sprockets/components/*": "./src/components/*/index.cjs",
-    "#sprockets/sprockets": "./src/sprockets/index.cjs",
-    "#sprockets/sprockets/*": "./src/sprockets/*/index.cjs",
-    "#sprockets/sprockets/check-answers/group/*": "./src/sprockets/check-answers/group/*.cjs",
-    "#sprockets/sprockets/error-summary/group/*": "./src/sprockets/error-summary/group/*.cjs",
+    "#sprockets/components/*": "./src/js/components/*/index.cjs",
+    "#sprockets/sprockets": "./src/js/sprockets/index.cjs",
+    "#sprockets/sprockets/*": "./src/js/sprockets/*/index.cjs",
+    "#sprockets/sprockets/check-answers/group/*": "./src/js/sprockets/check-answers/group/*.cjs",
+    "#sprockets/sprockets/error-summary/group/*": "./src/js/sprockets/error-summary/group/*.cjs",
     "#sprockets/super/components": {
-      "require": "./src/super/components/index.cjs",
-      "import": "./src/super/components/index.mjs"
+      "require": "./src/js/super/components/index.cjs",
+      "import": "./src/js/super/components/index.mjs"
     },
-    "#sprockets/super/components/*": "./src/super/components/*/index.cjs",
-    "#sprockets/super/sprockets": "./src/super/sprockets/index.cjs",
-    "#sprockets/transformers": "./src/transformers/index.mjs",
-    "#sprockets/transformers/*": "./src/transformers/*/index.mjs",
+    "#sprockets/super/components/*": "./src/js/super/components/*/index.cjs",
+    "#sprockets/super/sprockets": "./src/js/super/sprockets/index.cjs",
+    "#sprockets/transformers": "./src/js/transformers/index.mjs",
+    "#sprockets/transformers/*": "./src/js/transformers/*/index.mjs",
     "#stories/definitions/*": "./stories/definitions/*.json",
     "#stories/errors": "./stories/errors.mjs",
     "#stories/sprockets/*": "./stories/sprockets/*/index.stories.jsx"
   },
   "exports": {
     ".": {
-      "require": "./src/index.cjs",
-      "import": "./src/index.mjs"
+      "require": "./src/js/index.cjs",
+      "import": "./src/js/index.mjs"
     },
     "./components": {
-      "require": "./src/components/index.cjs",
-      "import": "./src/components/index.mjs"
+      "require": "./src/js/components/index.cjs",
+      "import": "./src/js/components/index.mjs"
     },
-    "./components/*": "./src/components/*/index.cjs",
-    "./sprockets": "./src/sprockets/index.cjs",
-    "./sprockets/*": "./src/sprockets/*/index.cjs",
-    "./sprockets/check-answers/group/*": "./src/sprockets/check-answers/group/*.cjs",
-    "./sprockets/error-summary/group/*": "./src/sprockets/error-summary/group/*.cjs",
+    "./components/*": "./src/js/components/*/index.cjs",
+    "./sprockets": "./src/js/sprockets/index.cjs",
+    "./sprockets/*": "./src/js/sprockets/*/index.cjs",
+    "./sprockets/check-answers/group/*": "./src/js/sprockets/check-answers/group/*.cjs",
+    "./sprockets/error-summary/group/*": "./src/js/sprockets/error-summary/group/*.cjs",
     "./super/components": {
-      "require": "./src/super/components/index.cjs",
-      "import": "./src/super/components/index.mjs"
+      "require": "./src/js/super/components/index.cjs",
+      "import": "./src/js/super/components/index.mjs"
     },
-    "./super/components/*": "./src/super/components/*/index.cjs",
-    "./super/sprockets": "./src/super/sprockets/index.cjs",
-    "./transformers": "./src/transformers/index.mjs",
-    "./transformers/*": "./src/transformers/*/index.mjs"
+    "./super/components/*": "./src/js/super/components/*/index.cjs",
+    "./super/sprockets": "./src/js/super/sprockets/index.cjs",
+    "./transformers": "./src/js/transformers/index.mjs",
+    "./transformers/*": "./src/js/transformers/*/index.mjs"
   }
 }

package/src/sass/.stylelintrc

@@ -0,0 +1,14 @@
+{
+  "extends": "stylelint-config-recommended-scss",
+  "plugins": [
+    "stylelint-scss"
+  ],
+  "rules": {
+    "no-descending-specificity": [
+      true,
+      {
+        "severity": "warning"
+      }
+    ]
+  }
+}

package/src/sass/_sprockets.scss

@@ -0,0 +1,80 @@
+@use "design-system/palette";
+@use "design-system/typography";
+
+@use "sprockets/error-summary";
+@use "sprockets/check-answers";
+@use "sprockets/error";
+
+@mixin sprockets {
+  padding: 0;
+  margin: 1rem 0;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  line-height: 1.375rem;
+
+  &.error-summary {
+    @include error-summary.sprocket-error-summary;
+  }
+
+  &.check-answers {
+    @include check-answers.sprocket-check-answers;
+  }
+
+  &.fieldset {
+    legend {
+      @include typography.heading-m;
+
+      // stylelint-disable-next-line no-duplicate-selectors
+      & {
+        padding: 0;
+        margin-top: 0;
+      }
+    }
+
+    &.error {
+      @include error.sprocket-error;
+
+      padding-left: 1rem;
+    }
+
+    .description {
+      @include typography.secondary-text;
+
+      // stylelint-disable-next-line no-duplicate-selectors
+      & {
+        display: block;
+        padding: 0;
+        margin: 0 0 0.25rem 0;
+      }
+    }
+
+    .error-message {
+      @include typography.error-standard;
+
+      // stylelint-disable-next-line no-duplicate-selectors
+      & {
+        display: block;
+        padding: 0;
+        margin: 0 0 0.25rem 0;
+      }
+    }
+  }
+
+  /**
+   *  Descendants
+   */
+  .sprocket {
+    margin-bottom: 0;
+  }
+}
+
+%sprockets {
+  @include sprockets;
+}

package/src/sass/sprockets/_check-answers.scss

@@ -0,0 +1,55 @@
+@use "design-system/helpers/invisible";
+
+@use "design-system/palette";
+@use "design-system/typography";
+
+@mixin sprocket-check-answers {
+  & > h2:first-child {
+    margin-top: 0;
+  }
+
+  dl {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+
+    .answer {
+      display: table-row;
+    }
+
+    dt,
+    dd {
+      display: table-cell;
+      padding: 0.25rem 0;
+      border-bottom: 2px solid palette.$grey-1;
+    }
+
+    .answer-title {
+      @include typography.heading-s;
+
+      // stylelint-disable-next-line no-duplicate-selectors
+      & {
+        width: 30%;
+        padding-right: 1rem;
+      }
+    }
+
+    .answer-value {
+      width: 50%;
+    }
+
+    .change-answer {
+      width: 20%;
+      padding-left: 1rem;
+      text-align: right;
+
+      .visually-hidden-text {
+        @include invisible.invisible;
+      }
+    }
+  }
+}
+
+%sprocket-check-answers {
+  @include sprocket-check-answers;
+}

package/src/sass/sprockets/_error-summary.scss

@@ -0,0 +1,58 @@
+@use "design-system/helpers/invisible";
+
+@use "design-system/palette";
+@use "design-system/typography";
+
+@mixin sprocket-error-summary {
+  background-color: palette.$white;
+  border: 0.25rem solid palette.$error-standard;
+  display: block;
+  padding: 1rem;
+  line-height: 2rem;
+
+  & > h2:first-child {
+    margin-top: 0;
+  }
+
+  ul {
+    margin-bottom: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  li {
+    @include typography.error-standard;
+
+    // stylelint-disable-next-line no-duplicate-selectors
+    & {
+      display: block;
+      padding: 0;
+      margin: 0 0 0.25rem 0;
+    }
+  }
+
+  a {
+    @include typography.error-standard;
+
+    &:focus {
+      outline: 3px solid transparent;
+      text-decoration: none;
+      outline-offset: 0;
+      box-shadow:
+        0 -2px palette.$outline,
+        0 4px palette.$black;
+      color: palette.$standard;
+      background-color: palette.$outline;
+    }
+  }
+
+  &:focus {
+    outline: 3px solid palette.$outline;
+    outline-offset: 0;
+    border-color: palette.$black;
+  }
+}
+
+%sprocket-error-summary {
+  @include sprocket-error-summary;
+}

package/src/sass/sprockets/_error.scss

@@ -0,0 +1,49 @@
+@use "design-system/palette";
+@use "design-system/typography";
+
+@mixin sprocket-error {
+  border-left: 0.25rem solid palette.$error-standard;
+
+  input:not([type="checkbox"]):not([type="radio"]),
+  select,
+  textarea {
+    border: 2px solid palette.$error-standard;
+
+    &:focus {
+      border-color: palette.$black;
+    }
+  }
+
+  &.radio,
+  &.checkbox {
+    padding-left: 4rem;
+
+    // stylelint-disable-next-line no-descending-specificity
+    input {
+      left: 1.5rem;
+    }
+
+    // stylelint-disable-next-line no-descending-specificity
+    label:before {
+      left: 1rem;
+
+      border: 2px solid palette.$error-standard;
+    }
+  }
+
+  &.radio {
+    input:checked + label:after {
+      left: 1.5rem;
+    }
+  }
+
+  &.checkbox {
+    input:checked + label:after {
+      left: 1.3125rem; // 21px;
+    }
+  }
+}
+
+%sprocket-error {
+  @include sprocket-error;
+}