Merge pull request #31 from NicolasOmar/feature/create-widgets-structure

Feature | Create a 'Widgets' framework structure | Front End

.storybook/preview.js

@@ -22,7 +22,6 @@ export const parameters = {
 
 export const decorators = [
   (Story) => {
-    console.warn(`${useDarkMode() ? 'is' : 'is not'} using dark mode`)
     const toggleStyle = useDarkMode() ? 'dark-mode' : 'light-mode'
     document.body.classList.toggle(toggleStyle)
     return <Story />

README.md

@@ -42,7 +42,7 @@ Therefore, the following [link](https://my-pets-prod.netlify.app) sends you to t
 ## Find out more
 | [Project Status](https://github.com/users/NicolasOmar/projects/1/views/1) | [Storybook site](https://my-pets-storybook.netlify.app/) | [Node Repo](https://github.com/NicolasOmar/my-pets-api) |
 | :--- | :--- | :--- |
-| Trello board for project status tracking | Site dedicated to show and test all the created components | Node API repository
+| Project board for project status tracking | Site dedicated to show and test all the created components | Node API repository
 
 ## License
 **MIT**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-pets",
-  "version": "0.1.80",
+  "version": "0.1.82",
   "author": "Nicolás Omar González Passerino",
   "license": "MIT",
   "private": false,
@@ -119,7 +119,7 @@
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged && npm run build:styles && git add .storybook/styles.css public/styles/styles.css",
-      "pre-push": "npm run build && npm run build-storybook && npm test && npm run update-version"
+      "pre-push": "npm test && npm run build && npm run build-storybook && npm run update-version"
     }
   }
 }

src/components/atoms/BasicButton/index.jsx

@@ -4,7 +4,7 @@ import { bool, func, object, oneOf, string } from 'prop-types'
 import TAG_TYPES from '../../../constants/tag-types.json'
 import BULMA_STYLES from '../../../constants/bulma-styles.json'
 // FUNCTIONS
-import { parseConfigToClassName, parseObjKeys } from '../../../functions/parsers'
+import { parseFieldConfigToClasses, parseObjKeys } from '../../../functions/parsers'
 
 const { buttonTypes } = TAG_TYPES
 const { colors, sizes } = BULMA_STYLES
@@ -21,17 +21,19 @@ const BasicButton = ({
   isLoading = false,
   onClick
 }) => {
-  const btnClass = parseConfigToClassName({ isOutlined, isInverted, isLoading }, 'button', [
-    colors[color],
-    sizes[size]
-  ])
+  const btnClasses = parseFieldConfigToClasses({
+    useCommonClasses: true,
+    fieldConfig: { isOutlined, isInverted, isLoading },
+    fieldName: 'button',
+    otherClasses: [colors[color], sizes[size]]
+  })
 
   return (
     <button
       key={`${type}-button-${color}`}
       data-testid={`test-${type}-button-${color}`}
       type={type}
-      className={btnClass}
+      className={btnClasses}
       style={styles}
       disabled={isDisabled}
       onClick={onClick}

src/components/atoms/BasicInput/index.jsx

@@ -4,7 +4,7 @@ import { bool, func, string, number, oneOf, object } from 'prop-types'
 import TAG_TYPES from '../../../constants/tag-types.json'
 import BULMA_STYLES from '../../../constants/bulma-styles.json'
 // FUNCTIONS
-import { parseConfigToClassName, parseObjKeys } from '../../../functions/parsers'
+import { parseFieldConfigToClasses, parseObjKeys } from '../../../functions/parsers'
 
 const { inputTypes } = TAG_TYPES
 const { colors, sizes } = BULMA_STYLES
@@ -25,13 +25,19 @@ const BasicInput = ({
   onInputChange,
   onBlurChange
 }) => {
-  const inputClass = parseConfigToClassName({ isRounded }, 'input', [colors[color], sizes[size]])
+  const inputClasses = parseFieldConfigToClasses({
+    useCommonClasses: true,
+    fieldConfig: { isRounded },
+    fieldName: 'input',
+    otherClasses: [colors[color], sizes[size]]
+  })
+
   return (
     <input
       key={`${control}-${type}`}
       data-testid={`test-${control}-${type}`}
       type={type}
-      className={inputClass}
+      className={inputClasses}
       style={styles}
       value={value}
       placeholder={placeHolder}

src/components/atoms/BasicSelect/index.jsx

@@ -3,7 +3,7 @@ import { arrayOf, bool, func, number, shape, string, oneOf, object, oneOfType }
 // CONSTANTS
 import BULMA_STYLES from '../../../constants/bulma-styles.json'
 // FUNCTIONS
-import { parseConfigToClassName, parseObjKeys } from '../../../functions/parsers'
+import { parseFieldConfigToClasses, parseObjKeys } from '../../../functions/parsers'
 
 const { colors, sizes } = BULMA_STYLES
 
@@ -25,10 +25,12 @@ const BasicSelect = ({
   onBlurChange
 }) => {
   const multipleString = isMultiple ? 'multiple' : 'single'
-  const selectClass = parseConfigToClassName({ isMultiple, isLoading, isRounded }, 'select', [
-    colors[color],
-    sizes[size]
-  ])
+  const selectClasses = parseFieldConfigToClasses({
+    useCommonClasses: true,
+    fieldConfig: { isMultiple, isLoading, isRounded },
+    fieldName: 'select',
+    otherClasses: [colors[color], sizes[size]]
+  })
   const [selectedValue, setSelectedValue] = useState(
     isMultiple ? (Array.isArray(selected) ? selected : []) : selected
   )
@@ -79,7 +81,7 @@ const BasicSelect = ({
   }
 
   return (
-    <section key={`${multipleString}-${control}-section`} className={selectClass} style={styles}>
+    <section key={`${multipleString}-${control}-section`} className={selectClasses} style={styles}>
       <select
         key={`${multipleString}-${control}`}
         data-testid={`test-${multipleString}-${control}`}

src/components/atoms/Column/index.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { array, bool, element, elementType, object, oneOf, oneOfType, string } from 'prop-types'
+// CONSTANTS
+import BULMA_STYLES from '../../../constants/bulma-styles.json'
+// FUNCTIONS
+import { parseObjKeys, parseFieldConfigToClasses } from '../../../functions/parsers'
+
+const { columnSizes } = BULMA_STYLES
+
+const Column = ({
+  _key = null,
+  testId = null,
+  width = null,
+  isCentered = false,
+  isContainer = false,
+  isMultiline = false,
+  children = null,
+  styles = {}
+}) => {
+  const columnClasses = parseFieldConfigToClasses({
+    useCommonClasses: true,
+    fieldConfig: { isCentered, isMultiline },
+    fieldName: isContainer ? 'columns' : 'column',
+    otherClasses: width ? [columnSizes[width]] : []
+  })
+
+  return (
+    <section key={_key} data-testid={testId} className={columnClasses} style={styles}>
+      {children}
+    </section>
+  )
+}
+
+export default Column
+
+Column.propTypes = {
+  _key: string.isRequired,
+  testId: string.isRequired,
+  width: oneOf(parseObjKeys(columnSizes, true)),
+  isCentered: bool,
+  isContainer: bool,
+  isMultiline: bool,
+  children: oneOfType([element, array, elementType]),
+  styles: object
+}

src/components/atoms/Column/index.stories.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import Column from '.'
+// APP_ROUTES
+import { STORYBOOK_ROUTES } from '../../../constants/routes.json'
+// CONSTANTS
+import { columnSizes } from '../../../constants/bulma-styles.json'
+// FUNCTIONS
+import { parseObjKeys } from '../../../functions/parsers'
+// MOCKS
+// import mocks from './index.mocks.json'
+
+export default {
+  title: `${STORYBOOK_ROUTES.ATOMS}/Column`,
+  component: Column,
+  argTypes: {
+    width: {
+      options: parseObjKeys(columnSizes)
+    }
+  }
+  // args: mocks.minimalConfig
+}
+
+const Template = args => <Column {...args} />
+
+export const Minimal = Template.bind({})
+Minimal.storyName = 'Minimal config'

src/components/atoms/NavBarItem/index.stories.jsx

@@ -8,7 +8,7 @@ import TitleHeader from '../TitleHeader'
 import mocks from './index.mocks.json'
 
 export default {
-  title: `${STORYBOOK_ROUTES.ATOMS}/NavbarItem`,
+  title: `${STORYBOOK_ROUTES.ATOMS}/NavBarItem`,
   component: NavBarItem,
   args: mocks.minimalConfig
 }

src/components/atoms/ProgressBar/index.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+// CONSTANTS
+import { bool, number, oneOf } from 'prop-types'
+import BULMA_STYLES from '../../../constants/bulma-styles.json'
+// FUNCTIONS
+import { parseFieldConfigToClasses, parseObjKeys } from '../../../functions/parsers'
+
+const { colors, sizes } = BULMA_STYLES
+
+const ProgressBar = ({
+  value = 0,
+  maxValue = 100,
+  isLoading = false,
+  color = parseObjKeys(colors)[7],
+  size = parseObjKeys(sizes)[1]
+}) => {
+  const progressClasses = parseFieldConfigToClasses({
+    fieldName: 'progress',
+    otherClasses: [colors[color], sizes[size]]
+  })
+
+  return isLoading ? (
+    <progress
+      data-testid="test-loading-progress-bar"
+      className={progressClasses}
+      max={maxValue}
+    ></progress>
+  ) : (
+    <progress
+      data-testid="test-progress-bar"
+      className={progressClasses}
+      value={value}
+      max={maxValue}
+    >
+      {`${value}%`}
+    </progress>
+  )
+}
+
+export default ProgressBar
+
+ProgressBar.propTypes = {
+  // BASE PROPS
+  value: number,
+  maxValue: number,
+  isLoading: bool,
+  // STYLE PROPS
+  color: oneOf(parseObjKeys(colors)),
+  size: oneOf(parseObjKeys(sizes))
+}

src/components/atoms/ProgressBar/index.mocks.json

@@ -0,0 +1,14 @@
+{
+  "isHalfSize": {
+    "value": 50
+  },
+  "isSuccessColor": {
+    "color": "success"
+  },
+  "isLargeSize": {
+    "size": "large"
+  },
+  "isLoading": {
+    "isLoading": true
+  }
+}

src/components/atoms/ProgressBar/index.stories.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import ProgressBar from '.'
+// APP_ROUTES
+import { STORYBOOK_ROUTES } from '../../../constants/routes.json'
+// CONSTANTS
+import { colors, sizes } from '../../../constants/bulma-styles.json'
+// FUNCTIONS
+import { parseObjKeys } from '../../../functions/parsers'
+// MOCKS
+import mocks from './index.mocks.json'
+
+export default {
+  title: `${STORYBOOK_ROUTES.ATOMS}/ProgressBar`,
+  component: ProgressBar,
+  argTypes: {
+    color: {
+      options: parseObjKeys(colors)
+    },
+    size: {
+      options: parseObjKeys(sizes)
+    }
+  }
+}
+
+const Template = args => <ProgressBar {...args} />
+
+export const Minimal = Template.bind({})
+Minimal.storyName = 'Minimal config'
+
+export const IsHalfSize = Template.bind({})
+IsHalfSize.storyName = 'Is half size'
+IsHalfSize.args = mocks.isHalfSize
+
+export const IsSuccessColor = Template.bind({})
+IsSuccessColor.storyName = 'Has other color'
+IsSuccessColor.args = {
+  ...IsHalfSize.args,
+  ...mocks.isSuccessColor
+}
+
+export const IsLargeSize = Template.bind({})
+IsLargeSize.storyName = 'Has large size'
+IsLargeSize.args = {
+  ...IsSuccessColor.args,
+  ...mocks.isLargeSize
+}
+
+export const isLoading = Template.bind({})
+isLoading.storyName = 'Is just loading'
+isLoading.args = {
+  ...IsLargeSize.args,
+  ...mocks.isLoading
+}