@map-colonies/react-components 3.7.3 → 3.9.0

package/package.json

@@ -1,95 +1,100 @@
-{
-  "name": "@map-colonies/react-components",
-  "version": "3.7.3",
-  "module": "dist/index.js",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "bugs": {
-    "url": "https://github.com/MapColonies/shared-components/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/MapColonies/shared-components.git"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "license": "MIT",
-  "dependencies": {
-    "@date-io/date-fns": "^1.3.13",
-    "@map-colonies/react-core": "^3.3.1",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/pickers": "^3.2.10",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@turf/bbox": "^6.0.1",
-    "@turf/bbox-polygon": "^6.0.1",
-    "@turf/boolean-point-in-polygon": "^6.5.0",
-    "@turf/helpers": "^6.1.4",
-    "@turf/rewind": "^5.1.5",
-    "@types/geojson": "^7946.0.7",
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/ol": "^6.3.1",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "cesium": "^1.82.0",
-    "copy-webpack-plugin": "^6.3.1",
-    "copyfiles": "2.3.0",
-    "cross-env": "7.0.2",
-    "date-fns": "^2.14.0",
-    "lodash": "^4.17.20",
-    "ol": "^6.4.3",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1",
-    "resium": "^1.13.1",
-    "rimraf": "3.0.2",
-    "typescript": "~3.7.2"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "npx rimraf dist && tsc --project tsbuildconfig.json && yarn run copyassets:components",
-    "test": "react-scripts test",
-    "test:nowatch": "react-scripts test --coverage --watchAll=false --reporters='default' --reporters='jest-html-reporters'",
-    "eject": "react-scripts eject",
-    "postbuild": "copyfiles -u 2 -e \"**/*.ts\" -e \"**/*.tsx\" \"src/lib/**/*\" dist",
-    "copyassets:all": "yarn run copyassets:cesium",
-    "copyassets:cesium": "copyfiles -u 5 \"../../node_modules/cesium/Build/Cesium/**/*\" \"storybook-static\"",
-    "copyassets:components": "copyfiles -u 1 \"./public/assets/**/*\" \"dist\"",
-    "storybook": "yarn run copyassets:all && start-storybook -p 9010 -s public,\"storybook-static\"",
-    "build-storybook": "build-storybook -s public",
-    "eslint-check": "npx eslint . --ext .ts,.tsx"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@types/enzyme": "^3.10.5",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/lodash": "^4.14.165",
-    "@types/react-test-renderer": "^16.9.2",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
-    "jest-enzyme": "^7.1.2",
-    "react-test-renderer": "^16.13.1"
-  },
-  "gitHead": "6b3a25ecbdf27f0c62f7ac55e2c9efa89db4c29e",
-  "jest": {
-    "coverageReporters": [
-      "text",
-      "html"
-    ]
-  }
-}
+{
+  "name": "@map-colonies/react-components",
+  "version": "3.9.0",
+  "module": "dist/index.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "bugs": {
+    "url": "https://github.com/MapColonies/shared-components/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MapColonies/shared-components.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@date-io/date-fns": "^1.3.13",
+    "@here/quantized-mesh-decoder": "^1.2.8",
+    "@map-colonies/react-core": "^3.3.1",
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/pickers": "^3.2.10",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@turf/bbox": "^6.0.1",
+    "@turf/bbox-polygon": "^6.0.1",
+    "@turf/boolean-point-in-polygon": "^6.5.0",
+    "@turf/helpers": "^6.1.4",
+    "@turf/rewind": "^5.1.5",
+    "@types/geojson": "^7946.0.7",
+    "@types/jest": "^24.0.0",
+    "@types/node": "^12.0.0",
+    "@types/ol": "^6.3.1",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "@types/textarea-caret": "^3.0.1",
+    "cesium": "1.84.0",
+    "copy-webpack-plugin": "^6.3.1",
+    "copyfiles": "2.3.0",
+    "cross-env": "7.0.2",
+    "date-fns": "^2.14.0",
+    "get-input-selection": "^1.1.4",
+    "lodash": "^4.17.20",
+    "ol": "^6.4.3",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.1",
+    "resium": "^1.13.1",
+    "rimraf": "3.0.2",
+    "textarea-caret": "^3.1.0",
+    "typescript": "~3.7.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "npx rimraf dist && tsc --project tsbuildconfig.json && yarn run copyassets:components",
+    "test": "react-scripts test",
+    "test:nowatch": "react-scripts test --coverage --watchAll=false --reporters='default' --reporters='jest-html-reporters'",
+    "eject": "react-scripts eject",
+    "postbuild": "copyfiles -u 2 -e \"**/*.ts\" -e \"**/*.tsx\" \"src/lib/**/*\" dist",
+    "copyassets:all": "yarn run copyassets:cesium",
+    "copyassets:cesium": "copyfiles -u 5 \"../../node_modules/cesium/Build/Cesium/**/*\" \"storybook-static\"",
+    "copyassets:components": "copyfiles -u 1 \"./public/assets/**/*\" \"dist\"",
+    "storybook": "yarn run copyassets:all && start-storybook -p 9010 -s public,\"storybook-static\"",
+    "storybook-https": "yarn run copyassets:all && start-storybook --ssl-cert ~/example.crt --ssl-key ~/example.key --https -p 9010 -s public,\"storybook-static\"",
+    "build-storybook": "build-storybook -s public",
+    "eslint-check": "npx eslint . --ext .ts,.tsx"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/enzyme": "^3.10.5",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/lodash": "^4.14.165",
+    "@types/react-test-renderer": "^16.9.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "jest-enzyme": "^7.1.2",
+    "react-test-renderer": "^16.13.1"
+  },
+  "gitHead": "3e15e1e543de64636187a5482827f6f2ba1de4bb",
+  "jest": {
+    "coverageReporters": [
+      "text",
+      "html"
+    ]
+  }
+}

package/src/lib/autocomplete/autocomplete.css

@@ -0,0 +1,25 @@
+.react-autocomplete-input {
+  background-clip: padding-box;
+  background-color: #fff;
+  bottom: auto;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  display: block;
+  font-size: 14px;
+  list-style: none;
+  padding: 1px;
+  position: absolute;
+  z-index: 20000;
+  margin-block-start: unset;
+  margin-block-end: unset;
+}
+
+.react-autocomplete-input > li {
+  cursor: pointer;
+  padding: 10px;
+  min-width: 100px;
+}
+
+.react-autocomplete-input > li.active {
+  background-color: #337ab7;
+  color: #fff;
+}

package/src/lib/autocomplete/autocomplete.stories.tsx

@@ -0,0 +1,101 @@
+/* eslint-disable @typescript-eslint/naming-convention, @typescript-eslint/prefer-regexp-exec, @typescript-eslint/no-magic-numbers*/
+import React from 'react';
+import { Story } from '@storybook/react/types-6-0';
+import { TextField } from '@map-colonies/react-core';
+import { CSFStory } from '../utils/story';
+
+import Autocomplete from './autocomplete';
+
+export default {
+  title: 'Autocomplete',
+  component: Autocomplete,
+};
+
+export const AutocpmleteTextArea: CSFStory<JSX.Element> = () => (
+  <>
+    <h1>Autocpmlete with native HTML TEXTAREA</h1>
+    <Autocomplete
+      {...{
+        options: ['apple', 'apricot', 'banana', 'bounty'],
+      }}
+    />
+  </>
+);
+AutocpmleteTextArea.story = {
+  name: 'Autocpmlete with TEXTAREA HTML',
+};
+
+export const AutocpmleteTextField: Story = (args: unknown) => {
+  return (
+    <>
+      <h1>Autocpmlete with TEXTFIELD react-core component</h1>
+      <Autocomplete
+        {...{
+          Component: <TextField />,
+          ComponentProps: {
+            name: 'autocomplete',
+          },
+          options: ['apple', 'apricot', 'banana', 'bounty'],
+        }}
+        {...args}
+      />
+    </>
+  );
+};
+AutocpmleteTextField.storyName = 'Autocpmlete with TEXTFIELD component';
+AutocpmleteTextField.argTypes = {
+  disabled: {
+    defaultValue: false,
+    control: {
+      type: 'boolean',
+    },
+  },
+  trigger: {
+    defaultValue: '@',
+    control: {
+      type: 'text',
+    },
+  },
+  spacer: {
+    defaultValue: ' ',
+    control: {
+      type: 'text',
+    },
+  },
+};
+
+export const AutocpmleteInComplitionModeEN: Story = (args: unknown) => {
+  return (
+    <>
+      <h1>Autocpmlete with TEXTFIELD in AUTOCOMPLETE mode in English (LTR)</h1>
+      <Autocomplete
+        {...{
+          Component: <TextField />,
+          mode: 'autocomplete',
+          options: ['apple', 'apricot', 'banana', 'bounty'],
+        }}
+        {...args}
+      />
+    </>
+  );
+};
+AutocpmleteInComplitionModeEN.storyName =
+  'Autocpmlete in autocomplete MODE RTL';
+
+export const AutocpmleteInComplitionModeHEB: Story = (args: unknown) => {
+  return (
+    <div style={{ direction: 'rtl' }}>
+      <h1>Autocpmlete with TEXTFIELD in AUTOCOMPLETE mode in Hebrew (RTL)</h1>
+      <Autocomplete
+        {...{
+          Component: <TextField />,
+          mode: 'autocomplete',
+          options: ['אגוזאגוז', 'תפוח', 'אפרסק', 'בננה', 'אגוז'],
+        }}
+        {...args}
+      />
+    </div>
+  );
+};
+AutocpmleteInComplitionModeHEB.storyName =
+  'Autocpmlete in autocomplete MODE LTR';