Hanami integration

hanami_application/.assets/babel.config.js

@@ -0,0 +1,30 @@
+module.exports = (api) => {
+  api.cache(true)
+  return {
+    presets: [
+      [
+        "@babel/preset-env",
+        {
+          modules: false,
+          useBuiltIns: "entry",
+          corejs: {
+            version: 3,
+          },
+          targets: {
+            browsers: [
+              "> 1% in AU",
+              "last 2 versions",
+              "Firefox ESR",
+              "not ie < 11",
+              "iOS >= 8.4",
+              "Safari >= 8",
+              "Android >= 4.4",
+            ],
+          },
+        },
+      ],
+      "@babel/preset-react",
+    ],
+    sourceType: "unambiguous",
+  }
+}

hanami_application/.assets/package.json

@@ -0,0 +1,74 @@
+{
+  "license": "UNLICENSED",
+  "name": "ecommerce-assets",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "@babel/core": "^7.15.0",
+    "@babel/eslint-parser": "^7.15.0",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-react": "^7.14.5",
+    "@types/core-js": "^2.5.5",
+    "@types/cssnano": "^4.0.1",
+    "@types/glob": "^7.1.4",
+    "@types/i18n-js": "^3.8.2",
+    "@types/jest": "^27.0.1",
+    "@types/mini-css-extract-plugin": "^2.2.0",
+    "@types/node": "^16.9.1",
+    "@types/postcss-import": "^12.0.1",
+    "@types/postcss-preset-env": "^6.7.3",
+    "@types/postcss-url": "^8.0.2",
+    "@types/react-test-renderer": "^17.0.1",
+    "@types/rimraf": "^3.0.1",
+    "@types/webpack-env": "^1.16.2",
+    "@types/webpack-manifest-plugin": "^3.0.5",
+    "@typescript-eslint/eslint-plugin": "^4.30.0",
+    "@typescript-eslint/parser": "^4.31.0",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-preset-react-app": "^10.0.0",
+    "chalk": "^4.1.2",
+    "concurrently": "^6.2.1",
+    "core-js": "^3.17.2",
+    "css-loader": "^5.2.6",
+    "cssnano": "^5.0.8",
+    "eslint": "^7.32.0",
+    "eslint-cli": "^1.1.1",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.25.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "file-loader": "^6.2.0",
+    "glob": "^7.1.7",
+    "identity-obj-proxy": "^3.0.0",
+    "ignore-loader": "^0.1.2",
+    "jest": "^26.6.3",
+    "jest-cli": "^27.1.0",
+    "mini-css-extract-plugin": "^2.2.0",
+    "postcss": "^8.3.6",
+    "postcss-css-variables": "^0.18.0",
+    "postcss-import": "^14.0.2",
+    "postcss-loader": "^6.1.1",
+    "postcss-preset-env": "^6.7.0",
+    "postcss-url": "^10.1.3",
+    "prettier": "^2.4.0",
+    "react-test-renderer": "^17.0.2",
+    "rimraf": "^3.0.2",
+    "serve": "^12.0.0",
+    "test-nested-scenarios": "^1.0.1",
+    "ts-jest": "^26.5.6",
+    "ts-loader": "^9.2.5",
+    "ts-node": "^10.2.1",
+    "typescript": "^4.4.2",
+    "typescript-plugin-css-modules": "^3.4.0",
+    "webpack": "^5.52.0",
+    "webpack-cli": "^4.8.0",
+    "webpack-manifest-plugin": "^4.0.2",
+    "yaml-jest": "^1.0.5",
+    "yaml-loader": "^0.6.0"
+  }
+}

hanami_application/.assets/scripts/build.ts

@@ -0,0 +1,47 @@
+import { config } from "../webpack.config"
+import chalk from "chalk"
+import path from "path"
+import rimraf from "rimraf"
+import webpack from "webpack"
+
+/*
+Build webpack bundle
+
+- 🔥 whatever is currently in `output`
+- Build both Webpack configs into `output`
+- Call the default export of the prerender bundle
+- Watch for changes, rinse & repeat
+
+That's all. You won't even find a dev server in here!
+**********************************************************/
+
+const mode = process.argv[2]
+const bundleConfig = config(mode) as webpack.Configuration
+
+if (bundleConfig.output?.path != null) {
+  rimraf(
+    path.resolve(bundleConfig.output.path, "./*"),
+    (error?: Error | null): void => {
+      if (error) {
+        console.error(chalk.red(error))
+        process.exit()
+      }
+
+      const watching = webpack([bundleConfig]).watch(
+        {},
+        (_err, compilation): void => {
+          if (compilation === undefined) return
+
+          compilation.stats.forEach((stats) => {
+            console.log(stats.toString({ colors: true }))
+          })
+
+          if (mode === "production") {
+            watching.close(() => {})
+            if (compilation.hasErrors()) process.exit(1)
+          }
+        }
+      )
+    }
+  )
+}

hanami_application/.assets/tsconfig.webpack.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "module": "commonjs",
+    "removeComments": false,
+    "strict": true,
+    "target": "es5"
+  }
+}

hanami_application/.assets/webpack.config.ts

@@ -0,0 +1,145 @@
+import { WebpackManifestPlugin } from "webpack-manifest-plugin"
+import cssnano from "cssnano"
+import glob from "glob"
+import MiniCssExtractPlugin from "mini-css-extract-plugin"
+import path from "path"
+import postcssImport from "postcss-import"
+import postcssPresetEnv from "postcss-preset-env"
+import postcssUrl from "postcss-url"
+const postcssCssVariables = require("postcss-css-variables")
+
+const cssLoaders = (
+  mode: string,
+  modules: Record<string, unknown> | boolean
+): (string | object)[] => [
+  MiniCssExtractPlugin.loader,
+  {
+    loader: "css-loader",
+    options: { importLoaders: 1, modules },
+  },
+  {
+    loader: "postcss-loader",
+    options: {
+      postcssOptions: {
+        plugins: [
+          // Add module-like @import support to our CSS. This sets the context for all imports
+          // to be the base entry point.
+          postcssImport,
+          // postcss-url "rebases" any `url()` references in CSS to their original relative
+          // position on the filesystem (so that postcss-import doesn't break things)
+          postcssUrl(),
+          // Make variables available to CSS compilation
+          // NOTE: This plugin expects all variables to be defined in either:
+          // - The original CSS
+          // - The `variables` object we’re passing it
+          // If things are missing from there they’ll be resolved as `undefined`
+          postcssCssVariables({
+            variables: {},
+          }),
+          // Polyfill
+          postcssPresetEnv({ stage: 1 }),
+          mode === "production" ? cssnano({ preset: "default" }) : null,
+        ].filter((plugin) => plugin),
+      },
+    },
+  },
+]
+
+export const config = (mode: string): Record<string, unknown> => ({
+  devtool: mode === "production" ? undefined : "cheap-module-source-map",
+  // Find the entry points for each slice and create a set of entries with a
+  // consistent naming convention so we can easily reference in templates:
+  // `${sliceName}__${entryName}`
+  entry: glob
+    // We expect that the asset will exist at /:slice/assets/:entry
+    .sync(`${path.join(__dirname, "../slices")}/*`)
+    .map((dir: string) =>
+      glob.sync(`${dir}/**/entry.{js,jsx,ts,tsx}`).map((entry) => {
+        const entryName = entry.includes("/assets/")
+          ? entry.split(`${dir}/assets/`).slice(-1)[0].split("/entry.")[0]
+          : path.basename(path.dirname(entry))
+        return [`${path.basename(dir)}/${entryName}`, entry]
+      })
+    )
+    // Flatten
+    .reduce((a, b) => a.concat(b), [])
+    // Turn into `entry` object
+    .reduce((output: Record<string, unknown>, entry) => {
+      const [name, location] = entry
+      output[name] = [location]
+      return output
+    }, {}),
+  mode,
+  module: {
+    rules: [
+      // Use babel for *anything* matching *.es.js, including within
+      // other dependencies in node_modules.
+      {
+        exclude: /node_modules/,
+        test: /.*(?<!\.test)\.tsx?$/,
+        use: "ts-loader",
+      },
+      {
+        loader: "babel-loader",
+        test: /.*(?<!\.test)\.es\.js$/,
+      },
+      {
+        loader: "babel-loader",
+        test: /.*(?<!\.test)\.esm\.js$/,
+      },
+      {
+        exclude: /\/test\/$/i,
+        loader: "babel-loader",
+        test: /.*(?<!\.test)\.js$/,
+      },
+      {
+        exclude: /\/test\/$/i,
+        loader: "file-loader",
+        options: { name: "[path][name].[ext]" },
+        test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf|mp3|mp4|webm|webp|mp4|m4v|pdf)$/,
+      },
+      {
+        exclude: /\/components\/.+\.s?css$/i,
+        test: /\.s?css$/i,
+        use: cssLoaders(mode, false),
+      },
+      {
+        test: /\/components\/.+\.s?css$/i,
+        use: cssLoaders(mode, { localIdentName: "[path][name]__[local]" }),
+      },
+      {
+        test: /\.ya?ml$/,
+        type: "json",
+        use: "yaml-loader",
+      },
+    ],
+  },
+  optimization: {
+    usedExports: true,
+  },
+  output: {
+    filename: mode === "development" ? "[name].js" : "[name].[contenthash].js",
+    path:
+      mode === "development"
+        ? path.resolve(__dirname, "tmp/assets")
+        : path.resolve(__dirname, "..", "public/assets"),
+    publicPath:
+      mode === "development"
+        ? `http://localhost:${process.env.PORT}/assets/`
+        : "/assets/",
+  },
+  resolve: {
+    alias: {},
+    extensions: [".tsx", ".ts", ".js"],
+    mainFields: ["module", "main"],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      chunkFilename: "[name].[contenthash].css",
+      filename:
+        mode === "development" ? "[name].css" : "[name].[contenthash].css",
+      ignoreOrder: false,
+    }),
+    new WebpackManifestPlugin({ fileName: "manifest.json" }),
+  ],
+})

hanami_application/.env-example

@@ -0,0 +1,3 @@
+DATABASE_URL=sqlite://./db/ecommerce.sqlite
+SESSION_SECRET=change-me
+PRECOMPILED_ASSETS=false

hanami_application/.env.test

@@ -0,0 +1,3 @@
+DATABASE_URL=sqlite://./db/ecommerce_test.sqlite
+SESSION_SECRET=change-me
+PRECOMPILED_ASSETS=false

hanami_application/.eslintignore

@@ -0,0 +1,4 @@
+.assets/node_modules/
+.assets/tmp/
+node_modules/
+/public/

hanami_application/.eslintrc.json

@@ -0,0 +1,37 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": ["plugin:react/recommended", "react-app"],
+  "globals": {
+    "Atomics": "readonly",
+    "React": true,
+    "SharedArrayBuffer": "readonly"
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 6,
+    "sourceType": "module"
+  },
+  "plugins": ["prettier", "react", "@typescript-eslint"],
+  "rules": {
+    "@typescript-eslint/explicit-function-return-type": [
+      0,
+      {
+        "allowExpressions": true,
+        "allowTypedFunctionExpressions": true
+      }
+    ],
+    "prettier/prettier": "error",
+    "react/display-name": 0
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

hanami_application/.github/workflows/ci.yml

@@ -0,0 +1,29 @@
+name: ci
+
+on:
+  push:
+  pull_request:
+    branches:
+      - master
+  create:
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: "3.0"
+      - name: Install latest bundler
+        run: |
+          gem install bundler --no-document
+          bundle config set without 'tools benchmarks docs'
+      - name: Bundle install
+        run: bundle install --jobs 4 --retry 3
+      - name: Prepare env
+        run: cp .env-example .env
+      - name: Run all tests
+        run: bundle exec rake spec:main