initial commit

mkg0 · mkg0 · commit 46581689bed4 · 2018-03-04T23:17:19.000+03:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,9 @@
+{
+  "presets": [
+    "env",
+    "react"
+  ],
+  "plugins": [
+    ["transform-object-rest-spread"]
+  ]
+}
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,28 @@
+module.exports = {
+  extends: [
+      "eslint:recommended",
+      "plugin:react/recommended",
+      "prettier",
+  ],
+  plugins: [
+      "react",
+      "prettier",
+  ],
+  rules: {
+      "prettier/prettier": ["error", {
+          "singleQuote": true,
+          "trailingComma": "es5",
+          "bracketSpacing": true,
+          "jsxBracketSameLine": true,
+          "printWidth": 100,
+          "parser": "babylon",
+      }]
+  },
+  parser: "babel-eslint",
+  env: {
+      "es6": true,
+      "node": true,
+      "browser": true,
+      "jest": true,
+    },
+};
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+logs
+*.log
+npm-debug.log.*
+node_modules
+dist
+!demo/dist
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,6 @@
+demo
+node_modules
+.eslintrc.js
+.gitignore
+yarn.lock
+webpack.config.js
diff --git a/README.md b/README.md
@@ -0,0 +1,59 @@
+A react component for editing/formating
+> react-numeric is a wrapper component of [autonumeric](https://github.com/autoNumeric/autoNumeric).
+
+## Installition
+
+```sh
+yarn add react-numeric
+# or
+npm install react-numeric --save
+```
+
+## Usage
+
+```jsx
+import ReactNumeric from 'ract-numeric';
+
+export function USDMoneyInput(props){
+  const { value } = props; // number typed
+  return (
+    <ReactNumeric
+      value={value}
+      currencySymbol="$"
+      minimumValue="0"
+      decimalCharacter="."
+      digitGroupSeparator=""
+      onChange={(event, value)=>{
+        console.log(event.target.value); // '1,234.5 $'
+        console.log(value); // 1234.5
+      }}
+    />
+  );
+}
+
+// You can use predefinedOptions
+import { predefinedOptions } from 'react-numeric';
+
+export function USDMoneyInput(props){
+  const { value } = props; // number typed
+  return (
+    <ReactNumeric
+      value={value}
+      preDefined={predefinedOptions.dollarPos}
+      onChange={(e, value)=> this.setState({ value })}
+    />
+  );
+}
+
+// if you want to store value as string typed
+export function USDMoneyInput(props){
+  const { value } = props; // string typed
+  return (
+    <ReactNumeric
+      value={value}
+      outputFormat="string"
+      onChange={(e, value)=> this.setState({ value })}
+    />
+  );
+}
+```
diff --git a/demo/dist/main.js b/demo/dist/main.js
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>react-numeric</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans|PT+Sans:400,700" rel="stylesheet">
+</head>
+<body>
+  <div id="root"></div>
+  <script src="dist/main.js"></script>
+</body>
+</html>
diff --git a/demo/src/components/ComponentSnippet/componentSnippet.css b/demo/src/components/ComponentSnippet/componentSnippet.css
@@ -0,0 +1,66 @@
+.wrapper{
+  background: #f8f9f9;
+  font-size: 0.9em;
+  margin-top: 2em;
+  margin-bottom: 6em;
+  position: relative;
+}
+
+.content{
+  position: relative;
+  z-index: 1;
+  background: #f8f9f9!important;
+}
+
+.preview{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 12em;
+}
+
+.code{
+  background: #f8f9f9!important;
+}
+
+.buttons{
+  position: absolute;
+  top: 100%;
+  right: 0em;
+}
+
+.button{
+  background-color: rgb(248, 249, 249);
+  padding: 1em;
+  border: 1px solid transparent;
+  font-size: 0.8em;
+  cursor: pointer;
+  outline: 0;
+  color: #3d91ff;
+}
+
+.button:hover{
+  border-color: #3d91ff;
+}
+
+.button:first-child{
+  border-bottom-left-radius: 4px;
+}
+
+.button:last-child{
+  border-bottom-right-radius: 4px;
+}
+
+.passiveButton{
+  background: #f1f2f2;
+  color: #666666;
+}
+
+input{
+  font-size: 1.6em;
+  padding: 0.5em;
+}
+
+input:focus{
+  outline:2px solid #3d91ff;
+}
diff --git a/demo/src/components/ComponentSnippet/index.js b/demo/src/components/ComponentSnippet/index.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import styles from './componentSnippet.css';
+import SyntaxHighlighter from 'react-syntax-highlighter/prism';
+import dark from 'react-syntax-highlighter/styles/prism/coy.js';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+
+class ComponentSnippet extends React.Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      mode: props.initialMode,
+    }
+  }
+
+  render() {
+    const {mode} = this.state;
+    const { preview, code} = this.props;
+    return (
+      <div className={styles.wrapper}>
+        <div className={styles.content}>
+          {mode === 'code' ? (
+            <SyntaxHighlighter className={styles.code} language='jsx' style={dark}>
+              {code}
+            </SyntaxHighlighter>
+          ) : (
+            <div className={styles.preview}>{preview}</div>
+          )}
+        </div>
+        <div className={styles.buttons}>
+          <button onClick={()=>this.setState({mode: 'code'})} className={cx(styles.button, {[styles.passiveButton]: mode !== 'code'})}>CODE</button>
+          <button onClick={()=>this.setState({mode: 'preview'})} className={cx(styles.button, {[styles.passiveButton]: mode !== 'preview'})}>PREVIEW</button>
+        </div>
+      </div>
+    );
+  }
+}
+
+ComponentSnippet.propTypes = {
+  initialMode: PropTypes.oneOf(['preview', 'code']),
+}
+
+ComponentSnippet.defaultProps = {
+  initialMode: 'preview',
+}
+
+export default ComponentSnippet;
diff --git a/demo/src/components/Layout/index.js b/demo/src/components/Layout/index.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import styles from './layout.css';
+
+const Layout = props => {
+  return (
+    <div className={styles.wrapper}>
+        {props.children}
+    </div>
+  );
+};
+
+export default Layout;
diff --git a/demo/src/components/Layout/layout.css b/demo/src/components/Layout/layout.css
@@ -0,0 +1,64 @@
+html{
+  height: 100%;
+	background-color: #e7eff2;
+  color: #637381;
+  overflow-y: scroll;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+}
+
+body{
+  min-height: 100vh;
+  margin: 0;
+  padding: 2em;
+  text-align: center;
+
+}
+
+.wrapper{
+  padding: 40px 40px 40px 48px;
+  /* box-shadow: 0 12px 36px rgba(0,0,0,.2); */
+  background-color: #fff;
+  max-width: 970px;
+  margin: 6em auto 0 auto;
+  text-align: left;
+}
+
+h1{
+  font-size: 2.5em;
+  font-weight: 600;
+  color: #161d25;
+  font-family: 'PT Sans', sans-serif;
+  max-width: 600px;
+}
+
+h2{
+  color: #161d25;
+  font-size: 1.6em;
+  font-weight: 400;
+  font-family: 'PT Sans', sans-serif;
+  max-width: 600px;  
+}
+
+blockquote{
+  font-size: 1.6em;
+  font-weight: 400;
+  font-family: 'PT Sans', sans-serif;
+  box-shadow: -7px 0px #3ecf8e;
+  margin: 1em 0.3em;
+  padding-left: 1em;
+  max-width: 600px;  
+}
+
+.blockquote{
+  font-size: 1.6em;
+  font-weight: 400;
+  font-family: 'PT Sans', sans-serif;
+  margin: 0.3em;
+  max-width: 600px;
+}
+
+p{
+  font-weight: 500;
+  max-width: 600px;
+}
diff --git a/demo/src/components/Snippet/index.js b/demo/src/components/Snippet/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './snippet.css';
+import SyntaxHighlighter from 'react-syntax-highlighter/prism';
+import dark from 'react-syntax-highlighter/styles/prism/coy.js';
+
+const ComponentSnippet = (props) => {
+  return (
+    <SyntaxHighlighter className={styles.wrapper} language='jsx' style={dark} {...props}>
+      {props.children}
+    </SyntaxHighlighter>
+  );
+};
+
+export default ComponentSnippet;
diff --git a/demo/src/components/Snippet/snippet.css b/demo/src/components/Snippet/snippet.css
@@ -0,0 +1,4 @@
+.wrapper{
+  background: #f8f9f9!important;
+  font-size: 0.9em;
+}
diff --git a/demo/src/index.js b/demo/src/index.js
diff --git a/package.json b/package.json
diff --git a/src/index.js b/src/index.js
diff --git a/webpack.config.js b/webpack.config.js
diff --git a/yarn.lock b/yarn.lock
