@linzjs/windows 1.4.4 → 1.4.6

package/{src → dist}/modal/Modal.tsx

@@ -1,7 +1,7 @@
 import { ModalInstanceContext } from "./ModalInstanceContext";
 import clsx from "clsx";
 import { delay } from "lodash-es";
-import { PropsWithChildren, ReactElement, useContext, useEffect, useRef } from "react";
+import React, { PropsWithChildren, ReactElement, useContext, useEffect, useRef } from "react";
 
 export interface ModalProps {
   className?: string;

package/{src → dist}/panel/Panel.tsx

@@ -7,8 +7,8 @@ import { PanelInstanceContext, PanelSize } from "./PanelInstanceContext";
 import { PanelPosition, PanelsContext } from "./PanelsContext";
 import { PopoutWindow } from "./PopoutWindow";
 import clsx from "clsx";
-import { ReactElement, ReactNode, useContext, useEffect, useState } from "react";
-import ReactDOM from "react-dom";
+import React, { ReactElement, ReactNode, useContext, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import { Rnd } from "react-rnd";
 
 export interface PanelProps {
@@ -50,7 +50,7 @@ export const Panel = ({
   return (
     <PanelContext.Provider value={{ resizePanel }}>
       {dockElement && dockElement.isConnected ? (
-        ReactDOM.createPortal(children, dockElement)
+        createPortal(children, dockElement)
       ) : panelPoppedOut ? (
         <PopoutWindow name={uniqueId} title={title} size={panelSize}>
           <div

package/package.json

@@ -12,14 +12,17 @@
     "panel",
     "popout"
   ],
-  "main": "./src/index.ts",
-  "version": "1.4.4",
+  "main": "./dist/index.ts",
+  "version": "1.4.6",
   "peerDependencies": {
     "@linzjs/lui": "^17",
     "lodash-es": ">=4",
     "react": ">=17",
     "react-dom": ">=17"
   },
+  "files": [
+    "dist"
+  ],
   "type": "module",
   "publishConfig": {
     "access": "public"

package/.eslintrc.cjs

@@ -1,103 +0,0 @@
-// This config will run in a way that fails a build
-module.exports = {
-  env: {
-    commonjs: true,
-    es2020: true,
-    node: true
-  },
-  plugins: ["react", "react-hooks", "jest", "jsx-a11y", "testing-library"],
-  settings: {
-    react: {
-      version: "detect"
-    },
-    jest: {
-      version: 26
-    }
-  },
-  parserOptions: {
-    ecmaVersion: 2020,
-    sourceType: "module"
-  },
-  extends: ["eslint:recommended", "plugin:react/recommended", "plugin:react-hooks/recommended", "plugin:jest/recommended", "plugin:jest/style", "plugin:testing-library/react", "plugin:prettier/recommended", "plugin:storybook/recommended"],
-  ignorePatterns: ["react-app-env.d.ts"],
-  rules: {
-    // testing-library - to fix
-    "testing-library/no-dom-import": "off",
-    // Fix these
-    "jest/no-conditional-expect": "off",
-    "jest/no-standalone-expect": "off",
-    "jest/valid-expect": "off",
-    "jest/prefer-to-be": "error",
-    "testing-library/no-unnecessary-act": "off",
-    "testing-library/prefer-presence-queries": "off",
-    "testing-library/no-wait-for-multiple-assertions": "off",
-    "testing-library/no-render-in-setup": "off",
-    "testing-library/no-node-access": "off",
-    "testing-library/prefer-screen-queries": "off",
-    "testing-library/prefer-find-by": "off",
-    "testing-library/prefer-query-by-disappearance": "off",
-    "testing-library/no-debugging-utils": "warn",
-    "testing-library/render-result-naming-convention": "off",
-    // customized rules
-    "react/no-unescaped-entities": ["error", {
-      forbid: [">", '"', "}"]
-    }],
-    // ' is ok, don't want to escape this
-    "react/react-in-jsx-scope": "off",
-    // TS config takes care of this
-    "linebreak-style": ["error", "unix"],
-    // prevent crlf from getting pushed
-    "react/prop-types": "off",
-    // Doesn't seem pick up React.FC<Props> typing
-    "no-console": ["error", {
-      allow: ["warn", "error"]
-    }],
-    // error on push/codacy
-    "jest/no-disabled-tests": "warn",
-    // we have some disabled tests
-    "no-unused-vars": "off",
-    // duplicate of typescript rule
-    "react/jsx-no-target-blank": "off",
-    "jest/expect-expect": "off",
-    // sometimes the assertions are in other functions called from a test
-
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": ["warn", {
-      additionalHooks: "(useWorkflowEffect|useWorkflowSidePanelHook)"
-    }]
-  },
-  overrides: [{
-    /** Overrides for typescript */
-    files: ["**/*.ts", "**/*.tsx"],
-    plugins: ["@typescript-eslint"],
-    parser: "@typescript-eslint/parser",
-    parserOptions: {
-      project: "./tsconfig.json",
-      tsconfigRootDir: __dirname
-    },
-    extends: ["plugin:@typescript-eslint/recommended"],
-    rules: {
-      "@typescript-eslint/await-thenable": "error",
-      "@typescript-eslint/no-unnecessary-type-constraint": "off",
-      "@typescript-eslint/explicit-function-return-type": "off",
-      "@typescript-eslint/no-explicit-any": "off",
-      "@typescript-eslint/no-empty-function": ["warn", {
-        allow: ["arrowFunctions"]
-      }],
-      "@typescript-eslint/no-unused-vars": ["error", {
-        argsIgnorePattern: "^_"
-      }],
-      // prepend var with _ (e.g.. _myVar) to ignore this pattern
-      "@typescript-eslint/no-use-before-define": "off",
-      // We will want to use before define to keep exports at the top
-      "@typescript-eslint/ban-ts-comment": "off",
-      // We use explicit overrides
-      "@typescript-eslint/naming-convention": "off" // React's convention is to use CamelCase for component file names
-    }
-  }, {
-    files: ["*.test.js", "*.test.ts", "*.test.tsx", "scripts/*"],
-    rules: {
-      "no-console": "off"
-    }
-  }]
-};

package/.github/dependabot.yml

@@ -1,12 +0,0 @@
-# Basic dependabot.yml file with
-# minimum configuration for two package managers
-
-version: 2
-updates:
-  # Enable version updates for npm
-  - package-ecosystem: 'npm'
-    # Look for `package.json` and `lock` files in the `root` directory
-    directory: '/'
-    # Check the npm registry for updates every day (weekdays)
-    schedule:
-      interval: 'daily'

package/.github/pull_request_template.md

@@ -1,29 +0,0 @@
-DESCRIPTION of the task, STORY/TASK number and link if applicable (e.g. SURVEY-100)
-
-Author Checklist
-
-- [ ] appropriate description or links provided to provide context on the PR
-- [ ] self reviewed, seems easy to understand and follow
-- [ ] reasonable code test coverage
-- [ ] change is documented in Storybook and/or markdown files
-
-Reviewer Checklist
-
-- Follows convention
-- Does what the author says it will do
-- Does not appear to cause side effects and breaking changes
-  - if it does cause breaking changes, those are appropriately referenced
-
-Post merge
-
-- [ ] Post about the change in #lui-cop
-
-Conventional Commit Cheat Sheet:
-**build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
-**ci**: Changes to our CI configuration files and scripts (example scopes: Circle, BrowserStack, SauceLabs)
-**docs**: Documentation only changes
-**feat**: A new feature
-**fix**: A bug fix
-**perf**: A code change that improves performance
-**refactor**: A code change that neither fixes a bug nor adds a feature
-**test**: Adding missing tests or correcting existing tests

package/.github/workflows/chromatic.yml

@@ -1,23 +0,0 @@
-name: 'Chromatic'
-on: push
-
-jobs:
-  chromatic-deployment:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v1
-      - name: Install dependencies
-        run: npm i --legacy-peer-deps && npm run build-storybook
-      - name: Publish to non-master non-beta to Chromatic
-        if: github.ref != 'refs/heads/master' && github.ref != 'refs/heads/beta'
-        uses: chromaui/action@v1
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-      - name: Publish Chromatic and auto accept changes for master and beta
-        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/beta'
-        uses: chromaui/action@v1
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          autoAcceptChanges: true # 👈 Option to accept all changes

package/.github/workflows/deploy-storybook.yml

@@ -1,86 +0,0 @@
-name: CI
-on: [push]
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Begin CI...
-        uses: actions/checkout@v2
-        with:
-          persist-credentials: false
-
-      - name: Use Node 16
-        uses: actions/setup-node@v2
-        with:
-          node-version: 16.x
-
-      - name: Install dependencies
-        run: npm ci --legacy-peer-deps
-
-      - name: Test
-        run: npm run test --ci --coverage --maxWorkers=2
-
-      - name: Build
-        run: npm run build
-
-      - name: Release
-        if: github.ref == 'refs/heads/master'
-        run: npx semantic-release
-        env:
-          GH_TOKEN: ${{secrets.STEP_ENABLEMENT_SERVICE_PAT}}
-          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
-          NPM_TOKEN: ${{secrets.NPM_AUTH_TOKEN_LINZJS}}
-
-  publish-beta-npm:
-    if: startsWith(github.ref, 'refs/heads/beta')
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          token: ${{secrets.STEP_ENABLEMENT_SERVICE_PAT}}
-
-      - uses: actions/setup-node@v2
-        with:
-          node-version: 16
-          registry-url: https://registry.npmjs.org/
-
-      - name: Install dependencies
-        run: npm ci --legacy-peer-deps
-
-      - name: Build
-        run: npm run build
-
-      - run: npm version prerelease -m "%s [skip ci]" && git push
-        env:
-          GIT_AUTHOR_EMAIL: STEPEnablementService@linz.govt.nz
-          GIT_AUTHOR_NAME: STEP Enablement Service
-          GIT_COMMITTER_EMAIL: STEPEnablementService@linz.govt.nz
-          GIT_COMMITTER_NAME: STEP Enablement Service
-
-      - run: npm publish --access public --tag beta
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN_LINZJS}}
-
-  publish-storybook:
-    if: github.ref == 'refs/heads/master'
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-
-      - uses: actions/checkout@v2
-
-      - uses: actions/setup-node@v2
-        with:
-          node-version: 16
-
-      - name: Install dependencies
-        run: npm ci --legacy-peer-deps
-
-      - name: Build
-        run: npm run build
-
-      - run: npm run deploy-storybook -- --ci
-        env:
-          GH_TOKEN: github-actions:${{secrets.GITHUB_TOKEN}}

package/.prettierrc.cjs

@@ -1,12 +0,0 @@
-module.exports = {
-  semi: true,
-  trailingComma: "all",
-  printWidth: 120,
-  useTabs: false,
-  tabWidth: 2,
-  singleQuote: false,
-  endOfLine: "lf",
-  importOrder: [".(css|scss)$", "<THIRD_PARTY_MODULES>", "^@linzjs/(.*)$", "^@step-ag-grid"],
-  importOrderSeparation: true,
-  importOrderSortSpecifiers: true,
-};

package/.storybook/main.ts

@@ -1,37 +0,0 @@
-import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
-import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
-import type { StorybookConfig } from "@storybook/react-vite";
-import { mergeConfig } from "vite";
-
-const config: StorybookConfig = {
-  stories: ["../src/**/Introduction.mdx", "../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
-  framework: {
-    name: "@storybook/react-vite",
-    options: {},
-  },
-  docs: {
-    autodocs: "tag",
-  },
-  viteFinal: async (config) => {
-    return mergeConfig(config, {
-      optimizeDeps: {
-        esbuildOptions: {
-          // Node.js global to browser globalThis
-          define: {
-            global: "globalThis",
-          },
-          // Enable esbuild polyfill plugins
-          plugins: [
-            NodeGlobalsPolyfillPlugin({
-              buffer: true,
-              process: true,
-            }),
-            NodeModulesPolyfillPlugin(),
-          ],
-        },
-      },
-    });
-  },
-};
-export default config;

package/.storybook/preview.ts

@@ -1,15 +0,0 @@
-import type { Preview } from "@storybook/react";
-
-const preview: Preview = {
-  parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
-    },
-  },
-};
-
-export default preview;

package/.stylelintrc.json

@@ -1,68 +0,0 @@
-{
-  "extends": ["stylelint-config-standard", "stylelint-config-prettier", "stylelint-config-recommended-scss"],
-  "plugins": ["stylelint-scss"],
-  "customSyntax": "postcss-scss",
-  "rules": {
-    "at-rule-no-unknown": null,
-    "at-rule-empty-line-before": null,
-    "block-closing-brace-newline-before": "always-multi-line",
-    "block-closing-brace-newline-after": [
-      "always-multi-line",
-      {
-        "ignoreAtRules": ["if", "else"]
-      }
-    ],
-    "block-opening-brace-space-before": "always",
-    "block-opening-brace-space-after": "always-single-line",
-    "color-hex-case": null,
-    "color-hex-length": null,
-    "declaration-empty-line-before": null,
-    "declaration-block-single-line-max-declarations": 2,
-    "declaration-block-semicolon-newline-after": "always-multi-line",
-    "declaration-block-semicolon-space-after": "always-single-line",
-    "declaration-block-semicolon-space-before": "never",
-    "function-parentheses-space-inside": "never-single-line",
-    "function-max-empty-lines": 1,
-    "length-zero-no-unit": null,
-    "max-empty-lines": [
-      2,
-      {
-        "ignore": ["comments"]
-      }
-    ],
-    "no-duplicate-selectors": null,
-    "no-invalid-position-at-import-rule": null,
-    "rule-empty-line-before": [
-      "always-multi-line",
-      {
-        "except": ["after-single-line-comment", "first-nested"],
-        "ignore": ["after-comment", "first-nested"]
-      }
-    ],
-    "selector-list-comma-newline-after": "always-multi-line",
-    "selector-pseudo-element-colon-notation": "double",
-    "value-list-max-empty-lines": 1,
-
-    "scss/at-rule-no-unknown": true,
-    "scss/at-else-closing-brace-newline-after": "always-last-in-chain",
-    "scss/at-else-if-parentheses-space-before": "always",
-    "scss/no-duplicate-dollar-variables": [
-      true,
-      {
-        "ignoreInsideAtRules": ["if", "else", "mixin", "function", "while"]
-      }
-    ],
-    "scss/at-function-parentheses-space-before": "never",
-    "scss/at-if-closing-brace-newline-after": "always-last-in-chain",
-    "scss/at-mixin-argumentless-call-parentheses": "always",
-    "scss/at-mixin-parentheses-space-before": "never",
-    "scss/dollar-variable-colon-space-after": "at-least-one-space",
-    "scss/dollar-variable-colon-newline-after": "always-multi-line",
-    "scss/dollar-variable-no-missing-interpolation": true,
-    "scss/double-slash-comment-whitespace-inside": "always",
-    "scss/declaration-nested-properties-no-divided-groups": true,
-    "scss/operator-no-unspaced": true,
-    "scss/selector-no-redundant-nesting-selector": true,
-    "selector-class-pattern": "^[a-zA-Z-_]+$"
-  }
-}

package/config/jest/babelTransform.cjs

@@ -1,29 +0,0 @@
-"use strict";
-
-const babelJest = require("babel-jest");
-
-const hasJsxRuntime = (() => {
-  if (process.env.DISABLE_NEW_JSX_TRANSFORM === "true") {
-    return false;
-  }
-
-  try {
-    require.resolve("react/jsx-runtime");
-    return true;
-  } catch (e) {
-    return false;
-  }
-})();
-
-module.exports = babelJest.default.createTransformer({
-  presets: [
-    [
-      require.resolve("babel-preset-react-app"),
-      {
-        runtime: hasJsxRuntime ? "automatic" : "classic",
-      },
-    ],
-  ],
-  babelrc: false,
-  configFile: false,
-});

package/config/jest/cssTransform.cjs

@@ -1,14 +0,0 @@
-"use strict";
-
-// This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-  process() {
-    return "module.exports = {};";
-  },
-  getCacheKey() {
-    // The output is always the same.
-    return "cssTransform";
-  },
-};

package/config/jest/fileTransform.cjs

@@ -1,38 +0,0 @@
-"use strict";
-
-const path = require("path");
-const lodash = require("lodash");
-
-// This is a custom Jest transformer turning file imports into filenames.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-  process(src, filename) {
-    const assetFilename = JSON.stringify(path.basename(filename));
-
-    if (filename.match(/\.svg$/)) {
-      // Based on how SVGR generates a component name:
-      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
-      const pascalCaseFilename = lodash.upperFirst(lodash.camelCase(path.parse(filename).name));
-      const componentName = `Svg${pascalCaseFilename}`;
-      return `const React = require('react');
-      module.exports = {
-        __esModule: true,
-        default: ${assetFilename},
-        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
-          return {
-            $$typeof: Symbol.for('react.element'),
-            type: 'svg',
-            ref: ref,
-            key: null,
-            props: Object.assign({}, props, {
-              children: ${assetFilename}
-            })
-          };
-        }),
-      };`;
-    }
-
-    return `module.exports = ${assetFilename};`;
-  },
-};

package/config/jest/setup.js

@@ -1,2 +0,0 @@
-import "@testing-library/jest-dom";
-import "jest-canvas-mock";

package/empty.js

@@ -1 +0,0 @@
-export {};

package/jest.config.cjs

@@ -1,19 +0,0 @@
-module.exports = {
-  roots: ["<rootDir>/src"],
-  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}", "!src/**/*.d.ts"],
-  setupFiles: ["react-app-polyfill/jsdom"],
-  setupFilesAfterEnv: ["jest-expect-message"],
-  testMatch: ["<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"],
-  testEnvironment: "jsdom",
-  transform: {
-    "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.cjs",
-    "^.+\\.css$": "<rootDir>/config/jest/cssTransform.cjs",
-    "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.cjs",
-  },
-  transformIgnorePatterns: ["node_modules/(?!(ol|@geoblocks/ol-maplibre-layer|geotiff|quick-lru)|lodash-es|lodash|escape-string-regexp|matcher/)"],
-  moduleNameMapper: {
-    "^@components/(.*)$": "<rootDir>/src/components/$1",
-  },
-  resetMocks: true,
-  coverageReporters: ["text", "cobertura"],
-};

package/rollup.config.cjs

@@ -1,37 +0,0 @@
-const copy  = require("rollup-plugin-copy");
-
-const outputDir = "dist";
-
-module.exports = {
-  input: "./empty.js",
-  plugins: [
-    copy({
-      targets: [
-        {
-          src: ["src/modal/*", "!**/*.test.ts*"],
-          dest: outputDir,
-          expandDirectories: true,
-          onlyFiles: true,
-        },
-        {
-          src: ["src/panel/*", "!**/*.test.ts*"],
-          dest: outputDir,
-          expandDirectories: true,
-          onlyFiles: true,
-        },
-        {
-          src: ["src/util/*", "!**/*.test.ts*"],
-          dest: outputDir,
-          expandDirectories: true,
-          onlyFiles: true,
-        },
-        {
-          src: ["src/index.ts"],
-          dest: outputDir,
-          onlyFiles: true,
-        },
-      ],
-      flatten: false,
-    }),
-  ],
-};

package/src/panel/generateId.test.ts

@@ -1,9 +0,0 @@
-import { makePopoutId } from "./generateId";
-
-/**
- * The only valid characters for an @emotion key are lower case chars or '-'.
- * We need to replace any char that is not valid with a substitute.
- */
-test("makePopoutId", () => {
-  expect(makePopoutId("Hello-59.!---&$*(--")).toBe("hello-five-nine-");
-});

package/src/setupTests.ts

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom";

package/src/stories/Introduction.mdx

@@ -1,18 +0,0 @@
-# @linzjs/windows
-
-[![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)
-
-> Reusable promise based windowing component for LINZ / Toitū te whenua.
-
-Rect state based modals/windows are painful because they require:
-- shared states for open/closed.
-- callbacks/states for return values.
-- inline modal/window includes, which prevent you from closing the invoking component before the modal/window has
-completed.
-
-This module gives you promise based modals/windows which don't require all the state
-based boiler-plate / inline-components.
-
-## Features
-- Async HTML dialog based Modals.
-- Draggable and resizeable, pop-in/out Windows.

package/src/stories/Introduction.stories.tsx

@@ -1,8 +0,0 @@
-import { Meta } from "@storybook/react";
-
-// eslint-disable-next-line storybook/story-exports
-const meta: Meta<typeof Object> = {
-  title: "Introduction",
-};
-
-export default meta;

package/src/stories/modal/Modal.mdx

@@ -1,26 +0,0 @@
-import {getBlocks, blockToString} from "../support.js";
-import {Meta, Source, Story} from "@storybook/blocks";
-import * as ModalStories from "./Modal.stories"
-
-import myModule from './TestModal?raw';
-
-<Meta name="Show" of={ModalStories}/>
-# Show Modal
-## Example
-Click to show the modal:
-<Story of={ModalStories.ShowModal}/>
-
-## Code
-<br/>
-{getBlocks(myModule).map((block) => (
-<>
-    <h3>{block.split("\n")[0]}</h3>
-    <Source code={blockToString(block)} language="typescript"  />
-</>
-))}
-
-### Example: Mocking Modal response
-
-<Source code={"{ /* Responds with the value 1 */ }\n<ModalContext.Provider value={showModal: async() => 1}>\n" +
-    "... Component under test ...\n" +
-    "</ModalContext.Provider>\n"} language="typescript"/>