feat: modal and toast improvements (#7)

* feat: vue soner added

* feat: wrapper function added for soner

* chore: initial impl

* feat: simple and input modal story added

* feat: legacy toast support

* chore: rich colors for toast

* feat: legacy modal story

* chore: fixes spelling mistake

* feat: modal wrapper added

* feat: modal examples added

* chore: removed bracket

* feat: improve example

* feat: nested modal with props

* chore: update modals export

* chore: modal props warning issue updated

* feat: legacy toast action support

* chore: toast types updated

* chore: minor improvements across modal and toast related files

* chore: legacy toast type

* chore: toast ui

* chore: toast type improved

* chore: refactor toast module

* chore: export naming consistency

* chore: separated legacy toast

* chore: bump vue-sonner to 1.1.2

* chore: make toast dismissal work programmatically

* chore: export improvements

* fix: import legacy toast

* chore: theme.css for default styling

* chore: change histoire.scss to theme.scss

* chore: update README

* chore: legacy toast styling

* chore: made legacy-toast deprecated

* feat: vue-sonner replaced with @hoppscotch/vue-sonner

* fix: vue-sonner type issue fixed

* feat: new modal added as beta

---------

Co-authored-by: Andrew Bastin <[email protected]>
Co-authored-by: Joel Jacob Stephen <[email protected]>

Author: 3 people

README.md

@@ -33,6 +33,9 @@ import App from "./App.vue"
 // Import the library
 import { plugin as HoppUI } from "@hoppscotch/ui"
 
+// Import theme styles for default styling (optional)
+import "@hoppscotch/ui/themes.css"
+
 // Import the styles
 import "@hoppscotch/ui/style.css"
 

histoire.config.ts

@@ -15,4 +15,8 @@ export default defineConfig({
   setupFile: "histoire.setup.ts",
   plugins: [HstVue()],
   viteIgnorePlugins: ["vite:dts"],
+  viteNodeInlineDeps: [
+    /vue-promise-modals/,
+    /@boringer-avatars\/vue3/
+  ]
 })

histoire.setup.ts

@@ -1,7 +1,16 @@
-import "./src/assets/scss/histoire.scss"
+import { defineSetupVue3 } from "@histoire/plugin-vue"
+import { plugin } from "vue-promise-modals"
+
+import GlobalWrapper from "./src/GlobalWrapper.vue"
+
+import "./src/assets/scss/themes.scss"
+import "./src/assets/scss/styles.scss"
 
 import "@fontsource-variable/inter"
 import "@fontsource-variable/material-symbols-rounded"
 import "@fontsource-variable/roboto-mono"
 
-export function setupVue3() {}
+export const setupVue3 = defineSetupVue3(({ app, addWrapper }) => {
+  app.use(plugin, {})
+  addWrapper(GlobalWrapper)
+})

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoppscotch/ui",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "license": "MIT",
   "description": "Hoppscotch UI",
   "author": "Hoppscotch ([email protected])",
@@ -18,9 +18,10 @@
     "hoppscotch api"
   ],
   "scripts": {
-    "dev": "histoire dev",
+    "dev": "histoire dev --port 6006",
     "watch": "vite build --watch",
-    "build": "vite build",
+    "build": "vite build && npm run build:css",
+    "build:css": "sass src/assets/scss/themes.scss dist/themes.css --no-source-map",
     "story:build": "histoire build",
     "story:preview": "histoire preview",
     "prepublish": "pnpm run build"
@@ -33,19 +34,22 @@
     "@fontsource-variable/inter": "^5.0.5",
     "@fontsource-variable/material-symbols-rounded": "^5.0.5",
     "@fontsource-variable/roboto-mono": "^5.0.6",
+    "@hoppscotch/vue-sonner": "^1.2.2",
     "@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",
+    "vue-promise-modals": "^0.1.0",
+    "vue-sonner": "^1.1.2",
     "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",
+    "@histoire/plugin-vue": "^0.17.14",
     "@iconify-json/lucide": "^1.1.109",
     "@intlify/vite-plugin-vue-i18n": "^6.0.1",
     "@rushstack/eslint-patch": "^1.1.4",
@@ -62,17 +66,17 @@
     "eslint": "^8.24.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.5.1",
-    "histoire": "^0.12.4",
+    "histoire": "^0.17.14",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.23",
     "prettier": "^3.1.0",
     "prettier-plugin-tailwindcss": "^0.5.7",
     "rollup-plugin-polyfill-node": "^0.10.1",
-    "sass": "^1.53.0",
+    "sass": "^1.77.0",
     "tailwindcss": "^3.3.2",
     "typescript": "^4.5.4",
-    "unplugin-icons": "^0.16.1",
     "unplugin-fonts": "^1.0.3",
+    "unplugin-icons": "^0.16.1",
     "unplugin-vue-components": "^0.21.0",
     "vite": "^3.2.3",
     "vite-plugin-checker": "^0.5.1",
@@ -103,7 +107,7 @@
   "exports": {
     ".": "./dist/index.js",
     "./style.css": "./dist/style.css",
-    "./themes.scss": "./dist/themes.scss",
+    "./themes.css": "./dist/themes.css",
     "./ui-preset": {
       "import": "./dist/ui-preset.js",
       "require": "./dist/ui-preset.js",