@openfin/ui-library 0.1.8 → 0.1.9-alpha.1618538477

package/README.md

@@ -104,12 +104,11 @@ yarn test
 
 ## How to Contribute
 
-### 1. Enable the pre-push hook
+### 1. Git pre-push hook is handled by Husky automatically
 
 ```sh
-touch .git/hooks/pre-push &&
-    printf "yarn git:pre-push" >> .git/hooks/pre-push &&
-    chmod +x .git/hooks/pre-push
+$ yarn git:pre-push
+# Husky should runs this command automatically before pushing
 ```
 
 ### 2. Open a pull request 😎

package/dist/assets/fonts/index.d.ts

@@ -0,0 +1,6 @@
+export declare const Fonts: {
+    regular: any;
+    italic: any;
+    semiBold: any;
+    semiBoldItalic: any;
+};

package/dist/assets/fonts/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Fonts = void 0;
+const Inter_Regular_woff2_1 = __importDefault(require("./Inter-Regular.woff2"));
+const Inter_Italic_woff2_1 = __importDefault(require("./Inter-Italic.woff2"));
+const Inter_SemiBold_woff2_1 = __importDefault(require("./Inter-SemiBold.woff2"));
+const Inter_SemiBoldItalic_woff2_1 = __importDefault(require("./Inter-SemiBoldItalic.woff2"));
+exports.Fonts = { regular: Inter_Regular_woff2_1.default, italic: Inter_Italic_woff2_1.default, semiBold: Inter_SemiBold_woff2_1.default, semiBoldItalic: Inter_SemiBoldItalic_woff2_1.default };

package/dist/assets/fonts/index.ts

@@ -0,0 +1,6 @@
+import regular from './Inter-Regular.woff2';
+import italic from './Inter-Italic.woff2';
+import semiBold from './Inter-SemiBold.woff2';
+import semiBoldItalic from './Inter-SemiBoldItalic.woff2';
+
+export const Fonts = { regular, italic, semiBold, semiBoldItalic };

package/dist/components/system/ThemeProvider/index.d.ts

@@ -1,5 +1,6 @@
 export * from './lib/constants';
 export * from './lib/createTheme';
+export * from './lib/createFontFaceCss';
 export * from './lib/helpers';
 export * from './lib/interface';
 export * from './lib/mixins';

package/dist/components/system/ThemeProvider/index.js

@@ -12,6 +12,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./lib/constants"), exports);
 __exportStar(require("./lib/createTheme"), exports);
+__exportStar(require("./lib/createFontFaceCss"), exports);
 __exportStar(require("./lib/helpers"), exports);
 __exportStar(require("./lib/interface"), exports);
 __exportStar(require("./lib/mixins"), exports);

package/dist/components/system/ThemeProvider/lib/config.d.ts

@@ -1,7 +1,19 @@
+import { FlattenSimpleInterpolation } from 'styled-components';
 /**
- * Configuration
+ * ThemeProvider Configuration
  */
-export declare type ConfigurationType = {
-    fontLoading: 'cdn' | 'base64';
+export declare type ConfigurationType = CDNFontConfig | ImportFontConfig;
+/**
+ * Custom import and handling for font loading.
+ */
+export declare type ImportFontConfig = {
+    fontLoading: 'import';
+    fontCss: FlattenSimpleInterpolation;
+};
+/**
+ * Use fonts from the Openfin CDN.
+ */
+export declare type CDNFontConfig = {
+    fontLoading: 'cdn';
 };
 export declare const Configuration: ConfigurationType;

package/dist/components/system/ThemeProvider/lib/config.js

@@ -1,7 +1,4 @@
 "use strict";
-/**
- * Configuration
- */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Configuration = void 0;
 exports.Configuration = {

package/dist/components/system/ThemeProvider/lib/constants.d.ts

@@ -517,3 +517,8 @@ export declare const IconSize: {
     readonly xxlarge: "32px";
     readonly xxxlarge: "48px";
 };
+/**
+ * @font-face --
+ * Generate @font-face CSS for CDN Loaded fonts
+ */
+export declare const cdnFontFaceCss: import("styled-components").FlattenSimpleInterpolation;

package/dist/components/system/ThemeProvider/lib/constants.js

@@ -19,9 +19,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconSize = exports.IconSet = exports.Transition = exports.Typography = exports.LineHeight = exports.FontWeight = exports.FontSize = exports.FontStack = exports.Shadow = exports.Radius = exports.UnitPx = exports.Unit = exports.SizeName = exports.Size = exports.Color = void 0;
+exports.cdnFontFaceCss = exports.IconSize = exports.IconSet = exports.Transition = exports.Typography = exports.LineHeight = exports.FontWeight = exports.FontSize = exports.FontStack = exports.Shadow = exports.Radius = exports.UnitPx = exports.Unit = exports.SizeName = exports.Size = exports.Color = void 0;
 const RadixIcons = __importStar(require("@modulz/radix-icons"));
 const OpenFinIcons = __importStar(require("../../../elements/Icon/openfin"));
+const createFontFaceCss_1 = require("./createFontFaceCss");
 /**
  * Color --
  * Color maps names to values.
@@ -253,3 +254,13 @@ exports.IconSize = {
     [exports.Size.xxlarge]: exports.UnitPx.xxxlarge,
     [exports.Size.xxxlarge]: exports.UnitPx.xxxxlarge,
 };
+/**
+ * @font-face --
+ * Generate @font-face CSS for CDN Loaded fonts
+ */
+exports.cdnFontFaceCss = createFontFaceCss_1.createFontFaceCss({
+    regular: '//cdn.openfin.co/fonts/inter/Inter-Regular.woff2?v3.15',
+    italic: '//cdn.openfin.co/fonts/inter/Inter-Italic.woff2?v3.15',
+    semiBold: '//cdn.openfin.co/fonts/inter/Inter-SemiBold.woff2?v3.15',
+    semiBoldItalic: '//cdn.openfin.co/fonts/inter/Inter-SemiBoldItalic.woff2?v3.15',
+});

package/dist/components/system/ThemeProvider/lib/createFontFaceCss.d.ts

@@ -0,0 +1,11 @@
+import { FlattenSimpleInterpolation } from 'styled-components';
+export interface ImportFonts {
+    regular: string;
+    italic: string;
+    semiBold: string;
+    semiBoldItalic: string;
+}
+/**
+ * Import global fonts using your own config.
+ */
+export declare function createFontFaceCss(fonts: ImportFonts): FlattenSimpleInterpolation;

package/dist/components/system/ThemeProvider/lib/createFontFaceCss.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createFontFaceCss = void 0;
+const styled_components_1 = require("styled-components");
+const constants_1 = require("./constants");
+/**
+ * Import global fonts using your own config.
+ */
+function createFontFaceCss(fonts) {
+    return styled_components_1.css `
+    @font-face {
+      font-family: 'Inter';
+      src: url(${fonts.regular}) format('woff2');
+      font-weight: ${constants_1.FontWeight.normal};
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Inter';
+      src: url(${fonts.italic}) format('woff2');
+      font-weight: ${constants_1.FontWeight.normal};
+      font-style: italic;
+      font-display: swap;
+    }
+
+    @font-face {
+      font-family: 'Inter';
+      src: url(${fonts.semiBold}) format('woff2');
+      font-weight: ${constants_1.FontWeight.bold};
+      font-style: normal;
+      font-display: swap;
+    }
+
+    @font-face {
+      font-family: 'Inter';
+      src: url(${fonts.semiBoldItalic}) format('woff2');
+      font-weight: ${constants_1.FontWeight.bold};
+      font-style: italic;
+      font-display: swap;
+    }
+  `;
+}
+exports.createFontFaceCss = createFontFaceCss;

package/dist/components/system/ThemeProvider/lib/fonts.d.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/system/ThemeProvider/lib/helpers.js

@@ -1,11 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStatusColor = exports.getFontFaces = exports.getRootCssVars = exports.getVariantCSS = void 0;
-const font_face_base64_1 = __importDefault(require("./font-face-base64"));
-const font_face_cdn_1 = __importDefault(require("./font-face-cdn"));
+const constants_1 = require("./constants");
 const palette_1 = require("./palette");
 /**
  * Get the CSS associated with a variant key
@@ -29,11 +25,11 @@ exports.getRootCssVars = getRootCssVars;
  */
 const getFontFaces = ({ theme }) => {
     switch (theme._config.fontLoading) {
-        case 'base64':
-            return font_face_base64_1.default;
+        case 'import':
+            return theme._config.fontCss;
         case 'cdn':
         default:
-            return font_face_cdn_1.default;
+            return constants_1.cdnFontFaceCss;
     }
 };
 exports.getFontFaces = getFontFaces;

package/dist/components/system/ThemeProvider/lib/mixins.d.ts

@@ -9,4 +9,8 @@ export declare const Mixins: {
         readonly base: import("styled-components").FlattenSimpleInterpolation;
         readonly small: import("styled-components").FlattenSimpleInterpolation;
     };
+    readonly appRegion: {
+        readonly drag: import("styled-components").FlattenSimpleInterpolation;
+        readonly noDrag: import("styled-components").FlattenSimpleInterpolation;
+    };
 };

package/dist/components/system/ThemeProvider/lib/mixins.js

@@ -53,6 +53,20 @@ const scrollbarSmall = styled_components_1.css `
   --scrollbarSize: 2px;
   ${scrollbar};
 `;
+/**
+ * App Region Drag Behavior
+ * This affects what parts of the DOM can drag the OpenFin / Electron browser window
+ * - Apply 'Drag' to make an area behave like a drag handle
+ * - Apply 'NoDrag' to unset an area inside of a draggable area
+ *
+ * Note: DOM elements behaving as draggable regions typically ignore any other event handlers
+ */
+const appRegionDrag = styled_components_1.css `
+  -webkit-app-region: drag;
+`;
+const appRegionNoDrag = styled_components_1.css `
+  -webkit-app-region: no-drag;
+`;
 /**
  * Mixins --
  * Reusable utility fragments of CSS that make sense to express once (for consistency, maintainability).
@@ -64,4 +78,8 @@ exports.Mixins = {
         [constants_1.Size.base]: scrollbar,
         [constants_1.Size.small]: scrollbarSmall,
     },
+    appRegion: {
+        drag: appRegionDrag,
+        noDrag: appRegionNoDrag,
+    },
 };

package/dist/index.d.ts

@@ -12,4 +12,5 @@ export * from './components/typography/Heading';
 export * from './components/typography/Text';
 export * from './hooks/useColorScheme';
 export * from './hooks/useMediaQuery';
+export * from './assets/fonts';
 export * as StoryHelpers from './storybookHelpers';

package/dist/index.js

@@ -37,4 +37,5 @@ __exportStar(require("./components/typography/Heading"), exports);
 __exportStar(require("./components/typography/Text"), exports);
 __exportStar(require("./hooks/useColorScheme"), exports);
 __exportStar(require("./hooks/useMediaQuery"), exports);
+__exportStar(require("./assets/fonts"), exports);
 exports.StoryHelpers = __importStar(require("./storybookHelpers"));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.1.8",
+  "version": "0.1.9-alpha.1618538477",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "github:openfin/ui-library",
@@ -9,6 +9,10 @@
   "files": [
     "dist/**/*"
   ],
+  "engines": {
+    "node": "14",
+    "yarn": "1"
+  },
   "license": "MIT",
   "dependencies": {
     "@modulz/radix-icons": "^4.0.0",
@@ -22,12 +26,12 @@
     "@babel/core": "^7.13.10",
     "@babel/preset-env": "^7.13.10",
     "@babel/preset-typescript": "^7.13.0",
-    "@storybook/addon-actions": "^6.2.1",
-    "@storybook/addon-essentials": "^6.2.1",
-    "@storybook/addon-links": "^6.2.1",
-    "@storybook/node-logger": "^6.2.1",
+    "@storybook/addon-actions": "^6.2.3",
+    "@storybook/addon-essentials": "^6.2.3",
+    "@storybook/addon-links": "^6.2.3",
+    "@storybook/node-logger": "^6.2.3",
     "@storybook/preset-create-react-app": "^3.1.7",
-    "@storybook/react": "^6.2.1",
+    "@storybook/react": "^6.2.3",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.3",
     "@testing-library/user-event": "^12.6.2",
@@ -43,12 +47,14 @@
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",
     "babel-plugin-styled-components": "^1.12.0",
+    "cross-env": "^7.0.3",
     "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",
@@ -66,21 +72,23 @@
   },
   "scripts": {
     "start": "yarn storybook",
-    "build": "yarn build:clean && yarn build:bundle",
+    "build": "yarn build:clean && yarn build:bundle && yarn build:copy",
     "build:bundle": "yarn build:scripts && yarn build:types",
     "build:clean": "rimraf dist",
+    "build:copy": "node scripts/copy src/assets dist/assets",
     "build:dev": "yarn build && yalc push",
-    "build:scripts": "NODE_ENV=production babel src -d dist --extensions '.ts,.tsx'",
+    "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}'",
+    "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"
+    "git:pre-push": "yarn lint && yarn test --watchAll=false && yarn build",
+    "prepare": "husky install"
   },
   "env": {
     "jest/globals": true

package/dist/components/system/ThemeProvider/lib/font-face-base64.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("styled-components").FlattenSimpleInterpolation;
-export default _default;