Merge pull request #861 from DNNCommunity/release/0.22.0

Merged `release/0.22.0` into `main` to release `v0.22.0`

_build/_build.csproj

@@ -11,7 +11,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Nuke.Common" Version="7.0.2" />
+    <PackageReference Include="Nuke.Common" Version="7.0.6" />
   </ItemGroup>
 
   <ItemGroup>

global.json

@@ -1,6 +1,6 @@
 {
   "sdk": {
-    "version": "7.0.302",
+    "version": "7.0.400-preview.23330.10",
     "rollForward": "latestMajor"
   }
 }

lerna.json

@@ -1,5 +1,4 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "useWorkspaces": true,
   "version": "0.0.0"
 }

package.json

@@ -11,7 +11,7 @@
   },
   "devDependencies": {
     "@types/node": "^20.5.1",
-    "lerna": "^6.6.1",
+    "lerna": "^7.3.0",
     "typescript": "^5.0.3"
   },
   "version": "1.2.3"

packages/react-library/lib/components/stencil-generated/index.ts

@@ -11,6 +11,7 @@ export const DnnButton = /*@__PURE__*/createReactComponent<JSX.DnnButton, HTMLDn
 export const DnnCheckbox = /*@__PURE__*/createReactComponent<JSX.DnnCheckbox, HTMLDnnCheckboxElement>('dnn-checkbox');
 export const DnnChevron = /*@__PURE__*/createReactComponent<JSX.DnnChevron, HTMLDnnChevronElement>('dnn-chevron');
 export const DnnCollapsible = /*@__PURE__*/createReactComponent<JSX.DnnCollapsible, HTMLDnnCollapsibleElement>('dnn-collapsible');
+export const DnnColorInput = /*@__PURE__*/createReactComponent<JSX.DnnColorInput, HTMLDnnColorInputElement>('dnn-color-input');
 export const DnnColorPicker = /*@__PURE__*/createReactComponent<JSX.DnnColorPicker, HTMLDnnColorPickerElement>('dnn-color-picker');
 export const DnnDropzone = /*@__PURE__*/createReactComponent<JSX.DnnDropzone, HTMLDnnDropzoneElement>('dnn-dropzone');
 export const DnnImageCropper = /*@__PURE__*/createReactComponent<JSX.DnnImageCropper, HTMLDnnImageCropperElement>('dnn-image-cropper');

packages/react-library/package.json

@@ -40,7 +40,7 @@
     "@storybook/blocks": "^7.0.5",
     "@storybook/react": "^7.0.5",
     "@storybook/react-webpack5": "^7.0.5",
-    "@storybook/testing-library": "^0.0.14-next.2",
+    "@storybook/testing-library": "^0.2.1",
     "@types/react": "^18.0.31",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

packages/stencil-library/.storybook/main.ts

@@ -1,29 +1,34 @@
-import type { StorybookConfig } from "@storybook/web-components-webpack5";
-
-const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-actions",
-    "@storybook/addon-a11y",
-    {
-      name: "@storybook/addon-docs",
-      options: {
-        configureJSX: true,
-        babelOptions: {},
-        sourceLoaderOptions: null,
-        transcludeMarkdown: true,
-      },
-    },
-  ],
-  framework: {
-    name: "@storybook/web-components-webpack5",
-    options: {},
-  },
-  staticDirs: [{ from: './assets', to: '/assets'}],
-  docs: {
-    autodocs: "tag",
-  },
-};
-export default config;
+import { dirname, join } from "path";
+import type { StorybookConfig } from "@storybook/web-components-webpack5";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-actions"),
+    getAbsolutePath("@storybook/addon-a11y"),
+    {
+      name: "@storybook/addon-docs",
+      options: {
+        configureJSX: true,
+        babelOptions: {},
+        sourceLoaderOptions: null,
+        transcludeMarkdown: true,
+      },
+    },
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/web-components-webpack5"),
+    options: {},
+  },
+  staticDirs: [{ from: './assets', to: '/assets'}],
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}

packages/stencil-library/custom-elements.json

@@ -318,6 +318,173 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/dnn-color-input/dnn-color-input.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "name": "dnn-color-input.tsx",
+          "tagName": "dnn-color-input",
+          "description": "A custom input component that allows previewing and changing a color value.",
+          "attributes": [
+            {
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets the initial color, must be a valid 8 character hexadecimal string without the # sign.",
+              "default": "\"000088\"",
+              "required": false
+            },
+            {
+              "name": "contrast-color",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets the initial contrast color, must be a valid 8 character hexadecimal string without the # sign.",
+              "default": "\"FFFFFF\"",
+              "required": false
+            },
+            {
+              "name": "dark-color",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets the initial dark color, must be a valid 8 character hexadecimal string without the # sign.",
+              "default": "\"0000044\"",
+              "required": false
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "description": "Defines the help label displayed under the field.",
+              "required": false
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "description": "The label for this input.",
+              "required": false
+            },
+            {
+              "name": "light-color",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets the initial light color, must be a valid 8 character hexadecimal string without the # sign.",
+              "default": "\"00000FF\"",
+              "required": false
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "description": "The name for this input, if not provided a random name will be assigned.",
+              "required": false
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Disables interacting with the component.",
+              "required": false
+            },
+            {
+              "name": "use-contrast-color",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the picker will allow selecting a contast color too.",
+              "required": false
+            },
+            {
+              "name": "use-dark-color",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the picker will allow selecting a dark color too.",
+              "required": false
+            },
+            {
+              "name": "use-light-color",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the picker will allow selecting a light color too.",
+              "required": false
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localization",
+              "type": {
+                "text": "{ contrast: string; preview: string; cancel: string; confirm: string; normal: string; light: string; dark: string; }"
+              },
+              "description": "Can be used to customize the text language.",
+              "default": "{\n    contrast: \"Contrast\",\n    preview: \"Preview\",\n    cancel: \"Cancel\",\n    confirm: \"Confirm\",\n    normal: \"Normal\",\n    light: \"Light\",\n    dark: \"Dark\",\n  }",
+              "required": false
+            }
+          ],
+          "events": [
+            {
+              "name": "colorChange",
+              "type": {
+                "text": "DnnColorInfo"
+              },
+              "description": "Fires when the color was changed and confirmed."
+            },
+            {
+              "name": "colorInput",
+              "type": {
+                "text": "DnnColorInfo"
+              },
+              "description": "Fires live as the user is trying color changes inside the modal."
+            }
+          ],
+          "slots": [
+            {
+              "name": "prefix",
+              "description": "Can be used to inject content before the input field."
+            },
+            {
+              "name": "suffix",
+              "description": "Can be used to inject content after the input field."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--background",
+              "description": "Defines the background color."
+            },
+            {
+              "name": "--contast-text-align",
+              "description": "Allows customizing the text alignment of the contast indicator text."
+            },
+            {
+              "name": "--control-radius",
+              "description": "Defines the radius for the control corners."
+            },
+            {
+              "name": "--focus-color",
+              "description": "Defines the color when the component is focused."
+            },
+            {
+              "name": "--foreground",
+              "description": "Defines the foreground color."
+            }
+          ],
+          "cssParts": []
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/dnn-color-picker/dnn-color-picker.tsx",

packages/stencil-library/licenses.json

@@ -10,6 +10,12 @@
         "path": "node_modules\\@stencil\\eslint-plugin",
         "licenseFile": "node_modules\\@stencil\\eslint-plugin\\LICENSE.md"
     },
+    "@typescript-eslint/[email protected]": {
+        "licenses": "BSD-2-Clause",
+        "repository": "https://github.com/typescript-eslint/typescript-eslint",
+        "path": "node_modules\\@typescript-eslint\\parser",
+        "licenseFile": "node_modules\\@typescript-eslint\\parser\\LICENSE"
+    },
     "[email protected]": {
         "licenses": "MIT",
         "repository": "https://github.com/eslint/eslint",