generator-reshow 0.0.0 → 0.0.1

package/README.md

@@ -1,11 +1,11 @@
 # `generator-reshow`
 
-> TODO: description
+> Lets you focus on code, not build tools like `create-react-app`
 
 ## Usage
 
 ```
-const generatorReshow = require('generator-reshow');
-
-// TODO: DEMONSTRATE API
+npx yonpx reshow my-app
+cd my-app
+npm start
 ```

package/generators/app/README.md

@@ -0,0 +1,4 @@
+# `reshow:app`
+
+> check https://github.com/react-atomic/reshow/tree/main/packages/generator-reshow 
+

package/generators/app/__tests__/TestApp.js

@@ -1,14 +1,19 @@
 /**
  * https://yeoman.io/authoring/testing.html
  * https://gilsondev.gitbooks.io/yeoman-authoring/content/authoring/unit_testing.html
+ *
+ * https://github.com/yeoman/yeoman-assert/blob/main/index.js
+ * https://github.com/yeoman/yeoman-test/blob/main/lib/run-context.js
  */
 
-const getYo = require("yo-reshow");
-const { YoTest, assert } = getYo();
+const getYoUnit = require("yo-unit");
+const { YoTest, assert } = getYoUnit();
+
+describe("generator-reshow:app", () => {
+  let runResult;
 
-describe("generator-reshow-app:app", () => {
   before(async () => {
-    await YoTest({
+    runResult = await YoTest({
       source: __dirname + "/../.",
       params: {
         isReady: true,
@@ -19,6 +24,12 @@ describe("generator-reshow-app:app", () => {
     });
   });
 
+  after(()=>{
+    if (runResult) {
+      runResult.restore();
+    }
+  });
+
   it("should have folder", () => {
     assert.file(["src", "ui"]);
   });

package/generators/app/index.js

@@ -1,5 +1,9 @@
 const getYo = require("yo-reshow");
-const { YoGenerator, YoHelper } = getYo();
+const { YoGenerator, YoHelper, commonPrompt } = getYo();
+
+/**
+ * App Generator
+ */
 
 module.exports = class extends YoGenerator {
   /**
@@ -17,66 +21,49 @@ module.exports = class extends YoGenerator {
    */
 
   /**
-   * Using lists in a yeoman prompt
+   * Questions.
    *
    * https://www.alwaystwisted.com/post.php?s=using-lists-in-a-yeoman-generator
    * https://github.com/SBoudrias/Inquirer.js
    */
   async prompting() {
-    const { say, destFolderName } = YoHelper(this);
-    // https://github.com/yeoman/environment/blob/main/lib/util/log.js
-    say(
-      'Before "Start!"\n\n!! Need Create Folder First !!\n\nYou need create folder by yourself.'
-    );
-
+    const { handleAnswers } = YoHelper(this);
     const prompts = [
-      {
-        type: "confirm",
-        name: "isReady",
-        message: `We will put files at [${destFolderName}], do you already create app folder?`,
-        default: false,
-      },
-      {
-        when: (response) => {
-          if (!response.isReady) {
-            process.exit(0);
-          }
-        },
-      },
-      {
-        type: "input",
-        name: "mainName",
-        message: "Please input your app name?",
-        default: destFolderName,
-      },
-      {
-        type: "input",
-        name: "description",
-        message:
-          "Please input description for plug-in? (will use in package.json)",
-        default: "About ...",
-      },
-      {
-        type: "input",
-        name: "keyword",
-        message: "Please input keyword for plug-in? (will use in package.json)",
-        default: "",
-      },
+      ...commonPrompt.mainName(this),
+      ...commonPrompt.desc(this),
     ];
     const answers = await this.prompt(prompts);
-    this.mainName = answers.mainName;
-    this.description = answers.description;
-    this.keyword = answers.keyword || answers.mainName;
+    handleAnswers(answers);
+    this.composeWith(require.resolve("../compile-sh"), {
+      webpackEnabled: true,
+    });
   }
 
   writing() {
-    const { cp } = YoHelper(this);
+    this.env.options.nodePackageManager = "yarn";
+    const { cp, chMainName, mkdir } = YoHelper(this);
+
+    // handle change to new folder
+    chMainName(this.mainName);
+
+    // handle copy file
+    mkdir("ui/organisms");
     cp("ui");
     cp("src");
+    cp("data");
     cp(".gitignore");
-    cp("compile.sh");
+    cp("screen.sh");
     cp("index.html");
     cp("package.json");
+    cp("README.md");
     cp("webpack.config.js");
   }
+
+  async end() {
+    if (!this.options?.skipInstall) {
+      const { say } = YoHelper(this);
+      await this.spawnCommand("./compile.sh", ["s", "open"]);
+      say("Check the web browser, it should autoload now.");
+    }
+  }
 };

package/generators/app/templates/README.md

@@ -0,0 +1,9 @@
+# `APP`
+
+> TODO: description
+
+## Usage
+
+```
+
+```

package/generators/app/templates/data/env

@@ -0,0 +1 @@
+htmlTitle="DEMO"

package/generators/app/templates/package.json

@@ -1,24 +1,22 @@
 {
-  "description": "Reshow App",
+  "private": true,
   "repository": {
     "type": "git",
-    "url": "https://github.com/react-atomic/react-atomic-ui"
+    "url": "https://github.com/react-atomic/"
   },
-  "keywords": [
-    "app",
-    "reshow-app"
-  ],
+  "description": "Reshow App",
+  "version": "0.0.0",
+  "keywords": ["app", "reshow-app"],
   "author": "",
   "license": "ISC",
-  "dependencies": {
+  "dependencies": {},
+  "devDependencies": {
     "get-object-value": "*",
-    "get-scroll-info": "*",
     "organism-react-ajax": "*",
     "organism-react-navigation": "*",
     "organism-react-popup": "*",
     "organism-react-progress": "*",
     "pmvc_react_admin": "*",
-    "pmvc_react_list": "*",
     "react": "^16.x",
     "react-dom": "^16.x",
     "reshow": "*",

package/generators/app/templates/screen.sh

@@ -0,0 +1,34 @@
+#!/bin/bash
+
+SCREEN_NAME=`basename "$PWD"`
+
+exec() {
+    tabName=$1
+    cmd=$2
+    echo $tabName
+    if ! screen -list | grep -q "${SCREEN_NAME}"; then
+        screen -dmS ${SCREEN_NAME};
+        sleep 1;
+    fi
+    screen -S ${SCREEN_NAME} -X screen -t ${tabName}
+    screen -S ${SCREEN_NAME} -p ${tabName} -X stuff "$cmd^M";
+}
+
+case "$1" in
+    enter)
+        screen -r $SCREEN_NAME 
+        ;;
+    stopall)
+        screen -X -S ${SCREEN_NAME} quit
+        ;;
+    startall)
+        exec "server" "./compile.sh s"
+        exec "hot" "./compile.sh hot"
+        echo "run 'screen -r $SCREEN_NAME' or './screen.sh enter' to enter screen"
+        ;;
+    *)
+        echo $"Usage: $0 {startall|stopall|enter}"
+        exit 1
+esac
+
+exit $?

package/generators/app/templates/ui/pages/Page1.jsx

@@ -0,0 +1,8 @@
+import usePage from "../../src/usePage";
+
+const Page1 = (props) => {
+  usePage({ ...props, pageName: "Page1" });
+  return <>This is page1</>;
+};
+
+export default Page1;

package/generators/app/templates/ui/pages/Page2.jsx

@@ -0,0 +1,8 @@
+import usePage from "../../src/usePage";
+
+const Page2 = (props) => {
+  usePage({ ...props, pageName: "Page2" });
+  return <>This is page2</>;
+};
+
+export default Page2;

package/generators/app/templates/ui/pages/index.jsx

@@ -4,10 +4,12 @@ import { PopupPool } from "organism-react-popup";
 import { PageLoadProgressHandler } from "organism-react-progress";
 
 import Doc from "../templates/Doc";
-import Atoms from "../pages/Atoms";
+import Page1 from "../pages/Page1";
+import Page2 from "../pages/Page2";
 
 const themes = {
-  Atoms,
+  Page1,
+  Page2,
 };
 
 const Index = (props) => (
@@ -15,7 +17,7 @@ const Index = (props) => (
     {({ tplProps }) => {
       return (
         <Doc {...tplProps}>
-          <ClientRoute {...props} themes={themes} defaultThemePath="Atoms" />
+          <ClientRoute {...props} themes={themes} defaultThemePath="Page1" />
           <PageLoadProgressHandler ajax={true} />
           <ReshowMessage />
           <PopupPool />

package/generators/compile-sh/README.md

@@ -0,0 +1,8 @@
+# `compile-sh`
+
+> build compile.sh 
+
+## Usage
+
+> You should call it with this.composeWith()
+

package/generators/compile-sh/__tests__/Test.js

@@ -0,0 +1,45 @@
+/**
+ * https://yeoman.io/authoring/testing.html
+ * https://gilsondev.gitbooks.io/yeoman-authoring/content/authoring/unit_testing.html
+ *
+ * https://github.com/yeoman/yeoman-assert/blob/main/index.js
+ * https://github.com/yeoman/yeoman-test/blob/main/lib/run-context.js
+ */
+
+const getYoUnit = require("yo-unit");
+const { YoTest, assert } = getYoUnit();
+
+describe("!! compile-sh !!", () => {
+  let runResult;
+
+  before(async () => {
+    runResult = await YoTest({
+      source: __dirname + "/../.",
+      params: {
+        isReady: true,
+        appNamee: "foo",
+        description: "foo-desc",
+        keyword: "foo-keyword",
+      },
+    });
+  });
+
+  after(() => {
+    if (runResult) {
+      runResult.restore();
+    }
+  });
+
+  it("should have folder", () => {
+    //    assert.file(["src", "ui"]);
+  });
+
+  it("should have file", () => {
+    //   assert.file(["compile.sh", "index.html"]);
+  });
+
+  it("should have content", () => {
+    //    assert.fileContent('composer.json', 'foo-desc');
+    //    assert.fileContent('.circleci/config.yml', 'foo');
+  });
+});

package/generators/compile-sh/index.js

@@ -0,0 +1,12 @@
+const getYo = require("yo-reshow");
+const { YoGenerator, YoHelper, commonPrompt } = getYo();
+
+/**
+ * compile-sh Generator
+ */
+module.exports = class extends YoGenerator {
+  writing() {
+    const { cp } = YoHelper(this);
+    cp("compile.sh", null, { webpackEnabled: this.options.webpackEnabled });
+  }
+};

package/generators/{app → compile-sh}/templates/compile.sh

@@ -3,21 +3,38 @@
 conf='{'
 conf+='"assetsRoot":"./assets/",'
 conf+='"externals":{"d3": "d3"},'
-conf+='"devPort": "'${hotPort:-8080}'"'
+conf+='"hotPort": "'${hotPort:-3088}'"'
 conf+='}'
 
-PWD=`dirname $0`
-cd $PWD
-webpack='npm run webpack --'
+DIR=$( cd "$(dirname "$0")" ; pwd -P )
+cd $DIR
+OPEN=$(which xdg-open 2>/dev/null)
+if [ -z "$OPEN" ]; then 
+  OPEN="open"
+fi
+
+if [ "x<%= webpackEnabled %>" == "xon" ]; then
+  webpack='npm run webpack --'
+fi
+
+checkBabel(){
+  if [ ! -e ".babelrc" ] && [ ! -e "../../packages" ]; then
+    if [ -e ${DIR}/node_modules/reshow-app/.babelrc ]; then
+      cp ${DIR}/node_modules/reshow-app/.babelrc ${DIR}/.babelrc
+    fi
+  fi
+}
 
 production(){
     echo "Production Mode";
+    checkBabel
     npm run build
-    CONFIG=$conf NODE_ENV=production $webpack --mode=production 
+    CONFIG=$conf NODE_ENV=production $webpack
 }
 
 analyzer(){
     echo "Analyzer Mode";
+    checkBabel
     npm run build
     CONFIG=$conf BUNDLE='{}' $webpack
 }
@@ -25,17 +42,31 @@ analyzer(){
 develop(){
     stop
     echo "Develop Mode";
+    checkBabel
     npm run build
     CONFIG=$conf $webpack
 }
 
+stopServer(){
+  killBy ${DIR}/node_modules/.bin/ws
+  echo "stop server done";
+}
+
 startServer(){
-    DIR="$( cd "$(dirname "$0")" ; pwd -P )"
-    killBy ${DIR}/node_modules/.bin/ws
+    stopServer
     yarn
+    if [ ! -e "build" ]; then
+        develop
+    fi
     port=${port-3000}
     echo "Start server";
-    npm run start -- -p $port -v
+    if [ "$1" == "open" ]; then
+        npm run start -- -p $port &
+        sleep 3 
+        $OPEN http://localhost:$port        
+    else
+        npm run start -- -p $port -v
+    fi
 }
 
 killBy(){
@@ -43,7 +74,6 @@ killBy(){
 }
 
 stop(){
-    DIR="$( cd "$(dirname "$0")" ; pwd -P )"
     killBy ${DIR}/node_modules/.bin/babel 
     cat webpack.pid | xargs -I{} kill -9 {}
     npm run clean
@@ -53,6 +83,7 @@ stop(){
 watch(){
     stop 
     echo "Watch Mode";
+    checkBabel
     npm run build:ui -- --watch &
     npm run build:src -- --watch &
     sleep 10 
@@ -62,6 +93,7 @@ watch(){
 watchTest(){
     stop 
     echo "Watch Test";
+    checkBabel
     npm run build:test:ui -- --watch &
     npm run build:test:src -- --watch &
 }
@@ -69,8 +101,10 @@ watchTest(){
 hot(){
     stop 
     echo "Hot Mode";
+    checkBabel
     npm run build:ui -- --watch &
     npm run build:src -- --watch &
+    sleep 5
     HOT_UPDATE=1 CONFIG=$conf $webpack serve &
 }
 
@@ -82,7 +116,10 @@ case "$1" in
     analyzer 
     ;;
   s)
-    startServer 
+    startServer $2 
+    ;;
+  ss)
+    stopServer
     ;;
   hot)
     hot

package/generators/generator/README.md

@@ -0,0 +1,9 @@
+# `generator`
+
+> TODO: description 
+
+## Usage
+
+```
+npx yonpx reshow:generator
+```

package/generators/generator/__tests__/TestGenerator.js

@@ -0,0 +1,44 @@
+/**
+ * https://yeoman.io/authoring/testing.html
+ * https://gilsondev.gitbooks.io/yeoman-authoring/content/authoring/unit_testing.html
+ *
+ * https://github.com/yeoman/yeoman-assert/blob/main/index.js
+ * https://github.com/yeoman/yeoman-test/blob/main/lib/run-context.js
+ */
+
+const getYoUnit = require("yo-unit");
+const { YoTest, assert } = getYoUnit();
+
+describe("!! generator !!", () => {
+  let runResult;
+
+  before(async () => {
+    runResult = await YoTest({
+      source: __dirname + "/../.",
+      params: {
+        isReady: true,
+        mainNamee: "foo",
+        description: "foo-desc",
+        keyword: "foo-keyword",
+      },
+    });
+  });
+
+  after(() => {
+    if (runResult) {
+      runResult.restore();
+    }
+  });
+
+  it("should have folder", () => {
+    assert.file(["__tests__"]);
+  });
+
+  it("should have file", () => {
+    assert.file(["README.md", "index.js"]);
+  });
+
+  it("should have content", () => {
+    assert.fileContent("README.md", "foo");
+  });
+});

package/generators/generator/index.js

@@ -1,5 +1,9 @@
 const getYo = require("yo-reshow");
-const { YoGenerator, YoHelper } = getYo();
+const { YoGenerator, YoHelper, commonPrompt } = getYo();
+
+/**
+ * The Generator
+ */
 
 module.exports = class extends YoGenerator {
   /**
@@ -17,66 +21,42 @@ module.exports = class extends YoGenerator {
    */
 
   /**
-   * Using lists in a yeoman prompt
+   * Questions.
    *
    * https://www.alwaystwisted.com/post.php?s=using-lists-in-a-yeoman-generator
    * https://github.com/SBoudrias/Inquirer.js
    */
   async prompting() {
-    const { say, destFolderName } = YoHelper(this);
-    // https://github.com/yeoman/environment/blob/main/lib/util/log.js
-    say(
-      'Before "Start!"\n\n!! Need Create Folder First !!\n\nYou need create folder by yourself.'
-    );
+    this.env.options.nodePackageManager = "yarn";
+
+    const {
+      handleAnswers,
+      mergePromptOrOption,
+      promptChainLocator,
+      promptChain,
+    } = YoHelper(this);
 
     const prompts = [
-      {
-        type: "confirm",
-        name: "isReady",
-        message: `We will put files at [${destFolderName}], do you already create generator folder?`,
-        default: false,
-      },
-      {
-        when: (response) => {
-          if (!response.isReady) {
-            process.exit(0);
-          }
-        },
-      },
-      {
-        type: "input",
-        name: "mainName",
-        message: "Please input your generator name?",
-        default: destFolderName,
-      },
-      {
-        type: "input",
-        name: "description",
-        message:
-          "Please input description for plug-in? (will use in package.json)",
-        default: "About ...",
-      },
-      {
-        type: "input",
-        name: "keyword",
-        message: "Please input keyword for plug-in? (will use in package.json)",
-        default: "",
-      },
+      ...commonPrompt.mainName(this),
+      ...commonPrompt.desc(this),
     ];
-    const answers = await this.prompt(prompts);
-    this.mainName = answers.mainName;
-    this.description = answers.description;
-    this.keyword = answers.keyword || answers.mainName;
+
+    const answers = await promptChain(promptChainLocator(prompts));
+    handleAnswers(answers, (payload)=>{
+      payload.generatorName = payload.mainName;
+    });
   }
 
   writing() {
-    const { cp } = YoHelper(this);
-    cp("ui");
-    cp("src");
-    cp(".gitignore");
-    cp("compile.sh");
-    cp("index.html");
-    cp("package.json");
-    cp("webpack.config.js");
+    const { cp, chMainName } = YoHelper(this);
+
+    // handle change to new folder
+    chMainName(this.mainName);
+
+    // handle copy file 
+    cp('Test.js', '__tests__/Test.js', this.payload);
+    cp('README.md', null, this.payload);
+    cp('index.js',  null, this.payload);
+    cp('templates');
   }
 };

package/generators/generator/templates/README.md

@@ -0,0 +1,9 @@
+# `<%= mainName %>`
+
+> <%= description %> 
+
+## Usage
+
+```
+npx yonpx <%= generatorName %>
+```

package/generators/generator/templates/Test.js

@@ -0,0 +1,45 @@
+/**
+ * https://yeoman.io/authoring/testing.html
+ * https://gilsondev.gitbooks.io/yeoman-authoring/content/authoring/unit_testing.html
+ *
+ * https://github.com/yeoman/yeoman-assert/blob/main/index.js
+ * https://github.com/yeoman/yeoman-test/blob/main/lib/run-context.js
+ */
+
+const getYoUnit = require("yo-unit");
+const { YoTest, assert } = getYoUnit();
+
+describe("!! <%= mainName %> !!", () => {
+  let runResult;
+
+  before(async () => {
+    runResult = await YoTest({
+      source: __dirname + "/../.",
+      params: {
+        isReady: true,
+        appNamee: "foo",
+        description: "foo-desc",
+        keyword: "foo-keyword",
+      },
+    });
+  });
+
+  after(() => {
+    if (runResult) {
+      runResult.restore();
+    }
+  });
+
+  it("should have folder", () => {
+    //    assert.file(["src", "ui"]);
+  });
+
+  it("should have file", () => {
+    //   assert.file(["compile.sh", "index.html"]);
+  });
+
+  it("should have content", () => {
+    //    assert.fileContent('composer.json', 'foo-desc');
+    //    assert.fileContent('.circleci/config.yml', 'foo');
+  });
+});

package/generators/generator/templates/index.js

@@ -0,0 +1,65 @@
+const getYo = require("yo-reshow");
+const { YoGenerator, YoHelper, commonPrompt } = getYo();
+
+/**
+ * <%= mainName %> Generator
+ */
+module.exports = class extends YoGenerator {
+  /**
+   * Run loop (Life cycle)
+   * https://yeoman.io/authoring/running-context.html#the-run-loop
+   *
+   * 1. initializing
+   * 2. prompting
+   * 3. configuring
+   * 4. default
+   * 5. writing
+   * 6. conflicts
+   * 7. install
+   * 8. end
+   */
+
+  /**
+   * Questions.
+   *
+   * https://www.alwaystwisted.com/post.php?s=using-lists-in-a-yeoman-generator
+   * https://github.com/SBoudrias/Inquirer.js
+   */
+  async prompting() {
+    const {
+      say,
+      handleAnswers,
+      mergePromptOrOption,
+      promptChainLocator,
+      promptChain,
+    } = YoHelper(this);
+
+    const prompts = [
+      ...commonPrompt.mainName(this),
+      ...commonPrompt.desc(this),
+      /*
+      {
+        type: "input",
+        name: "xxx",
+        message: "Please input xxx?",
+        default: "",
+      },
+      */
+    ];
+
+    const answers = await mergePromptOrOption(prompts, (nextPrompts) =>
+      promptChain(promptChainLocator(nextPrompts))
+    );
+    handleAnswers(answers, payload => { say(payload) });
+  }
+
+  writing() {
+    this.env.options.nodePackageManager = "yarn";
+    const { cp,  chMainName } = YoHelper(this);
+
+    // handle change to new folder
+    chMainName(this.mainName);
+
+    // handle copy file
+  }
+};

package/generators/generator/templates/templates/README.md

@@ -0,0 +1,9 @@
+# `<%= mainName %>`
+
+> <%= description %> 
+
+## Usage
+
+```
+
+```

package/generators/library/README.md

@@ -0,0 +1,9 @@
+# `library`
+
+> TODO: description 
+
+## Usage
+
+```
+npx yonpx reshow:library
+```

package/generators/library/__tests__/Test.js

@@ -0,0 +1,45 @@
+/**
+ * https://yeoman.io/authoring/testing.html
+ * https://gilsondev.gitbooks.io/yeoman-authoring/content/authoring/unit_testing.html
+ *
+ * https://github.com/yeoman/yeoman-assert/blob/main/index.js
+ * https://github.com/yeoman/yeoman-test/blob/main/lib/run-context.js
+ */
+
+const getYoUnit = require("yo-unit");
+const { YoTest, assert } = getYoUnit();
+
+describe("!! library !!", () => {
+  let runResult;
+
+  before(async () => {
+    runResult = await YoTest({
+      source: __dirname + "/../.",
+      params: {
+        isReady: true,
+        appNamee: "foo",
+        description: "foo-desc",
+        keyword: "foo-keyword",
+      },
+    });
+  });
+
+  after(() => {
+    if (runResult) {
+      runResult.restore();
+    }
+  });
+
+  it("should have folder", () => {
+    //    assert.file(["src", "ui"]);
+  });
+
+  it("should have file", () => {
+    //   assert.file(["compile.sh", "index.html"]);
+  });
+
+  it("should have content", () => {
+    //    assert.fileContent('composer.json', 'foo-desc');
+    //    assert.fileContent('.circleci/config.yml', 'foo');
+  });
+});

package/generators/library/index.js

@@ -0,0 +1,83 @@
+const getYo = require("yo-reshow");
+const { YoGenerator, YoHelper, commonPrompt } = getYo();
+
+/**
+ * Library Generator 
+ */
+
+module.exports = class extends YoGenerator {
+  constructor(args, opts) {
+    super(args, opts);
+    this.argument("mainName", { type: String, required: false });
+  }
+
+  /**
+   * Run loop (Life cycle)
+   * https://yeoman.io/authoring/running-context.html#the-run-loop
+   *
+   * 1. initializing
+   * 2. prompting
+   * 3. configuring
+   * 4. default
+   * 5. writing
+   * 6. conflicts
+   * 7. install
+   * 8. end
+   */
+
+  /**
+   * Questions.
+   *
+   * https://www.alwaystwisted.com/post.php?s=using-lists-in-a-yeoman-generator
+   * https://github.com/SBoudrias/Inquirer.js
+   */
+  async prompting() {
+    this.env.options.nodePackageManager = "yarn";
+
+    const {
+      mergePromptOrOption,
+      promptChainLocator,
+      promptChain,
+    } = YoHelper(this);
+
+    const prompts = [
+      ...commonPrompt.mainName(this),
+      ...commonPrompt.desc(this),
+      ...commonPrompt.author(this),
+    ];
+
+    const answers =  await mergePromptOrOption(
+      prompts,
+      (nextPrompts) => promptChain(promptChainLocator(nextPrompts))
+    );
+
+    this.mainName = answers.mainName;
+    this.payload = {
+      ...answers,
+      mainName: this.mainName,
+      description: answers.description || 'TODO: description',
+      keyword: answers.keyword || this.mainName,
+    };
+  }
+
+  writing() {
+    const { cp, chMainName } = YoHelper(this);
+
+    // handle change to new folder
+    chMainName(this.mainName);
+
+    // handle copy file
+    cp("README.md", null, this.payload);
+    cp("compile.sh", null, this.payload);
+    cp("package.json", null, this.payload);
+    cp("src", null, this.payload);
+    cp("Test.js", "src/__tests__/Test.js", this.payload);
+  }
+
+  end() {
+    if (!this.options?.skipInstall) {
+      const { say } = YoHelper(this);
+      say('Next you could try "npm run build" or "npm run test"');
+    }
+  }
+};

package/generators/library/templates/README.md

@@ -0,0 +1,15 @@
+# `<%= mainName %>`
+
+> <%= description %> 
+
+## Repositories
+* GIT
+   * https://github.com/react-atomic/react-atomic-organism/tree/main/packages/lib/<%= mainName %>
+* NPM
+   * https://www.npmjs.com/package/<%= mainName %>
+
+## Usage
+
+```
+
+```

package/generators/library/templates/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "<%= mainName %>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-atomic/react-atomic-organism",
+    "directory": "packages/lib/<%= mainName %>"
+  },
+  "homepage": "https://github.com/react-atomic/react-atomic-organism/tree/main/packages/lib/<%= mainName %>",
+  "description": "<%= description %>",
+  "version": "0.0.0",
+  "main": "./build/cjs/src/index.js",
+  "module": "./build/es/src/index.js",
+  "keywords": [],
+  "author": "<%= authorName %> <<%= authorEmail %>>",
+  "license": "ISC",
+  "dependencies": {
+    "reshow-constant": "*"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.x",
+    "reshow-unit": "*"
+  },
+  "scripts": {
+    "clean": "find ./build -name '*.*' | xargs rm -rf",
+    "build:cjs": "BABEL_ENV=cjs babel src -d build/cjs/src --root-mode upward",
+    "build:es": "BABEL_ENV=es babel src -d build/es/src --root-mode upward",
+    "build": "npm run clean && npm run build:cjs && npm run build:es",
+    "mochaFor": "mocha -r jsdom-global/register",
+    "mocha": "npm run mochaFor -- 'build/cjs/**/__tests__/*.js'",
+    "test": "npm run build && npm run mocha",
+    "prepublishOnly": "npm run test"
+  },
+  "files": ["build", "package.json", "README.md"]
+}

package/generators/npm/README.md

@@ -0,0 +1,9 @@
+# `npm`
+
+> TODO: description 
+
+## Usage
+
+```
+npx yonpx reshow:npm
+```

package/generators/npm/__tests__/Test.js

@@ -0,0 +1,46 @@
+/**
+ * https://yeoman.io/authoring/testing.html
+ * https://gilsondev.gitbooks.io/yeoman-authoring/content/authoring/unit_testing.html
+ *
+ * https://github.com/yeoman/yeoman-assert/blob/main/index.js
+ * https://github.com/yeoman/yeoman-test/blob/main/lib/run-context.js
+ */
+
+const getYoUnit = require("yo-unit");
+const { YoTest, assert } = getYoUnit();
+
+describe("!! npm !!", () => {
+  let runResult;
+
+  before(async () => {
+    runResult = await YoTest({
+      source: __dirname + "/../.",
+      params: {
+        isReady: true,
+        appNamee: "foo",
+        description: "foo-desc",
+        keyword: "foo-keyword",
+      },
+    });
+  });
+
+  after(() => {
+    if (runResult) {
+      runResult.restore();
+    }
+  });
+
+  it("should have folder", () => {
+    //    assert.file(["src", "ui"]);
+  });
+
+  it("should have file", () => {
+    //   assert.file(["compile.sh", "index.html"]);
+  });
+
+  it("should have content", () => {
+    const {generator} = runResult;
+    //    assert.fileContent('composer.json', 'foo-desc');
+    //    assert.fileContent('.circleci/config.yml', 'foo');
+  });
+});

package/generators/npm/index.js

@@ -0,0 +1,89 @@
+const getYo = require("yo-reshow");
+const { YoGenerator, YoHelper, commonPrompt } = getYo();
+
+/**
+ * NPM Generator
+ */
+
+module.exports = class extends YoGenerator {
+  /**
+   * Run loop (Life cycle)
+   * https://yeoman.io/authoring/running-context.html#the-run-loop
+   *
+   * 1. initializing
+   * 2. prompting
+   * 3. configuring
+   * 4. default
+   * 5. writing
+   * 6. conflicts
+   * 7. install
+   * 8. end
+   */
+
+  /**
+   * Questions.
+   *
+   * https://www.alwaystwisted.com/post.php?s=using-lists-in-a-yeoman-generator
+   * https://github.com/SBoudrias/Inquirer.js
+   */
+  async prompting() {
+    this.env.options.nodePackageManager = "yarn";
+
+    const {
+      handleAnswers,
+      mergePromptOrOption,
+      promptChainLocator,
+      promptChain,
+    } = YoHelper(this);
+
+    const prompts = [
+      ...commonPrompt.mainName(this),
+      ...commonPrompt.babel(this),
+      ...commonPrompt.desc(this),
+      ...commonPrompt.author(this),
+      ...commonPrompt.repository(this),
+    ];
+
+    const answers = await mergePromptOrOption(prompts, (nextPrompts) =>
+      promptChain(promptChainLocator(nextPrompts))
+    );
+    handleAnswers(answers);
+    this.composeWith(require.resolve("../compile-sh"), this.payload);
+  }
+
+  writing() {
+    const { cp, chMainName, updateJSON } = YoHelper(this);
+
+    // handle change to new folder
+    chMainName(this.mainName);
+
+    // handle copy file
+    cp("src", null, this.payload);
+    cp("README.md", null, this.payload);
+    cp("Test.js", "src/__tests__/Test.js", this.payload);
+
+    updateJSON("package.json", null, this.payload, (data) => {
+      data.repository = this.payload.repository;
+      data.homepage = this.payload.repositoryHomepage;
+      data.dependencies = {
+        ...data.dependencies,
+        ...this.payload.npmDependencies,
+      };
+      if (!this.payload.isUseBabel) {
+        delete data.devDependencies['@babel/cli'];
+        delete data.module;
+        delete data.scripts.clean;
+        delete data.scripts.build;
+        delete data.scripts["build:cjs"];
+        delete data.scripts["build:es"];
+        data.main = "./src/index.js";
+        data.bin[this.mainName] = "./src/index.js";
+        data.scripts.test = "npm run mocha";
+        data.files = data.files.filter(f => f !== "build");
+        data.files.push("src");
+        console.log({data});
+      }
+      return data;
+    });
+  }
+};

package/generators/npm/templates/README.md

@@ -0,0 +1,15 @@
+# `<%= mainName %>`
+
+> <%= description %> 
+
+## Repository 
+* `GIT`
+   * <% repositoryHomepage %>
+* `NPM`
+   * https://www.npmjs.com/package/<%= mainName %>
+
+## Usage
+
+```
+
+```

package/generators/npm/templates/package.json

@@ -0,0 +1,34 @@
+{
+  "version": "0.0.0",
+  "name": "<%= mainName %>",
+  "repository": {},
+  "homepage": "",
+  "description": "<%= description %>",
+  "keywords": [],
+  "author": "<%= authorName %> <<%= authorEmail %>>",
+  "license": "ISC",
+  "dependencies": {
+    "reshow-constant": "*"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.x",
+    "reshow-unit": "*"
+  },
+  "main": "./build/cjs/src/index.js",
+  "module": "./build/es/src/index.js",
+  "bin": {
+    "<%= mainName %>": "./build/cjs/src/index.js"
+  },
+  "scripts": {
+    "clean": "find ./build -name '*.*' | xargs rm -rf",
+    "build:cjs": "BABEL_ENV=cjs babel src -d build/cjs/src<%= babelRootMode %>",
+    "build:es": "BABEL_ENV=es babel src -d build/es/src<%= babelRootMode %>",
+    "build": "npm run clean && npm run build:cjs && npm run build:es",
+    "mochaFor": "mocha -r jsdom-global/register",
+    "mocha": "npm run mochaFor -- 'build/cjs/**/__tests__/*.js'",
+    "test": "npm run build && npm run mocha",
+    "prepublishOnly": "npm run test"
+  },
+  "files": ["build", "package.json", "README.md"],
+  "engines": { "node": ">=14" }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-reshow",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Yeoman generator for reshow. (app, generator, ...etc)",
   "author": "Hill <hill@kimo.com>",
   "repository": {
@@ -16,6 +16,9 @@
   "dependencies": {
     "yo-reshow": "*"
   },
+  "devDependencies": {
+    "yo-unit": "*"
+  },
   "files": [
     "generators"
   ],

package/generators/app/templates/ui/pages/Atoms.jsx

@@ -1,8 +0,0 @@
-import usePage from "../../src/usePage";
-
-const Atoms = (props) => {
-  usePage({ ...props, pageName: "Atoms" });
-  return <>This is atom</>;
-};
-
-export default Atoms;