diginet-core-ui 1.4.39 → 1.4.40

package/src/styles/sx/index.js

@@ -0,0 +1,35 @@
+import { css } from '@emotion/core';
+import { useTheme } from 'theme';
+import { handleBreakpoints } from 'utils';
+
+const cssKeyMap = new Map([
+    ['display', 'display'],
+    ['padding', 'padding'],
+]);
+
+const parsePropValue = (cssKey, propValue, { spacing }) => {
+    switch (cssKey) {
+        case 'padding':
+            return `${cssKey}: ${spacing(propValue)}`;
+        default:
+            return `${cssKey}: ${propValue};`;
+    }
+};
+
+const sx = prop => {
+    const theme = useTheme();
+    if (typeof prop !== 'object' || Array.isArray(prop) || prop === null) return null;
+    let sxStyleCSS = '';
+    Object.keys(prop).forEach(key => {
+        const cssKey = cssKeyMap.get(key);
+        if (!cssKey) return null;
+        sxStyleCSS += handleBreakpoints(prop[key], propValue =>
+            propValue ? parsePropValue(cssKey, propValue, theme) : ''
+        );
+    });
+    return css`
+        ${sxStyleCSS}
+    `;
+};
+
+export default sx;

package/src/styles/typography.js

@@ -0,0 +1,181 @@
+import { css } from '@emotion/core';
+import { font } from './font';
+import { parseToPixel } from './utils';
+export const { fontFamily, fontSize, fontFamilySecurity } = font; //export to use general
+
+const fontNormal = css`
+    font-style: normal;
+    font-family: ${fontFamily};
+`;
+
+const fontWeightBold = css`
+    font-weight: 700;
+`;
+
+const fontWeightMedium = css`
+    font-weight: 500;
+`;
+
+const fontWeightRegular = css`
+    font-weight: 400;
+`;
+
+const fontWeightNormal = css`
+    font-weight: normal;
+`;
+
+const fontSecurity = css`
+    font-family: ${fontFamilySecurity};
+`;
+
+// Rule: line-height = font-size + 4
+const getFontSize = size => css`
+    font-size: ${parseToPixel(size)};
+    line-height: ${parseToPixel(size + 4)};
+`;
+
+// Exception to the rule: Title1 and Body6 do not follow the rule
+const getFontSizeException = size => css`
+    font-size: ${parseToPixel(size)};
+    line-height: ${parseToPixel(size + 8)};
+    letter-spacing: 0.005em; // 50% on Figma (0.01em is 1%)
+`;
+
+const title1 = css`
+    ${fontNormal};
+    ${fontWeightBold};
+    ${getFontSizeException(parseInt(fontSize) + 12)}; //28
+`;
+
+const title2 = css`
+    ${fontNormal};
+    ${fontWeightBold};
+    ${getFontSize(parseInt(fontSize) + 10)}; //26
+`;
+const title3 = css`
+    ${fontNormal};
+    ${fontWeightBold};
+    ${getFontSize(parseInt(fontSize) + 8)}; //24
+`;
+const title4 = css`
+    ${fontNormal};
+    ${fontWeightBold};
+    ${getFontSize(parseInt(fontSize) + 6)}; //22
+`;
+const heading1 = css`
+    ${fontNormal};
+    ${fontWeightBold};
+    ${getFontSize(parseInt(fontSize) + 4)}; //20
+`;
+const heading2 = css`
+    ${fontNormal};
+    ${fontWeightBold};
+    ${getFontSize(parseInt(fontSize) + 2)}; //18
+`;
+const heading3 = css`
+    ${fontNormal};
+    ${fontWeightBold};
+    ${getFontSize(parseInt(fontSize))}; //16
+`;
+const heading4 = css`
+    ${fontNormal};
+    ${fontWeightBold};
+    ${getFontSize(parseInt(fontSize) - 2)}; //14
+`;
+const heading5 = css`
+    ${fontNormal};
+    ${fontWeightBold};
+    ${getFontSize(parseInt(fontSize) - 4)}; //12
+`;
+const heading6 = css`
+    ${fontNormal};
+    ${fontWeightMedium};
+    ${getFontSize(parseInt(fontSize) - 4)}; //12
+`;
+const body1 = css`
+    ${fontNormal};
+    ${fontWeightRegular};
+    ${getFontSize(parseInt(fontSize) + 12)}; //28
+`;
+const body2 = css`
+    ${fontNormal};
+    ${fontWeightRegular};
+    ${getFontSize(parseInt(fontSize) + 10)}; //26
+`;
+const body3 = css`
+    ${fontNormal};
+    ${fontWeightRegular};
+    ${getFontSize(parseInt(fontSize) + 8)}; //24
+`;
+const body4 = css`
+    ${fontNormal};
+    ${fontWeightRegular};
+    ${getFontSize(parseInt(fontSize) + 6)}; //22
+`;
+const body5 = css`
+    ${fontNormal};
+    ${fontWeightRegular};
+    ${getFontSize(parseInt(fontSize) + 4)}; //20
+`;
+const body6 = css`
+    ${fontNormal};
+    ${fontWeightRegular};
+    ${getFontSizeException(parseInt(fontSize) + 2)}; //18
+`;
+const paragraph1 = css`
+    ${fontNormal};
+    ${fontWeightRegular};
+    ${getFontSize(parseInt(fontSize))}; //16
+`;
+const paragraph2 = css`
+    ${fontNormal};
+    ${fontWeightRegular};
+    ${getFontSize(parseInt(fontSize) - 2)}; //14
+`;
+const paragraph3 = css`
+    ${fontNormal};
+    ${fontWeightRegular};
+    ${getFontSize(parseInt(fontSize) - 4)}; //12
+`;
+const uppercase = css`
+    text-transform: uppercase;
+`;
+const label = css`
+    font-size: ${parseInt(fontSize) - 4}px; //12
+    ${fontWeightBold}
+`;
+const helperText = css`
+    font-size: ${parseInt(fontSize) - 4}px; //12
+    ${fontWeightNormal}
+`;
+
+export const typography = [
+    [title1, ['title1', 't1']],
+    [title2, ['title2', 't2']],
+    [title3, ['title3', 't3']],
+    [title4, ['title4', 't4']],
+    [heading1, ['heading1', 'h1']],
+    [heading2, ['heading2', 'h2']],
+    [heading3, ['heading3', 'h3']],
+    [heading4, ['heading4', 'h4']],
+    [heading5, ['heading5', 'h5']],
+    [heading6, ['heading6', 'h6']],
+    [body1, ['body1', 'b1']],
+    [body2, ['body2', 'b2']],
+    [body3, ['body3', 'b3']],
+    [body4, ['body4', 'b4']],
+    [body5, ['body5', 'b5']],
+    [body6, ['body6', 'b6']],
+    [paragraph1, ['paragraph1', 'p1']],
+    [paragraph2, ['paragraph2', 'p2']],
+    [paragraph3, ['paragraph3', 'p3']],
+    [uppercase, ['uppercase']],
+    [label, ['label']],
+    [helperText, ['helperText']],
+    [fontSecurity, ['security']],
+].reduce((obj, [value, keys]) => {
+    for (const key of keys) {
+        obj = { ...obj, [key]: value };
+    }
+    return obj;
+}, {});

package/src/styles/utils.js

@@ -0,0 +1,35 @@
+import { color as oldColors } from './colors';
+
+/**
+ * Parse css value
+ *
+ * @param {string | number} vl
+ * @returns {string | number}
+ */
+export const parseCSSValue = vl => {
+    return isNaN(vl) ? vl : vl + 'px';
+};
+
+/**
+ * Parse to pixel
+ *
+ * @param {number} vl
+ * @returns {string}
+ */
+export const parseToPixel = vl => {
+    if (!vl) return '1px';
+    return typeof vl === 'string' ? vl : `${vl}px`;
+};
+
+/**
+ * Get color from CORE colors
+ *
+ * @param {string} color
+ * @param {object} allColors
+ * @returns {string}
+ */
+export const getColor = (color, allColors = oldColors) => {
+    if (typeof color !== 'string') return;
+    // example param cl: primary, info, system.rest, text.main, red, #333333,...
+    return color.split(/[./]/).reduce((p, c) => (p && p[c]) || null, allColors) || color;
+};

package/src/theme/createBreakpoints.js

@@ -0,0 +1,95 @@
+// Sorted ASC by size. That's important.
+// It can't be configured as it's used statically for propTypes.
+export const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+const sortBreakpointsValues = values => {
+    const breakpointsAsArray = Object.keys(values).map(key => ({ key, val: values[key] })) || [];
+    // Sort in ascending order
+    breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
+    return breakpointsAsArray.reduce((acc, obj) => {
+        return { ...acc, [obj.key]: obj.val };
+    }, {});
+};
+
+// Keep in mind that @media is inclusive by the CSS specification.
+const createBreakpoints = breakpoints => {
+    const {
+        // The breakpoint **start** at this value.
+        // For instance with the first breakpoint xs: [xs, sm).
+        values = {
+            xs: 0, // extra-small
+            sm: 600, // small
+            md: 900, // medium
+            lg: 1200, // large
+            xl: 1536, // extra-large
+        },
+        unit = 'px',
+        step = 5,
+        ...other
+    } = breakpoints;
+
+    const sortedValues = sortBreakpointsValues(values);
+    const keys = Object.keys(sortedValues);
+
+    const up = (key, removeMedia = false) => {
+        const value = typeof values[key] === 'number' ? values[key] : key;
+        return `${removeMedia ? '' : '@media '}(min-width:${value}${unit})`;
+    };
+
+    const down = (key, removeMedia = false) => {
+        const value = typeof values[key] === 'number' ? values[key] : key;
+        return `${removeMedia ? '' : '@media '}(max-width:${value - step / 100}${unit})`;
+    };
+
+    const between = (start, end, removeMedia = false) => {
+        const endIndex = keys.indexOf(end);
+
+        return (
+            `${removeMedia ? '' : '@media '}(min-width:${
+                typeof values[start] === 'number' ? values[start] : start
+            }${unit}) and ` +
+            `(max-width:${
+                (endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) -
+                step / 100
+            }${unit})`
+        );
+    };
+
+    const only = (key, removeMedia = false) => {
+        if (keys.indexOf(key) + 1 < keys.length) {
+            return between(key, keys[keys.indexOf(key) + 1], removeMedia);
+        }
+
+        return up(key, removeMedia);
+    };
+
+    const not = (key, removeMedia = false) => {
+        // handle first and last key separately, for better readability
+        const keyIndex = keys.indexOf(key);
+        if (keyIndex === 0) {
+            return up(keys[1], removeMedia);
+        }
+        if (keyIndex === keys.length - 1) {
+            return down(keys[keyIndex], removeMedia);
+        }
+
+        return between(key, keys[keys.indexOf(key) + 1]).replace(
+            '@media',
+            removeMedia ? 'not all and' : '@media not all and'
+        );
+    };
+
+    return {
+        keys,
+        values: sortedValues,
+        up,
+        down,
+        between,
+        only,
+        not,
+        unit,
+        ...other,
+    };
+};
+
+export default createBreakpoints;

package/src/theme/createSpacing.js

@@ -0,0 +1,12 @@
+const createSpacing = (spacingInput = 4) => {
+    const spacing = (vl = 1) => {
+        if (typeof vl === 'number') return Number(vl) * spacingInput;
+        else if (Array.isArray(vl)) {
+            if (vl.length > 4) vl.length = 4;
+            return vl.flatMap(i => (isNaN(i) ? i : i * spacingInput + 'px')).join(' ');
+        } else return vl;
+    };
+    return spacing;
+};
+
+export default createSpacing;

package/src/theme/createTheme.js

@@ -0,0 +1,29 @@
+import deepmerge from 'utils/object/deepmerge';
+import createBreakpoints from './createBreakpoints';
+import createSpacing from './createSpacing';
+import createZIndex from './createZIndex';
+
+const createTheme = (options = {}, ...args) => {
+    const { breakpoints: breakpointsInput = {}, spacing: spacingInput, zIndex: zIndexInput, ...other } = options;
+
+    const breakpoints = createBreakpoints(breakpointsInput);
+    const spacing = createSpacing(spacingInput);
+    const zIndex = createZIndex(zIndexInput);
+
+    let theme = deepmerge(
+        {
+            breakpoints,
+            colors: {},
+            components: {},
+            mode: 'light',
+            spacing,
+            zIndex,
+        },
+        other
+    );
+
+    theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme);
+    return theme;
+};
+
+export default createTheme;

package/src/theme/createZIndex.js

@@ -0,0 +1,10 @@
+const createZIndex = (zIndexRootInput = 1500) => {
+    const zIndex = number => {
+        number = Number(number || 0);
+        if (isNaN(number)) return zIndexRootInput;
+        return zIndexRootInput + number;
+    };
+    return zIndex;
+};
+
+export default createZIndex;

package/src/theme/docs/breakpoints.md

@@ -0,0 +1,242 @@
+# Breakpoints
+
+API that enables the use of breakpoints in a wide variety of contexts.
+
+The breakpoints are used internally in various components to make them responsive,
+but you can also take advantage of them
+for controlling the layout of your application through the [Grid](../?path=/docs/components-grid) component.
+
+## Default breakpoints
+
+Each breakpoint (a key) matches with a _fixed_ screen width (a value):
+
+<!-- Keep in sync with src/theme/createBreakpoints.js -->
+
+-   **xs,** extra-small: 0px
+-   **sm,** small: 600px
+-   **md,** medium: 900px
+-   **lg,** large: 1200px
+-   **xl,** extra-large: 1536px
+
+These values can be [customized](#custom-breakpoints).
+
+## CSS Media Queries
+
+CSS media queries are the idiomatic approach to make your UI responsive.
+The theme provides five styles helpers to do so:
+
+-   [theme.breakpoints.up(key)](#themebreakpointsupkey--media-query)
+-   [theme.breakpoints.down(key)](#themebreakpointsdownkey--media-query)
+-   [theme.breakpoints.only(key)](#themebreakpointsonlykey--media-query)
+-   [theme.breakpoints.not(key)](#tthemebreakpointsnotkey--media-query)
+-   [theme.breakpoints.between(start, end)](#themebreakpointsbetweenstart-end--media-query)
+
+In the following demo, we change the background color (red, blue & green) based on the screen width.
+
+```jsx
+const styles = theme => ({
+    root: {
+        padding: theme.spacing(1),
+        [theme.breakpoints.down('md')]: {
+            backgroundColor: theme.colors.secondary,
+        },
+        [theme.breakpoints.up('md')]: {
+            backgroundColor: theme.colors.primary,
+        },
+        [theme.breakpoints.up('lg')]: {
+            backgroundColor: theme.colors.semantic.success,
+        },
+    },
+});
+```
+
+## JavaScript Media Queries
+
+Sometimes, using CSS isn't enough.
+You might want to change the React rendering tree based on the breakpoint value, in JavaScript.
+
+### useMediaQuery hook
+
+You can learn more on the [useMediaQuery](../?path=/docs/utils-usemediaquery) page.
+
+## Custom breakpoints
+
+You define your project's breakpoints in the `theme.breakpoints` section of your theme.
+
+<!-- Keep in sync with src/theme/createBreakpoints.js -->
+
+-   `theme.breakpoints.values`: Default to the [above values](#default-breakpoints). The keys are your screen names, and the values are the min-width where that breakpoint should start.
+-   `theme.breakpoints.unit`: Default to `'px'`. The unit used for the breakpoint's values.
+-   `theme.breakpoints.step`: Default to `5`. The increment divided by 100 used to implement exclusive breakpoints.
+    For example, `{ step: 5 }` means that `down(500)` will result in `'(max-width: 499.95px)'`.
+
+If you change the default breakpoints's values, you need to provide them all:
+
+```jsx
+const theme = createTheme({
+    breakpoints: {
+        values: {
+            xs: 0,
+            sm: 600,
+            md: 900,
+            lg: 1200,
+            xl: 1536,
+        },
+    },
+});
+```
+
+Feel free to have as few or as many breakpoints as you want, naming them in whatever way you'd prefer for your project.
+
+```js
+const theme = createTheme({
+    breakpoints: {
+        values: {
+            mobile: 0,
+            tablet: 640,
+            laptop: 1024,
+            desktop: 1200,
+        },
+    },
+});
+```
+
+## API
+
+### `theme.breakpoints.up(key) => media query`
+
+<!-- Keep in sync with src/theme/createBreakpoints.js -->
+
+#### Arguments
+
+1. `key` (_string_ | _number_): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
+
+#### Returns
+
+`media query`: A media query string ready to be used with most styling solutions, which matches screen widths greater than the screen size given by the breakpoint key (inclusive).
+
+#### Examples
+
+```js
+const styles = theme => ({
+    root: {
+        backgroundColor: 'blue',
+        // Match [md, ∞)
+        //       [900px, ∞)
+        [theme.breakpoints.up('md')]: {
+            backgroundColor: 'red',
+        },
+    },
+});
+```
+
+### `theme.breakpoints.down(key) => media query`
+
+<!-- Keep in sync with src/theme/createBreakpoints.js -->
+
+#### Arguments
+
+1. `key` (_string_ | _number_): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
+
+#### Returns
+
+`media query`: A media query string ready to be used with most styling solutions, which matches screen widths less than the screen size given by the breakpoint key (exclusive).
+
+#### Examples
+
+```js
+const styles = theme => ({
+    root: {
+        backgroundColor: 'blue',
+        // Match [0, md)
+        //       [0, 900px)
+        [theme.breakpoints.down('md')]: {
+            backgroundColor: 'red',
+        },
+    },
+});
+```
+
+### `theme.breakpoints.only(key) => media query`
+
+<!-- Keep in sync with src/theme/createBreakpoints.js -->
+
+#### Arguments
+
+1. `key` (_string_): A breakpoint key (`xs`, `sm`, etc.).
+
+#### Returns
+
+`media query`: A media query string ready to be used with most styling solutions, which matches screen widths starting from the screen size given by the breakpoint key (inclusive) and stopping at the screen size given by the next breakpoint key (exclusive).
+
+#### Examples
+
+```js
+const styles = theme => ({
+    root: {
+        backgroundColor: 'blue',
+        // Match [md, md + 1)
+        //       [md, lg)
+        //       [900px, 1200px)
+        [theme.breakpoints.only('md')]: {
+            backgroundColor: 'red',
+        },
+    },
+});
+```
+
+### `theme.breakpoints.not(key) => media query`
+
+<!-- Keep in sync with src/theme/createBreakpoints.js -->
+
+#### Arguments
+
+1. `key` (_string_): A breakpoint key (`xs`, `sm`, etc.).
+
+#### Returns
+
+`media query`: A media query string ready to be used with most styling solutions, which matches screen widths stopping at the screen size given by the breakpoint key (exclusive) and starting at the screen size given by the next breakpoint key (inclusive).
+
+#### Examples
+
+```js
+const styles = theme => ({
+    root: {
+        backgroundColor: 'blue',
+        // Match [xs, md) and [md + 1, ∞)
+        //       [xs, md) and [lg, ∞)
+        //       [0px, 900px) and [1200px, ∞)
+        [theme.breakpoints.not('md')]: {
+            backgroundColor: 'red',
+        },
+    },
+});
+```
+
+### `theme.breakpoints.between(start, end) => media query`
+
+<!-- Keep in sync with src/theme/createBreakpoints.js -->
+
+#### Arguments
+
+1. `start` (_string_): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
+2. `end` (_string_): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
+
+#### Returns
+
+`media query`: A media query string ready to be used with most styling solutions, which matches screen widths greater than the screen size given by the breakpoint key in the first argument (inclusive) and less than the screen size given by the breakpoint key in the second argument (exclusive).
+
+#### Examples
+
+```js
+const styles = theme => ({
+    root: {
+        backgroundColor: 'blue',
+        // Match [sm, md)
+        //       [600px, 900px)
+        [theme.breakpoints.between('sm', 'md')]: {
+            backgroundColor: 'red',
+        },
+    },
+});
+```

package/src/theme/docs/colors.md

@@ -0,0 +1,64 @@
+# Colors
+
+The colors enables you to modify the color of the components to suit your brand.
+
+## Default colors
+
+The theme exposes the following default colors (accessible under `theme.colors.*`):
+
+-   `primary` - for primary interface elements.
+-   `secondary` - for secondary interface elements.
+-   `danger` - for elements that the user should be made aware of.
+-   `warning` - for potentially dangerous actions or important messages.
+-   `info` - for highlighting neutral information.
+-   `success` - for indicating the successful completion of an action that the user triggered.
+
+See CORE-UI's [Color System](..?path=/docs/style-colors--sample-color) for details on color usage and guidelines.
+
+### Customization
+
+You may override the default color values by including a color object as part of your theme.
+
+This can be achieved by either using a color object or by providing the colors directly:
+
+#### Providing the colors directly
+
+To modify each color directly, provide an object with one or more of the color tokens.
+
+```js
+import * as React from 'react';
+import { ThemeProvider } from 'diginet-core-ui/theme';
+
+const theme = {
+    colors: {
+        system: {
+            active: '#333',
+        },
+        text: {
+            main: 'red',
+        },
+    },
+};
+
+function App() {
+    return <ThemeProvider theme={theme}>...</ThemeProvider>;
+}
+```
+
+#### Providing the colors with light/dark mode
+
+```js
+import * as React from 'react';
+import { ThemeProvider } from 'diginet-core-ui/theme';
+
+function App() {
+    const [mode, setMode] = React.useState('light');
+
+    const theme = {
+        mode: mode,
+        colors: mode === 'dark' ? { system: { active: 'red' } } : { system: { active: 'blue' } },
+    };
+
+    return <ThemeProvider theme={theme}>...</ThemeProvider>;
+}
+```