pimelon-ui 0.1.91 → 0.1.92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pimelon-ui",
-  "version": "0.1.91",
+  "version": "0.1.92",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -51,6 +51,7 @@
     "feather-icons": "^4.28.0",
     "husky": "^9.1.7",
     "idb-keyval": "^6.2.0",
+    "ora": "5.4.1",
     "prettier": "^3.3.2",
     "radix-vue": "^1.5.3",
     "showdown": "^2.1.0",

package/src/components/Autocomplete.story.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue'
 import Autocomplete from './Autocomplete.vue'
 
-const single = ref('')
+const single = ref()
 const people = ref(null)
 const options = [
   {
@@ -74,7 +74,7 @@ const options = [
           :options="options"
           v-model="single"
           placeholder="Select person"
-          hide-search="true"
+          :hideSearch="true"
         />
       </div>
     </Variant>
@@ -84,7 +84,7 @@ const options = [
           :options="options"
           v-model="people"
           placeholder="Select people"
-          multiple="true"
+          :multiple="true"
         />
       </div>
     </Variant>
@@ -94,8 +94,8 @@ const options = [
           :options="options"
           v-model="people"
           placeholder="Select people"
-          multiple="true"
-          hide-search="true"
+          :multiple="true"
+          :hideSearch="true"
         />
       </div>
     </Variant>

package/src/components/Autocomplete.vue

@@ -18,9 +18,9 @@
                 <slot name="prefix" />
                 <span
                   class="truncate text-base leading-5 text-ink-gray-8"
-                  v-if="selectedValue"
+                  v-if="displayValue"
                 >
-                  {{ displayValue(selectedValue) }}
+                  {{ displayValue }}
                 </span>
                 <span class="text-base leading-5 text-ink-gray-4" v-else>
                   {{ placeholder || '' }}
@@ -55,18 +55,14 @@
                     ref="searchInput"
                     class="form-input w-full focus:bg-surface-gray-3 hover:bg-surface-gray-4 text-ink-gray-8"
                     type="text"
-                    @change="
-                      (e) => {
-                        query = e.target.value
-                      }
-                    "
                     :value="query"
+                    @change="query = $event.target.value"
                     autocomplete="off"
                     placeholder="Search"
                   />
                   <button
                     class="absolute right-0 inline-flex h-7 w-7 items-center justify-center"
-                    @click="selectedValue = null"
+                    @click="clearAll"
                   >
                     <FeatherIcon name="x" class="w-4 text-ink-gray-8" />
                   </button>
@@ -86,7 +82,7 @@
                 <ComboboxOption
                   as="template"
                   v-for="(option, idx) in group.items.slice(0, 50)"
-                  :key="option?.value || idx"
+                  :key="idx"
                   :value="option"
                   v-slot="{ active, selected }"
                 >
@@ -167,185 +163,222 @@
   </Combobox>
 </template>
 
-<script>
+<script setup lang="ts">
 import {
   Combobox,
-  ComboboxButton,
   ComboboxInput,
   ComboboxOption,
   ComboboxOptions,
 } from '@headlessui/vue'
-import { nextTick } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import Popover from './Popover.vue'
 import { Button } from './Button'
 import FeatherIcon from './FeatherIcon.vue'
 
-export default {
-  name: 'Autocomplete',
-  props: {
-    options: {
-      type: Array,
-      default: () => [],
-    },
-    modelValue: {
-      type: [String, Object, Array],
-    },
-    placeholder: {
-      type: String,
-    },
-    bodyClasses: {
-      type: [String, Array, Object],
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    hideSearch: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['update:modelValue', 'update:query', 'change'],
-  components: {
-    Popover,
-    Button,
-    FeatherIcon,
-    Combobox,
-    ComboboxInput,
-    ComboboxOptions,
-    ComboboxOption,
-    ComboboxButton,
-  },
-  expose: ['togglePopover', 'rootRef'],
-  data() {
-    return {
-      query: '',
-      showOptions: false,
+type Option = {
+  label: string
+  value: OptionValue
+  description?: string
+  [key: string]: any
+}
+
+type OptionValue = string | number | boolean
+
+type AutocompleteOption = OptionValue | Option
+
+type AutocompleteOptionGroup = {
+  group: string
+  items: AutocompleteOption[]
+  hideLabel?: boolean
+}
+
+type AutocompleteOptions = AutocompleteOption[] | AutocompleteOptionGroup[]
+
+type AutocompleteProps = {
+  options: AutocompleteOptions
+  hideSearch?: boolean
+  placeholder?: string
+  bodyClasses?: string | string[]
+} & (
+  | {
+      multiple: true
+      modelValue?: AutocompleteOption[] | null
     }
-  },
-  computed: {
-    selectedValue: {
-      get() {
-        if (!this.multiple) {
-          return this.findOption(this.modelValue)
-        }
-        // in case of `multiple`, modelValue is an array of values
-        // if the modelValue is a list of values, convert them to options
-        return isOptionOrValue(this.modelValue?.[0]) === 'value'
-          ? this.modelValue?.map((v) => this.findOption(v))
-          : this.modelValue
-      },
-      set(val) {
-        this.query = ''
-        if (val && !this.multiple) this.showOptions = false
-        if (!this.multiple) {
-          this.$emit('update:modelValue', val)
-          return
-        }
-        this.$emit('update:modelValue', val)
+  | {
+      multiple?: false
+      modelValue?: AutocompleteOption | null
+    }
+)
+
+const props = withDefaults(defineProps<AutocompleteProps>(), {
+  multiple: false,
+  hideSearch: false,
+})
+const emit = defineEmits(['update:modelValue', 'update:query', 'change'])
+
+const searchInput = ref()
+const showOptions = ref(false)
+const query = ref('')
+
+const groups = computed(() => {
+  if (!props.options?.length) return []
+
+  let groups: AutocompleteOptionGroup[]
+  if (isOptionGroup(props.options[0])) {
+    groups = props.options as AutocompleteOptionGroup[]
+  } else {
+    groups = [
+      {
+        group: '',
+        items: sanitizeOptions(props.options as AutocompleteOption[]),
+        hideLabel: false,
       },
-    },
-    groups() {
-      if (!this.options || this.options.length == 0) return []
-
-      let groups = this.options[0]?.group
-        ? this.options
-        : [{ group: '', items: this.sanitizeOptions(this.options) }]
-
-      return groups
-        .map((group, i) => {
-          return {
-            key: i,
-            group: group.group,
-            hideLabel: group.hideLabel || false,
-            items: this.filterOptions(this.sanitizeOptions(group.items)),
-          }
-        })
-        .filter((group) => group.items.length > 0)
-    },
-    allOptions() {
-      return this.groups.flatMap((group) => group.items)
-    },
-    areAllOptionsSelected() {
-      if (!this.multiple) return false
-      return this.allOptions.length === this.selectedValue?.length
-    },
-  },
-  watch: {
-    query(q) {
-      this.$emit('update:query', q)
-    },
-    showOptions(val) {
-      if (val) nextTick(() => this.$refs.searchInput?.$el?.focus())
-    },
-  },
-  methods: {
-    rootRef() {
-      return this.$refs['rootRef']
-    },
-    togglePopover(val) {
-      this.showOptions = val ?? !this.showOptions
-    },
-    findOption(option) {
-      if (!option) return option
-      const value = isOptionOrValue(option) === 'value' ? option : option.value
-      return this.allOptions.find((o) => o.value === value)
-    },
-    filterOptions(options) {
-      if (!this.query) return options
-      return options.filter((option) => {
-        return (
-          option.label
-            .toLowerCase()
-            .includes(this.query.trim().toLowerCase()) ||
-          option.value.toLowerCase().includes(this.query.trim().toLowerCase())
-        )
-      })
-    },
-    displayValue(option) {
-      if (!option) return ''
-
-      if (!this.multiple) {
-        return this.getLabel(this.findOption(option))
-      }
+    ]
+  }
 
-      if (!Array.isArray(option)) return ''
-
-      // in case of `multiple`, option is an array of values
-      // so the display value should be comma separated labels
-      return option.map((v) => this.getLabel(this.findOption(v))).join(', ')
-    },
-    getLabel(option) {
-      if (isOptionOrValue(option) === 'value') return option
-      return option?.label || option?.value || 'No label'
-    },
-    sanitizeOptions(options) {
-      if (!options) return []
-      // in case the options are just values, convert them to objects
-      return options.map((option) => {
-        return isOptionOrValue(option) === 'option'
-          ? option
-          : { label: option, value: option }
-      })
-    },
-    isOptionSelected(option) {
-      if (!this.selectedValue) return false
-      const value = isOptionOrValue(option) === 'value' ? option : option.value
-      if (!this.multiple) {
-        return this.selectedValue?.value === value
+  return groups
+    .map((group, i) => {
+      return {
+        key: i,
+        group: group.group,
+        hideLabel: group.hideLabel,
+        items: filterOptions(sanitizeOptions(group.items || [])),
       }
-      return this.selectedValue?.find((v) => v && v.value === value)
-    },
-    selectAll() {
-      this.selectedValue = this.allOptions
-    },
-    clearAll() {
-      this.selectedValue = []
-    },
+    })
+    .filter((group) => group.items.length > 0)
+})
+
+const allOptions = computed(() => {
+  return groups.value.flatMap((group) => group.items)
+})
+
+const sanitizeOptions = (options: AutocompleteOption[]) => {
+  if (!options) return []
+  // in case the options are just values, convert them to objects
+  return options.map((option) => {
+    return isOption(option)
+      ? option
+      : { label: option.toString(), value: option }
+  })
+}
+
+const filterOptions = (options: Option[]) => {
+  if (!query.value) return options
+  return options.filter((option) => {
+    return (
+      option.label.toLowerCase().includes(query.value.trim().toLowerCase()) ||
+      option.value
+        .toString()
+        .toLowerCase()
+        .includes(query.value.trim().toLowerCase())
+    )
+  })
+}
+
+const selectedValue = computed({
+  get() {
+    if (!props.multiple) {
+      return findOption(props.modelValue as AutocompleteOption)
+    }
+    // in case of `multiple`, modelValue is an array of values
+    // if the modelValue is a list of values, convert them to options
+    let values = props.modelValue as AutocompleteOption[]
+    if (!values) return []
+    return isOption(values[0]) ? values : values.map((v) => findOption(v))
+  },
+  set(val) {
+    query.value = ''
+    if (val && !props.multiple) showOptions.value = false
+    if (!props.multiple) {
+      emit('update:modelValue', val)
+      return
+    }
+    emit('update:modelValue', val)
   },
+})
+
+const findOption = (option: AutocompleteOption) => {
+  if (!option) return option
+  const value = isOption(option) ? option.value : option
+  return allOptions.value.find((o) => o.value === value)
 }
 
-function isOptionOrValue(optionOrValue) {
-  return typeof optionOrValue === 'object' ? 'option' : 'value'
+const getLabel = (option: AutocompleteOption) => {
+  if (isOption(option)) {
+    return option?.label || option?.value || 'No label'
+  }
+  return option
+}
+
+const displayValue = computed(() => {
+  if (!selectedValue.value) return ''
+  if (!props.multiple) {
+    return getLabel(selectedValue.value as AutocompleteOption)
+  }
+  return (selectedValue.value as AutocompleteOption[])
+    .map((v) => getLabel(v))
+    .join(', ')
+})
+
+const isOptionSelected = (option: AutocompleteOption) => {
+  if (!selectedValue.value) return false
+  const value = isOption(option) ? option.value : option
+  if (!props.multiple) {
+    return selectedValue.value === value
+  }
+  return (selectedValue.value as AutocompleteOption[]).find((v) =>
+    isOption(v) ? v.value === value : v === value,
+  )
 }
+
+const areAllOptionsSelected = computed(() => {
+  if (!props.multiple) return false
+  return (
+    allOptions.value.length ===
+    (selectedValue.value as AutocompleteOption[])?.length
+  )
+})
+
+const selectAll = () => {
+  selectedValue.value = allOptions.value
+}
+
+const clearAll = () => {
+  selectedValue.value = props.multiple ? [] : undefined
+}
+
+const isOption = (option: AutocompleteOption) => {
+  return typeof option === 'object'
+}
+
+const isOptionGroup = (option: any) => {
+  return typeof option === 'object' && 'items' in option && 'group' in option
+}
+
+watch(
+  () => query.value,
+  () => {
+    emit('update:query', query.value)
+  },
+)
+
+watch(
+  () => showOptions.value,
+  () => {
+    if (showOptions.value) {
+      nextTick(() => searchInput.value?.$el.focus())
+    }
+  },
+)
+
+const rootRef = ref()
+
+const togglePopover = () => {
+  showOptions.value = !showOptions.value
+}
+
+defineExpose({
+  rootRef,
+  togglePopover,
+})
 </script>

package/src/components/TextEditor/TextEditor.story.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { EditorContent } from '@tiptap/vue-3'
+import TextEditor from './TextEditor.vue'
+import TextEditorFixedMenu from './TextEditorFixedMenu.vue'
+import { Button } from '../Button'
+
+const value = ref('')
+const customValue = ref('')
+const customButtons = [
+  'Paragraph',
+  ['Heading 2', 'Heading 3', 'Heading 4'],
+  'Separator',
+  'Bold',
+  'Italic',
+  'Separator',
+  'Bullet List',
+  'Numbered List',
+  'Separator',
+  'Link',
+  'Image',
+]
+</script>
+<template>
+  <Story :layout="{ width: 600, type: 'grid' }" autoPropsDisabled>
+    <Variant title="Basic">
+      <div class="p-2">
+        <TextEditor
+          editor-class="prose-sm min-h-[4rem] border rounded-b-lg border-t-0 p-2"
+          :content="value"
+          placeholder="Type something..."
+          @change="(val) => (value = val)"
+          :bubbleMenu="true"
+          :fixed-menu="true"
+        />
+      </div>
+    </Variant>
+    <Variant title="Comment Editor">
+      <div class="p-2">
+        <TextEditor
+          ref="textEditor"
+          editor-class="prose-sm max-w-none min-h-[4rem]"
+          :content="customValue"
+          @change="(val) => (customValue = val)"
+          :starterkit-options="{ heading: { levels: [2, 3, 4] } }"
+          placeholder="Write something amazing..."
+        >
+          <template v-slot:editor="{ editor }">
+            <EditorContent
+              class="max-h-[50vh] overflow-y-auto border rounded-lg p-4"
+              :editor="editor"
+            />
+          </template>
+          <template v-slot:bottom>
+            <div
+              class="mt-2 flex flex-col justify-between sm:flex-row sm:items-center"
+            >
+              <TextEditorFixedMenu
+                class="-ml-1 overflow-x-auto"
+                :buttons="customButtons"
+              />
+              <div class="mt-2 flex items-center justify-end space-x-2 sm:mt-0">
+                <Button>Cancel</Button>
+                <Button variant="solid">Submit</Button>
+              </div>
+            </div>
+          </template>
+        </TextEditor>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/utils/markdown.js

@@ -15,6 +15,15 @@ export function detectMarkdown(text) {
   const lines = text.split('\n')
   const markdown = lines.filter(
     (line) =>
+      // check for inline markdown content like images, links, italic, bold, etc.
+      /!\[.*\]\(.*\)/.test(line) ||
+      /\[.*\]\(.*\)/.test(line) ||
+      /(^|\s)\*.*\*(\s|$)/.test(line) ||
+      /(^|\s)_.*_(\s|$)/.test(line) ||
+      /(^|\s)\*\*.*\*\*(\s|$)/.test(line) ||
+      /(^|\s)__.*__(\s|$)/.test(line) ||
+      /(^|\s)~~.*~~(\s|$)/.test(line) ||
+      // check for block markdown content like headings, code blocks, lists, etc.
       line.startsWith('![') ||
       line.startsWith('#') ||
       line.startsWith('> ') ||

package/vite.js

@@ -1,13 +1,16 @@
 const path = require('path')
 const fs = require('fs')
+const DocTypeInterfaceGenerator = require('./scripts/generateInterface')
 
 module.exports = function proxyOptions({
   port = 8080,
   source = '^/(app|login|api|assets|files|private)',
 } = {}) {
-  const config = getCommonSiteConfig()
-  const webserver_port = config ? config.webserver_port : 8000
-  if (!config) {
+  const commonSiteConfig = getCommonSiteConfig()
+  const webserver_port = commonSiteConfig
+    ? commonSiteConfig.webserver_port
+    : 8000
+  if (!commonSiteConfig) {
     console.log('No common_site_config.json found, using default port 8000')
   }
   let proxy = {}
@@ -19,15 +22,44 @@ module.exports = function proxyOptions({
       return `http://${site_name}:${webserver_port}`
     },
   }
+
   return {
     name: 'melonui-vite-plugin',
-    config: () => ({
-      server: {
-        port: port,
-        proxy: proxy,
-      },
-    }),
+    config: async () => {
+      await generateDocTypeInterfaces()
+
+      return {
+        server: {
+          port: port,
+          proxy: proxy,
+        },
+      }
+    },
+  }
+}
+
+async function generateDocTypeInterfaces() {
+  const config = getConfig()
+  if (!(config && config.typeGeneration && config.typeGeneration.input)) return
+
+  const frontendFolder = process.cwd()
+  let outputPath = config.typeGeneration.output || 'src/types/doctypes.ts'
+  if (!path.isAbsolute(outputPath)) {
+    outputPath = path.join(frontendFolder, outputPath)
+  }
+
+  const appsFolder = findAppsFolder()
+  if (!appsFolder) {
+    console.error('Could not find pimelon/apps folder')
+    return
   }
+
+  const generator = new DocTypeInterfaceGenerator(
+    appsFolder,
+    config.typeGeneration.input,
+    outputPath,
+  )
+  await generator.generate()
 }
 
 function getCommonSiteConfig() {
@@ -48,3 +80,24 @@ function getCommonSiteConfig() {
   }
   return null
 }
+
+function findAppsFolder() {
+  let currentDir = process.cwd()
+  while (currentDir !== '/') {
+    if (
+      fs.existsSync(path.join(currentDir, 'apps')) &&
+      fs.existsSync(path.join(currentDir, 'sites'))
+    ) {
+      return path.join(currentDir, 'apps')
+    }
+    currentDir = path.resolve(currentDir, '..')
+  }
+  return null
+}
+
+function getConfig() {
+  let configPath = path.join(process.cwd(), 'melonui.json')
+  if (fs.existsSync(configPath)) {
+    return JSON.parse(fs.readFileSync(configPath))
+  }
+}