diginet-core-ui 1.3.24

package/styles/utils.js

@@ -0,0 +1,10 @@
+/**
+ * parse to pixel
+ *
+ * @param {number} value
+ * @returns {string}
+ */
+export const parseToPixel = vl => {
+  if (!vl) return '1px';
+  return typeof vl === 'string' ? vl : `${vl}px`;
+};

package/theme/index.js

@@ -0,0 +1,5 @@
+export { default as ThemeProvider } from './theme-provider';
+export { default as withTheme } from './with-theme';
+export { useTheme } from './set-theme';
+export { default as makeStyles } from './make-styles';
+export { default as withStyles } from './with-styles';

package/theme/make-styles.js

@@ -0,0 +1,95 @@
+import { css } from '@emotion/core';
+import theme from './settings';
+export const makeStylesEls = [];
+
+const makeStyle = obj => {
+  if (typeof obj === 'function') {
+    obj = obj(theme);
+  }
+
+  return props => {
+    const classes = {};
+    Object.keys(obj).forEach(key => {
+      let CSS = obj[key];
+
+      if (typeof CSS === 'function') {
+        CSS = CSS(props);
+      }
+
+      CSS = css(CSS);
+      const className = `css-${CSS.name}`;
+      const style = CSS.styles;
+      separateStyle(className, style);
+      classes[key] = className;
+    });
+    return classes;
+  };
+};
+
+const separateStyle = (className, style) => {
+  const styles = [];
+
+  while (style.includes('{')) {
+    const start = style.match(/[^;]+\{/).index;
+    const end = getEndBraces(style, style.indexOf('{') + 1);
+    styles.push(style.slice(start, end + 1));
+    style = style.slice(0, start) + style.slice(end + 1);
+  }
+
+  if (style) {
+    if (style.includes('content:;')) {
+      style = style.replace('content:;', 'content:"";');
+    }
+
+    createStyle(className, style);
+  }
+
+  if (styles.length) {
+    styles.forEach(style => {
+      const indexBraces = style.indexOf('{');
+      const childClass = style.slice(0, indexBraces);
+      style = style.slice(indexBraces + 1, style.length - 1);
+      const separateClass = (childClass[0] === '&' ? '' : ' ') + childClass.replace('&', '');
+      let newClass = '';
+
+      if (separateClass.includes('@media')) {
+        newClass = separateClass + '{.' + className;
+        style += '}';
+      } else {
+        newClass = className + separateClass;
+      }
+
+      separateStyle(newClass, style);
+    });
+  }
+};
+
+const createStyle = (className, style) => {
+  const styleEl = document.createElement('style');
+  styleEl.type = 'text/css';
+  styleEl.dataMeta = 'makeStyles';
+  document.head.appendChild(styleEl);
+  styleEl.appendChild(document.createTextNode(`${/@media/.test(className) ? '' : '.'}${className} {${style}}`));
+  makeStylesEls.push(styleEl);
+};
+
+const getEndBraces = (str, start) => {
+  let temp = 0;
+
+  for (let i = start; i < str.length; i++) {
+    if (str[i] === '}') {
+      if (!temp) {
+        temp = i;
+        break;
+      } else {
+        temp--;
+      }
+    } else if (str[i] === '{') {
+      temp++;
+    }
+  }
+
+  return temp;
+};
+
+export default makeStyle;

package/theme/set-theme.js

@@ -0,0 +1,39 @@
+import Settings from './settings';
+
+const saveNewTheme = (newTheme, ingredient) => {
+  if (typeof newTheme === 'object' && typeof ingredient === 'object') {
+    const newThemeArr = Object.keys(newTheme); // const ingredientArr = Object.keys(ingredient);
+
+    newThemeArr.forEach(key => {
+      if (newTheme[key] && ingredient[key]) {
+        if (typeof newTheme[key] === 'object' && typeof ingredient[key] === 'object') {
+          saveNewTheme(newTheme[key], ingredient[key]);
+        } else if (typeof newTheme[key] === 'string' && typeof ingredient[key] === 'string') {
+          ingredient[key] = newTheme[key];
+        }
+      } else {
+        ingredient[key] = newTheme[key];
+      }
+    });
+  }
+};
+/**
+ * set theme setting as global
+ * @param {Object} theme
+ */
+
+
+export const setTheme = theme => {
+  if (theme && typeof theme === 'object') {
+    const themeKeys = Object.keys(theme);
+    themeKeys.forEach(key => {
+      const newTheme = theme[key];
+      const ingredient = Settings[key];
+
+      if (newTheme && ingredient) {
+        saveNewTheme(newTheme, ingredient);
+      }
+    });
+  }
+};
+export const useTheme = () => Settings;

package/theme/settings.js

@@ -0,0 +1,230 @@
+import { fontSize, fontFamily, fontFamilyMedium, fontFamilyBold } from '../styles/typography';
+import * as colors from '../styles/colors';
+const settings = {
+  border: {
+    radius: '4px',
+    style: 'solid'
+  },
+  boxShadows: {
+    large: '0 4px 4px 0 rgba(0, 0, 0, 0.25)',
+    small: '0 2px 2px 0 rgba(0, 0, 0, 0.25)'
+  },
+  colors: {
+    bgDisabled: colors.dark12,
+    bgProgress: colors.brand12,
+    border: colors.dark6,
+    borderFocus: colors.info5,
+    borderHover: colors.brand,
+    borderTab: colors.dark2,
+    danger: colors.danger5,
+    default: colors.dark,
+    disabled: colors.dark4,
+    divider: colors.dark4,
+    focus: colors.blue4,
+    // 'rgba(21, 26, 48, 0.1)',
+    hover: colors.blue13,
+    info: colors.info5,
+    input: colors.dark,
+    inputHover: colors.brand,
+    label: colors.dark8,
+    link: colors.info5,
+    linkHover: colors.info6,
+    placeholder: colors.dark6,
+    pressing: colors.blue6,
+    primary: colors.brand,
+    scrollbar: colors.brand13,
+    scrollbarHover: colors.brand15,
+    secondary: colors.dark6,
+    success: colors.success5,
+    text: colors.dark,
+    warning: colors.warning5,
+    white: colors.white,
+    button: {
+      bgFilledHover: {
+        danger: colors.danger6,
+        info: colors.info6,
+        primary: '#0C1550',
+        success: colors.success6,
+        warning: colors.warning6
+      },
+      bgHover: {
+        danger: colors.danger1,
+        info: colors.info1,
+        primary: colors.blue13,
+        success: colors.success1,
+        warning: colors.warning1
+      },
+      borderHover: {
+        danger: colors.danger6,
+        info: colors.info6,
+        primary: '#0C1550',
+        success: colors.success6,
+        warning: colors.warning6
+      },
+      colorHover: {
+        danger: colors.danger6,
+        info: colors.info6,
+        primary: '#0C1550',
+        success: colors.success6,
+        warning: colors.warning6
+      }
+    },
+    calendar: {
+      table: {
+        bgDefault: colors.white
+      },
+      day: {
+        default: colors.dark,
+        saturday: colors.info8,
+        sunday: colors.danger8
+      }
+    },
+    accordion: {
+      labelColor: colors.info5,
+      background: colors.brand12
+    }
+  },
+  typography: {
+    fontFamily,
+    fontFamilyMedium,
+    fontFamilyBold,
+    fontSize,
+    title1: {
+      fontStyle: 'normal',
+      fontWeight: 'bold',
+      fontSize: '28px',
+      lineHeight: '32px'
+    },
+    title2: {
+      fontStyle: 'normal',
+      fontWeight: 'bold',
+      fontSize: '26px',
+      lineHeight: '30px'
+    },
+    title3: {
+      fontStyle: 'normal',
+      fontWeight: 'bold',
+      fontSize: '24px',
+      lineHeight: '28px'
+    },
+    title4: {
+      fontStyle: 'normal',
+      fontWeight: 'bold',
+      fontSize: '22px',
+      lineHeight: '26px'
+    },
+    h1: {
+      fontStyle: 'normal',
+      fontWeight: 'bold',
+      fontSize: '20px',
+      lineHeight: '24px'
+    },
+    h2: {
+      fontStyle: 'normal',
+      fontWeight: 'bold',
+      fontSize: '18px',
+      lineHeight: '22px'
+    },
+    h3: {
+      fontStyle: 'normal',
+      fontWeight: 'bold',
+      fontSize: '16px',
+      lineHeight: '20px'
+    },
+    h4: {
+      fontStyle: 'normal',
+      fontWeight: 'bold',
+      fontSize: '14px',
+      lineHeight: '18px'
+    },
+    h5: {
+      fontStyle: 'normal',
+      fontWeight: 'bold',
+      fontSize: '12px',
+      lineHeight: '16px'
+    },
+    h6: {
+      fontStyle: 'normal',
+      fontWeight: 500,
+      fontSize: '12px',
+      lineHeight: '16px'
+    },
+    p1: {
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: '16px',
+      lineHeight: '20px'
+    },
+    p2: {
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: '14px',
+      lineHeight: '18px'
+    },
+    p3: {
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: '12px',
+      lineHeight: '16px'
+    },
+    button: {
+      textTransform: 'uppercase'
+    },
+    label: {
+      fontSize: 12,
+      fontFamily,
+      fontWeight: 'bold'
+    },
+    helperText: {
+      fontSize: 12,
+      fontFamily,
+      fontWeight: 'normal'
+    }
+  },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 960,
+      lg: 1280,
+      xl: 1920
+    },
+    down: value => getMedia(value, 'max'),
+    up: value => getMedia(value, 'min'),
+    only: value => getMedia(value, 'min', value),
+    between: (start, end) => getMedia(start, 'min', end)
+  }
+};
+
+const getMedia = (value, type, value2 = '') => {
+  const values = settings.breakpoints.values;
+  let px1,
+      px2 = '';
+
+  if (typeof value === 'number') {
+    px1 = value + 'px';
+  } else if (/^xs|sm|md|lg|xl$/) {
+    px1 = values[value] - (type === 'max' ? 0.05 : 0) + 'px';
+  }
+
+  if (value2) {
+    const keys = Object.keys(values);
+
+    if (value2 === value) {
+      // only
+      value2 = values[keys[keys.indexOf(value) + 1]] - 0.05 + 'px';
+    } else {
+      if (typeof value2 === 'number') {
+        value2 += 'px';
+      } else if (/^xs|sm|md|lg|xl$/) {
+        value2 = values[keys[keys.indexOf(value2) + 1]] - 0.05 + 'px';
+      }
+    }
+
+    px2 = ` and (max-width: ${value2})`;
+  }
+
+  return `@media (${type}-width: ${px1}${px2})`;
+};
+
+export default settings;

package/theme/theme-provider.js

@@ -0,0 +1,68 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useEffect } from 'react';
+import { jsx, css } from '@emotion/core';
+import { setTheme } from './set-theme';
+import { makeStylesEls } from './make-styles';
+import { fontFamilyLink, fontFamilyMediumLink, fontFamilyBoldLink } from '../styles/typography';
+import { string, object, node } from 'prop-types';
+const ThemeProviderRoot = css`
+    @font-face {
+        font-family: 'SF Pro Display Bold';
+        src: url('${fontFamilyBoldLink}') format('opentype');
+    }
+    @font-face {
+        font-family: 'SF Pro Display Medium';
+        src: url('${fontFamilyMediumLink}') format('opentype');
+    }
+    @font-face {
+        font-family: 'SF Pro Display Regular';
+        src: url('${fontFamilyLink}') format('opentype');
+    }
+    @font-face {
+        font-family: 'SF Pro Display';
+        font-weight: 400;
+        src: url('${fontFamilyLink}') format('opentype');
+    }
+    @font-face {
+        font-family: 'SF Pro Display';
+        font-weight: 500;
+        src: url('${fontFamilyMediumLink}') format('opentype');
+    }
+    @font-face {
+        font-family: 'SF Pro Display';
+        font-weight: 700;
+        src: url('${fontFamilyBoldLink}') format('opentype');
+    }
+`;
+const ThemeProvider = /*#__PURE__*/memo(({
+  theme,
+  className,
+  children
+}) => {
+  useEffect(() => {
+    return () => {
+      if (makeStylesEls.length) {
+        makeStylesEls.forEach(el => el && el.remove && el.remove());
+      }
+    };
+  }, []);
+  useEffect(() => {
+    setTheme(theme);
+  }, [theme]);
+  return jsx("div", {
+    css: ThemeProviderRoot,
+    className: ['DGN-UI-Theme', className].join(' ').trim()
+  }, children);
+});
+ThemeProvider.defaultProps = {
+  theme: {},
+  className: ''
+};
+ThemeProvider.propTypes = {
+  theme: object,
+  className: string,
+  children: node
+};
+export default ThemeProvider;