docs(react-color-picker): added more stories (#33425)

Co-authored-by: Victor Genaev <[email protected]>

packages/react-components/react-color-picker-preview/stories/src/ColorPicker/ColorAndSwatchPicker.stories.tsx

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import { tinycolor } from '@ctrl/tinycolor';
+import { makeStyles, Button, SwatchPicker, EmptySwatch, ColorSwatch, Label, tokens } from '@fluentui/react-components';
+import {
+  ColorPicker,
+  ColorSlider,
+  AlphaSlider,
+  ColorPickerProps,
+  ColorArea,
+} from '@fluentui/react-color-picker-preview';
+import type { SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  example: {
+    width: '300px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '10px',
+  },
+  previewColor: {
+    width: '50px',
+    height: '50px',
+    borderRadius: tokens.borderRadiusMedium,
+    border: `1px solid ${tokens.colorNeutralStroke1}`,
+    margin: `${tokens.spacingVerticalMNudge} 0`,
+  },
+  button: {
+    marginRight: tokens.spacingHorizontalS,
+  },
+  input: {
+    display: 'block',
+    margin: `${tokens.spacingVerticalSNudge} 0`,
+  },
+  row: {
+    display: 'flex',
+    gap: '10px',
+    justifyContent: 'space-between',
+  },
+  sliders: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '80%',
+  },
+});
+
+const ITEMS_LIMIT = 8;
+const DEFAULT_SELECTED_VALUE = '2be700';
+const DEFAULT_SELECTED_COLOR = '#2be700';
+const DEFAULT_COLOR_HSV = tinycolor(DEFAULT_SELECTED_COLOR).toHsv();
+
+export const ColorAndSwatchPickerExample = () => {
+  const styles = useStyles();
+  const [color, setColor] = React.useState(DEFAULT_COLOR_HSV);
+  const [selectedValue, setSelectedValue] = React.useState(DEFAULT_SELECTED_VALUE);
+  const [selectedColor, setSelectedColor] = React.useState(DEFAULT_SELECTED_COLOR);
+
+  const colorFocusTargetRef = React.useRef<HTMLButtonElement>(null);
+  const [colorFocusTarget, setColorFocusTarget] = React.useState<string | null>(null);
+
+  const [items, setItems] = React.useState<Array<{ color: string; value: string; 'aria-label': string }>>([]);
+  const emptyItems = new Array(ITEMS_LIMIT - items.length).fill(null);
+
+  const handleChange: ColorPickerProps['onColorChange'] = (_, data) => {
+    setColor({ ...data.color, a: data.color.a ?? 1 });
+  };
+
+  const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {
+    setSelectedValue(data.selectedValue);
+    setSelectedColor(data.selectedSwatch);
+  };
+
+  const handleAddColor = () => {
+    const newColor = tinycolor(color).toRgbString();
+    const newValue = `custom-${newColor} [${items.length - ITEMS_LIMIT}]`;
+
+    setItems([...items, { color: newColor, value: newValue, 'aria-label': newColor }]);
+    setColorFocusTarget(newValue);
+  };
+
+  const resetColors = () => {
+    setItems([]);
+    setColorFocusTarget(null);
+    setSelectedValue(DEFAULT_SELECTED_VALUE);
+    setSelectedColor(DEFAULT_SELECTED_COLOR);
+    setColor(DEFAULT_COLOR_HSV);
+  };
+
+  React.useEffect(() => {
+    if (colorFocusTarget) {
+      colorFocusTargetRef.current?.focus();
+    }
+  }, [colorFocusTarget]);
+
+  return (
+    <div className={styles.example}>
+      <ColorPicker color={color} onColorChange={handleChange}>
+        <ColorArea />
+        <div className={styles.row}>
+          <div className={styles.sliders}>
+            <ColorSlider />
+            <AlphaSlider />
+          </div>
+          <div className={styles.previewColor} style={{ backgroundColor: tinycolor(color).toRgbString() }} />
+        </div>
+      </ColorPicker>
+      <SwatchPicker
+        aria-label="SwatchPicker with empty swatches"
+        selectedValue={selectedValue}
+        onSelectionChange={handleSelect}
+      >
+        {items.map(item => (
+          <ColorSwatch key={item.value} ref={item.value === colorFocusTarget ? colorFocusTargetRef : null} {...item} />
+        ))}
+        {emptyItems.map((_, index) => (
+          <EmptySwatch disabled key={index} aria-label="empty swatch" />
+        ))}
+      </SwatchPicker>
+      <Label>Selected color</Label>
+      <div className={styles.previewColor} style={{ backgroundColor: selectedColor }} />
+      <Button
+        id="add-new-color"
+        className={styles.button}
+        appearance="primary"
+        disabled={items.length >= ITEMS_LIMIT}
+        onClick={handleAddColor}
+      >
+        Add new color
+      </Button>
+      <Button id="reset-example" className={styles.button} onClick={resetColors}>
+        Reset example
+      </Button>
+    </div>
+  );
+};

packages/react-components/react-color-picker-preview/stories/src/ColorPicker/ColorPickerPopup.stories.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { tinycolor } from '@ctrl/tinycolor';
+import { makeStyles, Button, Popover, PopoverSurface, PopoverTrigger } from '@fluentui/react-components';
+import {
+  ColorPicker,
+  ColorSlider,
+  AlphaSlider,
+  ColorPickerProps,
+  ColorArea,
+} from '@fluentui/react-color-picker-preview';
+
+const useStyles = makeStyles({
+  example: {
+    width: '300px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '10px',
+  },
+  previewColor: {
+    margin: '10px 0',
+    width: '50px',
+    height: '50px',
+    borderRadius: '4px',
+    border: '1px solid #ccc',
+  },
+  row: {
+    display: 'flex',
+    gap: '10px',
+  },
+  sliders: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+});
+
+const DEFAULT_COLOR_HSV = tinycolor('#2be700').toHsv();
+
+export const ColorPickerPopup = () => {
+  const styles = useStyles();
+  const [previewColor, setPreviewColor] = React.useState(DEFAULT_COLOR_HSV);
+  const [color, setColor] = React.useState(DEFAULT_COLOR_HSV);
+
+  const handleChange: ColorPickerProps['onColorChange'] = (_, data) => {
+    setPreviewColor({ ...data.color, a: data.color.a ?? 1 });
+  };
+
+  const [popoverOpen, setPopoverOpen] = React.useState(false);
+
+  return (
+    <>
+      <Popover open={popoverOpen} trapFocus onOpenChange={(_, data) => setPopoverOpen(data.open)}>
+        <PopoverTrigger disableButtonEnhancement>
+          <Button>Choose color</Button>
+        </PopoverTrigger>
+
+        <PopoverSurface>
+          <ColorPicker color={previewColor} onColorChange={handleChange}>
+            <ColorArea />
+            <div className={styles.row}>
+              <div className={styles.sliders}>
+                <ColorSlider />
+                <AlphaSlider />
+              </div>
+              <div className={styles.previewColor} style={{ backgroundColor: tinycolor(previewColor).toRgbString() }} />
+            </div>
+          </ColorPicker>
+          <div className={styles.row}>
+            <Button
+              appearance="primary"
+              onClick={() => {
+                setColor(previewColor);
+                setPopoverOpen(false);
+              }}
+            >
+              Ok
+            </Button>
+            <Button
+              onClick={() => {
+                setPopoverOpen(false);
+              }}
+            >
+              Cancel
+            </Button>
+          </div>
+        </PopoverSurface>
+      </Popover>
+      <div className={styles.previewColor} style={{ backgroundColor: tinycolor(color).toRgbString() }} />
+    </>
+  );
+};

packages/react-components/react-color-picker-preview/stories/src/ColorPicker/index.stories.tsx

@@ -8,6 +8,8 @@ export { ColorPickerShape } from './ColorPickerShape.stories';
 export { ColorAreaExample } from './ColorAreaDefault.stories';
 export { ColorSliderExample } from './ColorSliderDefault.stories';
 export { AlphaSliderExample } from './AlphaSliderDefault.stories';
+export { ColorAndSwatchPickerExample } from './ColorAndSwatchPicker.stories';
+export { ColorPickerPopup } from './ColorPickerPopup.stories';
 
 export default {
   title: 'Preview Components/ColorPicker',