Merge pull request #452 from buildo/readonly-copy

Author: gabro

Diff for: packages/bento-design-system/src/BentoConfig.ts

@@ -25,6 +25,7 @@ import { MenuConfig } from "./Menu/Config";
 import { ModalConfig } from "./Modal/Config";
 import { NavigationConfig } from "./Navigation/Config";
 import { ProgressBarConfig } from "./ProgressBar/Config";
+import { ReadOnlyFieldConfig } from "./ReadOnlyField/Config";
 import { SearchBarConfig } from "./SearchBar/Config";
 import { DropdownConfig } from "./SelectField/Config";
 import { SliderConfig } from "./Slider/Config";
@@ -62,6 +63,7 @@ export type BentoConfig = {
   menu: MenuConfig;
   modal: ModalConfig;
   navigation: NavigationConfig;
+  readOnlyField: ReadOnlyFieldConfig;
   searchBar: SearchBarConfig;
   dropdown: DropdownConfig;
   table: TableConfig;

Diff for: packages/bento-design-system/src/Icons/IconCopyLight.tsx

@@ -0,0 +1,10 @@
+import { IconProps } from "./IconProps";
+import { svgIconProps } from "./svgIconProps";
+
+export function IconCopyLight(props: IconProps) {
+  return (
+    <svg {...svgIconProps(props)}>
+      <path d="M23.234 0L6.89362 0C6.69047 9.07076e-16 6.49565 0.0806988 6.352 0.224344C6.20836 0.367989 6.12766 0.562813 6.12766 0.765957L6.12766 6.12766L0.765957 6.12766C0.562813 6.12766 0.367989 6.20836 0.224344 6.352C0.0806988 6.49565 9.07076e-16 6.69047 0 6.89362L0 23.234C9.07076e-16 23.4372 0.0806988 23.632 0.224344 23.7757C0.367989 23.9193 0.562813 24 0.765957 24L17.1064 24C17.3095 24 17.5044 23.9193 17.648 23.7757C17.7916 23.632 17.8723 23.4372 17.8723 23.234L17.8723 17.8723L23.234 17.8723C23.4372 17.8723 23.632 17.7916 23.7757 17.648C23.9193 17.5044 24 17.3095 24 17.1064L24 0.765957C24 0.562813 23.9193 0.367989 23.7757 0.224344C23.632 0.0806988 23.4372 9.07076e-16 23.234 0ZM16.3404 22.4681L1.53191 22.4681L1.53191 7.65957L16.3404 7.65957L16.3404 22.4681ZM22.4681 16.3404L17.8723 16.3404L17.8723 6.89362C17.8723 6.69047 17.7916 6.49565 17.648 6.352C17.5044 6.20836 17.3095 6.12766 17.1064 6.12766L7.65957 6.12766L7.65957 1.53191L22.4681 1.53191L22.4681 16.3404Z" />
+    </svg>
+  );
+}

Diff for: packages/bento-design-system/src/Icons/index.ts

@@ -4,6 +4,7 @@ export * from "./IconChevronLeft";
 export * from "./IconChevronRight";
 export * from "./IconChevronUp";
 export * from "./IconClose";
+export * from "./IconCopyLight";
 export * from "./IconEdit";
 export * from "./IconEye";
 export * from "./IconEyeClosed";

Diff for: packages/bento-design-system/src/ReadOnlyField/Config.ts

@@ -0,0 +1,7 @@
+import { IconProps } from "../Icons";
+import { Children } from "../util/Children";
+
+export type ReadOnlyFieldConfig = {
+  copyIcon: (props: IconProps) => Children;
+  copyIconSize: IconProps["size"];
+};

Diff for: packages/bento-design-system/src/ReadOnlyField/ReadOnlyField.tsx

@@ -1,10 +1,25 @@
+import { useBentoConfig } from "../BentoConfigContext";
+import { IconButton } from "../IconButton/IconButton";
 import { TextField, TextFieldProps } from "../TextField/TextField";
+import { useToast } from "../Toast/useToast";
+import { LocalizedString } from "../util/ConfigurableTypes";
 import { Omit } from "../util/Omit";
 
 type Props = Omit<
   TextFieldProps,
   "onChange" | "onBlur" | "disabled" | "isReadOnly" | "placeholder" | "issues"
->;
+> &
+  (
+    | {
+        withCopyButton: true;
+        copyButtonLabel: LocalizedString;
+        copySuccessMessage: LocalizedString;
+        showToastOnCopy?: boolean;
+      }
+    | {
+        withCopyButton?: false;
+      }
+  );
 
 const constVoid = () => {};
 
@@ -13,7 +28,43 @@ const constVoid = () => {};
  * and doesn't require all those props that don't make sense for a read-only field (onChange, onBlur, placeholder, ...)
  */
 export function ReadOnlyField(props: Props) {
-  return <TextField {...props} onChange={constVoid} onBlur={constVoid} placeholder="" isReadOnly />;
+  const { showToast } = useToast();
+  const config = useBentoConfig().readOnlyField;
+
+  const rightAccessory = props.withCopyButton ? (
+    <IconButton
+      icon={config.copyIcon}
+      onPress={async () => {
+        if (props.showToastOnCopy ?? true) {
+          try {
+            await navigator.clipboard.writeText(props.value);
+            showToast({
+              kind: "informative",
+              message: props.copySuccessMessage,
+              dismissable: true,
+            });
+          } catch {
+            console.error("Could not copy to clipboard");
+          }
+        }
+      }}
+      kind="transparent"
+      hierarchy="secondary"
+      label={props.copyButtonLabel}
+      size={config.copyIconSize}
+    />
+  ) : undefined;
+
+  return (
+    <TextField
+      {...props}
+      onChange={constVoid}
+      onBlur={constVoid}
+      placeholder=""
+      isReadOnly
+      rightAccessory={rightAccessory}
+    />
+  );
 }
 
 export type { Props as ReadOnlyFieldProps };

Diff for: packages/bento-design-system/src/util/defaultConfigs.tsx

@@ -20,6 +20,7 @@ import {
   IconSpinner,
   IconEyeClosed,
   IconEye,
+  IconCopyLight,
 } from "../Icons";
 import type { ButtonConfig } from "../Button/Config";
 import type { CardConfig } from "../Card/Config";
@@ -52,6 +53,7 @@ import type { TooltipConfig } from "../Tooltip/Config";
 import type { InlineLoaderConfig } from "../InlineLoader/Config";
 import type { DecorativeDividerConfig } from "../Divider/Config";
 import type { DateFieldConfig } from "../DateField/Config";
+import { ReadOnlyFieldConfig } from "../ReadOnlyField/Config";
 
 export const actions: ActionsConfig = {
   primaryActionButtonKind: "solid",
@@ -389,6 +391,11 @@ export const navigation: NavigationConfig = {
   uppercaseLabel: false,
 };
 
+export const readOnlyField: ReadOnlyFieldConfig = {
+  copyIcon: IconCopyLight,
+  copyIconSize: 24,
+};
+
 export const searchBar: SearchBarConfig = {
   ...input,
   clearIcon: IconClose,

Diff for: packages/storybook/stories/Components/ReadonlyField.stories.tsx

@@ -21,3 +21,9 @@ export const Default = createStory({});
 export const Password = createStory({ type: "password" });
 
 export const RightAccessory = createStory({ rightAccessory: "👍" });
+
+export const WithCopyButton = createStory({
+  withCopyButton: true,
+  copyButtonLabel: "Copy to clipboard",
+  copySuccessMessage: "Copied to clipboard",
+});