feat: more storybook stories

components/app/Header.vue

@@ -1,16 +1,10 @@
 <template>
   <header class="flex flex-1 py-2 px-4 items-center justify-between">
     <div
-      class="
+      class="font-bold space-x-2 flex-shrink-0 text-sm inline-flex items-center"
-        font-extrabold
-        space-x-2
-        flex-shrink-0
-        text-sm
-        inline-flex
-        items-center
-      "
     >
       <AppLogo />
+      <span>Hoppscotch</span>
     </div>
     <div class="space-x-2 flex-shrink-0 inline-flex items-center">
       <AppGitHubStarButton class="mt-1 mr-2" />
@@ -59,7 +53,7 @@
           <SmartItem
             to="/settings"
             icon="settings"
-            :label="$t('settings')"
+            :label="$t('navigation.settings')"
             @click.native="$refs.user.tippy().hide()"
           />
           <FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />

components/app/Logo.vue

@@ -1,7 +1,15 @@
 <template>
-  <svg class="logo" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
+  <svg
-    <circle class="fill-current" r="8" cx="50%" cy="50%" />
+    class="logo"
-    <circle class="fill-primary" r="6" cx="50%" cy="50%" />
+    viewBox="0 0 24 24"
+    width="16"
+    height="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      class="fill-current"
+      d="M2.534 9.287C2.534 15.46 7.56 24 12 24c4.18 0 9.466-8.539 9.466-14.713C21.467 3.113 17.228 0 12 0 6.772 0 2.534 3.113 2.534 9.287zm11.926 4.565a4.649 4.649 0 014.257-1.261 4.649 4.649 0 01-1.262 4.256 4.649 4.649 0 01-4.257 1.262 4.649 4.649 0 011.262-4.257zm-9.177-1.261a4.649 4.649 0 014.258 1.261 4.649 4.649 0 011.261 4.257 4.649 4.649 0 01-4.257-1.262 4.649 4.649 0 01-1.262-4.256z"
+    />
   </svg>
 </template>
 

components/button/Button.stories.js

@@ -1,7 +0,0 @@
-export default {
-  title: "Button",
-}
-
-export const PrimaryButton = () => `<ButtonPrimary label="Primary" />`
-
-export const SecondaryButton = () => `<ButtonSecondary label="Secondary" />`

components/button/Primary.stories.js

@@ -0,0 +1,17 @@
+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/Secondary.stories.js

@@ -0,0 +1,17 @@
+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/collections/SaveRequest.vue

@@ -7,7 +7,7 @@
     <template #body>
       <div class="flex flex-col px-2">
         <label for="selectLabelSaveReq" class="font-semibold px-4 pb-4">
-          {{ $t("request_name") }}
+          {{ $t("request.name") }}
         </label>
         <input
           id="selectLabelSaveReq"

components/http/Request.vue

@@ -136,7 +136,7 @@
       </span>
       <ButtonSecondary
         class="rounded-r-none h-8 ml-2"
-        :label="$t('save')"
+        :label="$t('request.save')"
         :shortcut="[getSpecialKey(), 'S']"
         outline
         @click.native="showSaveRequestModal = true"
@@ -160,7 +160,7 @@
           <input
             id="request-name"
             v-model="requestName"
-            :placeholder="$t('request_name')"
+            :placeholder="$t('request.name')"
             name="request-name"
             type="text"
             class="mb-2 input"

components/profile/Picture.stories.js

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,17 @@
+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/ChangeLanguage.stories.js

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,15 @@
+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/ConfirmModal.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
-      <h3 class="heading">{{ $t("confirm") }}</h3>
+      <h3 class="heading">{{ $t("modal.confirm") }}</h3>
       <div>
         <ButtonSecondary icon="close" @click.native="hideModal" />
       </div>

components/smart/DeletableChip.stories.js

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,18 @@
+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/Icon.stories.js

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,17 @@
+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",
+}

lang/en-US.json

@@ -101,6 +101,7 @@
     "member_removed": "User removed"
   },
   "modal": {
+    "confirm": "Confirm",
     "import_export": "Import / Export"
   },
   "import": {
@@ -142,7 +143,9 @@
   },
   "request": {
     "copy_link": "Copy link",
+    "save": "Save",
     "save_as": "Save as",
+    "name": "Request name",
     "share": "Share"
   },
   "settings": {
@@ -237,7 +240,6 @@
   "save_token_req": "Save Token Request",
   "manage_token_req": "Manage Token Request",
   "use_token_req": "Use Token Request",
-  "request_name": "Request Name",
   "empty_req_name": "Empty Request Name",
   "token_req_details": "Request Details",
   "token_name": "Token Name",
@@ -339,7 +341,7 @@
   "recurring": "Recurring",
   "wiki": "Wiki",
   "error": "Error",
-  "go_home": "Go Home",
+  "home": "Home",
   "reload": "Reload",
   "enter_curl": "Enter cURL",
   "extensions": "Extensions",

layouts/error.vue

@@ -3,10 +3,11 @@
     <h1 class="font-mono mb-4 text-4xl heading">{{ statusCode }}</h1>
     <h3 class="font-mono font-semibold text-xs select-text">{{ message }}</h3>
     <p class="mt-4">
-      <ButtonSecondary to="/" icon="home" :label="$t('go_home')" />
+      <ButtonSecondary to="/" icon="home" outline :label="$t('home')" />
       <ButtonSecondary
         icon="refresh"
         :label="$t('reload')"
+        outline
         @click.native="reloadApplication"
       />
     </p>

package-lock.json

@@ -105,9 +105,9 @@
       }
     },
     "node_modules/@apollo/client": {
-      "version": "3.4.1",
+      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.4.2.tgz",
-      "integrity": "sha512-CT7ZBSHQD4UG1PDvMS9qOz5ACRIR0b4mBkqjCXEVjteOxA4wpFqUX3dg2bNl+Ok3LwPxFT4b3FwC3+LVcWFa6w==",
+      "integrity": "sha512-NHh9yIQ1AdLiAeiT42Zx2/6ktj09UOh85CM4yPkd6iyzR2cls36znoJvIApXutv7TfBiGSvTQLju9NW+N+EHHQ==",
       "dependencies": {
         "@graphql-typed-document-node/core": "^3.0.0",
         "@wry/context": "^0.6.0",
@@ -122,6 +122,9 @@
         "tslib": "^2.3.0",
         "zen-observable-ts": "^1.1.0"
       },
+      "engines": {
+        "npm": "^7.20.3"
+      },
       "peerDependencies": {
         "graphql": "^14.0.0 || ^15.0.0",
         "react": "^16.8.0 || ^17.0.0",
@@ -43193,9 +43196,9 @@
       }
     },
     "node_modules/vue-loader": {
-      "version": "15.9.7",
+      "version": "15.9.8",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.7.tgz",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.8.tgz",
-      "integrity": "sha512-qzlsbLV1HKEMf19IqCJqdNvFJRCI58WNbS6XbPqK13MrLz65es75w392MSQ5TsARAfIjUw+ATm3vlCXUJSOH9Q==",
+      "integrity": "sha512-GwSkxPrihfLR69/dSV3+5CdMQ0D+jXg8Ma1S4nQXKJAznYFX14vHdc/NetQc34Dw+rBbIJyP7JOuVb9Fhprvog==",
       "dependencies": {
         "@vue/component-compiler-utils": "^3.1.0",
         "hash-sum": "^1.0.2",
@@ -45052,9 +45055,9 @@
       }
     },
     "@apollo/client": {
-      "version": "3.4.1",
+      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.4.2.tgz",
-      "integrity": "sha512-CT7ZBSHQD4UG1PDvMS9qOz5ACRIR0b4mBkqjCXEVjteOxA4wpFqUX3dg2bNl+Ok3LwPxFT4b3FwC3+LVcWFa6w==",
+      "integrity": "sha512-NHh9yIQ1AdLiAeiT42Zx2/6ktj09UOh85CM4yPkd6iyzR2cls36znoJvIApXutv7TfBiGSvTQLju9NW+N+EHHQ==",
       "requires": {
         "@graphql-typed-document-node/core": "^3.0.0",
         "@wry/context": "^0.6.0",
@@ -78224,9 +78227,9 @@
       }
     },
     "vue-loader": {
-      "version": "15.9.7",
+      "version": "15.9.8",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.7.tgz",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.8.tgz",
-      "integrity": "sha512-qzlsbLV1HKEMf19IqCJqdNvFJRCI58WNbS6XbPqK13MrLz65es75w392MSQ5TsARAfIjUw+ATm3vlCXUJSOH9Q==",
+      "integrity": "sha512-GwSkxPrihfLR69/dSV3+5CdMQ0D+jXg8Ma1S4nQXKJAznYFX14vHdc/NetQc34Dw+rBbIJyP7JOuVb9Fhprvog==",
       "requires": {
         "@vue/component-compiler-utils": "^3.1.0",
         "hash-sum": "^1.0.2",

pages/graphql.vue

@@ -81,7 +81,7 @@
                       <ButtonSecondary
                         ref="saveRequest"
                         v-tippy="{ theme: 'tooltip' }"
-                        :title="$t('save_to_collections')"
+                        :title="$t('request.save')"
                         icon="create_new_folder"
                         @click.native="saveRequest"
                       />

pages/index.vue

@@ -349,7 +349,7 @@
             </span>
           </li>
         </ul>
-        <label for="token-req-name">{{ $t("request_name") }}</label>
+        <label for="token-req-name">{{ $t("request.name") }}</label>
         <input class="input" v-model="tokenReqName" />
         <label for="token-req-details">
           {{ $t("token_req_details") }}