Add UI component builder (#71)

* Add ui component builder

* fix import

Author: mattvagni

.changeset/plenty-crabs-sell.md

@@ -0,0 +1,5 @@
+---
+'@team-plain/typescript-sdk': minor
+---
+
+Add `uiComponent` builder so you can more easily create ui components for use with the API.

src/examples/createThread.ts

@@ -0,0 +1,61 @@
+import { PlainClient } from '../client';
+import { ComponentTextColor, ComponentTextSize } from '../graphql/types';
+import { uiComponent } from '../ui-components';
+
+export async function createThreadA() {
+  const client = new PlainClient({ apiKey: 'XXX' });
+
+  const res = await client.createThread({
+    title: 'Contact form',
+    customerIdentifier: {
+      customerId: 'c_123',
+    },
+    components: [
+      {
+        componentText: {
+          text: 'hello world',
+        },
+      },
+      {
+        componentText: {
+          text: 'hello world',
+          textColor: ComponentTextColor.Error,
+        },
+      },
+      {
+        componentText: {
+          text: 'hello world',
+          textSize: ComponentTextSize.M,
+        },
+      },
+    ],
+  });
+
+  if (res.error) {
+    console.error(res.error);
+  } else {
+    console.log(`Thread created with id=${res.data.thread.id}`);
+  }
+}
+
+export async function createThreadB() {
+  const client = new PlainClient({ apiKey: 'XXX' });
+
+  const res = await client.createThread({
+    title: 'Contact form',
+    customerIdentifier: {
+      customerId: 'c_123',
+    },
+    components: [
+      uiComponent.text({ text: 'hello world' }),
+      uiComponent.text({ text: 'hello world', color: 'ERROR' }),
+      uiComponent.text({ text: 'hello world', size: 'M' }),
+    ],
+  });
+
+  if (res.error) {
+    console.error(res.error);
+  } else {
+    console.log(`Thread created with id=${res.data.thread.id}`);
+  }
+}

src/index.ts

@@ -2,6 +2,8 @@
 
 export { PlainClient } from './client';
 
+export { uiComponent } from './ui-components';
+
 export {
   // Enums
   AttachmentType,

src/ui-components/badgeComponent.ts

@@ -0,0 +1,29 @@
+import { ComponentBadgeColor, type ComponentInput } from '../graphql/types';
+
+type Color = `${ComponentBadgeColor}`;
+
+function colorToEnum(color?: Color): ComponentBadgeColor | null {
+  if (!color) {
+    return null;
+  }
+  const map: Record<Color, ComponentBadgeColor> = {
+    BLUE: ComponentBadgeColor.Blue,
+    GREEN: ComponentBadgeColor.Green,
+    GREY: ComponentBadgeColor.Grey,
+    RED: ComponentBadgeColor.Red,
+    YELLOW: ComponentBadgeColor.Yellow,
+  };
+  return map[color];
+}
+
+/**
+ * Returns a ComponentInput which can be used with the API.
+ */
+export function badgeComponent(args: { label: string; color?: Color }): ComponentInput {
+  return {
+    componentBadge: {
+      badgeLabel: args.label,
+      badgeColor: colorToEnum(args.color),
+    },
+  };
+}

src/ui-components/containerComponent.ts

@@ -0,0 +1,12 @@
+import { type ComponentInput } from '../graphql/types';
+
+/**
+ * Returns a ComponentInput which can be used with the API.
+ */
+export function containerComponent(args: { content: ComponentInput[] }): ComponentInput {
+  return {
+    componentContainer: {
+      containerContent: args.content,
+    },
+  };
+}

src/ui-components/copyButtonComponent.ts

@@ -0,0 +1,13 @@
+import { type ComponentInput } from '../graphql/types';
+
+/**
+ * Returns a ComponentInput which can be used with the API.
+ */
+export function copyButtonComponent(args: { value: string; tooltip?: string }): ComponentInput {
+  return {
+    componentCopyButton: {
+      copyButtonValue: args.value,
+      copyButtonTooltipLabel: args.tooltip,
+    },
+  };
+}

src/ui-components/dividerComponent.ts

@@ -0,0 +1,28 @@
+import { ComponentDividerSpacingSize, type ComponentInput } from '../graphql/types';
+
+type Size = `${ComponentDividerSpacingSize}`;
+
+function spacingSizeToEnum(size?: Size): ComponentDividerSpacingSize | null {
+  if (!size) {
+    return null;
+  }
+  const map: Record<Size, ComponentDividerSpacingSize> = {
+    XL: ComponentDividerSpacingSize.Xl,
+    L: ComponentDividerSpacingSize.L,
+    M: ComponentDividerSpacingSize.M,
+    S: ComponentDividerSpacingSize.S,
+    XS: ComponentDividerSpacingSize.Xs,
+  };
+  return map[size];
+}
+
+/**
+ * Returns a ComponentInput which can be used with the API.
+ */
+export function dividerComponent(args: { spacingSize?: Size }): ComponentInput {
+  return {
+    componentDivider: {
+      dividerSpacingSize: spacingSizeToEnum(args.spacingSize),
+    },
+  };
+}

src/ui-components/index.test.ts

@@ -0,0 +1,59 @@
+import { describe, expect, test } from 'vitest';
+
+import { ComponentBadgeColor, ComponentTextColor, ComponentTextSize } from '../graphql/types';
+import { uiComponent } from '.';
+
+describe('ui components builder', () => {
+  test('basic example', () => {
+    expect([
+      uiComponent.text({ text: 'hello world' }),
+      uiComponent.text({ text: 'hello world', color: 'MUTED', size: 'S' }),
+    ]).toEqual([
+      {
+        componentText: {
+          text: 'hello world',
+          textColor: null,
+          textSize: null,
+        },
+      },
+      {
+        componentText: {
+          text: 'hello world',
+          textColor: ComponentTextColor.Muted,
+          textSize: ComponentTextSize.S,
+        },
+      },
+    ]);
+  });
+
+  test('container component', () => {
+    expect([
+      uiComponent.container({
+        content: [
+          uiComponent.text({ text: 'hello world' }),
+          uiComponent.badge({ label: 'success', color: 'GREEN' }),
+        ],
+      }),
+    ]).toEqual([
+      {
+        componentContainer: {
+          containerContent: [
+            {
+              componentText: {
+                text: 'hello world',
+                textColor: null,
+                textSize: null,
+              },
+            },
+            {
+              componentBadge: {
+                badgeLabel: 'success',
+                badgeColor: ComponentBadgeColor.Green,
+              },
+            },
+          ],
+        },
+      },
+    ]);
+  });
+});

src/ui-components/index.ts

@@ -0,0 +1,21 @@
+import { badgeComponent } from './badgeComponent';
+import { containerComponent } from './containerComponent';
+import { copyButtonComponent } from './copyButtonComponent';
+import { dividerComponent } from './dividerComponent';
+import { linkButtonComponent } from './linkButtonComponent';
+import { plainTextComponent } from './plainTextComponent';
+import { rowComponent } from './rowComponent';
+import { spacerComponent } from './spacerComponent';
+import { textComponent } from './textComponent';
+
+export const uiComponent = {
+  badge: badgeComponent,
+  container: containerComponent,
+  copyButton: copyButtonComponent,
+  divider: dividerComponent,
+  linkButton: linkButtonComponent,
+  plainText: plainTextComponent,
+  row: rowComponent,
+  spacer: spacerComponent,
+  text: textComponent,
+};

src/ui-components/linkButtonComponent.ts

@@ -0,0 +1,13 @@
+import { type ComponentInput } from '../graphql/types';
+
+/**
+ * Returns a ComponentInput which can be used with the API.
+ */
+export function linkButtonComponent(args: { label: string; url: string }): ComponentInput {
+  return {
+    componentLinkButton: {
+      linkButtonLabel: args.label,
+      linkButtonUrl: args.url,
+    },
+  };
+}