@code-coaching/vuetiful 0.1.4 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.1.4",
+  "version": "0.3.0",
   "scripts": {
     "dev": "onchange 'src/**/*.vue' 'src/**/*.ts' 'src/**/*.css' -- npm run build",
     "prebuild": "node 'scripts/intellisense.js'",
@@ -8,7 +8,9 @@
     "build:style": "npx tailwindcss -i ./src/styles/all.css -o ./dist/styles/all.css",
     "docs:dev": "cd docs && npm run dev",
     "docs:build": "cd docs && npm run build",
-    "docs:serve": "cd docs && npm run serve"
+    "docs:serve": "cd docs && npm run serve",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "peerDependencies": {
     "vue": "^3.2.25"
@@ -19,7 +21,10 @@
   "devDependencies": {
     "@types/node": "^17.0.14",
     "@vitejs/plugin-vue": "^2.0.0",
+    "@vitest/coverage-c8": "^0.29.8",
+    "@vue/test-utils": "^2.3.2",
     "autoprefixer": "^10.4.14",
+    "jsdom": "^21.1.1",
     "onchange": "^7.1.0",
     "postcss": "^8.4.21",
     "prettier": "^2.8.4",
@@ -28,6 +33,7 @@
     "tailwindcss": "^3.2.7",
     "typescript": "^4.4.4",
     "vite": "^2.7.2",
+    "vitest": "^0.29.8",
     "vue": "^3.2.25",
     "vue-tsc": "^0.29.8"
   },

package/src/components/atoms/VButton.test.ts

@@ -0,0 +1,27 @@
+import { mount } from "@vue/test-utils";
+import { expect, test } from "vitest";
+import { VButton } from ".";
+
+test("VButton using prop", async () => {
+  expect(VButton).toBeTruthy();
+
+  const vButtonElement = mount(VButton, {
+    props: {
+      msg: "John Duck",
+    },
+  });
+
+  expect(vButtonElement.text()).toContain("John Duck");
+});
+
+test("VButton using slot", async () => {
+  expect(VButton).toBeTruthy();
+
+  const vButtonElement = mount(VButton, {
+    slots: {
+      default: "John Duck",
+    },
+  });
+
+  expect(vButtonElement.text()).toContain("John Duck");
+});

package/src/components/atoms/VButton.vue

@@ -1,78 +1,24 @@
-<template>
-  <button :class="`cc-button btn ${classes}`">
-    <template v-if="msg">{{ msg }}</template>
-    <slot />
-  </button>
-</template>
+<script setup lang="ts">
+import { useAttrs } from "vue";
 
-<script lang="ts">
-import { CssClasses, useDarkMode } from "@/index";
-import { computed, defineComponent } from "vue";
-
-export default defineComponent({
-  props: {
-    bgLight: {
-      type: String as () => CssClasses,
-      default: "bg-primary-50",
-    },
-    bgDark: {
-      type: String as () => CssClasses,
-      default: "bg-primary-900",
-    },
-    textOnLight: {
-      type: String as () => CssClasses,
-      default: "text-primary-900",
-    },
-    textOnDark: {
-      type: String as () => CssClasses,
-      default: "text-primary-50",
-    },
-    width: {
-      type: String as () => CssClasses,
-      default: "w-fit",
-    },
-    height: {
-      type: String as () => CssClasses,
-      default: "h-fit",
-    },
-    ring: {
-      type: String as () => CssClasses,
-      default: "ring-[1px] ring-primary-500/30",
-    },
-    rounded: {
-      type: String as () => CssClasses,
-      default: "rounded-token",
-    },
-
-    msg: {
-      type: String,
-    },
+defineProps({
+  tag: {
+    type: String as () => string,
+    default: "button",
   },
-  setup(props, { attrs }) {
-    const { currentMode, MODE } = useDarkMode();
-    const cTransition = `transition-all duration-[200ms]`;
-
-    const background = computed(() => {
-      return currentMode.value === MODE.LIGHT ? props.bgLight : props.bgDark;
-    });
-    const text = computed(() => {
-      return currentMode.value === MODE.LIGHT ? props.textOnLight : props.textOnDark;
-    });
-
-    const classes = computed(() => {
-      return `${cTransition} 
-      ${background.value} 
-      ${text.value} 
-      ${props.width} 
-      ${props.height} 
-      ${props.ring} 
-      ${props.rounded} 
-      ${attrs.class ?? ""}`;
-    });
-
-    return {
-      classes,
-    };
+  msg: {
+    type: String,
   },
 });
+const attrs = useAttrs();
 </script>
+
+<template>
+  <component
+    :is="tag"
+    :class="`vuetiful-button btn border-token hover:cursor-pointer ${attrs.class ?? ''}`"
+  >
+    <template v-if="msg">{{ msg }}</template>
+    <slot />
+  </component>
+</template>

package/src/components/index.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it, vi } from "vitest";
+import * as index from "./index";
+
+describe("src", () => {
+  Object.entries(index).forEach(([key, value]) => {
+    it(`${key} is defined`, () => {
+      expect(value).toBeDefined();
+    });
+  });
+});

package/src/components/index.ts

@@ -1,3 +1,4 @@
 import { VButton } from "./atoms";
+import { VRail, VRailTile, VShell } from "./molecules";
 
-export { VButton };
+export { VButton, VRail, VRailTile, VShell };

package/src/components/molecules/VRail.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { CssClasses } from "@/index";
+import { defineProps, provide, useAttrs } from "vue";
+
+const props = defineProps({
+  active: {
+    type: String as () => CssClasses,
+    default: "bg-secondary-active-token",
+  },
+  hover: {
+    type: String as () => CssClasses,
+    default: "hover:bg-secondary-hover-token",
+  },
+
+  regionLead: {
+    type: String as () => CssClasses,
+    default: "",
+  },
+  regionDefault: {
+    type: String as () => CssClasses,
+    default: "",
+  },
+  regionTrail: {
+    type: String as () => CssClasses,
+    default: "",
+  },
+});
+
+const attrs = useAttrs();
+
+provide("active", props.active);
+provide("hover", props.hover);
+</script>
+
+<template>
+  <div
+    class="v-rail"
+    :class="`grid h-full w-[70px] grid-rows-[auto_1fr_auto] gap-0 overflow-y-auto sm:w-20 ${
+      attrs.class || ''
+    }`"
+  >
+    <div class="v-bar-lead" :class="regionLead"><slot name="lead" /></div>
+    <div class="v-bar-default" :class="regionDefault"><slot /></div>
+    <div class="v-bar-trail" :class="regionTrail"><slot name="trail" /></div>
+  </div>
+</template>

package/src/components/molecules/VRailTile.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import type { CssClasses } from "@/index";
+import { useRail } from "@/services";
+import { inject, useAttrs } from "vue";
+
+const emit = defineEmits<{
+  (event: "click"): void;
+}>();
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: "",
+  },
+  tag: {
+    type: String as () => string,
+    default: "button",
+  },
+  label: {
+    type: String as () => string,
+    default: "",
+  },
+
+  regionIcon: {
+    type: String as () => CssClasses,
+    default: "",
+  },
+  regionLabel: {
+    type: String as () => CssClasses,
+    default: "",
+  },
+});
+
+const attrs = useAttrs();
+
+const { selectedRailTile } = useRail();
+const active = inject("active");
+const hover = inject("hover");
+
+const onClickHandler = (event: MouseEvent) => {
+  if (!props.value) return;
+  selectedRailTile.value = props.value;
+  emit("click");
+};
+const onKeyHandler = (event: KeyboardEvent) => {
+  if (!props.value) return;
+  if (!["Enter", "Space"].includes(event.key)) return;
+  selectedRailTile.value = props.value;
+  emit("click");
+};
+</script>
+
+<template>
+  <div
+    @click="onClickHandler"
+    @keydown="onKeyHandler"
+  >
+    <component
+      :is="tag"
+      v-bind="attrs"
+      :class="`app-rail-tile unstyled grid aspect-square w-full cursor-pointer place-content-center place-items-center space-y-1.5 ${hover} ${
+        selectedRailTile === value ? `${active}` : ''
+      } ${attrs.class || ''}`"
+    >
+      <template v-if="$slots.default">
+        <div :class="`app-rail-tile-icon ${regionIcon}`"><slot /></div>
+      </template>
+      <template v-if="label">
+        <div :class="`app-rail-tile-label text-center text-xs font-bold ${regionLabel}`">
+          {{ label }}
+        </div>
+      </template>
+    </component>
+  </div>
+</template>

package/src/components/molecules/VShell.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+/**
+ * @slot fixedHeader - Insert fixed header content, such as Skeleton's App Bar component.
+ * @slot sidebarLeft - Hidden when empty. Allows you to set fixed left sidebar content.
+ * @slot sidebarRight - Hidden when empty. Allows you to set fixed right sidebar content.
+ * @slot pageHeader - Insert content that resides above your page content. Great for global alerts.
+ * @slot pageFooter - Insert content that resides below your page content. Recommended for most layouts.
+ * @slot fixedFooter - Insert fixed footer content. Not recommended for most layouts.
+ */
+import { useAttrs } from "vue";
+export type CssClasses = string;
+defineProps({
+  regionPage: { type: String as () => CssClasses, default: "" },
+  slotFixedHeader: { type: String as () => CssClasses, default: "z-10" },
+  slotSidebarLeft: { type: String as () => CssClasses, default: "w-auto" },
+  slotSidebarRight: { type: String as () => CssClasses, default: "w-auto" },
+  slotPageHeader: { type: String as () => CssClasses, default: "" },
+  slotPageContent: { type: String as () => CssClasses, default: "" },
+  slotPageFooter: { type: String as () => CssClasses, default: "" },
+  slotFixedFooter: { type: String as () => CssClasses, default: "" },
+});
+const attrs = useAttrs();
+</script>
+
+<template>
+  <div :class="`vuetiful-shell flex h-full w-full flex-col overflow-hidden ${attrs.class ?? ''}`">
+    <header v-if="$slots.fixedHeader" :class="`vuetiful-fixed-header ${slotFixedHeader}`">
+      <slot name="fixedHeader" />
+    </header>
+
+    <div class="vuetiful-shell-content flex h-full w-full flex-auto overflow-hidden">
+      <aside
+        v-if="$slots.sidebarLeft"
+        :class="`vuetiful-sidebar-left overflow-y-auto overflow-x-hidden ${slotSidebarLeft}`"
+      >
+        <slot name="sidebarLeft" />
+      </aside>
+
+      <div :class="`vuetiful-page flex flex-1 flex-col overflow-x-hidden ${regionPage ?? ''}`">
+        <header
+          v-if="$slots.pageHeader"
+          :class="`vuetiful-page-header flex-none ${slotPageHeader}`"
+        >
+          <slot name="pageHeader">(slot:header)</slot>
+        </header>
+
+        <main :class="`vuetiful-page-content flex-auto ${slotPageContent}`">
+          <slot />
+        </main>
+
+        <footer
+          v-if="$slots.pageFooter"
+          :class="`vuetiful-page-footer flex-none ${slotPageFooter}`"
+        >
+          <slot name="pageFooter">(slot:footer)</slot>
+        </footer>
+      </div>
+
+      <aside
+        v-if="$slots.sidebarRight"
+        :class="`vuetiful-sidebar-right flex-none overflow-y-auto overflow-x-hidden ${slotSidebarRight}`"
+      >
+        <slot name="sidebarRight" />
+      </aside>
+    </div>
+
+    <footer v-if="$slots.fixedFooter" :class="`vuetiful-fixed-footer ${slotFixedFooter}`">
+      <slot name="fixedFooter" />
+    </footer>
+  </div>
+</template>

package/src/components/molecules/index.ts

@@ -0,0 +1,5 @@
+import VRail from "./VRail.vue";
+import VRailTile from "./VRailTile.vue";
+import VShell from "./VShell.vue";
+
+export { VRail, VRailTile, VShell };

package/src/directives/clipboard.test.ts

@@ -0,0 +1,26 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { DirectiveBinding } from "vue";
+import { vClipboard } from ".";
+
+const navigatorMock = {
+  clipboard: {
+    writeText: vi.fn(),
+  } as any,
+} as any;
+
+describe("clipboard", () => {
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+  describe("given the v-clipboard directive is used", () => {
+    it("should copy text to the clipboard on click", () => {
+      window.navigator = navigatorMock;
+
+      const el = document.createElement("div");
+      vClipboard(el, { value: "John Duck" } as DirectiveBinding);
+      el.click();
+
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith("John Duck");
+    });
+  });
+});

package/src/directives/index.ts

@@ -1,5 +1,3 @@
-import vClipboard from './clipboard'
+import vClipboard from "./clipboard";
 
-export {
-  vClipboard
-}
+export { vClipboard };

package/src/index.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it, vi } from "vitest";
+import * as components from "./components";
+import plugin, * as index from "./index";
+
+describe("src", () => {
+  Object.entries(index).forEach(([key, value]) => {
+    it(`${key} is defined`, () => {
+      expect(value).toBeDefined();
+    });
+  });
+
+  describe("given install is called", () => {
+    it("should register all components", () => {
+      const app = {
+        component: vi.fn(),
+      };
+
+      plugin.install(app);
+
+      for (const key in components) {
+        // @ts-expect-error
+        expect(app.component).toHaveBeenCalledWith(key, components[key]);
+      }
+    });
+  });
+});

package/src/index.ts

@@ -13,9 +13,9 @@ import "./styles/tailwind.css";
 export default { install };
 
 export * from "./components";
-export * from "./constants";
 export * from "./utils";
 export * from "./directives";
+export * from "./services";
 
 // This type alias is to identify CSS classes within component props, which enables Tailwind IntelliSense
 export type CssClasses = string;

package/src/services/index.ts

@@ -0,0 +1,3 @@
+import { useRail } from "./rail.service";
+
+export { useRail };

package/src/services/rail.service.ts

@@ -0,0 +1,11 @@
+import { ref } from "vue";
+
+const selectedRailTile = ref("");
+
+const useRail = () => {
+  return {
+    selectedRailTile,
+  };
+};
+
+export { useRail };

package/src/styles/all.css

@@ -3,19 +3,22 @@
 /* NOTE: The order shown below is required */
 
 /* Tailwind Directives */
-@import 'tailwind.css';
+@import "tailwind.css";
 
 /* Global Styles */
-@import 'core.css';
+@import "core.css";
 
 /* Typographical Settings */
-@import 'typography.css';
+@import "typography.css";
 
 /* Imports all Tailwind Elements */
-@import 'elements.css';
+@import "elements.css";
 
 /* Imports all Variant Styles */
-@import 'variants.css';
+@import "variants.css";
+
+/* Imports all Transitions */
+@import "transitions.css";
 
 /* Imports all Component Styles */
-@import '../../dist/style.css'
+@import "../../dist/style.css";

package/src/styles/transitions/fade.css

@@ -0,0 +1,14 @@
+.fade-150-enter-active,
+.fade-150-leave-active {
+  transition: opacity 150ms;
+}
+.fade-300-enter-active,
+.fade-300-leave-active {
+  transition: opacity 300ms;
+}
+.fade-150-enter-from,
+.fade-150-leave-to,
+.fade-300-enter-from,
+.fade-300-leave-to {
+  opacity: 0;
+}

package/src/styles/transitions/slide.css

@@ -0,0 +1,83 @@
+.slide-left-150-enter-active {
+  animation: slide-left 150ms;
+}
+.slide-left-150-leave-active {
+  animation: slide-left 150ms reverse;
+}
+.slide-left-300-enter-active {
+  animation: slide-left 300ms;
+}
+.slide-left-300-leave-active {
+  animation: slide-left 300ms reverse;
+}
+@keyframes slide-left {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.slide-top-150-enter-active {
+  animation: slide-top 150ms;
+}
+.slide-top-150-leave-active {
+  animation: slide-top 150ms reverse;
+}
+.slide-top-300-enter-active {
+  animation: slide-top 300ms;
+}
+.slide-top-300-leave-active {
+  animation: slide-top 300ms reverse;
+}
+@keyframes slide-top {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.slide-right-150-enter-active {
+  animation: slide-right 150ms;
+}
+.slide-right-150-leave-active {
+  animation: slide-right 150ms reverse;
+}
+.slide-right-300-enter-active {
+  animation: slide-right 300ms;
+}
+.slide-right-300-leave-active {
+  animation: slide-right 300ms reverse;
+}
+@keyframes slide-right {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.slide-bottom-150-enter-active {
+  animation: slide-bottom 150ms;
+}
+.slide-bottom-150-leave-active {
+  animation: slide-bottom 150ms reverse;
+}
+.slide-bottom-300-enter-active {
+  animation: slide-bottom 300ms;
+}
+.slide-bottom-300-leave-active {
+  animation: slide-bottom 300ms reverse;
+}
+@keyframes slide-bottom {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}

package/src/styles/transitions.css

@@ -0,0 +1,2 @@
+@import "transitions/fade.css";
+@import "transitions/slide.css";

package/src/utils/code-block/code-block.vue

@@ -2,7 +2,7 @@
 import { CssClasses, vClipboard } from "@/index";
 import "highlight.js/styles/github-dark.css";
 import { computed, ref, useAttrs } from "vue";
-import { useHighlight } from "./highlight";
+import { useHighlight } from "./highlight.service";
 
 const { highlight } = useHighlight();
 

package/src/utils/code-block/highlight.service.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { useHighlight } from "./highlight.service";
+
+const { highlight } = useHighlight();
+
+describe("useHighlight", () => {
+  describe("highlight", () => {
+    describe("given a known language is passed", () => {
+      it("should trim and highlight the code", () => {
+        expect(highlight("  const name = 'John Duck'  ", "javascript")).toEqual(
+          '<span class="hljs-keyword">const</span> name = <span class="hljs-string">&#x27;John Duck&#x27;</span>'
+        );
+      });
+    });
+
+    describe("given an unknown language is passed", () => {
+      it("should trim and auto highlight the code", () => {
+        expect(highlight("  const name = 'John Duck'  ", "unknown")).toEqual(
+          '<span class="hljs-keyword">const</span> <span class="hljs-keyword">name</span> = <span class="hljs-string">&#x27;John Duck&#x27;</span>'
+        );
+      });
+    })
+  });
+});