Update-output-only-branch

.dockerignore

@@ -3,3 +3,4 @@ dist/
 .git/
 node_modules/
 .yarn/
+.yarnrc.yml

.github/workflows/ci-cd.yml

@@ -24,7 +24,7 @@ jobs:
         scope: '@RaspberryPiFoundation'
 
     - name: Install code
-      run: yarn install --frozen-lock-file
+      run: yarn install --immutable
       env:
         NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
@@ -50,7 +50,7 @@ jobs:
         scope: '@RaspberryPiFoundation'
 
     - name: Install code
-      run: yarn install --frozen-lock-file
+      run: yarn install --immutable
       env:
         NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
@@ -80,7 +80,7 @@ jobs:
         scope: '@RaspberryPiFoundation'
 
     - name: Install code
-      run: yarn install --frozen-lock-file
+      run: yarn install --immutable
       env:
         NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 

.github/workflows/deploy.yml

@@ -117,7 +117,7 @@ jobs:
         scope: '@RaspberryPiFoundation'
 
     - name: Install code
-      run: yarn install --frozen-lock-file
+      run: yarn install --immutable
       env:
         NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 

.gitignore

@@ -7,6 +7,7 @@
 node_modules
 /.pnp
 .pnp.js
+.yarn
 
 # testing
 /coverage
@@ -27,5 +28,7 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.yarn/cache
+.yarn/install-state.gz
 
 .vscode/settings.json

.stylelintrc

@@ -1,13 +1,10 @@
 {
   "enabled": true,
-  "extends": [
-    "stylelint-config-recommended-scss"
-  ],
-  "plugins": [
-    "stylelint-scss"
-  ],
+  "extends": ["stylelint-config-recommended-scss"],
+  "plugins": ["stylelint-scss", "stylelint-use-logical"],
   "rules": {
     "block-no-empty": null,
-    "declaration-block-single-line-max-declarations": 1
+    "declaration-block-single-line-max-declarations": 1,
+    "csstools/use-logical": true
   }
 }

.yarnrc.yml

@@ -0,0 +1,5 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-3.4.1.cjs
+
+checksumBehavior: "update"

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+### Fixed
+
+- Local docker setup with yarn v3 (#905)
+
 ### Added
 
 - `assets_identifier` attribute for the web component (#901)
@@ -104,6 +108,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
+- Logical properties linter rule (#770)
+- Added download panel for sidebar (#744)
 - Javascript support for HTML projects (#748)
 - DownloadPanel for sidebar (#744)
 - Custom events for Log In and Sign Up from DownloadPanel (#744)
@@ -113,6 +119,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Instructions Panel for the sidebar (#751, #768)
 - Added ability to fix the theme in the web component (#757)
 - Added ability to increase font size in the web component (#757)
+- Instructions table styling (#858)
 
 ### Changed
 
@@ -693,7 +700,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Events in Web Component indicating whether Mission Zero criteria have been met (#113)
 
-[unreleased]: https://github.com/RaspberryPiFoundation/editor-ui/compare/v0.20.0...HEAD
+[unreleased]: https://github.com/RaspberryPiFoundation/editor-ui/compare/v0.21.2...HEAD
+[0.21.2]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.21.2
+[0.21.1]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.21.1
+[0.21.0]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.21.0
 [0.20.0]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.20.0
 [0.19.4]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.19.4
 [0.19.3]: https://github.com/RaspberryPiFoundation/editor-ui/releases/tag/v0.19.3

Dockerfile

@@ -8,6 +8,14 @@ WORKDIR /app
 
 COPY package.json yarn.lock ./
 COPY . /app
+
+RUN corepack enable \
+  && corepack prepare yarn@stable --activate \
+  && yarn set version 3.4.1 \
+  && echo -e "nodeLinker: node-modules\n\n$(cat /app/.yarnrc.yml)" > /app/.yarnrc.yml \
+  && cat /app/.yarnrc.yml \
+  && printf "Switched to Yarn version: "; yarn --version
+
 RUN yarn
 
 EXPOSE 3000

README.md

@@ -113,7 +113,7 @@ Styles from the parent application can be passed to the web component in a few d
   // enables the parent application to control the size of the web components root element
   display: block;
   flex: 1 1 auto;
-  max-height: 100dvh;
+  max-block-size: 100dvh;
 }
 ```
 

config/webpackDevServer.config.js

@@ -14,49 +14,11 @@ const sockHost = process.env.WDS_SOCKET_HOST;
 const sockPath = process.env.WDS_SOCKET_PATH; // default: '/sockjs-node'
 const sockPort = process.env.WDS_SOCKET_PORT;
 
-module.exports = function (proxy, allowedHost) {
+module.exports = function (proxy, _allowedHost) {
   return {
-    // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
-    // websites from potentially accessing local content through DNS rebinding:
-    // https://github.com/webpack/webpack-dev-server/issues/887
-    // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
-    // However, it made several existing use cases such as development in cloud
-    // environment or subdomains in development significantly more complicated:
-    // https://github.com/facebook/create-react-app/issues/2271
-    // https://github.com/facebook/create-react-app/issues/2233
-    // While we're investigating better solutions, for now we will take a
-    // compromise. Since our WDS configuration only serves files in the `public`
-    // folder we won't consider accessing them a vulnerability. However, if you
-    // use the `proxy` feature, it gets more dangerous because it can expose
-    // remote code execution vulnerabilities in backends like Django and Rails.
-    // So we will disable the host check normally, but enable it if you have
-    // specified the `proxy` setting. Finally, we let you override it if you
-    // really know what you're doing with a special environment variable.
-    disableHostCheck:
-      !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
+    allowedHosts: "all",
     // Enable gzip compression of generated files.
     compress: true,
-    // Silence WebpackDevServer's own logs since they're generally not useful.
-    // It will still show compile warnings and errors with this setting.
-    clientLogLevel: 'none',
-    // By default WebpackDevServer serves physical files from current directory
-    // in addition to all the virtual build products that it serves from memory.
-    // This is confusing because those files won’t automatically be available in
-    // production build folder unless we copy them. However, copying the whole
-    // project directory is dangerous because we may expose sensitive files.
-    // Instead, we establish a convention that only files in `public` directory
-    // get served. Our build script will copy `public` into the `build` folder.
-    // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
-    // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
-    // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
-    // Note that we only recommend to use `public` folder as an escape hatch
-    // for files like `favicon.ico`, `manifest.json`, and libraries that are
-    // for some reason broken when imported through webpack. If you just want to
-    // use an image, put it in `src` and `import` it from JavaScript instead.
-    contentBase: paths.appPublic,
-    contentBasePublicPath: paths.publicUrlOrPath,
-    // By default files from `contentBase` will not trigger a page reload.
-    watchContentBase: true,
     // Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
     // for the WebpackDevServer client so it can learn when the files were
     // updated. The WebpackDevServer client is included as an entry point
@@ -65,71 +27,92 @@ module.exports = function (proxy, allowedHost) {
     hot: true,
     // Use 'ws' instead of 'sockjs-node' on server since we're using native
     // websockets in `webpackHotDevClient`.
-    transportMode: 'ws',
-    // Prevent a WS client from getting injected as we're already including
-    // `webpackHotDevClient`.
-    injectClient: false,
-    // Enable custom sockjs pathname for websocket connection to hot reloading server.
-    // Enable custom sockjs hostname, pathname and port for websocket connection
-    // to hot reloading server.
-    sockHost,
-    sockPath,
-    sockPort,
+    webSocketServer: 'ws',
     // It is important to tell WebpackDevServer to use the same "publicPath" path as
     // we specified in the webpack config. When homepage is '.', default to serving
     // from the root.
     // remove last slash so user can land on `/test` instead of `/test/`
-    publicPath: paths.publicUrlOrPath.slice(0, -1),
-    // WebpackDevServer is noisy by default so we emit custom message instead
-    // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
-    quiet: true,
-    // Reportedly, this avoids CPU overload on some systems.
-    // https://github.com/facebook/create-react-app/issues/293
-    // src/node_modules is not ignored to support absolute imports
-    // https://github.com/facebook/create-react-app/issues/1065
-    watchOptions: {
-      ignored: ignoredFiles(paths.appSrc),
+    devMiddleware: {
+      publicPath: paths.publicUrlOrPath.slice(0, -1),
+    },
+    static: {
+      // By default WebpackDevServer serves physical files from current directory
+      // in addition to all the virtual build products that it serves from memory.
+      // This is confusing because those files won’t automatically be available in
+      // production build folder unless we copy them. However, copying the whole
+      // project directory is dangerous because we may expose sensitive files.
+      // Instead, we establish a convention that only files in `public` directory
+      // get served. Our build script will copy `public` into the `build` folder.
+      // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
+      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+      // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
+      // Note that we only recommend to use `public` folder as an escape hatch
+      // for files like `favicon.ico`, `manifest.json`, and libraries that are
+      // for some reason broken when imported through webpack. If you just want to
+      // use an image, put it in `src` and `import` it from JavaScript instead.
+      directory: paths.appPublic,
+      publicPath: paths.publicUrlOrPath,
+      // By default files from `directory` will not trigger a page reload.
+      // Reportedly, this avoids CPU overload on some systems.
+      // https://github.com/facebook/create-react-app/issues/293
+      // src/node_modules is not ignored to support absolute imports
+      // https://github.com/facebook/create-react-app/issues/1065
+      watch: {
+        ignored: ignoredFiles(paths.appSrc),
+      },
     },
     https: getHttpsConfig(),
     host,
-    overlay: false,
     historyApiFallback: {
       // Paths with dots should still use the history fallback.
       // See https://github.com/facebook/create-react-app/issues/387.
       disableDotRule: true,
       index: paths.publicUrlOrPath,
     },
-     headers: {
+    headers: {
       "Access-Control-Allow-Origin": "*",
       "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
       "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
     },
-    public: allowedHost,
+    client: {
+      // Silence WebpackDevServer's own logs since they're generally not useful.
+      // It will still show compile warnings and errors with this setting.
+      logging: 'none',
+      overlay: false,
+      webSocketURL: {
+        // Enable custom sockjs pathname for websocket connection to hot reloading server.
+        // Enable custom sockjs hostname, pathname and port for websocket connection
+        // to hot reloading server.
+        hostname: sockHost,
+        pathname: sockPath,
+        port: sockPort,
+      },
+    },
     // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
     proxy,
-    before(app, server) {
+    onBeforeSetupMiddleware(devServer) {
       // Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
       // middlewares before `redirectServedPath` otherwise will not have any effect
       // This lets us fetch source contents from webpack for the error overlay
-      app.use(evalSourceMapMiddleware(server));
+      devServer.app.use(evalSourceMapMiddleware(devServer));
       // This lets us open files from the runtime error overlay.
-      app.use(errorOverlayMiddleware());
+      devServer.app.use(errorOverlayMiddleware());
 
       if (fs.existsSync(paths.proxySetup)) {
         // This registers user provided middleware for proxy reasons
-        require(paths.proxySetup)(app);
+        require(paths.proxySetup)(devServer.app);
       }
     },
-    after(app) {
+    onAfterSetupMiddleware(devServer) {
       // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
-      app.use(redirectServedPath(paths.publicUrlOrPath));
+      devServer.app.use(redirectServedPath(paths.publicUrlOrPath));
 
       // This service worker file is effectively a 'no-op' that will reset any
       // previous service worker registered for the same host:port combination.
       // We do this in development to avoid hitting the production cache if
       // it used the same host and port.
       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
-      app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
+      devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
     },
   };
 };

cypress/e2e/spec-html.cy.js

@@ -15,8 +15,7 @@ const getIframeBody = () => {
 };
 
 const makeNewFile = (filename = "new.html") => {
-  cy.get("button[title='Project files']").click();
-  cy.get(".proj-new-component-button").click();
+  cy.get("span").contains("Add file").click();
   cy.get("div[class=modal-content__input]").find("input").type(filename);
   cy.get("div[class=modal-content__buttons]").contains("Add file").click();
 };

docker-compose.yml

@@ -5,8 +5,13 @@ services:
       context: .
     volumes:
       - .:/app
-      - /app/node_modules
       - /var/run/docker.sock:/var/run/docker.sock
+      - /app/.yarn
+      - $PWD/.yarn/plugins:/app/.yarn/plugins
+      - $PWD/.yarn/releases:/app/.yarn/releases
+      - $PWD/.yarn/patches:/app/.yarn/patches
+      - $PWD/.yarn/sdks:/app/.yarn/sdks
+      - $PWD/.yarn/versions:/app/.yarn/versions
     stdin_open: true
   react-ui:
     <<: *x-app

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raspberrypifoundation/editor-ui",
-  "version": "0.20.0",
+  "version": "0.21.2",
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.7.8",
@@ -80,12 +80,12 @@
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
-    "build:dev": "yarn install --force && yarn run build-storybook && node scripts/build.js",
+    "build:dev": "yarn install --check-cache && yarn run build-storybook && node scripts/build.js",
     "build-storybook": "cd ./storybook && yarn install && yarn run build-storybook -- -o ../public/storybook --loglevel warn",
     "lint": "eslint \"src/**/*.{js,jsx,json}\"",
     "lint:fix": "eslint --fix \"src/**/*.{js,jsx,json}\"",
     "format": "prettier --write src/**/*.{js,jsx,css,md,json,scss} --config ./.prettierrc",
-    "stylelint": "stylelint --syntax=scss src/**/*.scss",
+    "stylelint": "stylelint src/**/*.scss",
     "test": "node scripts/test.js --transformIgnorePatterns 'node_modules/(?!three)/'",
     "test:integration": "cd e2e; docker compose up --exit-code-from cypress",
     "storybook": "cd storybook && rm -rf ./node_modules/.cache/storybook && yarn run storybook",
@@ -176,16 +176,17 @@
     "storybook-addon-react-router-v6": "^0.2.1",
     "style-it": "^2.1.4",
     "style-loader": "1.3.0",
-    "stylelint": "^10.1.0",
+    "stylelint": "^15.11.0",
     "stylelint-config-recommended-scss": "3.3.0",
     "stylelint-order": "2.2.1",
     "stylelint-scss": "3.12.0",
+    "stylelint-use-logical": "^2.1.0",
     "terser-webpack-plugin": "4.2.3",
     "url-loader": "4.1.1",
     "webgl-mock-threejs": "^0.0.1",
     "webpack": "4.44.2",
     "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "3.11.1",
+    "webpack-dev-server": "4.0.0",
     "webpack-manifest-plugin": "2.2.0",
     "workbox-webpack-plugin": "5.1.4"
   },
@@ -245,5 +246,6 @@
       "jest-watch-typeahead/testname"
     ],
     "resetMocks": true
-  }
+  },
+  "packageManager": "yarn@3.4.1"
 }