@demos-europe/demosplan-ui 0.3.21 → 0.3.24

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@demos-europe/demosplan-ui",
-  "version": "0.3.21",
+  "version": "0.3.24",
   "license": "MIT",
-  "private": false,
   "description": "Vue components, Vue directives, Design Token and Scss files to build interfaces for demosPlan.",
   "main": "./dist/demosplan-ui.umd.js",
   "dependencies": {
@@ -65,24 +64,35 @@
     "@storybook/addon-essentials": "7.6.17",
     "@storybook/addon-links": "7.6.17",
     "@storybook/addon-styling-webpack": "^0.0.6",
-    "@storybook/vue": "7.6.17",
+    "@storybook/blocks": "^7.0.27",
+    "@storybook/components": "^7.0.27",
+    "@storybook/core-events": "^7.0.27",
+    "@storybook/preview-api": "^7.0.27",
+    "@storybook/theming": "^7.0.27",
+    "@storybook/types": "^7.0.27",
     "@storybook/vue-webpack5": "7.6.17",
+    "@storybook/vue3": "^7.0.27",
+    "@types/eslint": "^9",
     "@types/jest": "^29.5.1",
     "@types/qs": "^6.9.7",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-service": "^5.0.8",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^1.3.5",
     "@vue/vue2-jest": "^29.2.4",
     "@webpack-cli/generators": "^3.0.0",
     "autoprefixer": "^10.4.14",
     "babel-core": "^7.0.0-bridge.0",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-vue-jsx": "^3.7.0",
     "css-loader": "^7.0.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.27.0",
     "glob": "^10.3.1",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.3.1",
@@ -94,6 +104,7 @@
     "postcss": "^8.4.26",
     "postcss-loader": "^8.0.0",
     "prop-types": "^15.8.1",
+    "prosemirror-model": "^1.18.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "7.6.17",
@@ -105,6 +116,7 @@
     "ts-jest": "^29.1.0",
     "ts-loader": "^9.4.4",
     "typescript": "~5.5.3",
+    "vue": "^2.7.15",
     "vue-jest": "^3.0.7",
     "vue-loader": "^15",
     "vue-template-compiler": "^2.7.15",
@@ -113,7 +125,7 @@
     "webpack-cli": "^5.0.0"
   },
   "engines": {
-    "node": ">= 18.13.0"
+    "node": ">= 18.19.0"
   },
   "peerDependencies": {
     "prosemirror-history": "^1.3.0",
@@ -154,7 +166,7 @@
   },
   "scripts": {
     "build:storybook": "storybook build",
-    "build:tokens": "node buildTokens.js",
+    "build:tokens": "node scripts/buildTokens.js",
     "prepack": "yarn build && yarn build:tokens",
     "storybook": "storybook dev -p 6006",
     "build": "yarn test && yarn build:prod",
@@ -162,5 +174,6 @@
     "build:prod": "webpack --mode=production --define-process-env-node-env=production",
     "test": "jest",
     "watch": "webpack --watch"
-  }
+  },
+  "packageManager": "yarn@4.2.2"
 }

package/scripts/buildTokens.js

@@ -0,0 +1,118 @@
+const glob = require('glob')
+const StyleDictionary = require('style-dictionary')
+const {
+  transformScssTokens,
+  transformTailwindTokens
+} = require('./utils/transformTokens')
+
+const prefix = 'dp-'
+
+const tokensPath = 'tokens/src/**/*.json'
+
+const files = glob
+  .sync(tokensPath)
+  .map(filePath => filePath
+    .replace('tokens/src/', '')
+    .replace('color/', '')
+    .replace('.json', ''))
+    .filter(filePath => !filePath.startsWith('_')) // Do not render tokens only used internally
+
+// Define custom output groups for Tailwind, rather than just grouping them by file path
+const corePlugins = ['fontSize', 'boxShadow', 'breakpoints', 'rounded', 'space', 'zIndex']
+const corePluginsColor = ['color', 'textColor', 'backgroundColor', 'borderColor']
+
+// Adds prefix to variables. Keeps uppercase path parts, which is needed later.
+StyleDictionary.registerTransform({
+  name: 'name/scss',
+  type: 'name',
+  transformer: (token) => prefix + token.path.join('-')
+})
+
+// Adds prefix transform to default scss transform group
+StyleDictionary.registerTransformGroup({
+  name: 'custom/scss',
+  transforms: StyleDictionary.transformGroup.scss.concat(['name/scss'])
+})
+
+// Adds prefix to variables. Keeps uppercase path parts, which is needed later.
+StyleDictionary.registerTransform({
+  name: 'name/web',
+  type: 'name',
+  transformer: (token) => token.path.join('-')
+})
+
+// Adds prefix transform to default scss transform group
+StyleDictionary.registerTransformGroup({
+  name: 'custom/web',
+  transforms: StyleDictionary.transformGroup.web.concat(['name/web'])
+})
+
+/**
+ * Custom format that generates javascript modules ready to be used as Tailwind config files.
+ * The values use a nested set of css variables to enable theming on multiple levels.
+ */
+StyleDictionary.registerFormat({
+  name: 'tailwind/variables',
+  formatter: (formatterArguments) => transformTailwindTokens(formatterArguments, corePluginsColor)
+})
+
+/**
+ * This format is a customized version of the implementation in `formattedVariables`.
+ * It applies some transformations to scss variables according to the conventions in demosplan-ui.
+ * See https://github.com/amzn/style-dictionary/blob/17f4cb2f30bd002dfd55d6ef8c5bee4138de8d64/lib/common/formatHelpers/formattedVariables.js#L46
+ */
+StyleDictionary.registerFormat({
+  name: 'scss/customVariables',
+  formatter: transformScssTokens
+})
+
+const StyleDictionaryExtended = StyleDictionary.extend({
+  source: [tokensPath],
+  platforms: {
+    js: {
+      transformGroup: 'js',
+      buildPath: 'tokens/dist/js/',
+      files: files.map((filePath) => {
+        return {
+          destination: `${filePath}.js`,
+          format: 'javascript/module',
+          filter: (token) => {
+            return token.filePath.includes(filePath) && token.$status !== 'Deprecated'
+          },
+          options: {
+            outputReferences: true
+          }
+        }
+      })
+    },
+    scss: {
+      transformGroup: 'custom/scss',
+      prefix,
+      buildPath: 'tokens/dist/scss/',
+      files: files
+        .map((filePath) => {
+          return {
+            destination: `_${filePath}.scss`,
+            format: 'scss/customVariables',
+            filter: (token) => token.filePath.includes(filePath),
+            options: {
+              outputReferences: true
+            }
+          }
+        })
+    },
+    web: {
+      transformGroup: 'custom/web',
+      prefix,
+      buildPath: 'tokens/dist/tailwind/',
+      files: [...corePlugins, ...corePluginsColor].map((plugin) => {
+        return {
+          destination: `${plugin}.js`,
+          format: 'tailwind/variables'
+        }
+      }),
+    },
+  }
+})
+
+StyleDictionaryExtended.buildAllPlatforms()

package/scripts/utils/transformTokens.js

@@ -0,0 +1,249 @@
+const StyleDictionary = require("style-dictionary");
+const {
+  createPropertyFormatter,
+  fileHeader,
+  sortByReference
+} = StyleDictionary.formatHelpers
+
+// Resolve token values with fallback, for css variables nesting
+const resolveValue = (token, dictionary) => {
+  let value = token.value
+  const seen = new Set()
+
+  while (dictionary.usesReference(value)) {
+    seen.add(value)
+    value = dictionary.getReferences(value)[0].value
+    if (seen.has(value)) break
+  }
+
+  return value
+}
+
+// Turn a dash-case-string into a lowerCamelString
+const dashToLowerCamel = (str) => {
+  return str.replace(/-([a-z])/g, function (g) {
+    return g[1].toUpperCase()
+  })
+}
+
+// Turn a lowerCamelString into a dash-case-string
+const lowerCamelToDash = (str) => {
+  return str.replace(/([A-Z])/g, '-$1').toLowerCase()
+}
+
+// Build Css variables chain to resolve aliases
+const transformTailwindTokenValue = (token, formatterArguments) => {
+  const { dictionary, platform } = formatterArguments
+  const varName = `--${platform.prefix}${transformTailwindTokenName(token, true).replace(/\./g, '-')}`
+  let fallback = resolveValue(token, dictionary)
+
+  let current = token
+  let cssVar = `var(${varName}`
+  while (current.original && current.original.value.startsWith('{')) {
+    const ref = dictionary.getReferences(current.original.value)[0]
+    let refName = transformTailwindTokenName(ref, true)
+    refName = `--${platform.prefix}${refName.replace(/\./g, '-')}`
+    cssVar += `, var(${refName}`
+
+    current = ref
+  }
+
+  // Add final fallback, close with brackets corresponding to the amount of "var" usages found
+  cssVar += `, ${fallback}` + ')'.repeat(cssVar.match(/var\(/g).length)
+
+  return cssVar
+}
+
+const transformTailwindTokensGrouped = (formatterArguments, corePluginsColor) => {
+  const { dictionary, file } = formatterArguments
+  const groupedTokens = {}
+
+  corePluginsColor.forEach(plugin => {
+    groupedTokens[plugin] = {}
+  })
+
+  dictionary.allTokens.forEach(token => {
+    // Do not include legacy ui and palette colors
+    if (token.path[0] !== 'color' || token.path[0] === 'color' && ['ui', 'palette'].includes(token.path[1])) {
+      return false
+    }
+
+    const tokenName = transformTailwindTokenName(token)
+    const replaced = transformTailwindTokenValue(token, formatterArguments)
+
+    // Sort token definition into respective group
+    corePluginsColor.forEach(plugin => {
+      if (token.path[2] === plugin || ['brand', 'data'].includes(token.path[1]) && plugin === 'color') {
+        groupedTokens[plugin][tokenName] = replaced
+      }
+    })
+  })
+
+  return `module.exports = ${JSON.stringify(groupedTokens[file.destination.replace('.js', '')], null, 2)};`
+}
+
+const isDestination = (file, token) => {
+  const filePart = file.destination.replace('.js', '')
+  const dashedTokenPath = dashToLowerCamel(token.path[0])
+  return dashedTokenPath === filePart
+}
+
+const isDeprecated = (token) => token['$status'] === 'Deprecated'
+
+const isTailwindExcluded = (token) => {
+  return token.path[0] === 'fontSize' && token.path[1] === 'scale'
+}
+
+const transformTailwindTokensFlat = (formatterArguments) => {
+  const { dictionary, file } = formatterArguments
+  const tokens = {}
+
+  dictionary.allTokens.forEach(token => {
+    if (!isDestination(file, token) || isDeprecated(token) || isTailwindExcluded(token)) {
+      return
+    }
+
+    const tokenName = transformTailwindTokenName(token)
+    tokens[tokenName] = transformTailwindTokenValue(token, formatterArguments)
+  })
+
+  return `module.exports = ${JSON.stringify(tokens, null, 2)};`
+}
+
+// Extract variable name from Scss variables declaration
+const getScssVariableName = (declaration) => {
+  const regex = /\$([\w.-]+)\s*:/
+  const match = declaration.match(regex)
+
+  if (match) {
+    return match[1]
+  }
+
+  return null
+}
+
+// Replace string in Scss variable name via regex
+const replaceScssVariableName = (declaration, searchRegex, replaceStr) => {
+  const variableName = getScssVariableName(declaration)
+  if (variableName) {
+    const updatedVariableName = variableName.replace(searchRegex, replaceStr)
+    return declaration.replace(variableName, updatedVariableName)
+  }
+
+  return declaration
+}
+
+// Transforms that apply to both Scss and Tailwind platforms
+const transformDeclarationDefault = (declaration, tokenPath) => {
+  // The domain part within font-size tokens should not be part of the variable name.
+  if (tokenPath[0] === 'fontSize') {
+    declaration = declaration.replace(/-(scale|brand|heading|ui)/g, '')
+  }
+
+  // The domain part within color tokens should not be part of the variable name.
+  if (tokenPath[0] === 'color') {
+    declaration = declaration.replace(/-(brand|data|palette|ui-tailwind|ui)/g, '')
+  }
+
+  return declaration
+}
+
+// Transforms that only apply to Tailwind token name
+const transformTailwindTokenName = (token, keepPluginName = false) => {
+  let declaration = token.name
+  const tokenPath = token.path
+
+  declaration = transformDeclarationDefault(declaration, tokenPath)
+
+  // Within css variable declarations, we want to keep plugin names
+  if (!keepPluginName) {
+    if (tokenPath[0] === 'color' || tokenPath[1] === 'ui-tailwind') {
+      declaration = declaration.replace(/color-/g, '')
+    }
+
+    if (tokenPath[0] === 'color' && tokenPath[1] === 'ui-tailwind') {
+      declaration = declaration.replace(/(textColor|backgroundColor|borderColor)-/g, '')
+    }
+
+    if (['boxShadow', 'breakpoints', 'fontSize', 'rounded', 'space', 'zIndex'].includes(tokenPath[0])) {
+      declaration = declaration.replace(/(boxShadow|breakpoints|fontSize|rounded|space|zIndex)-/g, '')
+    }
+  }
+
+  // Handle special cases with css var naming
+  if (tokenPath[1] === 'ui-tailwind' && tokenPath[2] !== 'color') {
+    declaration = declaration.replace(/color-/g, '')
+  } else if (tokenPath[1] === 'ui-tailwind' && tokenPath[2] === 'color') {
+    declaration = declaration.replace(/color-color-/g, 'color-')
+  }
+
+  // "DEFAULT" is a Tailwind convention which should not be part of the declaration key.
+  declaration = declaration.replace(/-DEFAULT/g, '')
+
+  return declaration
+}
+
+// Transforms that only apply to Scss platform
+const transformDeclarationScss = (declaration, tokenPath) => {
+  declaration = transformDeclarationDefault(declaration, tokenPath)
+
+  // The key "z-index" should be shortened in the variable name to match Tailwind syntax
+  if (tokenPath[0] === 'zIndex') {
+    declaration = declaration.replace(/(z-index|zIndex)-/g, 'z-')
+  }
+
+  // Scss does not like variable names with dots in them.
+  declaration = replaceScssVariableName(declaration, /\./g, '_')
+
+  // Where possible, the lowerCamel case is used for naming in token sources. In Scss, dash-case is the convention.
+  declaration = declaration.replace(/(fontSize|boxShadow|zIndex)/g, lowerCamelToDash)
+
+  // "DEFAULT" is a Tailwind convention that should not be part of the Scss name.
+  declaration = declaration.replace(/-DEFAULT/g, '')
+
+  return declaration
+}
+
+const transformScssTokens = ({dictionary, options, file}) => {
+  const { outputReferences, formatting } = options
+
+  let { allTokens } = dictionary
+
+  if (outputReferences) {
+    allTokens = [...allTokens].sort(sortByReference(dictionary))
+  }
+
+  const propertyFormatter = createPropertyFormatter({ outputReferences, dictionary, format: 'sass', formatting })
+
+  const tokens = allTokens
+    .map(token => {
+      /**
+       * Within color.ui.json, legacy tokens for scss and tailwind tokens are separated into two top-tier
+       * properties "ui" and "ui-tailwind". For Scss, only the tokens in the "ui" group should be rendered.
+       */
+      if (token.path[1] ===  'ui-tailwind') {
+        return
+      }
+
+      // First, the token is formatted with the default Scss propertyFormatter
+      const formattedTokenDeclaration = propertyFormatter(token)
+
+      // Then, our specific transforms are applied to each line.
+      return transformDeclarationScss(formattedTokenDeclaration, token.path)
+    })
+    .filter(function(strVal) { return !!strVal })
+    .join('\n')
+
+  return fileHeader({file, commentStyle: 'short'}) + '\n' + tokens + '\n'
+}
+
+const transformTailwindTokens =  (formatterArguments, corePluginsColor) => {
+  const { file } = formatterArguments
+  const isColorTokenFile = corePluginsColor.some(plugin => file.destination.startsWith(plugin))
+
+  return isColorTokenFile
+    ? transformTailwindTokensGrouped(formatterArguments, corePluginsColor)
+    : transformTailwindTokensFlat(formatterArguments)
+}
+
+module.exports = { transformScssTokens, transformTailwindTokens }

package/src/components/DpDataTable/DpDataTable.vue

@@ -34,8 +34,12 @@
         @toggle-expand-all="toggleExpandAll"
         @toggle-select-all="toggleSelectAll"
         @toggle-wrap-all="toggleWrapAll">
-        <template v-slot:[`header-${field}`] v-for="field in fields">
-          <slot :name="`header-${field}`" />
+        <template
+          v-for="field in headerFields"
+          v-slot:[`header-${field.field}`]="field">
+          <slot
+            :name="`header-${field.field}`"
+            v-bind="field" />
         </template>
       </dp-table-header>
       </thead>

package/src/components/DpDataTable/DpTableHeader.vue

@@ -33,14 +33,18 @@
         :header-field="hf"
         :next-header="headerFields[idx + 1]"
         :idx="idx">
-        <slot :name="`header-${hf.field}`">
+        <slot
+          :name="`header-${hf.field}`"
+          v-bind="hf">
           <span v-if="hf.label" v-text="hf.label" />
         </slot>
       </dp-resizable-column>
       <th
         v-else
         scope="col">
-        <slot :name="`header-${hf.field}`">
+        <slot
+          :name="`header-${hf.field}`"
+          v-bind="hf">
           <span v-if="hf.label" v-text="hf.label" />
         </slot>
       </th>

package/src/components/DpEditor/libs/editorCustomLink.js

@@ -22,6 +22,9 @@ export default Link.extend({
       },
       target: {
         default: null
+      },
+      class: {
+        default: null
       }
     }
   },

package/src/lib/DpApi.js

@@ -190,9 +190,9 @@ const checkResponse = function (response, messages) {
     if (response.status >= 400) {
       // @improve handle 404, 500 specially?
       reject(response.data)
-    } else if (response.status === 200) {
+    } else if (response.status >= 200 && response.status < 400) {
       // Got data!
-      resolve(response.data)
+      resolve(response.data ? response.data : null)
     } else {
       // Got no data
       resolve(null)

package/tailwind.config.js

@@ -1,43 +1,28 @@
 const plugin = require('tailwindcss/plugin')
 
-/**
- * Transform a StyleDictionary js module representation of the tokens object
- * into a simplified object to be consumable for the Tailwind config.
- * It filters out tokens that are aliases for other tokens.
- * @param tokens The original object
- * @return {{[p: string]: unknown}}
- */
-const tokensToTailwind = (tokens) => {
-  const tokensArray = Object.values(tokens)
-  const filteredTokens = tokensArray.filter(({ original }) => original.value.includes('{') === false)
-  return Object.fromEntries(filteredTokens.map(({ attributes, value }) => [attributes.type, value]))
+const tailwindTheme = {
+  borderRadius: require('./tokens/dist/tailwind/rounded'),
+  boxShadow: require('./tokens/dist/tailwind/boxShadow'),
+  fontSize: require('./tokens/dist/tailwind/fontSize'),
+  screens: require('./tokens/dist/tailwind/breakpoints'),
+  spacing: require('./tokens/dist/tailwind/space'),
+  zIndex: require('./tokens/dist/tailwind/zIndex'),
+  colors: require('./tokens/dist/tailwind/color')
 }
 
-const borderRadius = tokensToTailwind(require('./tokens/dist/js/rounded').rounded)
-const boxShadow = tokensToTailwind(require('./tokens/dist/js/boxShadow')['box-shadow'])
-const spacing = tokensToTailwind(require('./tokens/dist/js/space').space)
-const screens = tokensToTailwind(require('./tokens/dist/js/breakpoints').breakpoints)
-const zIndex = tokensToTailwind(require('./tokens/dist/js/zIndex')['z-index'])
+const tailwindCorePluginsColor = ['backgroundColor', 'borderColor', 'textColor']
 
-const colors = {
-  ...require('./tokens/dist/tailwind/color'),
-  ...require('./tokens/dist/tailwind/color.brand'),
-  ...require('./tokens/dist/tailwind/color.data'),
-}
-
-const backgroundColor = {
-  ...colors,
-  ...require('./tokens/dist/tailwind/backgroundColor'),
-}
-
-const borderColor = {
-  ...colors,
-  ...require('./tokens/dist/tailwind/borderColor'),
-}
+tailwindCorePluginsColor.forEach(corePlugin => {
+  tailwindTheme[corePlugin] = {
+    ...tailwindTheme.colors,
+    ...require(`./tokens/dist/tailwind/${corePlugin}`)
+  }
+})
 
-const textColor = {
-  ...colors,
-  ...require('./tokens/dist/tailwind/textColor'),
+tailwindTheme.extend = {
+  flexShrink: {
+    2: '2'
+  }
 }
 
 module.exports = {
@@ -72,20 +57,5 @@ module.exports = {
       })
     })
   ],
-  theme: {
-    backgroundColor,
-    borderColor,
-    borderRadius,
-    boxShadow,
-    colors,
-    screens,
-    spacing,
-    textColor,
-    zIndex,
-    extend: {
-      flexShrink: {
-        2: '2'
-      }
-    }
-  }
+  theme: tailwindTheme
 }

package/tokens/dist/js/boxShadow.js

@@ -1,10 +1,10 @@
 /**
  * Do not edit directly
- * Generated on Mon, 22 Jul 2024 09:37:27 GMT
+ * Generated on Mon, 29 Jul 2024 13:31:38 GMT
  */
 
 module.exports = {
-  "box-shadow": {
+  "boxShadow": {
     "DEFAULT": {
       "$description": "Default elevation. Use for Cards + Buttons.",
       "value": "0 1px 4px rgb(0 0 0 / 22%), 0 1px 2px rgb(0 0 0 / 26%)",
@@ -20,11 +20,11 @@ module.exports = {
       },
       "name": "BoxShadowDefault",
       "attributes": {
-        "category": "box-shadow",
+        "category": "boxShadow",
         "type": "DEFAULT"
       },
       "path": [
-        "box-shadow",
+        "boxShadow",
         "DEFAULT"
       ]
     },
@@ -43,11 +43,11 @@ module.exports = {
       },
       "name": "BoxShadowMd",
       "attributes": {
-        "category": "box-shadow",
+        "category": "boxShadow",
         "type": "md"
       },
       "path": [
-        "box-shadow",
+        "boxShadow",
         "md"
       ]
     },
@@ -66,11 +66,11 @@ module.exports = {
       },
       "name": "BoxShadowLg",
       "attributes": {
-        "category": "box-shadow",
+        "category": "boxShadow",
         "type": "lg"
       },
       "path": [
-        "box-shadow",
+        "boxShadow",
         "lg"
       ]
     },
@@ -89,11 +89,11 @@ module.exports = {
       },
       "name": "BoxShadowXl",
       "attributes": {
-        "category": "box-shadow",
+        "category": "boxShadow",
         "type": "xl"
       },
       "path": [
-        "box-shadow",
+        "boxShadow",
         "xl"
       ]
     }

package/tokens/dist/js/breakpoints.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 22 Jul 2024 09:37:27 GMT
+ * Generated on Mon, 29 Jul 2024 13:31:38 GMT
  */
 
 module.exports = {