imbric-theme 0.1.1

package/atoms/Picture/Picture.module.css

@@ -0,0 +1,16 @@
+.picture {
+  user-select: none;
+}
+
+.picture img {
+  display: block;
+  width: 100%;
+}
+
+.is-rounded img {
+  border-radius: var(--border-radius-full);
+}
+
+.with-border img {
+  border: var(--picture-border);
+}

package/atoms/Picture/Picture.stories.js

@@ -0,0 +1,32 @@
+import { Picture, styles } from '.'
+
+import { getTemplate } from '../../helpers/storybook'
+
+const Template = getTemplate(Picture, styles)
+
+export default {
+  title: 'Atoms/Picture',
+  component: Picture,
+  args: {
+    src: 'https://picsum.photos/id/1033/400/400',
+    width: 200,
+  },
+  argTypes: {
+    width: { control: 'number' },
+    height: { control: 'number' },
+  },
+}
+
+export const Default = Template.bind({})
+
+export const Rounded = Template.bind({})
+Rounded.args = { isRounded: true }
+
+export const Border = Template.bind({})
+Border.args = { withBorder: true }
+
+export const Height = Template.bind({})
+Height.args = { src: 'https://picsum.photos/id/1033/400/800', height: 400 }
+
+export const Width = Template.bind({})
+Width.args = { src: 'https://picsum.photos/id/1033/800/400', width: 400 }

package/atoms/Picture/__snapshots__/Picture.stories.js.snap

@@ -0,0 +1,156 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Atoms/Picture Border 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <picture
+    className="picture with-border"
+  >
+    <img
+      src="https://picsum.photos/id/1033/400/400"
+      style={
+        Object {
+          "height": "auto",
+          "maxWidth": 200,
+        }
+      }
+    />
+  </picture>
+</div>
+`;
+
+exports[`Storyshots Atoms/Picture Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <picture
+    className="picture"
+  >
+    <img
+      src="https://picsum.photos/id/1033/400/400"
+      style={
+        Object {
+          "height": "auto",
+          "maxWidth": 200,
+        }
+      }
+    />
+  </picture>
+</div>
+`;
+
+exports[`Storyshots Atoms/Picture Height 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <picture
+    className="picture"
+  >
+    <img
+      src="https://picsum.photos/id/1033/400/800"
+      style={
+        Object {
+          "height": 400,
+          "maxWidth": 200,
+        }
+      }
+    />
+  </picture>
+</div>
+`;
+
+exports[`Storyshots Atoms/Picture Rounded 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <picture
+    className="picture is-rounded"
+  >
+    <img
+      src="https://picsum.photos/id/1033/400/400"
+      style={
+        Object {
+          "height": "auto",
+          "maxWidth": 200,
+        }
+      }
+    />
+  </picture>
+</div>
+`;
+
+exports[`Storyshots Atoms/Picture Width 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <picture
+    className="picture"
+  >
+    <img
+      src="https://picsum.photos/id/1033/800/400"
+      style={
+        Object {
+          "height": "auto",
+          "maxWidth": 400,
+        }
+      }
+    />
+  </picture>
+</div>
+`;

package/atoms/Picture/index.js

@@ -0,0 +1,2 @@
+export { default, Picture } from './Picture'
+export { default as styles } from './Picture.module.css'

package/atoms/Textarea/Textarea.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Textarea.module.css'
+import withStyles from '../../hocs/withStyles'
+
+const DEFAULT_TEXTAREA_ROWS = 5
+
+const handleChange = ({ onChange }) => () => {
+  onChange()
+}
+
+export const Textarea = ({
+  children,
+  rows,
+  placeholder,
+  onChange,
+  getStyles,
+}) => {
+  return (
+    <textarea
+      className={getStyles('textarea')}
+      rows={rows}
+      placeholder={placeholder}
+      onChange={handleChange({ onChange })}
+    >
+      {children}
+    </textarea>
+  )
+}
+
+Textarea.propTypes = {
+  children: PropTypes.node,
+  getStyles: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  rows: PropTypes.number,
+  placeholder: PropTypes.string,
+}
+
+Textarea.defaultProps = {
+  getStyles: () => {},
+  onChange: () => {},
+  rows: DEFAULT_TEXTAREA_ROWS,
+}
+
+export default withStyles(styles)(Textarea)

package/atoms/Textarea/Textarea.module.css

@@ -0,0 +1,25 @@
+.textarea {
+  display: flex;
+  width: 100%;
+  min-height: 100px;
+  padding: 20px;
+  border: var(--border-width-thin) solid var(--color-cool-gray-200);
+  background: var(--input-background);
+  border-radius: var(--textarea-border-radius);
+  box-shadow: var(--box-shadow-sm);
+  color: var(--color-font-base);
+  font-family: var(--font-family-sans);
+  font-size: var(--input-font-size);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-tight);
+  resize: vertical;
+}
+
+.textarea::placeholder {
+  color: var(--color-font-highlight);
+}
+
+.textarea:focus {
+  box-shadow: 0 0 0 1px var(--color-primary), 0 0 10px 0 var(--color-primary);
+  outline: none;
+}

package/atoms/Textarea/Textarea.stories.js

@@ -0,0 +1,16 @@
+import { Textarea, styles } from '.'
+
+import { getTemplate } from '../../helpers/storybook'
+
+const Template = getTemplate(Textarea, styles)
+
+export default {
+  title: 'Atoms/Textarea',
+  component: Textarea,
+  args: {
+    placeholder:
+      'Country speed seat newfound ah stained Gundabad stinking runt.',
+  },
+}
+
+export const Default = Template.bind({})

package/atoms/Textarea/__snapshots__/Textarea.stories.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Atoms/Textarea Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <textarea
+    className="textarea"
+    onChange={[Function]}
+    placeholder="Country speed seat newfound ah stained Gundabad stinking runt."
+    rows={5}
+  />
+</div>
+`;

package/atoms/Textarea/index.js

@@ -0,0 +1,2 @@
+export { default, Textarea } from './Textarea'
+export { default as styles } from './Textarea.module.css'

package/codecov.yml

@@ -0,0 +1,2 @@
+github_checks:
+  annotations: false

package/helpers/storybook.js

@@ -0,0 +1,29 @@
+/* eslint-disable react/display-name, react/jsx-key */
+import React from 'react'
+import { getClasses } from './styles'
+
+export const getTemplate = (Component, styles) => (args) => {
+  const allProps = { ...Component.defaultProps, ...args }
+  return <Component {...args} getStyles={getClasses(styles)(allProps)} />
+}
+
+export const getListTemplate = (Component, styles) => ({ items, ...args }) =>
+  items.map((item, index) => {
+    const allProps = { ...Component.defaultProps, ...args, ...item }
+    return (
+      <Component
+        key={index}
+        {...args}
+        {...item}
+        getStyles={getClasses(styles)(allProps)}
+      />
+    )
+  })
+
+export const getOptionsArgTypes = (options) => ({
+  description: '**options:**',
+  table: {
+    type: { summary: options.map((option) => `'${option}'`).join('|') },
+  },
+  control: { type: 'select', options },
+})

package/helpers/storybook.test.js

@@ -0,0 +1,40 @@
+import { getTemplate } from './storybook'
+
+jest.mock('./styles', () => ({
+  getClasses: (a) => (b) => ({ ...a, ...b }),
+}))
+
+describe('[ helpers / storybook ]', () => {
+  describe('#getTemplate', () => {
+    describe('when `Component`, `styles`, and `args` are provided', () => {
+      it('should return a `Component` with `defaultProps`, `styles` and `args`', () => {
+        // given
+        const Component = (props) => ({ props })
+        Component.defaultProps = { defaultProps: 'defaultProps', foo: 'bar' }
+
+        const styles = { styles: 'styles' }
+        const args = { args: 'args', foo: 'foo' }
+
+        // when
+        const result = getTemplate(Component, styles)(args)
+
+        // then
+        expect(result).toMatchInlineSnapshot(`
+          <Component
+            args="args"
+            defaultProps="defaultProps"
+            foo="foo"
+            getStyles={
+              Object {
+                "args": "args",
+                "defaultProps": "defaultProps",
+                "foo": "foo",
+                "styles": "styles",
+              }
+            }
+          />
+        `)
+      })
+    })
+  })
+})

package/helpers/styles.js

@@ -0,0 +1,37 @@
+import classNames from 'classnames'
+
+export const getDynamicClasses = (cssModule = {}, props = {}, classes) => {
+  return classes.reduce((classesObject, classKey) => {
+    const propValue = props[classKey]
+    const className = cssModule[`${classKey}-${propValue}`]
+
+    return className && propValue
+      ? { ...classesObject, [className]: propValue }
+      : classesObject
+  }, {})
+}
+
+export const getModuleClasses = (cssModule, classKey) => {
+  return (cssModule && cssModule[classKey]) || classKey
+}
+
+export const getObjectClasses = (cssModule, object) => {
+  return Object.keys(object).reduce((classes, classKey) => {
+    const className = cssModule[classKey]
+    return className ? { ...classes, [className]: object[classKey] } : classes
+  }, {})
+}
+
+export const getClasses = (cssModule = {}) => (props) => (...args) => {
+  return classNames(
+    args.map((arg) => {
+      if (Array.isArray(arg)) {
+        return getDynamicClasses(cssModule, props, arg)
+      } else if (typeof arg === 'string') {
+        return getModuleClasses(cssModule, arg)
+      } else if (typeof arg === 'object') {
+        return getObjectClasses(cssModule, arg)
+      }
+    })
+  )
+}

package/helpers/styles.test.js

@@ -0,0 +1,222 @@
+import {
+  getDynamicClasses,
+  getModuleClasses,
+  getObjectClasses,
+  getClasses,
+} from './styles'
+
+const cssModuleMock = {
+  ['size-sm']: '.xyz_size_sm',
+  ['color-red']: '.xyz_color_red',
+  ['is-editable']: '.xyz_is_editable',
+  ['is-inverted']: '.xyz_is_inverted',
+}
+
+const propsMock = { size: 'sm', color: 'red' }
+
+jest.mock('classnames', () => (value) => value)
+
+describe('[ helpers / styles ]', () => {
+  describe('#getDynamicClasses', () => {
+    describe('when all `props` match the `classes` array', () => {
+      it('should return the dynamic classes', () => {
+        // given
+        const args = ['size', 'color']
+        // when
+        const result = getDynamicClasses(cssModuleMock, propsMock, args)
+        // then
+        const expected = { '.xyz_size_sm': 'sm', '.xyz_color_red': 'red' }
+
+        expect(result).toStrictEqual(expected)
+      })
+    })
+
+    describe("when all `props` doesn't match the `classes` array", () => {
+      it('should return an empty object', () => {
+        // given
+        const args = ['type', 'width']
+        // when
+        const result = getDynamicClasses(cssModuleMock, propsMock, args)
+        // then
+        const expected = {}
+
+        expect(result).toStrictEqual(expected)
+      })
+    })
+
+    describe('when some `props` match the `array` classes', () => {
+      it('should return the dynamic classes', () => {
+        // given
+        const args = ['type', 'color']
+
+        // when
+        const result = getDynamicClasses(cssModuleMock, propsMock, args)
+        // then
+        const expected = { '.xyz_color_red': 'red' }
+
+        expect(result).toStrictEqual(expected)
+      })
+    })
+  })
+
+  describe('#getModuleClasses', () => {
+    describe('when `cssModule` contains the `classKey`', () => {
+      it('should return the module class', () => {
+        // given
+        const args = 'size-sm'
+        // when
+        const result = getModuleClasses(cssModuleMock, args)
+        // then
+        const expected = '.xyz_size_sm'
+
+        expect(result).toBe(expected)
+      })
+    })
+    describe("when `cssModule` doesn't contain the `classKey`", () => {
+      it('should return the `classKey`', () => {
+        // given
+        const args = 'type-primary'
+        // when
+        const result = getModuleClasses(cssModuleMock, args)
+        // then
+        const expected = 'type-primary'
+
+        expect(result).toBe(expected)
+      })
+    })
+
+    describe('when `cssModule` is undefined', () => {
+      it('should return the `classKey`', () => {
+        // given
+        const args = 'size-sm'
+        // when
+        const result = getModuleClasses(undefined, args)
+        // then
+        const expected = 'size-sm'
+
+        expect(result).toBe(expected)
+      })
+    })
+
+    describe('when `cssModule` is null', () => {
+      it('should return the `classKey`', () => {
+        // given
+        const args = 'size-sm'
+        // when
+        const result = getModuleClasses(null, args)
+        // then
+        const expected = 'size-sm'
+
+        expect(result).toBe(expected)
+      })
+    })
+  })
+
+  describe('#getObjectClasses', () => {
+    describe('when `cssModule` and `object` is provided', () => {
+      it('should return the object class', () => {
+        // given
+        const args = { 'is-editable': true, 'is-inverted': false }
+        // when
+        const result = getObjectClasses(cssModuleMock, args)
+        // then
+        const expected = { '.xyz_is_editable': true, '.xyz_is_inverted': false }
+
+        expect(result).toStrictEqual(expected)
+      })
+    })
+
+    describe("when the `object` doesn't match any `cssModule` class", () => {
+      it('should return an empty object', () => {
+        // given
+        const args = { 'is-block': true, 'is-inline': false }
+        // when
+        const result = getObjectClasses(cssModuleMock, args)
+        // then
+        const expected = {}
+
+        expect(result).toStrictEqual(expected)
+      })
+    })
+
+    describe('when the `object` match some `cssModule` class', () => {
+      it('should return an empty object', () => {
+        // given
+        const args = { 'is-editable': true, 'is-inline': false }
+        // when
+        const result = getObjectClasses(cssModuleMock, args)
+        // then
+        const expected = { '.xyz_is_editable': true }
+
+        expect(result).toStrictEqual(expected)
+      })
+    })
+
+    describe('when `object` is empty', () => {
+      it('should return an empty object', () => {
+        // given
+        const args = {}
+        // when
+        const result = getObjectClasses(cssModuleMock, args)
+        // then
+        const expected = {}
+
+        expect(result).toStrictEqual(expected)
+      })
+    })
+  })
+
+  describe('#getClasses', () => {
+    describe('when `arg` is an array', () => {
+      it('should return the classnames', () => {
+        // given
+        const args = ['size', 'color']
+        // when
+        const result = getClasses(cssModuleMock)(propsMock)(args)
+        // then
+        const expected = [{ '.xyz_size_sm': 'sm', '.xyz_color_red': 'red' }]
+
+        expect(result).toStrictEqual(expected)
+      })
+    })
+
+    describe('when `arg` is an string and `cssModule` contains the `classKey`', () => {
+      it('should return the classnames', () => {
+        // given
+        const args = 'size-sm'
+        // when
+        const result = getClasses(cssModuleMock)(propsMock)(args)
+        // then
+        const expected = ['.xyz_size_sm']
+
+        expect(result).toStrictEqual(expected)
+      })
+    })
+
+    describe("when `arg` is an string and `cssModule` doesn't contain the `classKey`", () => {
+      it('should return the classnames', () => {
+        // given
+        const args = 'width-full'
+        // when
+        const result = getClasses(cssModuleMock)(propsMock)(args)
+        // then
+        const expected = ['width-full']
+
+        expect(result).toStrictEqual(expected)
+      })
+    })
+
+    describe('when `arg` is an object', () => {
+      it('should return the classnames', () => {
+        // given
+        const args = { 'is-editable': true, 'is-block': true }
+        // when
+        const result = getClasses(cssModuleMock)(propsMock)(args)
+        // then
+        const expected = [{ '.xyz_is_editable': true }]
+
+        expect(result).toStrictEqual(expected)
+      })
+    })
+  })
+})

package/hocs/withStyles.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { getClasses } from '../helpers/styles'
+
+const withStyles = (styles) => (WrappedComponent) => {
+  const WithStylesComponent = (props) => {
+    const allProps = { ...WrappedComponent.defaultProps, ...props }
+    return (
+      <WrappedComponent getStyles={getClasses(styles)(allProps)} {...props} />
+    )
+  }
+
+  WithStylesComponent.displayName = WrappedComponent.displayName
+
+  return WithStylesComponent
+}
+
+export default withStyles