feat: init vue-toastification

.eslintrc.js

@@ -18,9 +18,6 @@ module.exports = {
     "plugin:prettier/recommended",
     "plugin:nuxt/recommended",
   ],
-  ignorePatterns: [
-    "helpers/backend/graphql.ts"
-  ],
   plugins: ["vue", "prettier"],
   // add your custom rules here
   rules: {

.github/workflows/tests.yml

@@ -2,12 +2,13 @@ name: Node.js CI
 
 on:
   push:
-    branches: [main]
+    branches: [ main ]
   pull_request:
-    branches: [main]
+    branches: [ main ]
 
 jobs:
   build:
+
     runs-on: ubuntu-latest
 
     strategy:
@@ -16,13 +17,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-      - name: Install pnpm
-        run: curl -f https://get.pnpm.io/v6.14.js | node - add --global pnpm@6
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node-version }}
-          cache: pnpm
-      - name: Run tests
-        run: pnpm i && pnpm -r test
+      - run: npm ci
+      - run: npm test

.gitignore

@@ -104,9 +104,3 @@ tests/*/screenshots
 
 # Tests videos
 tests/*/videos
-
-# Local Netlify folder
-.netlify
-
-# Andrew's crazy Volar shim generator
-shims-volar.d.ts

.husky/.gitignore

@@ -0,0 +1 @@
+_

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:lts-alpine
+FROM node:12-alpine
 
 LABEL maintainer="Hoppscotch (support@hoppscotch.io)"
 
@@ -9,19 +9,17 @@ RUN apk add --update --no-cache \
 # Create app directory
 WORKDIR /app
 
+COPY package*.json ./
+
+RUN npm install
+
 ADD . /app/
 
 COPY . .
 
-RUN npm install -g pnpm
-
-RUN pnpm i --unsafe-perm=true
-
 ENV HOST 0.0.0.0
 EXPOSE 3000
 
-RUN mv packages/hoppscotch-app/.env.example packages/hoppscotch-app/.env
+RUN mv .env.example .env
 
-RUN pnpm run generate
-
-CMD ["pnpm", "run", "start"]
+CMD ["npm", "run", "dev"]

README.md

@@ -1,7 +1,7 @@
 <div align="center">
   <a href="https://hoppscotch.io">
     <img
-      src="https://avatars.githubusercontent.com/u/56705483"
+      src="https://raw.githubusercontent.com/hoppscotch/hoppscotch/main/static/logo.png"
       alt="Hoppscotch Logo"
       height="64"
     />
@@ -89,7 +89,7 @@
 - `TRACE` - Performs a message loop-back test along the path to the target resource
 - `<custom>` - Some APIs use custom request methods such as `LIST`. Type in your custom methods.
 
-🌈 **Make it yours:** Customizable combinations for background, foreground and accent colors — [customize now](https://hoppscotch.io/settings).
+🌈 **Make it yours:** Customizable combinations for background, foreground and accent colors — [customize now ✨](https://hoppscotch.io/settings).
 
 **Theming**
 
@@ -173,7 +173,7 @@ _Collections are synced with cloud / local session storage_
 
 - Hide your IP address
 - Fixes [`CORS`](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) (Cross Origin Resource Sharing) issues
-- Access APIs served in non-HTTPS (`http://`) endpoints
+- Access APIs served in non-HTTPS `[http://]` endpoints
 - Use your own Proxy URL
 
 _Official proxy server is hosted by Hoppscotch - **[GitHub](https://github.com/hoppscotch/proxyscotch)** - **[Privacy Policy](https://docs.hoppscotch.io/privacy)**_
@@ -256,12 +256,9 @@ _Add-ons are developed and maintained under **[Hoppscotch Organization](https://
 
 👨‍👩‍👧‍👦 **Teams β:** Helps you collaborate across your team to design, develop, and test APIs faster.
 
-- Unlimited teams
-- Unlimited shared collections
+- Unlimited team collections and shared requests
 - Unlimited team members
-- Role-based access control
-- Cloud sync
-- Multiple devices
+- User roles
 
 🚚 **Bulk Edit:** Edit key-value pairs in bulk.
 
@@ -293,7 +290,7 @@ _Add-ons are developed and maintained under **[Hoppscotch Organization](https://
 
 ## **Developing**
 
-0. Update [`.env.example`](https://github.com/hoppscotch/hoppscotch/blob/main/packages/hoppscotch-app/.env.example) file found in `packages/hoppscotch-app` with your own keys and rename it to `.env`.
+0. Update [`.env.example`](https://github.com/hoppscotch/hoppscotch/blob/main/.env.example) file found in repository's root directory with your own keys and rename it to `.env`.
 
 _Sample keys only works with the [production build](https://hoppscotch.io)._
 
@@ -305,10 +302,9 @@ _Sample keys only works with the [production build](https://hoppscotch.io)._
 ### Local development environment
 
 1. [Clone this repo](https://help.github.com/en/articles/cloning-a-repository) with git.
-2. Install pnpm using npm by running `npm install -g pnpm`.
-3. Install dependencies by running `pnpm install` within the directory that you cloned (probably `hoppscotch`).
-4. Start the development server with `pnpm run dev`.
-5. Open development site by going to [`http://localhost:3000`](http://localhost:3000) in your browser.
+2. Install dependencies by running `npm install` within the directory that you cloned (probably `hoppscotch`).
+3. Start the development server with `npm run dev`.
+4. Open development site by going to [`http://localhost:3000`](http://localhost:3000) in your browser.
 
 ### Docker compose
 
@@ -327,10 +323,9 @@ docker run --rm --name hoppscotch -p 3000:3000 hoppscotch/hoppscotch:latest
 ## **Releasing**
 
 1. [Clone this repo](https://help.github.com/en/articles/cloning-a-repository) with git.
-2. Install pnpm using npm by running `npm install -g pnpm`.
-3. Install dependencies by running `pnpm install` within the directory that you cloned (probably `hoppscotch`).
-4. Build the release files with `pnpm run generate`.
-5. Find the built project in `packages/hoppscotch-app/dist`.
+2. Install dependencies by running `npm install` within the directory that you cloned (probably `hoppscotch`).
+3. Build the release files with `npm run generate`.
+4. Find the built project in `./dist`.
 
 ## **Contributing**
 

TRANSLATIONS.md

@@ -10,10 +10,10 @@ if there is no existing translation, you can create a new one by following these
 
 1. **[Fork the repository](https://github.com/hoppscotch/hoppscotch/fork).**
 2. **Create a new branch for your translation.**
-3. **Create target language file in the [`locales`](https://github.com/hoppscotch/hoppscotch/tree/main/packages/hoppscotch-app/locales) directory.**
-4. **Copy the contents of the source file [`locales/en.json`](https://github.com/hoppscotch/hoppscotch/blob/main/packages/hoppscotch-app/locales/en.json) to the target language file.**
+3. **Create target language file in the [`locales`](https://github.com/hoppscotch/hoppscotch/tree/main/locales) directory.**
+4. **Copy the contents of the source file [`locales/en.json`](https://github.com/hoppscotch/hoppscotch/blob/main/locales/en.json) to the target language file.**
 5. **Translate the strings in the target language file.**
-6. **Add your language entry to [`languages.json`](https://github.com/hoppscotch/hoppscotch/blob/main/packages/hoppscotch-app/languages.json).**
+6. **Add your language entry to [`languages.json`](https://github.com/hoppscotch/hoppscotch/blob/main/languages.json).**
 7. **Save & commit changes.**
 8. **Send a pull request.**
 

assets/icons/align-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>

assets/scss/styles.scss

@@ -17,7 +17,7 @@
 ::-webkit-scrollbar-thumb {
   @apply bg-divider bg-clip-content;
   @apply rounded-full;
-  @apply border-solid border-transparent border-4;
+  @apply border-solid border-4 border-transparent;
   @apply hover:(bg-dividerDark bg-clip-content);
 }
 
@@ -36,9 +36,8 @@
 }
 
 input::placeholder,
-textarea::placeholder,
-.CodeMirror-empty {
-  @apply text-secondary;
+textarea::placeholder {
+  @apply text-secondaryDark;
   @apply opacity-25;
 }
 
@@ -71,7 +70,6 @@ body {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
@@ -96,15 +94,12 @@ body {
 }
 
 .material-icons {
-  @apply flex-shrink-0;
-
   font-size: var(--body-line-height) !important;
   width: var(--body-line-height);
+  overflow: hidden;
 }
 
 .svg-icons {
-  @apply flex-shrink-0;
-
   height: var(--body-line-height);
   width: var(--body-line-height);
 }
@@ -121,8 +116,8 @@ a {
 
   &.link {
     @apply items-center;
-    @apply py-0.5 px-1;
-    @apply -my-0.5 -mx-1;
+    @apply px-1 py-0.5;
+    @apply -mx-1 -my-0.5;
     @apply text-accent;
     @apply rounded;
     @apply hover:text-accentDark;
@@ -183,9 +178,9 @@ a {
   @apply items-stretch;
   @apply overflow-y-auto;
 
-  // &::-webkit-scrollbar {
-  //   @apply hidden;
-  // }
+  &::-webkit-scrollbar {
+    @apply hidden;
+  }
 }
 
 hr {
@@ -203,7 +198,7 @@ hr {
 .textarea {
   @apply flex;
   @apply w-full;
-  @apply py-2 px-4;
+  @apply px-4 py-2;
   @apply bg-transparent;
   @apply rounded;
   @apply text-secondaryDark;
@@ -298,7 +293,7 @@ input[type="checkbox"] {
     @apply cursor-pointer;
 
     &::before {
-      @apply border-divider border-2;
+      @apply border-2 border-divider;
       @apply rounded;
       @apply inline-flex;
       @apply items-center;
@@ -344,51 +339,62 @@ input[type="checkbox"] {
   @apply text-secondaryLight;
 }
 
-.toasted-container {
-  .toasted {
-    &.toasted-primary {
-      @apply bg-tooltip;
-      @apply text-primary;
-      @apply justify-start;
-      @apply shadow;
-      @apply font-medium;
-      @apply transition;
+.Vue-Toastification__progress-bar {
+  background-color: rgba(0, 0, 0, 0.6) !important;
+}
 
-      font-size: var(--body-font-size);
-      line-height: var(--body-line-height);
+.Vue-Toastification__toast {
+  @apply !bg-tooltip;
+  @apply !text-primary;
+  @apply !justify-start;
+  @apply !shadow;
+  @apply !font-medium;
+  @apply h-auto;
+  @apply w-auto;
+  @apply px-4;
+  @apply py-2;
+  @apply rounded;
+  @apply flex;
+  @apply items-center;
+}
 
-      .action {
-        @apply bg-gray-500;
-        @apply px-4;
-        @apply bg-opacity-10;
-        @apply ml-auto;
-        @apply last:ml-4;
-        @apply sm:ml-8;
-        @apply rounded;
-        @apply text-current;
-        @apply normal-case;
-        @apply hover:(bg-opacity-20 no-underline);
-        @apply font-medium;
+.Vue-Toastification__toast-body {
+  @apply !font-sans;
 
-        font-size: var(--body-font-size);
-        line-height: var(--body-line-height);
-      }
-    }
+  font-size: var(--body-font-size) !important;
+  line-height: var(--body-line-height) !important;
+}
 
-    &.info {
-      @apply !bg-accent;
-    }
+.action {
+  @apply bg-gray-500;
+  @apply px-4;
+  @apply bg-opacity-10;
+  @apply ml-auto;
+  @apply last:ml-4;
+  @apply sm:ml-8;
+  @apply transition;
+  @apply rounded;
+  @apply text-current;
+  @apply normal-case;
+  @apply hover:(bg-opacity-20 no-underline);
+  @apply font-medium;
 
-    &.error {
-      @apply !bg-red-200;
-      @apply !text-red-800;
-    }
+  font-size: var(--body-font-size);
+  line-height: var(--body-line-height);
+}
 
-    &.success {
-      @apply !bg-green-200;
-      @apply !text-green-800;
-    }
-  }
+.Vue-Toastification__toast--info {
+  @apply !bg-accent;
+}
+
+.Vue-Toastification__toast--error {
+  @apply !bg-red-200;
+  @apply !text-red-800;
+}
+
+.Vue-Toastification__toast--success {
+  @apply !bg-green-200;
+  @apply !text-green-800;
 }
 
 .smart-splitter .splitpanes__splitter {
@@ -466,32 +472,6 @@ input[type="checkbox"] {
   @apply w-full;
 }
 
-.CodeMirror {
-  @apply !h-auto;
-
-  font-size: var(--body-font-size);
-
-  &:not(.CodeMirror-focused) .CodeMirror-activeline-background {
-    background: transparent !important;
-  }
-
-  .CodeMirror-dialog-top {
-    @apply bg-primaryLight;
-    @apply border-dividerLight;
-    @apply px-4;
-    @apply py-2;
-    @apply z-5;
-  }
-
-  .CodeMirror-scroll {
-    @apply min-h-64;
-  }
-
-  * {
-    font-family: "Roboto Mono", monospace;
-  }
-}
-
 @media (max-width: 767px) {
   main {
     margin-bottom: env(safe-area-inset-bottom);