@modernpoacher/sprockets 0.0.11 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modernpoacher/sprockets",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "Sprockets",
   "keywords": [
     "Sprockets",
@@ -24,17 +24,16 @@
   },
   "scripts": {
     "prepublishOnly": "cross-env NODE_ENV=production npm run build",
-    "build": "cross-env DEBUG=@modernpoacher/sprockets npm run gulp -- build",
-    "build:watch": "cross-env DEBUG=@modernpoacher/sprockets npm run gulp -- build:watch",
-    "transform": "cross-env DEBUG=@modernpoacher/sprockets npm run gulp -- transform",
-    "transform:watch": "cross-env DEBUG=@modernpoacher/sprockets npm run gulp -- transform:watch",
+    "build": "cross-env DEBUG=@modernpoacher/sprockets webpack",
+    "build:watch": "cross-env DEBUG=@modernpoacher/sprockets webpack --watch",
+    "transform": "cross-env DEBUG=@modernpoacher/sprockets ./transform.sh",
     "pregulp": "npm run nvm",
     "gulp": "gulp --color",
     "prelint": "npm run nvm",
     "lint": "cross-env NODE_ENV=production eslint . .storybook --ext .mjs,.cjs,.jsx,.mts,.cts",
     "lint:fix": "npm run lint -- --fix",
     "pretest": "npm run nvm",
-    "test": "cross-env NODE_ENV=test jest --collect-coverage false --run-in-band",
+    "test": "cross-env NODE_ENV=test jest",
     "nvm": "bash nvm.sh",
     "prestorybook": "npm run build && npm run transform",
     "storybook": "storybook dev -p 6007",
@@ -52,57 +51,45 @@
     "@babel/preset-react": "^7.22.15",
     "@babel/register": "^7.22.15",
     "@modernpoacher/design-system": "1.0.72",
-    "@modernpoacher/hooks": "^1.0.436",
-    "@sequencemedia/gulp": "^1.1.84",
-    "@sequencemedia/gulp-clean-css": "^1.0.38",
-    "@sequencemedia/gulp-css-purge": "^1.1.31",
-    "@sequencemedia/gulp-debug": "^1.0.42",
-    "@sequencemedia/gulp-postcss": "^1.0.42",
-    "@sequencemedia/gulp-sass": "^1.0.37",
-    "@sequencemedia/gulp-sourcemaps": "^1.0.38",
-    "@storybook/addon-actions": "^7.4.3",
-    "@storybook/addon-essentials": "^7.4.3",
-    "@storybook/addon-links": "^7.4.3",
-    "@storybook/react": "^7.4.3",
-    "@storybook/react-webpack5": "^7.4.3",
-    "@types/react": "^18.2.22",
-    "@typescript-eslint/eslint-plugin": "^6.7.2",
-    "@typescript-eslint/parser": "^6.7.2",
-    "autoprefixer": "^10.4.16",
+    "@modernpoacher/hooks": "^1.0.434",
+    "@storybook/addon-actions": "^7.4.0",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/react": "^7.4.0",
+    "@storybook/react-webpack5": "^7.4.0",
+    "@types/react": "^18.2.21",
+    "@typescript-eslint/eslint-plugin": "^6.6.0",
+    "@typescript-eslint/parser": "^6.6.0",
     "babel-plugin-module-resolver": "^5.0.0",
+    "clean-webpack-plugin": "^4.0.0",
     "core-js": "^3.32.2",
     "cross-env": "^7.0.3",
-    "cssnano": "^6.0.1",
-    "del": "^7.1.0",
     "eslint": "^8.49.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-config-standard-with-typescript": "^39.0.0",
     "eslint-import-resolver-babel-module": "^5.3.2",
     "eslint-plugin-react": "^7.33.2",
-    "glob-all": "^3.3.1",
     "husky": "^8.0.3",
     "jest": "^29.7.0",
+    "mini-css-extract-plugin": "^2.7.6",
     "postcss": "^8.4.30",
-    "postcss-easy-import": "^4.0.0",
+    "postcss-import": "^15.1.0",
+    "postcss-loader": "^7.3.3",
     "postcss-map": "^0.11.0",
-    "postcss-normalize": "^10.0.1",
-    "postcss-scss": "^4.0.8",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.16.0",
     "react-router-dom": "^6.16.0",
     "react-test-renderer": "^18.2.0",
-    "regenerator-runtime": "^0.14.0",
-    "sass": "^1.68.0",
-    "storybook": "^7.4.3",
-    "vinyl-paths": "^5.0.0"
+    "remove-files-webpack-plugin": "^1.5.0",
+    "sass": "^1.66.1",
+    "sass-loader": "^13.3.2",
+    "storybook": "^7.4.0",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4"
   },
   "imports": {
-    "#build/gulp/build/*": "./build/gulp/build/*.mjs",
-    "#build/gulp/build": "./build/gulp/build/index.mjs",
-    "#build/gulp/*": "./build/gulp/*.mjs",
-    "#build/gulp/transform": "./build/gulp/transform/index.mjs",
     "#build/paths": "./build/paths.mjs"
   },
   "exports": {

package/src/components/common/visually-hidden-text/index.jsx

@@ -1,12 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import debug from 'debug'
-
-const log = debug('@modernpoacher/sprockets/components/common/visually-hidden-text')
 
 export default function VisuallyHiddenText ({ visuallyHiddenText }) {
-  log('VisuallyHiddenText')
-
   if (visuallyHiddenText) {
     return (
       <span className='visually-hidden-text'>

package/src/sprockets/check-answers/group/answer-title.jsx

@@ -1,16 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import debug from 'debug'
-
-const log = debug('@modernpoacher/sprockets/sprockets/check-answers/group')
 
 /**
  * @param {SprocketsTypes.AnswerDefinitionType}
  * @returns {React.JSX.Element}
  */
 export default function AnswerTitle ({ title }) {
-  log('AnswerTitle')
-
   return (
     <dt className='answer-title'>
       {title}

package/src/sprockets/check-answers/group/answer-value.jsx

@@ -1,8 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import debug from 'debug'
-
-const log = debug('@modernpoacher/sprockets/sprockets/check-answers/group')
 
 /**
  * @param {string | string[]}
@@ -32,8 +29,6 @@ function getAnswerValue (value) {
  * @returns {React.JSX.Element}
  */
 export default function AnswerValue ({ value }) {
-  log('AnswerValue')
-
   return (
     <dd className='answer-value'>
       {getAnswerValue(value)}

package/src/sprockets/check-answers/group/change-answer.jsx

@@ -1,24 +1,18 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import debug from 'debug'
 
 import {
   Link
 } from 'react-router-dom'
 
 import TextContent from '@modernpoacher/sprockets/components/common/text-content'
-
-import VisuallyHiddenText from './visually-hidden-text.cjs'
-
-const log = debug('@modernpoacher/sprockets/sprockets/check-answers/group/change-answer')
+import VisuallyHiddenText from '@modernpoacher/sprockets/components/common/visually-hidden-text'
 
 /**
  * @param {SprocketsTypes.AnswerDefinitionType}
  * @returns {React.JSX.Element}
  */
 export default function ChangeAnswer ({ href, text, visuallyHiddenText }) {
-  log('ChangeAnswer')
-
   return (
     <dd className='change-answer'>
       <Link to={href}>

package/transform.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+node -e 'import("./build/transform.mjs").then(({ default: transform }) => transform())'

package/webpack.config.mjs

@@ -0,0 +1,105 @@
+import path from 'node:path'
+import Webpack from 'webpack'
+import {
+  CleanWebpackPlugin
+} from 'clean-webpack-plugin'
+import RemoveFilesPlugin from 'remove-files-webpack-plugin'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+
+import {
+  sourcePath as SOURCE_PATH,
+  targetPath as TARGET_PATH,
+  modulePath as MODULE_PATH
+} from '#build/paths'
+
+const {
+  SourceMapDevToolPlugin
+} = Webpack
+
+export default {
+  mode: 'production',
+  entry: {
+    'preview-head': path.join(SOURCE_PATH, 'sass/preview-head.scss')
+  },
+  output: {
+    path: path.join(TARGET_PATH, 'css')
+  },
+  stats: {
+    colors: true
+  },
+  module: {
+    rules: [
+      {
+        test: /\.scss$/i,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+              sourceMap: false
+            }
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              sourceMap: false,
+              postcssOptions: {
+                config: false,
+                plugins: [
+                  'postcss-import',
+                  [
+                    'postcss-map', {
+                      maps: [
+                        path.join(MODULE_PATH, '@modernpoacher/design-system/src/tokens/palette.json')
+                      ]
+                    }
+                  ]
+                ]
+              }
+            }
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: false,
+              sassOptions: {
+                includePaths: [
+                  path.join(MODULE_PATH, '@modernpoacher/design-system/src/sass')
+                ]
+              }
+            }
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new CleanWebpackPlugin({
+      verbose: false,
+      cleanOnceBeforeBuildPatterns: [
+        path.join(TARGET_PATH, 'css/*.css'),
+        path.join(TARGET_PATH, 'css/*.css.map')
+      ]
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css'
+    }),
+    new SourceMapDevToolPlugin({
+      test: /\.css$/i,
+      filename: '[name].css.map'
+    }),
+    new RemoveFilesPlugin({
+      after: {
+        test: [
+          {
+            folder: path.join(TARGET_PATH, 'css'),
+            method (filePath) {
+              return /\.js$/m.test(filePath)
+            }
+          }
+        ]
+      }
+    })
+  ]
+}