feat: change to electron app

Change to framework Nuxt.js

.babelrc

@@ -0,0 +1,16 @@
+{
+  "env": {
+    "test": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "targets": {
+              "node": "current"
+            }
+          }
+        ]
+      ]
+    }
+  }
+}

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -1,29 +1,17 @@
-// https://eslint.org/docs/user-guide/configuring
-
 module.exports = {
   root: true,
-  parserOptions: {
-    parser: 'typescript-eslint-parser'
-  },
   env: {
     browser: true,
+    node: true,
   },
   extends: [
-    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
-    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
-    'plugin:vue/essential',
-    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
-    'standard'
-  ],
-  // required to lint *.vue files
-  plugins: [
-    'vue'
+    '@nuxtjs/eslint-config-typescript',
+    'prettier',
+    'prettier/vue',
+    'plugin:prettier/recommended',
+    'plugin:nuxt/recommended',
   ],
+  plugins: ['prettier'],
   // add your custom rules here
-  rules: {
-    // allow async-await
-    'generator-star-spacing': 'off',
-    // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  }
+  rules: {},
 }

.gitignore

@@ -1,5 +1,7 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
 # Logs
-logs
+/logs
 *.log
 npm-debug.log*
 yarn-debug.log*
@@ -57,9 +59,32 @@ typings/
 # dotenv environment variables file
 .env
 
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
 # next.js build output
 .next
 
-#
-.cache/
-dist/
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

assets/README.md

@@ -0,0 +1,7 @@
+# ASSETS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

commitlint.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+}

components/DbTableInfo.vue

@@ -0,0 +1,43 @@
+<template>
+  <div v-show="props.dbColumnNames.length > 0" class="has-text-centered">
+    <div class="scroll">
+      <table class="table is-bordered is-striped is-narrow is-fullwidth">
+        <thead>
+          <tr>
+            <th>Column name of CSV</th>
+            <td v-for="(name, i) in props.csvColumnNames" :key="i">
+              {{ name }}
+            </td>
+          </tr>
+        </thead>
+        <tbody>
+          <th>Column name of DB</th>
+          <td v-for="(name, i) in props.dbColumnNames" :key="i">{{ name }}</td>
+        </tbody>
+      </table>
+    </div>
+    <p>TableName: <strong>hoge</strong></p>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+
+export default defineComponent({
+  props: {
+    dbColumnNames: {
+      type: Array,
+      required: true,
+    },
+
+    csvColumnNames: {
+      type: Array,
+      required: true,
+    },
+  },
+
+  setup(props: { dbColumnNames: string[]; csvColumnNames: string[] }) {
+    return { props }
+  },
+})
+</script>

components/DragAndDrop.vue

@@ -0,0 +1,68 @@
+<template>
+  <div
+    class="drop-area"
+    @dragleave.prevent
+    @dragover.prevent
+    @drop.prevent="onDrop"
+  >
+    <p>Drag and drop file</p>
+    <div class="modal" :class="{ 'is-active': state.loading }">
+      <div class="modal-background"></div>
+      <div class="modal-content">Loading...</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive } from '@vue/composition-api'
+import parse from 'csv-parse/lib/sync'
+
+export default defineComponent({
+  setup(_, ctx) {
+    const state = reactive<{
+      loading: boolean
+    }>({
+      loading: false,
+    })
+
+    const onDrop = (event: any) => {
+      state.loading = true
+      const files = event.dataTransfer.files
+      setTimeout(() => {
+        const reader = new FileReader()
+        reader.onload = (e: any) => {
+          const rows = parse(e.target.result, { skip_empty_lines: true })
+          const columnLength = rows[0].length
+          ctx.emit(
+            'set',
+            rows.filter((row: string[]) => row.length === columnLength)
+          )
+          state.loading = false
+        }
+        reader.readAsText(files[0])
+      }, 200)
+    }
+
+    return {
+      state,
+      onDrop,
+    }
+  },
+})
+</script>
+
+<style scoped>
+.drop-area {
+  display: block;
+  border: 2px dashed #bbb;
+  border-radius: 5px;
+  color: #bbb;
+  padding: 25px;
+  text-align: center;
+  margin: 10px auto 5px;
+  font-size: 18px;
+  font-weight: bold;
+  -khtml-user-drag: element;
+  width: 80%;
+}
+</style>

components/ErrorMessage.vue

@@ -0,0 +1,29 @@
+<template>
+  <div v-show="props.message && props.message.length > 0">
+    <article class="message is-danger">
+      <div class="message-header">
+        <p>Error</p>
+      </div>
+      <div class="message-body">
+        {{ props.message }}
+      </div>
+    </article>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+
+export default defineComponent({
+  props: {
+    message: {
+      type: String,
+      required: true,
+    },
+  },
+
+  setup(props: { message: string }) {
+    return { props }
+  },
+})
+</script>

components/README.md

@@ -0,0 +1,7 @@
+# COMPONENTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+The components directory contains your Vue.js Components.
+
+_Nuxt.js doesn't supercharge these components._

components/ResultTable.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="scroll">
+    <table class="table is-hoverable is-fullwidth scroll">
+      <thead>
+        <tr>
+          <th v-for="(columnName, i) in props.columnNames" :key="i">
+            {{ columnName }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(rows, i) in props.result" :key="i">
+          <td v-for="(str, j) in rows" :key="j">{{ str }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+
+export default defineComponent({
+  props: {
+    columnNames: {
+      type: Array,
+      required: true,
+    },
+
+    result: {
+      type: Array,
+      required: true,
+    },
+  },
+
+  setup(props: { columnNames: string[]; result: string[][] }) {
+    return { props }
+  },
+})
+</script>

index.ts

@@ -0,0 +1 @@
+declare module 'sql.js'

jest.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/$1',
+    '^~/(.*)$': '<rootDir>/$1',
+    '^vue$': 'vue/dist/vue.common.js',
+  },
+  moduleFileExtensions: ['ts', 'js', 'vue', 'json'],
+  transform: {
+    '^.+\\.ts$': 'ts-jest',
+    '^.+\\.js$': 'babel-jest',
+    '.*\\.(vue)$': 'vue-jest',
+  },
+  collectCoverage: true,
+  collectCoverageFrom: [
+    '<rootDir>/components/**/*.vue',
+    '<rootDir>/pages/**/*.vue',
+  ],
+}

layouts/README.md

@@ -0,0 +1,7 @@
+# LAYOUTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your Application Layouts.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).

layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="container">
+    <nuxt />
+  </div>
+</template>