@wikicasa-dev/components 0.1.4 → 1.0.0

package/README.md

@@ -1,18 +1,46 @@
-# Vue 3 + TypeScript + Vite
+# @wikicasa-dev/types
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+Libreria condivisa contenente componneti scritte in Vue 3.  
+La chiave privata per la condivisione è già configurata su tutti i progetti Wikicasa, per l'installazione o l'aggiornamento della libreria basterà quindi eseguire
 
-## Recommended IDE Setup
+    yarn add @wikicasa-dev/components
 
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+## Sviluppo e rilascio
 
-## Type Support For `.vue` Imports in TS
+La libreria fa parte di un monorepo insieme a `@wikicasa-dev/utilities` e `@wikicasa-dev/types`.  
+Il monorepo è gestito da **[pnpm](https://pnpm.io/it/)**. Il bundler in uso per questa libreria è **[Vite](https://pnpm.io/it/)**.
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+I file _index.html_ e _main.ts_ possono essere usati come playground per provare il funzionamento del codice. Per avviare il server di sviluppo basterà eseguire
 
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+    pnpm dev
 
-1. Disable the built-in TypeScript Extension
-   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+e collegarsi all'indirizzo corrispondente. Il server di sviluppo è dotato di hot reload, basterà quidni salvare il file modificato. Il file _main.ts_ è escluso dalla build quindi non bisogna preoccuparsi di sporcarlo.
+
+### Rilascio
+
+Come prima cosa bisogna buildare i file con
+
+    pnpm build
+
+Successivamente bisognerà incrementare la versione. pnpm ha un comando apposito per cui si sconsiglia di andare a modificare a mano la versione nel _package.json_. Il comando è
+
+    pnpm version <major|minor|patch>
+
+Sta allo sviluppatore scegliere l'incremento di versione più opportuno.  
+Dopodiché occorrerà eseguire il commit e push delle modifiche (pnpm blocca il rilascio in caso di modifiche non committate) per poi procedere alla pubblicazione con
+
+    pnpm publish
+
+## Storybook
+
+La libreria è configurata con [Storybook](https://storybook.js.org/) per testare le componenti. Per lanciare Storybook in locale basterà eseguire
+
+    pnpm storybook
+
+L'hot reload funziona anche per le componenti e le stories, occasionalmente sarà necessario aggiornare la pagina.
+
+Storybook può essere rilasciato su Chromatic, occorre eseguire
+
+    pnpm chromatic
+
+per generare un link pubblico a Storybook.

package/dist/BaseSnackbar-BiEYmHwi.js

@@ -0,0 +1,78 @@
+import { defineComponent as b, ref as l, onBeforeMount as k, openBlock as e, createElementBlock as a, createElementVNode as c, normalizeClass as f, withModifiers as m, createCommentVNode as s, createVNode as h, unref as y } from "vue";
+import { C as x, _ } from "./main-hMfaViVU.js";
+const v = { class: "snackbar-container tw-fixed tw-bottom-10px tw-left-10px tw-z-[2000] max-sm:tw-left-0 max-sm:tw-w-full" }, C = ["data-cy"], g = ["src", "alt"], L = {
+  key: 1,
+  class: "snackbar-type-icon tw-bg-contain tw-bg-no-repeat"
+}, M = { class: "snackbar-text tw-px-4 tw-py-0 tw-text tw-font-regular max-sm:tw-max-w-[80%] max-sm:tw-pr-0 sm:tw-text-16" }, T = ["innerHTML"], B = ["innerHTML"], S = /* @__PURE__ */ b({
+  inheritAttrs: !1,
+  __name: "BaseSnackbar",
+  props: {
+    type: { default: "" },
+    title: {},
+    body: {},
+    icon: {},
+    timeout: { default: 55e3 },
+    cb: { default: null }
+  },
+  emits: ["snackbar-hidden"],
+  setup(d, { emit: w }) {
+    const n = d, u = w, o = l(null), r = l(null), p = () => {
+      o.value && o.value();
+    }, i = () => {
+      const t = r.value;
+      t && (t.classList.remove("snackbar-active"), t.classList.add("snackbar-hidden"), setTimeout(() => {
+        u("snackbar-hidden");
+      }, 300));
+    };
+    return k(() => {
+      n.cb && (o.value = n.cb), setTimeout(() => {
+        i();
+      }, n.timeout);
+    }), (t, H) => (e(), a("div", v, [
+      c("div", {
+        ref_key: "snackbar",
+        ref: r,
+        "data-cy": t.$attrs["data-cy"],
+        class: f(["snackbar snackbar-active tw-flex tw-items-center tw-rounded-[5px] tw-px-4 tw-py-10px tw-font-medium tw-shadow hover:tw-cursor-pointer max-sm:tw-relative max-sm:tw-mx-10px max-sm:tw-my-0", t.type]),
+        onClick: m(p, ["stop"])
+      }, [
+        t.icon ? (e(), a("img", {
+          key: 0,
+          src: t.icon.src,
+          alt: `${t.icon.alt}`,
+          width: "20",
+          height: "20"
+        }, null, 8, g)) : s("", !0),
+        t.type && !t.icon ? (e(), a("span", L)) : s("", !0),
+        c("div", M, [
+          t.title ? (e(), a("p", {
+            key: 0,
+            class: "tw-m-0",
+            innerHTML: t.title
+          }, null, 8, T)) : s("", !0),
+          t.body ? (e(), a("p", {
+            key: 1,
+            class: "tw-m-0",
+            innerHTML: t.body
+          }, null, 8, B)) : s("", !0)
+        ]),
+        c("button", {
+          type: "button",
+          "data-cy": "base-snackbar-close-btn",
+          class: "tw-bg-transparent max-sm:tw-absolute max-sm:tw-right-5",
+          onClick: m(i, ["stop"])
+        }, [
+          h(y(x), {
+            class: "snackbar-close-icon",
+            width: 20,
+            height: 20,
+            "stroke-color": "#000"
+          })
+        ])
+      ], 10, C)
+    ]));
+  }
+}), V = /* @__PURE__ */ _(S, [["__scopeId", "data-v-81ca5c43"]]);
+export {
+  V as default
+};