imbric-theme 0.1.1 → 0.1.3

package/.dockerignore

@@ -0,0 +1,14 @@
+# Config folders
+.idea/
+.vscode/
+
+# Generated by MacOS
+.DS_Store
+
+# Generated by Windows
+Thumbs.db
+
+# Cache & build files
+node_modules/
+storybook-static/
+.eslintcache

package/.eslintignore

@@ -0,0 +1 @@
+node_modules

package/.prettierignore

@@ -0,0 +1 @@
+node_modules

package/.storybook/main.js

@@ -3,7 +3,11 @@ const cssModules = require('../webpack/cssModules')
 const reactInlineSvg = require('../webpack/reactInlineSvg')
 
 module.exports = {
-  stories: ['../{tokens,atoms,molecules,layout}/**/*.stories.@(js|mdx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  stories: ['../{tokens,atoms,molecules,layout,pages}/**/*.stories.@(js|mdx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', 'storybook-addon-theme-changer'],
+  staticDirs: ['../public'],
   webpackFinal: loadConfigs([cssModules, reactInlineSvg]),
+  features: {
+    postcss: false,
+  },
 }

package/.storybook/preview.js

@@ -3,6 +3,13 @@ import React from 'react'
 import 'minireset.css'
 import '../styles/globals.css'
 import '../styles/tokens.css'
+import '../styles/GrupoMutua.css'
+import '../styles/taxisvalencia.css'
+import '../styles/radiotaxiaragon.css'
+import '../styles/spartan.css'
+import '../styles/default.css'
+import '../styles/tagos.css'
+
 
 const getStyles = ({ __sb } = {}) => ({
   display: 'flex',
@@ -30,3 +37,17 @@ export const parameters = {
   },
   actions: { argTypesRegex: '^on[A-Z].*' },
 }
+
+export const globalTypes = {
+  themes: {
+    defaultValue: [
+      "Imbric",
+      "Default",
+      "GrupoMutua",
+      "Taxisvalencia",
+      "Radiotaxiaragon",
+      "Spartan",
+      "Tagos",
+    ],
+  }
+}

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}

package/Dockerfile

@@ -0,0 +1,17 @@
+FROM node:18-alpine
+
+## set environment stage
+ENV PATH /app/node_modules/.bin:$PATH
+ENV NODE_OPTIONS --openssl-legacy-provider
+WORKDIR /app
+COPY . /app/
+
+## build app stage
+RUN yarn install --network-timeout 200000 \
+    && yarn build
+
+## final image stage
+FROM nginx:alpine
+COPY --from=0 /app/storybook-static/ /usr/share/nginx/html/
+
+EXPOSE 80

package/README.md

@@ -16,11 +16,11 @@
 
 _Using NPM_
 ```bash
-npm install ....
+npm install imbric-theme
 ```
 _Using Yarn_
 ```bash
-yarn add ....
+yarn add imbric-theme
 ```
 
 #### 2. Using the library

package/atoms/AlertModal/AlertModal.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './AlertModal.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+import withReactContent from 'sweetalert2-react-content'
+import Swal from 'sweetalert2'
+
+export const AlertModal = ({
+  children,
+  getStyles,
+  titleAlert,
+  subTitleAlert,
+  iconAlert,
+  txtBtnAlert,
+  txtBtnAlertCancel,
+  showCancelButton,
+  onConfirm,
+  onDismiss,
+}) => {
+
+  const MySwal = withReactContent(Swal)
+
+  MySwal.fire({
+    title: titleAlert,
+    icon: iconAlert,
+    html: subTitleAlert,
+    confirmButtonText: txtBtnAlert,
+    cancelButtonText: txtBtnAlertCancel,
+    showCancelButton: showCancelButton,
+  }).then((result) => {
+    if (result.isConfirmed || (result.isDismissed && !onDismiss)) {
+      onConfirm()
+    } else if (result.isDismissed) {
+      onDismiss()
+    }
+  })
+
+
+  return <div className={getStyles('alert-modal')}>{children}</div>
+}
+
+AlertModal.propTypes = {
+  children: PropTypes.node,
+  getStyles: PropTypes.func.isRequired,
+  titleAlert: PropTypes.string.isRequired,
+  subTitleAlert: PropTypes.string.isRequired,
+  txtBtnAlert: PropTypes.string.isRequired,
+  txtBtnAlertCancel: PropTypes.string,
+  iconAlert: PropTypes.oneOf(options.icon),
+  onConfirm: PropTypes.func,
+  onDismiss: PropTypes.func,
+  showCancelButton: PropTypes.bool,
+}
+
+AlertModal.defaultProps = {
+  getStyles: () => { },
+  onConfirm: () => { },
+  // onDismiss: () => {}, // Not default for use onConfirm if is undefined
+  titleAlert: 'Felicidades!',
+  subTitleAlert: 'Todo ha ido correctamente',
+  txtBtnAlert: 'Ok',
+  txtBtnAlertCancel: 'Cancelar',
+  iconAlert: 'success',
+  showCancelButton: false,
+}
+
+export default withStyles(styles)(AlertModal)

package/atoms/AlertModal/AlertModal.module.css

@@ -0,0 +1,3 @@
+.alert-modal {
+  display: flex;
+}

package/atoms/AlertModal/AlertModal.stories.js

@@ -0,0 +1,30 @@
+import { AlertModal, styles, options } from '.'
+options
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(AlertModal, styles)
+const ListTemplate = getListTemplate(AlertModal, styles)
+
+export default {
+  title: 'Atoms/AlertModal',
+  component: AlertModal,
+  args: {
+    titleAlert: 'Felicidades!',
+    subTitleAlert:  'Ejemplo de subtitulo',
+    txtBtnAlert:  'Aceptar',
+    // resultIsConfirmed: true,
+    // resultIsDenied: '',
+  },
+  argTypes: {
+    iconAlert: getOptionsArgTypes(options.icon),
+  },
+}
+
+export const Default = Template.bind({})
+// export const List = ListTemplate.bind({})
+// List.args = { items: options.types.map((type) => ({ type })) }

package/atoms/AlertModal/constants.js

@@ -0,0 +1,4 @@
+export const options = {
+    icon: ['success', 'error', 'warning', 'info', 'question'],
+  }
+  

package/atoms/AlertModal/index.js

@@ -0,0 +1,3 @@
+export { default, AlertModal } from './AlertModal'
+export { options } from './constants'
+export { default as styles } from './AlertModal.module.css'

package/atoms/Button/Button.js

@@ -20,13 +20,21 @@ export const Button = ({
   addons,
   isMuted,
   isInline,
+  isFloatRight,
+  isFloatLeft,
   onClick,
+  id,
   getStyles,
 }) => (
   <button
+  id={id}
+    type="submit"
+    disabled={isMuted}
     className={getStyles('button', ['type'], {
       'is-inline': isInline || type === 'tertiary',
       'is-muted': isMuted && type === 'primary',
+      'is-float-right': isFloatRight,
+      'is-float-left': isFloatLeft,
     })}
     onClick={onClick && handleClick({ onClick })}
   >
@@ -37,6 +45,7 @@ export const Button = ({
       isCentered
       isInline={isObject(addons) && !isEmpty(addons)}
       weight={'light'}
+      size={'xs'}
     >
       {children}
     </Heading>
@@ -56,13 +65,19 @@ Button.propTypes = {
   onClick: PropTypes.func,
   isInline: PropTypes.bool,
   isMuted: PropTypes.bool,
+  isFloatRight: PropTypes.bool,
+  isFloatLeft: PropTypes.bool,
+  id: PropTypes.string,
 }
 
 Button.defaultProps = {
   type: 'primary',
-  getStyles: () => {},
-  onClick: () => {},
+  getStyles: () => { },
+  onClick: () => { },
   isInline: false,
+  isFloatRight: false,
+  isFloatLeft: false,
+  id: '',
 }
 
 export default withStyles(styles)(Button)

package/atoms/Button/Button.module.css

@@ -2,10 +2,10 @@
   display: inline-flex;
   width: 100%;
   min-width: max-content;
-  height: 45px;
+  height: 40px;
   align-items: center;
   justify-content: center;
-  padding: 20px 30px;
+  padding: 12px 30px;
   border: var(--border-width-thin) solid var(--color-base-transparent);
   border-radius: var(--button-border-radius-none);
   box-shadow: var(--box-shadow-sm);
@@ -13,6 +13,17 @@
   transition: filter 0.5s ease, box-shadow 0.2s ease-in;
 }
 
+[data-theme="GrupoMutua"] .button {
+  border-radius: var(--button-border-radius-sm);
+}
+
+[data-theme="Taxisvalencia"] .button,
+[data-theme="Radiotaxiaragon"] .button,
+[data-theme="Spartan"] .button,
+[data-theme="Default"] .button {
+  border-radius: var(--button-border-radius-sm);
+}
+
 .button:focus {
   box-shadow: 0 0 0 1px var(--color-primary), 0 0 10px 0 var(--color-primary);
   outline: none;
@@ -59,5 +70,16 @@
 }
 
 .is-muted {
-  background: var(--color-primary-muted);
+  background: var(--color-font-muted);
+  cursor: default;
+  box-shadow: var(--box-shadow-none) !important;
+  filter: brightness(1) !important;
 }
+
+.is-float-right {
+  float: right;
+}
+
+.is-float-left {
+  float: left;
+}

package/atoms/Button/Button.stories.js

@@ -12,7 +12,7 @@ export default {
   title: 'Atoms/Button',
   component: Button,
   args: {
-    children: 'You Shall Not Pass!',
+    children: 'Sed ut perspiciatis unde!',
   },
   argTypes: {
     type: getOptionsArgTypes(options.types),

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

@@ -22,7 +22,7 @@ exports[`Storyshots Atoms/Button Addon Append 1`] = `
     <h1
       className="heading color-inverted size-md weight-light is-centered is-inline"
     >
-      You Shall Not Pass!
+      Sed ut perspiciatis unde!
     </h1>
     But ill-tempered Thengel.
   </button>
@@ -52,7 +52,7 @@ exports[`Storyshots Atoms/Button Addon Prepend 1`] = `
     <h1
       className="heading color-inverted size-md weight-light is-centered is-inline"
     >
-      You Shall Not Pass!
+      Sed ut perspiciatis unde!
     </h1>
   </button>
 </div>
@@ -80,7 +80,7 @@ exports[`Storyshots Atoms/Button Default 1`] = `
     <h1
       className="heading color-inverted size-md weight-light is-centered"
     >
-      You Shall Not Pass!
+      Sed ut perspiciatis unde!
     </h1>
   </button>
 </div>
@@ -108,7 +108,7 @@ exports[`Storyshots Atoms/Button Inline 1`] = `
     <h1
       className="heading color-inverted size-md weight-light is-centered"
     >
-      You Shall Not Pass!
+      Sed ut perspiciatis unde!
     </h1>
   </button>
 </div>
@@ -136,7 +136,7 @@ exports[`Storyshots Atoms/Button Muted 1`] = `
     <h1
       className="heading color-inverted size-md weight-light is-centered"
     >
-      You Shall Not Pass!
+      Sed ut perspiciatis unde!
     </h1>
   </button>
 </div>
@@ -164,7 +164,7 @@ exports[`Storyshots Atoms/Button Types 1`] = `
     <h1
       className="heading color-inverted size-md weight-light is-centered"
     >
-      You Shall Not Pass!
+      Sed ut perspiciatis unde!
     </h1>
   </button>
   <button
@@ -174,7 +174,7 @@ exports[`Storyshots Atoms/Button Types 1`] = `
     <h1
       className="heading color-primary size-md weight-light is-centered"
     >
-      You Shall Not Pass!
+      Sed ut perspiciatis unde!
     </h1>
   </button>
   <button
@@ -184,7 +184,7 @@ exports[`Storyshots Atoms/Button Types 1`] = `
     <h1
       className="heading color-primary size-md weight-light is-centered"
     >
-      You Shall Not Pass!
+      Sed ut perspiciatis unde!
     </h1>
   </button>
 </div>

package/atoms/Check/Check.js

@@ -6,21 +6,23 @@ import Icon from '../Icon'
 import styles from './Check.module.css'
 import withStyles from '../../hocs/withStyles'
 
-export const Check = ({ isChecked, getStyles }) => {
+export const Check = ({ isChecked, getStyles, onClickChecked }) => {
   return isChecked ? (
-    <Icon name="checkCircle" color="muted" isClickable />
+    <Icon name="checkCircle" color="muted" isClickable onClick={onClickChecked} />
   ) : (
-    <span className={getStyles('check')} />
+    <span onClick={onClickChecked} className={getStyles('check')} />
   )
 }
 
 Check.propTypes = {
   getStyles: PropTypes.func.isRequired,
   isChecked: PropTypes.bool,
+  onClickChecked: PropTypes.func,
 }
 
 Check.defaultProps = {
-  getStyles: () => {},
+  getStyles: () => { },
+  onClickChecked: () => { },
 }
 
 export default withStyles(styles)(Check)

package/atoms/Checkbox/Checkbox.js

@@ -0,0 +1,77 @@
+import { useState } from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Checkbox.module.css'
+import withStyles from '../../hocs/withStyles'
+
+export const Checkbox = ({
+  getStyles,
+  onChange,
+  label,
+  id,
+  value,
+  name,
+  linkCheck,
+  nameLinkCheck,
+  handleClick,
+  disabled,
+}) => {
+  const [checked, setChecked] = useState(value)
+
+  return (
+    <div className={getStyles('checkbox')}>
+      <input
+        className={getStyles('checkbox-custom', { 'is-disabled': disabled })}
+        type="checkbox"
+        id={id}
+        name={name}
+        label={label}
+        checked={checked}
+        onChange={(e) => {
+          setChecked(!checked)
+          onChange(e)
+        }}
+        onClick={handleClick}
+        disabled={disabled}
+      />
+      <label htmlFor={name} className={getStyles('checkbox-custom-label')}>
+        {label}
+        <a
+          className={getStyles('checkbox-custom-link')}
+          href={linkCheck}
+          target="_black"
+        >
+          {' '}
+          {nameLinkCheck}
+        </a>{' '}
+      </label>
+    </div>
+  )
+}
+
+Checkbox.propTypes = {
+  getStyles: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.bool.isRequired,
+  label: PropTypes.string,
+  nameLinkCheck: PropTypes.string,
+  linkCheck: PropTypes.string,
+  disabled: PropTypes.bool,
+}
+
+Checkbox.defaultProps = {
+  getStyles: () => { },
+  onChange: () => { },
+  id: 'checkbox',
+  name: 'checkbox',
+  value: true,
+  label: 'Aceptas los terminos',
+  nameLinkCheck: '',
+  linkCheck: '',
+  handleClick: () => { },
+  disabled: false,
+}
+
+export default withStyles(styles)(Checkbox)

package/atoms/Checkbox/Checkbox.module.css

@@ -0,0 +1,60 @@
+.checkbox {
+  display: flex;
+}
+
+/* ////////////////////// */
+
+
+.checkbox-custom {
+  opacity: 0;
+  position: absolute;
+}
+
+.checkbox-custom,
+.checkbox-custom-label {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 5px;
+  cursor: pointer;
+  color: var(--color-brand-regent-gray);
+  font-weight: var(--font-weight-light);
+}
+
+.checkbox-custom+.checkbox-custom-label:before {
+  content: '';
+  background: #fff;
+  border-radius: 5px;
+  border: 2px solid #ddd;
+  display: inline-block;
+  vertical-align: middle;
+  width: 10px;
+  height: 10px;
+  padding: 2px;
+  margin-right: 10px;
+  text-align: center;
+}
+
+.checkbox-custom:checked+.checkbox-custom-label:before {
+  content: "";
+  display: inline-block;
+  width: 1px;
+  height: 5px;
+  border: solid var(--color-brand-smalt);
+  border-width: 0 3px 3px 0;
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  border-radius: 0px;
+  margin: 0px 15px 5px 5px;
+}
+
+.checkbox-custom,
+.checkbox-custom-link {
+  font-weight: var(--font-weight-normal);
+  color: var(--color-primary);
+  text-decoration: underline;
+}
+
+.is-disabled {
+  cursor: no-drop;
+}

package/atoms/Checkbox/Checkbox.stories.js

@@ -0,0 +1,30 @@
+import { Checkbox, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Checkbox, styles)
+const ListTemplate = getListTemplate(Checkbox, styles)
+
+export default {
+  title: 'Atoms/Checkbox',
+  component: Checkbox,
+  args: {
+    id: 'hola',
+    name: 'hola',
+    value: true,
+    label: 'Hola',
+    nameLinkCheck: '',
+    linkCheck: '',
+  },
+  argTypes: {
+    // types: getOptionsArgTypes(options.types),
+  },
+}
+
+export const Default = Template.bind({})
+// export const List = ListTemplate.bind({})
+// List.args = { items: options.types.map((type) => ({ type })) }

package/atoms/Checkbox/constants.js

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

package/atoms/Checkbox/index.js

@@ -0,0 +1,3 @@
+export { default, Checkbox } from './Checkbox'
+export { options } from './constants'
+export { default as styles } from './Checkbox.module.css'

package/atoms/Divider/Divider.js

@@ -2,18 +2,21 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import styles from './Divider.module.css'
+import { options } from './constants'
 import withStyles from '../../hocs/withStyles'
 
-export const Divider = ({ getStyles }) => {
-  return <div className={getStyles('divider')} />
+export const Divider = ({ color, getStyles }) => {
+  return <div className={getStyles('divider', ['color'])} />
 }
 
 Divider.propTypes = {
   getStyles: PropTypes.func.isRequired,
+  color: PropTypes.oneOf(options.colors),
 }
 
 Divider.defaultProps = {
   getStyles: () => {},
+  color: 'primary',
 }
 
 export default withStyles(styles)(Divider)

package/atoms/Divider/Divider.module.css

@@ -3,3 +3,23 @@
   height: 1px;
   background: var(--color-font-base);
 }
+
+.color-primary {
+  background: var(--color-primary);
+}
+
+.color-secondary {
+  background: var(--color-secondary);
+}
+
+.color-tertiary {
+  background: var(--color-tertiary);
+}
+
+.color-highlight {
+  background: var(--color-primary-highlight);
+}
+
+.color-inverted {
+  background: var(--color-primary-inverted);
+}

package/atoms/Divider/Divider.stories.js

@@ -1,12 +1,23 @@
-import { Divider, styles } from '.'
+import { Divider, styles, options } from '.'
 
-import { getTemplate } from '../../helpers/storybook'
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
 
 const Template = getTemplate(Divider, styles)
+const ListTemplate = getListTemplate(Divider, styles)
 
 export default {
   title: 'Atoms/Divider',
   component: Divider,
+  argTypes: {
+    color: getOptionsArgTypes(options.colors),
+  },
 }
 
 export const Default = Template.bind({})
+
+export const Colors = ListTemplate.bind({})
+Colors.args = { items: options.colors.map((color) => ({ color })) }