@dataloop-ai/components 0.13.19 → 0.14.4

package/.nvmrc

@@ -0,0 +1 @@
+v16.14.2

package/README.md

@@ -1,9 +1,11 @@
-# Dataloop Components Library ![components version](https://img.shields.io/npm/v/@dataloop-ai/components?label=Latest%20Library%20Version) ![release status](https://img.shields.io/badge/Relese%20Status-Beta-yellowgreen)
+# [Dataloop Components Library](https://dataloop-ai.github.io/components/) ![components version](https://img.shields.io/npm/v/@dataloop-ai/components?label=Latest%20Library%20Version) ![release status](https://img.shields.io/badge/Relese%20Status-Beta-yellowgreen)
 
 This repository contains custom made vue components for Dataloop platform and apps use
 
 The vue components are written in vue3 composition api and can be used in vue 2 projects as well as long as you install vue-demi
 
+You can see our documentation with our storybook link [here](https://dataloop-ai.github.io/components/)
+
 ## Development
 
 Working on this repo is simple as it already has hooks set up to guarantee high code quality

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.13.19",
+  "version": "0.14.4",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -11,18 +11,19 @@
     "dev:2": "./misc/packAndRunV2.sh",
     "build": "vue-tsc --noEmit --skipLibCheck && vite build",
     "preview": "vite preview",
-    "storybook": "start-storybook -p 6006",
-    "build:storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build:storybook": "storybook build",
     "lint": "eslint ./src --ext .ts,.vue ",
     "lint:fix": "eslint ./src --ext .ts,.vue --fix",
     "format": "prettier --write ./src",
     "lint-staged": "lint-staged",
-    "test": "jest --coverage true --run-in-band",
+    "test": "vitest run --coverage",
     "check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"
   },
   "dependencies": {
     "@dataloop-ai/icons": "^2.0.13",
     "@types/lodash": "^4.14.184",
+    "chart.js": "^3.9.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "sass": "^1.51.0",
@@ -36,13 +37,13 @@
   "devDependencies": {
     "@babel/core": "^7.17.9",
     "@mdx-js/react": "^2.1.1",
-    "@storybook/addon-actions": "^6.4.22",
-    "@storybook/addon-essentials": "^6.4.22",
-    "@storybook/addon-links": "^6.4.22",
-    "@storybook/builder-vite": "^0.4.2",
-    "@storybook/client-api": "^6.5.8",
-    "@storybook/vue3": "^6.4.22",
-    "@types/jest": "^27.4.1",
+    "@storybook/addon-actions": "^7.0.0-rc.5",
+    "@storybook/addon-essentials": "^7.0.0-rc.5",
+    "@storybook/addon-links": "^7.0.0-rc.5",
+    "@storybook/addon-mdx-gfm": "^7.0.0-rc.5",
+    "@storybook/client-api": "^7.0.0-rc.5",
+    "@storybook/vue3": "^7.0.0-rc.5",
+    "@storybook/vue3-vite": "^7.0.0-rc.5",
     "@types/jsdom": "^16.2.14",
     "@types/node": "^18.7.18",
     "@types/resize-observer-browser": "^0.1.7",
@@ -50,32 +51,33 @@
     "@typescript-eslint/eslint-plugin": "^5.20.0",
     "@typescript-eslint/parser": "^5.20.0",
     "@vitejs/plugin-vue": "^4.0.0",
+    "@vitest/coverage-c8": "^0.29.2",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
     "@vue/test-utils": "^2.0.0-rc.18",
     "babel-loader": "^8.2.4",
-    "canvas": "^2.9.1",
     "eslint": "^8.13.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-member-order": "^0.0.3",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.6.0",
     "html-webpack-plugin": "^5.5.0",
-    "jest": "^27.5.1",
-    "jsdom": "^19.0.0",
+    "jsdom": "^21.1.0",
     "lint-staged": "^12.3.8",
     "pre-commit": "^1.2.2",
     "prettier": "^2.6.2",
     "react": "^18.1.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.0.0-rc.5",
     "storybook-addon-themes": "^6.1.0",
-    "ts-jest": "^27.1.4",
     "typescript": "^4.5.4",
     "vite": "^4.1.4",
+    "vitest": "^0.29.2",
+    "vitest-canvas-mock": "^0.2.2",
     "vue": "^3.2.25",
     "vue-composition-test-utils": "^1.0.3",
     "vue-loader": "^16.8.3",
-    "vue-tsc": "^0.35.2",
-    "vue3-jest": "^27.0.0-alpha.2"
+    "vue-tsc": "^0.35.2"
   },
   "keywords": [],
   "author": "fadi@dataloop.ai",

package/src/assets/globals.scss

@@ -147,7 +147,7 @@ body {
     --dl-color-negative: #FF3434;
     --dl-color-negative-background: #FFEAEA;
     --dl-color-warning: #FFDA3A;
-    --dl-color-warning-background: #EEF1FF;
+    --dl-color-warning-background: #FFF7D6;
     --dl-color-positive: #039E49;
     --dl-color-positive-background: #E1FFF0;
     --dl-color-info-background: #F3F9FF;
@@ -160,7 +160,31 @@ body {
     --q-color-positive: #38D079;
     --q-color-warning: #E1B75B;
 
+    --dl-color-chart-brush: #EEF1FF;
+
     --dl-date-picker-shadow: 0px 3px 6px #101e7326;
+    --dl-date-picker-selected-strip: rgb(52, 82, 255, 0.2);
+
+    // chart
+    --dl-color-chart-1: #4DB1D3;
+    --dl-color-chart-2: #FF2F7A;
+    --dl-color-chart-3: #D4E3FF;
+    --dl-color-chart-4: #BECB5D;
+    --dl-color-chart-5: #839E30;
+    --dl-color-chart-6: #6B5935;
+    --dl-color-chart-7: #752B86;
+    --dl-color-chart-8: #BB96A3;
+    --dl-color-chart-9: #870F49;
+    --dl-color-chart-10: #CC566C;
+    --dl-color-chart-11: #F0A18C;
+    --dl-color-chart-12: #EDAB55;
+    --dl-color-chart-13: #FF5934;
+    --dl-color-chart-14: #9CD2E3;
+    --dl-color-chart-15: #928F80;
+    --dl-color-chart-16: #575567;
+    --dl-color-chart-17: #979797;
+    --dl-color-chart-18: #D9D9D9;
+    //
 
     // z-index
     --dl-z-index-panel: 3000; // panel & panel contaiener content
@@ -195,7 +219,6 @@ body {
     --dl-color-disabled: #ffffff40;
     --dl-color-fill: #ffffff40;
     --dl-color-fill-secondary: #F8F8F8;
-    
     --dl-color-fill-hover: #ffffff26;
     --dl-color-separator: #ffffff26;
     --dl-color-body-background: #24282D;
@@ -218,8 +241,10 @@ body {
     --q-color-positive: #A1E5B6;
     --q-color-warning: #F8D29A;
 
+    --dl-color-chart-brush: #475077;
 
     --dl-date-picker-shadow: 0px 3px 6px #292e3580;
+    --dl-date-picker-selected-strip: rgb(124, 140, 255, 0.2);
 }
 
 // scrollbar
@@ -250,4 +275,14 @@ html {
     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
-}
+}
+
+.flex-column {
+    flex-direction: column;
+}
+
+.flex-row {
+    flex-direction: row;
+}
+
+@import 'grid';

package/src/assets/grid.scss

@@ -0,0 +1,9 @@
+.grid {
+  display: grid;
+}
+.grid-cols-2 {
+  grid-template-columns: 1fr 1fr;
+}
+.grid-cols-3 {
+  grid-template-columns: 1fr 1fr 1fr;
+}

package/src/components/DlAccordion/DlAccordion.vue

@@ -4,7 +4,7 @@
         :class="identifierClass"
         class="accordion"
     >
-        <accordion-header
+        <dl-accordion-header
             :additional-info="additionalInfo"
             :default-opened="defaultOpened"
             :title="title"
@@ -21,7 +21,7 @@
             >
                 <slot name="header" />
             </template>
-        </accordion-header>
+        </dl-accordion-header>
         <div
             ref="dlAccordionContent"
             class="accordion-content"
@@ -33,14 +33,14 @@
 </template>
 
 <script lang="ts">
-import AccordionHeader from './AccordionHeader.vue'
+import DlAccordionHeader from './AccordionHeader.vue'
 import { defineComponent } from 'vue-demi'
 import { v4 } from 'uuid'
 
 export default defineComponent({
     name: 'DlAccordion',
     components: {
-        AccordionHeader
+        DlAccordionHeader
     },
     model: {
         prop: 'modelValue',

package/src/components/DlAlert.vue

@@ -15,7 +15,7 @@
                 <dl-icon
                     :icon="icon"
                     :color="iconColor"
-                    size="16px"
+                    size="24px"
                 />
             </div>
             <span
@@ -32,8 +32,7 @@
                 class="close-btn-icon"
                 data-test="close-btn-icon"
                 icon="icon-dl-close"
-                :color="iconColor"
-                size="8px"
+                size="12px"
                 @click="handleClose"
             />
         </div>
@@ -52,7 +51,7 @@ const typeToIconMap: Record<AlertType, string> = {
     info: 'icon-dl-info-filled',
     success: 'icon-dl-approve-filled',
     warning: 'icon-dl-alert-filled',
-    error: 'icon-dl-alert-filled'
+    error: 'icon-dl-error-filled'
 }
 
 const typeToIconColorMap: Record<AlertType, string> = {
@@ -200,7 +199,7 @@ export default defineComponent({
     > div {
         display: flex;
         flex-direction: row;
-        padding: 10px;
+        padding: 10px 10px 10px 16px;
     }
 
     .text {
@@ -213,7 +212,8 @@ export default defineComponent({
     }
 
     .close-btn {
-        padding: 5px 5px 0 0;
+        padding-right: 16px;
+        padding-left: 10px;
     }
 
     .icon-dl-close:hover {

package/src/components/DlChart/BrushThumb.vue

@@ -0,0 +1,83 @@
+<template>
+    <div
+        class="dl-thumb"
+        :style="rootStyles"
+        v-bind="$attrs"
+    >
+        <dl-icon
+            v-if="icon"
+            :color="iconColor"
+            :icon="icon"
+            :size="iconSize"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue-demi'
+import { getColor } from '../../utils'
+
+import { DlIcon } from '../'
+
+export default defineComponent({
+    name: 'DlBrushThumb',
+    components: {
+        DlIcon
+    },
+    props: {
+        icon: {
+            type: String,
+            default: null
+        },
+        iconSize: {
+            type: String,
+            default: '18px'
+        },
+        iconColor: {
+            type: String,
+            default: null
+        },
+        bgColor: {
+            type: String,
+            default: 'dl-color-secondary'
+        },
+        hoverBgColor: {
+            type: String,
+            default: 'dl-color-hover'
+        }
+    },
+    setup(props, { emit }) {
+        const rootStyles = computed(() => {
+            return {
+                '--icon-color': getColor(
+                    props.iconColor,
+                    'dl-color-text-buttons'
+                ),
+                '--bg-color': getColor(props.bgColor),
+                '--bg-color-hover': getColor(props.hoverBgColor)
+            }
+        })
+
+        return {
+            rootStyles
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-thumb {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--bg-color);
+    & > div {
+        display: flex !important;
+        justify-content: center;
+        align-items: center;
+    }
+    &:hover {
+        background-color: var(--bg-color-hover);
+    }
+}
+</style>