@gadmin2n/schematics 0.0.55

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/SearchBar.tsx

@@ -0,0 +1,294 @@
+import React from 'react';
+import { SearchOutlined } from '@ant-design/icons';
+import { Button, DatePicker, Form, FormProps, Input, Space } from 'antd';
+import { agentAttrs } from './agentPanel/agentAttributes';
+
+const { RangePicker } = DatePicker;
+
+export interface SearchBarField {
+  name: string;
+  type: 'keyword' | 'dateRange' | 'custom';
+  label?: string;
+  placeholder?: string;
+  component?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+export interface SearchBarRenderContext {
+  /** Form props from parent */
+  formProps: FormProps;
+  /** Fields configuration */
+  fields: SearchBarField[];
+  /** Translation function */
+  t: (key: string, defaultValue?: string) => string;
+  /** Resource name */
+  resourceName: string;
+  /** Render a single field */
+  renderField: (field: SearchBarField) => React.ReactNode;
+  /** Default submit button */
+  defaultSubmitButton: React.ReactNode;
+}
+
+export interface SearchBarProps {
+  formProps: FormProps;
+  fields?: SearchBarField[];
+  /** Translation function */
+  t?: (key: string, defaultValue?: string) => string;
+  /** Resource name for i18n keys */
+  resourceName?: string;
+  /** Default placeholder for keyword search */
+  searchPlaceholder?: string;
+  /** Submit button text */
+  submitText?: string;
+  /** Custom children - if provided as function, gives full control */
+  children?: React.ReactNode | ((context: SearchBarRenderContext) => React.ReactNode);
+
+  // Render props for fine-grained customization
+  /** Custom render for keyword input */
+  renderKeywordInput?: (field: SearchBarField, defaultInput: React.ReactNode) => React.ReactNode;
+  /** Custom render for date range picker */
+  renderDateRangePicker?: (field: SearchBarField, defaultPicker: React.ReactNode) => React.ReactNode;
+  /** Custom render for submit button */
+  renderSubmitButton?: (defaultButton: React.ReactNode) => React.ReactNode;
+  /** Custom render for field wrapper (Form.Item) */
+  renderFieldWrapper?: (field: SearchBarField, children: React.ReactNode) => React.ReactNode;
+  /** Extra fields to render before submit button */
+  extraFields?: React.ReactNode;
+  /** Extra actions to render after submit button */
+  extraActions?: React.ReactNode;
+  /** Show submit button */
+  showSubmitButton?: boolean;
+  /** Custom form wrapper - if false, renders without Form wrapper */
+  noFormWrapper?: boolean;
+}
+
+/**
+ * Reusable search bar component for list pages
+ *
+ * @example
+ * // Basic usage
+ * <SearchBar
+ *   formProps={searchFormProps}
+ *   t={t}
+ *   resourceName="audit"
+ * />
+ *
+ * @example
+ * // With custom render props
+ * <SearchBar
+ *   {...props}
+ *   renderKeywordInput={(field, defaultInput) => (
+ *     <MyCustomSearchInput placeholder={field.placeholder} />
+ *   )}
+ *   renderSubmitButton={(defaultButton) => (
+ *     <Space>
+ *       {defaultButton}
+ *       <Button onClick={handleReset}>Reset</Button>
+ *     </Space>
+ *   )}
+ *   extraActions={<Button onClick={handleAdvanced}>Advanced</Button>}
+ * />
+ *
+ * @example
+ * // Completely custom UI using children
+ * <SearchBar formProps={formProps}>
+ *   {({ fields, renderField, defaultSubmitButton }) => (
+ *     <MyCustomSearchLayout>
+ *       {fields.map(renderField)}
+ *       {defaultSubmitButton}
+ *     </MyCustomSearchLayout>
+ *   )}
+ * </SearchBar>
+ */
+export const SearchBar: React.FC<SearchBarProps> = ({
+  formProps,
+  fields,
+  t = (key, defaultValue) => defaultValue || key,
+  resourceName = '',
+  searchPlaceholder = '',
+  submitText,
+  children,
+  renderKeywordInput,
+  renderDateRangePicker,
+  renderSubmitButton,
+  renderFieldWrapper,
+  extraFields,
+  extraActions,
+  showSubmitButton = true,
+  noFormWrapper = false,
+}) => {
+  // Default fields if none provided
+  const defaultFields: SearchBarField[] = [
+    {
+      name: 'q',
+      type: 'keyword',
+      label: t(`resources.${resourceName}.search.q.title`, 'Search'),
+      placeholder: t(`resources.${resourceName}.search.q.placeholder`, searchPlaceholder),
+      style: { width: '100%', maxWidth: '300px' },
+    },
+    {
+      name: 'createdAt',
+      type: 'dateRange',
+      label: t(`resources.${resourceName}.fields.createdAt`, 'createdAt'),
+      style: { width: '100%', maxWidth: '400px' },
+    },
+  ];
+
+  const fieldsToRender = fields || defaultFields;
+
+  // Default submit button
+  const defaultSubmitButton = (
+    <Form.Item>
+      <Button htmlType="submit" type="primary">
+        {submitText || t('buttons.filter', 'Filter')}
+      </Button>
+    </Form.Item>
+  );
+
+  // Default field wrapper
+  const defaultFieldWrapper = (field: SearchBarField, children: React.ReactNode) => (
+    <Form.Item
+      key={field.name}
+      label={field.label}
+      name={field.name}
+      style={field.style}
+    >
+      {children}
+    </Form.Item>
+  );
+
+  // Render a single field
+  const renderField = (field: SearchBarField): React.ReactNode => {
+    if (field.type === 'custom' && field.component) {
+      const wrapper = renderFieldWrapper || defaultFieldWrapper;
+      return (
+        <React.Fragment key={field.name}>
+          {wrapper(field, field.component)}
+        </React.Fragment>
+      );
+    }
+
+    if (field.type === 'dateRange') {
+      const defaultPicker = <RangePicker />;
+      const picker = renderDateRangePicker
+        ? renderDateRangePicker(field, defaultPicker)
+        : defaultPicker;
+
+      const defaultLabel = field.label || t(`resources.${resourceName}.fields.${field.name}`, field.name);
+      const defaultStyle = field.style || { width: '100%', maxWidth: '400px' };
+
+      if (renderFieldWrapper) {
+        return (
+          <React.Fragment key={field.name}>
+            &nbsp;
+            {renderFieldWrapper({ ...field, label: defaultLabel, style: defaultStyle }, picker)}
+          </React.Fragment>
+        );
+      }
+
+      return (
+        <React.Fragment key={field.name}>
+          &nbsp;
+          <Form.Item
+            label={defaultLabel}
+            name={field.name}
+            style={defaultStyle}
+          >
+            {picker}
+          </Form.Item>
+        </React.Fragment>
+      );
+    }
+
+    // Default: keyword search
+    const defaultLabel = field.label || t(`resources.${resourceName}.search.${field.name}.title`, 'Search');
+    const defaultPlaceholder = field.placeholder || t(`resources.${resourceName}.search.${field.name}.placeholder`, searchPlaceholder);
+    const defaultStyle = field.style || { width: '100%', maxWidth: '300px' };
+
+    const defaultInput = (
+      <Input
+        placeholder={defaultPlaceholder}
+        prefix={<SearchOutlined />}
+      />
+    );
+
+    const input = renderKeywordInput
+      ? renderKeywordInput({ ...field, placeholder: defaultPlaceholder }, defaultInput)
+      : defaultInput;
+
+    if (renderFieldWrapper) {
+      return (
+        <React.Fragment key={field.name}>
+          {renderFieldWrapper({ ...field, label: defaultLabel, style: defaultStyle }, input)}
+        </React.Fragment>
+      );
+    }
+
+    return (
+      <Form.Item
+        key={field.name}
+        label={defaultLabel}
+        name={field.name}
+        style={defaultStyle}
+      >
+        {input}
+      </Form.Item>
+    );
+  };
+
+  // Build context for render function
+  const context: SearchBarRenderContext = {
+    formProps,
+    fields: fieldsToRender,
+    t,
+    resourceName,
+    renderField,
+    defaultSubmitButton,
+  };
+
+  // If children is a function, call it with context
+  if (typeof children === 'function') {
+    const content = children(context);
+    if (noFormWrapper) {
+      return <>{content}</>;
+    }
+    return <Form {...formProps}>{content}</Form>;
+  }
+
+  // If children is provided as ReactNode, render it directly
+  if (children) {
+    if (noFormWrapper) {
+      return <>{children}</>;
+    }
+    return <Form {...formProps}>{children}</Form>;
+  }
+
+  // Default rendering
+  const content = (
+    <Space wrap>
+      {fieldsToRender.map(renderField)}
+      {extraFields}
+      &nbsp;
+      {showSubmitButton && (
+        renderSubmitButton
+          ? renderSubmitButton(defaultSubmitButton)
+          : defaultSubmitButton
+      )}
+      {extraActions}
+    </Space>
+  );
+
+  if (noFormWrapper) {
+    return content;
+  }
+
+  return (
+    <div {...agentAttrs({ type: 'search-bar', resource: resourceName })}>
+      <Form {...formProps}>
+        {content}
+      </Form>
+    </div>
+  );
+};
+
+export default SearchBar;

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/VanillaJSONEditor/index.css

@@ -0,0 +1,10 @@
+.vanilla-jsoneditor-react {
+  display: flex;
+  flex: 1;
+}
+
+.vanilla-jsoneditor-container {
+  width: 700px;
+  /* height: 400px; */
+  display: flex;
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/VanillaJSONEditor/index.js

@@ -0,0 +1,53 @@
+import { JSONEditor } from "vanilla-jsoneditor";
+import { useEffect, useRef } from "react";
+import "./index.css";
+
+export default function SvelteJSONEditor(props) {
+  const refContainer = useRef(null);
+  const refEditor = useRef(null);
+
+  useEffect(() => {
+    // create editor
+    // console.log("create editor", refContainer.current);
+    refEditor.current = new JSONEditor({
+      target: refContainer.current,
+      props: {},
+    });
+
+    return () => {
+      // destroy editor
+      if (refEditor.current) {
+        // console.log("destroy editor");
+        refEditor.current.destroy();
+        refEditor.current = null;
+      }
+    };
+  }, []);
+
+  // update props
+  useEffect(() => {
+    if (refEditor.current && props) {
+      // console.log("update props", props);
+      refEditor.current.updateProps({
+        ...props,
+        content: {
+          json: undefined,
+          text: props.value || "",
+        },
+        onChange: (content) => {
+          if (content.text !== undefined) {
+            props.onChange(content.text);
+          } else if (content.json !== undefined) {
+            props.onChange(JSON.stringify(content.json));
+          }
+        },
+      });
+    }
+  }, [props]);
+
+  return (
+    <div className="vanilla-jsoneditor-container">
+      <div className="vanilla-jsoneditor-react" ref={refContainer}></div>
+    </div>
+  );
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/components/agentPanel/AgentContext.tsx

@@ -0,0 +1,201 @@
+import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { InspectedElementInfo } from './inspectorActions';
+
+export type PageType = 'list' | 'create' | 'edit' | 'show' | 'unknown';
+
+export interface PageInfo {
+  /** Resource name, e.g., 'user', 'audit' */
+  resourceName: string;
+  /** Page type */
+  pageType: PageType;
+  /** Full path */
+  path: string;
+}
+
+interface AgentContextValue {
+  /** Whether the agent panel is visible */
+  visible: boolean;
+  /** Open the agent panel */
+  open: () => void;
+  /** Close the agent panel */
+  close: () => void;
+  /** Toggle the agent panel */
+  toggle: () => void;
+  /** Current page info */
+  pageInfo: PageInfo;
+  /** Selected skill ID */
+  selectedSkillId: string | null;
+  /** Set selected skill */
+  setSelectedSkillId: (id: string | null) => void;
+  /** User's additional prompt */
+  userPrompt: string;
+  /** Set user prompt */
+  setUserPrompt: (prompt: string) => void;
+  /** Active tab */
+  activeTab: 'page' | 'project';
+  /** Set active tab */
+  setActiveTab: (tab: 'page' | 'project') => void;
+  /** Whether inspector overlay is active */
+  inspecting: boolean;
+  /** Enter inspect mode: close drawer, activate overlay */
+  startInspecting: () => void;
+  /** Exit inspect mode */
+  stopInspecting: () => void;
+  /** Info about the element selected by inspector */
+  inspectedElement: InspectedElementInfo | null;
+  /** Set inspected element info */
+  setInspectedElement: (info: InspectedElementInfo | null) => void;
+  /** Selected sub-skill ID (lifted from AgentPanel for inspector integration) */
+  selectedSubSkillId: string | null;
+  /** Set selected sub-skill */
+  setSelectedSubSkillId: (id: string | null) => void;
+}
+
+const AgentContext = createContext<AgentContextValue | null>(null);
+
+/**
+ * Parse current route to extract page info
+ * Supports nested routes like /system/game, /system/game/edit/123
+ */
+function parsePageInfo(pathname: string): PageInfo {
+  // Remove leading slash and split
+  const parts = pathname.replace(/^\//, '').split('/').filter(Boolean);
+
+  // Default values
+  let resourceName = '';
+  let pageType: PageType = 'unknown';
+
+  if (parts.length === 0) {
+    return { resourceName, pageType, path: pathname };
+  }
+
+  // Find the resource name and page type by scanning from the end
+  // URL patterns:
+  // /user                    -> resource: user, type: list
+  // /user/create             -> resource: user, type: create
+  // /user/edit/123           -> resource: user, type: edit
+  // /user/show/123           -> resource: user, type: show
+  // /system/game             -> resource: game, type: list
+  // /system/game/create      -> resource: game, type: create
+  // /system/game/edit/123    -> resource: game, type: edit
+
+  const lastPart = parts[parts.length - 1];
+  const secondLastPart = parts.length >= 2 ? parts[parts.length - 2] : null;
+
+  // Check if last part is a number (ID)
+  if (/^\d+$/.test(lastPart)) {
+    // URL ends with ID, check the part before it
+    if (secondLastPart === 'edit') {
+      pageType = 'edit';
+      resourceName = parts.length >= 3 ? parts[parts.length - 3] : '';
+    } else if (secondLastPart === 'show') {
+      pageType = 'show';
+      resourceName = parts.length >= 3 ? parts[parts.length - 3] : '';
+    } else if (secondLastPart === 'clone') {
+      pageType = 'edit'; // clone uses edit page
+      resourceName = parts.length >= 3 ? parts[parts.length - 3] : '';
+    } else {
+      // /user/123 pattern
+      pageType = 'show';
+      resourceName = secondLastPart || '';
+    }
+  } else if (lastPart === 'create') {
+    pageType = 'create';
+    resourceName = secondLastPart || '';
+  } else if (lastPart === 'edit' || lastPart === 'show' || lastPart === 'clone') {
+    // Shouldn't happen normally, but handle it
+    pageType = lastPart === 'clone' ? 'edit' : lastPart as PageType;
+    resourceName = secondLastPart || '';
+  } else {
+    // Last part is the resource name, it's a list page
+    pageType = 'list';
+    resourceName = lastPart;
+  }
+
+  return {
+    resourceName,
+    pageType,
+    path: pathname,
+  };
+}
+
+export const AgentProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const location = useLocation();
+  const [visible, setVisible] = useState(false);
+  const [selectedSkillId, setSelectedSkillId] = useState<string | null>(null);
+  const [userPrompt, setUserPrompt] = useState('');
+  const [activeTab, setActiveTab] = useState<'page' | 'project'>('page');
+  const [inspecting, setInspecting] = useState(false);
+  const [inspectedElement, setInspectedElement] = useState<InspectedElementInfo | null>(null);
+  const [selectedSubSkillId, setSelectedSubSkillId] = useState<string | null>(null);
+
+  const pageInfo = parsePageInfo(location.pathname);
+
+  const open = useCallback(() => setVisible(true), []);
+  const close = useCallback(() => setVisible(false), []);
+  const toggle = useCallback(() => setVisible((v) => !v), []);
+
+  const startInspecting = useCallback(() => {
+    setVisible(false);
+    setInspecting(true);
+  }, []);
+
+  const stopInspecting = useCallback(() => {
+    setInspecting(false);
+  }, []);
+
+  // Alt+I shortcut to toggle inspect mode
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.altKey && e.code === 'KeyI') {
+        e.preventDefault();
+        setInspecting((prev) => {
+          if (!prev) {
+            // entering inspect mode — close drawer
+            setVisible(false);
+          }
+          return !prev;
+        });
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  const value: AgentContextValue = {
+    visible,
+    open,
+    close,
+    toggle,
+    pageInfo,
+    selectedSkillId,
+    setSelectedSkillId,
+    userPrompt,
+    setUserPrompt,
+    activeTab,
+    setActiveTab,
+    inspecting,
+    startInspecting,
+    stopInspecting,
+    inspectedElement,
+    setInspectedElement,
+    selectedSubSkillId,
+    setSelectedSubSkillId,
+  };
+
+  return (
+    <AgentContext.Provider value={value}>{children}</AgentContext.Provider>
+  );
+};
+
+export function useAgent(): AgentContextValue | null {
+  const context = useContext(AgentContext);
+  // Return null instead of throwing error when not in AgentProvider
+  // This allows safe usage in production where AgentProvider is not rendered
+  return context;
+}
+
+export default AgentContext;