feat: introduce AI package (@ui5/webcomponents-ai-react)

.storybook/main.ts

@@ -60,6 +60,11 @@ const config: StorybookConfig = {
         },
         '../packages/main/**/*.mdx',
         '../packages/main/**/*.stories.@(tsx|jsx)',
+        {
+          directory: '../packages/ai',
+          files: '**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))',
+          titlePrefix: 'AI'
+        },
         {
           directory: '../packages/compat',
           files: '**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))',

.storybook/manager-head.html

@@ -52,6 +52,8 @@
   }
 
   /*experimental components */
+  #ai-promptinput::after,
+  #ai-button::after,
   #data-display-table::after,
   #inputs-tokenizer::after,
   #modals-popovers-usermenu::after,

.storybook/preview.tsx

@@ -149,6 +149,8 @@ const preview: Preview = {
           'Layouts & Floorplans',
           'Modals & Popovers',
           'User Feedback',
+          'AI',
+          ['Docs'],
           'Legacy Components'
         ]
       }

.storybook/utils.ts

@@ -1,6 +1,8 @@
 import { DocsContext } from '@storybook/blocks';
 import { useContext, useMemo } from 'react';
 // @ts-expect-error: storybook can handle this
+import cemAi from './custom-element-manifests/ai.json';
+// @ts-expect-error: storybook can handle this
 import cemFiori from './custom-element-manifests/fiori.json';
 // @ts-expect-error: storybook can handle this
 import cemMain from './custom-element-manifests/main.json';
@@ -16,10 +18,6 @@ export const MAPPED_THEMES = [
   { value: 'sap_fiori_3_dark', title: 'Quartz Dark' },
   { value: 'sap_fiori_3_hcb', title: 'Quartz High Contrast Black' },
   { value: 'sap_fiori_3_hcw', title: 'Quartz High Contrast White' }
-  // deprecated
-  // { value: 'sap_belize', title: 'Belize' },
-  // { value: 'sap_belize_hcb', title: 'Belize High Contrast Black' },
-  // { value: 'sap_belize_hcw', title: 'Belize High Contrast White' }
 ];
 
 export const excludePropsForAbstract = ['className', 'style'];
@@ -50,6 +48,8 @@ export function useGetCem() {
       return cemMain;
     case 'package:@ui5/webcomponents-fiori':
       return cemFiori;
+    case 'package:@ui5/webcomponents-ai':
+      return cemAi;
   }
 }
 

README.md

@@ -54,6 +54,10 @@ You can find our documentation under the following links:
 
   [![](https://badgen.net/npm/v/@ui5/webcomponents-cypress-commands?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-cypress-commands)
 
+- [@ui5/webcomponents-ai-react](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/ai) - React wrapper for the `@ui5/webcomponents-ai` Package
+
+  [![](https://badgen.net/npm/v/@ui5/webcomponents-ai-react?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-ai-react)
+
 <!-- *********************************************************************** -->
 
 <a name="requirements"></a>

docs/ReadMeAI.mdx

@@ -0,0 +1,11 @@
+import { Footer, TableOfContent } from '@sb/components';
+import { Markdown, Meta } from '@storybook/blocks';
+import ReadMe from '../packages/ai/README.md?raw';
+
+<Meta title="AI / Docs" />
+
+<TableOfContent />
+
+<Markdown>{ReadMe.split('## Documentation')[0].trim()}</Markdown>
+
+<Footer />

package.json

@@ -24,12 +24,14 @@
     "wrappers:main": "node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)'",
     "wrappers:fiori": "node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-fiori --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)'",
     "wrappers:compat": "WITH_WEB_COMPONENT_IMPORT_PATH='@ui5/webcomponents-react-base/dist/wrapper/withWebComponent.js' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-compat --out ./packages/compat/src/components --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)' && prettier --log-level silent --write ./packages/compat/src/components",
+    "wrappers:ai": "node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-ai --out ./packages/ai/src/components --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)' && prettier --log-level silent --write ./packages/ai/src/components",
     "create-webcomponents-wrapper": "(cd packages/cli && tsc) && yarn run wrappers:main && yarn run wrappers:fiori && prettier --log-level silent --write ./packages/main/src/webComponents && eslint --fix ./packages/main/src/webComponents/*/index.tsx && yarn run sb:prepare-cem",
     "create-webcomponents-wrapper-compat": "(cd packages/cli && tsc) && yarn run wrappers:compat && yarn run sb:prepare-cem && eslint --fix ./packages/compat/src/components/*/index.tsx",
+    "create-webcomponents-wrapper-ai": "(cd packages/cli && tsc) && yarn run wrappers:ai && yarn run sb:prepare-cem && eslint --fix ./packages/ai/src/components/*/index.tsx",
     "chromatic": "cross-env STORYBOOK_ENV=chromatic npx chromatic --build-script-name build:storybook",
     "postinstall": "husky && yarn setup",
     "create-cypress-commands-docs": "documentation build ./packages/cypress-commands/src/commands.ts -f json -o ./packages/cypress-commands/api-commands.json && documentation build ./packages/cypress-commands/src/queries.ts -f json -o ./packages/cypress-commands/api-queries.json",
-    "sb:prepare-cem": "node packages/cli/dist/bin/index.js resolve-cem --packageName @ui5/webcomponents --out ./.storybook/custom-element-manifests/main.json && node packages/cli/dist/bin/index.js resolve-cem --packageName @ui5/webcomponents-fiori --out ./.storybook/custom-element-manifests/fiori.json",
+    "sb:prepare-cem": "node packages/cli/dist/bin/index.js resolve-cem --packageName @ui5/webcomponents --out ./.storybook/custom-element-manifests/main.json && node packages/cli/dist/bin/index.js resolve-cem --packageName @ui5/webcomponents-fiori --out ./.storybook/custom-element-manifests/fiori.json && node packages/cli/dist/bin/index.js resolve-cem --packageName @ui5/webcomponents-ai --out ./.storybook/custom-element-manifests/ai.json",
     "create-theming-parameters": "node scripts/generate-theming-parameters.js"
   },
   "dependencies": {
@@ -42,6 +44,7 @@
     "@storybook/react-vite": "8.5.8",
     "@storybook/theming": "8.5.8",
     "@ui5/webcomponents": "2.7.3",
+    "@ui5/webcomponents-ai": "2.7.2",
     "@ui5/webcomponents-compat": "2.7.3",
     "@ui5/webcomponents-fiori": "2.7.3",
     "@ui5/webcomponents-icons": "2.7.3",

packages/ai/.gitignore

@@ -0,0 +1,5 @@
+/LICENSE
+/NOTICE.txt
+/dist
+
+src/**/*.css.ts

packages/ai/README.md

@@ -0,0 +1,35 @@
+# @ui5/webcomponents-ai-react
+
+React wrapper for the [@ui5/webcomponents-ai](https://sap.github.io/ui5-webcomponents/components/ai/) web components.
+
+## Installation
+
+To consume `@ui5/webcomponents-ai-react`, you need to install the npm modules and required peer dependencies:
+
+```bash
+npm install @ui5/webcomponents-ai-react @ui5/webcomponents-ai
+```
+
+## Provided assets
+
+| Assets           | Module                                 | Notes                                                  |
+| ---------------- | -------------------------------------- | ------------------------------------------------------ |
+| `i18n`, `themes` | `@ui5/webcomponents-ai/dist/Assets.js` | Theming parameters and translations for the components |
+
+## UI5 Web Components Documentation and Patterns
+
+- Components: https://sap.github.io/ui5-webcomponents/components/ai/
+- Patterns: https://sap.github.io/ui5-webcomponents/components/patterns/
+
+## Documentation
+
+You can find an interactive documentation in our [Storybook](https://sap.github.io/ui5-webcomponents-react/).
+
+## Contribute
+
+Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents-react/blob/main/CONTRIBUTING.md).
+
+## License
+
+Please see our [LICENSE](https://github.com/SAP/ui5-webcomponents-react/blob/main/LICENSE) for copyright and license information.
+Detailed information including third-party components and their licensing/copyright information is available via the [REUSE tool](https://api.reuse.software/info/github.com/SAP/ui5-webcomponents-react).

packages/ai/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@ui5/webcomponents-ai-react",
+  "version": "2.7.1",
+  "description": "React wrapper for `@ui5/webcomponents-ai` web components.",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json",
+    "./dist": "./dist/index.js",
+    "./dist/*": "./dist/*",
+    "./dist/*.js": "./dist/*.js"
+  },
+  "homepage": "https://sap.github.io/ui5-webcomponents-react",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SAP/ui5-webcomponents-react.git",
+    "directory": "packages/ai"
+  },
+  "author": "SAP SE (https://www.sap.com)",
+  "license": "Apache-2.0",
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rimraf dist",
+    "build:version-info": "node ../../scripts/generate-version-info.js"
+  },
+  "dependencies": {
+    "@ui5/webcomponents-react-base": "workspace:~"
+  },
+  "peerDependencies": {
+    "@ui5/webcomponents-ai": "~2.7.2",
+    "react": "^18 || ^19"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "CHANGELOG.md",
+    "NOTICE.txt"
+  ]
+}

packages/ai/src/components/Button/Button.mdx

@@ -0,0 +1,129 @@
+import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
+import { Canvas, Description, Markdown, Meta } from '@storybook/blocks';
+import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/components';
+import * as ComponentStories from './Button.stories';
+import { ButtonState } from '../ButtonState/index.tsx';
+import { excludePropsForAbstract } from '@sb/utils';
+
+<Meta of={ComponentStories} />
+
+<DocsHeader experimental />
+
+<br />
+
+## Example
+
+<Canvas of={ComponentStories.Default} />
+
+<details>
+
+    <summary>Show static code</summary>
+
+    ```tsx
+    function AIButton(props) {
+      const generationIdRef = useRef<NodeJS.Timeout | null>(null);
+      const buttonRef = useRef<ButtonDomRef>(null);
+      const [buttonState, setButtonState] = useState("generate");
+      const [menuOpen, setMenuOpen] = useState(false);
+
+      const startGeneration = () => {
+        generationIdRef.current = setTimeout(() => {
+          setButtonState("revise");
+        }, 3000);
+      };
+
+      const handleClick: ButtonPropTypes["onClick"] = (e) => {
+        const btn = e.target;
+
+        setMenuOpen(false);
+        switch (btn.state) {
+          case "generate":
+            setButtonState("generating");
+            startGeneration();
+            break;
+          case "generating":
+            if (generationIdRef.current) {
+              clearTimeout(generationIdRef.current);
+              generationIdRef.current = null;
+            }
+            setButtonState("generate");
+            break;
+          case "revise":
+            setMenuOpen(true);
+            break;
+        }
+      };
+
+      const handleMenuItemClick: MenuPropTypes["onItemClick"] = (e) => {
+        if (e.detail.text === "Regenerate") {
+          setButtonState("generating");
+          startGeneration();
+        }
+      };
+
+      return (
+        <>
+          <Button
+            {...props}
+            onClick={handleClick}
+            state={buttonState}
+            ref={buttonRef}
+          >
+            <ButtonState name="generate" text="Generate" icon={aiIcon} />
+            <ButtonState name="generating" text="Stop Generating" icon={stopIcon} />
+            <ButtonState
+              name="revise"
+              text="Revise"
+              icon={aiIcon}
+              endIcon={navDownIcon}
+            />
+          </Button>
+          {menuOpen && (
+            <Menu
+              opener={buttonRef.current}
+              open
+              onItemClick={handleMenuItemClick}
+              onClose={() => {
+                setMenuOpen(false);
+              }}
+            >
+              <MenuItem text="Regenerate" />
+              <MenuSeparator />
+              <MenuItem text="Fix Spelling & Grammar" />
+              <MenuItem text="Change Tone">
+                <MenuItem text="Option 1" />
+                <MenuItem text="Option 2" />
+                <MenuItem text="Option 3" />
+              </MenuItem>
+              <MenuItem text="Adjust Length">
+                <MenuItem text="Shorten text" />
+                <MenuItem text="Lengthen text" />
+              </MenuItem>
+              <MenuItem text="Bulleted List" />
+              <MenuItem text="Translate">
+                <MenuItem text="English" />
+                <MenuItem text="German" />
+                <MenuItem text="Spanish" />
+              </MenuItem>
+            </Menu>
+          )}
+        </>
+      );
+    }
+    ```
+
+</details>
+
+## Properties
+
+<ControlsWithNote of={ComponentStories.Default} />
+
+<Markdown>{SubcomponentsSection}</Markdown>
+
+## ButtonState
+
+<Description of={ButtonState} />
+<ArgTypesWithNote of={ButtonState} hideHTMLPropsNote exclude={excludePropsForAbstract} />
+
+<Footer />
+```