feat: add Noibu Help codes component in Makeswift

Author: abdullahtilal26

core/lib/makeswift/components.ts

@@ -14,6 +14,7 @@ import './components/site-header/register';
 import './components/site-theme/register';
 import './components/slideshow/register';
 import './components/sticky-sidebar/register';
+import './components/noibu/register';
 
 import { MakeswiftComponentType } from '@makeswift/runtime';
 

core/lib/makeswift/components/noibu/client.tsx

@@ -0,0 +1,51 @@
+interface NoibuHelpCodeProps {
+  style?: string;
+}
+
+interface NoibuRequestHelpCodeButtonProps {
+  text?: string;
+  style?: string;
+}
+
+interface NoibuRequestHelpCodeLabelProps {
+  style?: string;
+}
+
+function parseInlineStyle(style?: string): Record<string, string> {
+  const parsed: Record<string, string> = {};
+
+  if (style) {
+    style.split(';').forEach((rule) => {
+      const [prop, value] = rule.split(':');
+      if (prop && value && !prop.trim().includes('-')) {
+        parsed[prop.trim()] = value.trim();
+      }
+    });
+  }
+
+  return parsed;
+}
+
+export function NoibuAutomaticHelpCode({ style }: NoibuHelpCodeProps) {
+  return (
+    <div id="help-code-field" style={{ ...parseInlineStyle(style) }}>
+      &nbsp;
+    </div>
+  );
+}
+
+export function NoibuRequestHelpCodeButton({ text, style }: NoibuRequestHelpCodeButtonProps) {
+  return (
+    <button id="request-help-code" style={{ ...parseInlineStyle(style) }}>
+      {text || 'Request Help Code'}
+    </button>
+  );
+}
+
+export function NoibuRequestHelpCodeLabel({ style }: NoibuRequestHelpCodeLabelProps) {
+  return (
+    <div id="help-code-result" style={{ ...parseInlineStyle(style) }}>
+      &nbsp;
+    </div>
+  );
+}

core/lib/makeswift/components/noibu/register.tsx

@@ -0,0 +1,32 @@
+import { TextInput } from '@makeswift/runtime/controls';
+import { runtime } from '~/lib/makeswift/runtime';
+import {
+  NoibuAutomaticHelpCode,
+  NoibuRequestHelpCodeButton,
+  NoibuRequestHelpCodeLabel,
+} from './client';
+
+runtime.registerComponent(NoibuAutomaticHelpCode, {
+  type: 'Noibu - Automatic Help Code',
+  label: 'Noibu - Automatic Help Code',
+  props: {
+    style: TextInput({ label: 'Custom style (inline CSS)', defaultValue: '' }),
+  },
+});
+
+runtime.registerComponent(NoibuRequestHelpCodeButton, {
+  type: 'Noibu - Request Help Code Button',
+  label: 'Noibu - Request Help Code Button',
+  props: {
+    text: TextInput({ label: 'Button text', defaultValue: 'Request Help Code' }),
+    style: TextInput({ label: 'Custom style (inline CSS)', defaultValue: '' }),
+  },
+});
+
+runtime.registerComponent(NoibuRequestHelpCodeLabel, {
+  type: 'Noibu - Request Help Code Label',
+  label: 'Noibu - Request Help Code Label',
+  props: {
+    style: TextInput({ label: 'Custom style (inline CSS)', defaultValue: '' }),
+  },
+});