@deck9/ui 0.3.3 → 0.4.0

package/src/Checkbox/Checkbox.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="relative flex items-start">
-    <div class="flex items-center h-5">
-      <input
-        class="h-4 w-4 border-grey-600 dark:text-blue-500 dark:border-grey-300 dark:checked:border-blue-500 dark:focus:ring-blue-900 dark:focus:ring-offset-grey-800 rounded-sm"
-        type="checkbox"
-        :checked="modelValue"
-        :id="id"
-      />
-    </div>
-    <div class="ml-2 text-sm leading-5">
-      <label
-        :for="id"
-        class="font-medium text-grey-900 dark:text-grey-200 casual-25"
-        >{{ label }}</label
-      >
-      <p
-        v-if="description"
-        class="text-grey-700 dark:text-grey-400 mono-0 casual-60"
-      >
-        {{ description }}
-      </p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { withDefaults } from "vue";
-import { v4 as uuidv4 } from "uuid";
-
-interface CheckboxProps {
-  id?: string;
-  label: string;
-  modelValue: boolean;
-  description?: string;
-  checked?: boolean;
-}
-
-interface CheckboxEmits {
-  (e: "update:modelValue"): void;
-}
-
-const props = withDefaults(defineProps<CheckboxProps>(), {
-  id: uuidv4(),
-});
-
-const emit = defineEmits<CheckboxEmits>();
-</script>

package/src/Checkbox/index.ts

@@ -1 +0,0 @@
-export { default as D9Checkbox } from "./Checkbox.vue";

package/src/Icon/Icon.stories.ts

@@ -1,47 +0,0 @@
-import { D9Icon } from "@/index";
-import { icons } from "@/index";
-
-export default {
-  title: "BotReach/Icon",
-  component: D9Icon,
-  argTypes: {
-    size: {
-      control: { type: "select", options: ["xs", "1x", "2x", "3x", "4x"] },
-    },
-    name: {
-      control: { type: "select", options: icons },
-    },
-  },
-  decorators: [
-    () => ({
-      template:
-        '<div class="px-8 py-4 inline-block text-grey-50"><story/></div>',
-    }),
-  ],
-};
-
-const Template = (args, { argTypes }) => ({
-  components: { D9Icon },
-  setup() {
-    return { args };
-  },
-  template: '<d9-icon v-bind="args" />',
-});
-
-export const Primary = Template.bind({});
-Primary.args = {
-  name: "user",
-  size: "1x",
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  name: "user",
-  size: "xs",
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  name: "user",
-  size: "2x",
-};

package/src/Icon/Icon.vue

@@ -1,33 +0,0 @@
-<template>
-  <font-awesome-icon
-    v-if="isIconAvailable"
-    :icon="['fas', name]"
-    v-bind="$attrs"
-  />
-</template>
-
-<script setup lang="ts">
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { withDefaults, computed } from "vue";
-import { icons } from "../index";
-
-interface IconProps {
-  name: string;
-}
-
-const props = withDefaults(defineProps<IconProps>(), {
-  name: "user",
-});
-
-const isIconAvailable = computed((): boolean => {
-  if (icons.includes(props.name)) {
-    return true;
-  } else {
-    console.warn(
-      "could not load icon, because it is not available",
-      props.name
-    );
-    return false;
-  }
-});
-</script>

package/src/Icon/IconCollection.vue

@@ -1,29 +0,0 @@
-<template>
-  <div class="grid grid-cols-6 gap-4 max-w-6xl mx-auto">
-    <div
-      v-for="icon in icons"
-      :key="icon"
-      class="bg-grey-800 text-center h-16 text-blue-50 flex items-center justify-center rounded"
-    >
-      <div>
-        <icon v-bind="{ name: icon, size: '1x' }" />
-        <span class="block text-xs text-grey-400 mono-100 mt-2">{{
-          icon
-        }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Icon from "./Icon.vue";
-
-export default {
-  name: "icon-collection",
-
-  components: { Icon },
-  props: {
-    icons: { type: Array, required: true },
-  },
-};
-</script>

package/src/Icon/index.ts

@@ -1,3 +0,0 @@
-export { default as icons } from "./registerIcons";
-
-export { default as D9Icon } from "./Icon.vue";

package/src/Icon/registerIcons.ts

@@ -1,37 +0,0 @@
-import { library } from "@fortawesome/fontawesome-svg-core";
-import * as fasIcons from "@fortawesome/free-solid-svg-icons";
-
-library.add(
-  fasIcons.faChartPie,
-  fasIcons.faCheck,
-  fasIcons.faCheckCircle,
-  fasIcons.faChevronDown,
-  fasIcons.faChevronLeft,
-  fasIcons.faChevronRight,
-  fasIcons.faChevronUp,
-  fasIcons.faCircleNotch,
-  fasIcons.faClipboard,
-  fasIcons.faCog,
-  fasIcons.faDoorOpen,
-  fasIcons.faEllipsisH,
-  fasIcons.faEnvelope,
-  fasIcons.faExclamationTriangle,
-  fasIcons.faFingerprint,
-  fasIcons.faGlobe,
-  fasIcons.faHandPointRight,
-  fasIcons.faInfoCircle,
-  fasIcons.faPencilAlt,
-  fasIcons.faPlayCircle,
-  fasIcons.faPlus,
-  fasIcons.faPlusCircle,
-  fasIcons.faRobot,
-  fasIcons.faSave,
-  fasIcons.faShieldAlt,
-  fasIcons.faTimes,
-  fasIcons.faTrash,
-  fasIcons.faUser,
-  fasIcons.faUserShield
-);
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default [...Object.keys((library as any).definitions.fas)].sort();

package/src/Icons.stories.mdx

@@ -1,24 +0,0 @@
-<!--- Icons.stories.mdx -->
-
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import IconCollection from "./Icon/IconCollection.vue";
-import { icons } from "@/index";
-
-<Meta title="Reference/Icons Overview" />
-
-# Icons used in BotReach UI
-
-This page gives an overview of all icons used in BotReach UI.
-
-export const Primary = (args) => ({
-    components: {IconCollection},
-    setup() {
-      return {args, icons: icons};
-    },
-    template: '<icon-collection v-bind="{icons}" />',
-});
-
-<Story name="All">
-    {Primary.bind({})}
-</Story>
-

package/src/Input/Input.stories.ts

@@ -1,58 +0,0 @@
-import { D9Input } from "@/index";
-import { icons } from "@/index";
-import { v4 as uuidv4 } from "uuid";
-import { ref } from "vue";
-
-export default {
-  title: "Forms/Input",
-  component: D9Input,
-  argTypes: {
-    type: { control: { type: "inline-radio" }, options: ["text", "password"] },
-    size: {
-      control: { type: "inline-radio" },
-      options: ["small", "medium", "large"],
-    },
-    icon: { control: { type: "select" }, options: icons },
-  },
-};
-
-const Template = (args) => ({
-  setup() {
-    return {
-      args,
-      uid: ref(uuidv4()),
-    };
-  },
-  components: { D9Input },
-  template: `<div><d9-input v-bind="args" /></div>`,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  placeholder: "Your Input",
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  placeholder: "Your Input",
-  size: "small",
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  placeholder: "Your Input",
-  size: "large",
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  placeholder: "Your Input",
-  isDisabled: true,
-};
-
-export const WithIcon = Template.bind({});
-WithIcon.args = {
-  placeholder: "Your Input",
-  size: "medium",
-  icon: "user",
-};

package/src/Input/Input.vue

@@ -1,75 +0,0 @@
-<template>
-  <div class="relative">
-    <input
-      class="mono-50 bg-grey-50 text-grey-800 placeholder-grey-600 border-grey-300 dark:bg-grey-800 dark:text-grey-100 dark:placeholder-grey-400 dark:border-grey-700 focus:border-blue-400 focus:ring-blue-400 dark:focus:border-blue-800 dark:focus:ring-blue-800"
-      :placeholder="placeholder"
-      :class="{ ...inputClasses, ...textSizeClasses, ...disabledClasses }"
-      :type="type"
-      @input="input($event)"
-      :tabindex="isDisabled ? '-1' : undefined"
-    />
-
-    <span
-      v-if="icon"
-      class="absolute left-0 inset-y-0 inline-flex items-center justify-center text-grey-700 dark:text-grey-100 px-4"
-      :class="textSizeClasses"
-    >
-      <D9Icon :name="icon" />
-    </span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { D9Icon } from "../index";
-import { Size } from "../types";
-import { computed, withDefaults } from "vue";
-
-interface InputProps {
-  type: string;
-  placeholder?: string;
-  size?: Size;
-  icon?: string;
-  isDisabled?: boolean;
-}
-
-interface InputEmits {
-  (e: "onInput", value: Event): void;
-}
-
-const props = withDefaults(defineProps<InputProps>(), {
-  type: "text",
-  size: "medium",
-  isDisabled: false,
-});
-
-const emit = defineEmits<InputEmits>();
-
-const inputClasses = computed(() => {
-  return {
-    "px-3 py-1 rounded font-normal": props.size === "small",
-    "px-4 py-3 rounded font-normal": props.size === "medium",
-    "px-6 py-3 rounded font-normal": props.size === "large",
-
-    "pl-10": props.icon && props.size === "small",
-    "pl-12": props.icon && (props.size === "medium" || props.size === "large"),
-  };
-});
-
-const disabledClasses = computed(() => {
-  return {
-    "pointer-events-none opacity-50 cursor-not-allowed": props.isDisabled,
-  };
-});
-
-const textSizeClasses = computed(() => {
-  return {
-    "text-xs leading-4": props.size === "small",
-    "text-sm leading-4": props.size === "medium",
-    "text-base leading-4": props.size === "large",
-  };
-});
-
-const input = function (payload: Event): void {
-  emit("onInput", payload);
-};
-</script>

package/src/Input/index.ts

@@ -1 +0,0 @@
-export { default as D9Input } from "./Input.vue";

package/src/Label/Label.stories.ts

@@ -1,14 +0,0 @@
-import D9Label from "./Label.vue";
-
-export default {
-  title: "Forms/Label",
-  component: D9Label,
-};
-
-export const Default = (args) => ({
-  components: {D9Label},
-  setup() {
-    return {args};
-  },
-  template: '<d9-label id="name" label="Your name" />',
-});

package/src/Label/Label.vue

@@ -1,16 +0,0 @@
-<template>
-  <span class="inline-block text-blue-900 text-sm font-medium">
-    <label :for="id">{{ label }}</label>
-    <span v-if="description">{{ description }}</span>
-  </span>
-</template>
-
-<script>
-export default {
-  props: {
-    id: { type: String, required: true },
-    label: { type: String, required: true },
-    description: { type: String, default: undefined },
-  },
-};
-</script>

package/src/Label/index.ts

@@ -1 +0,0 @@
-export { default as D9Label } from "./Label.vue";

package/src/Typography.stories.mdx

@@ -1,51 +0,0 @@
-<!--- Icons.stories.mdx -->
-
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { icons } from "./index";
-
-<Meta title="Reference/Typography" />
-
-# Icons used in BotReach UI
-
-This page gives an overview of all icons used in BotReach UI.
-
-export const Primary = (args) => ({
-    template: `
-<div class="text-grey-800 dark:text-white space-y-8">
-    <div>
-        <h1 class="text-2xl font-bold casual-0 mono-100">
-            Same font, but different
-        </h1>
-        <span class="font-mono bg-grey-100 dark:bg-grey-800 inline-block py-1 px-2 text-xs">mono-100 casual-0
-            <span class="hidden text-red-500">hover:mono-0</span></span>
-    </div>
-    <div>
-        <h1 class="text-2xl font-bold casual-100 mono-100">
-            Same font, more casual
-        </h1>
-        <span class="font-mono bg-grey-100 dark:bg-grey-800 inline-block py-1 px-2 text-xs">mono-100 casual-100</span>
-    </div>
-    <div>
-        <h1 class="text-2xl font-bold casual-100 mono-0">
-            No mono, but casual
-        </h1>
-        <span class="font-mono bg-grey-100 dark:bg-grey-800 inline-block py-1 px-2 text-xs">mono-0 casual-100</span>
-    </div>
-    <div>
-        <h1 class="text-2xl font-bold casual-100 mono-0">
-            <span class="italic-mild">Italic, but mild</span><br />
-            <span class="italic">Italic, the default</span><br />
-            <span class="italic-intense">Italic, but intense</span>
-        </h1>
-        <span class="font-mono bg-grey-100 dark:bg-grey-800 inline-block py-1 px-2 text-xs">a) italic-mild; b) italic; c)
-            italic-intense</span>
-    </div>
-</div>
-      `,
-});
-
-
-<Story name="All">
-  {Primary.bind({})}
-</Story>
-

package/src/index.ts

@@ -1,5 +0,0 @@
-export * from "./Button/index";
-export * from "./Checkbox/index";
-export * from "./Icon/index";
-export * from "./Input/index";
-export * from "./Label/index";

package/src/shims-vue.d.ts

@@ -1,6 +0,0 @@
-/* eslint-disable */
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}

package/styles/app.less

@@ -1,16 +0,0 @@
-@font-face {
-  font-family: 'Recursive var';
-  font-weight: 300 1000;
-  font-style: oblique 0deg 15deg;
-  font-display: swap;
-  src: url("../public/fonts/Recursive_VF_1.078--subset-GF_latin_basic.woff2") format("woff2");
-}
-
-body {
-  font-feature-settings: "dlig"1, "liga"1;
-  @apply font-sans;
-}
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/tailwind.config.js

@@ -1,50 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const defaultTheme = require("tailwindcss/defaultTheme");
-const colors = require("tailwindcss/colors");
-
-module.exports = {
-  mode: "jit",
-  purge: {
-    content: ["./src/**/*.vue", "./src/**/*.mdx"],
-    whitelistPatterns: [/svg.*/, /fa.*/],
-  },
-  darkMode: "class",
-  theme: {
-    extend: {
-      colors: {
-        black: "#050505",
-        white: "#ffffff",
-        grey: colors.blueGray,
-        red: colors.red,
-        yellow: colors.yellow,
-        blue: colors.blue,
-      },
-      container: {
-        center: true,
-        padding: "1rem",
-      },
-      fontFamily: {
-        sans: ["Recursive var", ...defaultTheme.fontFamily.sans],
-      },
-      opacity: {
-        10: "0.1",
-        20: "0.2",
-        30: "0.3",
-        40: "0.4",
-        50: "0.5",
-        60: "0.6",
-        70: "0.7",
-        80: "0.8",
-        90: "0.9",
-      },
-    },
-  },
-  variants: {
-    extend: {},
-  },
-  plugins: [
-    require("@tailwindcss/forms"),
-    require("@tailwindcss/typography"),
-    require("@deck9/tailwindcss-recursive-font-helper"),
-  ],
-};

package/tsconfig.json

@@ -1,42 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "es2015",
-    "strict": true,
-    "jsx": "preserve",
-    "importHelpers": true,
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "sourceMap": true,
-    "outDir": "dist",
-    "declaration": true,
-    "declarationDir": ".",
-    "baseUrl": ".",
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    },
-    "types": [
-      "webpack-env"
-    ],
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
-  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.vue",
-  ],
-  "exclude": [
-    "node_modules",
-    "./tailwind.config.js",
-    "./**/*.stories.ts"
-  ]
-}

package/vite.config.ts

@@ -1,35 +0,0 @@
-import path from "path";
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
-import typescript from "@rollup/plugin-typescript";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue()],
-  publicDir: false,
-  build: {
-    lib: {
-      entry: path.resolve(__dirname, "src/index.ts"),
-      name: "ui",
-      fileName: (format) => `ui.${format}.js`,
-    },
-    rollupOptions: {
-      external: ["vue"],
-      output: {
-        globals: {
-          vue: "Vue",
-        },
-      },
-      plugins: [
-        typescript({
-          target: "es5",
-          rootDir: path.resolve(__dirname, "./src"),
-          declaration: true,
-          declarationDir: path.resolve(__dirname, "./dist"),
-          exclude: path.resolve(__dirname, "./node_modules/**"),
-          allowSyntheticDefaultImports: true,
-        }),
-      ],
-    },
-  },
-});