diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json index 9859ccf9..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,7 +38,6 @@ }, "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", @@ -58,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/__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/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..a3514270 --- /dev/null +++ b/packages/ui-react/src/atoms/container/container.jsx @@ -0,0 +1,220 @@ +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); + + const 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, + + 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 }, + 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.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..d5ab200c --- /dev/null +++ b/packages/ui-react/src/atoms/container/container.stories.jsx @@ -0,0 +1,70 @@ +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', () => ( + +
🤖 Robo
+
🚀 Cosmo
+ +)); + +stories.add('padding with pt, pr, pb, pl and width', () => ( + +
🤖 Robo
+
🚀 Cosmo
+
🎨 Picasso
+
🐥 Chicken
+
👾 Invaders
+ +)); + +stories.add('color, bgColor, opacity', () => ( + +
🤖 Robo
+
🚀 Cosmo
+
🎨 Picasso
+
🐥 Chicken
+
👾 Invaders
+ +)); + +stories.add('fancy background with bg', () => ( + +
🤖 Robo
+
🚀 Cosmo
+
🎨 Picasso
+
🐥 Chicken
+
👾 Invaders
+ +)); 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/__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/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..6074534a --- /dev/null +++ b/packages/ui-react/src/atoms/flex/flex.jsx @@ -0,0 +1,94 @@ +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.shape({}), + spacing: PropTypes.number, + columnGap: PropTypes.number, + rowGap: PropTypes.number, + basis: PropTypes.string, + grow: PropTypes.number, + shrink: 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, + basis: 'auto', + grow: 0, + shrink: 1 +}; 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/__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/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..83883869 --- /dev/null +++ b/packages/ui-react/src/atoms/grid/grid.jsx @@ -0,0 +1,89 @@ +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, + column: PropTypes.string, + row: PropTypes.string +}; + +Grid.defaultProps = { + children: null, + className: '', + classNames: { root: UI_NAME }, + templateAreas: '', + gap: 0, + rowGap: 0, + columnGap: 0, + templateRows: '', + templateColumns: '', + autoFlow: 'row', + autoRows: '', + autoColumns: '', + isInline: false, + column: '', + row: '' +}; 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/__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 + +