add color hash helper function/story and fix component description

Author: haschek

src/components/ColorField/ColorField.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import textFieldTest from "../TextField/stories/TextField.stories";
 
-import { ColorField } from "./ColorField";
+import { ColorField, ColorFieldProps } from "./ColorField";
 
 export default {
     title: "Forms/ColorField",
@@ -24,10 +24,46 @@ Default.args = {
 
 export const NoPalettePresets = Template.bind({});
 NoPalettePresets.args = {
+    ...Default.args,
     colorWeightFilter: [],
     paletteGroupFilter: [],
     allowCustomColor: true,
-    onChange: (e) => {
-        alert(e.target.value);
-    },
+};
+
+interface TemplateColorHashProps
+    extends Pick<ColorFieldProps, "onChange" | "allowCustomColor" | "colorWeightFilter" | "paletteGroupFilter"> {
+    stringForColorHashValue: string;
+}
+
+const TemplateColorHash: StoryFn<TemplateColorHashProps> = (args: TemplateColorHashProps) => (
+    <ColorField
+        allowCustomColor={args.allowCustomColor}
+        colorWeightFilter={args.colorWeightFilter}
+        paletteGroupFilter={args.paletteGroupFilter}
+        value={ColorField.calculateColorHashValue(args.stringForColorHashValue, {
+            allowCustomColor: args.allowCustomColor,
+            colorWeightFilter: args.colorWeightFilter,
+            paletteGroupFilter: args.paletteGroupFilter,
+        })}
+    />
+);
+
+/**
+ * Component provides a helper function to calculate a color hash from a text,
+ * that can be used as `value` or `defaultValue`.
+ *
+ * ```
+ * <ColorField value={ColorField.calculateColorHashValue("MyText")} />
+ * ```
+ *
+ * You can add `options` to set the config for the color palette filters.
+ * The same default values like on `ColorField` are used for them.
+ */
+export const ColorHashValue = TemplateColorHash.bind({});
+ColorHashValue.args = {
+    ...Default.args,
+    allowCustomColor: true,
+    colorWeightFilter: [300, 500, 700],
+    paletteGroupFilter: ["layout", "extra"],
+    stringForColorHashValue: "My text that will used to create a color hash as initial value.",
 };

src/components/ColorField/ColorField.tsx

@@ -29,7 +29,8 @@ export interface ColorFieldProps extends Omit<TextFieldProps, "invisibleCharacte
 }
 
 /**
- * Text input field.
+ * Color input field that provides resets from the configured color palette.
+ * Use `colorWeightFilter` and `paletteGroupFilter` to filter them.
  */
 export const ColorField = ({
     className = "",
@@ -164,4 +165,36 @@ export const ColorField = ({
     );
 };
 
+type calculateColorHashValueProps = Pick<
+    ColorFieldProps,
+    "allowCustomColor" | "colorWeightFilter" | "paletteGroupFilter"
+>;
+
+/**
+ * Simple helper function that provide simple access to color hash calculation.
+ * Using the same default values for the color palette filter.
+ */
+ColorField.calculateColorHashValue = (
+    text: string,
+    options: calculateColorHashValueProps = {
+        allowCustomColor: false,
+        colorWeightFilter: [100, 300, 700, 900],
+        paletteGroupFilter: ["layout"],
+    }
+) => {
+    const hash = utils.textToColorHash({
+        text,
+        options: {
+            returnValidColorsDirectly: options.allowCustomColor as boolean,
+            enabledColors: utils.getEnabledColorsFromPalette({
+                includePaletteGroup: options.paletteGroupFilter,
+                includeColorWeight: options.colorWeightFilter,
+                minimalColorDistance: 0,
+            }),
+        },
+    });
+
+    return hash ? hash : undefined;
+};
+
 export default ColorField;