Restructure omni services and add Chatwoot research snapshot

research/chatwoot/app/javascript/v3/components/Form/CheckBox.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  isChecked: {
+    type: Boolean,
+    default: false,
+  },
+  value: {
+    type: String,
+    default: null,
+  },
+});
+
+const emit = defineEmits(['update']);
+
+const checked = computed({
+  get: () => props.isChecked,
+  set: value => emit('update', props.value, value),
+});
+</script>
+
+<template>
+  <input
+    :id="value"
+    v-model="checked"
+    type="checkbox"
+    :value="value"
+    class="flex-shrink-0 mt-0.5 border-n-strong border bg-n-slate-2 checked:border-none checked:bg-n-brand shadow-sm appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
+  />
+</template>

research/chatwoot/app/javascript/v3/components/Form/Input.vue

@@ -0,0 +1,104 @@
+<script setup>
+import { defineProps, defineModel, computed } from 'vue';
+import { useToggle } from '@vueuse/core';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import WithLabel from './WithLabel.vue';
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  type: {
+    type: String,
+    default: 'text',
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  hasError: Boolean,
+  errorMessage: {
+    type: String,
+    default: '',
+  },
+  spacing: {
+    type: String,
+    default: 'base',
+    validator: value => ['base', 'compact'].includes(value),
+  },
+});
+
+const FIELDS = {
+  TEXT: 'text',
+  PASSWORD: 'password',
+};
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const model = defineModel({
+  type: [String, Number],
+  required: true,
+});
+
+const [isPasswordVisible, togglePasswordVisibility] = useToggle();
+
+const isPasswordField = computed(() => props.type === FIELDS.PASSWORD);
+
+const currentInputType = computed(() => {
+  if (isPasswordField.value) {
+    return isPasswordVisible.value ? FIELDS.TEXT : FIELDS.PASSWORD;
+  }
+  return props.type;
+});
+</script>
+
+<template>
+  <WithLabel
+    :label="label"
+    :icon="icon"
+    :name="name"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <template #rightOfLabel>
+      <slot />
+    </template>
+    <input
+      v-bind="$attrs"
+      v-model="model"
+      :name="name"
+      :type="currentInputType"
+      class="block w-full border-none rounded-md shadow-sm bg-n-alpha-black2 appearance-none outline outline-1 focus:outline focus:outline-1 text-n-slate-12 placeholder:text-n-slate-10 sm:text-sm sm:leading-6 px-3 py-3"
+      :class="{
+        'error outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 disabled:outline-n-ruby-8 dark:disabled:outline-n-ruby-8':
+          hasError,
+        'outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 focus:outline-n-brand dark:focus:outline-n-brand':
+          !hasError,
+        'px-3 py-3': spacing === 'base',
+        'px-3 py-2 mb-0': spacing === 'compact',
+        'pl-9': icon,
+        'pr-10': isPasswordField,
+      }"
+    />
+    <Button
+      v-if="isPasswordField"
+      type="button"
+      slate
+      sm
+      link
+      :icon="isPasswordVisible ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+      class="absolute inset-y-0 right-0 pr-3"
+      :aria-label="isPasswordVisible ? 'Hide password' : 'Show password'"
+      :aria-pressed="isPasswordVisible"
+      @click="togglePasswordVisibility()"
+    />
+  </WithLabel>
+</template>

research/chatwoot/app/javascript/v3/components/Form/Select.vue

@@ -0,0 +1,94 @@
+<script>
+import WithLabel from './WithLabel.vue';
+export default {
+  components: {
+    WithLabel,
+  },
+  props: {
+    id: {
+      type: String,
+      default: '',
+    },
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+    hasError: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['update:modelValue'],
+  methods: {
+    onInput(e) {
+      this.$emit('update:modelValue', e.target.value);
+    },
+  },
+};
+</script>
+
+<template>
+  <WithLabel
+    :label="label"
+    :icon="icon"
+    :name="name"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <select
+      :id="id"
+      :selected="modelValue"
+      :name="name"
+      :class="{
+        'text-n-slate-9': !modelValue,
+        'text-n-slate-12': modelValue,
+        'pl-9': icon,
+      }"
+      class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm appearance-none rounded-xl select-caret leading-6"
+      @input="onInput"
+    >
+      <option value="" disabled selected class="hidden">
+        {{ placeholder }}
+      </option>
+      <slot>
+        <option v-for="opt in options" :key="opt.value" :value="opt.value">
+          {{ opt.label }}
+        </option>
+      </slot>
+    </select>
+  </WithLabel>
+</template>
+
+<style scoped>
+.select-caret {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
+  background-origin: content-box;
+  background-position: right -1rem center;
+  background-repeat: no-repeat;
+  background-size: 9px 6px;
+}
+</style>

research/chatwoot/app/javascript/v3/components/Form/WithLabel.vue

@@ -0,0 +1,51 @@
+<script setup>
+defineProps({
+  label: { type: String, default: '' },
+  name: { type: String, required: true },
+  icon: { type: String, default: '' },
+  hasError: { type: Boolean, default: false },
+  helpMessage: { type: String, default: '' },
+  errorMessage: { type: String, default: '' },
+});
+</script>
+
+<template>
+  <div class="space-y-1">
+    <label
+      v-if="label"
+      :for="name"
+      class="flex justify-between text-sm font-medium leading-6 text-n-slate-12"
+      :class="{ 'text-n-ruby-12': hasError }"
+    >
+      <slot name="label">
+        {{ label }}
+      </slot>
+      <slot name="rightOfLabel" />
+    </label>
+    <div class="w-full">
+      <div class="flex items-center relative w-full">
+        <fluent-icon
+          v-if="icon"
+          size="16"
+          :icon="icon"
+          class="absolute left-2 transform text-n-slate-9 w-5 h-5"
+        />
+        <slot />
+      </div>
+      <div
+        v-if="errorMessage && hasError"
+        class="text-sm mt-1.5 ml-px text-n-ruby-9 leading-tight"
+      >
+        {{ errorMessage }}
+      </div>
+      <div
+        v-else-if="helpMessage || $slots.help"
+        class="text-sm mt-1.5 ml-px text-n-slate-10 leading-tight"
+      >
+        <slot name="help">
+          {{ helpMessage }}
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>