@openfin/ui-library 0.1.40-alpha.1657030820 → 0.1.40

package/dist/hooks/useTheme.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTheme = void 0;
+const theme_1 = require("../components/system/ThemeProvider/theme");
+const useColorScheme_1 = require("../hooks/useColorScheme");
+const ThemeProvider_1 = require("../components/system/ThemeProvider");
+const Themes = {
+    [useColorScheme_1.ColorScheme.dark]: theme_1.OpenFinDarkTheme,
+    [useColorScheme_1.ColorScheme.light]: theme_1.OpenFinLightTheme,
+};
+const useTheme = ({ themes, scheme, config, }) => {
+    // 1. Get Current Scheme
+    //    Use user - provided color scheme
+    //    OR fallback to System Preference Color Scheme (if available)
+    //    OR default to "light"
+    const currentScheme = scheme
+        ? useColorScheme_1.ColorScheme[scheme]
+        : useColorScheme_1.useColorScheme({
+            defaultScheme: useColorScheme_1.ColorScheme.light,
+        });
+    // 2. Get Current Theme
+    const currentTheme = themes === undefined
+        ? // Built-in Theme
+            Themes[currentScheme]
+        : // Built-in Theme with User-provided Palette
+            // @todo – This is a potential performance bottleneck
+            ThemeProvider_1.createTheme(Object.assign(Object.assign({}, Themes[currentScheme].palette), themes[currentScheme].palette));
+    // 3. Merge any User-provided Config
+    if (config) {
+        currentTheme._config = Object.assign(Object.assign({}, currentTheme._config), config);
+    }
+    return currentTheme;
+};
+exports.useTheme = useTheme;

package/dist/{types/index.d.ts → index.d.ts}

@@ -7,8 +7,6 @@ export * from './components/input/RawInput';
 export * from './components/input/TextInput';
 export * from './components/input/NumberInput';
 export * from './components/input/Checkbox';
-export * from './components/input/RadioInput';
-export * from './components/input/RadioGroup';
 export * from './components/layout/Box';
 export * from './components/layout/DefinitionList';
 export * from './components/system/GlobalStyles';

package/dist/index.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StoryHelpers = void 0;
+__exportStar(require("./components/controls/Button"), exports);
+__exportStar(require("./components/controls/Toggle"), exports);
+__exportStar(require("./components/elements/Badge"), exports);
+__exportStar(require("./components/elements/Icon"), exports);
+__exportStar(require("./components/elements/Loader"), exports);
+__exportStar(require("./components/input/RawInput"), exports);
+__exportStar(require("./components/input/TextInput"), exports);
+__exportStar(require("./components/input/NumberInput"), exports);
+__exportStar(require("./components/input/Checkbox"), exports);
+__exportStar(require("./components/layout/Box"), exports);
+__exportStar(require("./components/layout/DefinitionList"), exports);
+__exportStar(require("./components/system/GlobalStyles"), exports);
+__exportStar(require("./components/system/ThemeProvider"), exports);
+__exportStar(require("./components/templates/ContactCard"), exports);
+__exportStar(require("./components/typography/Heading"), exports);
+__exportStar(require("./components/typography/Text"), exports);
+__exportStar(require("./hooks/useColorScheme"), exports);
+__exportStar(require("./hooks/useMediaQuery"), exports);
+__exportStar(require("./hooks/usePrevious"), exports);
+exports.StoryHelpers = __importStar(require("./storybookHelpers"));
+__exportStar(require("./lib/whenFin"), exports);

package/dist/{types/lib → lib}/math.d.ts

@@ -6,8 +6,4 @@
  * @returns A number in the range [min, max]
  * @type Number
  */
-export declare const clamp: (num: number, min?: number, max?: number) => number;
-/**
- * Generates a random integer.
- */
-export declare const generateRandomInteger: () => number;
+export declare const clamp: (num: number, min?: number | undefined, max?: number | undefined) => number;

package/dist/lib/math.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clamp = void 0;
+/**
+ * Returns a number whose value is limited to the given range.
+ *
+ * @param {Number} min The lower boundary of the output range
+ * @param {Number} max The upper boundary of the output range
+ * @returns A number in the range [min, max]
+ * @type Number
+ */
+const clamp = (num, min, max) => {
+    if (min && max) {
+        return Math.min(Math.max(num, min), max);
+    }
+    if (max && !min) {
+        return Math.min(num, max);
+    }
+    if (min && !max) {
+        return Math.max(num, min);
+    }
+    return num;
+};
+exports.clamp = clamp;

package/dist/lib/whenFin.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.whenFin = void 0;
+/**
+ * OpenFin/Non-OpenFin context expression switch.
+ * @param finValue Expression invoked/returned when running in the fin environment.
+ * @param noFinValue Expression invoked/returned when not running in the fin environment.
+ */
+function whenFin(finValue, noFinValue) {
+    const expression = typeof fin !== 'undefined' ? finValue : noFinValue;
+    return typeof expression === 'function' ? expression() : expression;
+}
+exports.whenFin = whenFin;

package/dist/lib/whenFin.spec.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const whenFin_1 = require("./whenFin");
+describe('whenFin', () => {
+    afterEach(() => {
+        delete global.fin;
+    });
+    describe('When `fin` is present', () => {
+        beforeEach(() => {
+            global.fin = {};
+        });
+        test('And a function provided the function is invoked', () => {
+            let value = 0;
+            whenFin_1.whenFin(() => {
+                value = 1;
+            });
+            expect(value).toEqual(1);
+        });
+        test('And a value provided the value is returned', () => {
+            const value = whenFin_1.whenFin(1, undefined);
+            expect(value).toEqual(1);
+        });
+    });
+    describe('When `fin` is not present', () => {
+        test('And a function provided the function is invoked', () => {
+            let value = 0;
+            whenFin_1.whenFin(() => {
+                value = 0;
+            }, () => {
+                value = 1;
+            });
+            expect(value).toEqual(1);
+        });
+        test('And a value provided the value is returned', () => {
+            const value = whenFin_1.whenFin(undefined, 1);
+            expect(value).toEqual(1);
+        });
+    });
+});

package/dist/react-app-env.d.js

@@ -0,0 +1,2 @@
+/// <reference types="react-scripts" />
+"use strict";

package/dist/{types/storybookHelpers.d.ts → storybookHelpers.d.ts}

@@ -81,4 +81,4 @@ export declare const SpatialLink: import("styled-components").StyledComponent<"a
     target: "_blank";
     rel: "noreferrer";
     title: "Spatial";
-}, "title" | "target" | "href" | "rel">;
+}, "target" | "href" | "title" | "rel">;

package/dist/storybookHelpers.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpatialLink = exports.JSONData = exports.Pre = exports.PlaceholderContent = exports.StoryGrid = exports.StoryColumn = exports.StoryRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Box_1 = require("./components/layout/Box");
+exports.StoryRow = styled_components_1.default(Box_1.Box).attrs({
+    gap: 'large',
+    alignItems: 'flex-start',
+}) ``;
+exports.StoryColumn = styled_components_1.default(Box_1.Box).attrs({
+    flexDirection: 'column',
+    gap: 'large',
+    alignItems: 'flex-start',
+}) `
+  max-width: 500px;
+`;
+exports.StoryGrid = styled_components_1.default(Box_1.Box).attrs({
+    gap: 'large',
+}) `
+  display: grid;
+`;
+exports.PlaceholderContent = styled_components_1.default(exports.StoryColumn) `
+  background: ${({ theme }) => theme.palette.background2};
+  box-shadow: ${({ theme }) => `0 0 0 1px ${theme.palette.background3}`};
+  padding: ${({ theme }) => theme.px.small};
+  border-radius: ${({ theme }) => theme.radius.small};
+  user-select: none;
+`;
+exports.Pre = styled_components_1.default.pre `
+  margin: ${({ theme }) => theme.px.base} 0;
+  padding: ${({ theme }) => theme.px.base};
+  border-radius: ${({ theme }) => theme.radius.base};
+`;
+const JSONData = ({ data }) => {
+    return jsx_runtime_1.jsx(exports.Pre, { children: JSON.stringify(data, undefined, 2) }, void 0);
+};
+exports.JSONData = JSONData;
+exports.SpatialLink = styled_components_1.default.a.attrs({
+    href: 'https://docs.google.com/spreadsheets/d/10fcDXFdGJ8-cQxJ5X1EPSKP-aMrxgqnM8YIlYmcOPoQ',
+    target: '_blank',
+    rel: 'noreferrer',
+    title: 'Spatial',
+}) `
+  display: block;
+  color: ${({ theme }) => theme.palette.textDefault};
+  text-decoration: none;
+  padding: ${({ theme }) => theme.px.small};
+  border: 1px solid ${({ theme }) => theme.palette.textDefault};
+  border-radius: ${({ theme }) => theme.radius.small};
+  &:after {
+    display: block;
+    content: 'Source: Spatial';
+  }
+`;

package/package.json

@@ -1,95 +1,96 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.1.40-alpha.1657030820",
-  "main": "dist/openfin.ui.js",
-  "types": "dist/types/index.d.ts",
+  "version": "0.1.40",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "repository": "github:openfin/ui-library",
   "homepage": "https://openfin-ui.netlify.app",
   "files": [
     "dist/**/*"
   ],
   "license": "MIT",
-  "scripts": {
-    "start": "yarn storybook",
-    "build": "yarn build:clean && yarn build:src",
-    "build:src": "webpack build --config webpack.config.js --mode production",
-    "build:clean": "rimraf dist",
-    "build:dev": "webpack build --config webpack.config.js --mode development && yalc push",
-    "test": "jest",
-    "lint": "yarn lint:typescript && yarn lint:styles",
-    "lint:typescript": "eslint \"./src/**/*.{ts,tsx}\"",
-    "lint:styles": "stylelint \"./src/**/*.{ts,tsx}\"",
-    "storybook": "yarn storybook:cache-clear && start-storybook -p 6006 -s public",
-    "storybook:build": "build-storybook -s public",
-    "storybook:cache-clear": "rimraf ./node_modules/.cache/storybook"
-  },
-  "peerDependencies": {
-    "styled-components": "=>4.4.1 <6.0.0"
-  },
-  "resolutions": {
-    "@types/react": "^17",
-    "@types/react-dom": "^17",
-    "react": "^17",
-    "react-dom": "^17",
-    "react-is": "^17",
-    "styled-components": "^5"
-  },
   "dependencies": {
     "@modulz/radix-icons": "^4.0.0",
     "tinycolor2": "^1.4.2"
   },
+  "peerDependencies": {
+    "styled-components": "4.4.1"
+  },
   "devDependencies": {
-    "@babel/core": "^7.18.6",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-interactions": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.9",
-    "@storybook/node-logger": "^6.5.9",
-    "@storybook/react": "^6.5.9",
-    "@testing-library/dom": "^8.14.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/user-event": "^14.2.1",
-    "@types/jest": "^28.1.3",
-    "@types/lodash.defaultsdeep": "^4.6.7",
-    "@types/node": "^18.0.0",
+    "@babel/cli": "^7.15.4",
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.6",
+    "@babel/preset-typescript": "^7.15.0",
+    "@storybook/addon-actions": "^6.3.8",
+    "@storybook/addon-essentials": "^6.3.8",
+    "@storybook/addon-links": "^6.3.8",
+    "@storybook/node-logger": "^6.3.8",
+    "@storybook/preset-create-react-app": "^3.2.0",
+    "@storybook/react": "^6.3.8",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.3",
+    "@testing-library/user-event": "^12.6.2",
+    "@tsconfig/recommended": "^1.0.1",
+    "@types/faker": "^5.1.7",
+    "@types/jest": "^26.0.20",
+    "@types/lodash.defaultsdeep": "^4.6.6",
+    "@types/node": "^14.14.34",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
-    "@types/styled-components": "^5.1.25",
-    "@types/tinycolor2": "^1.4.3",
-    "@typescript-eslint/eslint-plugin": "^5.29.0",
-    "@typescript-eslint/parser": "^5.29.0",
-    "babel-loader": "^8.2.5",
-    "copy-webpack-plugin": "^11.0.0",
+    "@types/styled-components": "^5.1.9",
+    "@types/tinycolor2": "^1.4.2",
+    "@typescript-eslint/eslint-plugin": "^4.17.0",
+    "@typescript-eslint/parser": "^4.17.0",
+    "babel-plugin-styled-components": "^1.13.2",
     "cross-env": "^7.0.3",
-    "eslint": "^8.18.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^26.5.3",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.30.0",
-    "jest": "^28.1.2",
-    "jest-environment-jsdom": "^28.1.2",
-    "prettier": "^2.7.1",
+    "eslint": "^7.21.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-jest": "^24.2.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
+    "faker": "^5.4.0",
+    "husky": "^6.0.0",
+    "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-is": "^17.0.2",
-    "react-refresh": "^0.14.0",
-    "require-from-string": "^2.0.2",
+    "react-scripts": "4.0.1",
     "rimraf": "^3.0.2",
     "storybook-addon-performance": "^0.16.1",
-    "styled-components": "^5.3.5",
-    "stylelint": "^14.9.1",
-    "stylelint-config-recommended": "^8.0.0",
+    "styled-components": "4.4.1",
+    "stylelint": "^13.12.0",
+    "stylelint-config-recommended": "^4.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
-    "ts-jest": "^28.0.5",
-    "ts-loader": "^9.3.1",
-    "typescript": "^4.7.4",
-    "webpack": "^5.73.0",
-    "webpack-cli": "^4.10.0"
+    "tsconfig-paths-webpack-plugin": "^3.3.0",
+    "typescript": "^4.2.4",
+    "web-vitals": "^1.1.0"
+  },
+  "scripts": {
+    "start": "yarn storybook",
+    "build": "yarn build:clean && yarn build:bundle",
+    "build:bundle": "yarn build:scripts && yarn build:types && yarn build:copy-assets",
+    "build:clean": "rimraf dist",
+    "build:copy-assets": "babel src/assets/ -d dist/assets --ignore \"src/**/*.ts\" --copy-files --no-copy-ignored --extensions .ts",
+    "build:dev": "yarn build && yalc push",
+    "build:scripts": "cross-env NODE_ENV=production babel src -d dist --extensions '.ts,.tsx'",
+    "build:types": "tsc -p tsconfig.bundle.json",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "lint": "yarn lint:typescript && yarn lint:styles",
+    "lint:typescript": "eslint \"./src/**/*.{ts,tsx}\"",
+    "lint:styles": "stylelint \"./src/**/*.{ts,tsx}\"",
+    "storybook": "yarn storybook:cache-clear && start-storybook -p 6006 -s public",
+    "storybook:build": "build-storybook -s public",
+    "storybook:cache-clear": "rimraf ./node_modules/.cache/storybook",
+    "git:pre-push": "yarn lint && yarn test --watchAll=false && yarn build",
+    "prepare": "husky install"
+  },
+  "env": {
+    "jest/globals": true
+  },
+  "resolutions": {
+    "babel-loader": "8.1.0"
   },
   "browserslist": {
     "production": [
@@ -105,30 +106,16 @@
   },
   "eslintConfig": {
     "extends": [
-      "plugin:@typescript-eslint/recommended",
-      "prettier",
       "eslint:recommended",
       "plugin:react/recommended",
       "plugin:jest/recommended"
     ],
     "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-      "project": "./*/tsconfig.json"
-    },
     "plugins": [
       "@typescript-eslint",
       "jest"
     ],
     "rules": {
-      "@typescript-eslint/ban-types": [
-        "error",
-        {
-          "types": {
-            "Function": false
-          },
-          "extendDefaults": true
-        }
-      ],
       "dot-notation": "error",
       "react/prop-types": "off",
       "react/jsx-uses-react": "off",
@@ -167,15 +154,5 @@
     "trailingComma": "es5",
     "arrowParens": "always",
     "printWidth": 100
-  },
-  "jest": {
-    "preset": "ts-jest",
-    "setupFilesAfterEnv": [
-      "<rootDir>/src/setupTests.ts"
-    ],
-    "testEnvironment": "jsdom",
-    "testMatch": [
-      "<rootDir>/src/**/*.test.tsx"
-    ]
   }
 }