refactor: update switch component and add Splunk global context

src/common/components/atom/switch/switch.tsx

@@ -30,6 +30,7 @@ export const Switch = forwardRef((props: SwitchProps, ref: ForwardedRef<any>) =>
           {
             '!bg-primary': isChecked,
           },
+          className,
         )}
       >
         <div

src/common/fragment/components/switch.tsx

@@ -0,0 +1,54 @@
+/* eslint-disable react/display-name */
+import { CodeComponentMeta } from '@plasmicapp/host';
+import React from 'react';
+import SwitchPrimitive from '@/common/components/atom/switch';
+
+type SwitchType = {
+  onCheckedChange?: (checked: boolean) => void;
+  checked?: any;
+  disabled?: boolean;
+  className?: string;
+  name?: string;
+};
+
+export const Switch = (props: SwitchType) => {
+  const { checked, onCheckedChange, disabled, className, name } = props;
+  return (
+    <SwitchPrimitive
+      checked={checked}
+      onChange={e => onCheckedChange?.(e.target.checked)}
+      className={className}
+      disabled={disabled}
+      name={name}
+    />
+  );
+};
+
+export const switchMeta: CodeComponentMeta<SwitchType> = {
+  name: 'Switch',
+  displayName: 'Fragment/Switch',
+  importPath: '@/common/fragment/components/switch',
+  figmaMappings: [{ figmaComponentName: 'Switch' }],
+  props: {
+    checked: 'boolean',
+    disabled: 'boolean',
+    name: {
+      type: 'string',
+      advanced: true,
+      description: 'The HTML name of the switch',
+    },
+    onCheckedChange: {
+      type: 'eventHandler',
+      argTypes: [{ name: 'checked', type: 'boolean' }],
+    },
+  },
+  classNameProp: 'className',
+  states: {
+    checked: {
+      type: 'writable',
+      variableType: 'text',
+      valueProp: 'checked',
+      onChangeProp: 'onCheckedChange',
+    },
+  },
+};

src/common/fragment/splunk.tsx

@@ -0,0 +1,123 @@
+import React, { useMemo } from 'react';
+import { GlobalActionsProvider, GlobalContextMeta } from '@plasmicapp/host';
+
+type SplunkProps = React.PropsWithChildren<{
+  defaultApiHost: string;
+  defaultApiKey: string;
+}>;
+
+export const Splunk = ({ children, defaultApiHost, defaultApiKey }: SplunkProps) => {
+  const actions = useMemo(
+    () => ({
+      sendLog: async (data: Record<string, any>, apiHost?: string, apiKey?: string) => {
+        try {
+          const response = await fetch(`${apiHost ?? defaultApiHost}/services/collector`, {
+            method: 'POST',
+            headers: {
+              'Authorization': `Splunk ${apiKey ?? defaultApiKey}`,
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              sourcetype: '_json',
+              event: {
+                ...data,
+              },
+            }),
+          });
+          return response.json();
+        } catch (error) {
+          return undefined;
+        }
+      },
+      sendBatchLog: async (dataList: Record<string, any>[], apiHost?: string, apiKey?: string) => {
+        try {
+          const response = await fetch(`${apiHost ?? defaultApiHost}/services/collector`, {
+            method: 'POST',
+            headers: {
+              'Authorization': `Splunk ${apiKey ?? defaultApiKey}`,
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(
+              dataList.map(data => ({
+                sourcetype: '_json',
+                event: {
+                  ...data,
+                },
+              })),
+            ),
+          });
+          return response.json();
+        } catch (error) {
+          return undefined;
+        }
+      },
+    }),
+    [defaultApiKey, defaultApiHost],
+  );
+
+  return (
+    <GlobalActionsProvider contextName="Splunk" actions={actions}>
+      {children}
+    </GlobalActionsProvider>
+  );
+};
+
+export const splunkMeta: GlobalContextMeta<SplunkProps> = {
+  name: 'Splunk',
+  displayName: 'Fragment/Splunk',
+  props: {
+    defaultApiHost: {
+      type: 'string',
+      displayName: 'Default API Host',
+      defaultValueHint: 'https://mysplunkserver.example.com',
+    },
+    defaultApiKey: {
+      type: 'string',
+      displayName: 'Default API Key',
+    },
+  },
+  globalActions: {
+    sendLog: {
+      displayName: 'Send Log',
+      parameters: [
+        {
+          name: 'data',
+          displayName: 'Data',
+          type: 'object',
+        },
+        {
+          name: 'apiHost',
+          displayName: 'API Host (Optional)',
+          type: 'string',
+        },
+        {
+          name: 'apiKey',
+          displayName: 'API Key (Optional)',
+          type: 'string',
+        },
+      ],
+    },
+    sendBatchLog: {
+      displayName: 'Send Batch Log',
+      parameters: [
+        {
+          name: 'dataList',
+          displayName: 'Data List',
+          type: 'object',
+        },
+        {
+          name: 'apiHost',
+          displayName: 'API Host (Optional)',
+          type: 'string',
+        },
+        {
+          name: 'apiKey',
+          displayName: 'API Key (Optional)',
+          type: 'string',
+        },
+      ],
+    },
+  },
+  providesData: true,
+  importPath: '@/common/fragment/splunk',
+};

src/pages/fragment/index.tsx

@@ -6,6 +6,8 @@ import { Fragment, fragmentMeta } from '@/common/fragment/designSystemGlobalCont
 import { GrowthbookGlobalContext } from '@/common/fragment/growthbookGlobalContext';
 import { ApiRequest, apiRequestMeta } from '@/common/fragment/components/api-request';
 import { LayoutWithHeaderAndFooter } from '@/common/components/layouts/layoutWithHeaderAndFooter';
+import { Splunk, splunkMeta } from '@/common/fragment/splunk';
+import { Switch, switchMeta } from '@/common/fragment/components/switch';
 
 export default function PlasmicHost() {
   return <PlasmicCanvasHost />;
@@ -95,7 +97,10 @@ registerGlobalContext(GrowthbookGlobalContext, {
   importPath: '@/common/fragment/growthbookGlobalContext',
 });
 
+registerGlobalContext(Splunk, splunkMeta);
+
 registerComponent(ApiRequest as any, apiRequestMeta);
+registerComponent(Switch as any, switchMeta);
 
 registerComponent(LayoutWithHeaderAndFooter, {
   name: 'LayoutWithHeaderAndFooter',