Merge pull request #37 from oslabs-beta/dev

OverVue 6.0

Author: apaparian

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.tabSize": 2
+}

Dockerfile

@@ -0,0 +1,27 @@
+FROM node:14.16
+
+# install electron dependencies or more if your library has other dependencies
+RUN apt-get update && apt-get install \
+  git libx11-xcb1 libxcb-dri3-0 libxtst6 libnss3 libatk-bridge2.0-0 libgtk-3-0 libxss1 libasound2 \
+  -yq --no-install-suggests --no-install-recommends \
+  && apt-get clean && rm -rf /var/lib/apt/lists/*
+
+# copy the source into /app
+WORKDIR /app
+COPY . .
+RUN chown -R node /app
+
+# install node modules and perform an electron rebuild
+USER node
+RUN npm install
+# RUN npx electron-rebuild
+
+# Electron needs root for sand boxing
+# see https://github.com/electron/electron/issues/17972
+USER root
+RUN chown root /app/node_modules/electron/dist/chrome-sandbox
+RUN chmod 4755 /app/node_modules/electron/dist/chrome-sandbox
+
+# Electron doesn't like to run as root
+USER node
+CMD bash

Dockerfile-Mac

@@ -0,0 +1,26 @@
+FROM node:14.16
+
+# install electron dependencies or more if your library has other dependencies
+RUN apt-get update && apt-get install \
+  git libx11-xcb1 libxcb-dri3-0 libxtst6 libnss3 libatk-bridge2.0-0 libgtk-3-0 libxss1 libasound2 \
+  -yq --no-install-suggests --no-install-recommends \
+  && apt-get clean && rm -rf /var/lib/apt/lists/*
+
+# copy the source into /app
+WORKDIR /app
+COPY . .
+RUN chown -R node /app
+
+# install node modules and perform an electron rebuild
+USER node
+RUN npm install
+
+# Electron needs root for sand boxing
+# see https://github.com/electron/electron/issues/17972
+USER root
+RUN chown root /app/node_modules/electron/dist/chrome-sandbox
+RUN chmod 4755 /app/node_modules/electron/dist/chrome-sandbox
+
+# Electron doesn't like to run as root
+USER node
+CMD bash

Dockerfile_WSL

@@ -0,0 +1,37 @@
+FROM node:16.14
+
+RUN apt-get update && apt-get install \
+    git libx11-xcb1 libxss1 libxcb-dri3-0 libgconf2-dev libxtst6 \
+    xvfb dbus-x11 libnss3 libudev-dev libatk-bridge2.0-0 libgtk-3-0 \
+    libxss1 libasound2 libdrm2 libgtkextra-dev libgbm1 \
+    -yq --no-install-suggests --no-install-recommends \
+    && apt-get clean && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /OverVue
+COPY . .
+RUN chown -R node /OverVue
+RUN npm i -g @quasar/cli
+
+USER node
+RUN npm install
+
+USER root
+RUN chown root /OverVue/node_modules/electron/dist/chrome-sandbox
+RUN chmod 4755 /OverVue/node_modules/electron/dist/chrome-sandbox
+EXPOSE 3000
+
+USER node
+CMD bash
+
+# IN YOUR WSL 2 TERMINAL:
+# export DISPLAY=$(awk '/nameserver / {print $2; exit}' /etc/resolv.conf 2>/dev/null):0
+# export LIBGL_ALWAYS_INDIRECT=1
+#
+# MUST BE RUNNING SOME XSERVER SUCH AS VcXsrv OR OTHER
+#
+# RUN WITH:
+# docker run -v /tmp/.X11-unix:/tmp/.X11-unix -e DISPLAY=$DISPLAY -v`pwd:/app --rm -it <yourimagename> bash 
+# 
+# INSIDE CONTAINER:
+# quasar dev -m electron -- --no-sandbox
+# 

README.md

@@ -1,10 +1,8 @@
 <h1 align="center">
-  <img src="https://raw.githubusercontent.com/jeisele2/OverVue/master/src/assets/overvue-icons/apple-icon-72x72.png">
-  <br/>
-  OverVue 
+  <img src="src/assets/overvue_256x256.png">
 </h1>
 
-<p align="center"><b>Prototyping Tool for Vue Developers</b></p>
+<p align="center"><b>Prototyping Development Tool for Vue Developers</b></p>
 
 <p>OverVue is a prototyping tool that allows developers to dynamically create and visualize a Vue application, implementing a real-time intuitive tree display of component hierarchy and a live-generated code preview. The resulting boilerplate can be exported as a template for further development.</p>
 
@@ -14,16 +12,19 @@
 
 ## Table of Contents
 
-- [Features](#features)
-- [OverVue 2.0 Changelog](#changelog-20)
-- [OverVue 3.0 Changelog](#changelog-30)
-- [OverVue 4.0 Changelog](#changelog-40)
-- [OverVue 5.0 Changelog](#changelog-50)
-- [How to Use](#how-to-use)
+- [Table of Contents](#table-of-contents)
+  - [Features](#features)
+  - [Changelog 2.0](#changelog-20)
+  - [Changelog 3.0](#changelog-30)
+  - [Changelog 4.0](#changelog-40)
+  - [Changelog 5.0](#changelog-50)
+  - [Changelog 6.0](#changelog-60)
+- [How to use](#how-to-use)
 - [Installation](#installation)
-  - [General Installation](#installation)
-  - [For WSL](#wsl-installation)
-  - [For Slack OAuth](#slack-oauth)
+  - [WSL Installation](#wsl-installation)
+  - [Running as Containerized Docker Image](#running-as-containerized-docker-image)
+- [BETA](#beta)
+  - [Slack OAuth](#slack-oauth)
 - [Contributing](#contributing)
 - [Authors](#authors)
 
@@ -52,6 +53,11 @@
 - Ability to delete states or actions from the store <sub><sup>(v4.0)</sup></sub>
 - Vue Devtools enabled for Developers <sub><sup>(v4.0)</sup></sub>/automatically deploys when running electron in dev mode <sub><sup>(v5.0)</sup></sub>
 - Exports fully functional Vue 3/Vuex 4 syntax <sub><sup>(v5.0)</sup></sub>
+- Import of individual components <sub><sup>(v6.0)</sup></sub>
+- Containerized the application <sub><sup>(v6.0)</sup></sub>
+- Introduced TypeScript Mode <sub><sup>(v6.0)</sup></sub>
+- Adding notes functionality  <sub><sup>(v6.0)</sup></sub>
+- Enhanced component tree hierarchy display <sub><sup>(v6.0)</sup></sub>
 
 [↥Back to top](#table-of-contents)
 
@@ -137,7 +143,28 @@
   </ul>
 </details>
 
+### Changelog 6.0
 
+<details><summary>OverVue 6.0</summary>
+  <ul>
+    <li>Toggle to TypeScript mode to generate code snippets and export your project or individual components in TypeScript</li>
+    <li>An interactive and real-time tree display of your component hierarchy allows you to easily visualize parent-child component relationships and the Vue Router structure</li>
+    <li>Enhance your workflow by adding notes to your components. When you export your project or components into your favorite IDE, notes will be converted into comments within your Vue files.</li>
+    <li>Now with a “Get Started” tutorial, a visual queue of your HTML elements, and an overall simplified UI, OveVue is as intuitive as ever. </li>
+    <li>OverVue is now containerized with Docker to bring developers the same experience, regardless of your operating system.</li>
+    <br>
+    <h4><strong>Bug Fixes</strong></h4>
+    <li>Fixed drawer disappearing when the window size is smaller</li>
+    <li>Fixed inability to delete parent/child relationship</li>
+    <li>Fixed the inability to add multiple children to parent except when making a new component</li>
+    <li>Fixed CodeSnippet does not scroll when it overflows the container</li>
+    <li>Fixed clicking canvas does not fully deactivate active component</li>
+    <li>Fixed Error handling for 'pasting' component when no component is copied</li>
+    <li>Fixed dancing components</li>
+    <li>Fixed project tree visulization</li> 
+  </ul>
+</details>
+<br/>
 
 [↥Back to top](#table-of-contents)
 
@@ -196,10 +223,11 @@ src/
 babel.config.js
 package.json
 ```
+<br/> 
 
 [↥Back to top](#table-of-contents)
 
-### Installation
+## Installation
 
 To download the development version for windows or mac, please visit https://www.Overvue.io
 
@@ -248,7 +276,7 @@ export DISPLAY=$(awk '/nameserver / {print $2; exit}' /etc/resolv.conf 2>/dev/nu
 export LIBGL_ALWAYS_INDIRECT=1
 ```
 
-followed by the command for the devtools or devmode. If you want both open, enter commands above followed by starting the devtools:
+followed by the command for the s or devmode. If you want both open, enter commands above followed by starting the devtools:
 
 ```
 ./node_modules/.bin/vue-devtools
@@ -259,7 +287,14 @@ Then open a new terminal instance, set the DISPLAY value again (re-enter above c
 ```
 quasar dev -m electron
 ```
+### Running as Containerized Docker Image
+
+In your terminal, run :
 
+```
+docker run -v /tmp/.X11-unix:/tmp/.X11-unix -e DISPLAY=$DISPLAY -v`pwd`/src:/app/src --rm -it <OverVue file name> bash
+```
+## BETA
 ### Slack OAuth
 
 For the Slack OAuth, you will need to create a Slack app through their website (https://api.slack.com/apps?new_app=1), so that you have your own Client Secret and Client ID. Then create two .env files (one for development and one for production).
@@ -290,21 +325,25 @@ SLACK_REDIRECT_URI = "overvuedev://test"
 
 [↥Back to top](#table-of-contents)
 
-### Contributing
+## Contributing
 
 We'd love for you to test this application out and submit any issues you encounter. Also feel free to fork to your own repo and submit PRs.
-Here are some features we're thinking about adding: 
+Here are some features we're thinking about adding:
+
 
-- Option to export files in TypeScript
 - Ability to place child components into HTML elements
-- Integration with Storybook
-- Edit State and Actions in the Vuex Store
+- More semantic HTML tag options
+- Ability to export Vuex store boilerplate
+- Ability to add two-way binding to input elements
+- More typing options for Typescript mode
 
 If you make changes and wish to update the website, here is the link to the repo: https://github.com/TeamOverVue/OverVuePage
 
+<br/>
+
 [↥Back to top](#table-of-contents)
 
-### Authors
+## Authors
 
 ```
 Contributors:
@@ -329,8 +368,15 @@ Gabriela Kokhabi @gkokhabi
 Ross Lamerson @lamerson28
 Shanon Lee @shanonlee541
 Zoew McGrath @Z-McGrath
+Aram Paparian @apaparian
+Bryan Bart @MrBeeAreWhy
+Julia Bakerink @jbbake
+Kerolos Nesem @Kerolos-Nesem
+Megan Nadkarni @megatera
 ```
 
 Inspired by [PreVue](https://github.com/open-source-labs/PreVue)
 
+<br/>
+
 [↥Back to top](#table-of-contents)