imbric-theme 0.1.1

package/molecules/Task/constants.js

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

package/molecules/Task/index.js

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

package/molecules/TaskCounter/TaskCounter.js

@@ -0,0 +1,74 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Paragraph from '../../atoms/Paragraph'
+import Divider from '../../atoms/Divider'
+import Spacer from '../../layout/Spacer'
+import Accordion from '../Accordion'
+
+import styles from './TaskCounter.module.css'
+import withStyles from '../../hocs/withStyles'
+
+export const TaskCounter = ({
+  title,
+  children,
+  current,
+  total,
+  isToggleable,
+  onToggle,
+  getStyles,
+  defaultIsCollapsed,
+}) => {
+  if (isToggleable) {
+    return (
+      <Accordion
+        title={title}
+        addons={{
+          append: (
+            <Paragraph weight="medium" isInline>
+              {total ? `${current}/${total}` : current}
+            </Paragraph>
+          ),
+        }}
+        onToggle={onToggle}
+        defaultIsCollapsed={defaultIsCollapsed}
+      >
+        {children}
+      </Accordion>
+    )
+  }
+
+  return (
+    <div className={getStyles('task-counter')}>
+      <div className={getStyles('container')}>
+        <Paragraph weight="medium">{title}</Paragraph>
+        <Paragraph weight="medium" isInline>
+          {total ? `${current}/${total}` : current}
+        </Paragraph>
+      </div>
+      <Spacer.Vertical size="xs" />
+      <Divider />
+      {children}
+    </div>
+  )
+}
+
+TaskCounter.propTypes = {
+  title: PropTypes.string.isRequired,
+  getStyles: PropTypes.func.isRequired,
+  current: PropTypes.number.isRequired,
+  children: PropTypes.node,
+  onToggle: PropTypes.func,
+  isToggleable: PropTypes.bool,
+  total: PropTypes.number,
+  defaultIsCollapsed: PropTypes.bool,
+}
+
+TaskCounter.defaultProps = {
+  getStyles: () => {},
+  onToggle: () => {},
+  current: 0,
+  defaultIsCollapsed: true,
+}
+
+export default withStyles(styles)(TaskCounter)

package/molecules/TaskCounter/TaskCounter.module.css

@@ -0,0 +1,11 @@
+.task-counter {
+  width: 100%;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  line-height: 1;
+  text-transform: uppercase;
+}

package/molecules/TaskCounter/TaskCounter.stories.js

@@ -0,0 +1,26 @@
+import { TaskCounter, styles } from '.'
+
+import { getTemplate } from '../../helpers/storybook'
+
+const Template = getTemplate(TaskCounter, styles)
+
+export default {
+  title: 'Molecules/TaskCounter',
+  component: TaskCounter,
+  args: {
+    title: 'Em Sméagol body.',
+    current: 2,
+    children:
+      "Fells defeated veins this. There and Back Again. A Hobbit's Tale. Loved lucky Istari difficult lay? Dale fellow's rioting. Blanket Misty Mountain started rival wriggles flatten convinced succumbed closing? Slug town fond pipe-weed flatten recognizes Goblins! Innards pouf admirable freely nothingness sleepless exactly afternoon cruelty Bofur? Craftsmen tested fair Alfrid gets figure words winter's field offer healed squash? These galumphing Grima tread mustn't seen melt ideal picked recover employment. Nazgûl alas luckiest?",
+  },
+}
+
+export const Default = Template.bind({})
+export const Total = Template.bind({})
+Total.args = { total: 10 }
+
+export const Toggleable = Template.bind({})
+Toggleable.args = {
+  isToggleable: true,
+  total: 10,
+}

package/molecules/TaskCounter/__snapshots__/TaskCounter.stories.js.snap

@@ -0,0 +1,177 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Molecules/TaskCounter Default 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="task-counter"
+  >
+    <div
+      className="container"
+    >
+      <p
+        className="paragraph color-base size-md weight-medium"
+      >
+        Em Sméagol body.
+      </p>
+      <p
+        className="paragraph color-base size-md weight-medium is-inline"
+      >
+        2
+      </p>
+    </div>
+    <div
+      className="spacer vertical"
+      style={
+        Object {
+          "height": 5,
+        }
+      }
+    />
+    <div
+      className="divider"
+    />
+    Fells defeated veins this. There and Back Again. A Hobbit's Tale. Loved lucky Istari difficult lay? Dale fellow's rioting. Blanket Misty Mountain started rival wriggles flatten convinced succumbed closing? Slug town fond pipe-weed flatten recognizes Goblins! Innards pouf admirable freely nothingness sleepless exactly afternoon cruelty Bofur? Craftsmen tested fair Alfrid gets figure words winter's field offer healed squash? These galumphing Grima tread mustn't seen melt ideal picked recover employment. Nazgûl alas luckiest?
+  </div>
+</div>
+`;
+
+exports[`Storyshots Molecules/TaskCounter Toggleable 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="accordion"
+  >
+    <div
+      className="container"
+      onClick={[Function]}
+    >
+      <div
+        className="icon color-inverted size-sm background-muted"
+        style={
+          Object {
+            "height": 25,
+            "width": 25,
+          }
+        }
+      >
+        <svg
+          height={25}
+          viewBox="0 0 15 9"
+          width={25}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clipRule="evenodd"
+            d="M7.82633 8.70623L0.882568 1.54063L1.89405 0.496826L7.82633 6.61863L13.7586 0.496826L14.7701 1.54063L7.82633 8.70623Z"
+            fillRule="evenodd"
+          />
+        </svg>
+      </div>
+      <div
+        className="spacer horizontal"
+        style={
+          Object {
+            "height": "100%",
+            "maxHeight": "auto",
+            "width": 15,
+          }
+        }
+      />
+      <p
+        className="paragraph color-base size-md weight-medium"
+      >
+        Em Sméagol body.
+      </p>
+      <p
+        className="paragraph color-base size-md weight-medium is-inline"
+      >
+        2/10
+      </p>
+    </div>
+    <div
+      className="spacer vertical"
+      style={
+        Object {
+          "height": 5,
+        }
+      }
+    />
+    <div
+      className="divider"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots Molecules/TaskCounter Total 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="task-counter"
+  >
+    <div
+      className="container"
+    >
+      <p
+        className="paragraph color-base size-md weight-medium"
+      >
+        Em Sméagol body.
+      </p>
+      <p
+        className="paragraph color-base size-md weight-medium is-inline"
+      >
+        2/10
+      </p>
+    </div>
+    <div
+      className="spacer vertical"
+      style={
+        Object {
+          "height": 5,
+        }
+      }
+    />
+    <div
+      className="divider"
+    />
+    Fells defeated veins this. There and Back Again. A Hobbit's Tale. Loved lucky Istari difficult lay? Dale fellow's rioting. Blanket Misty Mountain started rival wriggles flatten convinced succumbed closing? Slug town fond pipe-weed flatten recognizes Goblins! Innards pouf admirable freely nothingness sleepless exactly afternoon cruelty Bofur? Craftsmen tested fair Alfrid gets figure words winter's field offer healed squash? These galumphing Grima tread mustn't seen melt ideal picked recover employment. Nazgûl alas luckiest?
+  </div>
+</div>
+`;

package/molecules/TaskCounter/index.js

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

package/package.json

@@ -0,0 +1,102 @@
+{
+  "name": "imbric-theme",
+  "version": "0.1.1",
+  "description": "A components library to create apps from zero to production",
+  "private": false,
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://bitbucket.org/jorgemuriel/imbric-storybook/src/master/"
+  },
+  "engines": {
+    "node": ">=16.13.2",
+    "yarn": ">=1.22.17"
+  },
+  "scripts": {
+    "build:storybook": "build-storybook --no-dll",
+    "build:tokens": "node ./scripts/build-tokens",
+    "build": "run-s build:tokens build:storybook",
+    "build:docs": "yarn build:tokens && yarn build:storybook --docs --no-manager-cache",
+    "cc": "node ./scripts/create-component",
+    "commit": "cz",
+    "deploy:prod": "run-s build:docs deploy:vercel:prod",
+    "deploy:stag": "run-s build deploy:vercel:stag",
+    "deploy:vercel:prod": "vercel --prod",
+    "deploy:vercel:stag": "vercel",
+    "dev:storybook": "start-storybook -p 6006",
+    "dev:tokens": "watch 'yarn build:tokens' ./tokens",
+    "dev": "concurrently 'npm:dev:*'",
+    "lint:css:fix": "yarn lint:css:prettier:fix && yarn lint:css:stylelint:fix",
+    "lint:css:prettier:fix": "yarn lint:css:prettier --write",
+    "lint:css:prettier": "prettier '**/*.css' --list-different --ignore-path .gitignore",
+    "lint:css:stylelint:fix": "yarn lint:css:stylelint --fix",
+    "lint:css:stylelint": "stylelint '**/*.css' --ignore-path .gitignore",
+    "lint:css": "run-s lint:css:stylelint lint:css:prettier",
+    "lint:fix": "run-p lint:js:fix lint:json:fix lint:css:fix",
+    "lint:js:fix": "yarn lint:js --fix",
+    "lint:js": "eslint --cache --ignore-path .gitignore '**/*.js'",
+    "lint:json:fix": "yarn lint:json --write",
+    "lint:json": "prettier '**/*.json' --list-different --ignore-path .gitignore",
+    "lint": "run-p lint:js lint:json lint:css",
+    "test:coverage": "yarn test --coverage",
+    "test:coverage:html": "yarn test:coverage & open coverage/lcov-report/index.html",
+    "test:watch": "CONSOLE_LEVEL=debug yarn test --watch",
+    "test": "jest"
+  },
+  "keywords": [
+    "react",
+    "components"
+  ],
+  "author": "imbric",
+  "license": "UNLICENSED",
+  "dependencies": {
+    "classnames": "2.3.1"
+  },
+  "devDependencies": {
+    "@babel/core": "7.11.6",
+    "@babel/preset-env": "7.11.5",
+    "@babel/preset-react": "7.10.4",
+    "@commitlint/cli": "11.0.0",
+    "@commitlint/config-conventional": "11.0.0",
+    "@semantic-release/changelog": "5.0.1",
+    "@semantic-release/git": "9.0.0",
+    "@storybook/addon-actions": "6.4.18",
+    "@storybook/addon-essentials": "6.4.18",
+    "@storybook/addon-links": "6.4.18",
+    "@storybook/addon-storyshots": "6.4.18",
+    "@storybook/react": "6.4.18",
+    "@svgr/webpack": "5.5.0",
+    "@testing-library/react": "12.0.0",
+    "babel-jest": "26.3.0",
+    "babel-loader": "8.1.0",
+    "chromatic": "5.2.0",
+    "commitizen": "4.2.2",
+    "concurrently": "5.3.0",
+    "enquirer": "2.3.6",
+    "eslint": "7.8.1",
+    "eslint-config-prettier": "6.11.0",
+    "eslint-plugin-prettier": "3.1.4",
+    "eslint-plugin-react": "7.20.6",
+    "eslint-plugin-storybook": "0.5.6",
+    "husky": "7.0.4",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "26.4.2",
+    "lint-staged": "10.3.0",
+    "minireset.css": "0.0.6",
+    "npm-run-all": "4.1.5",
+    "prettier": "2.1.1",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-is": "16.13.1",
+    "react-test-renderer": "16.13.1",
+    "semantic-release": "17.1.2",
+    "stylelint": "13.7.2",
+    "stylelint-config-idiomatic-order": "8.1.0",
+    "stylelint-config-recommended": "3.0.0",
+    "watch": "1.0.2"
+  },
+  "peerDependencies": {
+    "react": "16.13.1",
+    "react-dom": "16.13.1"
+  }
+}

package/scripts/build-tokens.js

@@ -0,0 +1,40 @@
+const { choices, decisions } = require('../tokens')
+const toKebabCase = require('../utils/toKebabCase')
+const fs = require('fs')
+
+const cleanLines = (string = '') => string.trim().replace(/^\n\n/gm, '\n')
+
+function transformTokens(parentKey, object) {
+  const objectKeys = Object.keys(object)
+
+  return objectKeys.reduce((transformedTokens, objectKey) => {
+    const value = object[objectKey]
+    const customProperty = parentKey
+      ? toKebabCase(`${parentKey}-${objectKey}`)
+      : toKebabCase(`${objectKey}`)
+
+    if (Array.isArray(value)) {
+      return `${transformedTokens}\n  --${customProperty}: ${value.join(', ')};`
+    } else if (typeof value === 'object') {
+      return `${transformedTokens}\n${transformTokens(customProperty, value)}`
+    }
+
+    const label = `--${parentKey}-${toKebabCase(objectKey)}`
+    return `${transformedTokens}\n  ${label}: ${value};`
+  }, '')
+}
+
+function buildTokens() {
+  const transformedChoices = transformTokens(null, choices)
+  const transformedDecisions = transformTokens(null, decisions)
+  const customProperties = `${transformedChoices}${transformedDecisions}`
+
+  const data = `:root {\n  ${cleanLines(customProperties)}\n}\n`
+
+  fs.writeFile('./styles/tokens.css', data, 'utf8', (error) => {
+    if (error) throw error
+    console.log('🎨 Custom properties created!')
+  })
+}
+
+buildTokens()

package/scripts/create-component.js

@@ -0,0 +1,127 @@
+/* eslint-disable no-undef */
+const fs = require('fs').promises
+const path = require('path')
+const enquirer = require('enquirer')
+const toPascalCase = require('../utils/toPascalCase')
+const toKebabCase = require('../utils/toKebabCase')
+const toCapitalize = require('../utils/toCapitalize')
+
+const ATOMIC_DESIGN_TYPES = {
+  atom: 'atoms',
+  molecule: 'molecules',
+  layout: 'layout',
+}
+const COMPONENT_TEMPLATE_PATH = 'templates/component'
+
+function createComponentFolder(componentPath) {
+  return fs.mkdir(componentPath, { recursive: true })
+}
+
+function readComponentFile(componentTemplate) {
+  return fs.readFile(
+    path.join(__dirname, `../${COMPONENT_TEMPLATE_PATH}/${componentTemplate}`),
+    'utf8'
+  )
+}
+
+function replaceComponentFile(
+  componentIsStory,
+  componentFile,
+  componentName,
+  mappedType
+) {
+  if (!componentIsStory) {
+    return componentFile
+      .replace(/component/g, toKebabCase(componentName))
+      .replace(/Component/g, componentName)
+  } else {
+    return componentFile
+      .replace(/Component/g, componentName)
+      .replace(/atomic/g, mappedType)
+      .replace(/Atomic/g, toCapitalize(mappedType))
+  }
+}
+
+function createComponentFile(componentPath, replacedComponentFile) {
+  return fs.writeFile(componentPath, replacedComponentFile, 'utf8')
+}
+
+async function createComponent(componentTemplates, type, componentName) {
+  const mappedType = ATOMIC_DESIGN_TYPES[type]
+  const atomicComponentPath = path.join(
+    __dirname,
+    `../${mappedType}/${componentName}`
+  )
+
+  try {
+    await createComponentFolder(atomicComponentPath)
+    console.log('🔧 component folder created!')
+
+    for (const componentTemplate of componentTemplates) {
+      const componentTemplateRenamed = componentTemplate.replace(
+        /Component/g,
+        toPascalCase(componentName)
+      )
+      const componentIsStory = componentTemplate.search('stories') !== -1
+
+      const componentFile = await readComponentFile(componentTemplate)
+      const replacedComponentFile = await replaceComponentFile(
+        componentIsStory,
+        componentFile,
+        componentName,
+        mappedType
+      )
+      await createComponentFile(
+        path.join(atomicComponentPath, componentTemplateRenamed),
+        replacedComponentFile
+      )
+      console.log(`🔧 component file ${componentTemplateRenamed} created!`)
+    }
+  } catch (error) {
+    console.log(error)
+    process.exit(1)
+  }
+}
+
+async function getPromptParams() {
+  let { type } = await enquirer.prompt({
+    type: 'select',
+    name: 'type',
+    message: 'What kind of component would you like to create?',
+    choices: ['atom', 'molecule', 'layout'],
+    initial: 'atom',
+  })
+
+  let { componentName } = await enquirer.prompt({
+    type: 'input',
+    name: 'componentName',
+    message: 'What is the name of the new component?',
+    validate(input) {
+      if (!this.skipped && input.trim().length === 0 && input.trim() !== ',') {
+        return 'Please, tell us what is the name of the new component. Try again!'
+      }
+      return true
+    },
+  })
+
+  try {
+    const componentTemplates = await fs.readdir(
+      path.join(__dirname, `../${COMPONENT_TEMPLATE_PATH}`)
+    )
+
+    if (componentTemplates.length !== 0) {
+      createComponent(componentTemplates, type, toPascalCase(componentName))
+    } else {
+      throw new Error(
+        `There are not template files to create the component: ${toPascalCase(
+          componentName
+        )}`
+      )
+    }
+  } catch (error) {
+    console.log(error)
+    process.exit(1)
+  }
+}
+
+getPromptParams()

package/storybook.test.js

@@ -0,0 +1,13 @@
+import initStoryshots, {
+  multiSnapshotWithOptions,
+  Stories2SnapsConverter,
+} from '@storybook/addon-storyshots'
+
+import './utils/testUtils/matchMediaMock'
+
+initStoryshots({
+  test: multiSnapshotWithOptions(),
+  stories2snapsConverter: new Stories2SnapsConverter({
+    snapshotExtension: '.js.snap',
+  }),
+})

package/styles/globals.css

@@ -0,0 +1,10 @@
+html,
+body {
+  height: 100%;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base);
+}
+
+#root {
+  height: 100%;
+}