feat: init vue-toastification

.github/workflows/tests.yml

@@ -21,12 +21,5 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node-version }}
-      - name: Cache .pnpm-store
-        uses: actions/cache@v1
-        with:
-          path: ~/.pnpm-store
-          key: ${{ runner.os }}-node${{ matrix.node-version }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-      - name: Install pnpm
-        run: curl -f https://get.pnpm.io/v6.14.js | node - add --global pnpm@6
-      - 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

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
-
 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"
     />
@@ -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)**_
@@ -290,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/.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)._
 
@@ -302,8 +302,8 @@ _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 dependencies by running `pnpm install` within the directory that you cloned (probably `hoppscotch`).
-3. Start the development server with `pnpm run dev`.
+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
@@ -323,9 +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 dependencies by running `pnpm install` within the directory that you cloned (probably `hoppscotch`).
-3. Build the release files with `pnpm run generate`.
-4. 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**
 

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;
 }
 
@@ -117,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;
@@ -179,9 +178,9 @@ a {
   @apply items-stretch;
   @apply overflow-y-auto;
 
-  // &::-webkit-scrollbar {
-  //   @apply hidden;
-  // }
+  &::-webkit-scrollbar {
+    @apply hidden;
+  }
 }
 
 hr {
@@ -199,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;
@@ -294,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;
@@ -340,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 {
@@ -462,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);