fix(azu): update ink

package.json

@@ -5,10 +5,10 @@
     "packages/@azu/*"
   ],
   "devDependencies": {
-    "husky": "^0.14.3",
-    "lerna": "^2.11.0",
-    "lint-staged": "^7.1.0",
-    "prettier": "^1.12.1"
+    "husky": "^4.2.5",
+    "lerna": "^3.22.1",
+    "lint-staged": "^10.2.11",
+    "prettier": "^2.0.5"
   },
   "scripts": {
     "bootstrap": "lerna bootstrap",

packages/azu/.babelrc

@@ -1,20 +1,13 @@
 {
   "presets": [
+    "@babel/preset-react",
     [
-      "env",
+      "@babel/preset-env",
       {
         "targets": {
-          "node": "6.10"
+          "node": true
         }
       }
     ]
-  ],
-  "plugins": [
-    [
-      "transform-react-jsx",
-      {
-        "pragma": "h"
-      }
-    ]
   ]
 }

packages/azu/.gitignore

@@ -1,36 +1,155 @@
 lib/
-
-### https://raw.github.com/github/gitignore/608690d6b9a78c2a003affc792e49a84905b3118/Node.gitignore
+### https://raw.github.com/github/gitignore/d2c1bb2b9c72ead618c9f6a48280ebc7a8e0dff6/Node.gitignore
 
 # Logs
 logs
 *.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
 # Runtime data
 pids
 *.pid
 *.seed
+*.pid.lock
 
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
 
 # Coverage directory used by tools like istanbul
 coverage
 
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
 
+# Bower dependency directory (https://bower.io/)
+bower_components
+
 # node-waf configuration
 .lock-wscript
 
-# Compiled binary addons (http://nodejs.org/api/addons.html)
+# Compiled binary addons (https://nodejs.org/api/addons.html)
 build/Release
 
-# Dependency directory
-# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
-node_modules
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+
+### https://raw.github.com/github/gitignore/d2c1bb2b9c72ead618c9f6a48280ebc7a8e0dff6/Global/JetBrains.gitignore
+
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# Generated files
+.idea/**/contentModel.xml
+
+# Sensitive or high-churn files
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/dbnavigator.xml
+
+# Gradle
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# Gradle and Maven with auto-import
+# When using Gradle or Maven with auto-import, you should exclude module files,
+# since they will be recreated, and may cause churn.  Uncomment if using
+# auto-import.
+# .idea/modules.xml
+# .idea/*.iml
+# .idea/modules
+
+# CMake
+cmake-build-*/
+
+# Mongo Explorer plugin
+.idea/**/mongoSettings.xml
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based Rest Client
+.idea/httpRequests
 
-# Debug log from npm
-npm-debug.log
+# Android studio 3.1+ serialized cache file
+.idea/caches/build_file_checksums.ser
 
 

packages/azu/bin/azu.js

@@ -1,26 +1,2 @@
 #!/usr/bin/env node
-"use strict";
-const meow = require("meow");
-const path = require("path");
-const { h, render } = require("ink");
-
-const Azu = require("../lib/Azu").Azu;
-
-meow(`
-    Usage
-    
-        $ azu
-`);
-
-// workaround image
-const termImg = require("term-img");
-const terminalImage = require("terminal-image");
-const AZU_IMAGE_PATH = path.join(__dirname, "../resources/azu-c.png");
-const fallback = async () => {
-    const image = await terminalImage.file(AZU_IMAGE_PATH);
-    console.log(image);
-};
-
-termImg(path.join(AZU_IMAGE_PATH), { fallback });
-
-render(h(Azu));
+require("../lib/cli").run();

packages/azu/package.json

@@ -41,22 +41,22 @@
     "tabWidth": 4
   },
   "devDependencies": {
-    "@types/node": "^10.0.6",
-    "babel-cli": "^6.26.0",
-    "babel-plugin-transform-react-jsx": "^6.24.1",
-    "babel-preset-env": "^1.6.1",
-    "cross-env": "^5.1.5",
-    "prettier": "^1.12.1"
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@types/node": "^14.0.20",
+    "cross-env": "^7.0.2",
+    "prettier": "^2.0.5"
   },
   "dependencies": {
-    "arr-rotate": "^1.0.0",
-    "figures": "^2.0.0",
-    "ink": "^0.5.0",
-    "lodash.isequal": "^4.5.0",
-    "meow": "^5.0.0",
-    "opn": "^5.3.0",
-    "prop-types": "^15.6.1",
-    "term-img": "^2.1.0",
-    "terminal-image": "^0.1.1"
+    "import-jsx": "^4.0.0",
+    "ink": "^2.7.1",
+    "ink-select-input": "^3.1.2",
+    "meow": "^7.0.1",
+    "open": "^6.4.0",
+    "react": "^16.13.1",
+    "term-img": "^5.0.0",
+    "terminal-image": "^1.1.0"
   }
 }

packages/azu/src/Azu.jsx

@@ -1,59 +1,61 @@
-const { h, render, Component } = require("ink");
-const SelectInput = require("./component/Select");
 const path = require("path");
-const opn = require("opn");
-const open = url => opn(url, { wait: false });
-const handleSelect = item => {
+const React = require("react");
+const { Box, Text } = require("ink");
+const SelectInput = require("ink-select-input").default;
+const open = require("open");
+
+const handleSelect = (item) => {
     if (item.url) {
         open(item.url);
     }
+
     if (item.action) {
         item.action();
     }
 };
 
-const items = [
+const createItems = (items) => {
+    for (const item of items) {
+        item.key = item.url || item.label;
+    }
+
+    return items;
+};
+
+const items = createItems([
     {
         label: "Twitter",
-        url: "https://twitter.com/azu_re"
+        url: "https://twitter.com/azu_re",
     },
     {
         label: "GitHub",
-        url: "https://github.com/azu"
+        url: "https://github.com/azu",
     },
     {
         label: "Blog",
-        url: "https://efcl.info/"
+        url: "https://efcl.info/",
     },
     {
         label: "JSer.info",
-        url: "https://jser.info/"
+        url: "https://jser.info/",
     },
     {
         label: "Ask Me Anything",
-        url: "https://github.com/azu/azu/issues/new?template=AMA.md"
+        url: "https://github.com/azu/azu/issues/new?template=AMA.md",
     },
     {
         label: "Quit",
         action() {
             process.exit();
-        }
-    }
-];
+        },
+    },
+]);
 
-export class Azu extends Component {
-    render() {
-        return (
-            <div>
-                <br />
-                <div>
-                    <span>{`Hello, I am Azu.`}</span>
-                    <br />
-                    <span>{`I'm a client-side programmer.`}</span>
-                </div>
-                <br />
-                <SelectInput items={items} onSelect={handleSelect} />
-            </div>
-        );
-    }
-}
+module.exports = () => (
+    <Box flexDirection="column">
+        <Box marginBottom={1}>
+            <Text>I'm a OSS programmer.</Text>
+        </Box>
+        <SelectInput items={items} onSelect={handleSelect} />
+    </Box>
+);

packages/azu/src/cli.jsx

@@ -0,0 +1,30 @@
+const path = require("path");
+const meow = require("meow");
+const termImg = require("term-img");
+const terminalImage = require("terminal-image");
+const importJsx = require("import-jsx");
+const React = require("react");
+const { render } = require("ink");
+
+const ui = importJsx("./Azu");
+
+const cli = meow(
+    `
+	Usage
+	  $ npx azu
+`,
+    {
+        autoHelp: true,
+        autoVersion: true
+    }
+);
+
+export const run = async () => {
+    const image = await terminalImage.file(path.join(__dirname, "../resources/avatar.png"), {
+        width: 32,
+        height: 32,
+        preserveAspectRatio: false
+    });
+    console.log(image);
+    render(React.createElement(ui));
+};