@dataloop-ai/components 0.16.44 → 0.16.46

package/.eslintrc.js

@@ -7,7 +7,8 @@ module.exports = {
         'eslint:recommended',
         'plugin:@typescript-eslint/recommended',
         'plugin:vue/recommended',
-        '@vue/typescript'
+        '@vue/typescript',
+        'plugin:storybook/recommended'
     ],
     plugins: ['eslint-plugin-member-order'],
     rules: {
@@ -130,7 +131,6 @@ module.exports = {
         'use-isnan': 'warn',
         'valid-typeof': 'off',
         'no-useless-escape': 'off',
-
         // New Rules
         '@typescript-eslint/ban-ts-comment': 'off',
         '@typescript-eslint/explicit-function-return-type': 'off',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.16.44",
+  "version": "0.16.46",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -38,13 +38,13 @@
   "devDependencies": {
     "@babel/core": "^7.17.9",
     "@mdx-js/react": "^2.1.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",
+    "@storybook/addon-actions": "^7.0.4",
+    "@storybook/addon-essentials": "^7.0.4",
+    "@storybook/addon-links": "^7.0.4",
+    "@storybook/addon-mdx-gfm": "^7.0.4",
+    "@storybook/client-api": "^7.0.4",
+    "@storybook/vue3": "^7.0.4",
+    "@storybook/vue3-vite": "^7.0.4",
     "@types/jsdom": "^16.2.14",
     "@types/node": "^18.7.18",
     "@types/resize-observer-browser": "^0.1.7",
@@ -61,6 +61,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-member-order": "^0.0.3",
     "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-storybook": "^0.6.11",
     "eslint-plugin-vue": "^8.6.0",
     "html-webpack-plugin": "^5.5.0",
     "jsdom": "^21.1.0",
@@ -69,7 +70,7 @@
     "prettier": "^2.6.2",
     "react": "^18.1.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.0.0-rc.5",
+    "storybook": "^7.0.4",
     "storybook-addon-themes": "^6.1.0",
     "typescript": "^4.5.4",
     "vite": "^4.1.4",

package/src/App.vue

@@ -1,52 +1,81 @@
 <template>
-    <DlThemeProvider :is-dark="isDarkMode">
-        <div style="display: flex">
-            <dl-typography
-                color="dl-color-medium"
-                size="h1"
-                variant="h1"
+    <DlThemeProvider :is-dark="darkMode">
+        <div
+            style="display: flex; width: 100%; align-items: center; align-content; center;"
+        >
+            <dl-typography
+                color="dl-color-medium"
+                variant="p"
+                style="margin: 10px 0px 20px 0px; width: 90%"
             >
-                Dataloop AI UI Library
+                <div
+                    style="
+                        background-image: url(https://dataloop.ai/wp-content/uploads/2020/03/logo.svg);
+                        width: 160px;
+                        height: 28px;
+                        display: inline-block;
+                    "
+                />
+                Components library
             </dl-typography>
-            <dl-button
-                v-if="!hasProps"
-                style="margin: 0 20px"
-                @click="toggleColorMode"
-            >
-                {{ (isDarkMode ? 'Light' : 'Dark') + ' theme' }}
-            </dl-button>
+            <div style="display: flex; align-items: center">
+                <dl-icon
+                    icon="icon-dl-light-theme"
+                    size="24px"
+                    :color="
+                        !darkMode ? 'dl-color-secondary' : 'dl-color-darker'
+                    "
+                />
+                <dl-switch
+                    v-model="darkMode"
+                    style="margin: 0 20px"
+                />
+                <dl-icon
+                    icon="icon-dl-dark-theme"
+                    size="20px"
+                    :color="darkMode ? 'dl-color-secondary' : 'dl-color-darker'"
+                />
+            </div>
         </div>
         <div class="layout-wrapper">
             <div class="sidebar">
                 <dl-search
-                    v-model="activeDemo"
+                    v-model="filterTerm"
                     style="margin-bottom: 5px"
                 />
+
+                <dl-button
+                    v-if="activeDemo"
+                    outlined
+                >
+                    <span style="text-transform: capitalize">
+                        Selected: {{ computeDemoName(activeDemo.name) }}
+                    </span>
+                </dl-button>
                 <dl-list
                     bordered
                     clickable
                     style="
+                        margin-top: 15px;
                         min-width: 200px;
                         height: 100%;
-                        height: calc(100vh - 60px);
+                        height: calc(100vh - 18vh);
                         overflow: auto;
                     "
                 >
                     <template #default="{ clickable }">
                         <dl-list-item
-                            v-for="(componentName, index) in Object.keys(
-                                demoState
-                            )"
-                            :key="componentName"
+                            v-for="(demo, index) in filteredDemos"
+                            :key="demo.name"
                             :bordered="index !== 0"
                             :clickable="clickable"
                             :class="
-                                componentName === activeDemo ? 'selected' : ''
+                                demo.name === activeDemo?.name ? 'selected' : ''
                             "
                             style="text-transform: capitalize"
-                            @click="setActiveDemo(componentName)"
+                            @click="setActiveDemo(demo)"
                         >
-                            {{ parseName(componentName) }}
+                            {{ computeDemoName(demo.name) }}
                         </dl-list-item>
                     </template>
                 </dl-list>
@@ -58,12 +87,18 @@
                         variant="h2"
                         style="text-transform: capitalize"
                     >
-                        {{ parseName(activeDemo) }} component
+                        {{
+                            activeDemo
+                                ? computeDemoName(activeDemo.name)
+                                : 'No selected'
+                        }}
+                        component
                     </dl-typography>
                 </div>
-                <component
-                    :is="demoState[activeDemo]"
-                    class="data-container"
+                <component
+                    :is="activeDemo.component"
+                    v-if="activeDemo"
+                    class="data-container"
                 />
             </div>
         </div>
@@ -71,17 +106,18 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue-demi'
+import { defineComponent, ref, computed, shallowRef } from 'vue-demi'
 import {
     DlThemeProvider,
     DlButton,
     DlListItem,
     DlList,
     DlTypography,
-    DlSearch
+    DlSearch,
+    DlSwitch,
+    DlIcon
 } from './components'
-import { demoState } from './demo'
-import { parseName } from './utils'
+import Demos from './demos'
 
 export default defineComponent({
     name: 'DlComponentsDemo',
@@ -91,44 +127,67 @@ export default defineComponent({
         DlListItem,
         DlList,
         DlTypography,
-        DlSearch
+        DlSearch,
+        DlSwitch,
+        DlIcon
     },
     props: {
-        isDark: { required: false, default: null, type: Boolean }
+        isDark: { required: false, default: false, type: Boolean }
     },
     setup(props) {
-        const hasProps = computed(() => props.isDark !== null)
-        const darkMode = ref(false)
-        const demos = Object.keys(demoState)
-        const activeDemo = ref(
-            window.localStorage.getItem('dl-active-demo') ?? demos[0] ?? ''
-        )
-        const setActiveDemo = (demo: string) => {
-            activeDemo.value = demo
+        const darkMode = ref(props.isDark)
+        const filterTerm = ref('')
+        const names = Object.keys(Demos)
+        const demos: {
+            name: string
+            component: any
+        }[] = names.map((n: string) => ({
+            name: n,
+            // @ts-ignore
+            component: Demos[n]
+        }))
 
-            if (demos.includes(demo)) {
-                window.localStorage.setItem('dl-active-demo', demo)
+        const filteredDemos = computed(() => {
+            if (!filterTerm.value || !filterTerm.value.length) {
+                return demos
             }
-        }
-        const toggleColorMode = () => {
-            darkMode.value = !darkMode.value
-        }
 
-        const isDarkMode = computed(() => {
-            if (hasProps.value) {
-                return props.isDark
-            }
-            return darkMode.value
+            return demos.filter((demo: { name: string; component: any }) => {
+                return demo.name
+                    .toLowerCase()
+                    .includes(filterTerm.value.toLowerCase())
+            })
         })
 
+        const activeDemo = shallowRef(
+            window.localStorage.getItem('dl-active-demo')
+                ? demos.find(
+                      (d) =>
+                          d.name ===
+                          window.localStorage.getItem('dl-active-demo')
+                  ) ?? null
+                : null
+        )
+
+        const setActiveDemo = (demo: { name: string; component: any }) => {
+            activeDemo.value = demo
+            filterTerm.value = ''
+            window.localStorage.setItem('dl-active-demo', demo.name)
+        }
+
+        const computeDemoName = (name: string) => {
+            return name.includes('Dl')
+                ? name.split('Demo')[0]
+                : 'Dl' + name.split('Demo')[0]
+        }
+
         return {
-            hasProps,
-            isDarkMode,
+            darkMode,
             activeDemo,
             setActiveDemo,
-            toggleColorMode,
-            demoState,
-            parseName
+            filterTerm,
+            filteredDemos,
+            computeDemoName
         }
     }
 })

package/src/assets/globals.scss

@@ -140,6 +140,7 @@ body {
     --dl-color-tooltip-background: #171723d9;
     --dl-color-text-darker-buttons: #171723;
     --dl-color-secondary: #3452FF;
+    --dl-color-secondary-opaque: #3452FF10;
     --dl-color-text-buttons: #FFFFFF;
     --dl-color-darker: #171723;
     --dl-color-medium: #767676;
@@ -189,6 +190,7 @@ body {
     --dl-color-tooltip-background: #ffffffd9;
     --dl-color-text-darker-buttons: #171723;
     --dl-color-secondary: #7C8CFF;
+    --dl-color-secondary-opaque: #7C8CFF10;
     --dl-color-text-buttons: #FFFFFF;
     --dl-color-darker: #ffffffcc;
     --dl-color-medium: #ffffff99;

package/src/components/basic/DlAlert/DlAlert.vue

@@ -93,7 +93,7 @@ export default defineComponent({
         },
         type: {
             type: String,
-            default: 'success',
+            required: true,
             validator: (value: string) =>
                 includes(['info', 'success', 'warning', 'error'], value)
         },

package/src/components/basic/DlButton/DlButton.vue

@@ -3,13 +3,14 @@
         :id="uuid"
         class="dl-button-container"
         style="pointer-events: none"
-        :style="cssButtonVars"
+        :style="[cssButtonVars, containerStyles]"
     >
         <button
             v-if="hasContent || hasIcon"
             :tabindex="tabIndex"
             :aria-disabled="disabled ? 'true' : 'false'"
             :disabled="disabled"
+            :style="[cssButtonVars, styles]"
             style="pointer-events: auto"
             class="dl-button"
             @click="onClick"
@@ -20,12 +21,11 @@
             >
                 {{ buttonLabel }}
             </dl-tooltip>
-            <span class="dl-button-content dl-anchor--skip">
+            <div class="dl-button-content dl-anchor--skip">
                 <dl-icon
                     v-if="hasIcon"
                     :size="iconSizePX"
                     :color="iconColor || textColor"
-                    :class="{ 'dl-button-icon': hasContent }"
                     :icon="icon"
                     :style="cssButtonVars"
                 />
@@ -33,12 +33,14 @@
                     v-if="hasLabel"
                     ref="buttonLabelRef"
                     class="dl-button-label"
-                    :class="{ 'dl-button-no-wrap': noWrap }"
+                    :class="{
+                        'dl-button-no-wrap': noWrap
+                    }"
                 >
                     {{ buttonLabel }}
                 </span>
                 <slot />
-            </span>
+            </div>
         </button>
         <dl-tooltip
             v-if="tooltip"
@@ -94,6 +96,7 @@ export default defineComponent({
         },
         iconColor: { type: String!, default: '' },
         padding: { type: String, default: '' },
+        margin: { type: String, default: '0 auto' },
         size: { type: String! as PropType<ButtonSizes>, default: 'm' },
         filled: { type: Boolean, default: true },
         round: { type: Boolean, default: false },
@@ -104,7 +107,8 @@ export default defineComponent({
         noWrap: Boolean,
         icon: { type: String, default: '' },
         overflow: { type: Boolean, default: false, required: false },
-        tooltip: { type: String, default: null, required: false }
+        tooltip: { type: String, default: null, required: false },
+        styles: { type: [Object, String, Array], default: null }
     },
     emits: ['click', 'mousedown'],
     setup() {
@@ -140,6 +144,9 @@ export default defineComponent({
         hasIcon(): boolean {
             return typeof this.icon === 'string' && this.icon !== ''
         },
+        containerStyles(): object {
+            return this.fluid ? { width: '100%' } : {}
+        },
         hasContent(): boolean {
             return !!this.$slots.default || this.hasLabel
         },
@@ -240,6 +247,7 @@ export default defineComponent({
                     : this.hasIcon && !this.hasContent
                     ? setIconPadding(this.size)
                     : setPadding(this.size),
+                '--dl-button-margin': this.margin,
                 '--dl-button-font-size': setFontSize(this.size),
                 '--dl-button-text-transform': this.uppercase
                     ? 'uppercase'
@@ -293,8 +301,10 @@ export default defineComponent({
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
 .dl-button {
     padding: var(--dl-button-padding);
+    margin: var(--dl-button-margin);
     border-radius: var(--dl-button-border-radius);
     text-transform: var(--dl-button-text-transform);
     font-family: 'Roboto', sans-serif;
@@ -313,25 +323,30 @@ export default defineComponent({
     vertical-align: middle;
     transition: all ease-in 0.15s;
     justify-content: center;
+
     &:active {
         transition: all ease-in 0.15s;
         color: var(--dl-button-text-color-pressed) !important;
         background-color: var(--dl-button-bg-pressed) !important;
         border-color: var(--dl-button-border-pressed) !important;
+
         & > span > i {
             transition: all ease-in 0.15s;
         }
     }
+
     &:hover:enabled:not(:active) {
         color: var(--dl-button-text-color-hover);
         background-color: var(--dl-button-bg-hover);
         border-color: var(--dl-button-border-hover);
+
         & .dl-button-label {
             transition: all ease-in 0.15s;
             color: var(--dl-button-color-hover);
         }
     }
 }
+
 .dl-button-content {
     display: flex;
     text-align: center;
@@ -344,10 +359,7 @@ export default defineComponent({
     z-index: 0;
     user-select: none !important;
     min-width: 1.5em;
-}
-
-.dl-button-icon {
-    margin: var(--dl-button-icon-margin, 0px 7px 0px 0px);
+    gap: var(--dl-button-gap, 7px);
 }
 
 .dl-button-container {

package/src/components/basic/DlCard/DlCard.vue

@@ -0,0 +1,217 @@
+<template>
+    <div
+        class="card"
+        :style="[{ width, height }, styles]"
+    >
+        <div
+            v-if="icon"
+            class="card--icon"
+        >
+            <dl-icon
+                :icon="icon.src"
+                :styles="icon?.styles"
+                :size="icon?.size || '50px'"
+                :color="icon?.color || 'var(--dl-color-darker)'"
+            />
+        </div>
+        <div
+            v-else-if="image"
+            class="card--image"
+        >
+            <img
+                :src="image.src"
+                :style="image?.styles"
+                :alt="image?.alt"
+            >
+        </div>
+        <div class="card--content">
+            <div>
+                <slot
+                    v-if="!!$slots.header"
+                    name="header"
+                />
+                <div
+                    v-else
+                    class="card--header"
+                >
+                    <span class="card--header_title">{{ title }}</span>
+                    <span class="card--header_shortcut">{{
+                        keyboardShortcut
+                    }}</span>
+                </div>
+                <slot
+                    v-if="!!$slots.content"
+                    name="content"
+                />
+                <span
+                    v-else
+                    class="card--content_text"
+                >{{ text }}</span>
+            </div>
+            <slot
+                v-if="!!$slots.footer"
+                name="footer"
+            />
+            <div
+                v-else
+                class="card--links"
+            >
+                <div
+                    v-for="(link, idx) in links"
+                    :key="idx"
+                    class="card--links_linkItem"
+                >
+                    <div class="card--links_linkItem_icon">
+                        <dl-icon
+                            v-if="link.icon"
+                            :icon="link.icon"
+                            size="12px"
+                        />
+                    </div>
+                    <div class="card--links_linkItem_link">
+                        <dl-link
+                            :external="!!link.external"
+                            :href="link.href"
+                            :newtab="!!link.newtab"
+                        >
+                            {{ link.title }}
+                        </dl-link>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue-demi'
+import { DlIcon } from '../../essential/DlIcon'
+import { DlLink } from '../../essential/DlLink'
+import { IconItem, ImageItem, LinkItem } from './types'
+
+export default defineComponent({
+    name: 'DlCard',
+    components: { DlLink, DlIcon },
+    props: {
+        image: {
+            type: Object as PropType<ImageItem>,
+            default: null
+        },
+        icon: {
+            type: Object as PropType<IconItem>,
+            default: null
+        },
+        title: {
+            type: String,
+            default: ''
+        },
+        text: {
+            type: String,
+            default: ''
+        },
+        keyboardShortcut: {
+            type: String,
+            default: ''
+        },
+        links: {
+            type: Array as PropType<LinkItem[]>,
+            default: () => Array as PropType<LinkItem[]>
+        },
+        height: {
+            type: String,
+            default: 'auto'
+        },
+        width: {
+            type: String,
+            default: '200px'
+        },
+        styles: {
+            type: [Object, String, Array],
+            default: null
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.card {
+    color: var(--dl-color-darker);
+    background-color: var(--dl-color-panel-background);
+    border: 1px solid var(--dl-color-separator);
+    border-radius: 2px;
+    pointer-events: auto;
+    box-shadow: 0px 5px 15px 0px var(--dl-color-shadow);
+
+    &--content {
+        padding: 16px 10px;
+        &_text {
+            font-size: 12px;
+            color: var(--dl-color-medium);
+        }
+    }
+
+    &--header {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+
+        &_title {
+            color: var(--dl-color-darker);
+            font-size: 14px;
+            line-height: 16px;
+            font-weight: 700;
+            margin-right: 10px;
+            margin-bottom: 10px;
+        }
+        &_shortcut {
+            color: #767676;
+            font-size: 10px;
+            line-height: 10px;
+            border-radius: 2px;
+            border: 1px solid #767676;
+            padding: 4px;
+            text-align: center;
+            margin-bottom: 10px;
+        }
+    }
+    &--links {
+        margin-top: 16px;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+
+        &_linkItem {
+            margin-right: 15px;
+            color: var(--dl-color-secondary);
+            font-size: 10px;
+            display: flex;
+            align-items: center;
+
+            &_icon {
+                margin-right: 7px;
+                vertical-align: middle;
+            }
+
+            &_link {
+                vertical-align: middle;
+            }
+        }
+    }
+    &--image {
+        width: 200px;
+        height: 100px;
+        overflow: hidden;
+        img {
+            width: 100%;
+        }
+    }
+    &--icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-top: 34px;
+        padding-bottom: 16px;
+        color: var(--dl-color-darker);
+    }
+}
+</style>