@appquality/unguess-design-system 3.1.51 → 3.1.53

package/.github/workflows/release.yml

@@ -34,7 +34,7 @@ jobs:
             yarn-deps-${{ hashFiles('yarn.lock') }}
       - name: Create Release
         env:
-          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.REPO_PAT }}
           #👇 npm token, see https://storybook.js.org/tutorials/design-systems-for-developers/react/en/distribute/ to obtain it
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+# v3.1.53 (Thu Nov 09 2023)
+
+#### 🐛 Bug Fix
+
+- Fix color swatch [#277](https://github.com/AppQuality/unguess-design-system/pull/277) ([@cannarocks](https://github.com/cannarocks) [@marcbon](https://github.com/marcbon) [@iDome89](https://github.com/iDome89))
+- 🐛 fix(color-swatch): fix color selection bug in handleSelect function [#276](https://github.com/AppQuality/unguess-design-system/pull/276) ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 3
+
+- [@iDome89](https://github.com/iDome89)
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
+# v3.1.52 (Wed Nov 08 2023)
+
+#### 🐛 Bug Fix
+
+- 🔀 chore(color-swatch): update import statement for ColorSwatch component [#275](https://github.com/AppQuality/unguess-design-system/pull/275) ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 1
+
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v3.1.51 (Wed Nov 08 2023)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -24,8 +24,8 @@ var pie = require('@nivo/pie');
 var sunburst = require('@nivo/sunburst');
 var waffle = require('@nivo/waffle');
 var line = require('@nivo/line');
-require('@zendeskgarden/container-utilities');
-require('@zendeskgarden/react-colorpickers');
+var containerUtilities = require('@zendeskgarden/container-utilities');
+var reactColorpickers = require('@zendeskgarden/react-colorpickers');
 var reactModals = require('@zendeskgarden/react-modals');
 var reactDropdowns = require('@zendeskgarden/react-dropdowns');
 var reactForms = require('@zendeskgarden/react-forms');
@@ -2326,10 +2326,49 @@ const Trigger$1 = styled.styled.div `
   justify-content: flex-start;
   cursor: pointer;
 `;
-React__default["default"].forwardRef((props, ref) => {
+const StyledColorSwatchDialog = styled.styled(reactColorpickers.ColorSwatchDialog) `
+  ${({ disableTooltip }) => disableTooltip &&
+    `
+  & div[role="tooltip"] {
+    display: none;
+  }`}
+`;
+const ColorSwatchTrigger = React__default["default"].forwardRef((props, ref) => {
     var _a;
     return (jsxRuntime.jsx(Trigger$1, Object.assign({ ref: ref }, props, { style: Object.assign(Object.assign({}, props.style), { color: props.color }) }, { children: (_a = props.children) !== null && _a !== void 0 ? _a : jsxRuntime.jsx(SvgCircleFullFill, {}) })));
-});
+});
+const ColorSwatch = (_a) => {
+    var { colors, rowSize, children, onSelect } = _a, props = __rest(_a, ["colors", "rowSize", "children", "onSelect"]);
+    /**
+     * Convert the colors to the format expected by the ColorSwatchDialog
+     */
+    const cleanedColors = colors.map(({ label, value }) => {
+        return {
+            value,
+            label: label !== null && label !== void 0 ? label : "",
+        };
+    });
+    const matrix = containerUtilities.convertToMatrix(cleanedColors, rowSize !== null && rowSize !== void 0 ? rowSize : 7);
+    const [color, setColor] = React.useState(matrix[0][0].value);
+    const [rowIndex, setRowIndex] = React.useState(0);
+    const [colIndex, setColIndex] = React.useState(0);
+    const [selectedRowIndex, setSelectedRowIndex] = React.useState(0);
+    const [selectedColIndex, setSelectedColIndex] = React.useState(0);
+    const handleChange = (rowIdx, colIdx) => {
+        setRowIndex(rowIdx);
+        setColIndex(colIdx);
+    };
+    const handleSelect = (rowIdx, colIdx) => {
+        setSelectedRowIndex(rowIdx);
+        setSelectedColIndex(colIdx);
+    };
+    return (jsxRuntime.jsx(StyledColorSwatchDialog, Object.assign({ colors: matrix, onChange: handleChange, onSelect: (rowIdx, colIdx) => {
+            handleSelect(rowIdx, colIdx);
+            setColor(matrix[rowIdx][colIdx].value);
+            if (onSelect)
+                onSelect(matrix[rowIdx][colIdx].value);
+        }, rowIndex: rowIndex, colIndex: colIndex, selectedRowIndex: selectedRowIndex, selectedColIndex: selectedColIndex }, props, { children: jsxRuntime.jsx(ColorSwatchTrigger, Object.assign({ color: color }, { children: children })) })));
+};
 
 const UgDrawer = styled__default["default"](reactModals.DrawerModal) `
   @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
@@ -5796,6 +5835,7 @@ exports.Chrome = Chrome;
 exports.Close = Close;
 exports.Code = Code;
 exports.Col = Col;
+exports.ColorSwatch = ColorSwatch;
 exports.ContainerCard = ContainerCard;
 exports.Content = Content$1;
 exports.CounterMultiselect = CounterMultiselect;

package/build/stories/buttons/button/index.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ButtonArgs } from "./_types";
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;
 export declare const Basic: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;

package/build/stories/buttons/utils.d.ts

@@ -8,18 +8,18 @@ export declare const variants: readonly [{}, {
     readonly disabled: true;
 }];
 export declare const Row: import("styled-components").IStyledComponent<"web", {
-    alignItems?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsXs?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsSm?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsMd?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsLg?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsXl?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
-    justifyContent?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentXs?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentSm?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentMd?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentLg?: "start" | "center" | "end" | "between" | "around" | undefined;
-    justifyContentXl?: "start" | "center" | "end" | "between" | "around" | undefined;
+    alignItems?: "end" | "start" | "center" | "baseline" | "stretch" | undefined;
+    alignItemsXs?: "end" | "start" | "center" | "baseline" | "stretch" | undefined;
+    alignItemsSm?: "end" | "start" | "center" | "baseline" | "stretch" | undefined;
+    alignItemsMd?: "end" | "start" | "center" | "baseline" | "stretch" | undefined;
+    alignItemsLg?: "end" | "start" | "center" | "baseline" | "stretch" | undefined;
+    alignItemsXl?: "end" | "start" | "center" | "baseline" | "stretch" | undefined;
+    justifyContent?: "end" | "start" | "center" | "between" | "around" | undefined;
+    justifyContentXs?: "end" | "start" | "center" | "between" | "around" | undefined;
+    justifyContentSm?: "end" | "start" | "center" | "between" | "around" | undefined;
+    justifyContentMd?: "end" | "start" | "center" | "between" | "around" | undefined;
+    justifyContentLg?: "end" | "start" | "center" | "between" | "around" | undefined;
+    justifyContentXl?: "end" | "start" | "center" | "between" | "around" | undefined;
     wrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
     wrapXs?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
     wrapSm?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
@@ -73,7 +73,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
+    inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -299,18 +299,18 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     md?: string | number | boolean | undefined;
     lg?: string | number | boolean | undefined;
     xl?: string | number | boolean | undefined;
-    alignSelf?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfXs?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfSm?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfMd?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfLg?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfXl?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    textAlign?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignXs?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignSm?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignMd?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignLg?: "start" | "center" | "end" | "justify" | undefined;
-    textAlignXl?: "start" | "center" | "end" | "justify" | undefined;
+    alignSelf?: "auto" | "end" | "start" | "center" | "baseline" | "stretch" | undefined;
+    alignSelfXs?: "auto" | "end" | "start" | "center" | "baseline" | "stretch" | undefined;
+    alignSelfSm?: "auto" | "end" | "start" | "center" | "baseline" | "stretch" | undefined;
+    alignSelfMd?: "auto" | "end" | "start" | "center" | "baseline" | "stretch" | undefined;
+    alignSelfLg?: "auto" | "end" | "start" | "center" | "baseline" | "stretch" | undefined;
+    alignSelfXl?: "auto" | "end" | "start" | "center" | "baseline" | "stretch" | undefined;
+    textAlign?: "end" | "start" | "center" | "justify" | undefined;
+    textAlignXs?: "end" | "start" | "center" | "justify" | undefined;
+    textAlignSm?: "end" | "start" | "center" | "justify" | undefined;
+    textAlignMd?: "end" | "start" | "center" | "justify" | undefined;
+    textAlignLg?: "end" | "start" | "center" | "justify" | undefined;
+    textAlignXl?: "end" | "start" | "center" | "justify" | undefined;
     offset?: string | number | undefined;
     offsetXs?: string | number | undefined;
     offsetSm?: string | number | undefined;
@@ -370,7 +370,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
+    inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -640,7 +640,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
+    inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;

package/build/stories/color-swatch/_types.d.ts

@@ -1,12 +1,14 @@
 /// <reference types="react" />
-export interface ColorSwatchProps {
+import { IColorSwatchDialogProps } from "@zendeskgarden/react-colorpickers";
+export interface ColorSwatchProps extends Omit<IColorSwatchDialogProps, "colors" | "onSelect"> {
     colors: {
-        label: string;
+        label?: string;
         value: string;
     }[];
     rowSize?: number;
     children?: React.ReactNode | React.ReactNode[];
     onSelect?: (color: string) => void;
+    disableTooltip?: boolean;
 }
 export interface ColorSwatchTriggerProps {
     style?: React.CSSProperties;

package/build/stories/color-swatch/index.d.ts

@@ -1,3 +1,3 @@
 import { ColorSwatchProps } from "./_types";
-declare const ColorSwatch: ({ colors, rowSize, children, onSelect, }: ColorSwatchProps) => import("react/jsx-runtime").JSX.Element;
-export default ColorSwatch;
+declare const ColorSwatch: ({ colors, rowSize, children, onSelect, ...props }: ColorSwatchProps) => import("react/jsx-runtime").JSX.Element;
+export { ColorSwatch };

package/build/stories/color-swatch/index.stories.d.ts

@@ -1,4 +1,5 @@
 import { ColorSwatchProps } from "./_types";
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ColorSwatchProps>;
+export declare const WithoutLabels: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ColorSwatchProps>;
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ColorSwatchProps>;
 export default _default;

package/build/stories/dropdowns/select/index.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DropdownArgs, SelectArgs } from "./_types";
 import { MenuArgs } from "../menu/_types";
 interface IItem {

package/build/stories/editor/index.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { EditorArgs } from "./_types";
 interface EditorStoryArgs extends EditorArgs {
     children?: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.51",
+  "version": "3.1.53",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",