diginet-core-ui 1.4.39 → 1.4.40

package/src/theme/stories/breakpoints.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Description } from '@storybook/addon-docs/blocks';
+import breakpoints from '../docs/breakpoints.md';
+
+export default {
+    title: 'Theme/Breakpoints',
+    parameters: {
+        previewTabs: {
+            canvas: {
+                hidden: true,
+            },
+        },
+        viewMode: 'docs',
+        docs: {
+            page: () => <Description markdown={breakpoints} />,
+        },
+    },
+};
+
+export const Breakpoints = () => null;

package/src/theme/stories/colors.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Description } from '@storybook/addon-docs/blocks';
+import colors from '../docs/colors.md';
+
+export default {
+    title: 'Theme/Colors',
+    parameters: {
+        previewTabs: {
+            canvas: {
+                hidden: true,
+            },
+        },
+        viewMode: 'docs',
+        docs: {
+            page: () => <Description markdown={colors} />,
+        },
+    },
+};
+
+export const Colors = () => null;

package/src/theme/stories/components.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Description } from '@storybook/addon-docs/blocks';
+import components from '../docs/components.md';
+
+export default {
+    title: 'Theme/Components',
+    parameters: {
+        previewTabs: {
+            canvas: {
+                hidden: true,
+            },
+        },
+        viewMode: 'docs',
+        docs: {
+            page: () => <Description markdown={components} />,
+        },
+    },
+};
+
+export const Components = () => null;

package/src/theme/stories/darkMode.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Description } from '@storybook/addon-docs/blocks';
+import darkMode from '../docs/darkMode.md';
+
+export default {
+    title: 'Theme/Dark Mode',
+    parameters: {
+        previewTabs: {
+            canvas: {
+                hidden: true,
+            },
+        },
+        viewMode: 'docs',
+        docs: {
+            page: () => <Description markdown={darkMode} />,
+        },
+    },
+};
+
+export const DarkMode = () => null;

package/src/theme/stories/spacing.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Description } from '@storybook/addon-docs/blocks';
+import spacing from '../docs/spacing.md';
+
+export default {
+    title: 'Theme/Spacing',
+    parameters: {
+        previewTabs: {
+            canvas: {
+                hidden: true,
+            },
+        },
+        viewMode: 'docs',
+        docs: {
+            page: () => <Description markdown={spacing} />,
+        },
+    },
+};
+
+export const Spacing = () => null;

package/src/theme/stories/theming.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Description } from '@storybook/addon-docs/blocks';
+import theming from '../docs/theming.md';
+
+export default {
+    title: 'Theme/Theming',
+    parameters: {
+        previewTabs: {
+            canvas: {
+                hidden: true,
+            },
+        },
+        viewMode: 'docs',
+        docs: {
+            page: () => <Description markdown={theming} />,
+        },
+    },
+};
+
+export const Theming = () => null;

package/src/theme/stories/zIndex.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Description } from '@storybook/addon-docs/blocks';
+import zIndexDoc from '../docs/zIndex.md';
+
+export default {
+    title: 'Theme/Layers',
+    parameters: {
+        previewTabs: {
+            canvas: {
+                hidden: true,
+            },
+        },
+        viewMode: 'docs',
+        docs: {
+            page: () => <Description markdown={zIndexDoc} />,
+        },
+    },
+};
+
+export const Layers = () => null;

package/src/theme/theme-provider.js

@@ -0,0 +1,101 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { ThemeProvider as ThemeProviderEmotion } from '@emotion/react';
+import { node, object, string } from 'prop-types';
+import { useMemo } from 'react';
+import deepmerge from 'utils/object/deepmerge';
+import { color } from '../styles/colors';
+import { font } from '../styles/font';
+import { useTheme } from 'theme';
+import createTheme from './createTheme';
+const {
+    fontFamily,
+    fontFamilyBold,
+    fontFamilyMedium,
+    fontFamilyLink,
+    fontFamilyBoldLink,
+    fontFamilyMediumLink,
+    fontFamilySecurity,
+    fontFamilySecurityCompatEOTLink,
+    fontFamilySecurityCompatWOFF2Link,
+    fontFamilySecurityCompatTTFLink,
+    fontFamilySecurityWOFF2Link,
+} = font;
+
+const ThemeProviderRoot = css`
+    @font-face {
+        font-family: ${fontFamilyBold};
+        src: url('${fontFamilyBoldLink}') format('opentype');
+    }
+    @font-face {
+        font-family: ${fontFamilyMedium};
+        src: url('${fontFamilyMediumLink}') format('opentype');
+    }
+    @font-face {
+        font-family: ${fontFamily};
+        src: url('${fontFamilyLink}') format('opentype');
+    }
+    @font-face {
+        font-family: ${fontFamily};
+        font-weight: 400;
+        src: url('${fontFamilyLink}') format('opentype');
+    }
+    @font-face {
+        font-family: ${fontFamily};
+        font-weight: 500;
+        src: url('${fontFamilyMediumLink}') format('opentype');
+    }
+    @font-face {
+        font-family: ${fontFamily};
+        font-weight: 700;
+        src: url('${fontFamilyBoldLink}') format('opentype');
+    }
+    @font-face {
+        font-family: ${fontFamilySecurity};
+        src: url('${fontFamilySecurityCompatEOTLink}');
+        src: url('${fontFamilySecurityCompatWOFF2Link}') format('woff2'),
+            url('${fontFamilySecurityCompatTTFLink}') format('truetype');
+    }
+    @supports ((content-visibility: visible) or selector(:-moz-is-html)) and (not (-webkit-hyphens: none)) {
+        @font-face {
+            font-family: ${fontFamilySecurity};
+            src: url('${fontFamilySecurityWOFF2Link}') format('woff2'),
+                url('${fontFamilySecurityCompatTTFLink}') format('truetype');
+        }
+    }
+`;
+
+const ThemeProvider = props => {
+    // theme priority: `localTheme` > `outerTheme`
+    const { theme: localThemeInput, className, children } = props;
+    const outerTheme = useTheme();
+    const localTheme = createTheme(localThemeInput);
+
+    const mode = localTheme?.mode || outerTheme?.mode;
+
+    const _outerTheme = { ...outerTheme, colors: { ...outerTheme.colors, ...color?.[`${mode}Mode`] } };
+
+    const theme = useMemo(() => {
+        return deepmerge(_outerTheme, localTheme);
+    }, [_outerTheme, localTheme]);
+
+    return (
+        <ThemeProviderEmotion theme={theme} css={ThemeProviderRoot} className={`DGN-UI-Theme ${className}`}>
+            {children}
+        </ThemeProviderEmotion>
+    );
+};
+
+ThemeProvider.defaultProps = {
+    theme: {},
+    className: '',
+};
+
+ThemeProvider.propTypes = {
+    theme: object,
+    className: string,
+    children: node,
+};
+
+export default ThemeProvider;

package/src/theme/theme.js

@@ -0,0 +1,57 @@
+// import * as colors from '../styles/colors';
+
+// export const theme = {
+//   palette: {
+//     primary: {
+//       light: colors.brand7,
+//       main: colors.dark,
+//     },
+//     success: {
+//       main: colors.success5,
+//     },
+//     warning: {
+//       main: colors.warning5,
+//     },
+//     danger: {
+//       main: colors.danger5,
+//     },
+//     info: {
+//       main: colors.info5,
+//     },
+//   },
+//   typography: {
+//     fontFamily: 'sans-serif',
+//     body1: {
+//       fontSize: 12,
+//     },
+//     body2: {
+//       fontSize: 14,
+//     },
+//     body3: {
+//       fontSize: 16,
+//     },
+//     body4: {
+//       fontSize: 20,
+//     },
+//   },
+//   shape: {
+//     borderRadius: 4,
+//   },
+//   border: {
+//     type1: {
+//       type: 'outline',
+//       size: '1px',
+//       defaultColor: colors.brand,
+//     },
+//     type2: {
+//       type: 'info',
+//       size: '2px',
+//       defaultColor: colors.info5,
+//     },
+//     type3: {
+//       type: 'danger',
+//       size: '1px',
+//       defaultColor: colors.danger5,
+//     },
+//   },
+// };

package/src/theme/use-classes.js

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import { css } from '@emotion/css';
+import { useTheme } from 'theme';
+
+const useClasses = stylesElement => {
+    const theme = useTheme();
+    return useMemo(() => {
+        const rawClasses = typeof stylesElement === 'function' ? stylesElement(theme) : stylesElement;
+        const prepared = {};
+
+        Object.entries(rawClasses).forEach(([key, value = {}]) => {
+            prepared[key] = css(value);
+        });
+
+        return prepared;
+    }, [stylesElement, theme]);
+};
+
+export default useClasses;

package/src/theme/utils/getThemeProps.js

@@ -0,0 +1,11 @@
+import resolveProps from './resolveProps';
+
+export default function getThemeProps(params) {
+    const { theme, name, props } = params;
+
+    if (!theme || !theme.components || !theme.components[name] || !theme.components[name].defaultProps) {
+        return props;
+    }
+
+    return resolveProps(theme.components[name].defaultProps, props);
+}

package/src/theme/utils/resolveProps.js

@@ -0,0 +1,16 @@
+/**
+ * Add keys, values of `defaultProps` that does not exist in `props`
+ * @param {object} defaultProps
+ * @param {object} props
+ * @returns {object} resolved props
+ */
+export default function resolveProps(defaultProps, props) {
+    const output = { ...props };
+    Object.keys(defaultProps).forEach(propName => {
+        if (output[propName] === undefined) {
+            output[propName] = defaultProps[propName];
+        }
+    });
+
+    return output;
+}

package/src/theme/utils/useThemeProps.js

@@ -0,0 +1,8 @@
+import { useTheme } from 'theme';
+import getThemeProps from './getThemeProps';
+
+export default function useThemeProps({ props, name }) {
+    const theme = useTheme();
+    const mergedProps = getThemeProps({ theme, name, props });
+    return mergedProps;
+}

package/src/utils/array/array.js

@@ -0,0 +1,197 @@
+import { isDefined } from '../type';
+import { each } from '../iterator';
+import { orderEach } from '../object/object';
+
+/**
+ *
+ * @param {any} entity
+ * @returns {Array} [entity]
+ */
+export const wrapToArray = entity => (Array.isArray(entity) ? entity : [entity]);
+
+/**
+ *
+ * @param {*} value in object
+ * @param {ArrayLike} object is a array-like object
+ * @returns {Number} index of value, -1 if not found
+ */
+export const inArray = (value, object) => {
+    if (!object) return -1;
+
+    const array = Array.isArray(object) ? object : Array.from(object);
+
+    return array.indexOf(value);
+};
+
+/**
+ *
+ * @param {Array} a
+ * @param {Array} b
+ * @returns {Array} intersection array of a and b
+ */
+export const intersection = (a, b) => {
+    if (!Array.isArray(a) || a.length === 0 || !Array.isArray(b) || b.length === 0) return [];
+
+    const result = [];
+
+    each(a, (_, value) => {
+        const index = inArray(value, b);
+
+        if (index !== -1) {
+            result.push(value);
+        }
+    });
+
+    return result;
+};
+
+/**
+ *
+ * @param {Array} data
+ * @returns {Array} array with unique values
+ */
+export const uniqueValues = data => data.filter((item, position) => data.indexOf(item) === position);
+
+/**
+ *
+ * @param {Array} from
+ * @param {Array} what
+ * @returns {Array} without duplicate
+ */
+export const removeDuplicates = function (from, what) {
+    if (!Array.isArray(from) || from.length === 0) {
+        return [];
+    }
+
+    if (!Array.isArray(what) || what.length === 0) {
+        return from.slice();
+    }
+
+    const result = [];
+
+    each(from, (_, value) => {
+        const index = inArray(value, what);
+
+        if (index === -1) {
+            result.push(value);
+        }
+    });
+
+    return result;
+};
+
+/**
+ *
+ * @param {Array} items
+ * @param {*} indexParameterName
+ * @param {*} currentItem
+ * @param {Function} needIndexCallback
+ * @returns
+ */
+export const normalizeIndexes = function (items, indexParameterName, currentItem, needIndexCallback) {
+    const indexedItems = {};
+    let parameterIndex = 0;
+    /**
+     * useLegacyVisibleIndex will be process in future
+     */
+    const useLegacyVisibleIndex = false;
+
+    each(items, (index, item) => {
+        index = item[indexParameterName];
+        if (index >= 0) {
+            indexedItems[index] = indexedItems[index] || [];
+
+            if (item === currentItem) {
+                indexedItems[index].unshift(item);
+            } else {
+                indexedItems[index].push(item);
+            }
+        } else {
+            item[indexParameterName] = undefined;
+        }
+    });
+
+    if (!useLegacyVisibleIndex) {
+        each(items, function () {
+            if (!isDefined(this[indexParameterName]) && !!needIndexCallback && needIndexCallback(this)) {
+                while (indexedItems[parameterIndex]) {
+                    parameterIndex++;
+                }
+                indexedItems[parameterIndex] = [this];
+                parameterIndex++;
+            }
+        });
+    }
+
+    parameterIndex = 0;
+
+    orderEach(indexedItems, function (index, items) {
+        each(items, function () {
+            if (index >= 0) {
+                this[indexParameterName] = parameterIndex++;
+            }
+        });
+    });
+
+    // if (useLegacyVisibleIndex) {
+    // 	each(items, function () {
+    // 		if (
+    // 			!isDefined(this[indexParameterName]) &&
+    // 			(!needIndexCallback || needIndexCallback(this))
+    // 		) {
+    // 			this[indexParameterName] = parameterIndex++;
+    // 		}
+    // 	});
+    // }
+
+    return parameterIndex;
+};
+
+export const merge = function (array1, array2) {
+    for (let i = 0; i < array2.length; i++) {
+        array1[array1.length] = array2[i];
+    }
+
+    return array1;
+};
+
+export const find = function (array, condition) {
+    for (let i = 0; i < array.length; i++) {
+        if (condition(array[i])) {
+            return array[i];
+        }
+    }
+};
+
+export const groupByFunc = (array, cb) =>
+    array.reduce(
+        (result, item) => ({
+            ...result,
+            [cb(item)]: [...(result[cb(item)] || []), item],
+        }),
+        {}
+    );
+
+export const groupByKey = (array, key) =>
+    array.reduce((result, item) => {
+        (result[item[key]] = result[item[key]] || []).push(item);
+        return result;
+    }, {});
+
+export const isEqual = (currentArray, compareArray) => {
+    if (!currentArray || !compareArray) return false;
+    if (currentArray.length !== compareArray.length) return false;
+
+    for (let i = 0, j = currentArray.length; i < j; i++) {
+        if (currentArray[i] instanceof Array && compareArray[i] instanceof Array) {
+            if (!isEqual(currentArray[i], compareArray[i])) {
+                return false;
+            }
+        } else if (currentArray[i] !== compareArray[i]) {
+            return false;
+        }
+        // in future will update for object case
+        // else if (typeof currentArray[i] === 'object' && typeof compareArray[i] === 'object') {}
+    }
+    return true;
+};

package/src/utils/classNames/index.js

@@ -0,0 +1,28 @@
+const hasOwn = {}.hasOwnProperty;
+const classNames = (...args) => {
+    args = args.flat();
+    let classes = [];
+    for (let i = 0; i < args.length; i++) {
+        let arg = args[i];
+        if (!arg) continue;
+
+        let argType = typeof arg;
+
+        if (argType === 'string' || argType === 'number') {
+            classes.push(arg);
+        } else if (argType === 'object') {
+            if (arg.toString === Object.prototype.toString) {
+                for (let key in arg) {
+                    if (hasOwn.call(arg, key) && arg[key]) {
+                        classes.push(key);
+                    }
+                }
+            } else {
+                classes.push(arg.toString());
+            }
+        }
+    }
+    return classes.join(' ');
+};
+
+export default classNames;

package/src/utils/classNames/index.stories.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { ImportComp } from 'components/others/import/index.stories';
+import { Divider, Typography } from 'components';
+
+export default {
+    title: 'Utils / classNames',
+};
+
+const Template = args => {
+    const { name, description } = args;
+    return (
+        <>
+            <ImportComp components={name} from={'utils'} />
+            <Typography type={'t1'}>{name}</Typography>
+            <br />
+            <Divider />
+            <br />
+            <Typography type={'h3'}>{description}</Typography>
+        </>
+    );
+};
+
+export const ClassNames = Template.bind({});
+ClassNames.args = {
+    name: 'classNames',
+    description: 'A simple JavaScript utility for conditionally joining classNames together.',
+};
+ClassNames.parameters = {
+    controls: { include: [], hideNoControlsWarning: true },
+    docs: {
+        source: {
+            code: `import { classNames } from 'diginet-core-ui/utils'
+
+classNames('foo', 'bar'); // => 'foo bar'
+
+classNames('foo', 'bar'); // => 'foo bar'
+classNames('foo', { bar: true }); // => 'foo bar'
+classNames({ 'foo-bar': true }); // => 'foo-bar'
+classNames({ 'foo-bar': false }); // => ''
+classNames({ foo: true }, { bar: true }); // => 'foo bar'
+classNames({ foo: true, bar: true }); // => 'foo bar'
+
+// lots of arguments of various types
+classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'
+
+// other falsy values are just ignored
+classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'
+
+// Arrays will be recursively flattened as per the rules above:
+const arr = ['b', { c: true, d: false }];
+classNames('a', arr); // => 'a b c'
+
+// Dynamic class names with ES2015
+let buttonType = 'primary';
+classNames({ [\`btn-\${buttonType}\`]: true });
+`,
+            language: 'javascript',
+            type: 'auto',
+        },
+    },
+};

package/src/utils/console.js

@@ -0,0 +1,30 @@
+import { isFunction } from './type';
+
+const noop = () => {};
+const getConsoleMethod = function (method) {
+    if (typeof console === 'undefined' || !isFunction(console[method])) {
+        return noop;
+    }
+    return console[method].bind(console);
+};
+
+export const logger = {
+    info: getConsoleMethod('info'),
+    warn: getConsoleMethod('warn'),
+    error: getConsoleMethod('error'),
+};
+
+export const debug = (() => {
+    const assert = (condition, message) => {
+        if (!condition) {
+            throw new Error(message);
+        }
+    };
+    const assertParam = (parameter, message) => {
+        assert(parameter !== null && parameter !== undefined, message);
+    };
+    return {
+        assert: assert,
+        assertParam: assertParam,
+    };
+})();