imbric-theme 0.1.0

package/atoms/Toggle/Toggle.stories.js

@@ -0,0 +1,21 @@
+import { Toggle, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Toggle, styles)
+const ListTemplate = getListTemplate(Toggle, styles)
+
+export default {
+  title: 'Atoms/Toggle',
+  component: Toggle,
+  args: {},
+  argTypes: {
+    // types: getOptionsArgTypes(options.types),
+  },
+}
+
+export const Default = Template.bind({})

package/atoms/Toggle/constants.js

@@ -0,0 +1 @@
+export const options = { types: [] }

package/atoms/Toggle/index.js

@@ -0,0 +1,3 @@
+export { default, Toggle } from './Toggle'
+export { options } from './constants'
+export { default as styles } from './Toggle.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:**') => ({
+  description: description,
+  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

package/hook/useAddColumn.js

@@ -0,0 +1,40 @@
+const useAddColumn = (event) => {
+
+    let listKeyColumnOrder = []
+
+    event.forEach(element => {
+      listKeyColumnOrder[element.value] = true
+    });
+
+    for (const itemAddColumns of addColumsData) {
+      if (listKeyColumnOrder[itemAddColumns.value]) {
+        itemAddColumns.activeView = true
+      } else {
+        itemAddColumns.activeView = false
+      }
+    }
+
+
+    for (const itemEvent of addColumsData) {
+
+      for (const itemColumns of columnsData) {
+
+        if (itemColumns.accessor === itemEvent.value) {
+
+          if (itemEvent.activeView) {
+            itemColumns.activeView = true
+          } else {
+            itemColumns.activeView = false
+          }
+
+
+        }
+      }
+
+    }
+
+    setColumnsData([])
+
+  }
+
+  export default useAddColumn

package/hook/useMedia.js

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react'
+
+const useMedia = (queries, values, defaultValue) => {
+  const mediaQueryLists = queries.map((q) => window.matchMedia(q))
+  const getValue = () => {
+    const index = mediaQueryLists.findIndex((mql) => mql.matches)
+    return typeof values[index] !== 'undefined' ? values[index] : defaultValue
+  }
+
+  const [value, setValue] = useState(getValue)
+
+  useEffect(() => {
+    const handler = () => setValue(getValue)
+    mediaQueryLists.forEach((mql) => mql.addListener(handler))
+
+    return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler))
+  }, [])
+
+  return value
+}
+
+export default useMedia

package/hook/useStateDate.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react'
+import {
+    addDays,
+  } from "date-fns";
+
+const useStateDate = () => {
+
+    const [state, setState] = useState([
+        {
+          startDate: addDays(new Date(), -59),
+          endDate: new Date(),
+          key: 'selection',
+        }
+      ]);
+
+
+      useEffect(() => {
+
+      }, [state]);
+
+
+  return { state, setState }
+}
+
+export default useStateDate

package/hook/useTable.js

@@ -0,0 +1,54 @@
+import { useState, useEffect } from 'react'
+
+const calculateRange = (dataTotalQueryCount, data, rowsPerPage) => {
+	const range = []
+	if (!data) {
+		var num = Math.ceil(1)
+	} else {
+		// num = Math.ceil(data.length / rowsPerPage)
+		num = Math.ceil(dataTotalQueryCount / rowsPerPage)
+	}
+
+	// const num = Math.ceil(data.length / rowsPerPage);
+
+	// let i = 1;
+	for (let i = 1; i <= num; i++) {
+		range.push(i)
+	}
+	return range
+}
+
+// const sliceData = (data, page, rowsPerPage) => {
+// 	if (!data) {
+// 		return (data = [])
+// 	} else {
+// 		// return data.slice((page - 1) * rowsPerPage, page * rowsPerPage)
+// 		return data
+// 	}
+// }
+
+const sliceData = (data) => {
+	if (!data) {
+		return (data = [])
+	} else {
+		// return data.slice((page - 1) * rowsPerPage, page * rowsPerPage)
+		return data
+	}
+}
+
+const useTable = (dataTotalQueryCount, data, page, rowsPerPage) => {
+	const [tableRange, setTableRange] = useState([])
+	const [slice, setSlice] = useState([])
+
+	useEffect(() => {
+		const range = calculateRange(dataTotalQueryCount, data, rowsPerPage)
+		setTableRange([...range])
+
+		const slice = sliceData(data, page, rowsPerPage)
+		setSlice([...slice])
+	}, [dataTotalQueryCount, data, setTableRange, page, setSlice, rowsPerPage])
+
+	return { slice, range: tableRange }
+}
+
+export default useTable

package/index.js

@@ -0,0 +1,71 @@
+// Pages
+export { default as Login } from './pages/Login'
+
+// Layout
+export { default as CenteredContent } from './layout/CenteredContent'
+export { default as Container } from './layout/Container'
+export { default as FullHeightContent } from './layout/FullHeightContent'
+export { default as FlexColumnContent } from './layout/FlexColumnContent'
+export { default as Spacer } from './layout/Spacer'
+export { default as Sidebar } from './layout/Sidebar'
+export { default as Navbar } from './layout/Navbar'
+export { default as DynamicTable } from './layout/DynamicTable'
+
+
+// Atoms
+export { default as AlertModal } from './atoms/AlertModal'
+export { default as Avatar } from './atoms/Avatar'
+export { default as Button } from './atoms/Button'
+export { default as Card } from './atoms/Card'
+export { default as Check } from './atoms/Check'
+export { default as Checkbox } from './atoms/Checkbox'
+export { default as Divider } from './atoms/Divider'
+export { default as Heading } from './atoms/Heading'
+export { default as Icon } from './atoms/Icon'
+export { default as Input } from './atoms/Input'
+export { default as Label } from './atoms/Label'
+export { default as LinkItem } from './atoms/LinkItem'
+export { default as Loading } from './atoms/Loading'
+export { default as Modal } from './atoms/Modal'
+export { default as Paragraph } from './atoms/Paragraph'
+export { default as Picture } from './atoms/Picture'
+export { default as Textarea } from './atoms/Textarea'
+export { default as Tab } from './atoms/Tab'
+export { default as Toggle } from './atoms/Toggle'
+
+
+
+// Molecules
+export { default as Accordion } from './molecules/Accordion'
+export { default as AddButton } from './molecules/AddButton'
+export { default as ButtonIcon } from './molecules/ButtonIcon'
+export { default as CardServiceDetail } from './molecules/CardServiceDetail'
+export { default as CardServices } from './molecules/CardServices'
+export { default as CardServicesFinalized } from './molecules/CardServicesFinalized'
+export { default as CardProductTypesBooking } from './molecules/CardProductTypesBooking'
+export { default as Dropdown } from './molecules/Dropdown'
+export { default as LoadingError } from './molecules/LoadingError'
+export { default as Score } from './molecules/Score'
+export { default as Task } from './molecules/Task'
+export { default as TaskCounter } from './molecules/TaskCounter'
+export { default as IconLabel } from './molecules/IconLabel'
+export { default as ItemMenu } from './molecules/ItemMenu'
+export { default as InputAutocomplete } from './molecules/InputAutocomplete'
+export { default as CheckList } from './molecules/CheckList'
+export { default as ColumnTable } from './molecules/ColumnTable'
+export { default as RowTable } from './molecules/RowTable'
+export { default as FooterTable } from './molecules/FooterTable'
+export { default as DynamicSelect } from './molecules/DynamicSelect'
+export { default as DatePicker } from './molecules/DynamicSelect'
+export { default as CardDefault } from './molecules/CardDefault'
+export { default as Tabs } from './molecules/Tabs'
+export { default as DatePickerTime } from './molecules/DatePickerTime'
+
+
+
+
+export { default as useTable } from './hook/useTable'
+export { default as useStateDate } from './hook/useStateDate'
+
+
+

package/jest.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+  moduleNameMapper: {
+    '\\.css$': 'identity-obj-proxy',
+    '\\.svg$': '<rootDir>/utils/testUtils/svgrMock.js',
+  },
+  setupFilesAfterEnv: ['./jest.setup.js'],
+  transform: {
+    '^.+\\.stories\\.jsx?$': '@storybook/addon-storyshots/injectFileName',
+    '^.+\\.jsx?$': 'babel-jest',
+  },
+  collectCoverageFrom: [
+    '{atoms,molecules,layout,pages}/**/!(index).js',
+    '{hocs,helpers}/*.js',
+  ],
+  coverageThreshold: {
+    global: {
+      statements: 60,
+      branches: 60,
+      lines: 60,
+      functions: 60,
+    },
+  },
+}

package/jest.setup.js

@@ -0,0 +1,13 @@
+// https://console.spec.whatwg.org/#loglevel-severity
+const CONSOLE_LEVELS = ['debug', 'log', 'info', 'warn', 'error']
+
+// Notice that by default the levels will be ["error"]
+const allowedConsoleLevels = CONSOLE_LEVELS.slice(
+  CONSOLE_LEVELS.indexOf(process.env.CONSOLE_LEVEL)
+)
+
+global.console = CONSOLE_LEVELS.reduce((levels, level) => {
+  return allowedConsoleLevels.includes(level)
+    ? { ...levels, [level]: console[level] }
+    : { ...levels, [level]: jest.fn() }
+}, {})

package/layout/CenteredContent/CenteredContent.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './CenteredContent.module.css'
+import withStyles from '../../hocs/withStyles'
+
+export const CenteredContent = ({ getStyles, children, isPlayground }) => {
+  return (
+    <div
+      className={getStyles('centered-content', {
+        'is-playground': isPlayground,
+      })}
+    >
+      {children}
+    </div>
+  )
+}
+
+CenteredContent.propTypes = {
+  children: PropTypes.node.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  isPlayground: PropTypes.bool,
+}
+
+CenteredContent.defaultProps = {
+  isPlayground: false,
+  getStyles: () => {},
+}
+
+export default withStyles(styles)(CenteredContent)

package/layout/CenteredContent/CenteredContent.module.css

@@ -0,0 +1,12 @@
+.centered-content {
+  display: flex;
+  height: 100%;
+  flex: auto;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.is-playground {
+  border: var(--border-width-thick) dashed var(--color-primary);
+}