feat: initialize hoppscotch-ui package

.eslintrc.js

@@ -0,0 +1,47 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution")
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    jest: true,
+  },
+  parserOptions: {
+    sourceType: "module",
+    requireConfigFile: false,
+  },
+  extends: [
+    "@vue/typescript/recommended",
+    "plugin:vue/vue3-recommended",
+    "plugin:prettier/recommended",
+    "plugin:storybook/recommended",
+  ],
+  ignorePatterns: [
+    "static/**/*",
+    "./helpers/backend/graphql.ts",
+    "**/*.d.ts",
+    "types/**/*",
+  ],
+  plugins: ["vue", "prettier"],
+  // add your custom rules here
+  rules: {
+    semi: [2, "never"],
+    "import/named": "off",
+    // because, named import issue with typescript see: https://github.com/typescript-eslint/typescript-eslint/issues/154
+    "no-console": "off",
+    "no-debugger": process.env.HOPP_LINT_FOR_PROD === "true" ? "error" : "warn",
+    "prettier/prettier":
+      process.env.HOPP_LINT_FOR_PROD === "true" ? "error" : "warn",
+    "vue/multi-word-component-names": "off",
+    "vue/no-side-effects-in-computed-properties": "off",
+    "import/no-named-as-default": "off",
+    "import/no-named-as-default-member": "off",
+    "@typescript-eslint/no-unused-vars":
+      process.env.HOPP_LINT_FOR_PROD === "true" ? "error" : "warn",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "import/default": "off",
+    "no-undef": "off",
+  },
+}

.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Environment Variables
+.env

.prettierignore

@@ -0,0 +1,10 @@
+.dependabot
+.github
+.hoppscotch
+.vscode
+package-lock.json
+node_modules
+dist
+static
+components.d.ts
+src/types

.prettierrc.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  semi: false,
+  plugins: ["prettier-plugin-tailwindcss"],
+}

README.md

@@ -0,0 +1,48 @@
+<div align="center">
+  <a href="https://hoppscotch.io">
+    <img
+      src="https://avatars.githubusercontent.com/u/56705483"
+      alt="Hoppscotch Logo"
+      height="64"
+    />
+  </a>
+</div>
+<div align="center">
+
+# Hoppscotch UI <font size=2><sup>ALPHA</sup></font>
+
+</div>
+
+Welcome to hoppscotch-ui, a collection of presentational components for our web applications. This library is part of the hoppscotch monorepo and contains components such as buttons, spinners, modals, tabs, windows, etc.
+
+## Usage
+
+To use the components in project, simply name the component with `directory` name as alias:
+
+For example `Primary Button` component is in `button` directory and the file name is `Primary.vue`. So, use that you have to write `<HoppButtonPrimary />`
+
+## Histoire
+
+We've included Histoire in this library which is similar to Storybook, to make it easy to play with the components in the browser. You can run Histoire in the browser with command
+
+`pnpm run story:dev`
+
+You can also use [Histoire](https://histoire.dev/) to create stories for your components and test them in different scenarios.
+
+## Versioning
+
+This project follows [Semantic Versioning](https://semver.org/) but as the project is still pre-1.0. The code and the public exposed API should not be considered to be fixed and stable. Things can change at any time!
+
+## License
+
+This project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see [`LICENSE`](https://github.com/hoppscotch/hoppscotch/blob/main/LICENSE) for more details.
+
+<div  align="center">
+
+<br />
+
+<br />
+
+###### built with ❤︎ by the [Hoppscotch Team](https://github.com/hoppscotch) and [contributors](https://github.com/hoppscotch/hoppscotch/graphs/contributors).
+
+</div>

histoire.config.ts

@@ -0,0 +1,20 @@
+import { HstVue } from "@histoire/plugin-vue"
+import { defineConfig } from "histoire"
+
+export default defineConfig({
+  theme: {
+    title: "Hoppscotch • UI",
+    logo: {
+      square: "/logo.png",
+      light: "/logo.png",
+      dark: "/logo.png",
+    },
+    logoHref: "https://ui.hoppscotch.io",
+    favicon: 'favicon.ico',
+  },
+  setupFile: "histoire.setup.ts",
+  plugins: [HstVue()],
+  viteIgnorePlugins: [
+    'vite:dts'
+  ]
+})

histoire.setup.ts

@@ -0,0 +1,7 @@
+import "./src/assets/scss/histoire.scss"
+
+import "@fontsource-variable/inter"
+import "@fontsource-variable/material-symbols-rounded"
+import "@fontsource-variable/roboto-mono"
+
+export function setupVue3() {}

package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@hoppscotch/ui",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "histoire dev",
+    "watch": "vite build --watch",
+    "build": "vite build",
+    "story:build": "histoire build",
+    "story:preview": "histoire preview",
+    "do-build-prod": "pnpm run build",
+    "postinstall": "pnpm run build",
+    "do-build-ui": "pnpm run story:build"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.25"
+  },
+  "dependencies": {
+    "@fontsource-variable/inter": "^5.0.5",
+    "@fontsource-variable/material-symbols-rounded": "^5.0.5",
+    "@fontsource-variable/roboto-mono": "^5.0.6",
+    "@hoppscotch/vue-toasted": "^0.1.0",
+    "@vitejs/plugin-legacy": "^2.3.0",
+    "@vueuse/core": "^8.7.5",
+    "fp-ts": "^2.12.1",
+    "lodash-es": "^4.17.21",
+    "path": "^0.12.7",
+    "vite-plugin-eslint": "^1.8.1",
+    "vuedraggable-es": "^4.1.1"
+  },
+  "devDependencies": {
+    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
+    "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
+    "@histoire/plugin-vue": "^0.12.4",
+    "@iconify-json/lucide": "^1.1.109",
+    "@intlify/vite-plugin-vue-i18n": "^6.0.1",
+    "@rushstack/eslint-patch": "^1.1.4",
+    "@types/lodash-es": "^4.17.6",
+    "@types/splitpanes": "^2.2.1",
+    "@typescript-eslint/eslint-plugin": "^5.19.0",
+    "@typescript-eslint/parser": "^5.19.0",
+    "@vitejs/plugin-vue": "^3.1.0",
+    "@vue/compiler-sfc": "^3.2.39",
+    "@vue/eslint-config-typescript": "^11.0.1",
+    "@vue/runtime-core": "^3.2.39",
+    "autoprefixer": "^10.4.14",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.24.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-vue": "^9.5.1",
+    "histoire": "^0.12.4",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.23",
+    "prettier": "^2.8.4",
+    "prettier-plugin-tailwindcss": "^0.5.6",
+    "rollup-plugin-polyfill-node": "^0.10.1",
+    "sass": "^1.53.0",
+    "tailwindcss": "^3.3.2",
+    "typescript": "^4.5.4",
+    "unplugin-icons": "^0.16.1",
+    "unplugin-fonts": "^1.0.3",
+    "unplugin-vue-components": "^0.21.0",
+    "vite": "^3.2.3",
+    "vite-plugin-checker": "^0.5.1",
+    "vite-plugin-dts": "3.2.0",
+    "vite-plugin-fonts": "^0.6.0",
+    "vite-plugin-html-config": "^1.0.10",
+    "vite-plugin-inspect": "^0.7.4",
+    "vite-plugin-pages": "^0.26.0",
+    "vite-plugin-pages-sitemap": "^1.4.5",
+    "vite-plugin-pwa": "^0.13.1",
+    "vite-plugin-vue-layouts": "^0.7.0",
+    "vue": "^3.2.25",
+    "vue-loader": "^16.8.3",
+    "vue-router": "^4.0.16",
+    "vue-tsc": "^0.38.2"
+  },
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/index.js",
+  "main": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./style.css": "./dist/style.css",
+    "./themes.scss": "./dist/themes.scss",
+    "./postcss.config": {
+      "import": "./postcss.config.cjs",
+      "require": "./postcss.config.cjs"
+    },
+    "./ui-preset": {
+      "import": "./dist/ui-preset.js",
+      "require": "./dist/ui-preset.js"
+    },
+    "./helpers/treeAdapter.ts": "./src/helpers/treeAdapter.ts"
+  },
+  "types": "./dist/index.d.ts"
+}

postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}