@iress-oss/ids-mcp-server 6.0.0-alpha.0 → 6.0.0-alpha.1-canary-20251204014525-3f0dce4

package/generated/docs/components-input-recipes-docs.md

@@ -1,140 +0,0 @@
-[](#recipes)Recipes
-===================
-
-[](#percentage-formatting)Percentage formatting
------------------------------------------------
-
-You can use `IressInput` to display percentage formatting. When the field is focused, it can display the raw value, and when blurred, it can display the formatted percentage value.
-
-Feedback
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-import { IressInput } from '@iress-oss/ids-components';
-export const InputPercentage \= () \=> (
-  <IressInput<string | number\>
-    defaultValue\="0.5"
-    formatter\={(value \= '') \=> {
-      if (value \=== '') return '';
-      const numericValue \= Number(value);
-      if (Number.isNaN(numericValue)) {
-        return String(value) ?? '';
-      }
-      return new Intl.NumberFormat('en-AU', {
-        style: 'percent',
-      }).format(numericValue);
-    }}
-    type\="number"
-  /\>
-);
-
-Copy
-
-[](#using-with-react-hook-forms)Using with React Hook Forms
------------------------------------------------------------
-
-You can use `IressInput` with React Hook Forms quite easily. The recommended way is to use the [`Controller` component from react-hook-forms](https://www.react-hook-form.com/get-started/#IntegratingwithUIlibraries). However, you can use the `register` method directly, with a few customisations to cater for custom `ref` as seen in the code example here.
-
-Where possible, please use `IressFormField` within an [`IressForm` component](./?path=/docs/components-form--docs).
-
-Although you can use `IressInput` directly with React Hook Forms, we recommend using `IressFormField` within `IressForm` for a more integrated experience.
-
-Input using `{ Controller } from 'react-hook-forms'`
-
-Input using `{ register } = useForm()`
-
-Submit
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-import {
-  InputRef,
-  IressAlert,
-  IressButton,
-  IressInline,
-  IressInput,
-  IressLabel,
-  IressModal,
-  IressStack,
-  IressTable,
-} from '@iress-oss/ids-components';
-import { useState } from 'react';
-import { Controller, UseFormRegisterReturn, useForm } from 'react-hook-form';
-const registerInnerElement \= (register: UseFormRegisterReturn) \=> {
-  return {
-    ...register,
-    onClear: register.onChange,
-    ref: (ref: InputRef | null) \=> {
-      if (ref) {
-        register.ref(ref.input);
-      }
-    },
-  };
-};
-export const ReactHookFormsInput \= () \=> {
-  const { register, handleSubmit, control } \= useForm();
-  const \[data, setData\] \= useState<Record<string, string\> | undefined\>();
-  return (
-    // eslint-disable-next-line sonarjs/void-use -- This is a mock form submission
-    <form onSubmit\={void handleSubmit(setData)}\>
-      <IressStack gap\="md"\>
-        <IressAlert status\="info"\>
-          Although you can use <code\>IressInput</code\> directly with React Hook          Forms, we recommend using <code\>IressFormField</code\> within{' '}
-          <code\>IressForm</code\> for a more integrated experience.        </IressAlert\>
-        <IressInline gap\="md" verticalAlign\="middle"\>
-          <IressLabel htmlFor\="Controller"\>
-            Input using <code\>{\`{ Controller } from 'react-hook-forms'\`}</code\>
-          </IressLabel\>
-          <Controller
-            name\="Controller"
-            control\={control}
-            render\={({ field }) \=> (
-              <IressInput
-                {...field}
-                clearable
-                onClear\={field.onChange}
-                id\="firstName"
-              />
-            )}
-          />
-        </IressInline\>
-        <IressInline gap\="md" verticalAlign\="middle"\>
-          <IressLabel htmlFor\="register"\>
-            Input using <code\>{\`{ register } = useForm()\`}</code\>
-          </IressLabel\>
-          <IressInput
-            {...registerInnerElement(register('register'))}
-            clearable
-            id\="register"
-          />
-        </IressInline\>
-        <IressButton type\="submit"\>Submit</IressButton\>
-      </IressStack\>
-      {data && (
-        <IressModal
-          show\={!!data}
-          onShowChange\={(show) \=> !show && setData(undefined)}
-        \>
-          <IressTable
-            caption\="Submitted details"
-            rows\={Object.entries(data ?? {}).map((entry) \=> ({
-              name: entry\[0\],
-              value: JSON.stringify(entry\[1\], null, 2),
-            }))}
-          />
-        </IressModal\>
-      )}
-    </form\>
-  );
-};
-
-Copy
-
-On this page
-
-*   [Percentage formatting](#percentage-formatting)
-*   [Using with React Hook Forms](#using-with-react-hook-forms)