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

Author: Lukas742

.storybook/custom-element-manifests/ai.json

@@ -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/main.ts

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

.storybook/manager-head.html

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

.storybook/preview.tsx

@@ -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;
   }
 }
 

.storybook/utils.ts

@@ -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>

README.md

@@ -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 />

docs/ReadMeAI.mdx

@@ -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",

package.json

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

packages/ai/.gitignore

@@ -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).