Merge branch 'main' into unit-tests

playcanvas · Aug 6, 2023 · 80403d9 · 80403d9
2 parents fbb1418 + 84487c9
commit 80403d9
Show file tree

Hide file tree

Showing 117 changed files with 1,135 additions and 830 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.storybook/utils/
 
 # testing
 /coverage
@@ -16,6 +17,8 @@
 /react/dist/
 /react/types/
 /styles/dist/
+/react/unstyled/dist/
+/unstyled/dist/
 
 # misc
 .DS_Store

diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,7 +1,6 @@
 {
     "extends": "stylelint-config-standard-scss",
     "rules": {
-        "indentation": 4,
         "font-family-no-missing-generic-family-keyword": [
             true,
             {
@@ -13,7 +12,6 @@
         "no-descending-specificity": null,
         "no-duplicate-selectors": null,
         "scss/no-global-function-names": null,
-        "scss/at-extend-no-missing-placeholder": null,
-        "string-quotes": "single"
+        "scss/at-extend-no-missing-placeholder": null
     }
 }
diff --git a/README.md b/README.md
@@ -33,7 +33,7 @@ document.body.appendChild(label.dom);
 If you'd like to include PCUI in your React project, you can import the individual components as follows:
 
 ```javascript
-import React from 'react';
+import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { TextInput } from '@playcanvas/pcui/react';
 import '@playcanvas/pcui/styles';

diff --git a/docs/README.md b/docs/README.md
@@ -4,16 +4,18 @@
 The PCUI documentation website is built using a Jekyll template. The markdown pages for the site can be found and edited in the `docs/pages` directory.
 
 The doc site also makes use of storybook to display React components and typedocs to display the API reference. If you are developing the PCUI library, you should use `npm run storybook` and `npm run typedocs` directly to generate the storybook and typedocs respectively. The following guide is for updating and publishing the documentation site.
-### Testing docs locally (macOS)
 
-Ensure you have Ruby 3.x installed.
+### Testing docs locally
+
+Ensure you have Ruby 3.x installed. Go [here](https://rubyinstaller.org/downloads/) for a Windows installer.
 
 In the `pcui/docs` directory run:
+
 `bundle install`
 
 To install the ruby dependencies. If you are having trouble with the install, try deleting the `Gemfile.lock` file.
 
-Then in the main pcui directory run:
+Then in the main PCUI directory run:
 
 `npm run build:typedocs` to build the latest typedocs API reference site which will be copied into the doc site in the next step
 
@@ -27,7 +29,7 @@ Visit http://localhost:3497/
 
 If you haven't cloned the [playcanvas.github.io](https://github.com/playcanvas/playcanvas.github.io) repo, install it locally to a projects folder which will now be referenced as `<projects_folder>`.
 
-Then in the pcui main directory run:
+Then in the PCUI main directory run:
 
 `npm run build:docsite:production`
 

diff --git a/docs/pages/2-react.markdown b/docs/pages/2-react.markdown
@@ -8,7 +8,7 @@ nav_order: 3
 If you are more familiar with React, you can import React elements into your own `.jsx` files and use them as follows:
 
 ```jsx
-import React from 'react';
+import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { TextInput } from '@playcanvas/pcui/react';
 import '@playcanvas/pcui/styles';

diff --git a/examples/arrayinput.html → examples/elements/arrayinput.html b/examples/arrayinput.html → examples/elements/arrayinput.html
diff --git a/examples/booleaninput.html → examples/elements/booleaninput.html b/examples/booleaninput.html → examples/elements/booleaninput.html
diff --git a/examples/button.html → examples/elements/button.html b/examples/button.html → examples/elements/button.html
diff --git a/examples/canvas.html → examples/elements/canvas.html b/examples/canvas.html → examples/elements/canvas.html
diff --git a/examples/code.html → examples/elements/code.html b/examples/code.html → examples/elements/code.html
diff --git a/examples/colorpicker.html → examples/elements/colorpicker.html b/examples/colorpicker.html → examples/elements/colorpicker.html
diff --git a/examples/divider.html → examples/elements/divider.html b/examples/divider.html → examples/elements/divider.html
diff --git a/examples/gradientpicker.html → examples/elements/gradientpicker.html b/examples/gradientpicker.html → examples/elements/gradientpicker.html
diff --git a/examples/gridview.html → examples/elements/gridview.html b/examples/gridview.html → examples/elements/gridview.html
diff --git a/examples/infobox.html → examples/elements/infobox.html b/examples/infobox.html → examples/elements/infobox.html
diff --git a/examples/label.html → examples/elements/label.html b/examples/label.html → examples/elements/label.html
diff --git a/examples/labelgroup.html → examples/elements/labelgroup.html b/examples/labelgroup.html → examples/elements/labelgroup.html
diff --git a/examples/menu.html → examples/elements/menu.html b/examples/menu.html → examples/elements/menu.html
diff --git a/examples/numericinput.html → examples/elements/numericinput.html b/examples/numericinput.html → examples/elements/numericinput.html
diff --git a/examples/overlay.html → examples/elements/overlay.html b/examples/overlay.html → examples/elements/overlay.html
diff --git a/examples/panel.html → examples/elements/panel.html b/examples/panel.html → examples/elements/panel.html
diff --git a/examples/progress.html → examples/elements/progress.html b/examples/progress.html → examples/elements/progress.html
diff --git a/examples/radiobutton.html → examples/elements/radiobutton.html b/examples/radiobutton.html → examples/elements/radiobutton.html
diff --git a/examples/selectinput.html → examples/elements/selectinput.html b/examples/selectinput.html → examples/elements/selectinput.html
diff --git a/examples/sliderinput.html → examples/elements/sliderinput.html b/examples/sliderinput.html → examples/elements/sliderinput.html
diff --git a/examples/spinner.html → examples/elements/spinner.html b/examples/spinner.html → examples/elements/spinner.html
diff --git a/examples/textareainput.html → examples/elements/textareainput.html b/examples/textareainput.html → examples/elements/textareainput.html
diff --git a/examples/textinput.html → examples/elements/textinput.html b/examples/textinput.html → examples/elements/textinput.html
diff --git a/examples/treeview.html → examples/elements/treeview.html b/examples/treeview.html → examples/elements/treeview.html
diff --git a/examples/vectorinput.html → examples/elements/vectorinput.html b/examples/vectorinput.html → examples/elements/vectorinput.html
diff --git a/examples/index.html b/examples/index.html
@@ -64,50 +64,66 @@
             allowDragging: false
         });
 
-        const treeRoot = new TreeViewItem({
-            allowSelect: false,
-            text: 'Elements'
-        });
-        treeView.append(treeRoot);
-
         const iframe = document.createElement('iframe');
 
-        const examples = [
-            'ArrayInput',
-            'BooleanInput',
-            'Button',
-            'Canvas',
-            'Code',
-            'ColorPicker',
-            'Divider',
-            'GradientPicker',
-            'GridView',
-            'InfoBox',
-            'Label',
-            'LabelGroup',
-            'Menu',
-            'NumericInput',
-            'Overlay',
-            'Panel',
-            'Progress',
-            'RadioButton',
-            'SelectInput',
-            'SliderInput',
-            'Spinner',
-            'TextAreaInput',
-            'TextInput',
-            'TreeView',
-            'VectorInput'
+        const categories = [
+            {
+                categoryName: 'Elements',
+                examples: [
+                    'ArrayInput',
+                    'BooleanInput',
+                    'Button',
+                    'Canvas',
+                    'Code',
+                    'ColorPicker',
+                    'Divider',
+                    'GradientPicker',
+                    'GridView',
+                    'InfoBox',
+                    'Label',
+                    'LabelGroup',
+                    'Menu',
+                    'NumericInput',
+                    'Overlay',
+                    'Panel',
+                    'Progress',
+                    'RadioButton',
+                    'SelectInput',
+                    'SliderInput',
+                    'Spinner',
+                    'TextAreaInput',
+                    'TextInput',
+                    'TreeView',
+                    'VectorInput'
+                ]
+            },
+            {
+                categoryName: 'Utilities',
+                examples: [
+                    'Icon Browser',
+                ]
+            }
         ];
-        for (const example of examples) {
-            const item = new TreeViewItem({
-                text: example
-            });
-            item.on('select', () => {
-                iframe.src = example.toLowerCase() + '.html';
+
+        for (const category of categories) {
+            const categoryItem = new TreeViewItem({
+                allowSelect: false,
+                text: category.categoryName
             });
+            treeView.append(categoryItem);
+
+            for (const example of category.examples) {
+                const item = new TreeViewItem({
+                    text: example
+                });
+                item.on('select', () => {
+                    const path = category.categoryName.toLowerCase();
+                    const name = example.toLowerCase().replace(/ /g, '-');
+                    iframe.src = `${path}/${name}.html`;
+                });
 
-            treeRoot.append(item);
+                categoryItem.append(item);
+            }
         }
 
         const filter = new TextInput({

diff --git a/examples/utilities/icon-browser.html b/examples/utilities/icon-browser.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>PCUI GridView</title>
+    <meta charset="utf-8">
+    <style>
+        body {
+            background-color: #364346;
+        }
+
+        .font-regular, .font-bold, .font-thin, .font-light {
+            font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+        }
+
+        .icon-info > .pcui-label {
+            font-size: 16px;
+            line-height: 2;
+        }
+
+        .pcui-gridview-item-text::before {
+            font-family: pc-icon;
+            content: attr(data-before);
+            padding-right: 10px;
+        }
+    </style>
+    <script async src="https://unpkg.com/es-module-shims/dist/es-module-shims.js"></script>
+    <script type="importmap">
+        {
+            "imports": {
+                "@playcanvas/pcui": "https://cdn.skypack.dev/@playcanvas/pcui",
+                "@playcanvas/pcui/styles": "https://cdn.skypack.dev/@playcanvas/pcui/styles"
+            }
+        }
+    </script>
+</head>
+<body>
+    <script type="module">
+        import { GridView, GridViewItem } from '@playcanvas/pcui';
+        import '@playcanvas/pcui/styles'
+
+        const gridView = new GridView({
+            multiSelect: false
+        });
+
+        const ranges = [
+            [ 111, 392 ],
+            [ 394, 415 ],
+            [ 421, 426 ],
+            [ 430, 439 ]
+        ];
+
+        for (const range of ranges) {
+            for (let i = range[0]; i <= range[1]; i++) {
+                const item = new GridViewItem({
+                    class: 'icon-info',
+                    text: `E${i}`
+                });
+
+                const span = item.dom.childNodes[0];
+                const icon = String.fromCodePoint(parseInt(`E${i}`, 16));
+                span.setAttribute('data-before', icon);
+
+                gridView.append(item);
+            }
+        }
+
+        document.body.appendChild(gridView.dom);
+    </script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@playcanvas/pcui",
-  "version": "3.3.1",
+  "version": "4.0.11",
   "author": "PlayCanvas <support@playcanvas.com>",
   "homepage": "https://playcanvas.github.io/pcui",
   "description": "User interface component library for the web",
@@ -45,8 +45,8 @@
     "build:react:es6": "rollup -c --environment target:react:es6",
     "build": "rollup -c && npm run bundle:styles",
     "build:icons": "cd ./utils && node ./build-font-icons.mjs",
-    "build:docsite:local": "cd docs && bundle exec jekyll build --config _config_local.yml && mkdir _site/storybook && cd .. && ENVIRONMENT=production build-storybook --no-dll -o ./docs/_site/storybook && cp -r ./typedocs ./docs/_site/typedocs",
-    "build:docsite:production": "cd docs && bundle exec jekyll build --config _config.yml && mkdir _site/storybook && cd .. && ENVIRONMENT=production build-storybook --no-dll -o ./docs/_site/storybook && cp -r ./typedocs ./docs/_site/typedocs",
+    "build:docsite:local": "cd docs && bundle exec jekyll build --config _config_local.yml && shx mkdir _site/storybook && cd .. && cross-env ENVIRONMENT=production build-storybook --no-dll -o ./docs/_site/storybook && shx cp -r ./typedocs ./docs/_site/typedocs",
+    "build:docsite:production": "cd docs && bundle exec jekyll build --config _config.yml && shx mkdir _site/storybook && cd .. && cross-env ENVIRONMENT=production build-storybook --no-dll -o ./docs/_site/storybook && shx cp -r ./typedocs ./docs/_site/typedocs",
     "docsite:serve": "serve docs/_site -p 3497",
     "build:types": "tsc --project ./tsconfig.json --declaration --emitDeclarationOnly --outDir types && tsc --project ./react/tsconfig.json --declaration --emitDeclarationOnly --outDir ./react/types",
     "build:typedocs": "typedoc --tsconfig ./tsconfig.json",
@@ -88,7 +88,6 @@
     "rules": {
       "@typescript-eslint/ban-ts-comment": "off",
       "@typescript-eslint/no-empty-function": "off",
-      "@typescript-eslint/no-empty-interface": "off",
       "@typescript-eslint/no-explicit-any": "off",
       "@typescript-eslint/no-unused-vars": "off",
       "jsdoc/require-returns": "off",
@@ -105,32 +104,29 @@
     "@playcanvas/observer": "^1.3.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@playcanvas/eslint-config": "^1.0.16",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@playcanvas/eslint-config": "^1.4.1",
+    "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
-    "@storybook/addon-actions": "^6.5.15",
-    "@storybook/addon-backgrounds": "^6.5.15",
-    "@storybook/addon-controls": "^6.5.15",
-    "@storybook/addon-docs": "^6.5.15",
-    "@storybook/addon-links": "^6.5.15",
-    "@storybook/addons": "^6.5.15",
-    "@storybook/builder-webpack5": "^6.5.15",
-    "@storybook/manager-webpack5": "^6.5.15",
+    "@rollup/plugin-typescript": "^11.1.0",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-backgrounds": "^6.5.16",
+    "@storybook/addon-controls": "^6.5.16",
+    "@storybook/addon-docs": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/addons": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/preset-create-react-app": "^4.0.0",
-    "@storybook/react": "^6.5.15",
+    "@storybook/react": "^6.5.16",
     "@types/estree": "^1.0.0",
-    "@types/react": "^18.0.26",
-    "@typescript-eslint/eslint-plugin": "^5.48.2",
-    "@typescript-eslint/parser": "^5.48.2",
-    "autoprefixer": "^10.4.13",
-    "babel-loader": "^9.1.2",
-    "eslint": "^8.32.0",
-    "eslint-import-resolver-typescript": "^3.5.3",
-    "playcanvas": "^1.60.0",
+    "@types/react": "^18.0.27",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
+    "@typescript-eslint/parser": "^5.60.0",
+    "autoprefixer": "^10.4.14",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.43.0",
+    "eslint-import-resolver-typescript": "^3.5.5",
+    "playcanvas": "^1.63.1",
     "postcss": "^8.4.21",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
@@ -139,16 +135,15 @@
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "react-scripts": "^5.0.0",
-    "rollup": "^3.10.0",
-    "rollup-plugin-rename": "^1.0.1",
-    "rollup-plugin-sass": "^1.12.17",
-    "rollup-plugin-typescript2": "^0.34.1",
+    "rollup": "^3.21.5",
+    "rollup-plugin-sass": "^1.12.19",
     "scss-bundle": "^3.1.2",
-    "serve": "^14.1.2",
-    "stylelint": "^14.16.1",
-    "stylelint-config-standard-scss": "^6.1.0",
-    "typedoc": "^0.23.24",
-    "typedoc-plugin-mdn-links": "^2.0.2",
+    "serve": "^14.2.0",
+    "shx": "^0.3.4",
+    "stylelint": "^15.8.0",
+    "stylelint-config-standard-scss": "^9.0.0",
+    "typedoc": "^0.24.7",
+    "typedoc-plugin-mdn-links": "^3.0.3",
     "typescript": "^4.9.4"
   },
   "directories": {

diff --git a/react/tsconfig.json b/react/tsconfig.json
@@ -6,9 +6,9 @@
         "jsx": "react",
         "lib": [
             "es2019",
-            "dom"
+            "dom",
+            "dom.iterable"
         ],
-        "allowSyntheticDefaultImports" : true,
         "esModuleInterop" : true,
         "sourceMap": true,
         "moduleResolution": "node"