Merge pull request #102 from oslabs-beta/master

Final Merge

Author: rmdrake8

.eslintrc.js

@@ -1,18 +1,20 @@
 module.exports = {
   root: true,
   env: {
+    es2021: true,
     node: true
   },
   extends: [
     'plugin:vue/essential',
     'plugin:prettier/recommended',
-    '@vue/prettier'
+    '@vue/prettier',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended'
   ],
+  parser: 'vue-eslint-parser',
+  plugins: ['@typescript-eslint, vue'],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  },
-  parserOptions: {
-    parser: 'babel-eslint'
   }
 };

.gitignore

@@ -2,10 +2,12 @@
 node_modules
 /dist
 
-# local env files
+# dotenv environment variables files (local env files)
 .env.local
 .env.*.local
 .env
+.env.test
+
 
 # Log files
 npm-debug.log*
@@ -22,7 +24,5 @@ yarn-error.log*
 *.sln
 *.sw*
 
-#Electron-builder output
-/dist_electron
 
 package-lock.json

Dockerfile

@@ -0,0 +1,12 @@
+# base image that provides runtime environment for the application
+FROM node:16.13
+# where the application code will be copied to in the docker container
+WORKDIR /usr/src/app
+# copies all files from the current directory (where the Dockerfile is located) to the working directory in the docker image (which we set on line 4)
+COPY . .
+RUN npm install
+RUN npm run build
+# Exposes port 4173 to the host machine, so that it can access the Node.js application running inside the Docker container
+EXPOSE 8080
+# Specifies the command to run when the Docker container starts
+ENTRYPOINT npm run server

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img width="350" src="src/assets/prevue-logo.png?raw=true">
+  <img width="350" src="src/assets/prevue_color_white.png?raw=true">
   <h1 align="center">PreVue </h1>
 </p>
 
@@ -16,34 +16,24 @@ For Vue Developers
 From Component Architecture to Code Exporting
 </h4>
 
-PreVue allows the user to design/visualize their component architecture by allowing users to :
+PreVue allows users to conceptualize and visualize component architecture by allowing them to :
 
-1. Create components and preview their code
+  1. Create components and preview their associated code
+  2. Set up different routes and views
+  3. Establish parent-child component relationships
+  4. View application hierarchy in tree format
+  5. Export the component architecture as a Vue application created with default Vite settings.
 
-2. Set up different views/routes
-
-3. Establish parent-child component relationships
-
-4. See their application architecture in tree format
-
-5. Export the component architecture as a Vue application created with the default Vue CLI settings.
+Use PreVue to create projects in single sessions or sign in with GitHub to save projects and update them anytime.
+the component architecture as a Vue application created with the default Vue CLI settings.
 
 <p align="center">
-  <img width="1000" src="src/assets/prevue.png?raw=true">
+  <img width="1000" src="src/assets/3.png?raw=true">
 
 </p>
 
 ## Getting Started
 
----
-
-Download for [MacOS](https://s3.amazonaws.com/prevue-app/PreVue-1.0.0.dmg), [Linux](https://s3.amazonaws.com/prevue-app/PreVue_1.0.0_amd64.deb), or [Windows](https://s3.amazonaws.com/prevue-app/PreVue+Setup+1.0.0.exe)
-
-###### Support for Windows now here!
-
-- Mac users only: for now you might need to go to your security settings to allow the app run on your system as we do not have an Apple license yet.
-
-If you find any issues, [file issue](https://github.com/teamprevue/PreVue/issues)
 
 ## How to use
 
@@ -52,45 +42,49 @@ If you find any issues, [file issue](https://github.com/teamprevue/PreVue/issues
 #### Adding Components
 
 - Double click on the application icon
-- Create components by entering a name and clicking the html elements you need
-
-- Clicked elements will be shown on the right sidebar
-- Drag them around to change the order!
+- Create components by entering a name and clicking the HTML elements you need
+- Clicked elements will be shown in the right sidebar
+- Drag the elements to change their order
+- Once you're satisfied, click the button to ‘add a component’ and it will show up in the working area. Resize and move components to fit the design you have in mind.
 
-- Once you're satisfied, click the button to add a component and it will show up in the center stage, with the ability to resize!
 
-<img src='http://g.recordit.co/fyQ6LKvwlt.gif'/>
+<img width="1000" src="src/assets/newcomp.png?raw=true">
 
 #### Editing Components
 
-- Edit components by double clicking for the edit modal to show
+- Double click elements to bring up the modal view
 - Add additional elements to a component with a live preview of the component code
 - Drag elements on the right side bar to nest elements
-- Establish parent-child component relationships via a dropdown menu when creating or editing components
+- Establish parent-child component relationships via the dropdown menu when creating or editing components
 
-<img src='http://g.recordit.co/A6rOQRJVOc.gif'/>
 
-#### Adding Routes/Projects
+<img width="1000" src="src/assets/componentdisplay.png?raw=true">
 
-- Create different routes for your application by entering a new route name and pressing enter
-- Any components created on a certain route will be automatically saved to that route
-- Play with multiple projects by clicking the add project icon!
-- Display a tree view of entire application component architecture when the tree icon on navbar is clicked
+#### Adding Routes
 
-<img src='http://g.recordit.co/bfYwX1sdtl.gif'/>
+- Create different routes that represent different Views for your app.
+- Any components created on a given route will be automatically saved to that route
+- See your application’s hierarchy by clicking the ‘Tree’ icon in the navigation bar
+
+<p align="center">
+<img src="src/assets/routecreator.png?raw=true">
+</p>
 
 #### Tree View of Application Architecture
 
 <p align="center">
-  <img width="1000" src="src/assets/tree-demo.png?raw=true">
+  <img width="1000" src="src/assets/treeview.png?raw=true">
 
 </p>
 
 #### Saving/Opening/Exporting Projects
 
-- If you ever need to save your current project, click the save project icon to save a json to your local directory
-- Next time the application is started, open the project again by clicking the open project icon!
+- In order to utilize the saving and opening functionality of PreVue, please clone the repo to run on your local machine.
+- If you're signed in with GitHub, click the ‘Save Project’ icon to save it to PreVue’s database
+- Click ‘Open Project’ to retrieve past projects
 - Once you're satisfied, click the export project icon to export your awesome project as new Vue application!
+- Other users can use PreVue's playground to create and export projects in single sessions.
+
 
 <img src='http://g.recordit.co/uFLqyjAnMm.gif'/>
 
@@ -112,66 +106,63 @@ src/
     UserCreatedRouteComponent2.vue
     ...
 ```
-
-### Editor Hotkeys:
-
-- cmd/ctrl + s: save
-- cmd/ctrl + o: open
-- cmd/ctrl + n: new project tab
-- cmd/ctrl + w: close project tab
-
 ## Running your own local version
 
----
-
-PreVue was developed using node runtime @ v10.15.0. You should make sure you at least have that version installed to ensure full compatibility. You can download the latest version of node [here](https://nodejs.org/en/)
 
 ### Setup
 
 Clone this repo
 
 ```
-git clone https://github.com/teamprevue/PreVue.git
+git clone https://github.com/oslabs/PreVue.git
 ```
 
 Install dependencies
 
 ```
 npm i
 ```
+Build the app
 
-Run electron app
+```
+npm run build
+```
+Run the app
 
 ```
-npm run electron:serve
+npm run server
 ```
 
+Go to <strong>http://localhost:8080</strong> to use PreVue!
+
 ## Built With
 
 ---
 
 - [Vue.js](https://vuejs.org/)
 - [Vue Router](https://router.vuejs.org/guide/#html)
 - [Vuex](https://vuex.vuejs.org/)
-- [Electron](https://electronjs.org/)
-- [Vue-Electron CLI](https://github.com/nklayman/vue-cli-plugin-electron-builder)
-- [Buefy](https://buefy.org/)
-- [Babel](https://babeljs.io/)
+- [Vite](https://vitejs.dev/)
+- [Vuetify](https://vuetifyjs.com/)
 - [Jest](https://jestjs.io/)
-- [Travis](https://travis-ci.org/)
-- [localForage](https://localforage.github.io/localForage/)
-- [Vue D3 Tree](https://github.com/David-Desmaisons/Vue.D3.tree)
+- [SuperTest](https://www.npmjs.com/package/supertest)
 
 ## Contributing
 
 ---
 
-PreVue is currently in beta release. We encourage you to submit issues for any bugs or ideas for enhancements. Also feel free to fork this repo and submit pull requests to contribute as well.
+PreVue We encourage you to submit issues for any bugs or ideas for enhancements. Please feel free to fork this repo and submit pull requests to contribute as well. Also follow PreVue on [LinkedIn](https://www.linkedin.com/company/prevue-live/) for more updates.
 
 ## Authors
 
 ---
+PreVue 2.0
+- **Jason Boo** [@jasonboo123](https://github.com/jasonboo123)
+- **Robert Drake** [@rmdrake8](https://github.com/rmdrake8)
+- **Sean Flynn** [@seanflynn5](http://github.com/seanflynn5)
+- **Zach Pestaina** [@zachpestaina](https://github.com/zachpestaina)
 
+PreVue 1.0
 - **Hubert Lin** [@hubelin](https://github.com/hubelin)
 - **Franklin Pinnock** [@pinnockf](https://github.com/pinnockf)
 - **Annette Lin** [@al2613](https://github.com/al2613)

babel.config.js

@@ -4,18 +4,14 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
 
     <link
       rel="stylesheet"
       href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
       integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
       crossorigin="anonymous"
     />
-    <!-- <link
-      rel="stylesheet"
-      href="https://unpkg.com/bulmaswatch/darkly/bulmaswatch.min.css"
-    /> -->
 
     <title>PreVue</title>
   </head>
@@ -29,5 +25,7 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

electron-builder.json

@@ -4,15 +4,18 @@ module.exports = {
     '^.+\\.vue$': 'vue-jest',
     '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
       'jest-transform-stub',
-    '^.+\\.jsx?$': 'babel-jest'
+    '^.+\\.jsx?$': 'babel-jest',
   },
   transformIgnorePatterns: ['/node_modules/'],
   moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1'
+    '^@/(.*)$': '<rootDir>/src/$1',
   },
   snapshotSerializers: ['jest-serializer-vue'],
   testMatch: [
-    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
+    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
   ],
-  testURL: 'http://localhost/'
+  testEnvironmentOptions: {
+    url: 'http://localhost:5174', // replace with your test URL
+  },
+  testEnvironment: 'node',
 };