imbric-theme 0.1.0

package/.babelrc.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

package/.commitlintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["@commitlint/config-conventional"]
+}

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/.editorconfig

@@ -0,0 +1,13 @@
+# https://github.com/airbnb/javascript/blob/master/.editorconfig
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf
+
+[CHANGELOG.md]
+indent_size = false

package/.eslintignore

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

package/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true,
+    "jest": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+    "plugin:storybook/recommended"
+  ],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "plugins": ["react"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "react/forbid-prop-types": "warn"
+  }
+}

package/.huskyrc.json

@@ -0,0 +1,6 @@
+{
+  "hooks": {
+    "pre-commit": "lint-staged",
+    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+  }
+}

package/.lintstagedrc.json

@@ -0,0 +1,5 @@
+{
+  "*.js": "yarn lint:js:fix",
+  "*.json": "yarn lint:json:fix",
+  "*.css": "yarn lint:css:fix"
+}

package/.nvmrc

@@ -0,0 +1 @@
+v15

package/.prettierignore

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

package/.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

package/.releaserc.json

@@ -0,0 +1,13 @@
+{
+  "release": {
+    "branches": ["master", "next"]
+  },
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/changelog",
+    "@semantic-release/npm",
+    "@semantic-release/github",
+    "@semantic-release/git"
+  ]
+}

package/.storybook/main.js

@@ -0,0 +1,13 @@
+const loadConfigs = require('../webpack/loadConfigs')
+const cssModules = require('../webpack/cssModules')
+const reactInlineSvg = require('../webpack/reactInlineSvg')
+
+module.exports = {
+  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-head.html

@@ -0,0 +1,2 @@
+<link href="https://fonts.googleapis.com/css2?family=Exo:wght@100;300;500;700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">

package/.storybook/preview.js

@@ -0,0 +1,53 @@
+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',
+  flexDirection: __sb?.fd || 'column',
+  maxHeight: __sb?.mh || 'auto',
+  justifyContent: 'flex-start',
+  alignContent: 'flex-start',
+  flexWrap: 'wrap',
+  height: '100%',
+  gap: '10px 30px',
+})
+
+export const decorators = [
+  (Story, { parameters }) => (
+    <div style={getStyles(parameters)}>
+      <Story />
+    </div>
+  ),
+]
+
+export const parameters = {
+  argTypes: {
+    styles: { table: { disable: true } },
+    getStyles: { table: { disable: true } },
+  },
+  actions: { argTypesRegex: '^on[A-Z].*' },
+}
+
+export const globalTypes = {
+  themes: {
+    defaultValue: [
+      "Imbric",
+      "Default",
+      "GrupoMutua",
+      "Taxisvalencia",
+      "Radiotaxiaragon",
+      "Spartan",
+      "Tagos",
+    ],
+  }
+}

package/.stylelintrc.json

@@ -0,0 +1,14 @@
+{
+  "extends": [
+    "stylelint-config-recommended",
+    "stylelint-config-idiomatic-order"
+  ],
+  "rules": {
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": ["global"]
+      }
+    ]
+  }
+}

package/.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense para saber los atributos posibles.
+  // Mantenga el puntero para ver las descripciones de los existentes atributos.
+  // Para más información, visite: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "pwa-chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:6006",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

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

@@ -0,0 +1,69 @@
+## Table of Contents
+
+- [Getting Started](#Getting-Started)
+- [Storybook](#Storybook)
+- [Running the project locally](#Running-the-project-locally)
+- [Running the tests](#Running-the-tests)
+- [Methodologies](#Methodologies)
+  - [Atomic Design](#Atomic-Design)
+  - [Molecules definition](#Molecules-definition)
+
+## Getting Started
+
+> You must have `react, react-dom and classnames installed` thiose are peer dependencies of this project.
+
+#### 1. Installation
+
+_Using NPM_
+```bash
+npm install imbric-theme
+```
+_Using Yarn_
+```bash
+yarn add imbric-theme
+```
+
+#### 2. Using the library
+
+- Import component
+
+```jsx
+import { Icon, ButtonIcon } from '....'
+```
+
+- Use component
+
+```js
+<ButtonIcon icon="arrowRight" type="primary">
+  Cowards Agreed
+</ButtonIcon>
+```
+## Storybook
+Check the rest of the available components in our [Storybook](....)
+
+## Running the project locally
+
+Follow these steps to `start the project` in development
+
+1. Clone repository. `git clone git@bitbucket.org:jorgemuriel/imbric-storybook.git`
+2. Install dependencies in the project folder running `yarn` or `npm install`
+3. Run Storybook with `yarn dev` or `npm run dev`, this command will build the tokens and open Storybook.
+
+## Running the tests
+
+1. Run `yarn run test`or `npm run test`
+2. To keep the tests running, run `yarn run test:watch`
+
+## Methodologies
+
+### Atomic Design
+
+For this project will be using the methodology to create componentes called [Atomic Design](https://shop.bradfrost.com/products/atomic-design-ebook). The component library will be creating just **Atoms** and **Molecules** with the following definitions:
+
+#### Atoms definition
+
+For this project an atom will be a component that is composed by an unique Atom with or without HTML tags, or just HTML tags.
+
+#### Molecules definition
+
+For this project a molecule is a component that is composed by at least 2 different atoms.

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/Avatar/Avatar.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Picture from '../Picture'
+
+import styles from './Avatar.module.css'
+import { options } from './constants'
+import { mapSize } from './helpers'
+import withStyles from '../../hocs/withStyles'
+
+export const Avatar = ({ src, size, getStyles }) => {
+  return (
+    <div className={getStyles('avatar')}>
+      <Picture
+        src={src}
+        width={mapSize(size)}
+        height={mapSize(size)}
+        isRounded
+        withBorder
+      />
+    </div>
+  )
+}
+
+Avatar.propTypes = {
+  src: PropTypes.string.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  size: PropTypes.oneOf(options.sizes),
+}
+
+Avatar.defaultProps = {
+  size: 'md',
+  getStyles: () => {},
+}
+
+export default withStyles(styles)(Avatar)

package/atoms/Avatar/Avatar.module.css

@@ -0,0 +1,3 @@
+.avatar {
+  display: inline-block;
+}

package/atoms/Avatar/Avatar.stories.js

@@ -0,0 +1,29 @@
+import { Avatar, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Avatar, styles)
+const ListTemplate = getListTemplate(Avatar, styles)
+
+export default {
+  title: 'Atoms/Avatar',
+  component: Avatar,
+  args: {
+    src: 'https://picsum.photos/id/1027/200/200',
+  },
+  argTypes: {
+    size: getOptionsArgTypes(options.sizes),
+  },
+  parameters: { __sb: { fd: 'row' } },
+}
+
+export const Default = Template.bind({})
+
+export const Sizes = ListTemplate.bind({})
+Sizes.args = {
+  items: options.sizes.map((size) => ({ size })),
+}

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

@@ -0,0 +1,105 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Atoms/Avatar Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "row",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="avatar"
+  >
+    <picture
+      className="picture is-rounded with-border"
+    >
+      <img
+        src="https://picsum.photos/id/1027/200/200"
+        style={
+          Object {
+            "height": 44,
+            "maxWidth": 44,
+          }
+        }
+      />
+    </picture>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Atoms/Avatar Sizes 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "row",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="avatar"
+  >
+    <picture
+      className="picture is-rounded with-border"
+    >
+      <img
+        src="https://picsum.photos/id/1027/200/200"
+        style={
+          Object {
+            "height": 22,
+            "maxWidth": 22,
+          }
+        }
+      />
+    </picture>
+  </div>
+  <div
+    className="avatar"
+  >
+    <picture
+      className="picture is-rounded with-border"
+    >
+      <img
+        src="https://picsum.photos/id/1027/200/200"
+        style={
+          Object {
+            "height": 44,
+            "maxWidth": 44,
+          }
+        }
+      />
+    </picture>
+  </div>
+  <div
+    className="avatar"
+  >
+    <picture
+      className="picture is-rounded with-border"
+    >
+      <img
+        src="https://picsum.photos/id/1027/200/200"
+        style={
+          Object {
+            "height": 66,
+            "maxWidth": 66,
+          }
+        }
+      />
+    </picture>
+  </div>
+</div>
+`;

package/atoms/Avatar/constants.js

@@ -0,0 +1,3 @@
+export const options = {
+  sizes: ['sm', 'md', 'lg'],
+}

package/atoms/Avatar/helpers.js

@@ -0,0 +1,7 @@
+const avatarSize = {
+  sm: 22,
+  md: 44,
+  lg: 66,
+}
+
+export const mapSize = (size) => avatarSize[size]

package/atoms/Avatar/index.js

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