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

package/dist/{types/components → components}/system/ThemeProvider/lib/helpers.d.ts

@@ -1,6 +1,5 @@
 import { DefaultTheme, StyledProps } from 'styled-components';
 import { StatusType } from '../../HOC';
-import { Palette } from './palette';
 export declare type ComponentVariants = {
     [key: string]: {
         [key: string]: any;
@@ -29,4 +28,4 @@ export declare const getFontFaces: ({ theme }: {
  * Retrive the correct palette value based on the provided status type.
  * Falls back to optionally provided palette key, then to 'inherit'.
  */
-export declare const getStatusColor: (theme: DefaultTheme, status?: StatusType, defaultKey?: keyof typeof Palette) => string;
+export declare const getStatusColor: (theme: DefaultTheme, status?: StatusType | undefined, defaultKey?: "background1" | "background2" | "background3" | "background4" | "background5" | "background6" | "brandPrimary" | "brandSecondary" | "brandPrimaryActive" | "brandPrimaryHover" | "brandPrimaryFocused" | "brandPrimaryText" | "brandSecondaryActive" | "brandSecondaryHover" | "brandSecondaryFocused" | "brandSecondaryText" | "inputBackground" | "inputColor" | "inputPlaceholder" | "inputDisabled" | "inputFocused" | "statusSuccess" | "statusWarning" | "statusCritical" | "statusActive" | "textDefault" | "textHelp" | "textInactive" | undefined) => string;

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

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStatusColor = exports.getFontFaces = exports.getRootCssVars = exports.getVariantCSS = void 0;
+const constants_1 = require("./constants");
+const palette_1 = require("./palette");
+/**
+ * Get the CSS associated with a variant key
+ * @param variants  -- Component variants data structure
+ * @param variantProp -- The key (enum) for looking up the variant value
+ * @todo This needs to be typed better
+ */
+const getVariantCSS = (variants, variantProp) => (props) => {
+    return variants[variantProp][props[variantProp]];
+};
+exports.getVariantCSS = getVariantCSS;
+/**
+ * Build :root { --var } key value pairs from Palette
+ */
+const getRootCssVars = ({ theme }) => Object.keys(palette_1.Palette)
+    .map((key) => `--openfin-ui-${key}: ${theme.palette[key]};`)
+    .join('\n');
+exports.getRootCssVars = getRootCssVars;
+/**
+ * Lazy Load font-faces based on Theme Configuration
+ */
+const getFontFaces = ({ theme }) => {
+    switch (theme._config.fontLoading) {
+        case 'import':
+            return theme._config.fontCss;
+        case 'cdn':
+        default:
+            return constants_1.cdnFontFaceCss;
+    }
+};
+exports.getFontFaces = getFontFaces;
+/**
+ * Retrive the correct palette value based on the provided status type.
+ * Falls back to optionally provided palette key, then to 'inherit'.
+ */
+const getStatusColor = (theme, status, defaultKey) => {
+    switch (status) {
+        case 'active':
+            return theme.palette.statusActive;
+        case 'critical':
+            return theme.palette.statusCritical;
+        case 'warning':
+            return theme.palette.statusWarning;
+        case 'success':
+            return theme.palette.statusSuccess;
+        default:
+            return defaultKey ? theme.palette[defaultKey] : 'inherit';
+    }
+};
+exports.getStatusColor = getStatusColor;

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Mixins = void 0;
+const constants_1 = require("./constants");
+const styled_components_1 = require("styled-components");
+/**
+ * Mixins
+ */
+/**
+ * Prevent User Selection
+ */
+const noSelect = styled_components_1.css `
+  user-select: none;
+`;
+/**
+ * Prevent Text from Wrapping and truncate with ellipsis
+ * when it overflows the parent container
+ */
+const textOverflow = styled_components_1.css `
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+/**
+ * Scrollbar (4px)
+ * @link https://www.figma.com/file/0Y3pKZj0tJWuleF12h5Sua/Spatial---Components?node-id=2048%3A7477
+ */
+const scrollbar = styled_components_1.css `
+  &::-webkit-scrollbar {
+    width: var(--scrollbarSize, ${constants_1.UnitPx.xsmall});
+    height: var(--scrollbarSize, ${constants_1.UnitPx.xsmall});
+  }
+
+  &::-webkit-scrollbar-track {
+    background: ${constants_1.Color.neutralGray};
+    border-radius: var(--scrollbarSize, ${constants_1.UnitPx.xsmall});
+    opacity: 0.8;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${constants_1.Color.white};
+    width: var(--scrollbarSize, ${constants_1.UnitPx.xsmall});
+    height: var(--scrollbarSize, ${constants_1.UnitPx.xsmall});
+    border-radius: var(--scrollbarSize, ${constants_1.UnitPx.xsmall});
+    opacity: 0.8;
+  }
+`;
+/**
+ * Scrollbar Tiny (2px)
+ * Extends the regular scrollbar
+ */
+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).
+ */
+exports.Mixins = {
+    noSelect,
+    textOverflow,
+    scrollbar: {
+        [constants_1.Size.base]: scrollbar,
+        [constants_1.Size.small]: scrollbarSmall,
+    },
+    appRegion: {
+        drag: appRegionDrag,
+        noDrag: appRegionNoDrag,
+    },
+};

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Palette = void 0;
+/**
+ * Theme Palette -- Canonical list of names we use to reference color values within a theme
+ */
+exports.Palette = {
+    background1: 'background1',
+    background2: 'background2',
+    background3: 'background3',
+    background4: 'background4',
+    background5: 'background5',
+    background6: 'background6',
+    brandPrimary: 'brandPrimary',
+    brandSecondary: 'brandSecondary',
+    // --BEGIN These are calculated during theme creation. See ./createTheme.ts
+    brandPrimaryActive: 'brandPrimaryActive',
+    brandPrimaryHover: 'brandPrimaryHover',
+    brandPrimaryFocused: 'brandPrimaryFocused',
+    brandPrimaryText: 'brandPrimaryText',
+    brandSecondaryActive: 'brandSecondaryActive',
+    brandSecondaryHover: 'brandSecondaryHover',
+    brandSecondaryFocused: 'brandSecondaryFocused',
+    brandSecondaryText: 'brandSecondaryText',
+    // --END
+    inputBackground: 'inputBackground',
+    inputColor: 'inputColor',
+    inputPlaceholder: 'inputPlaceholder',
+    inputDisabled: 'inputDisabled',
+    inputFocused: 'inputFocused',
+    statusSuccess: 'statusSuccess',
+    statusWarning: 'statusWarning',
+    statusCritical: 'statusCritical',
+    statusActive: 'statusActive',
+    textDefault: 'textDefault',
+    textHelp: 'textHelp',
+    textInactive: 'textInactive',
+};

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,13 @@
+"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 __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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./openfin"), exports);

package/dist/components/system/ThemeProvider/theme/openfin.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenFinDarkTheme = exports.OpenFinLightTheme = void 0;
+const palette_1 = require("../lib/palette");
+const constants_1 = require("../lib/constants");
+const createTheme_1 = require("../lib/createTheme");
+const sharedPalette = {
+    // Brand
+    [palette_1.Palette.brandPrimary]: constants_1.Color.openFin,
+    // Status
+    [palette_1.Palette.statusSuccess]: constants_1.Color.functional1,
+    [palette_1.Palette.statusWarning]: constants_1.Color.functional10,
+    [palette_1.Palette.statusCritical]: constants_1.Color.functional7,
+    [palette_1.Palette.statusActive]: constants_1.Color.functional3,
+};
+/**
+ * Light Theme
+ */
+exports.OpenFinLightTheme = createTheme_1.createTheme(Object.assign(Object.assign({}, sharedPalette), { 
+    // Background levels
+    [palette_1.Palette.background1]: constants_1.Color.white, [palette_1.Palette.background2]: constants_1.Color.lightGray1, [palette_1.Palette.background3]: constants_1.Color.lightGray2, [palette_1.Palette.background4]: constants_1.Color.lightGray3, [palette_1.Palette.background5]: constants_1.Color.lightGray4, [palette_1.Palette.background6]: constants_1.Color.lightGray5, 
+    // Brand
+    [palette_1.Palette.brandSecondary]: constants_1.Color.darkGray5, 
+    // Inputs
+    [palette_1.Palette.inputBackground]: constants_1.Color.lightGray3, [palette_1.Palette.inputColor]: constants_1.Color.darkGray5, [palette_1.Palette.inputPlaceholder]: constants_1.Color.darkGray2, [palette_1.Palette.inputDisabled]: constants_1.Color.neutralGray, [palette_1.Palette.inputFocused]: constants_1.Color.lightGray5, 
+    // Text
+    [palette_1.Palette.textDefault]: constants_1.Color.darkGray5, [palette_1.Palette.textHelp]: constants_1.Color.darkGray3, [palette_1.Palette.textInactive]: constants_1.Color.neutralGray }));
+/**
+ * Dark Theme
+ */
+exports.OpenFinDarkTheme = createTheme_1.createTheme(Object.assign(Object.assign({}, sharedPalette), { 
+    // Background levels
+    [palette_1.Palette.background1]: constants_1.Color.darkGray6, [palette_1.Palette.background2]: constants_1.Color.darkGray5, [palette_1.Palette.background3]: constants_1.Color.darkGray4, [palette_1.Palette.background4]: constants_1.Color.darkGray3, [palette_1.Palette.background5]: constants_1.Color.darkGray2, [palette_1.Palette.background6]: constants_1.Color.darkGray1, 
+    // Brand
+    [palette_1.Palette.brandSecondary]: constants_1.Color.darkGray2, 
+    // Inputs
+    [palette_1.Palette.inputBackground]: constants_1.Color.darkGray1, [palette_1.Palette.inputColor]: constants_1.Color.white, [palette_1.Palette.inputPlaceholder]: constants_1.Color.lightGray5, [palette_1.Palette.inputDisabled]: constants_1.Color.neutralGray, [palette_1.Palette.inputFocused]: constants_1.Color.lightGray5, 
+    // Text
+    [palette_1.Palette.textDefault]: constants_1.Color.white, [palette_1.Palette.textHelp]: constants_1.Color.lightGray5, [palette_1.Palette.textInactive]: constants_1.Color.neutralGray }));

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = require("styled-components");
+const useTheme_1 = require("../../../hooks/useTheme");
+const GlobalStyles_1 = require("../GlobalStyles");
+/**
+ * ## OpenFin ThemeProvider
+ * - Extends StyledComponents ThemeProvider
+ * - Applies built-in OpenFin themes automatically using System Preference for Color Scheme
+ * - Includes global stylesheet with typography, reset, and global css vars
+ * - Accepts Light / Dark Mode scheme override
+ * - Accepts Light / Dark Mode palette override
+ */
+const ThemeProvider = ({ children, themes, scheme, config, includeGlobalStyles = true, }) => {
+    const currentTheme = useTheme_1.useTheme({ themes, scheme, config });
+    return (jsx_runtime_1.jsx(styled_components_1.ThemeProvider, Object.assign({ theme: currentTheme }, { children: jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [includeGlobalStyles && jsx_runtime_1.jsx(GlobalStyles_1.GlobalStyles, {}, void 0), children] }, void 0) }), void 0));
+};
+exports.ThemeProvider = ThemeProvider;

package/dist/components/templates/ContactCard/contactCard.js

@@ -0,0 +1,114 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContactCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+// import { getColorForName, getInitials } from '../utils/name';
+const DefinitionList_1 = require("../../layout/DefinitionList");
+const name_1 = require("../utils/name");
+const ContactCard = (_a) => {
+    var { name, title, photoUrl, useInitials = false, details } = _a, rest = __rest(_a, ["name", "title", "photoUrl", "useInitials", "details"]);
+    const renderProfileImage = photoUrl || useInitials;
+    const initials = react_1.default.useMemo(() => name_1.getInitials(name), [name]);
+    const color = react_1.default.useMemo(() => name_1.getColorForName(name), [name]);
+    return (jsx_runtime_1.jsxs(Container, Object.assign({}, rest, { children: [jsx_runtime_1.jsxs(Header, { children: [renderProfileImage && (jsx_runtime_1.jsx(ProfileImage, Object.assign({ iconColor: color }, { children: photoUrl ? jsx_runtime_1.jsx(Photo, { alt: title, src: photoUrl }, void 0) : jsx_runtime_1.jsx(LetterIcon, { children: initials }, void 0) }), void 0)),
+                    jsx_runtime_1.jsxs(Identity, { children: [jsx_runtime_1.jsxs(Name, { children: [" ", name, " "] }, void 0),
+                            title && jsx_runtime_1.jsxs(Title, { children: [" ", title, " "] }, void 0)] }, void 0)] }, void 0),
+            jsx_runtime_1.jsx(DetailsPane, { children: details.map((list, index) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [jsx_runtime_1.jsx(DetailList, { definitions: list }, void 0),
+                        index < details.length - 1 && jsx_runtime_1.jsx(HorizontalLine, {}, void 0)] }, `${name}-details-${index}`))) }, void 0)] }), void 0));
+};
+exports.ContactCard = ContactCard;
+const Container = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: ${({ theme }) => theme.px.base};
+`;
+const Header = styled_components_1.default.div `
+  border-bottom: solid 1px ${({ theme }) => theme.palette.background6};
+  display: flex;
+  margin-bottom: ${({ theme }) => theme.px.base};
+  padding-bottom: ${({ theme }) => theme.px.small};
+`;
+const ProfileImage = styled_components_1.default.div `
+  align-items: center;
+  background-color: ${(attrs) => attrs.iconColor};
+  border-radius: ${({ theme }) => theme.px.xsmall};
+  display: flex;
+  height: ${({ theme }) => theme.iconSize.xxxlarge};
+  justify-content: center;
+  margin-right: ${({ theme }) => theme.px.small};
+  width: ${({ theme }) => theme.iconSize.xxxlarge};
+`;
+const LetterIcon = styled_components_1.default.span `
+  font-size: ${({ theme }) => theme.fontSize.base};
+  text-transform: uppercase;
+`;
+const Photo = styled_components_1.default.img `
+  border-radius: ${({ theme }) => theme.px.xsmall};
+  height: ${({ theme }) => theme.iconSize.xxxlarge};
+  object-fit: cover;
+  user-select: none;
+  width: ${({ theme }) => theme.iconSize.xxxlarge};
+`;
+const Identity = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+`;
+const Name = styled_components_1.default.span `
+  font-size: ${({ theme }) => theme.fontSize.large};
+  line-height: ${({ theme }) => theme.px.large};
+  overflow: hidden;
+  padding-bottom: ${({ theme }) => theme.px.xsmall};
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const Title = styled_components_1.default.span `
+  color: ${({ theme }) => theme.palette.textHelp};
+  line-height: ${({ theme }) => theme.px.base};
+  overflow: hidden;
+  padding-bottom: 2px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const DetailsPane = styled_components_1.default.div `
+  background-color: ${({ theme }) => theme.palette.background5};
+  border-radius: 2px;
+  flex: 1;
+  overflow-y: auto;
+  padding: ${({ theme }) => theme.px.small};
+`;
+const HorizontalLine = styled_components_1.default.div `
+  border-bottom: solid 1px ${({ theme }) => theme.palette.background6};
+  margin-bottom: ${({ theme }) => theme.px.base};
+`;
+const DetailList = styled_components_1.default(DefinitionList_1.DefinitionList) `
+  dt {
+    text-align: left;
+    text-transform: capitalize;
+  }
+
+  dd {
+    overflow: hidden;
+    text-align: right;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;

package/dist/components/templates/ContactCard/index.js

@@ -0,0 +1,13 @@
+"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 __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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./contactCard"), exports);

package/dist/components/templates/utils/name.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getColorForName = exports.getInitials = void 0;
+const getInitials = (name) => {
+    const trimmed = name.trim();
+    const lastWordPos = trimmed.lastIndexOf(' ');
+    if (lastWordPos > -1) {
+        return [trimmed.charAt(0), trimmed.charAt(lastWordPos + 1)].join('');
+    }
+    return trimmed.slice(0, 2);
+};
+exports.getInitials = getInitials;
+const colors = ['#8C61FF', '#00CC88', '#FF8FB8', '#FF976B', '#FD5E60', '#36C3FE', '#5254FB'];
+const getColorForName = (name = '') => {
+    let total = 0;
+    for (let i = 0; i < name.length; i++) {
+        const code = name.codePointAt(i);
+        total += code;
+    }
+    return colors[total % colors.length];
+};
+exports.getColorForName = getColorForName;