@qoretechnologies/reqraft 0.10.64 → 0.10.65-pr.137.g62fcecc

package/src/components/form/engine/__fixtures__/basicFormOptions.ts

@@ -1,309 +0,0 @@
-import { IQorusFormSchema } from '@qoretechnologies/ts-toolkit';
-import FileFieldArgSchema from '../../../../stories/Data/fileFieldArgSchema.json';
-
-/**
- * The schema + value behind `Form/Engine/FormEngine › Basic`. Extracted here so
- * the Basic story and the Subtle Edit Showcase render the *same* options — every
- * field type and state the real form exercises (allowed-values, multilevel hash,
- * nested arg_schema, file, date, rgbcolor, auto, list, messages, disabled,
- * readonly, depends_on, templates) — with no subset and no drift between them.
- */
-export const getBasicFormOptions = (allOptional = false): IQorusFormSchema => ({
-  basicOption: { type: 'string', ui_type: 'richtext', preselected: !allOptional },
-  optionWithDescription: {
-    type: 'string',
-    ui_type: 'richtext',
-    display_name: 'Option with description',
-    short_desc: 'Option with description',
-    desc: 'Option with markdown `description`\n\r ## Nice',
-    preselected: !allOptional,
-    supports_templates: true,
-  },
-  optionWithDefaultValue: {
-    type: 'file',
-    ui_type: 'file',
-    type_options: {
-      accept: {
-        'text/plain': ['.txt'],
-      },
-    },
-    display_name: 'Option with default value',
-    preselected: !allOptional,
-    supports_templates: true,
-    default_value: {
-      type: 'file',
-      value: {
-        name: 'file.txt',
-        size: 1234,
-        content: 'file content',
-      },
-    },
-  },
-  booleanOption: {
-    type: 'bool',
-    ui_type: 'bool',
-    display_name: 'Boolean option',
-    required: !allOptional,
-    default_value: { type: 'bool', value: true },
-    supports_templates: true,
-  },
-  optionWithShortDescription: {
-    type: 'list',
-    ui_type: 'list',
-    display_name: 'Option with short description',
-    short_desc: 'Option with short description',
-    required: !allOptional,
-    depends_on: ['basicOption', 'nonExistentOption'],
-    supports_templates: true,
-  },
-  hiddenOption: {
-    type: 'string',
-    ui_type: 'richtext',
-    display_name: 'I am hidden',
-    short_desc: 'I am hidden because I am not preselected or required',
-  },
-  preselectedOption: {
-    type: 'auto',
-    ui_type: 'richtext',
-    display_name: 'I am preselected',
-    short_desc: 'I am visible without any value because I am preselected',
-    preselected: true,
-  },
-  optionWithValue: {
-    type: 'string',
-    ui_type: 'richtext',
-    display_name: 'Option with value',
-    supports_templates: true,
-  },
-  optionWithInvalidValue: {
-    type: 'string',
-    ui_type: 'richtext',
-    display_name: 'Option with invalid value',
-  },
-  templateOption: {
-    type: 'string',
-    ui_type: 'string',
-    display_name: 'Template option',
-    supports_templates: true,
-  },
-  numberOption: {
-    type: 'int',
-    ui_type: 'number',
-    display_name: 'Number option',
-    preselected: !allOptional,
-    default_value: { type: 'int', value: 42 },
-  },
-  richTextOption: {
-    type: 'richtext',
-    ui_type: 'richtext',
-    display_name: 'Rich Text option',
-    supports_templates: true,
-  },
-  optionWithMessages: {
-    short_desc: 'Option with some messages',
-    preselected: !allOptional,
-    type: 'string',
-    ui_type: 'richtext',
-    display_name: 'Option with messages',
-    supports_templates: true,
-    messages: [
-      {
-        title: 'Success',
-        intent: 'success',
-        content: 'A successful message with title',
-      },
-      {
-        intent: 'danger',
-        content: 'A dangerous message',
-      },
-    ],
-  },
-  disabledOption: {
-    type: 'number',
-    ui_type: 'number',
-    display_name: 'Disabled option',
-    disabled: true,
-    preselected: !allOptional,
-  },
-  readOnlyOption: {
-    type: 'number',
-    ui_type: 'number',
-    display_name: 'Read only option with default value',
-    default_value: { type: 'number', value: 123 },
-    default_value_desc: 'Default value is 123',
-    readonly: true,
-    preselected: !allOptional,
-  },
-  readOnlyOptionWithValue: {
-    type: 'number',
-    ui_type: 'number',
-    display_name: 'Read only option with default value and value',
-    default_value: { type: 'number', value: 123 },
-    default_value_desc: 'Default value is 123',
-    default_value_display_name: 'The 123 value',
-    readonly: true,
-    preselected: !allOptional,
-  },
-  optionWithAllowedValuesCreatable: {
-    type: 'number',
-    ui_type: 'number',
-    display_name: 'Fillable option with allowed values',
-    allowed_values: [
-      {
-        display_name: 'Allowed value 1',
-        short_desc: 'Allowed value 1',
-        desc: 'Allowed value 1',
-        value: { type: 'number', value: 10 },
-      },
-      {
-        display_name: 'Allowed value 2',
-        short_desc: 'Allowed value 2',
-        desc: 'Allowed value 2',
-        value: { type: 'number', value: 20 },
-      },
-    ],
-    required: !allOptional,
-    supports_templates: true,
-    allowed_values_creatable: true,
-  },
-  optionWithBrokenAllowedValues: {
-    type: 'string',
-    ui_type: 'string',
-    supports_templates: true,
-    display_name: 'Option with allowed values',
-    allowed_values: [
-      {
-        display_name: 'Allowed value 1',
-        short_desc: 'Allowed value 1',
-        value: { type: 'string', value: 'abcde' },
-      },
-      // Testing invalid allowed value — missing display_name and wrong value type
-      {
-        value: { type: 'number', value: 12345 },
-        short_desc: 'Allowed value 2',
-      } as any,
-    ],
-    required: !allOptional,
-  },
-  selectedOption: {
-    type: 'hash',
-    ui_type: 'hash',
-    supports_templates: true,
-    required: true,
-    display_name: 'Selected option',
-    default_value: {
-      type: 'hash',
-      value: {
-        option1: { type: 'string', value: 'value1' },
-        option2: {
-          type: 'hash',
-          value: {
-            option3: { type: 'string', value: 'value3' },
-            option4: {
-              type: 'list',
-              value: [
-                { type: 'string', value: 'value4' },
-                { type: 'string', value: 'value5' },
-              ],
-            },
-          },
-        },
-      },
-    },
-  },
-  optionWithDependents: {
-    supports_templates: true,
-    type: 'date',
-    ui_type: 'date',
-    display_name: 'Option with dependents',
-    short_desc: 'Option with dependents',
-    has_dependents: true,
-    required: !allOptional,
-  },
-  colorOption: {
-    type: 'rgbcolor',
-    ui_type: 'rgbcolor',
-    required: true,
-    supports_templates: true,
-    default_value: { type: 'rgbcolor', value: { r: 255, g: 0, b: 0, a: 1 } },
-  },
-  schemaOption: {
-    supports_templates: true,
-    type: 'hash',
-    ui_type: 'hash',
-    preselected: !allOptional,
-    display_name: 'Schema Option',
-    short_desc: 'Option with nested arg_schema',
-    arg_schema: {
-      schemaOption1: {
-        type: 'file',
-        ui_type: 'file',
-        display_name: 'Schema option 1',
-        required: true,
-        arg_schema: FileFieldArgSchema as IQorusFormSchema,
-      },
-      schemaOption2: {
-        type: 'hash',
-        ui_type: 'hash',
-        display_name: 'Schema option with arg_schema',
-        required: true,
-        arg_schema: {
-          schemaOption3: {
-            type: 'string',
-            ui_type: 'string',
-            display_name: 'Schema option 3',
-            required: true,
-          },
-        },
-      },
-      optionWithAutoType: {
-        type: 'auto',
-        ui_type: 'auto',
-        display_name: 'Option with auto type',
-        default_value: { type: 'auto', value: 'allowed' },
-        required: true,
-      },
-    } as IQorusFormSchema,
-  },
-});
-
-/** The `value` the Basic story seeds the form with. */
-export const basicFormValue = {
-  optionWithValue: { type: 'string', value: '123' },
-  optionWithInvalidValue: { type: 'string', value: 123 as any },
-  readOnlyOptionWithValue: { type: 'number', value: 456 },
-  templateOption: { type: 'string', value: '$local:test' },
-  schemaOption: {
-    type: 'hash',
-    value: {
-      schemaOption2: {
-        type: 'hash',
-        value: {
-          schemaOption3: {
-            type: 'string',
-            value: 'test',
-          },
-        },
-      },
-    },
-  },
-  richTextOption: {
-    type: 'richtext',
-    value: [
-      {
-        type: 'paragraph',
-        children: [
-          { text: 'This is a rich text option ' },
-          {
-            type: 'tag',
-            label: 'Richtext Template',
-            value: '$local:some-richtext',
-            children: [{ text: '' }],
-          },
-          { text: '' },
-        ],
-      },
-    ],
-  },
-  colorOption: { type: 'rgbcolor', value: { r: 0, g: 0, b: 255, a: 1 } },
-};

package/src/components/form/engine/__fixtures__/fieldChromeOptions.ts

@@ -1,45 +0,0 @@
-// Shared field-chrome / meta schema bodies used by both the CompactFieldTypes
-// catalog and the CompactShowcase stress schema; each site decorates them
-// (group / preselected / extra messages) on top.
-
-// A tiny inline SVG logo so the `image` chrome examples need no network.
-export const FIXTURE_LOGO =
-  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%233b8eea'/%3E%3Ctext x='12' y='16' font-size='10' text-anchor='middle' fill='white'%3EQ%3C/text%3E%3C/svg%3E";
-
-export const chromeFieldBases = {
-  chromeIcon: {
-    type: 'string',
-    ui_type: 'string',
-    display_name: 'With icon',
-    icon: 'Database2Line',
-  },
-  chromeImage: {
-    type: 'string',
-    ui_type: 'string',
-    display_name: 'With image (logo)',
-    image: FIXTURE_LOGO,
-  },
-  chromeIntent: {
-    type: 'string',
-    ui_type: 'string',
-    display_name: 'With intent (danger)',
-    intent: 'danger',
-  },
-};
-
-export const metaFieldBases = {
-  metaSensitive: {
-    type: 'string',
-    ui_type: 'string',
-    display_name: 'Sensitive (masked)',
-    sensitive: true,
-  },
-  metaDefault: {
-    type: 'number',
-    ui_type: 'number',
-    display_name: 'Default-value note',
-    default_value: { type: 'number', value: 30 },
-    default_value_desc: 'Falls back to 30 seconds when unset.',
-    default_value_display_name: 'thirty',
-  },
-};

package/src/components/form/engine/_structuredData/SchemaDataView.stories.tsx

@@ -1,233 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { expect } from 'storybook/test';
-import { SchemaDataView } from './SchemaDataView';
-
-/**
- * The read-only rendering of a value described by an `arg_schema`.
- *
- * Rendered directly here rather than through a whole FormEngine: these stories
- * are about what the VIEW does with a described value, and mounting a form
- * around it only adds chrome that the form's own stories already cover.
- */
-const meta: Meta<typeof SchemaDataView> = {
-  title: 'Form/Engine/SchemaDataView',
-  component: SchemaDataView,
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** Auth-profile schemes: the first field is a CHOICE, so its heading is prose. */
-const SchemeSchema = {
-  type: {
-    type: 'string',
-    display_name: 'Scheme Type',
-    allowed_values: [
-      { value: 'default', display_name: 'Default RBAC' },
-      { value: 'cookie', display_name: 'Cookie' },
-    ],
-  },
-  cookie_name: { type: 'string', display_name: 'Session Cookie Name' },
-  redirect_url: { type: 'string', display_name: 'Redirect URL' },
-} as never;
-
-const schemeValue = [
-  { type: 'hash', value: { type: 'default' } },
-  {
-    type: 'hash',
-    value: {
-      type: 'cookie',
-      cookie_name: 'qorus-session',
-      redirect_url: 'https://example.com/login',
-    },
-  },
-];
-
-/** Service methods: the first field is a LITERAL, so its heading is mono. */
-const MethodSchema = {
-  name: { type: 'string', display_name: 'Method Name' },
-  desc: { type: 'string', display_name: 'Description' },
-} as never;
-
-const methodValue = [
-  { type: 'hash', value: { name: 'init', desc: 'init method' } },
-  { type: 'hash', value: { name: 'onOrderStatus', desc: 'returns the status of a single order' } },
-  { type: 'hash', value: { name: 'onConnect', desc: 'connection lifecycle hook' } },
-];
-
-/**
- * A schema whose hash values hold hash values of their own — three levels, not
- * one.
- *
- * Every other fixture here is a flat record, and a flat record cannot show what
- * this view does with depth: whether a nested level is legible, whether the
- * rules stack sensibly, whether a heading two levels down still reads as a
- * heading. Judging the treatment on a single `key: value` pair is what the
- * review said was impossible, and it was right.
- */
-const NestedSchema = {
-  name: { type: 'string', display_name: 'Endpoint' },
-  auth: {
-    type: 'hash',
-    display_name: 'Authentication',
-    arg_schema: {
-      scheme: {
-        type: 'string',
-        display_name: 'Scheme',
-        allowed_values: [
-          { value: 'oauth2', display_name: 'OAuth2' },
-          { value: 'basic', display_name: 'Basic' },
-        ],
-      },
-      token: {
-        type: 'hash',
-        display_name: 'Token',
-        arg_schema: {
-          url: { type: 'string', display_name: 'Token URL' },
-          ttl: { type: 'int', display_name: 'Lifetime (s)' },
-          rotate: { type: 'bool', display_name: 'Rotate Automatically' },
-        },
-      },
-    },
-  },
-  retry: {
-    type: 'hash',
-    display_name: 'Retry Policy',
-    arg_schema: {
-      attempts: { type: 'int', display_name: 'Attempts' },
-      backoff: { type: 'string', display_name: 'Backoff' },
-    },
-  },
-} as never;
-
-const nestedValue = [
-  {
-    type: 'hash',
-    value: {
-      name: 'POST /orders',
-      auth: {
-        scheme: 'oauth2',
-        token: {
-          url: 'https://auth.example.com/oauth2/token',
-          ttl: 3600,
-          rotate: true,
-        },
-      },
-      retry: { attempts: 3, backoff: 'exponential' },
-    },
-  },
-  {
-    // A second record that fills only part of the tree: the nested level is
-    // present but shallow, which is where "no data under the label" shows up.
-    type: 'hash',
-    value: {
-      name: 'GET /orders/{id}',
-      auth: { scheme: 'basic' },
-    },
-  },
-];
-
-const colors = { key: '#f1f0ee', muted: '#a0a0a0', border: '#a0a0a066', accent: '#3b8eea' };
-
-export const Schemes: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'A described list whose identifying field is a choice — each item is headed by the display name of that choice, in prose.',
-      },
-    },
-  },
-  args: { value: schemeValue, schema: SchemeSchema, colors },
-  play: async ({ canvasElement }) => {
-    const titles = [...canvasElement.querySelectorAll('.schema-view-item-title')].map((element) =>
-      (element.textContent ?? '').trim()
-    );
-    await expect(titles).toEqual(['Default RBAC', 'Cookie']);
-  },
-};
-
-export const ServiceMethods: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "A described list whose identifying field is a literal — each item is headed by the method's name, which keeps the mono face it has as a value.",
-      },
-    },
-  },
-  args: { value: methodValue, schema: MethodSchema, colors },
-  play: async ({ canvasElement }) => {
-    await expect(canvasElement.querySelectorAll('.schema-view-item-title')).toHaveLength(3);
-  },
-};
-
-export const Undescribed: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Keys the schema does not describe are still shown, under their raw name, after the described ones — a preview that dropped data would be worse than a raw tree.',
-      },
-    },
-  },
-  args: {
-    value: [{ type: 'hash', value: { type: 'cookie', legacy_flag: 'kept' } }],
-    schema: SchemeSchema,
-    colors,
-  },
-  play: async ({ canvasElement }) => {
-    await expect(canvasElement.textContent).toContain('legacy_flag');
-
-    // A field name renders on ONE line. The label column is measured from the
-    // longest name, and the label carries `overflow-wrap: anywhere` — so an
-    // under-measured column does not ellipsise, it breaks the name in half.
-    // That is exactly what happened when the labels became uppercase and the
-    // measurement was still in `ch`, which knows nothing about the tracking:
-    // `LEGACY_FLAG` came out over two lines.
-    //
-    // Asserted as geometry rather than as a width, because the width is the
-    // thing that keeps being wrong — the invariant is that the name fits.
-    const label = [...canvasElement.querySelectorAll<HTMLElement>('.schema-view-fields > *')].find(
-      (element) => (element.textContent ?? '').trim().toLowerCase() === 'legacy_flag'
-    );
-
-    await expect(label).toBeTruthy();
-
-    const lineHeight = parseFloat(getComputedStyle(label!).lineHeight) || 16;
-
-    await expect(label!.offsetHeight).toBeLessThan(lineHeight * 1.6);
-  },
-};
-
-/**
- * The deeper case: hash values holding hash values.
- *
- * Asked for in review because the flat fixtures could not answer whether the
- * treatment survives nesting — three levels here (endpoint → authentication →
- * token), plus a second record that stops after one, so a nested level with
- * nothing under it renders beside one that is full.
- */
-export const NestedSchemas: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'A described list whose records nest two levels deeper: an endpoint carrying an Authentication hash, which itself carries a Token hash of URL, lifetime and a bool. The second record fills only the first nested level, so a shallow branch sits next to a full one.',
-      },
-    },
-  },
-  args: { value: nestedValue, schema: NestedSchema, colors },
-  play: async ({ canvasElement }) => {
-    const titles = [...canvasElement.querySelectorAll('.schema-view-item-title')].map((element) =>
-      (element.textContent ?? '').trim()
-    );
-
-    await expect(titles).toEqual(['POST /orders', 'GET /orders/{id}']);
-    // The deepest level actually rendered: a label from the third tier, and the
-    // bool beneath it resolved to a word rather than printed as `true`.
-    await expect(canvasElement.textContent).toContain('Token URL');
-    await expect(canvasElement.textContent).toContain('Lifetime (s)');
-    await expect(canvasElement.textContent).not.toContain('[object Object]');
-  },
-};