WIP

demo/src/index.js

@@ -1,18 +1,20 @@
 import React from 'react';
 import { render } from 'react-dom';
 
-import { usePaymentInputs, PaymentInputsContainer } from '../../src';
+import { usePaymentInputs, PaymentInputsContainer, PaymentInputsWrapper } from '../../src';
+import images from '../../src/images';
 
 function Demo() {
-  const { cardNumberProps, expiryDateProps, cvcProps } = usePaymentInputs();
+  const { cardImageProps, cardNumberProps, expiryDateProps, cvcProps } = usePaymentInputs();
   return (
     <React.Fragment>
       {/* Using the hook */}
-      <div>
+      <PaymentInputsWrapper>
+        <svg {...cardImageProps({ images })} />
         <input {...cardNumberProps()} />
         <input {...expiryDateProps()} />
         <input {...cvcProps()} />
-      </div>
+      </PaymentInputsWrapper>
 
       {/* Using render props */}
       <PaymentInputsContainer>

nwb.config.js

@@ -8,5 +8,8 @@ module.exports = {
         react: 'React'
       }
     }
+  },
+  webpack: {
+    extractCSS: false
   }
-}
+};

package.json

@@ -14,20 +14,24 @@
     "build": "nwb build-react-component",
     "build:demo": "nwb build-demo",
     "start:demo": "nwb serve-react-demo",
-    "clean": "nwb clean-module && nwb clean-demo",
-    "prepublishOnly": "npm run build",
+    "create-proxies": "node scripts/create-proxies.js",
+    "remove-proxies": "node scripts/remove-proxies.js",
+    "clean": "nwb clean-module && yarn remove-proxies && nwb clean-demo",
+    "prepublishOnly": "yarn create-proxies && yarn build",
+    "postpublish": "yarn clean",
     "lint": "eslint ./src"
   },
   "dependencies": {},
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@medipass/eslint-config-react-medipass": "8.4.0",
+    "@medipass/eslint-config-react-medipass": "8.4.1",
     "babel-eslint": "10.0.1",
     "eslint": "5.16.0",
     "eslint-plugin-import": "2.17.2",
     "eslint-plugin-prettier": "3.0.1",
+    "fannypack": "4.19.20",
     "nwb": "0.23.0",
     "react": "16.8.6",
     "react-dom": "16.8.6"

scripts/create-proxies.js

@@ -0,0 +1,28 @@
+const { lstatSync, mkdirSync, writeFileSync } = require('fs');
+const { join } = require('path');
+const getModules = require('./get-modules');
+const { name } = require('../package.json');
+
+const createProxyPackage = (module, { isFile }) => {
+  return `{
+  "name": "${name}/${module}",
+  "private": true,
+  "main": "../lib/${module}.js",
+  "module": "../es/${module}.js"
+}`;
+};
+
+const createProxies = () => {
+  const modules = getModules();
+  modules.forEach(module => {
+    let proxyPath = join('./', module);
+    const isFile = lstatSync(join(__dirname, '../src', module)).isFile();
+    if (isFile) {
+      proxyPath = proxyPath.replace(/\.js$/, '');
+    }
+    mkdirSync(proxyPath);
+    writeFileSync(join(proxyPath, 'package.json'), createProxyPackage(proxyPath, { isFile }));
+  });
+};
+
+module.exports = createProxies();

scripts/get-modules.js

@@ -0,0 +1,20 @@
+const { lstatSync, readdirSync } = require('fs');
+const { join } = require('path');
+
+const isDirectory = source => lstatSync(join(__dirname, '../src', source)).isDirectory();
+const isFile = source => lstatSync(join(__dirname, '../src', source)).isFile();
+const isModule = source => isDirectory(source) || (isFile(source) && /.(js|ts|tsx)$/.test(source));
+const isNotPrivate = source => !/^_/.test(source);
+const isNotIndex = source => !/^index\.js/.test(source);
+
+const getModules = () => {
+  const srcDirectory = join(__dirname, '../src');
+  const sources = readdirSync(srcDirectory);
+  const modules = sources
+    .filter(isNotPrivate)
+    .filter(isNotIndex)
+    .filter(isModule);
+  return modules;
+};
+
+module.exports = getModules;

scripts/remove-proxies.js

@@ -0,0 +1,18 @@
+const rimraf = require('rimraf');
+const { lstatSync } = require('fs');
+const { join } = require('path');
+const getModules = require('./get-modules');
+
+const createProxies = () => {
+  const modules = getModules();
+  modules.forEach(module => {
+    let proxyPath = join('./', module);
+    const isFile = lstatSync(join(__dirname, '../src', module)).isFile();
+    if (isFile) {
+      proxyPath = proxyPath.replace(/\.js$/, '');
+    }
+    rimraf.sync(proxyPath);
+  });
+};
+
+module.exports = createProxies();

src/PaymentInputsContainer.js

@@ -1,7 +1,6 @@
-import React from 'react';
 import usePaymentInputs from './use-payment-inputs';
 
-export default function PaymentInputs(props) {
+export default function PaymentInputsContainer(props) {
   const paymentInputs = usePaymentInputs(props);
   return props.children(paymentInputs);
 }

src/PaymentInputsWrapper.css

@@ -0,0 +1,36 @@
+.payment-inputs-wrapper {
+  align-items: center;
+  border: 1px solid #bdbdbd;
+  box-shadow: inset 0px 1px 2px #e5e5e5;
+  border-radius: 0.2em;
+  display: inline-flex;
+  padding: 0.4em 0.6em;
+}
+
+.payment-inputs-wrapper input {
+  border: unset;
+  margin: unset;
+  padding: unset;
+  outline: unset;
+  font-size: 16px;
+}
+
+.payment-inputs-wrapper svg {
+  margin-right: 0.6em;
+}
+
+.payment-inputs-wrapper input#cardnumber {
+  width: 11rem;
+}
+
+.payment-inputs-wrapper input#expirydate {
+  width: 4rem;
+}
+
+.payment-inputs-wrapper input#cvc {
+  width: 2.5rem;
+}
+
+html {
+  font-size: 16px;
+}

src/PaymentInputsWrapper.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import './PaymentInputsWrapper.css';
+
+export default function PaymentInputsWrapper(props) {
+  const { children, className, ...restProps } = props;
+  return (
+    <div className={`payment-inputs-wrapper${className ? ` ${className}` : ''}`} {...restProps}>
+      {children}
+    </div>
+  );
+}

src/images/amex.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+export default (
+  <g fill="none" fillRule="evenodd">
+    <rect fill="#016fd0" height="16" rx="2" width="24" />
+    <path
+      d="m13.7640663 13.3938564v-5.70139231l10.1475359.00910497v1.57489503l-1.1728619 1.25339231 1.1728619 1.2648839v1.6083094h-1.8726188l-.9951823-1.0981657-.9881105 1.1023204z"
+      fill="#fffffe"
+    />
+    <path
+      d="m14.4418122 12.7687956v-4.448884h3.7722872v1.02488398h-2.550895v.69569062h2.4900774v1.0078232h-2.4900774v.6833149h2.550895v1.0371713z"
+      fill="#016fd0"
+    />
+    <path
+      d="m18.1952707 12.7687956 2.087337-2.2270055-2.0874254-2.2217901h1.6156464l1.2754917 1.41003315 1.2791161-1.41003315h1.5461657v.03500552l-2.0428729 2.18678458 2.0428729 2.1638895v.063116h-1.5617237l-1.2981216-1.4241768-1.2847735 1.4241768z"
+      fill="#016fd0"
+    />
+    <path
+      d="m14.2373481 2.6319558h2.4460552l.8591381 1.95085083v-1.95085083h3.0198453l.5207514 1.46156906.5225194-1.46156906h2.3059447v5.70139227h-12.1865193z"
+      fill="#fffffe"
+    />
+    <g fill="#016fd0">
+      <path d="m14.7004641 3.25135912-1.9740111 4.44517127h1.3539006l.3724199-.89016575h2.0179447l.3721547.89016575h1.3875801l-1.96579-4.44517127zm.1696353 2.55743646.592-1.41507182.5915581 1.41507182z" />
+      <path d="m18.2119779 7.69573481v-4.44508288l1.903116.00654144.9792707 2.73272928.9856354-2.73927072h1.8316022v4.44508288l-1.1786077.01043094v-3.05334807l-1.1125746 3.04291713h-1.0758011l-1.1356464-3.05334807v3.05334807z" />
+    </g>
+  </g>
+);

src/images/dinersclub.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+export default (
+  <g id="319" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+    <g id="New-Icons" transform="translate(-320.000000, -280.000000)" fillRule="nonzero">
+      <g id="Card-Brands" transform="translate(40.000000, 200.000000)">
+        <g id="Color" transform="translate(0.000000, 80.000000)">
+          <g id="Diners-Club" transform="translate(280.000000, 0.000000)">
+            <path
+              d="M21.9972414,15.749927 L21.999381,15.7499362 C22.9544683,15.7581106 23.73806,14.9772525 23.75,14.0041555 L23.7500083,2.00630219 C23.7461702,1.53568921 23.5588633,1.08617106 23.2297297,0.756801782 C22.9014319,0.428268884 22.4589161,0.246148853 21.9972414,0.250070854 L2.00063,0.250061791 C1.54108393,0.246148853 1.09856813,0.428268884 0.77027028,0.756801782 C0.441136651,1.08617106 0.253829819,1.53568921 0.25,2.00426336 L0.249991686,13.9936957 C0.253829819,14.4643086 0.441136651,14.9138268 0.77027028,15.2431961 C1.09856813,15.571729 1.54108393,15.753849 2.00275862,15.749927 L21.9972414,15.749927 Z M21.996203,16.249927 C21.9958359,16.249924 21.9954688,16.249921 21.9951018,16.2499178 L21.9972414,16.249927 L21.996203,16.249927 Z"
+              id="shape"
+              strokeOpacity="0.2"
+              stroke="#000000"
+              strokeWidth="0.5"
+              fill="#FFFFFF"
+            />
+            <path
+              d="M10.0021142,2.05179033 L10.0021142,2.03579033 L14.0021142,2.03579033 L14.0021142,2.05179033 C17.1375481,2.28122918 19.5642283,4.89197286 19.5642283,8.03579033 C19.5642283,11.1796078 17.1375481,13.7903515 14.0021142,14.0197903 L14.0021142,14.0357903 L10.0021142,14.0357903 L10.0021142,14.0197903 C6.86668021,13.7903515 4.44,11.1796078 4.44,8.03579033 C4.44,4.89197286 6.86668021,2.28122918 10.0021142,2.05179033 Z"
+              id="shape"
+              fill="#0165AC"
+            />
+            <path
+              d="M11.6021142,11.4277903 C13.0374002,10.9175027 13.9961556,9.55908923 13.9961556,8.03579033 C13.9961556,6.51249143 13.0374002,5.15407792 11.6021142,4.64379033 L11.6021142,11.4277903 L11.6021142,11.4277903 Z M9.20211417,4.64379033 C7.76682809,5.15407792 6.80807271,6.51249143 6.80807271,8.03579033 C6.80807271,9.55908923 7.76682809,10.9175027 9.20211417,11.4277903 L9.20211417,4.64379033 L9.20211417,4.64379033 Z M10.4021142,13.2357903 C7.53023347,13.2357903 5.20211417,10.907671 5.20211417,8.03579033 C5.20211417,5.16390963 7.53023347,2.83579033 10.4021142,2.83579033 C13.2739949,2.83579033 15.6021142,5.16390963 15.6021142,8.03579033 C15.6021142,10.907671 13.2739949,13.2357903 10.4021142,13.2357903 Z"
+              id="shape"
+              fill="#FFFFFF"
+            />
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+);

src/images/index.js

@@ -0,0 +1,21 @@
+import amex from './amex.js';
+import dinersclub from './dinersclub.js';
+import discover from './discover.js';
+import hipercard from './hipercard.js';
+import jcb from './jcb.js';
+import unionpay from './unionpay.js';
+import mastercard from './mastercard.js';
+import placeholder from './placeholder.js';
+import visa from './visa.js';
+
+export default {
+  amex,
+  dinersclub,
+  discover,
+  hipercard,
+  jcb,
+  unionpay,
+  mastercard,
+  placeholder,
+  visa
+};

src/images/jcb.js

@@ -0,0 +1,30 @@
+import React from 'react';
+
+export default (
+  <g fill="none">
+    <path
+      d="m.20535714 16h4.51785715c1.0278125 0 2.25892857-1.1946667 2.25892857-2.1333333v-13.8666667h-4.51785715c-1.0278125 0-2.25892857 1.19466667-2.25892857 3.2z"
+      fill="#047ab1"
+    />
+    <path
+      d="m2.76924107 10.816c-.86733559.0001606-1.73039558-.1147397-2.56388393-.3413333v-1.17333337c.64678874.37770431 1.38610045.59084099 2.14598215.61866667.8696875 0 1.35535714-.576 1.35535714-1.36533333v-3.22133334h2.14598214v3.22133334c0 1.25866666-.70026786 2.26133333-3.0834375 2.26133333z"
+      fill="#fff"
+    />
+    <path
+      d="m8.11160714 16h4.51785716c1.0278125 0 2.2589286-1.1946667 2.2589286-2.1333333v-13.8666667h-4.5178572c-1.02781249 0-2.25892856 1.19466667-2.25892856 3.2z"
+      fill="#d42d06"
+    />
+    <path
+      d="m8.11160714 6.08c.65508929-.59733333 1.78455357-.97066667 3.61428576-.88533333.9939285.04266666 2.0330357.32 2.0330357.32v1.184c-.5943231-.3394747-1.2623758-.54734656-1.9539732-.608-1.3892411-.11733334-2.23633933.61866666-2.23633933 1.90933333s.84709823 2.0266667 2.23633933 1.92c.6920185-.06606555 1.3596342-.27744592 1.9539732-.61866667v1.17333337s-1.0391072.288-2.0330357.3306666c-1.82973219.0853334-2.95919647-.288-3.61428576-.8853333z"
+      fill="#fff"
+    />
+    <path
+      d="m16.0178571 16h4.5178572c1.0278125 0 2.2589286-1.1946667 2.2589286-2.1333333v-13.8666667h-4.5178572c-1.0278125 0-2.2589286 1.19466667-2.2589286 3.2z"
+      fill="#67b637"
+    />
+    <path
+      d="m21.6651786 9.28c0 .8533333-.7002679 1.3866667-1.6377232 1.3866667h-4.0095983v-5.33333337h3.6481697l.2597768.01066667c.8245089.04266667 1.4344196.50133333 1.4344196 1.29066667 0 .61866666-.4179018 1.152-1.1746428 1.28v.032c.8358035.05333333 1.4795982.55466666 1.4795982 1.33333333zm-2.880134-3.104c-.0486104-.00686658-.0976798-.01043129-.1468303-.01066667h-1.3553572v1.344h1.5021875c.2823661-.064.5195536-.30933333.5195536-.672 0-.36266666-.2371875-.608-.5195536-.66133333zm.1694197 2.176c-.059755-.00886168-.1202559-.01243275-.1807143-.01066667h-1.4908929v1.46133334h1.4908929l.1807143-.02133334c.2823661-.064.5195536-.34133333.5195536-.71466666 0-.37333334-.2258929-.64-.5195536-.71466667z"
+      fill="#fff"
+    />
+  </g>
+);

src/images/mastercard.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default (
+  <g fill="none" fillRule="evenodd">
+    <rect fill="#252525" height="16" rx="2" width="24" />
+    <circle cx="9" cy="8" fill="#eb001b" r="5" />
+    <circle cx="15" cy="8" fill="#f79e1b" r="5" />
+    <path
+      d="m12 3.99963381c1.2144467.91220633 2 2.36454836 2 4.00036619s-.7855533 3.0881599-2 4.0003662c-1.2144467-.9122063-2-2.36454837-2-4.0003662s.7855533-3.08815986 2-4.00036619z"
+      fill="#ff5f00"
+    />
+  </g>
+);