Merge e5b967f into f9996c9

singuerinc · Nov 20, 2018 · 220d099 · 220d099
2 parents f9996c9 + e5b967f
commit 220d099
Show file tree

Hide file tree

Showing 10 changed files with 5,266 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,6 @@
 node_modules
 coverage
-.nyc_output
+.nyc_output
+web/dist
+web/.cache
+web/node_modules
diff --git a/netlify.toml b/netlify.toml
@@ -0,0 +1,4 @@
+[build]
+  base = "web/"
+  publish = "web/dist/"
+  command = "yarn build"
diff --git a/web/package.json b/web/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "web",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "better-dni": "^3.0.0",
+    "feather-icons": "^4.9.0",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
+    "tachyons": "^4.11.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.1.6",
+    "@types/react": "^16.3.14",
+    "@types/react-dom": "^16.0.5",
+    "parcel-bundler": "^1.10.3",
+    "typescript": "^3.1.6"
+  },
+  "scripts": {
+    "start": "parcel ./src/index.html",
+    "build": "parcel build ./src/index.html"
+  }
+}
diff --git a/web/src/index.html b/web/src/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Better-DNI</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+
+  <body class="near-black ma4">
+    <nav class="flex">
+      <ul class="list flex justify-end w-100 ph4">
+        <li>
+          <a
+            href="https://github.com/singuerinc/better-dni"
+            target="_blank"
+            class="pa2 near-white link dim"
+            >Github</a
+          >
+        </li>
+      </ul>
+    </nav>
+    <section class="flex flex-wrap relative justify-center items-center">
+      <h1 class="f1 f-headline-l lh-solid mt5 mb0">
+        BT<span class="near-white">DNI</span>T3R
+      </h1>
+      <h2 class="w-100 ph2 tc fw3 f4 f3-l lh-title cyan">
+        The fastest Spanish DNI (NIE / NIF) validation out there
+      </h2>
+    </section>
+    <section class="flex flex-wrap justify-center included mt3">
+      <h3 class="w-100 tc">Try it</h3>
+      <div class="w-100 flex flex-wrap justify-center">
+        <div id="app"></div>
+      </div>
+    </section>
+    <section class="flex flex-column justify-center items-center">
+      <p class="tc w-30 f7 o-70 mt5">
+        Created by
+        <a
+          class="link dim near-black"
+          href="https://github.com/singuerinc"
+          target="_blank"
+          >@singuerinc</a
+        >
+      </p>
+    </section>
+    <script src="js/index.tsx"></script>
+  </body>
+</html>
diff --git a/web/src/js/App.tsx b/web/src/js/App.tsx
@@ -0,0 +1,89 @@
+import { isNIE, isNIF, isValid, randomNIF, randomNIE } from "better-dni";
+import * as React from "react";
+import { Check } from "./Check";
+
+const examplesNIF = Array(5)
+  .fill(0)
+  .map(randomNIF);
+const examplesNIE = Array(5)
+  .fill(0)
+  .map(randomNIE);
+
+class App extends React.Component {
+  state = {
+    value: ""
+  };
+  constructor(props) {
+    super(props);
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(event) {
+    const value: string = event.target.value;
+    this.setState({ value });
+  }
+
+  handleClick = (type) => (e) => {
+    e.preventDefault();
+    this.setState({
+      value: type === "nie" ? randomNIE() : randomNIF()
+    });
+  };
+
+  render() {
+    const { value } = this.state;
+    const isValidVal = isValid(value);
+    const isNIEVal = isNIE(value);
+    const isNIFVal = isNIF(value);
+
+    return (
+      <form className="black-80 w-100 w-50-l center">
+        <div>
+          <input
+            className="input-reset f2 f1-ns ba b--black-10 bg-black pa2 mb2 db w-100 near-white fw6 tc"
+            type="text"
+            placeholder="XXXXXXXX"
+            value={value}
+            onChange={this.handleChange}
+          />
+        </div>
+        <div className="flex flex-wrap justify-between mt4 mb2 pb4">
+          <Check label="isValid" check={isValidVal} />
+          <Check label="isNie" check={isNIEVal} />
+          <Check label="isNIF" check={isNIFVal} />
+        </div>
+        <div className="flex flex-wrap">
+          <div className="w-100 w-50-l pr1-l">
+            <a
+              href="#"
+              className="w-100 tc f6 link dim br1 ba bw1 ph3 pv2 mb2 dib near-black"
+              onClick={this.handleClick("nie")}
+            >
+              Random NIE
+            </a>
+          </div>
+          <div className="w-100 w-50-l pl1-l">
+            <a
+              href="#"
+              className="w-100 tc f6 link dim br1 ba bw1 ph3 pv2 mb2 dib near-black"
+              onClick={this.handleClick("nif")}
+            >
+              Random NIF
+            </a>
+          </div>
+        </div>
+        <div className="flex flex-wrap">
+          <div className="w-100 w-50-l f5 black-30 tc">
+            {examplesNIE.join(", ")}
+          </div>
+          <div className="w-100 w-50-l f5 black-30 tc">
+            {examplesNIF.join(", ")}
+          </div>
+        </div>
+      </form>
+    );
+  }
+}
+
+export { App };
diff --git a/web/src/js/Check.tsx b/web/src/js/Check.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import * as feather from "feather-icons";
+
+export const Check = ({ check, label }) => (
+  <div className="flex">
+    <div className="mv1">
+      <div className="w-100 cf">
+        {!check && (
+          <span dangerouslySetInnerHTML={{ __html: feather.icons.x.toSvg() }} />
+        )}
+        {check && (
+          <span
+            dangerouslySetInnerHTML={{ __html: feather.icons.check.toSvg() }}
+          />
+        )}
+      </div>
+    </div>
+    <div className="fw5 ml2 v-mid pv2">{label}</div>
+  </div>
+);
diff --git a/web/src/js/index.tsx b/web/src/js/index.tsx
@@ -0,0 +1,6 @@
+import "../main.css";
+import * as React from "react";
+import { render } from "react-dom";
+import { App } from "./App";
+
+render(<App />, document.getElementById("app"));
diff --git a/web/src/main.css b/web/src/main.css
@@ -0,0 +1,22 @@
+@import url("https://fonts.googleapis.com/css?family=Fira+Sans");
+@import "../node_modules/tachyons/css/tachyons.min.css";
+
+html,
+body {
+  background: #f03e3e;
+  height: 100%;
+}
+
+body {
+  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-weight: 400;
+}
+
+nav {
+  border-color: #111;
+}
+
+input:focus {
+  outline: none;
+}
diff --git a/web/tsconfig.json b/web/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "lib": ["dom", "es6"],
+    "declaration": false,
+    "removeComments": false,
+    "stripInternal": true,
+    "alwaysStrict": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "jsx": "react"
+  },
+  "files": ["./src/js/index.tsx"]
+}