lesca-validate 0.0.1

package/.babelrc

@@ -0,0 +1,17 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/transform-runtime"
+  ]
+}

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

package/.prettierignore

@@ -0,0 +1,11 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules/
+
+# Ignore files
+package-lock.json
+

package/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "jsxBracketSameLine": false,
+  "singleQuote": true,
+  "useTabs": false,
+  "jsxSingleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "all"
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 James Hsu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/less-watch-compiler.config.json

@@ -0,0 +1,5 @@
+{
+  "watchFolder": "src/lib",
+  "outputFolder": "src/lib",
+  "mainFile": "style.less"
+}

package/lib/index.d.ts

@@ -0,0 +1,9 @@
+export declare const ValidateEmail: (email: string) => boolean;
+export declare const ValidatePhone: (phone: string) => boolean;
+export declare const ValidateURL: (str: string) => boolean;
+declare const Validate: {
+    email: (email: string) => boolean;
+    phone: (phone: string) => boolean;
+    url: (str: string) => boolean;
+};
+export default Validate;

package/lib/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ValidateURL = exports.ValidatePhone = exports.ValidateEmail = void 0;
+var ValidateEmail = function ValidateEmail(email) {
+  return String(email).toLowerCase().match(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/) !== null;
+};
+exports.ValidateEmail = ValidateEmail;
+var ValidatePhone = function ValidatePhone(phone) {
+  return phone !== '' && phone.length === 10 && phone.slice(0, 2) === '09';
+};
+exports.ValidatePhone = ValidatePhone;
+var ValidateURL = function ValidateURL(str) {
+  var pattern = new RegExp('^(https?:\\/\\/)?' + '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + '((\\d{1,3}\\.){3}\\d{1,3}))' + '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + '(\\?[;&a-z\\d%_.~+=-]*)?' + '(\\#[-a-z\\d_]*)?$', 'i');
+  return !!pattern.test(str);
+};
+exports.ValidateURL = ValidateURL;
+var Validate = {
+  email: ValidateEmail,
+  phone: ValidatePhone,
+  url: ValidateURL
+};
+var _default = Validate;
+exports["default"] = _default;

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "lesca-validate",
+  "version": "0.0.1",
+  "description": "check email, phone number, url format.",
+  "main": "lib/index.js",
+  "scripts": {
+    "start": "webpack-dev-server --mode development",
+    "watch": "babel --watch src/lib --out-dir lib --extensions '.ts,.tsx'",
+    "build": "NODE_ENV=production webpack",
+    "less": "less-watch-compiler",
+    "css": "copy-and-watch --watch src/lib/*.css lib/",
+    "deploy": "gh-pages -d dist",
+    "tsc": "npx tsc --watch",
+    "dev": "concurrently \"npm run tsc\" \"npm run less\" \"npm run css\" \"npm run watch\" \"npm run start\"",
+    "rm": "rm -rf node_modules/ package-lock.json",
+    "op": "babel src/lib -d lib --copy-files"
+  },
+  "keywords": [
+    "lesca"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.20.5",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.2",
+    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/icons-material": "^5.11.0",
+    "@mui/material": "^5.11.0",
+    "autoprefixer": "^10.4.13",
+    "babel-loader": "^9.1.0",
+    "concurrently": "^7.6.0",
+    "copy-and-watch": "^0.1.6",
+    "css-loader": "^6.7.3",
+    "file-loader": "^6.2.0",
+    "gh-pages": "^4.0.0",
+    "html-react-parser": "^3.0.4",
+    "html-webpack-plugin": "^5.5.0",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.0",
+    "less-vars-to-js": "^1.3.0",
+    "less-watch-compiler": "^1.16.3",
+    "postcss": "^8.4.20",
+    "postcss-loader": "^7.0.2",
+    "prismjs": "^1.29.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "style-loader": "^3.3.1",
+    "ts-loader": "^9.4.2",
+    "typescript": "^4.9.4",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1"
+  },
+  "author": "jamehsu1125 <jameshsu1125@gmail.com>",
+  "homepage": "https://jameshsu1125.github.io/lesca-validate/",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:jameshsu1125/lesca-validate.git"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('autoprefixer')],
+};

package/readme.md

@@ -0,0 +1,54 @@
+[![React](https://img.shields.io/badge/-ReactJs-61DAFB?style=for-the-badge&logo=react&logoColor=white)](https://zh-hant.reactjs.org/)
+[![React](https://img.shields.io/badge/Less-1d365d?style=for-the-badge&logo=less&logoColor=white)](https://lesscss.org/)
+[![React](https://img.shields.io/badge/Typescript-4277c0?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
+[![React](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)](https://www.w3schools.com/html/)
+[![React](https://img.shields.io/badge/-CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)](https://www.w3schools.com/css/)
+[![NPM](https://img.shields.io/badge/NPM-ba443f?style=for-the-badge&logo=npm&logoColor=white)](https://www.npmjs.com/)
+[![React](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white)](https://nodejs.org/en/)
+[![NPM](https://img.shields.io/badge/DEV-Jameshsu1125-9cf?style=for-the-badge)](https://www.npmjs.com/~jameshsu1125)
+
+# Why use it?
+
+check is validate email, phone number and url format.
+
+#### [Live Demo](https://jameshsu1125.github.io/lesca-validate/)
+
+# Installation
+
+```sh
+npm install lesca-validate --save
+```
+
+## Usage
+
+As a Node module:
+
+```javascript
+import { ValidateEmail, ValidatePhone, ValidateURL } from 'lesca-validate';
+
+const email = 'username@host.com';
+ValidateEmail(email); // true
+
+const phone = '0912345678';
+ValidatePhone(phone); // true
+
+const url = 'https://google.com';
+ValidatePhone(url); // true
+```
+
+### Features
+
+- maintain if necessary
+
+[ci-badge]: https://github.com/executablebooks/markdown-it-plugin-template/workflows/CI/badge.svg
+[ci-link]: https://github.com/executablebooks/markdown-it--plugin-template/actions
+[npm-badge]: https://img.shields.io/npm/v/markdown-it-plugin-template.svg
+[npm-link]: https://www.npmjs.com/package/markdown-it-plugin-template
+[github actions]: https://docs.github.com/en/actions
+[github pages]: https://docs.github.com/en/pages
+[prettier]: https://prettier.io/
+[eslint]: https://eslint.org/
+[jest]: https://facebook.github.io/jest/
+[rollup]: https://rollupjs.org
+[npm]: https://www.npmjs.com
+[unpkg]: https://unpkg.com/

package/src/docs/components/code.js

@@ -0,0 +1,19 @@
+import HTMLReactParser from 'html-react-parser';
+import Prism from 'prismjs';
+import 'prismjs/themes/prism.css';
+import './code.less';
+
+const Code = ({ code, theme }) => {
+  return (
+    <pre>
+      <code>{HTMLReactParser(Prism.highlight(code, Prism.languages[theme], theme))}</code>
+    </pre>
+  );
+};
+
+Code.defaultProps = {
+  code: `import { useState } from 'react';`,
+  theme: 'javascript',
+};
+
+export default Code;

package/src/docs/components/code.less

@@ -0,0 +1,7 @@
+@import url('../theme.less');
+pre {
+  overflow: scroll;
+  padding: 20px;
+  outline: dashed 1px (@C4 - 50);
+  background-color: #fff;
+}

package/src/docs/components/navigation.js

@@ -0,0 +1,35 @@
+import { Button, ButtonGroup } from '@mui/material';
+import { useEffect } from 'react';
+import { name } from '../config';
+import './navigation.less';
+
+const Menu = ({ setState, state }) => (
+  <ButtonGroup variant='contained' size='small' color='success'>
+    <Button
+      onClick={() => {
+        setState('demo');
+      }}
+      disabled={state === 'demo'}
+    >
+      Demo
+    </Button>
+    <Button
+      onClick={() => {
+        setState('usage');
+      }}
+      disabled={state === 'usage'}
+    >
+      Usage
+    </Button>
+  </ButtonGroup>
+);
+
+const Navigation = ({ setState, state }) => (
+  <div className='Navigation'>
+    <div className='logo'>{name}</div>
+    <div className='menu'>
+      <Menu setState={setState} state={state} />
+    </div>
+  </div>
+);
+export default Navigation;

package/src/docs/components/navigation.less

@@ -0,0 +1,28 @@
+@import url('../theme.less');
+
+.Navigation {
+  position: fixed;
+  box-sizing: border-box;
+  padding: 0 20px;
+  width: 100%;
+  height: 70px;
+  background-color: @C2;
+
+  .logo {
+    float: left;
+    height: 100%;
+    color: #fff;
+    font-size: 30px;
+    font-family: 'Titillium Web', sans-serif;
+    line-height: 70px;
+  }
+
+  .menu {
+    display: flex;
+    float: right;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+  }
+}

package/src/docs/config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  name: 'lesca-validate',
+  description: 'check is validate email, phone number and url format.',
+};

package/src/docs/index.js

@@ -0,0 +1,35 @@
+import { Container } from '@mui/material';
+import { ThemeProvider } from '@mui/material/styles';
+import { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import Navigation from './components/navigation';
+import Demo from './pages/demo';
+import Usage from './pages/usage';
+import './styles.less';
+import { theme } from './theme';
+
+const App = () => {
+  const [state, setState] = useState('demo');
+
+  const appendPage = () => {
+    switch (state) {
+      default:
+      case 'demo':
+        return <Demo />;
+
+      case 'usage':
+        return <Usage />;
+    }
+  };
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Navigation setState={setState} state={state} />
+      <Container style={{ paddingTop: '70px' }} maxWidth='lg'>
+        {appendPage()}
+      </Container>
+    </ThemeProvider>
+  );
+};
+
+createRoot(document.getElementById('app')).render(<App />);

package/src/docs/module/lessVarsLoader.js

@@ -0,0 +1,5 @@
+const lessToJs = require('less-vars-to-js');
+
+module.exports = function (content) {
+  return `module.exports = ${JSON.stringify(lessToJs(content))}`;
+};

package/src/docs/pages/demo.js

@@ -0,0 +1,70 @@
+import { Button, ButtonGroup, TextField } from '@mui/material';
+import { useRef, useState } from 'react';
+import { ValidateEmail, ValidatePhone, ValidateURL } from '../../lib';
+
+const Demo = () => {
+  const emailRef = useRef();
+  const phoneRef = useRef();
+  const urlRef = useRef();
+
+  const [emailResult, setEmailResult] = useState();
+  const [phoneResult, setPhoneResult] = useState();
+  const [urlResult, setUrlResult] = useState();
+
+  return (
+    <div className='Demo'>
+      <h2>Validate Email</h2>
+      <TextField inputRef={emailRef} defaultValue='username@host.com' label='email' fullWidth />
+      <pre>
+        <code>{JSON.stringify(emailResult ?? 'no result')}</code>
+      </pre>
+      <ButtonGroup variant='contained'>
+        <Button
+          onClick={() => {
+            const { value } = emailRef.current;
+            setEmailResult(ValidateEmail(value));
+          }}
+        >
+          click
+        </Button>
+      </ButtonGroup>
+
+      <hr style={{ margin: '10px 0' }} />
+
+      <h2>Validate Phone[Taiwan only]</h2>
+      <TextField inputRef={phoneRef} defaultValue='0912345678' label='phone' fullWidth />
+      <pre>
+        <code>{JSON.stringify(phoneResult ?? 'no result')}</code>
+      </pre>
+      <ButtonGroup variant='contained'>
+        <Button
+          onClick={() => {
+            const { value } = phoneRef.current;
+            setPhoneResult(ValidatePhone(value));
+          }}
+        >
+          click
+        </Button>
+      </ButtonGroup>
+
+      <hr style={{ margin: '10px 0' }} />
+
+      <h2>Validate URL Address</h2>
+      <TextField inputRef={urlRef} defaultValue='https://www.google.com/' label='URL' fullWidth />
+      <pre>
+        <code>{JSON.stringify(urlResult ?? 'no result')}</code>
+      </pre>
+      <ButtonGroup variant='contained'>
+        <Button
+          onClick={() => {
+            const { value } = urlRef.current;
+            setUrlResult(ValidateURL(value));
+          }}
+        >
+          click
+        </Button>
+      </ButtonGroup>
+    </div>
+  );
+};
+export default Demo;

package/src/docs/pages/usage.js

@@ -0,0 +1,25 @@
+import { Button, ButtonGroup } from '@mui/material';
+import { useEffect } from 'react';
+import Code from '../components/code';
+import { name } from '../config';
+
+const codes = [{ title: '1. Installation', code: `npm install ${name} --save`, type: 'text' }];
+
+const Usage = () => {
+  useEffect(() => {}, []);
+  return (
+    <div className='Usage'>
+      <h2>Usage</h2>
+      {codes.map((e) => (
+        <div key={e.title}>
+          <h3>{e.title}</h3>
+          <Code code={e.code} theme={e.type} />
+        </div>
+      ))}
+      <ButtonGroup variant='contained'>
+        <Button>click</Button>
+      </ButtonGroup>
+    </div>
+  );
+};
+export default Usage;

package/src/docs/styles.less

@@ -0,0 +1,16 @@
+@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap&css');
+@import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap&css');
+@import url('./theme.less');
+
+body {
+  margin: 0;
+  background-color: @C4;
+  color: @C5;
+  font-family: 'Titillium Web', sans-serif;
+
+  overscroll-behavior: none;
+
+  .Demo > * {
+    margin: 5px 0;
+  }
+}

package/src/docs/theme.js

@@ -0,0 +1,22 @@
+import { createTheme } from '@mui/material/styles';
+import * as styles from '!!./module/lessVarsLoader!./theme.less';
+
+export const theme = createTheme({
+  palette: {
+    primary: {
+      main: styles['@C1'],
+    },
+    secondary: {
+      main: styles['@C2'],
+    },
+    error: {
+      main: styles['@C3'],
+    },
+    success: {
+      main: styles['@C4'],
+    },
+    warning: {
+      main: styles['@C5'],
+    },
+  },
+});

package/src/docs/theme.less

@@ -0,0 +1,6 @@
+/* Color Theme Swatches in RGBA */
+@C1: rgba(57, 76, 89, 1);
+@C2: rgba(92, 121, 140, 1);
+@C3: rgba(162, 180, 191, 1);
+@C4: rgba(242, 242, 242, 1);
+@C5: rgba(12, 12, 12, 1);

package/src/lib/index.ts

@@ -0,0 +1,34 @@
+export const ValidateEmail = (email: string) => {
+  return (
+    String(email)
+      .toLowerCase()
+      .match(
+        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+      ) !== null
+  );
+};
+
+export const ValidatePhone = (phone: string) => {
+  return phone !== '' && phone.length === 10 && phone.slice(0, 2) === '09';
+};
+
+export const ValidateURL = (str: string) => {
+  var pattern = new RegExp(
+    '^(https?:\\/\\/)?' +
+      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' +
+      '((\\d{1,3}\\.){3}\\d{1,3}))' +
+      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' +
+      '(\\?[;&a-z\\d%_.~+=-]*)?' +
+      '(\\#[-a-z\\d_]*)?$',
+    'i',
+  );
+  return !!pattern.test(str);
+};
+
+const Validate = {
+  email: ValidateEmail,
+  phone: ValidatePhone,
+  url: ValidateURL,
+};
+
+export default Validate;

package/template/template.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="zh-tw">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,user-scalable=0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <meta property="og:description" content="<%= htmlWebpackPlugin.options.description %>" />
+    <meta property="og:title" content="<%= htmlWebpackPlugin.options.title %>" />
+    <meta property="og:image" content="<%= htmlWebpackPlugin.options.url %>img/meta-img.jpg" />
+    <meta property="og:image:width" content="1280" />
+    <meta property="og:image:height" content="720" />
+    <meta property="og:url" content="<%= htmlWebpackPlugin.options.url %>" />
+    <meta property="og:type" content="website" />
+    <meta property="fb:app_id" content="171368189560011" />
+    <meta property="og:site_name" content="<%= htmlWebpackPlugin.options.title %>" />
+    <link
+      rel="apple-touch-icon"
+      href="<%= htmlWebpackPlugin.options.url %>img/apple-touch-icon.jpg"
+    />
+    <link rel="image_src" href="<%= htmlWebpackPlugin.options.url %>img/meta-img.jpg" />
+    <link
+      href="<%= htmlWebpackPlugin.options.url %>img/favicon.ico"
+      rel="icon"
+      type="image/x-icon"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <meta name="apple-mobile-web-app-capable" content="no" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

package/template/template.meta.js

@@ -0,0 +1,6 @@
+const config = require('../src/docs/config');
+module.exports = {
+  title: config.name,
+  description: config.description,
+  url: 'https://jameshsu1125.github.io/',
+};

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compileOnSave": true,
+  "compilerOptions": {
+    "outDir": "./lib/",
+    "target": "es5",
+    "module": "AMD",
+    "declaration": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "allowJs": true,
+    "noImplicitThis": false,
+    "paths": {
+      "*": ["./lib/*"]
+    }
+  },
+  "include": ["src/lib"]
+}

package/webpack.config.js

@@ -0,0 +1,61 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const template = './template/template.meta';
+const Meta = require(template);
+
+module.exports = {
+  entry: path.join(__dirname, 'src/docs'),
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        use: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.tsx?$/,
+        use: ['babel-loader', 'ts-loader'],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.(less|css)$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              esModule: false,
+            },
+          },
+          'postcss-loader',
+          'less-loader',
+        ],
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: { name: 'img/[path][name].[ext]', context: 'src/docs' },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      ...Meta,
+      template: 'template/template.html',
+    }),
+  ],
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js', '.jsx'],
+  },
+  devServer: {
+    port: 8000,
+  },
+};