@iress-oss/ids-mcp-server 0.0.1-dev.0

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

@@ -0,0 +1,116 @@
+[](#recipes)Recipes
+===================
+
+[](#using-iressinputcurrency-in-table)Using IressInputCurrency in table
+-----------------------------------------------------------------------
+
+It is not recommended to use the `readOnly` prop for `IressInputCurrency` inside tables, as it was designed for forms. This example shows how to use currency in the table, by using the `format` prop of when defining a column inside `IressTable`. Additionally, when all rows have the same currency, it is recommended to add the currency code on the column `label` and remove the `currencyCode` on all rows.
+
+My investments
+| Investment Name | Investment Date | Total % | Investment Amount (AUD) |
+| --- | --- | --- | --- |
+| US Stocks | 23/09/2019 | 24.8% | 23,898.00 |
+| US Bonds | 05/02/2019 | 26.2% | 26,382.46 |
+| AU Stocks | 05/02/2019 | 26.2% | 9,342.16 |
+| UK Stocks | 28/06/2020 | 49% | 49,751.40 |
+
+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; }
+
+export const CurrencyInTable \= () \=> {
+  return (
+    <IressTable
+      caption\="My investments"
+      style\={{ '--iress-cell-vertical-align': 'middle' } as React.CSSProperties}
+      columns\={\[
+        {
+          key: 'investmentName',
+          label: 'Investment Name',
+          format: 'string',
+          width: '30%',
+        },
+        {
+          key: 'investmentDate',
+          label: 'Investment Date',
+          format: 'date',
+          width: '30%',
+        },
+        {
+          key: 'totalPercentage',
+          label: 'Total %',
+          format: 'percent',
+          width: '15%',
+        },
+        {
+          key: 'amount',
+          label: 'Investment Amount (AUD)',
+          format: 'currency',
+          currencyCode: '',
+          width: '25%',
+        },
+      \]}
+      rows\={\[
+        {
+          investmentName: 'US Stocks',
+          investmentDate: '2019-09-23',
+          totalPercentage: 24.8,
+          amount: 23898,
+        },
+        {
+          investmentName: 'US Bonds',
+          investmentDate: '2019-02-05',
+          totalPercentage: 26.2,
+          amount: 26382.456,
+        },
+        {
+          investmentName: 'AU Stocks',
+          investmentDate: '2019-02-05',
+          totalPercentage: 26.2,
+          amount: 9342.1569,
+        },
+        {
+          investmentName: 'UK Stocks',
+          investmentDate: '2020-06-28',
+          totalPercentage: 49,
+          amount: 49751.4,
+        },
+      \]}
+    />
+  );
+};
+
+Copy
+
+[](#onchange-with-valid-value)OnChange with valid value
+-------------------------------------------------------
+
+Only able to input valid value when use `IressInputCurrency`. In this example, only number and 2 decimal places are allowed.
+
+AUD
+
+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; }
+
+export const ValidValueOnChage \= () \=> {
+  const \[value, setValue\] \= useState('');
+  return (
+    <IressInputCurrency
+      value\={value}
+      onChange\={(\_e, value) \=> {
+        if (typeof value \=== 'string' && /^-?\\d\*(\\.\\d{0,2})?$/.test(value)) {
+          console.log('Valid value:', value);
+          setValue(value);
+        }
+      }}
+    />
+  );
+};
+
+Copy
+
+On this page
+
+*   [Using IressInputCurrency in table](#using-iressinputcurrency-in-table)
+*   [OnChange with valid value](#onchange-with-valid-value)

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

@@ -0,0 +1,135 @@
+[](#label)Label
+===============
+
+Overview
+--------
+
+Use the `IressLabel` component when building bespoke form inputs and `IressField` is too restrictive.
+
+**This is a label**
+
+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; }
+
+<IressLabel\>
+  This is a label
+</IressLabel\>
+
+Copy
+
+[](#examples)Examples
+---------------------
+
+### [](#required)Required
+
+To indicate that an input is required, you may use the `required` prop to distinguish the label with an asterix.
+
+**\*Required This is a label for a required input**
+
+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; }
+
+<IressLabel required\>
+  This is a label for a required input
+</IressLabel\>
+
+Copy
+
+### [](#optional)Optional
+
+Alternatively, if the majority of your form inputs are required, you may wish to distinguish only the optional inputs. For this, use the `optional` prop.
+
+The `optional` prop also accepts a string, in which case it will replace the default "(optional)" label, useful when you need to support translation.
+
+**Note:** that the `optional` and `required` props are mutually exclusive, with `required` taking precedence.
+
+**This is a label for an optional input(optional)**
+
+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; }
+
+<IressLabel optional\>
+  This is a label for an optional input
+</IressLabel\>
+
+Copy
+
+**This is a label for an optional input(选修的)**
+
+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; }
+
+<IressLabel optional\="(选修的)"\>
+  This is a label for an optional input
+</IressLabel\>
+
+Copy
+
+### [](#hidden-label)Hidden label
+
+Sometimes you may wish to have an input with no visible label, but to still wrap the input in a label for accessibility. In this case, set `hiddenLabel` to `true`.
+
+**This text is visible to screen readers only**
+
+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; }
+
+<IressLabel hiddenLabel\>
+  This text is visible to screen readers only
+</IressLabel\>
+
+Copy
+
+### [](#rich-content)Rich content
+
+You can render custom content into the label.
+
+**
+
+Home settings
+
+**
+
+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; }
+
+<IressLabel\>
+  <IressInline
+    gutter\="md"
+    verticalAlign\="middle"
+  \>
+    <IressIcon name\="home" />
+    Home settings    <IressIcon name\="cog" />
+  </IressInline\>
+</IressLabel\>
+
+Copy
+
+[](#accessibility)Accessibility
+-------------------------------
+
+Don't place interactive elements such as anchors or buttons inside the `IressLabel`. Doing so makes it difficult for people to activate the form input associated with the label.
+
+See the [MDN Label Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#accessibility_concerns) for more info.
+
+### [](#labelling-non-interactive-content)Labelling non-interactive content
+
+`IressLabel` can be used to label non-interactive content, such as readonly data. In this case, do not provide a `htmlFor` prop. This will render the label using a `strong` tag instead of a `label` tag.
+
+On this page
+
+*   [Overview](#overview)
+*   [Props](#props)
+*   [Examples](#examples)
+    *   [Required](#required)
+    *   [Optional](#optional)
+    *   [Hidden label](#hidden-label)
+    *   [Rich content](#rich-content)
+*   [Accessibility](#accessibility)
+    *   [Labelling non-interactive content](#labelling-non-interactive-content)