From b31c6928695af402fc90e2bf934f08b53472b344 Mon Sep 17 00:00:00 2001 From: Harijs Veveris Date: Wed, 25 Jan 2023 12:04:51 +0100 Subject: [PATCH 1/4] chore: add radix-ui separator --- packages/ui-react/package.json | 1 + packages/ui-react/yarn.lock | 40 +++++++++++++++++++++++++++++++++- 2 files changed, 40 insertions(+), 1 deletion(-) diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json index 9859ccf9..be895ecf 100644 --- a/packages/ui-react/package.json +++ b/packages/ui-react/package.json @@ -43,6 +43,7 @@ "@babel/preset-react": "7.18.6", "@moonwalker/orbit-ui": "^1.14.33", "@moonwalker/orbit-ui-stylus": "^1.14.33", + "@radix-ui/react-separator": "1.0.1", "@storybook/addon-actions": "6.5.13", "@storybook/addon-essentials": "6.5.13", "@storybook/addon-knobs": "6.4.0", diff --git a/packages/ui-react/yarn.lock b/packages/ui-react/yarn.lock index 7c07c5fe..6b3dcb11 100644 --- a/packages/ui-react/yarn.lock +++ b/packages/ui-react/yarn.lock @@ -1210,6 +1210,13 @@ dependencies: regenerator-runtime "^0.13.10" +"@babel/runtime@^7.13.10": + version "7.20.13" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.13.tgz#7055ab8a7cff2b8f6058bf6ae45ff84ad2aded4b" + integrity sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA== + dependencies: + regenerator-runtime "^0.13.11" + "@babel/template@^7.12.7", "@babel/template@^7.14.5", "@babel/template@^7.18.10", "@babel/template@^7.18.6", "@babel/template@^7.3.3": version "7.18.10" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71" @@ -1751,6 +1758,37 @@ resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.11.tgz#aeb16f50649a91af79dbe36574b66d0f9e4d9f71" integrity sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA== +"@radix-ui/react-compose-refs@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae" + integrity sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA== + dependencies: + "@babel/runtime" "^7.13.10" + +"@radix-ui/react-primitive@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.1.tgz#c1ebcce283dd2f02e4fbefdaa49d1cb13dbc990a" + integrity sha512-fHbmislWVkZaIdeF6GZxF0A/NH/3BjrGIYj+Ae6eTmTCr7EB0RQAAVEiqsXK6p3/JcRqVSBQoceZroj30Jj3XA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-slot" "1.0.1" + +"@radix-ui/react-separator@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-1.0.1.tgz#0ff3036c7f499fee9ea99268dc9ebf16055e356f" + integrity sha512-uc6Izot0D8uVz6T2nSb/HI7OaxkeaD50GgKr3W6HORnbfGVrG7LWuy+g6Fd58n8wHbrRblSYJZEfcjgymMlJjw== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-primitive" "1.0.1" + +"@radix-ui/react-slot@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.1.tgz#e7868c669c974d649070e9ecbec0b367ee0b4d81" + integrity sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-compose-refs" "1.0.0" + "@sinclair/typebox@^0.24.1": version "0.24.20" resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.20.tgz#11a657875de6008622d53f56e063a6347c51a6dd" @@ -9969,7 +10007,7 @@ regenerate@^1.4.2: resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a" integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A== -regenerator-runtime@0.13.11, regenerator-runtime@^0.13.10, regenerator-runtime@^0.13.7: +regenerator-runtime@0.13.11, regenerator-runtime@^0.13.10, regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.7: version "0.13.11" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9" integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg== From 0ef28e2d844355247e493a492bcf182fce7daafe Mon Sep 17 00:00:00 2001 From: Harijs Veveris Date: Thu, 2 Feb 2023 11:44:05 +0100 Subject: [PATCH 2/4] feat: add Separator, Stack, Container, Grid, Flex --- packages/ui-react/package.json | 4 +- .../atoms/container/container.constants.js | 1 + .../src/atoms/container/container.jsx | 196 ++++++++++++ .../atoms/container/container.modules.styl | 3 + .../src/atoms/container/container.stories.jsx | 69 ++++ .../ui-react/src/atoms/container/index.js | 1 + .../ui-react/src/atoms/flex/flex.constants.js | 1 + packages/ui-react/src/atoms/flex/flex.jsx | 88 +++++ .../ui-react/src/atoms/flex/flex.modules.styl | 12 + .../ui-react/src/atoms/flex/flex.stories.jsx | 65 ++++ packages/ui-react/src/atoms/flex/index.js | 1 + .../ui-react/src/atoms/grid/grid.constants.js | 1 + packages/ui-react/src/atoms/grid/grid.jsx | 85 +++++ .../ui-react/src/atoms/grid/grid.modules.styl | 13 + .../ui-react/src/atoms/grid/grid.stories.jsx | 64 ++++ packages/ui-react/src/atoms/grid/index.js | 1 + .../ui-react/src/atoms/separator/index.js | 1 + .../atoms/separator/separator.constants.js | 5 + .../src/atoms/separator/separator.jsx | 51 +++ .../atoms/separator/separator.modules.styl | 40 +++ .../src/atoms/separator/separator.stories.jsx | 37 +++ packages/ui-react/src/atoms/stack/hstack.jsx | 7 + packages/ui-react/src/atoms/stack/index.js | 3 + .../src/atoms/stack/stack.constants.js | 3 + packages/ui-react/src/atoms/stack/stack.jsx | 95 ++++++ .../src/atoms/stack/stack.modules.styl | 11 + .../src/atoms/stack/stack.stories.jsx | 84 +++++ packages/ui-react/src/atoms/stack/vstack.jsx | 9 + packages/ui-react/src/index.js | 5 + .../src/molecules/list-group/list-group.jsx | 14 +- packages/ui-react/yarn.lock | 300 +++++++++++++++++- 31 files changed, 1255 insertions(+), 15 deletions(-) create mode 100644 packages/ui-react/src/atoms/container/container.constants.js create mode 100644 packages/ui-react/src/atoms/container/container.jsx create mode 100644 packages/ui-react/src/atoms/container/container.modules.styl create mode 100644 packages/ui-react/src/atoms/container/container.stories.jsx create mode 100644 packages/ui-react/src/atoms/container/index.js create mode 100644 packages/ui-react/src/atoms/flex/flex.constants.js create mode 100644 packages/ui-react/src/atoms/flex/flex.jsx create mode 100644 packages/ui-react/src/atoms/flex/flex.modules.styl create mode 100644 packages/ui-react/src/atoms/flex/flex.stories.jsx create mode 100644 packages/ui-react/src/atoms/flex/index.js create mode 100644 packages/ui-react/src/atoms/grid/grid.constants.js create mode 100644 packages/ui-react/src/atoms/grid/grid.jsx create mode 100644 packages/ui-react/src/atoms/grid/grid.modules.styl create mode 100644 packages/ui-react/src/atoms/grid/grid.stories.jsx create mode 100644 packages/ui-react/src/atoms/grid/index.js create mode 100644 packages/ui-react/src/atoms/separator/index.js create mode 100644 packages/ui-react/src/atoms/separator/separator.constants.js create mode 100644 packages/ui-react/src/atoms/separator/separator.jsx create mode 100644 packages/ui-react/src/atoms/separator/separator.modules.styl create mode 100644 packages/ui-react/src/atoms/separator/separator.stories.jsx create mode 100644 packages/ui-react/src/atoms/stack/hstack.jsx create mode 100644 packages/ui-react/src/atoms/stack/index.js create mode 100644 packages/ui-react/src/atoms/stack/stack.constants.js create mode 100644 packages/ui-react/src/atoms/stack/stack.jsx create mode 100644 packages/ui-react/src/atoms/stack/stack.modules.styl create mode 100644 packages/ui-react/src/atoms/stack/stack.stories.jsx create mode 100644 packages/ui-react/src/atoms/stack/vstack.jsx diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json index be895ecf..a6440f7d 100644 --- a/packages/ui-react/package.json +++ b/packages/ui-react/package.json @@ -27,6 +27,7 @@ }, "dependencies": { "@babel/runtime": "^7.10.5", + "@radix-ui/react-separator": "1.0.1", "react-is": "^17.0.0" }, "peerDependencies": { @@ -37,13 +38,11 @@ }, "devDependencies": { "@babel/cli": "7.19.3", - "@babel/core": "7.20.2", "@babel/plugin-transform-runtime": "7.19.6", "@babel/preset-env": "7.20.2", "@babel/preset-react": "7.18.6", "@moonwalker/orbit-ui": "^1.14.33", "@moonwalker/orbit-ui-stylus": "^1.14.33", - "@radix-ui/react-separator": "1.0.1", "@storybook/addon-actions": "6.5.13", "@storybook/addon-essentials": "6.5.13", "@storybook/addon-knobs": "6.4.0", @@ -59,6 +58,7 @@ "classnames": "2.3.2", "css-loader": "3.6.0", "downshift": "7.0.4", + "eslint": "^8.33.0", "identity-obj-proxy": "3.0.0", "jest": "26.6.3", "lodash": "4.17.21", diff --git a/packages/ui-react/src/atoms/container/container.constants.js b/packages/ui-react/src/atoms/container/container.constants.js new file mode 100644 index 00000000..40391a09 --- /dev/null +++ b/packages/ui-react/src/atoms/container/container.constants.js @@ -0,0 +1 @@ +export const UI_NAME = 'ui-container'; diff --git a/packages/ui-react/src/atoms/container/container.jsx b/packages/ui-react/src/atoms/container/container.jsx new file mode 100644 index 00000000..427f6393 --- /dev/null +++ b/packages/ui-react/src/atoms/container/container.jsx @@ -0,0 +1,196 @@ +import React from 'react'; +import cx from 'classnames'; +import PropTypes from 'prop-types'; +import { UI_NAME } from './container.constants'; + +const PropTypeStringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]); + +export const Container = (props) => { + const { + children, + className, + classNames, + maxWidth, + fluid, + centerContent, + width, + margin, + m, + mt, + mr, + mb, + ml, + mx, + my, + padding, + p, + pt, + pr, + pb, + pl, + px, + py, + color, + bg, + bgColor, + opacity, + ...restProps + } = props; + + const rootClassName = cx(classNames.root, className); + + let styles = {}; + + if (maxWidth) { + styles.maxWidth = maxWidth; + } + + if (centerContent) { + styles.display = 'flex'; + styles.justifyContent = 'center'; + styles.alignItems = 'center'; + } + + if (width) { + styles.width = width; + } + + if (fluid) { + styles.width = '100%'; + } + + if (margin) { + styles.margin = margin; + } + + if (m) { + styles.margin = m; + } + + if (mt) { + styles.marginTop = mt; + } + + if (mr) { + styles.marginRight = mr; + } + + if (mb) { + styles.marginBottom = mb; + } + + if (ml) { + styles.marginLeft = ml; + } + + if (mx) { + styles.marginLeft = mx; + styles.marginRight = mx; + } + + if (my) { + styles.marginTop = my; + styles.marginBottom = my; + } + + if (padding) { + styles.padding = padding; + } + + if (p) { + styles.padding = p; + } + + if (pt) { + styles.paddingTop = pt; + } + + if (pr) { + styles.paddingRight = pr; + } + + if (pb) { + styles.paddingBottom = pb; + } + + if (pl) { + styles.paddingLeft = pl; + } + + if (px) { + styles.paddingLeft = px; + styles.paddingRight = px; + } + + if (py) { + styles.paddingTop = py; + styles.paddingBottom = py; + } + + if (color) { + styles.color = color; + } + + if (bgColor) { + styles.backgroundColor = bgColor; + } + + if (bg) { + styles.background = bg; + } + + if (opacity) { + styles.opacity = opacity; + } + + return ( +
+ {children} +
+ ); +}; + +Container.displayName = UI_NAME; + +Container.propTypes = { + /** Adopted child class name */ + className: PropTypes.string, + + /** CSS Modules class names mapping */ + classNames: PropTypes.shape({ + root: PropTypes.string + }), + + children: PropTypes.node.isRequired, + + fluid: PropTypes.bool, + maxWidth: PropTypeStringOrNumber, + centerContent: PropTypes.bool, + width: PropTypeStringOrNumber, + margin: PropTypeStringOrNumber, + m: PropTypeStringOrNumber, + mt: PropTypeStringOrNumber, + mr: PropTypeStringOrNumber, + mb: PropTypeStringOrNumber, + ml: PropTypeStringOrNumber, + mx: PropTypeStringOrNumber, + my: PropTypeStringOrNumber, + padding: PropTypeStringOrNumber, + p: PropTypeStringOrNumber, + pt: PropTypeStringOrNumber, + pr: PropTypeStringOrNumber, + pb: PropTypeStringOrNumber, + pl: PropTypeStringOrNumber, + px: PropTypeStringOrNumber, + py: PropTypeStringOrNumber, + color: PropTypes.string, + bg: PropTypes.string, + bgColor: PropTypes.string, + opacity: PropTypes.number +}; + +Container.defaultProps = { + children: null, + className: '', + classNames: { root: UI_NAME } +}; diff --git a/packages/ui-react/src/atoms/container/container.modules.styl b/packages/ui-react/src/atoms/container/container.modules.styl new file mode 100644 index 00000000..c66f219e --- /dev/null +++ b/packages/ui-react/src/atoms/container/container.modules.styl @@ -0,0 +1,3 @@ +.root { + border: 1px solid skyblue; +} diff --git a/packages/ui-react/src/atoms/container/container.stories.jsx b/packages/ui-react/src/atoms/container/container.stories.jsx new file mode 100644 index 00000000..62791588 --- /dev/null +++ b/packages/ui-react/src/atoms/container/container.stories.jsx @@ -0,0 +1,69 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; + +import { Container } from './container'; + +import css from './container.modules.styl'; + +const stories = storiesOf('Components/Atoms/Container', module); + +stories.add('default', () => ( + + 🤖 Robo +    + 🚀 Cosmo +    + 🎨 Picasso + +)); + +stories.add('centerContent & fluid (100% width)', () => ( + + 🤖 Robo +    + 🚀 Cosmo +    + 🎨 Picasso + +)); + +stories.add('margins with mx, my', () => ( + +
mx={35}
+
my={45}
+ +)); + +stories.add('padding with pt, pr, pb, pl and width', () => ( + +
pt="15"
+
pr="40"
+
pb="30"
+
pl="25"
+
width="150"
+ +)); + +stories.add('color, bgColor, opacity', () => ( + +
bgColor="pink"
+
color="purple"
+
opacity={0.5}
+ +)); + +stories.add('fancy background with bg', () => ( + +
p="15"
+
color="white"
+
+ bg="linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) + 100%)" +
+ +)); diff --git a/packages/ui-react/src/atoms/container/index.js b/packages/ui-react/src/atoms/container/index.js new file mode 100644 index 00000000..85ee15b6 --- /dev/null +++ b/packages/ui-react/src/atoms/container/index.js @@ -0,0 +1 @@ +export * from './container'; diff --git a/packages/ui-react/src/atoms/flex/flex.constants.js b/packages/ui-react/src/atoms/flex/flex.constants.js new file mode 100644 index 00000000..f369d23b --- /dev/null +++ b/packages/ui-react/src/atoms/flex/flex.constants.js @@ -0,0 +1 @@ +export const UI_NAME = 'ui-flex'; diff --git a/packages/ui-react/src/atoms/flex/flex.jsx b/packages/ui-react/src/atoms/flex/flex.jsx new file mode 100644 index 00000000..2653dc81 --- /dev/null +++ b/packages/ui-react/src/atoms/flex/flex.jsx @@ -0,0 +1,88 @@ +import React from 'react'; +import cx from 'classnames'; +import PropTypes from 'prop-types'; + +import { UI_NAME } from './flex.constants'; + +export const Flex = (props) => { + const { + children, + className, + classNames, + direction, + alignContent, + alignItems, + justify, + wrap, + spacing, + columnGap, + rowGap, + basis, + grow, + shrink, + ...restProps + } = props; + + const rootClassName = cx(classNames.root, className); + + const flexStyle = { + alignItems, + alignContent, + display: 'flex', + rowGap: `${rowGap || spacing}px`, + columnGap: `${columnGap || spacing}px`, + flexDirection: direction, + justifyContent: justify, + flexWrap: wrap, + flexBasis: basis, + flexGrow: grow, + flexShrink: shrink + }; + + return ( +
+ {children} +
+ ); +}; + +Flex.displayName = UI_NAME; + +Flex.propTypes = { + alignContent: PropTypes.oneOf([ + 'stretch', + 'center', + 'flex-start', + 'flex-end', + 'space-between', + 'space-around' + ]), + alignItems: PropTypes.oneOf(['stretch', 'center', 'flex-start', 'flex-end', 'baseline']), + direction: PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']), + justify: PropTypes.oneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around']), + wrap: PropTypes.oneOf(['nowrap', 'wrap', 'wrap-reverse']), + className: PropTypes.string, + classNames: PropTypes.shape({ + root: PropTypes.string + }), + children: PropTypes.node, + style: PropTypes.object, + spacing: PropTypes.number, + columnGap: PropTypes.number, + rowGap: PropTypes.number +}; + +Flex.defaultProps = { + alignContent: 'stretch', + alignItems: 'stretch', + direction: 'row', + justify: 'flex-start', + wrap: 'nowrap', + className: '', + classNames: { root: UI_NAME }, + children: null, + style: {}, + spacing: 0, + columnGap: 0, + rowGap: 0 +}; diff --git a/packages/ui-react/src/atoms/flex/flex.modules.styl b/packages/ui-react/src/atoms/flex/flex.modules.styl new file mode 100644 index 00000000..ad865478 --- /dev/null +++ b/packages/ui-react/src/atoms/flex/flex.modules.styl @@ -0,0 +1,12 @@ +.custom { + background: #d4f2f6; + border: 4px dashed turquoise; + border-radius: 4px; + padding: 5px; + font-size: 1.25rem; + height: 100px; +} + +.fixedWidth { + max-width: 200px; +} \ No newline at end of file diff --git a/packages/ui-react/src/atoms/flex/flex.stories.jsx b/packages/ui-react/src/atoms/flex/flex.stories.jsx new file mode 100644 index 00000000..16aad613 --- /dev/null +++ b/packages/ui-react/src/atoms/flex/flex.stories.jsx @@ -0,0 +1,65 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; + +import { Flex } from './flex'; + +import css from './flex.modules.styl'; + +const stories = storiesOf('Components/Atoms/Flex', module); +const spacing = 15; + +stories.add('default', () => ( + + 🤖 + 🚀 + ❤️‍🔥 + 🤟🏽 + +)); + +stories.add('direction row (default)', () => ( + +
🍜 Eat
+
😴 Sleep
+
🥳 Rave
+
🔁 Repeat
+ +)); + +stories.add('direction column', () => ( + +
🍜 Eat
+
😴 Sleep
+
🥳 Rave
+
🔁 Repeat
+ +)); + +stories.add('wrap', () => ( + +
🍜 Eat
+
😴 Sleep
+
🥳 Rave
+
🔁 Repeat
+
🍜 Eat
+
😴 Sleep
+
🥳 Rave
+
🔁 Repeat
+ +)); + +stories.add('custom CSS', () => ( + +
🍜 Eat
+
😴 Sleep
+
🥳 Rave
+
🔁 Repeat
+ +)); diff --git a/packages/ui-react/src/atoms/flex/index.js b/packages/ui-react/src/atoms/flex/index.js new file mode 100644 index 00000000..ece6890a --- /dev/null +++ b/packages/ui-react/src/atoms/flex/index.js @@ -0,0 +1 @@ +export * from './flex'; diff --git a/packages/ui-react/src/atoms/grid/grid.constants.js b/packages/ui-react/src/atoms/grid/grid.constants.js new file mode 100644 index 00000000..f369d23b --- /dev/null +++ b/packages/ui-react/src/atoms/grid/grid.constants.js @@ -0,0 +1 @@ +export const UI_NAME = 'ui-flex'; diff --git a/packages/ui-react/src/atoms/grid/grid.jsx b/packages/ui-react/src/atoms/grid/grid.jsx new file mode 100644 index 00000000..609666a0 --- /dev/null +++ b/packages/ui-react/src/atoms/grid/grid.jsx @@ -0,0 +1,85 @@ +import React from 'react'; +import cx from 'classnames'; +import PropTypes from 'prop-types'; + +import { UI_NAME } from './grid.constants'; + +export const Grid = (props) => { + const { + children, + className, + classNames, + templateAreas, + gap, + rowGap, + columnGap, + column, + row, + autoFlow, + autoRows, + templateRows, + autoColumns, + templateColumns, + isInline, + ...restProps + } = props; + + const rootClassName = cx(classNames.root, className); + + const gridStyle = { + display: isInline ? 'inline-grid' : 'grid', + gridTemplateAreas: templateAreas, + gridGap: `${gap}px`, + gridRowGap: `${rowGap || gap}px`, + gridColumnGap: `${columnGap || gap}px`, + gridAutoColumns: autoColumns, + gridColumn: column, + gridRow: row, + gridAutoFlow: autoFlow, + gridAutoRows: autoRows, + gridTemplateRows: templateRows, + gridTemplateColumns: templateColumns + }; + + return ( +
+ {children} +
+ ); +}; + +Grid.displayName = UI_NAME; + +Grid.propTypes = { + children: PropTypes.node, + className: PropTypes.string, + classNames: PropTypes.shape({ + root: PropTypes.string + }), + templateAreas: PropTypes.string, + gap: PropTypes.number, + rowGap: PropTypes.number, + columnGap: PropTypes.number, + templateRows: PropTypes.string, + templateColumns: PropTypes.string, + autoFlow: PropTypes.oneOf(['row', 'column', 'dense', 'row dense', 'column dense']), + autoRows: PropTypes.string, + autoColumns: PropTypes.string, + isInline: PropTypes.bool +}; + +Grid.defaultProps = { + children: null, + className: '', + classNames: { root: UI_NAME }, + templateAreas: '', + gap: 0, + rowGap: 0, + columnGap: 0, + templateRows: '', + templateColumns: '', + autoFlow: 'row', + autoRows: '', + autoColumns: '', + isInline: false +}; diff --git a/packages/ui-react/src/atoms/grid/grid.modules.styl b/packages/ui-react/src/atoms/grid/grid.modules.styl new file mode 100644 index 00000000..02bc7bd9 --- /dev/null +++ b/packages/ui-react/src/atoms/grid/grid.modules.styl @@ -0,0 +1,13 @@ +.custom { + background: #d4f2f6; + border: 4px dashed turquoise; + border-radius: 4px; + padding: 5px; + font-size: 1.25rem; + height: 100px; + overflow: scroll; +} + +.border { + border: 4px dashed rgb(152, 199, 232); +} \ No newline at end of file diff --git a/packages/ui-react/src/atoms/grid/grid.stories.jsx b/packages/ui-react/src/atoms/grid/grid.stories.jsx new file mode 100644 index 00000000..b13aee94 --- /dev/null +++ b/packages/ui-react/src/atoms/grid/grid.stories.jsx @@ -0,0 +1,64 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; + +import { Grid } from './grid'; + +import css from './grid.modules.styl'; + +const stories = storiesOf('Components/Atoms/Grid', module); +const spacing = 15; + +stories.add('default', () => ( + + 🤖 + 🚀 + ❤️‍🔥 + 🤟🏽 + +)); + +stories.add('direction row (default)', () => ( + +
🍜 Eat
+
😴 Sleep
+
🥳 Rave
+
🔁 Repeat
+ +)); + +stories.add('direction column', () => ( + +
🍜 Eat
+
😴 Sleep
+
🥳 Rave
+
🔁 Repeat
+ +)); + +stories.add('rows and columns', () => ( + +
🍜 Eat
+
😴 Sleep
+
🥳 Rave
+
🔁 Repeat
+
🍜 Eat
+
😴 Sleep
+
🥳 Rave
+
🔁 Repeat
+ +)); + +stories.add('custom CSS', () => ( + +
🍜 Eat
+
😴 Sleep
+
🥳 Rave
+
🔁 Repeat
+ +)); diff --git a/packages/ui-react/src/atoms/grid/index.js b/packages/ui-react/src/atoms/grid/index.js new file mode 100644 index 00000000..d24d1bdc --- /dev/null +++ b/packages/ui-react/src/atoms/grid/index.js @@ -0,0 +1 @@ +export * from './grid'; diff --git a/packages/ui-react/src/atoms/separator/index.js b/packages/ui-react/src/atoms/separator/index.js new file mode 100644 index 00000000..68fc331a --- /dev/null +++ b/packages/ui-react/src/atoms/separator/index.js @@ -0,0 +1 @@ +export * from './separator'; diff --git a/packages/ui-react/src/atoms/separator/separator.constants.js b/packages/ui-react/src/atoms/separator/separator.constants.js new file mode 100644 index 00000000..a7c76b60 --- /dev/null +++ b/packages/ui-react/src/atoms/separator/separator.constants.js @@ -0,0 +1,5 @@ +export const UI_NAME = 'ui-separator'; + +export const ORIENTATION_HORIZONTAL = 'horizontal'; +export const ORIENTATION_VERTICAL = 'vertical'; +export const ORIENTATIONS = ['horizontal', 'vertical']; diff --git a/packages/ui-react/src/atoms/separator/separator.jsx b/packages/ui-react/src/atoms/separator/separator.jsx new file mode 100644 index 00000000..0cf331f1 --- /dev/null +++ b/packages/ui-react/src/atoms/separator/separator.jsx @@ -0,0 +1,51 @@ +import React from 'react'; +import cx from 'classnames'; +import PropTypes from 'prop-types'; +import * as SeparatorPrimitive from '@radix-ui/react-separator'; + +import { ORIENTATIONS, ORIENTATION_HORIZONTAL, UI_NAME } from './separator.constants'; + +export const Separator = (props) => { + const { className, classNames, orientation, decorative, margin, ...restProps } = props; + const rootClassName = cx(classNames.root, className); + const marginStyle = orientation === ORIENTATION_HORIZONTAL ? `${margin}px 0` : `0 ${margin}px`; + + return ( + + ); +}; + +Separator.displayName = UI_NAME; + +Separator.defaultProps = { + className: '', + classNames: { root: UI_NAME }, + decorative: false, + orientation: ORIENTATION_HORIZONTAL, + margin: 15 +}; + +Separator.propTypes = { + /** Adopted child class name */ + className: PropTypes.string, + + /** CSS Modules class names mapping */ + classNames: PropTypes.shape({ + root: PropTypes.string + }), + + /** Decorative separaotr xcarries no semantic meaning, and ensures it is not present in the accessibility tree. */ + decorative: PropTypes.bool, + + /** Orientation modifier name */ + orientation: PropTypes.oneOf(ORIENTATIONS), + + /** Margin value */ + margin: PropTypes.number +}; diff --git a/packages/ui-react/src/atoms/separator/separator.modules.styl b/packages/ui-react/src/atoms/separator/separator.modules.styl new file mode 100644 index 00000000..00d9b660 --- /dev/null +++ b/packages/ui-react/src/atoms/separator/separator.modules.styl @@ -0,0 +1,40 @@ +.root { + background-color: blue; + + &[data-orientation='horizontal'] { + height: 1px; + width: 100%; + } + + &[data-orientation='vertical'] { + height: 100%; + width: 1px; + } +} + +.containerHeight { + height: 20px; +} + +.containerWidth { + width: 300px; + + span { + white-space: nowrap; + margin: 0 10px; + } +} + +.custom { + background-color: magenta; + + &[data-orientation='horizontal'] { + height: 5px; + width: 100%; + } + + &[data-orientation='vertical'] { + height: 100%; + width: 5px; + } +} \ No newline at end of file diff --git a/packages/ui-react/src/atoms/separator/separator.stories.jsx b/packages/ui-react/src/atoms/separator/separator.stories.jsx new file mode 100644 index 00000000..40b0f1e4 --- /dev/null +++ b/packages/ui-react/src/atoms/separator/separator.stories.jsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; + +import { Stack } from '../stack/stack'; +import { Separator } from './separator'; + +import css from './separator.modules.styl'; + +const stories = storiesOf('Components/Atoms/Separator', module); + +stories.add('default', () => ); + +stories.add('horizontal (default)', () => ( + + 🤖 Robo + + 🚀 Cosmo + +)); + +stories.add('vertical', () => ( + + 🤖 Robo + + 🚀 Cosmo + +)); + +stories.add('custom CSS', () => ( + + 🤖 Robo + + 🚀 Cosmo + + 🎨 Picasso + +)); diff --git a/packages/ui-react/src/atoms/stack/hstack.jsx b/packages/ui-react/src/atoms/stack/hstack.jsx new file mode 100644 index 00000000..94ecb9b2 --- /dev/null +++ b/packages/ui-react/src/atoms/stack/hstack.jsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { Stack } from './stack'; +import { UI_NAME_HSTACK } from './stack.constants'; + +export const HStack = (props) => ; + +HStack.displayName = UI_NAME_HSTACK; diff --git a/packages/ui-react/src/atoms/stack/index.js b/packages/ui-react/src/atoms/stack/index.js new file mode 100644 index 00000000..a45f4092 --- /dev/null +++ b/packages/ui-react/src/atoms/stack/index.js @@ -0,0 +1,3 @@ +export * from './stack'; +export * from './hstack'; +export * from './vstack'; diff --git a/packages/ui-react/src/atoms/stack/stack.constants.js b/packages/ui-react/src/atoms/stack/stack.constants.js new file mode 100644 index 00000000..8fa4eed4 --- /dev/null +++ b/packages/ui-react/src/atoms/stack/stack.constants.js @@ -0,0 +1,3 @@ +export const UI_NAME = 'ui-stack'; +export const UI_NAME_HSTACK = 'ui-hstack'; +export const UI_NAME_VSTACK = 'ui-vstack'; diff --git a/packages/ui-react/src/atoms/stack/stack.jsx b/packages/ui-react/src/atoms/stack/stack.jsx new file mode 100644 index 00000000..a89a97a2 --- /dev/null +++ b/packages/ui-react/src/atoms/stack/stack.jsx @@ -0,0 +1,95 @@ +import React from 'react'; +import cx from 'classnames'; +import PropTypes from 'prop-types'; +import { UI_NAME } from './stack.constants'; + +export const Stack = (props) => { + const { + isInline, + direction, + align, + justify, + spacing, + sx, + sy, + style, + wrap, + children, + className, + classNames, + shouldWrapChildren, + ...restProps + } = props; + + const rootClassName = cx(classNames.root, className); + + const stackStyle = { + ...style, + display: isInline ? 'inline-flex' : 'flex', + flexDirection: direction, + alignItems: align, + justifyContent: justify, + rowGap: `${sy || spacing}px`, + columnGap: `${sx || spacing}px`, + flexWrap: wrap + }; + + const childStyle = { + display: 'inline-block', + flex: '0 0 auto', + minWidth: 0 + }; + + const wrappedChildren = shouldWrapChildren + ? children.map((child, index) => { + const key = typeof child.key !== 'undefined' ? child.key : index; + return ( +
+ {child} +
+ ); + }) + : children; + + return ( +
+ {wrappedChildren} +
+ ); +}; + +Stack.displayName = UI_NAME; + +Stack.propTypes = { + isInline: PropTypes.bool, + direction: PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']), + align: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'stretch', 'baseline']), + justify: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'space-between', 'space-around']), + wrap: PropTypes.oneOf(['nowrap', 'wrap', 'wrap-reverse']), + shouldWrapChildren: PropTypes.bool, + spacing: PropTypes.number, + sx: PropTypes.number, + sy: PropTypes.number, + children: PropTypes.node, + style: PropTypes.shape({}), + className: PropTypes.string, + classNames: PropTypes.shape({ + root: PropTypes.string + }) +}; + +Stack.defaultProps = { + isInline: false, + direction: 'row', + align: 'flex-start', + justify: 'flex-start', + spacing: 0, + wrap: 'nowrap', + children: null, + sx: 0, + sy: 0, + style: {}, + className: '', + classNames: { root: UI_NAME }, + shouldWrapChildren: false +}; diff --git a/packages/ui-react/src/atoms/stack/stack.modules.styl b/packages/ui-react/src/atoms/stack/stack.modules.styl new file mode 100644 index 00000000..9fb942f3 --- /dev/null +++ b/packages/ui-react/src/atoms/stack/stack.modules.styl @@ -0,0 +1,11 @@ +.custom { + background: #d4f2f6; + border: 4px dashed turquoise; + border-radius: 4px; + padding: 5px; + font-size: 1.25rem; +} + +.fixedWidth { + max-width: 300px; +} \ No newline at end of file diff --git a/packages/ui-react/src/atoms/stack/stack.stories.jsx b/packages/ui-react/src/atoms/stack/stack.stories.jsx new file mode 100644 index 00000000..46430f09 --- /dev/null +++ b/packages/ui-react/src/atoms/stack/stack.stories.jsx @@ -0,0 +1,84 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; + +import { Stack } from './stack'; +import { HStack } from './hstack'; +import { VStack } from './vstack'; + +import css from './stack.modules.styl'; + +const stories = storiesOf('Components/Atoms/Stack', module); +const spacing = 10; + +stories.add('default', () => ( + + 🤖 + 🚀 + ❤️‍🔥 + 🤟🏽 + +)); + +stories.add('direction row (default)', () => ( + +
🍜 Eat
+
😴 Sleep
+
🥳 Rave
+
🔁 Repeat
+ +)); + +stories.add('direction column', () => ( + +
🍜 Eat
+
😴 Sleep
+
🥳 Rave
+
🔁 Repeat
+ +)); + +stories.add('wrap reverse', () => ( + +
🍜 Eat
+
😴 Sleep
+
🥳 Rave
+
🔁 Repeat
+
🍜 Eat
+
😴 Sleep
+
🥳 Rave
+
🔁 Repeat
+ +)); + +stories.add('custom CSS', () => ( + +
🍜 Eat
+
😴 Sleep
+
🥳 Rave
+
🔁 Repeat
+ +)); + +stories.add('HStack', () => ( + +
🍜 Eat
+
😴 Sleep
+
🥳 Rave
+
🔁 Repeat
+ +)); + +stories.add('VStack', () => ( + +
🍜 Eat
+
😴 Sleep
+
🥳 Rave
+
🔁 Repeat
+ +)); diff --git a/packages/ui-react/src/atoms/stack/vstack.jsx b/packages/ui-react/src/atoms/stack/vstack.jsx new file mode 100644 index 00000000..08b8a354 --- /dev/null +++ b/packages/ui-react/src/atoms/stack/vstack.jsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { Stack } from './stack'; +import { UI_NAME_VSTACK } from './stack.constants'; + +export const VStack = (props) => ; + +VStack.displayName = UI_NAME_VSTACK; + +export default VStack; diff --git a/packages/ui-react/src/index.js b/packages/ui-react/src/index.js index 69216fb8..9a248e30 100644 --- a/packages/ui-react/src/index.js +++ b/packages/ui-react/src/index.js @@ -7,6 +7,11 @@ export * from './atoms/label'; export * from './atoms/select'; export * from './atoms/textarea'; export * from './atoms/spinner'; +export * from './atoms/separator'; +export * from './atoms/container'; +export * from './atoms/stack'; +export * from './atoms/flex'; +export * from './atoms/grid'; export * from './atoms/tag'; export * from './molecules/button-icon'; diff --git a/packages/ui-react/src/molecules/list-group/list-group.jsx b/packages/ui-react/src/molecules/list-group/list-group.jsx index 7c4e79be..02e7314e 100644 --- a/packages/ui-react/src/molecules/list-group/list-group.jsx +++ b/packages/ui-react/src/molecules/list-group/list-group.jsx @@ -5,12 +5,14 @@ import cx from 'classnames'; import { SIZES, SIZE_MEDIUM } from './list-group.constants'; import { CLASS_NAMES } from './list-group.class-names'; -const getDefaultRender = (items) => ({ getListGroupItemProps }) => - items.map((item) => ( -
  • - {item} -
    • - )); +const getDefaultRender = + (items) => + ({ getListGroupItemProps }) => + items.map((item) => ( +
  • + {item} +
    • + )); export const ListGroup = (props) => { const { className, classNames, items, render, as: Component, size } = props; diff --git a/packages/ui-react/yarn.lock b/packages/ui-react/yarn.lock index 6b3dcb11..ff585fab 100644 --- a/packages/ui-react/yarn.lock +++ b/packages/ui-react/yarn.lock @@ -65,7 +65,7 @@ semver "^5.4.1" source-map "^0.5.0" -"@babel/core@7.20.2", "@babel/core@^7.1.0", "@babel/core@^7.11.6", "@babel/core@^7.12.10", "@babel/core@^7.12.3", "@babel/core@^7.7.5": +"@babel/core@^7.1.0", "@babel/core@^7.11.6", "@babel/core@^7.12.10", "@babel/core@^7.12.3", "@babel/core@^7.7.5": version "7.20.2" resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.20.2.tgz#8dc9b1620a673f92d3624bd926dc49a52cf25b92" integrity sha512-w7DbG8DtMrJcFOi4VrLm+8QM4az8Mo+PuLBKLp2zrYRCow8W/f9xiXm5sN53C8HksCyDQwCKha9JiDoIyPjT2g== @@ -1356,6 +1356,40 @@ resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== +"@eslint/eslintrc@^1.4.1": + version "1.4.1" + resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.4.1.tgz#af58772019a2d271b7e2d4c23ff4ddcba3ccfb3e" + integrity sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA== + dependencies: + ajv "^6.12.4" + debug "^4.3.2" + espree "^9.4.0" + globals "^13.19.0" + ignore "^5.2.0" + import-fresh "^3.2.1" + js-yaml "^4.1.0" + minimatch "^3.1.2" + strip-json-comments "^3.1.1" + +"@humanwhocodes/config-array@^0.11.8": + version "0.11.8" + resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9" + integrity sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g== + dependencies: + "@humanwhocodes/object-schema" "^1.2.1" + debug "^4.1.1" + minimatch "^3.0.5" + +"@humanwhocodes/module-importer@^1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c" + integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA== + +"@humanwhocodes/object-schema@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45" + integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA== + "@istanbuljs/load-nyc-config@^1.0.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced" @@ -1713,11 +1747,24 @@ "@nodelib/fs.stat" "2.0.3" run-parallel "^1.1.9" +"@nodelib/fs.scandir@2.1.5": + version "2.1.5" + resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5" + integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g== + dependencies: + "@nodelib/fs.stat" "2.0.5" + run-parallel "^1.1.9" + "@nodelib/fs.stat@2.0.3", "@nodelib/fs.stat@^2.0.2": version "2.0.3" resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz#34dc5f4cabbc720f4e60f75a747e7ecd6c175bd3" integrity sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA== +"@nodelib/fs.stat@2.0.5": + version "2.0.5" + resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b" + integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A== + "@nodelib/fs.stat@^1.1.2": version "1.1.3" resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b" @@ -1731,6 +1778,14 @@ "@nodelib/fs.scandir" "2.1.3" fastq "^1.6.0" +"@nodelib/fs.walk@^1.2.8": + version "1.2.8" + resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a" + integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg== + dependencies: + "@nodelib/fs.scandir" "2.1.5" + fastq "^1.6.0" + "@npmcli/move-file@^1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@npmcli/move-file/-/move-file-1.0.1.tgz#de103070dac0f48ce49cf6693c23af59c0f70464" @@ -3335,7 +3390,7 @@ acorn-import-assertions@^1.7.6: resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz#ba2b5939ce62c238db6d93d81c9b111b29b855e9" integrity sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw== -acorn-jsx@^5.3.1: +acorn-jsx@^5.3.1, acorn-jsx@^5.3.2: version "5.3.2" resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937" integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ== @@ -3365,6 +3420,11 @@ acorn@^8.0.4, acorn@^8.7.1: resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8" integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w== +acorn@^8.8.0: + version "8.8.2" + resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a" + integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw== + address@^1.0.1: version "1.1.2" resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6" @@ -3425,7 +3485,7 @@ ajv-keywords@^5.0.0: dependencies: fast-deep-equal "^3.1.3" -ajv@^6.1.0, ajv@^6.10.2, ajv@^6.12.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5: +ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5: version "6.12.6" resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4" integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g== @@ -3570,6 +3630,11 @@ argparse@^1.0.7: dependencies: sprintf-js "~1.0.2" +argparse@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38" + integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q== + aria-query@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.0.0.tgz#210c21aaf469613ee8c9a62c7f86525e058db52c" @@ -4946,7 +5011,7 @@ cross-spawn@^6.0.0: shebang-command "^1.2.0" which "^1.2.9" -cross-spawn@^7.0.0, cross-spawn@^7.0.3: +cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3: version "7.0.3" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6" integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w== @@ -5107,6 +5172,11 @@ dedent@^0.7.0: resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c" integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw= +deep-is@^0.1.3: + version "0.1.4" + resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831" + integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ== + deep-is@~0.1.3: version "0.1.3" resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34" @@ -5599,6 +5669,11 @@ escape-string-regexp@^2.0.0: resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344" integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w== +escape-string-regexp@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34" + integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA== + escodegen@^1.14.1: version "1.14.3" resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.3.tgz#4e7b81fba61581dc97582ed78cab7f0e8d63f503" @@ -5639,11 +5714,97 @@ eslint-scope@^4.0.3: esrecurse "^4.1.0" estraverse "^4.1.1" +eslint-scope@^7.1.1: + version "7.1.1" + resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.1.1.tgz#fff34894c2f65e5226d3041ac480b4513a163642" + integrity sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw== + dependencies: + esrecurse "^4.3.0" + estraverse "^5.2.0" + +eslint-utils@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-3.0.0.tgz#8aebaface7345bb33559db0a1f13a1d2d48c3672" + integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA== + dependencies: + eslint-visitor-keys "^2.0.0" + +eslint-visitor-keys@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303" + integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw== + +eslint-visitor-keys@^3.3.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826" + integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA== + +eslint@^8.33.0: + version "8.33.0" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.33.0.tgz#02f110f32998cb598c6461f24f4d306e41ca33d7" + integrity sha512-WjOpFQgKK8VrCnAtl8We0SUOy/oVZ5NHykyMiagV1M9r8IFpIJX7DduK6n1mpfhlG7T1NLWm2SuD8QB7KFySaA== + dependencies: + "@eslint/eslintrc" "^1.4.1" + "@humanwhocodes/config-array" "^0.11.8" + "@humanwhocodes/module-importer" "^1.0.1" + "@nodelib/fs.walk" "^1.2.8" + ajv "^6.10.0" + chalk "^4.0.0" + cross-spawn "^7.0.2" + debug "^4.3.2" + doctrine "^3.0.0" + escape-string-regexp "^4.0.0" + eslint-scope "^7.1.1" + eslint-utils "^3.0.0" + eslint-visitor-keys "^3.3.0" + espree "^9.4.0" + esquery "^1.4.0" + esutils "^2.0.2" + fast-deep-equal "^3.1.3" + file-entry-cache "^6.0.1" + find-up "^5.0.0" + glob-parent "^6.0.2" + globals "^13.19.0" + grapheme-splitter "^1.0.4" + ignore "^5.2.0" + import-fresh "^3.0.0" + imurmurhash "^0.1.4" + is-glob "^4.0.0" + is-path-inside "^3.0.3" + js-sdsl "^4.1.4" + js-yaml "^4.1.0" + json-stable-stringify-without-jsonify "^1.0.1" + levn "^0.4.1" + lodash.merge "^4.6.2" + minimatch "^3.1.2" + natural-compare "^1.4.0" + optionator "^0.9.1" + regexpp "^3.2.0" + strip-ansi "^6.0.1" + strip-json-comments "^3.1.0" + text-table "^0.2.0" + +espree@^9.4.0: + version "9.4.1" + resolved "https://registry.yarnpkg.com/espree/-/espree-9.4.1.tgz#51d6092615567a2c2cff7833445e37c28c0065bd" + integrity sha512-XwctdmTO6SIvCzd9810yyNzIrOrqNYV9Koizx4C/mRhf9uq0o4yHoCEU/670pOxOL/MSraektvSAji79kX90Vg== + dependencies: + acorn "^8.8.0" + acorn-jsx "^5.3.2" + eslint-visitor-keys "^3.3.0" + esprima@^4.0.0, esprima@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71" integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A== +esquery@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5" + integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w== + dependencies: + estraverse "^5.1.0" + esrecurse@^4.1.0, esrecurse@^4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921" @@ -5656,6 +5817,11 @@ estraverse@^4.1.1, estraverse@^4.2.0: resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d" integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw== +estraverse@^5.1.0: + version "5.3.0" + resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123" + integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA== + estraverse@^5.2.0: version "5.2.0" resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880" @@ -5903,7 +6069,7 @@ fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0: resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633" integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw== -fast-levenshtein@~2.0.6: +fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6: version "2.0.6" resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc= @@ -5937,6 +6103,13 @@ figgy-pudding@^3.5.1: resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e" integrity sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw== +file-entry-cache@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027" + integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg== + dependencies: + flat-cache "^3.0.4" + file-loader@^6.2.0: version "6.2.0" resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d" @@ -6334,6 +6507,13 @@ glob-parent@^5.1.2, glob-parent@~5.1.2: dependencies: is-glob "^4.0.1" +glob-parent@^6.0.2: + version "6.0.2" + resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3" + integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A== + dependencies: + is-glob "^4.0.3" + glob-parent@~5.1.0: version "5.1.1" resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229" @@ -6383,6 +6563,13 @@ globals@^11.1.0: resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== +globals@^13.19.0: + version "13.20.0" + resolved "https://registry.yarnpkg.com/globals/-/globals-13.20.0.tgz#ea276a1e508ffd4f1612888f9d1bad1e2717bf82" + integrity sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ== + dependencies: + type-fest "^0.20.2" + globalthis@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.1.tgz#40116f5d9c071f9e8fb0037654df1ab3a83b7ef9" @@ -6421,6 +6608,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6 resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c" integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA== +grapheme-splitter@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e" + integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ== + growly@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081" @@ -6791,6 +6983,19 @@ ignore@^5.1.4: resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57" integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw== +ignore@^5.2.0: + version "5.2.4" + resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324" + integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ== + +import-fresh@^3.0.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b" + integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw== + dependencies: + parent-module "^1.0.0" + resolve-from "^4.0.0" + import-fresh@^3.1.0, import-fresh@^3.2.1: version "3.2.1" resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66" @@ -7097,6 +7302,13 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1: dependencies: is-extglob "^2.1.1" +is-glob@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084" + integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg== + dependencies: + is-extglob "^2.1.1" + is-hexadecimal@^1.0.0: version "1.0.4" resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7" @@ -7129,6 +7341,11 @@ is-object@^1.0.1: resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.1.tgz#8952688c5ec2ffd6b03ecc85e769e02903083470" integrity sha1-iVJojF7C/9awPsyF52ngKQMINHA= +is-path-inside@^3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283" + integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ== + is-plain-obj@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287" @@ -7904,6 +8121,11 @@ jest@26.6.3: import-local "^3.0.2" jest-cli "^26.6.3" +js-sdsl@^4.1.4: + version "4.3.0" + resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.3.0.tgz#aeefe32a451f7af88425b11fdb5f58c90ae1d711" + integrity sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ== + js-string-escape@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef" @@ -7922,6 +8144,13 @@ js-yaml@^3.13.1: argparse "^1.0.7" esprima "^4.0.0" +js-yaml@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602" + integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA== + dependencies: + argparse "^2.0.1" + jsbn@~0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513" @@ -7994,6 +8223,11 @@ json-schema@0.2.3: resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13" integrity sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM= +json-stable-stringify-without-jsonify@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651" + integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw== + json-stringify-safe@~5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb" @@ -8099,6 +8333,14 @@ leven@^3.1.0: resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2" integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A== +levn@^0.4.1: + version "0.4.1" + resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade" + integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ== + dependencies: + prelude-ls "^1.2.1" + type-check "~0.4.0" + levn@~0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee" @@ -8178,6 +8420,11 @@ lodash.debounce@^4.0.8: resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168= +lodash.merge@^4.6.2: + version "4.6.2" + resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" + integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ== + lodash.sortby@^4.7.0: version "4.7.0" resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438" @@ -8526,7 +8773,7 @@ minimatch@^3.0.2, minimatch@^3.0.4: dependencies: brace-expansion "^1.1.7" -minimatch@^3.1.1: +minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b" integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw== @@ -9005,6 +9252,18 @@ optionator@^0.8.1: type-check "~0.3.2" word-wrap "~1.2.3" +optionator@^0.9.1: + version "0.9.1" + resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499" + integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw== + dependencies: + deep-is "^0.1.3" + fast-levenshtein "^2.0.6" + levn "^0.4.1" + prelude-ls "^1.2.1" + type-check "^0.4.0" + word-wrap "^1.2.3" + os-browserify@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27" @@ -9490,6 +9749,11 @@ preact-render-to-string@^5.1.19: dependencies: pretty-format "^3.8.0" +prelude-ls@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" + integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== + prelude-ls@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" @@ -10035,6 +10299,11 @@ regexp.prototype.flags@^1.3.0: define-properties "^1.1.3" es-abstract "^1.17.0-next.1" +regexpp@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2" + integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg== + regexpu-core@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.1.0.tgz#2f8504c3fd0ebe11215783a41541e21c79942c6d" @@ -11000,6 +11269,11 @@ strip-indent@^3.0.0: dependencies: min-indent "^1.0.0" +strip-json-comments@^3.1.0, strip-json-comments@^3.1.1: + version "3.1.1" + resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" + integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig== + style-loader@1.3.0, style-loader@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.3.0.tgz#828b4a3b3b7e7aa5847ce7bae9e874512114249e" @@ -11209,6 +11483,11 @@ test-exclude@^6.0.0: glob "^7.1.4" minimatch "^3.0.4" +text-table@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4" + integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw== + throat@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b" @@ -11377,6 +11656,13 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0: resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64" integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q= +type-check@^0.4.0, type-check@~0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1" + integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew== + dependencies: + prelude-ls "^1.2.1" + type-check@~0.3.2: version "0.3.2" resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72" @@ -12053,7 +12339,7 @@ wildcard@^2.0.0: resolved "https://registry.yarnpkg.com/wildcard/-/wildcard-2.0.0.tgz#a77d20e5200c6faaac979e4b3aadc7b3dd7f8fec" integrity sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw== -word-wrap@~1.2.3: +word-wrap@^1.2.3, word-wrap@~1.2.3: version "1.2.3" resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c" integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ== From f85d4a6674d70e35ab09c7dc6c433f3ef0da201e Mon Sep 17 00:00:00 2001 From: Harijs Veveris Date: Thu, 2 Feb 2023 11:59:43 +0100 Subject: [PATCH 3/4] fix: lint errors --- .../src/atoms/container/container.jsx | 30 +++++++++++++++-- .../src/atoms/container/container.stories.jsx | 33 ++++++++++--------- packages/ui-react/src/atoms/flex/flex.jsx | 12 +++++-- packages/ui-react/src/atoms/grid/grid.jsx | 8 +++-- .../src/atoms/separator/separator.jsx | 3 +- 5 files changed, 61 insertions(+), 25 deletions(-) diff --git a/packages/ui-react/src/atoms/container/container.jsx b/packages/ui-react/src/atoms/container/container.jsx index 427f6393..a3514270 100644 --- a/packages/ui-react/src/atoms/container/container.jsx +++ b/packages/ui-react/src/atoms/container/container.jsx @@ -39,7 +39,7 @@ export const Container = (props) => { const rootClassName = cx(classNames.root, className); - let styles = {}; + const styles = {}; if (maxWidth) { styles.maxWidth = maxWidth; @@ -161,7 +161,7 @@ Container.propTypes = { root: PropTypes.string }), - children: PropTypes.node.isRequired, + children: PropTypes.node, fluid: PropTypes.bool, maxWidth: PropTypeStringOrNumber, @@ -192,5 +192,29 @@ Container.propTypes = { Container.defaultProps = { children: null, className: '', - classNames: { root: UI_NAME } + classNames: { root: UI_NAME }, + fluid: false, + maxWidth: null, + centerContent: false, + width: null, + margin: null, + m: null, + mt: null, + mr: null, + mb: null, + ml: null, + mx: null, + my: null, + padding: null, + p: null, + pt: null, + pr: null, + pb: null, + pl: null, + px: null, + py: null, + color: null, + bg: null, + bgColor: null, + opacity: null }; diff --git a/packages/ui-react/src/atoms/container/container.stories.jsx b/packages/ui-react/src/atoms/container/container.stories.jsx index 62791588..d5ab200c 100644 --- a/packages/ui-react/src/atoms/container/container.stories.jsx +++ b/packages/ui-react/src/atoms/container/container.stories.jsx @@ -29,26 +29,28 @@ stories.add('centerContent & fluid (100% width)', () => ( stories.add('margins with mx, my', () => ( -
    mx={35}
    -
    my={45}
    +
    🤖 Robo
    +
    🚀 Cosmo
     )); stories.add('padding with pt, pr, pb, pl and width', () => ( -
    pt="15"
    -
    pr="40"
    -
    pb="30"
    -
    pl="25"
    -
    width="150"
    +
    🤖 Robo
    +
    🚀 Cosmo
    +
    🎨 Picasso
    +
    🐥 Chicken
    +
    👾 Invaders
     )); stories.add('color, bgColor, opacity', () => ( -
    bgColor="pink"
    -
    color="purple"
    -
    opacity={0.5}
    +
    🤖 Robo
    +
    🚀 Cosmo
    +
    🎨 Picasso
    +
    🐥 Chicken
    +
    👾 Invaders
     )); @@ -59,11 +61,10 @@ stories.add('fancy background with bg', () => ( color="white" bg="linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%)" > -
    p="15"
    -
    color="white"
    -
    - bg="linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) - 100%)" -
    +
    🤖 Robo
    +
    🚀 Cosmo
    +
    🎨 Picasso
    +
    🐥 Chicken
    +
    👾 Invaders
    )); diff --git a/packages/ui-react/src/atoms/flex/flex.jsx b/packages/ui-react/src/atoms/flex/flex.jsx index 2653dc81..6074534a 100644 --- a/packages/ui-react/src/atoms/flex/flex.jsx +++ b/packages/ui-react/src/atoms/flex/flex.jsx @@ -66,10 +66,13 @@ Flex.propTypes = { root: PropTypes.string }), children: PropTypes.node, - style: PropTypes.object, + style: PropTypes.shape({}), spacing: PropTypes.number, columnGap: PropTypes.number, - rowGap: PropTypes.number + rowGap: PropTypes.number, + basis: PropTypes.string, + grow: PropTypes.number, + shrink: PropTypes.number }; Flex.defaultProps = { @@ -84,5 +87,8 @@ Flex.defaultProps = { style: {}, spacing: 0, columnGap: 0, - rowGap: 0 + rowGap: 0, + basis: 'auto', + grow: 0, + shrink: 1 }; diff --git a/packages/ui-react/src/atoms/grid/grid.jsx b/packages/ui-react/src/atoms/grid/grid.jsx index 609666a0..83883869 100644 --- a/packages/ui-react/src/atoms/grid/grid.jsx +++ b/packages/ui-react/src/atoms/grid/grid.jsx @@ -65,7 +65,9 @@ Grid.propTypes = { autoFlow: PropTypes.oneOf(['row', 'column', 'dense', 'row dense', 'column dense']), autoRows: PropTypes.string, autoColumns: PropTypes.string, - isInline: PropTypes.bool + isInline: PropTypes.bool, + column: PropTypes.string, + row: PropTypes.string }; Grid.defaultProps = { @@ -81,5 +83,7 @@ Grid.defaultProps = { autoFlow: 'row', autoRows: '', autoColumns: '', - isInline: false + isInline: false, + column: '', + row: '' }; diff --git a/packages/ui-react/src/atoms/separator/separator.jsx b/packages/ui-react/src/atoms/separator/separator.jsx index 0cf331f1..d34828f0 100644 --- a/packages/ui-react/src/atoms/separator/separator.jsx +++ b/packages/ui-react/src/atoms/separator/separator.jsx @@ -40,7 +40,8 @@ Separator.propTypes = { root: PropTypes.string }), - /** Decorative separaotr xcarries no semantic meaning, and ensures it is not present in the accessibility tree. */ + /** Decorative separaotr xcarries no semantic meaning, + * and ensures it is not present in the accessibility tree. */ decorative: PropTypes.bool, /** Orientation modifier name */ From 81d5029eaef57cc75b554d4c9743990401b16b71 Mon Sep 17 00:00:00 2001 From: Harijs Veveris Date: Thu, 2 Feb 2023 12:18:52 +0100 Subject: [PATCH 4/4] fix: test errors --- .../__snapshots__/container.stories.storyshot | 121 ++++++++++++++ .../flex/__snapshots__/flex.stories.storyshot | 108 +++++++++++++ .../grid/__snapshots__/grid.stories.storyshot | 113 +++++++++++++ .../__snapshots__/separator.stories.storyshot | 82 ++++++++++ .../src/atoms/separator/separator.jsx | 2 +- .../__snapshots__/stack.stories.storyshot | 153 ++++++++++++++++++ .../src/atoms/stack/stack.stories.jsx | 2 +- 7 files changed, 579 insertions(+), 2 deletions(-) create mode 100644 packages/ui-react/src/atoms/container/__snapshots__/container.stories.storyshot create mode 100644 packages/ui-react/src/atoms/flex/__snapshots__/flex.stories.storyshot create mode 100644 packages/ui-react/src/atoms/grid/__snapshots__/grid.stories.storyshot create mode 100644 packages/ui-react/src/atoms/separator/__snapshots__/separator.stories.storyshot create mode 100644 packages/ui-react/src/atoms/stack/__snapshots__/stack.stories.storyshot diff --git a/packages/ui-react/src/atoms/container/__snapshots__/container.stories.storyshot b/packages/ui-react/src/atoms/container/__snapshots__/container.stories.storyshot new file mode 100644 index 00000000..84e03eda --- /dev/null +++ b/packages/ui-react/src/atoms/container/__snapshots__/container.stories.storyshot @@ -0,0 +1,121 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Components/Atoms/Container centerContent & fluid (100% width) 1`] = ` +
    + + 🤖 Robo + +    + + 🚀 Cosmo + +    + + 🎨 Picasso + +
    +`; + +exports[`Storyshots Components/Atoms/Container color, bgColor, opacity 1`] = ` +
    +
    + 🤖 Robo +
    +
    + 🚀 Cosmo +
    +
    + 🎨 Picasso +
    +
    + 🐥 Chicken +
    +
    + 👾 Invaders +
    +
    +`; + +exports[`Storyshots Components/Atoms/Container default 1`] = ` +
    + + 🤖 Robo + +    + + 🚀 Cosmo + +    + + 🎨 Picasso + +
    +`; + +exports[`Storyshots Components/Atoms/Container fancy background with bg 1`] = ` +
    +
    + 🤖 Robo +
    +
    + 🚀 Cosmo +
    +
    + 🎨 Picasso +
    +
    + 🐥 Chicken +
    +
    + 👾 Invaders +
    +
    +`; + +exports[`Storyshots Components/Atoms/Container margins with mx, my 1`] = ` +
    +
    + 🤖 Robo +
    +
    + 🚀 Cosmo +
    +
    +`; + +exports[`Storyshots Components/Atoms/Container padding with pt, pr, pb, pl and width 1`] = ` +
    +
    + 🤖 Robo +
    +
    + 🚀 Cosmo +
    +
    + 🎨 Picasso +
    +
    + 🐥 Chicken +
    +
    + 👾 Invaders +
    +
    +`; diff --git a/packages/ui-react/src/atoms/flex/__snapshots__/flex.stories.storyshot b/packages/ui-react/src/atoms/flex/__snapshots__/flex.stories.storyshot new file mode 100644 index 00000000..36f9c31d --- /dev/null +++ b/packages/ui-react/src/atoms/flex/__snapshots__/flex.stories.storyshot @@ -0,0 +1,108 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Components/Atoms/Flex custom CSS 1`] = ` +
    +
    + 🍜 Eat +
    +
    + 😴 Sleep +
    +
    + 🥳 Rave +
    +
    + 🔁 Repeat +
    +
    +`; + +exports[`Storyshots Components/Atoms/Flex default 1`] = ` +
    + + 🤖 + + + 🚀 + + + ❤️‍🔥 + + + 🤟🏽 + +
    +`; + +exports[`Storyshots Components/Atoms/Flex direction column 1`] = ` +
    +
    + 🍜 Eat +
    +
    + 😴 Sleep +
    +
    + 🥳 Rave +
    +
    + 🔁 Repeat +
    +
    +`; + +exports[`Storyshots Components/Atoms/Flex direction row (default) 1`] = ` +
    +
    + 🍜 Eat +
    +
    + 😴 Sleep +
    +
    + 🥳 Rave +
    +
    + 🔁 Repeat +
    +
    +`; + +exports[`Storyshots Components/Atoms/Flex wrap 1`] = ` +
    +
    + 🍜 Eat +
    +
    + 😴 Sleep +
    +
    + 🥳 Rave +
    +
    + 🔁 Repeat +
    +
    + 🍜 Eat +
    +
    + 😴 Sleep +
    +
    + 🥳 Rave +
    +
    + 🔁 Repeat +
    +
    +`; diff --git a/packages/ui-react/src/atoms/grid/__snapshots__/grid.stories.storyshot b/packages/ui-react/src/atoms/grid/__snapshots__/grid.stories.storyshot new file mode 100644 index 00000000..f4188bd9 --- /dev/null +++ b/packages/ui-react/src/atoms/grid/__snapshots__/grid.stories.storyshot @@ -0,0 +1,113 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Components/Atoms/Grid custom CSS 1`] = ` +
    +
    + 🍜 Eat +
    +
    + 😴 Sleep +
    +
    + 🥳 Rave +
    +
    + 🔁 Repeat +
    +
    +`; + +exports[`Storyshots Components/Atoms/Grid default 1`] = ` +
    + + 🤖 + + + 🚀 + + + ❤️‍🔥 + + + 🤟🏽 + +
    +`; + +exports[`Storyshots Components/Atoms/Grid direction column 1`] = ` +
    +
    + 🍜 Eat +
    +
    + 😴 Sleep +
    +
    + 🥳 Rave +
    +
    + 🔁 Repeat +
    +
    +`; + +exports[`Storyshots Components/Atoms/Grid direction row (default) 1`] = ` +
    +
    + 🍜 Eat +
    +
    + 😴 Sleep +
    +
    + 🥳 Rave +
    +
    + 🔁 Repeat +
    +
    +`; + +exports[`Storyshots Components/Atoms/Grid rows and columns 1`] = ` +
    +
    + 🍜 Eat +
    +
    + 😴 Sleep +
    +
    + 🥳 Rave +
    +
    + 🔁 Repeat +
    +
    + 🍜 Eat +
    +
    + 😴 Sleep +
    +
    + 🥳 Rave +
    +
    + 🔁 Repeat +
    +
    +`; diff --git a/packages/ui-react/src/atoms/separator/__snapshots__/separator.stories.storyshot b/packages/ui-react/src/atoms/separator/__snapshots__/separator.stories.storyshot new file mode 100644 index 00000000..a7d65824 --- /dev/null +++ b/packages/ui-react/src/atoms/separator/__snapshots__/separator.stories.storyshot @@ -0,0 +1,82 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Components/Atoms/Separator custom CSS 1`] = ` +
    + + 🤖 Robo + +