@iress-oss/ids-mcp-server 5.15.0 → 6.0.0-alpha.1

package/generated/docs/components-toaster-docs.md

@@ -1,345 +0,0 @@
-[](#toaster)Toaster
-===================
-
-Overview
---------
-
-Toaster provide users with important, time-sensitive information.
-
-`IressToasterProvider` does not change the position on each render, it can only be done on the initial render.
-
-Show toast using provider
-
-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 {
-  IressButton,
-  IressToasterProvider,
-  IressToasterProviderProps,
-  useToaster,
-} from '@iress-oss/ids-components';
-const ToastWithTrigger \= () \=> {
-  const toaster \= useToaster();
-  return (
-    <IressButton
-      onClick\={() \=>
-        toaster.error({
-          heading: 'Error',
-          children:
-            'Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.',
-        })
-      }
-    \>
-      Show toast using provider    </IressButton\>
-  );
-};
-export const SimpleToasterExample \= () \=> (
-  <IressToasterProvider \>
-    <ToastWithTrigger />
-  </IressToasterProvider\>
-);
-
-Copy
-
-[](#controlling-toasts)Controlling toasts
------------------------------------------
-
-### [](#using-the-iresstoasterprovider)Using the `IressToasterProvider`
-
-The recommended way to create toasts is by using the `<IressToasterProvider />` alongside the `useToaster` hook. By using the `success`, `info` and `error` methods from the hook, you can trigger toasts in your application.
-
-To use, wrap your `<App/>` or the component that you want to use the `useToaster` hook with `<IressToasterProvider />`.
-
-`IressToasterProvider` does not change the position on each render, it can only be done on the initial render.
-
-Show toast using provider
-
-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 {
-  IressButton,
-  IressToasterProvider,
-  IressToasterProviderProps,
-  useToaster,
-} from '@iress-oss/ids-components';
-const ToastWithTrigger \= () \=> {
-  const toaster \= useToaster();
-  return (
-    <IressButton
-      onClick\={() \=>
-        toaster.error({
-          heading: 'Error',
-          children:
-            'Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.',
-        })
-      }
-    \>
-      Show toast using provider    </IressButton\>
-  );
-};
-export const SimpleToasterExample \= () \=> (
-  <IressToasterProvider \>
-    <ToastWithTrigger />
-  </IressToasterProvider\>
-);
-
-Copy
-
-### [](#closing-toasts-via-the-provider)Closing toasts via the provider
-
-If you want to dismiss a toast programmatically, you can use the `close` method from the `useToaster` hook. This method takes a toast ID as an argument, which is returned when you create a toast using the `useToaster` hook.
-
-Show toast using provider
-
-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 {
-  IressButton,
-  IressInline,
-  IressToasterProvider,
-  IressToasterProviderProps,
-  useToaster,
-} from '@iress-oss/ids-components';
-import { useState } from 'react';
-const ToastWithTrigger \= () \=> {
-  const toaster \= useToaster();
-  const \[lastToastId, setLastToastId\] \= useState<string | null\>(null);
-  return (
-    <IressInline gutter\="sm"\>
-      <IressButton        onClick={() \=> {
-          const toastId \= toaster.error({
-            heading: 'Error',
-            children:
-              'Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.',
-            onClose: () \=> {
-              setLastToastId(null);
-            },
-          });
-          setLastToastId(toastId);
-        }}
-      >        Show toast using provider      </IressButton\>
-      {lastToastId && (
-        <IressButton onClick\={() \=> toaster.close(lastToastId)}\>
-          Close the last toast opened        </IressButton\>
-      )}
-    </IressInline\>
-  );
-};
-export const CloseToastViaProvider \= () \=> (
-  <IressToasterProvider \>
-    <ToastWithTrigger />
-  </IressToasterProvider\>
-);
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#status)Status
-
-The toast offers three status that set a distinctive colour and icon. They can be set using the `status` prop. Their different use cases are described here.
-
-successerrorinfo
-
-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 {
-  IressButton,
-  IressInline,
-  IressToastProps,
-  IressToasterProps,
-  IressToasterProvider,
-  TOAST\_STATUS,
-  useToaster,
-} from '@iress-oss/ids-components';
-const ToastWithTrigger \= ({ status }: Pick<IressToastProps, 'status'\>) \=> {
-  const toaster \= useToaster();
-  return (
-    <IressButton
-      onClick\={() \=>
-        toaster\[status\]({ children: \`Hello, I am a ${status} toast\` })
-      }
-    \>
-      {status}
-    </IressButton\>
-  );
-};
-export const ToastStatuses \= (args: IressToasterProps) \=> (
-  <IressToasterProvider \>
-    <IressInline gutter\="sm"\>
-      {TOAST\_STATUS.map((status) \=> (
-        <ToastWithTrigger  status\={status} />
-      ))}
-    </IressInline\>
-  </IressToasterProvider\>
-);
-
-Copy
-
-### [](#timeout)Timeout
-
-By default, toasts will time out after six seconds, after which they will animate out of view. This can be customised using the `timeout` prop when created using the `useToaster` hook.
-
-Timeouts must be set in milliseconds; as an example, if you want a timeout of five seconds, set the timeout to 5000.
-
-1000ms timeout
-
-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 {
-  IressButton,
-  IressToasterProvider,
-  IressToasterProviderProps,
-  useToaster,
-} from '@iress-oss/ids-components';
-const ToastWithTrigger \= () \=> {
-  const toaster \= useToaster();
-  return (
-    <IressButton
-      onClick\={() \=>
-        toaster.success({
-          children: 'This is a really quick toast',
-          timeout: 1000,
-        })
-      }
-    \>
-      1000ms timeout    </IressButton\>
-  );
-};
-export const ToasterTimeout \= () \=> (
-  <IressToasterProvider \>
-    <ToastWithTrigger />
-  </IressToasterProvider\>
-);
-
-Copy
-
-### [](#position)Position
-
-By default, the `IressToaster`'s `position` is set to `bottom-end`, but there may be occasions when you need toasts to appear in a different part of the screen. This can be controlled with the `position` prop on the `IressToasterProvider` component, or as the first argument to `useToaster`. There are 6 positions to choose from.
-
-**Note:** The toast position should be consistent across your app. For this reason, the position is set on the `IressToastProvider` or the `useToaster` hook, and not on the individual toasts.
-
-top-starttop-centertop-end
-
-Toaster positions
-
-bottom-startbottom-centerbottom-end
-
-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 {
-  IressButton,
-  IressInline,
-  IressPanel,
-  IressStack,
-  IressText,
-  IressToasterProps,
-  IressToasterProvider,
-  IressToasterProviderProps,
-  IressToastProps,
-  useToaster,
-} from '@iress-oss/ids-components';
-import { useState } from 'react';
-const DEFAULT\_TOAST: IressToastProps \= {
-  children: 'Message sent successfully',
-  heading: 'Success',
-  status: 'success',
-};
-const Toaster \= () \=> {
-  const \[position, setPosition\] \=
-    useState<IressToasterProps\['position'\]\>('bottom-end');
-  const { status, ...toast } \= DEFAULT\_TOAST;
-  const toaster \= useToaster(position);
-  const changePosition \= (position: IressToasterProps\['position'\]) \=> {
-    setPosition(position);
-    queueMicrotask(() \=> toaster\[status\](toast));
-  };
-  return (
-    <div style\={{ padding: '80px 150px' }}\>
-      <IressStack gutter\="md"\>
-        <IressInline horizontalAlign\="between" gutter\="sm"\>
-          <IressButton onClick\={() \=> changePosition('top-start')}\>
-            top-start          </IressButton\>
-          <IressButton onClick\={() \=> changePosition('top-center')}\>
-            top-center          </IressButton\>
-          <IressButton onClick\={() \=> changePosition('top-end')}\>
-            top-end          </IressButton\>
-        </IressInline\>
-        <IressPanel background\="transparent" padding\="lg"\>
-          <IressText align\="center"\>Toaster positions</IressText\>
-        </IressPanel\>
-        <IressInline horizontalAlign\="between"\>
-          <IressButton onClick\={() \=> changePosition('bottom-start')}\>
-            bottom-start          </IressButton\>
-          <IressButton onClick\={() \=> changePosition('bottom-center')}\>
-            bottom-center          </IressButton\>
-          <IressButton onClick\={() \=> changePosition('bottom-end')}\>
-            bottom-end          </IressButton\>
-        </IressInline\>
-      </IressStack\>
-    </div\>
-  );
-};
-export const ToasterPositionExamples \= () \=> (
-  <IressToasterProvider \>
-    <Toaster />
-  </IressToasterProvider\>
-);
-
-Copy
-
-[](#migrating-to-version-5)Migrating to version 5
--------------------------------------------------
-
-### [](#adding-the-provider)Adding the provider
-
-For your components to work as previously, you will need to set up the `IressToasterProvider` at the root of your application. This will allow you to use the `useToaster` hook to trigger toasts from anywhere in your application using the status and props of the toast.
-
-\[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;
-}
-
-const App \= () \=> <IressToasterProvider\>Rest of app here</IressToasterProvider\>;
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Controlling toasts](#controlling-toasts)
-    *   [Using the IressToasterProvider](#using-the-iresstoasterprovider)
-    *   [Closing toasts via the provider](#closing-toasts-via-the-provider)
-*   [Examples](#examples)
-    *   [Status](#status)
-    *   [Timeout](#timeout)
-    *   [Position](#position)
-*   [Migrating to version 5](#migrating-to-version-5)
-    *   [Adding the provider](#adding-the-provider)

package/generated/docs/components-toaster-toast-docs.md

@@ -1,157 +0,0 @@
-[](#toast)Toast
-===============
-
-Overview
---------
-
-Toast are a compact way to provide users with important information, usually within a toaster.
-
-This documentation is for the standalone `IressToast` component, and has been exposed for complex use cases where you are unable to use the `useToaster` hook. For most use cases, please use the hook and provider documented at [Toaster documentation](./?path=/docs/components-toaster--docs).
-
-Error
------
-
-Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
-
-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; }
-
-<IressToast
-  heading\="Error"
-  status\="error"
-\>
-  Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
-</IressToast\>
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#status)Status
-
-The toast offers three status that set a distinctive colour and icon. They can be set using the `status` prop. Their different use cases are described here.
-
-Success
--------
-
-Use to communicate that an action has been successfully completed, such as saving changes in a form.
-
-Error
------
-
-Error toasts are useful for when a user has tried to submit some data but the submit has failed, due to an api error or loss of internet connection, for example.
-
-Info
-----
-
-Ideal for conveying updates or notifications that do not require immediate action, as well as gently inform users about events or changes within an application or interface.
-
-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; }
-
-<IressStack gutter\="lg"\>
-  <IressToast
-    heading\="Success"
-    status\="success"
-  \>
-    Use to communicate that an action has been successfully completed, such as saving changes in a form.  </IressToast\>
-  <IressToast
-    heading\="Error"
-    status\="error"
-  \>
-    Error toasts are useful for when a user has tried to submit some data but the submit has failed, due to an api error or loss of internet connection, for example.  </IressToast\>
-  <IressToast
-    heading\="Info"
-    status\="info"
-  \>
-    Ideal for conveying updates or notifications that do not require immediate action, as well as gently inform users about events or changes within an application or interface.  </IressToast\>
-</IressStack\>
-
-Copy
-
-### [](#heading)Heading
-
-Use the `heading` prop to add a header to the toast. The header can be any component you like, but it is designed to support a simple heading element. If provided a string, it will display a `<h2 />` element with the string as its content.
-
-**Note:** `headingText` and `headingLevel` props have been replaced with the `heading` render prop to give you more control over the `heading` element and its content. To use the previous behaviour, you can pass a string which will automatically create a `h2` element, or pass a `h*` element with the text as a child.
-
-Toast with a h2 tag
--------------------
-
-Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
-
-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; }
-
-<IressToast
-  heading\={<h2\>Toast with a h2 tag</h2\>}
-  status\="error"
-\>
-  Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
-</IressToast\>
-
-Copy
-
-### [](#footer)Footer
-
-The `footer` prop allows for content to be placed below the header and body of the alert. This can be useful for displaying call to actions.
-
-Error
------
-
-Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
-
-Try Again
-
-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; }
-
-<IressToast
-  actions\={<IressButton key\="test" mode\="danger"\>Try Again</IressButton\>}
-  heading\="Error"
-  status\="error"
-\>
-  Connection failure. Longer text description should wrap and look like this. Try to limit to 3 lines or less.
-</IressToast\>
-
-Copy
-
-### [](#dismiss-button)Dismiss Button
-
-Dismiss Button is on the top right corner and it's showing/hiding based on `dismissible` prop.
-
-**Note:** When it's `true`, `onClose` event is going to be available.
-
-Information
------------
-
-Information toast with dismiss button
-
-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; }
-
-<IressToast
-  dismissible
-  heading\="Information"
-  status\="info"
-\>
-  Information toast with dismiss button
-</IressToast\>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Status](#status)
-    *   [Heading](#heading)
-    *   [Footer](#footer)
-    *   [Dismiss Button](#dismiss-button)

package/generated/docs/components-toggle-docs.md

@@ -1,158 +0,0 @@
-[](#toggle)Toggle
-=================
-
-Overview
---------
-
-Toggles allow users to turn things on or off. When toggled, the associated change happens straight away.
-
-Toggle
-
-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; }
-
-<IressToggle
-  layout\="inline"
-\>
-  Toggle
-</IressToggle\>
-
-Copy
-
-[](#usage)Usage
----------------
-
-Toggles are typically on / off switches, similar to a household light switch. They allow users to choose between two mutually exclusive options, and will always have a default value.
-
-The `IressToggle` component should only be used for actions that happen immediately, for example switching a device's WiFi connection on or off.
-
-Don't use Toggles in forms
---------------------------
-
-Toggles shouldn’t be used as part of a form as they don’t have the correct semantics, and won’t submit a value when the form data is submitted. If you need a toggleable component in a form, use a checkbox or radio group instead.
-
-### [](#labels)Labels
-
-Toggles should always have a label, which is set via its `children`.
-
-Toggle
-
-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; }
-
-<IressToggle
-  layout\="inline"
-\>
-  Toggle
-</IressToggle\>
-
-Copy
-
-### [](#hidden-labels)Hidden labels
-
-Labels can be hidden via the `hiddenLabel` prop; this will hide the label from view, but it'll still be available to screen reader users.
-
-Toggle
-
-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; }
-
-<IressToggle
-  hiddenLabel
-  layout\="inline"
-\>
-  Toggle
-</IressToggle\>
-
-Copy
-
-### [](#checked)Checked
-
-The on / off state of the toggle can be controlled by setting the `checked` prop.
-
-Toggle
-
-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; }
-
-<IressToggle
-  checked
-  layout\="inline"
-\>
-  Toggle
-</IressToggle\>
-
-Copy
-
-### [](#layout)Layout
-
-The `layout` prop allows you to control the position of the label in relation to the control. The default layout is `inline`, but you can also choose the following options:',
-
-*   `inline-between` similar to inline, but this positions the label and control at opposite ends of their container
-*   `inline-reverse` renders the label after the control instead of before the control
-*   `stack` positions the label above the control
-
-Toggle
-
-Toggle
-
-Toggle
-
-Toggle
-
-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; }
-
-<IressRow gutter\="lg"\>
-  <IressCol span\="12"\>
-    <IressPanel background\="alt"\>
-      <IressToggle
-        layout\="inline"
-      \>
-        Toggle      </IressToggle\>
-    </IressPanel\>
-  </IressCol\>
-  <IressCol span\="12"\>
-    <IressPanel background\="alt"\>
-      <IressToggle
-        checked
-        layout\="inline-between"
-      \>
-        Toggle      </IressToggle\>
-    </IressPanel\>
-  </IressCol\>
-  <IressCol span\="12"\>
-    <IressPanel background\="alt"\>
-      <IressToggle
-        layout\="inline-reverse"
-      \>
-        Toggle      </IressToggle\>
-    </IressPanel\>
-  </IressCol\>
-  <IressCol span\="12"\>
-    <IressPanel background\="alt"\>
-      <IressToggle
-        checked
-        layout\="stack"
-      \>
-        Toggle      </IressToggle\>
-    </IressPanel\>
-  </IressCol\>
-</IressRow\>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Usage](#usage)
-    *   [Labels](#labels)
-    *   [Hidden labels](#hidden-labels)
-    *   [Checked](#checked)
-    *   [Layout](#layout)