@dataloop-ai/components 0.13.19 → 0.14.4

package/src/utils/update-key.ts

@@ -0,0 +1,90 @@
+import { cloneDeep } from 'lodash'
+
+export function updateKey(
+    data: Record<string, any>,
+    key: string,
+    mapFn: Function
+): Record<string, any> {
+    const input = cloneDeep(data)
+
+    recursiveKeyUpdate(input, key, mapFn)
+
+    return input
+}
+
+export function recursiveKeyUpdate(
+    input: Record<string, any>,
+    key: string,
+    mapFn: Function
+): Record<string, any> {
+    if (input instanceof Array) {
+        for (let i = 0; i < input.length; i++) {
+            recursiveKeyUpdate(input[i], key, mapFn)
+        }
+    } else {
+        for (const prop in input) {
+            if (prop === key) {
+                input[prop] = mapFn(input[prop])
+            }
+
+            if (input[prop] instanceof Object || input[prop] instanceof Array) {
+                recursiveKeyUpdate(input[prop], key, mapFn)
+            }
+        }
+    }
+
+    return input
+}
+
+export function updateKeys(
+    data: Record<string, any>,
+    keys: string[],
+    mapFn: Function
+): Record<string, any> {
+    const input = cloneDeep(data)
+    recursiveKeysUpdate(input, keys, mapFn)
+    return input
+}
+export function recursiveKeysUpdate(
+    input: Record<string, any>,
+    keys: string[],
+    mapFn: Function
+): Record<string, any> {
+    if (input instanceof Array) {
+        for (let i = 0; i < input.length; i++) {
+            recursiveKeysUpdate(input[i], keys, mapFn)
+        }
+    } else {
+        for (const prop in input) {
+            if (keys.includes(prop)) {
+                input[prop] = mapFn(input[prop])
+            }
+            if (input[prop] instanceof Object || input[prop] instanceof Array) {
+                recursiveKeysUpdate(input[prop], keys, mapFn)
+            }
+        }
+    }
+    return input
+}
+
+export function updateNestedArrayValues(
+    data: Record<string, any>,
+    keys: string[],
+    mapFn: Function
+) {
+    if (keys.length === 0) {
+        // If there are no more keys left in the array, apply the callback to the data and return the result
+        return mapFn(data)
+    }
+
+    const key = keys[0] // Get the first key in the array
+    const restKeys = keys.slice(1) // Get the rest of the keys in the array
+
+    // If the data is an object and contains the key, update the value of the key with the recursive call of the function
+    if (typeof data === 'object' && data !== null && data.hasOwnProperty(key)) {
+        data[key] = data[key].map((item: string) => mapFn(item))
+        updateNestedArrayValues(data, restKeys, mapFn)
+    }
+
+    return data // Return the updated data
+}

package/tsconfig.json

@@ -17,7 +17,6 @@
         },
         "types": [
             "vite/client",
-            "@types/jest",
             "@types/lodash",
             "@types/node"
         ],

package/vite.config.ts

@@ -1,13 +1,30 @@
+/// <reference types="vitest" />
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [vue()],
+    test: {
+        environment: 'jsdom',
+        setupFiles: ['tests/setup.js'],
+        deps: {
+            inline: ['vitest-canvas-mock']
+        },
+        coverage: {
+            reporter: ['lcovonly', 'text']
+        }
+    },
     optimizeDeps: {
         exclude: ['vue-demi']
     },
     define: {
         'process.env': process.env
+    },
+    server: { port: 3000 },
+    resolve: {
+        alias: {
+            vue: 'vue/dist/vue.esm-bundler.js'
+        }
     }
 })

package/Dockerfile

@@ -1,12 +0,0 @@
-FROM node:16-alpine
-
-COPY storybook-static /components/storybook-static
-COPY storybook.js /components/storybook.js
-
-WORKDIR /components
-
-RUN npm install express
-
-EXPOSE 3000
-
-CMD [ "node", "storybook.js"]

package/jest.config.js

@@ -1,16 +0,0 @@
-/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
-module.exports = {
-    preset: 'ts-jest',
-    testEnvironment: 'jsdom',
-    transform: {
-        '^.+\\.vue$': 'vue3-jest',
-        '.(css|less|scss)$': '<rootDir>/tests/mock/style-mock.js'
-    },
-    moduleFileExtensions: ['json', 'js', 'jsx', 'ts', 'tsx', 'vue', '.css'],
-    setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
-    moduleNameMapper: {
-        '\\.(css|less|sass|scss)$': '<rootDir>/tests/__mocks__/styleMock.js',
-        '\\.(gif|ttf|eot|svg)$': '<rootDir>/tests/__mocks__/fileMock.js',
-        'vanilla-jsoneditor': '<rootDir>/tests/mock/style-mock.js'
-    }
-}

package/jest.setup.js

@@ -1,59 +0,0 @@
-const Environment = require('jest-environment-jsdom')
-
-/* eslint-disable no-undef */
-global.ResizeObserver = jest.fn().mockImplementation(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn()
-}))
-
-Element.prototype.scrollTo = () => {}
-
-if (typeof String.prototype.replaceAll === 'undefined') {
-    String.prototype.replaceAll = function (match, replace) {
-        return this.replace(new RegExp(match, 'g'), () => replace)
-    }
-}
-
-const delay = (delay) => {
-    return new Promise((resolve, reject) => {
-        setTimeout(() => resolve(null), delay)
-    })
-}
-
-global.delay = delay
-window.delay = delay
-
-document.createRange = () => {
-    const range = new Range()
-    range.getBoundingClientRect = jest.fn(() => ({
-        width: 0,
-        height: 0,
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0
-    }))
-    range.getClientRects = () => {
-        return {
-            item: () => null,
-            length: 0,
-            [Symbol.iterator]: jest.fn()
-        }
-    }
-    range.startContainer.getBoundingClientRect = jest.fn()
-    return range
-}
-
-module.exports = class CustomTestEnvironment extends Environment {
-    async setup() {
-        await super.setup()
-        if (typeof this.global.TextEncoder === 'undefined') {
-            const { TextEncoder, TextDecoder } = require('util')
-            this.global.TextEncoder = TextEncoder
-            this.global.TextDecoder = TextDecoder
-            this.global.ArrayBuffer = ArrayBuffer
-            this.global.Uint8Array = Uint8Array
-        }
-    }
-}

package/src/components/DlWidget/DlWidgetGrid.vue

@@ -1,360 +0,0 @@
-<template>
-    <div
-        :id="uuid"
-        class="dl-widget-grid"
-        :style="gridStyle"
-    >
-        <div
-            v-for="(row, rowIndex) in modelValue"
-            :key="row"
-            class="dl-widget-grid__row"
-            :style="rowStyle"
-            @mouseenter="currentRow = rowIndex"
-        >
-            <div
-                v-for="(widget, widgetIndex) in row"
-                :id="`${rowIndex}-${widgetIndex}`"
-                :key="widget"
-                :class="gridItemClasses"
-                :style="`flex-basis: ${100 / row.length}%`"
-                @mouseenter="
-                    (e) => {
-                        handleMouseEnter(e)
-                        currentItem = widgetIndex
-                    }
-                "
-            >
-                <dl-widget>
-                    <template #header>
-                        <div class="dl-widget-grid__item--header">
-                            <div class="dl-widget-grid__item--titles">
-                                <dl-typography size="h2">
-                                    {{ widget.title }}
-                                </dl-typography>
-                                <dl-typography size="h4">
-                                    {{ widget.subTitle }}
-                                </dl-typography>
-                            </div>
-                            <dl-icon
-                                class="dl-widget-grid__item--drag-icon"
-                                icon="icon-dl-drag"
-                                color="dl-color-medium"
-                                size="15px"
-                                @mousedown="
-                                    startDragging(
-                                        `${rowIndex}-${widgetIndex}`,
-                                        widget
-                                    )
-                                "
-                            />
-                            <div class="dl-widget-grid__item--menu">
-                                <slot name="menu" />
-                                <dl-icon
-                                    v-if="isEditable"
-                                    class="dl-widget-grid__item--delete-icon"
-                                    icon="icon-dl-delete"
-                                    color="dl-color-negative"
-                                    size="20px"
-                                    @mousedown="
-                                        removeWidget(
-                                            `${rowIndex}-${widgetIndex}`
-                                        )
-                                    "
-                                />
-                            </div>
-                        </div>
-                    </template>
-                    <template #content>
-                        <div class="dl-widget-grid__item--content">
-                            <component
-                                :is="widget.content"
-                                v-if="typeof widget.content === 'object'"
-                            />
-                            <div v-else>
-                                {{ widget.content }}
-                            </div>
-                        </div>
-                    </template>
-                    <template #description>
-                        {{ widget.description }}
-                    </template>
-                </dl-widget>
-            </div>
-        </div>
-
-        <div
-            ref="clone"
-            :class="cloneClasses"
-        />
-    </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue-demi'
-import { Widget } from './types'
-import { cloneDeep } from 'lodash'
-import { equateElements, getTargetWidget, getIndex } from './utils'
-import DlWidget from './DlWidget.vue'
-import DlIcon from '../DlIcon.vue'
-import DlTypography from '../DlTypography.vue'
-import { v4 } from 'uuid'
-
-interface DragSide {
-    previous: boolean
-    current: boolean
-}
-
-export default defineComponent({
-    components: {
-        DlWidget,
-        DlIcon,
-        DlTypography
-    },
-    props: {
-        modelValue: {
-            type: Array as PropType<Widget[][]>,
-            default: () => [] as Widget[]
-        },
-        isEditable: { type: Boolean, default: false },
-        rowGap: { type: String, default: '30px' },
-        columnGap: { type: String, default: '30px' },
-        widgetLibrary: { type: Array, default: () => [] as Widget[] }
-    },
-    emits: ['update:model-value', 'remove'],
-    data(): {
-        uuid: string
-        timer: number
-        isDragging: boolean
-        dragTarget: HTMLElement
-        currentRow: number
-        currentItem: number
-        draggedWidget: Widget
-        draggedWidgetId: string
-        dragSide: DragSide
-    } {
-        return {
-            uuid: `dl-widget-grid-${v4()}`,
-            timer: null,
-            isDragging: false,
-            dragTarget: null,
-            currentRow: -1,
-            currentItem: -1,
-            draggedWidget: null,
-            draggedWidgetId: null,
-            dragSide: { previous: null, current: null }
-        }
-    },
-    computed: {
-        gridStyle(): Record<string, any> {
-            return { gap: this.rowGap }
-        },
-        rowStyle(): Record<string, any> {
-            return { gap: this.columnGap }
-        },
-        cloneClasses(): string {
-            return `dl-widget-grid__clone ${
-                this.isDragging ? 'dl-widget-grid__clone--dragging' : ''
-            }`
-        },
-        gridItemClasses(): string {
-            return `dl-widget-grid__item ${
-                this.isDragging ? 'dl-widget-grid__item--dragging' : ''
-            }`
-        }
-    },
-    mounted() {
-        window.addEventListener('mouseup', (e) => this.stopDragging(e))
-    },
-    methods: {
-        startDragging(widgetIndex: string, widget: Widget) {
-            window.addEventListener('mousemove', (e) => this.moveWidget(e))
-            this.isDragging = true
-            const draggedWidget = document.getElementById(widgetIndex)
-            draggedWidget.style.visibility = 'hidden'
-            this.draggedWidgetId = draggedWidget.id
-            this.draggedWidget = widget
-            equateElements(draggedWidget, this.$refs.clone as HTMLElement)
-        },
-        stopDragging(e: MouseEvent) {
-            if (!this.isDragging) return
-            this.isDragging = false
-            const targetId = getTargetWidget(e.target as HTMLElement)?.id
-            let newWidgets: Widget[][]
-            if (targetId && this.draggedWidgetId) {
-                newWidgets = cloneDeep(this.modelValue) as Widget[][]
-                const targetIndex = getIndex(targetId)
-                const sourceIndex = getIndex(this.draggedWidgetId)
-                const temp = newWidgets[targetIndex.row][targetIndex.column]
-                newWidgets[targetIndex.row][targetIndex.column] =
-                    this.modelValue[sourceIndex.row][sourceIndex.column]
-                newWidgets[sourceIndex.row][sourceIndex.column] = temp
-
-                this.$emit('update:model-value', newWidgets)
-            }
-
-            if (this.$refs.clone) {
-                (this.$refs.clone as HTMLElement).innerHTML = ''
-            }
-
-            const activeWidget = document.getElementById(this.draggedWidgetId)
-            if (activeWidget) {
-                activeWidget.style.visibility = 'visible'
-            }
-            this.draggedWidgetId = null
-            window.removeEventListener('mousemove', this.stopDragging)
-            window.removeEventListener('mousemove', this.handleMouseMove)
-        },
-        moveWidget(e: MouseEvent) {
-            const clone = this.$refs.clone as HTMLElement
-            clone.style.left = `${e.pageX - clone.offsetWidth / 2 - 5}px`
-            clone.style.top = `${e.pageY + 10}px`
-        },
-        removeWidget(widgetId: string) {
-            this.$emit(
-                'update:model-value',
-                this.modelValue.map((row: Widget[], rowIndex: number) =>
-                    row.filter((widget: Widget, widgetIndex: number) => {
-                        if (`${rowIndex}-${widgetIndex}` !== widgetId)
-                            return widget
-                        else this.$emit('remove', widget)
-                    })
-                )
-            )
-        },
-        handleMouseEnter(e: Event) {
-            this.dragTarget = e.target as HTMLElement
-            this.dragSide.previous =
-                (e as MouseEvent).x - this.dragTarget.offsetLeft <
-                this.dragTarget.offsetWidth / 2
-            if (
-                !this.isDragging ||
-                !(this.modelValue[this.currentRow].length < 3)
-            )
-                return
-
-            e.target.addEventListener('mousemove', this.handleMouseMove)
-            e.target.addEventListener('mouseleave', (e: Event) => {
-                clearTimeout(this.timer)
-                e.target.removeEventListener('mousemove', this.handleMouseMove)
-            })
-
-            this.timer = window.setTimeout(() => {
-                this.rearrangeWidgets()
-            }, 700)
-        },
-        handleMouseMove(e: Event) {
-            this.dragSide.current =
-                (e as MouseEvent).x - this.dragTarget.offsetLeft <
-                this.dragTarget.offsetWidth / 2
-            if (this.dragSide.current !== this.dragSide.previous) {
-                clearTimeout(this.timer)
-                this.handleMouseEnter(e)
-            }
-        },
-        rearrangeWidgets() {
-            if (
-                !this.draggedWidgetId ||
-                Number(this.draggedWidgetId[0]) == this.currentRow
-            )
-                return
-            const newTargetRow = this.modelValue[this.currentRow]
-            const newSourceRow =
-                this.modelValue[Number(this.draggedWidgetId[0])]
-            newTargetRow.splice(
-                this.dragSide.previous
-                    ? this.currentItem
-                    : this.currentItem + 1,
-                0,
-                this.draggedWidget
-            )
-            newSourceRow.splice(Number(this.draggedWidgetId[2]), 1)
-            const newWidgets = this.modelValue
-            newWidgets[this.currentRow] = newTargetRow
-            newWidgets[Number(this.draggedWidgetId[0])] = newSourceRow
-            this.isDragging = false
-            ;(this.$refs.clone as HTMLElement).innerHTML = ''
-            this.$emit('update:model-value', newWidgets)
-        }
-    }
-})
-</script>
-
-<style lang="scss" scoped>
-.dl-widget-grid {
-    display: flex;
-    flex-direction: column;
-
-    &__row {
-        display: flex;
-    }
-
-    &__clone {
-        position: absolute;
-        background-color: var(--dl-color-shadow);
-        outline: 1px solid var(--dl-color-separator);
-        visibility: hidden;
-        padding: 10px;
-        border-radius: 2px;
-
-        &--dragging {
-            visibility: visible;
-        }
-    }
-
-    &__item {
-        transition: 0.05s;
-        user-select: none;
-        outline: 1px solid var(--dl-color-separator);
-        border-radius: 2px;
-
-        &--dragging {
-            &:hover {
-                background-color: var(--dl-color-fill);
-            }
-        }
-
-        &--header {
-            display: flex;
-            justify-content: space-between;
-        }
-
-        &--titles {
-            display: flex;
-            flex-direction: column;
-            width: 45%;
-        }
-
-        &--menu {
-            width: 50%;
-            display: flex;
-            justify-content: flex-end;
-        }
-
-        &--drag-icon {
-            transform: rotate(90deg);
-            margin-top: -30px;
-            cursor: grab;
-        }
-
-        &--delete-icon {
-            cursor: pointer;
-        }
-
-        &--content {
-            width: 100%;
-            margin-bottom: 20px;
-            margin-top: 20px;
-            color: var(--dl-color-darker);
-        }
-
-        &--footer {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            margin-top: auto;
-        }
-    }
-}
-</style>

package/storybook.js

@@ -1,8 +0,0 @@
-const express = require('express')
-const app = express()
-const path = require('path')
-const PORT = 3000
-
-app.use(express.static(`${path.join(__dirname)}/storybook-static`))
-
-app.listen(PORT, () => console.log(`Server listening on port: ${PORT}`))