fix: build - retire storybook

.gitignore

@@ -104,7 +104,3 @@ tests/*/screenshots
 
 # Tests videos
 tests/*/videos
-
-# Storybook
-.nuxt-storybook
-storybook-static

assets/scss/styles.scss

@@ -32,7 +32,7 @@
 
 ::selection {
   @apply bg-accent;
-  @apply text-primary;
+  @apply text-accentContrast;
 }
 
 html {

assets/scss/themes.scss

@@ -92,6 +92,8 @@
   --accent-light-color: theme("colors.green.400");
   // Dark Accent color
   --accent-dark-color: theme("colors.green.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.green.50");
   // Gradient from
   --gradient-from-color: theme("colors.green.200");
   // Gradient via
@@ -107,6 +109,8 @@
   --accent-light-color: theme("colors.teal.400");
   // Dark Accent color
   --accent-dark-color: theme("colors.teal.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.teal.50");
   // Gradient from
   --gradient-from-color: theme("colors.teal.200");
   // Gradient via
@@ -122,6 +126,8 @@
   --accent-light-color: theme("colors.blue.400");
   // Dark Accent color
   --accent-dark-color: theme("colors.blue.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.blue.50");
   // Gradient from
   --gradient-from-color: theme("colors.blue.200");
   // Gradient via
@@ -137,6 +143,8 @@
   --accent-light-color: theme("colors.indigo.400");
   // Dark Accent color
   --accent-dark-color: theme("colors.indigo.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.indigo.50");
   // Gradient from
   --gradient-from-color: theme("colors.indigo.200");
   // Gradient via
@@ -152,6 +160,8 @@
   --accent-light-color: theme("colors.purple.400");
   // Dark Accent color
   --accent-dark-color: theme("colors.purple.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.purple.50");
   // Gradient from
   --gradient-from-color: theme("colors.purple.200");
   // Gradient via
@@ -167,6 +177,8 @@
   --accent-light-color: theme("colors.yellow.400");
   // Dark Accent color
   --accent-dark-color: theme("colors.yellow.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.yellow.50");
   // Gradient from
   --gradient-from-color: theme("colors.yellow.200");
   // Gradient via
@@ -182,6 +194,8 @@
   --accent-light-color: theme("colors.orange.400");
   // Dark Accent color
   --accent-dark-color: theme("colors.orange.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.orange.50");
   // Gradient from
   --gradient-from-color: theme("colors.orange.200");
   // Gradient via
@@ -197,6 +211,8 @@
   --accent-light-color: theme("colors.red.400");
   // Dark Accent color
   --accent-dark-color: theme("colors.red.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.red.50");
   // Gradient from
   --gradient-from-color: theme("colors.red.200");
   // Gradient via
@@ -212,6 +228,8 @@
   --accent-light-color: theme("colors.pink.400");
   // Dark Accent color
   --accent-dark-color: theme("colors.pink.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.pink.50");
   // Gradient from
   --gradient-from-color: theme("colors.pink.200");
   // Gradient via

components/app/Sidenav.vue

@@ -75,7 +75,7 @@ export default {
     @apply font-semibold;
   }
 
-  &.active {
+  &.exact-active-link {
     @apply text-accent;
     @apply hover:text-accent;
 

components/button/Primary.stories.js

@@ -1,17 +0,0 @@
-import Primary from "./Primary.vue"
-
-export default {
-  component: Primary,
-  title: "Components/Button",
-}
-
-const Template = (_args, { argTypes }) => ({
-  components: { Primary },
-  props: Object.keys(argTypes),
-  template: `<ButtonPrimary v-bind="$props" v-on="$props" />`,
-})
-
-export const ButtonPrimary = Template.bind({})
-ButtonPrimary.args = {
-  label: "Primary",
-}

components/button/Primary.vue

@@ -15,7 +15,7 @@
     :class="[
       color
         ? `text-${color}-800 bg-${color}-200 hover:text-${color}-900 hover:bg-${color}-300 focus:text-${color}-900 focus:bg-${color}-300`
-        : `text-primary bg-accent hover:bg-accentDark focus:bg-accentDark`,
+        : `text-accentContrast bg-accent hover:bg-accentDark focus:bg-accentDark`,
       label ? 'px-4' : 'px-2',
       rounded ? 'rounded-full' : 'rounded',
       { 'opacity-75 cursor-not-allowed': disabled },

components/button/Secondary.stories.js

@@ -1,17 +0,0 @@
-import Secondary from "./Secondary.vue"
-
-export default {
-  component: Secondary,
-  title: "Components/Button",
-}
-
-const Template = (_args, { argTypes }) => ({
-  components: { Secondary },
-  props: Object.keys(argTypes),
-  template: `<ButtonSecondary v-bind="$props" v-on="$props" />`,
-})
-
-export const ButtonSecondary = Template.bind({})
-ButtonSecondary.args = {
-  label: "Secondary",
-}

components/profile/Picture.stories.js

@@ -1,15 +0,0 @@
-import Picture from "./Picture.vue"
-
-export default {
-  component: Picture,
-  title: "Components/Profile",
-}
-
-const Template = (_args, { argTypes }) => ({
-  components: { Picture },
-  props: Object.keys(argTypes),
-  template: `<ProfilePicture v-bind="$props" v-on="$props" />`,
-})
-
-export const ProfilePicture = Template.bind({})
-ProfilePicture.args = {}

components/smart/AccentModePicker.stories.js

@@ -1,15 +0,0 @@
-import AccentModePicker from "./AccentModePicker.vue"
-
-export default {
-  component: AccentModePicker,
-  title: "Smart/AccentModePicker",
-}
-
-const Template = (_args, { argTypes }) => ({
-  components: { AccentModePicker },
-  props: Object.keys(argTypes),
-  template: `<SmartAccentModePicker v-bind="$props" v-on="$props" />`,
-})
-
-export const SmartAccentModePicker = Template.bind({})
-SmartAccentModePicker.args = {}

components/smart/Anchor.stories.js

@@ -1,17 +0,0 @@
-import Anchor from "./Anchor.vue"
-
-export default {
-  component: Anchor,
-  title: "Smart/Anchor",
-}
-
-const Template = (_args, { argTypes }) => ({
-  components: { Anchor },
-  props: Object.keys(argTypes),
-  template: `<SmartAnchor v-bind="$props" v-on="$props" />`,
-})
-
-export const SmartAnchor = Template.bind({})
-SmartAnchor.args = {
-  label: "Link",
-}

components/smart/AutoComplete.stories.js

@@ -1,17 +0,0 @@
-import AutoComplete from "./AutoComplete.vue"
-
-export default {
-  component: AutoComplete,
-  title: "Smart/AutoComplete",
-}
-
-const Template = (_args, { argTypes }) => ({
-  components: { AutoComplete },
-  props: Object.keys(argTypes),
-  template: `<SmartAutoComplete v-bind="$props" v-on="$props" />`,
-})
-
-export const SmartAutoComplete = Template.bind({})
-SmartAutoComplete.args = {
-  source: ["Apple", "Mango", "Carrot"],
-}

components/smart/AutoComplete.vue

@@ -221,7 +221,7 @@ export default {
       &:hover,
       &.active {
         @apply bg-accent;
-        @apply text-primary;
+        @apply text-accentContrast;
         @apply cursor-pointer;
       }
     }

components/smart/ChangeLanguage.stories.js

@@ -1,15 +0,0 @@
-import ChangeLanguage from "./ChangeLanguage.vue"
-
-export default {
-  component: ChangeLanguage,
-  title: "Smart/ChangeLanguage",
-}
-
-const Template = (_args, { argTypes }) => ({
-  components: { ChangeLanguage },
-  props: Object.keys(argTypes),
-  template: `<SmartChangeLanguage v-bind="$props" v-on="$props" />`,
-})
-
-export const SmartChangeLanguage = Template.bind({})
-SmartChangeLanguage.args = {}

components/smart/ColorModePicker.stories.js

@@ -1,15 +0,0 @@
-import ColorModePicker from "./ColorModePicker.vue"
-
-export default {
-  component: ColorModePicker,
-  title: "Smart/ColorModePicker",
-}
-
-const Template = (_args, { argTypes }) => ({
-  components: { ColorModePicker },
-  props: Object.keys(argTypes),
-  template: `<SmartColorModePicker v-bind="$props" v-on="$props" />`,
-})
-
-export const SmartColorModePicker = Template.bind({})
-SmartColorModePicker.args = {}

components/smart/DeletableChip.stories.js

@@ -1,15 +0,0 @@
-import DeletableChip from "./DeletableChip.vue"
-
-export default {
-  component: DeletableChip,
-  title: "Smart/DeletableChip",
-}
-
-const Template = (_args, { argTypes }) => ({
-  components: { DeletableChip },
-  props: Object.keys(argTypes),
-  template: `<SmartDeletableChip v-bind="$props" v-on="$props">file</DeletableChip>`,
-})
-
-export const SmartDeletableChip = Template.bind({})
-SmartDeletableChip.args = {}

components/smart/EnvInput.stories.js

@@ -1,18 +0,0 @@
-import EnvInput from "./EnvInput.vue"
-
-export default {
-  component: EnvInput,
-  title: "Smart/EnvInput",
-}
-
-const Template = (_args, { argTypes }) => ({
-  components: { EnvInput },
-  props: Object.keys(argTypes),
-  template: `<SmartEnvInput v-bind="$props" v-on="$props" class="h-8 w-8" />`,
-})
-
-export const SmartEnvInput = Template.bind({})
-SmartEnvInput.args = {
-  placeholder: "<<env_var>>",
-  value: "<<url>>/<<path>>",
-}

components/smart/EnvInput.vue

@@ -72,7 +72,7 @@ export default defineComponent({
         {
           text: /(<<\w+>>)/g,
           style:
-            "text-white cursor-help rounded px-1 focus:outline-none mx-0.5",
+            "cursor-help transition rounded px-1 focus:outline-none mx-0.5",
         },
       ],
       highlightEnabled: true,
@@ -203,8 +203,8 @@ export default defineComponent({
         result += `<span class="${highlightPositions[k].style} ${
           this.currentEnvironment.variables.find((k) => k.key === envVar)
             ?.value === undefined
-            ? "bg-red-500"
+            ? "bg-red-400 text-red-50 hover:bg-red-600"
-            : "bg-accentDark"
+            : "bg-accentDark text-accentContrast hover:bg-accent"
         }" v-tippy data-tippy-content="environment: ${
           this.currentEnvironment.name
         } • value: ${

components/smart/Icon.stories.js

@@ -1,17 +0,0 @@
-import Icon from "./Icon.vue"
-
-export default {
-  component: Icon,
-  title: "Smart/Icon",
-}
-
-const Template = (_args, { argTypes }) => ({
-  components: { Icon },
-  props: Object.keys(argTypes),
-  template: `<SmartIcon v-bind="$props" v-on="$props" class="h-8 w-8" />`,
-})
-
-export const SmartIcon = Template.bind({})
-SmartIcon.args = {
-  name: "github",
-}

components/smart/Item.stories.js

@@ -1,17 +0,0 @@
-import Item from "./Item.vue"
-
-export default {
-  component: Item,
-  title: "Smart/Item",
-}
-
-const Template = (_args, { argTypes }) => ({
-  components: { Item },
-  props: Object.keys(argTypes),
-  template: `<SmartItem v-bind="$props" v-on="$props" />`,
-})
-
-export const SmartItem = Template.bind({})
-SmartItem.args = {
-  label: "Item",
-}

components/smart/Modal.stories.js

@@ -1,19 +0,0 @@
-import Modal from "./Modal.vue"
-
-export default {
-  component: Modal,
-  title: "Smart/Modal",
-}
-
-const Template = (_args, { argTypes }) => ({
-  components: { Modal },
-  props: Object.keys(argTypes),
-  template: `<SmartModal v-bind="$props" v-on="$props">
-    <template #header>Header</template>
-    <template #body><div class="px-2">Body</template>
-    <template #footer>Footer</template>
-    </SmartModal>`,
-})
-
-export const SmartModal = Template.bind({})
-SmartModal.args = {}

components/smart/ProgressRing.stories.js

@@ -1,19 +0,0 @@
-import ProgressRing from "./ProgressRing.vue"
-
-export default {
-  component: ProgressRing,
-  title: "Smart/ProgressRing",
-}
-
-const Template = (_args, { argTypes }) => ({
-  components: { ProgressRing },
-  props: Object.keys(argTypes),
-  template: `<SmartProgressRing v-bind="$props" v-on="$props" />`,
-})
-
-export const SmartProgressRing = Template.bind({})
-SmartProgressRing.args = {
-  radius: 16,
-  stroke: 4,
-  progress: 25,
-}

components/smart/Spinner.stories.js

@@ -1,15 +0,0 @@
-import Spinner from "./Spinner.vue"
-
-export default {
-  component: Spinner,
-  title: "Smart/Spinner",
-}
-
-const Template = (_args, { argTypes }) => ({
-  components: { Spinner },
-  props: Object.keys(argTypes),
-  template: `<SmartSpinner v-bind="$props" v-on="$props" />`,
-})
-
-export const SmartSpinner = Template.bind({})
-SmartSpinner.args = {}

components/smart/Tabs.stories.js

@@ -1,16 +0,0 @@
-import Tabs from "./Tabs.vue"
-
-export default {
-  component: Tabs,
-  title: "Smart/Tabs",
-}
-
-const Template = (_args, { argTypes }) => ({
-  components: { Tabs },
-  props: Object.keys(argTypes),
-  template:
-    '<SmartTabs v-bind="$props" v-on="$props"><SmartTab selected label="Tab 1"></SmartTab></SmartTabs>',
-})
-
-export const SmartTabs = Template.bind({})
-SmartTabs.args = {}

components/smart/Toggle.stories.js

@@ -1,18 +0,0 @@
-import Toggle from "./Toggle.vue"
-
-export default {
-  component: Toggle,
-  title: "Smart/Toggle",
-}
-
-const Template = (_args, { argTypes }) => ({
-  components: { Toggle },
-  props: Object.keys(argTypes),
-  template: `<SmartToggle v-bind="$props" v-on="$props" />`,
-})
-
-export const SmartToggle = Template.bind({})
-SmartToggle.args = {
-  label: "Toggle",
-  on: true,
-}

components/tab/Primary.stories.js

@@ -1,17 +0,0 @@
-import Primary from "./Primary.vue"
-
-export default {
-  component: Primary,
-  title: "Components/Tab",
-}
-
-const Template = (_args, { argTypes }) => ({
-  components: { Primary },
-  props: Object.keys(argTypes),
-  template: `<TabPrimary v-bind="$props" v-on="$props" />`,
-})
-
-export const TabPrimary = Template.bind({})
-TabPrimary.args = {
-  label: "Primary",
-}

components/tab/Secondary.stories.js

@@ -1,17 +0,0 @@
-import Secondary from "./Secondary.vue"
-
-export default {
-  component: Secondary,
-  title: "Components/Tab",
-}
-
-const Template = (_args, { argTypes }) => ({
-  components: { Secondary },
-  props: Object.keys(argTypes),
-  template: `<TabSecondary v-bind="$props" v-on="$props" />`,
-})
-
-export const TabSecondary = Template.bind({})
-TabSecondary.args = {
-  label: "Secondary",
-}

nuxt.config.js

@@ -367,18 +367,6 @@ export default {
     classSuffix: "",
   },
 
-  // Storybook configuration (https://github.com/nuxt-community/storybook)
-  storybook: {
-    webpackFinal(config, _options) {
-      config.node = {
-        fs: "empty",
-      }
-
-      // extend config here
-      return config
-    },
-  },
-
   // Build Configuration (https://go.nuxtjs.dev/config-build)
   build: {
     transpile: ["three"],
@@ -460,6 +448,7 @@ export default {
 
   // Router configuration (https://nuxtjs.org/api/configuration-router)
   router: {
-    linkExactActiveClass: "active",
+    linkActiveClass: "active-link",
+    linkExactActiveClass: "exact-active-link",
   },
 }

package.json

@@ -16,9 +16,7 @@
     "lintfix": "eslint --ext .ts,.js,.vue --ignore-path .gitignore . --fix",
     "test": "jest",
     "prepare": "husky install",
-    "pre-commit": "lint-staged",
+    "pre-commit": "lint-staged"
-    "storybook": "nuxt storybook",
-    "storybook:build": "nuxt storybook build"
   },
   "lint-staged": {
     "*.{ts,js,vue}": "eslint",
@@ -76,7 +74,6 @@
     "@nuxtjs/google-analytics": "^2.4.0",
     "@nuxtjs/google-fonts": "^1.3.0",
     "@nuxtjs/pwa": "^3.3.5",
-    "@nuxtjs/storybook": "^4.1.1",
     "@nuxtjs/stylelint-module": "^4.0.0",
     "@nuxtjs/svg": "^0.1.12",
     "@testing-library/jest-dom": "^5.14.1",
@@ -96,7 +93,6 @@
     "jest-serializer-vue": "^2.0.2",
     "lint-staged": "^11.1.1",
     "nuxt-windicss": "^1.2.1",
-    "postcss": "^8.3.6",
     "prettier": "^2.3.2",
     "pretty-quick": "^3.1.1",
     "raw-loader": "^4.0.2",

pages/documentation.vue

@@ -13,7 +13,7 @@
                   bg-accentLight
                   rounded
                   font-semibold
-                  text-primary
+                  text-accentContrast
                   py-1
                   px-2
                   inline-flex

pages/index.vue

@@ -1,79 +1,76 @@
 <template>
-  <!-- eslint-disable -->
+  <Splitpanes :dbl-click-splitter="false" vertical>
-  <div>
+    <Pane class="hide-scrollbar !overflow-auto">
-    <Splitpanes :dbl-click-splitter="false" vertical>
+      <Splitpanes :dbl-click-splitter="false" horizontal>
-      <Pane class="hide-scrollbar !overflow-auto">
+        <Pane class="hide-scrollbar !overflow-auto">
-        <Splitpanes :dbl-click-splitter="false" horizontal>
+          <HttpRequest />
-          <Pane class="hide-scrollbar !overflow-auto">
+          <SmartTabs styles="sticky top-16 z-10">
-            <HttpRequest />
+            <SmartTab
-            <SmartTabs styles="sticky top-16 z-10">
+              :id="'params'"
-              <SmartTab
+              :label="$t('parameters')"
-                :id="'params'"
+              :selected="true"
-                :label="$t('parameters')"
+              :info="newActiveParamsCount$"
-                :selected="true"
+            >
-                :info="newActiveParamsCount$"
+              <HttpParameters />
-              >
-                <HttpParameters />
-              </SmartTab>
-
-              <SmartTab :id="'bodyParams'" :label="$t('body')" info="0">
-                <HttpBody />
-              </SmartTab>
-
-              <SmartTab
-                :id="'headers'"
-                :label="$t('headers')"
-                :info="newActiveHeadersCount$"
-              >
-                <HttpHeaders />
-              </SmartTab>
-
-              <SmartTab :id="'authentication'" :label="$t('authentication')">
-                <!-- TODO: Implement -->
-              </SmartTab>
-
-              <SmartTab
-                :id="'pre_request_script'"
-                :label="$t('pre_request_script')"
-              >
-                <HttpPreRequestScript />
-              </SmartTab>
-
-              <SmartTab :id="'tests'" :label="$t('tests')">
-                <HttpTests />
-              </SmartTab>
-            </SmartTabs>
-          </Pane>
-          <Pane class="hide-scrollbar !overflow-auto">
-            <HttpResponse ref="response" />
-          </Pane>
-        </Splitpanes>
-      </Pane>
-      <Pane
-        v-if="RIGHT_SIDEBAR"
-        max-size="35"
-        size="25"
-        min-size="20"
-        class="hide-scrollbar !overflow-auto"
-      >
-        <aside>
-          <SmartTabs styles="sticky z-10 top-0">
-            <SmartTab :id="'history'" :label="$t('history')" :selected="true">
-              <History :page="'rest'" ref="historyComponent" />
             </SmartTab>
 
-            <SmartTab :id="'collections'" :label="$t('collections')">
+            <SmartTab :id="'bodyParams'" :label="$t('body')" info="0">
-              <Collections />
+              <HttpBody />
             </SmartTab>
 
-            <SmartTab :id="'env'" :label="$t('environments')">
+            <SmartTab
-              <Environments />
+              :id="'headers'"
+              :label="$t('headers')"
+              :info="newActiveHeadersCount$"
+            >
+              <HttpHeaders />
+            </SmartTab>
+
+            <SmartTab :id="'authentication'" :label="$t('authentication')">
+              <!-- TODO: Implement -->
+            </SmartTab>
+
+            <SmartTab
+              :id="'pre_request_script'"
+              :label="$t('pre_request_script')"
+            >
+              <HttpPreRequestScript />
+            </SmartTab>
+
+            <SmartTab :id="'tests'" :label="$t('tests')">
+              <HttpTests />
             </SmartTab>
           </SmartTabs>
-        </aside>
+        </Pane>
-      </Pane>
+        <Pane class="hide-scrollbar !overflow-auto">
-    </Splitpanes>
+          <HttpResponse ref="response" />
-  </div>
+        </Pane>
+      </Splitpanes>
+    </Pane>
+    <Pane
+      v-if="RIGHT_SIDEBAR"
+      max-size="35"
+      size="25"
+      min-size="20"
+      class="hide-scrollbar !overflow-auto"
+    >
+      <aside>
+        <SmartTabs styles="sticky z-10 top-0">
+          <SmartTab :id="'history'" :label="$t('history')" :selected="true">
+            <History ref="historyComponent" :page="'rest'" />
+          </SmartTab>
+
+          <SmartTab :id="'collections'" :label="$t('collections')">
+            <Collections />
+          </SmartTab>
+
+          <SmartTab :id="'env'" :label="$t('environments')">
+            <Environments />
+          </SmartTab>
+        </SmartTabs>
+      </aside>
+    </Pane>
+  </Splitpanes>
 </template>
 
 <script lang="ts">

windi.config.js

@@ -16,6 +16,7 @@ export default defineConfig({
         accent: "var(--accent-color)",
         accentLight: "var(--accent-light-color)",
         accentDark: "var(--accent-dark-color)",
+        accentContrast: "var(--accent-contrast-color)",
         divider: "var(--divider-color)",
         dividerLight: "var(--divider-light-color)",
         dividerDark: "var(--divider-dark-color)",