Init project.

uiwjs · Jul 22, 2021 · c8028c6 · c8028c6
commit c8028c6
Show file tree

Hide file tree

Showing 15 changed files with 411 additions and 0 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,24 @@
+name: Build & Deploy
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-deploy:
+    runs-on: ubuntu-18.04
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v2
+      with:
+        node-version: 14
+
+    - run: npm install
+    - run: npm run build
+    - run: npm run coverage
+
+    - name: Deploy
+      uses: peaceiris/actions-gh-pages@v3
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        publish_dir: ./build
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,17 @@
+coverage
+build
+node_modules
+npm-debug.log*
+package-lock.json
+
+.eslintcache
+.DS_Store
+.cache
+.vscode
+
+*.bak
+*.tem
+*.temp
+#.swp
+*.*~
+~*.*
diff --git a/.kktrc.ts b/.kktrc.ts
@@ -0,0 +1,18 @@
+import webpack, { Configuration } from 'webpack';
+import lessModules from '@kkt/less-modules';
+import { LoaderConfOptions } from 'kkt';
+import pkg from './package.json';
+
+export default (conf: Configuration, env: 'development' | 'production', options: LoaderConfOptions) => {
+  conf = lessModules(conf, env, options);
+  // Get the project version.
+  conf.plugins!.push(
+    new webpack.DefinePlugin({
+      VERSION: JSON.stringify(pkg.version),
+    }),
+  );
+  if (env === 'production') {
+    conf.output = { ...conf.output, publicPath: './' };
+  }
+  return conf;
+};
diff --git a/README.md b/README.md
@@ -0,0 +1,37 @@
+Basic Example for TypeScript
+===
+
+Use an example of `TypeScript`.
+
+## Quick Start
+
+```bash
+$ npx create-kkt my-app -e typescript
+cd my-app
+npm install
+```
+
+## Open in CodeSandbox
+
+[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/s/github/kktjs/kkt/tree/master/example/typescript)
+
+## Development
+
+**development**
+
+Runs the project in development mode.  
+
+```bash
+npm run start
+```
+
+**production**
+
+Builds the app for production to the build folder.
+
+```bash
+npm run build
+```
+
+The build is minified and the filenames include the hashes.
+Your app is ready to be deployed!
diff --git a/package.json b/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "json-viewer",
+  "version": "1.0.0",
+  "description": "Online JSON Viewer, JSON Beautifier to beautify and tree view of JSON data - It works as JSON Pretty Print to pretty print JSON data.",
+  "private": true,
+  "scripts": {
+    "start": "kkt start",
+    "build": "kkt build",
+    "test": "kkt test --env=jsdom",
+    "coverage": "kkt test --env=jsdom --coverage"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/uiwjs/json-viewer.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@uiw/react-copy-to-clipboard": "4.9.1",
+    "@uiw/react-github-corners": "1.4.0",
+    "@uiw/react-split": "5.7.4",
+    "@uiw/react-textarea-code-editor": "1.3.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-json-view": "1.21.3"
+  },
+  "devDependencies": {
+    "@kkt/less-modules": "6.11.0",
+    "@types/react": "17.0.14",
+    "@types/react-dom": "17.0.9",
+    "kkt": "6.11.0"
+  },
+  "jest": {
+    "testMatch": [
+      "<rootDir>/src/**/*.test.{ts,tsx}"
+    ],
+    "collectCoverageFrom": [
+      "<rootDir>/src/app/*.{tsx,ts}"
+    ]
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+  <meta name="description" content="Online JSON Viewer, JSON Beautifier to beautify and tree view of JSON data - It works as JSON Pretty Print to pretty print JSON data.">
+  <meta name="keywords" content="json viewer,json beautifier,json pretty print,online json viewer,pretty json,format json, json reader,json pretty, pretty print json,beautify json,json file viewer,prettify json, json converter,json viewer online">
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <title>Best JSON Viewer and JSON Beautifier Online</title>
+</head>
+
+<body>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <div id="root"></div>
+  <!--
+    This HTML file is a template.
+    If you open it directly in the browser, you will see an empty page.
+
+    You can add webfonts, meta tags, or analytics to this file.
+    The build step will place the bundled scripts into the <body> tag.
+
+    To begin the development, run `npm start` or `yarn start`.
+    To create a production bundle, use `npm run build` or `yarn build`.
+  -->
+</body>
+
+</html>
diff --git a/src/app/App.module.css b/src/app/App.module.css
@@ -0,0 +1,25 @@
+.app {
+  height: 100%;
+}
+
+.message {
+  background: #ff000087;
+  padding: 2px 4px;
+  border-radius: 2px;
+  color: white;
+}
+
+.toolbar {
+  padding: 0 5px;
+  font-size: 12px;
+  border-top: 1px solid #d5d5d5;
+  background: #fff;
+  height: 28px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
diff --git a/src/app/App.test.tsx b/src/app/App.test.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -0,0 +1,119 @@
+import React, { useCallback, useEffect, useRef} from 'react';
+import Split from '@uiw/react-split';
+import CodeEditor, { SelectionText } from '@uiw/react-textarea-code-editor';
+import JsonViewer from 'react-json-view';
+import styles from './App.module.css';
+
+const App = () => {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const colElm = useRef<HTMLSpanElement>(null);
+  const selectedElm = useRef<HTMLSpanElement>(null);
+  const [code, setCode] = React.useState('');
+  const [json, setJson] = React.useState();
+  const [message, setMessage] = React.useState('');
+
+  const handleJson = useCallback(() => {
+    setMessage('');
+    try {
+      if (code) {
+        const obj = JSON.parse(code);
+        setJson(obj);
+      }
+    } catch (error) {
+      setMessage(error.message);
+      setJson(undefined)
+    }
+  }, [code]);
+
+  const formatJson = useCallback((_, replacer: number = 2) => {
+    setMessage('');
+    try {
+      if (code) {
+        const obj = JSON.parse(code);
+        const str = JSON.stringify(obj, null, replacer);
+        setCode(str);
+      }
+    } catch (error) {
+      setMessage(error.message);
+      setJson(undefined)
+    }
+  }, [code]);
+
+  const handleSelect = useCallback((evn: React.SyntheticEvent<HTMLTextAreaElement>) => {
+    handleColLn(evn.target as HTMLTextAreaElement);
+  }, []);
+
+  const handleColLn = (target: HTMLTextAreaElement | null) => {
+    if (!target) {
+      return
+    }
+    const result = new SelectionText(target as HTMLTextAreaElement);
+    colElm.current!.innerHTML = result.end as unknown as string;
+    selectedElm.current!.innerHTML = result.end - result.start === 0 ? '' : ` selected(${result.end - result.start})`;
+  }
+
+  useEffect(() => {
+    handleColLn(textareaRef.current)
+  }, []);
+
+  useEffect(() => {
+    handleJson()
+  }, [code, handleJson]);
+
+  return (
+    <div className={styles.app}>
+      <Split>
+        <div style={{ minWidth: 230, width: '45%', position: 'relative', backgroundColor: 'rgb(245, 245, 245)' }}>
+          <div style={{overflow: 'auto',height: '100%', paddingBottom: 25, boxSizing: 'border-box' }}>
+            <CodeEditor
+              value={code}
+              language="json"
+              placeholder="Please enter JSON code."
+              ref={textareaRef}
+              onChange={(evn) => setCode(evn.target.value)}
+              padding={5}
+              onMouseMove={handleSelect}
+              onSelect={handleSelect}
+              style={{
+                minHeight: '100%',
+                fontSize: 12,
+                backgroundColor: "#f5f5f5",
+                fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
+              }}
+            />
+          </div>
+          <div className={styles.toolbar}>
+            <div>
+              <button onClick={formatJson}>
+                Format
+              </button>
+              <button onClick={() => formatJson(null, 0)}>
+                Compress
+              </button>
+            </div>
+            <div>
+              <span ref={colElm} /><span ref={selectedElm} />
+            </div>
+            <div>
+              {message && (
+                <div className={styles.message}>{message}</div>
+              )}
+            </div>
+          </div>
+        </div>
+        <div style={{ flex: 1, minWidth: 230, userSelect: 'none', padding: 10, overflow: 'auto' }}>
+          {message && (
+            <pre style={{ padding: 0, margin: 0 }}>
+              {message}
+            </pre>
+          )}
+          {json && typeof json == 'object' && (
+            <JsonViewer src={json!} theme="rjv-default" style={{  }} displayDataTypes={false} />
+          )}
+        </div>
+      </Split>
+    </div>
+  )
+};
+
+export default App;
diff --git a/src/app/logo.svg b/src/app/logo.svg
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body, html, #root {
+  height: 100%;
+}
diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './app/App';
+import './index.css';
+
+ReactDOM.render(<App />, document.getElementById('root'));