feat(f36-ai-components): add f36-ai-components package

.changeset/config.json

@@ -10,7 +10,8 @@
     "@contentful/f36-cdn",
     "@contentful/f36-i18n-utils",
     "@contentful/f36-codemod",
-    "@contentful/f36-website"
+    "@contentful/f36-website",
+    "@contentful/f36-ai-components"
   ],
   "commit": false,
   "fixed": [
@@ -66,4 +67,4 @@
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "onlyUpdatePeerDependentsWhenOutOfRange": true
   }
-}
+}

RELEASES.md

@@ -82,6 +82,7 @@ For that we need to take some precautions:
 
 - The package.json of the pre-released package must be have `private: true`, to avoid changesets of trying to publish the package.
 - The package that is in prerelease (alpha, beta) needs to be added to the ignore field on the [.changeset/config.json](https://github.com/contentful/forma-36/blob/main/.changeset/config.json), so if a changeset is created for that package it will be ignored and not change the version or publish that specific package.
+- The package that is in prerelease (alpha, beta) needs to be added to the `ignorePkgs` array in [scripts/changesets/changelog-generate.js](https://github.com/contentful/forma-36/blob/main/scripts/changesets/changelog-generate.js), so if a changeset is created for that package it will be ignored and not change the version or publish that specific package.
 - And we don't have prerelease packages being part of the umbrela package (`f36-components`), which means that when it becomes stable we add it there and replace where it was being used before, e.g. on the website and/or playground.
 
 Trying to make prereleases easier to handle we created a script that you can use on your branch before merging into master, that will bump the package you select, and you can choose if you it's an alpha or beta release, before publishing it to NPM.

packages/f36-ai-components/README.md

@@ -0,0 +1,5 @@
+# AI Components
+
+This package is a pre-release. This means it is unsupported and subject to breaking changes without warning.
+
+A collection of components for use in AI applications, such as conversational interfaces.

packages/f36-ai-components/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@contentful/f36-ai-components",
+  "private": true,
+  "version": "0.0.1-alpha.0",
+  "description": "A collection of components for use in AI applications, such as conversational interfaces.",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "source": "src/index.ts",
+  "sideEffects": false,
+  "browserslist": "extends @contentful/browserslist-config",
+  "scripts": {
+    "build": "tsup"
+  },
+  "dependencies": {
+    "@contentful/f36-core": "^5.0.0",
+    "@contentful/f36-tokens": "^5.0.0",
+    "emotion": "^10.0.17"
+  },
+  "peerDependencies": {
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/contentful/forma-36"
+  },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/",
+    "access": "public"
+  }
+}

packages/f36-ai-components/src/AIChatLayout/AIChatLayout.styles.ts

@@ -0,0 +1,10 @@
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+
+export const getStyles = () => {
+  return {
+    aIChatLayout: css({
+      color: tokens.red600,
+    }),
+  };
+};

packages/f36-ai-components/src/AIChatLayout/AIChatLayout.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { AIChatLayout } from './AIChatLayout';
+
+describe('AIChatLayout', function () {
+  it('renders', () => {
+    const tree = render(<AIChatLayout>hello world</AIChatLayout>);
+
+    expect(tree).toBeTruthy();
+  });
+});

packages/f36-ai-components/src/AIChatLayout/AIChatLayout.tsx

@@ -0,0 +1,30 @@
+import { type CommonProps } from '@contentful/f36-core';
+import { cx } from 'emotion';
+import React from 'react';
+import { getStyles } from './AIChatLayout.styles';
+
+export interface AIChatLayoutProps extends CommonProps {
+  children: React.ReactNode;
+}
+
+function _AIChatLayout(
+  props: AIChatLayoutProps,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const styles = getStyles();
+
+  return (
+    <div
+      data-test-id={props.testId}
+      ref={ref}
+      className={cx(styles.aIChatLayout, props.className)}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+/**
+ * A layout component that provides a container for a conversational interface.
+ */
+export const AIChatLayout = React.forwardRef(_AIChatLayout);

packages/f36-ai-components/src/index.ts

@@ -0,0 +1,2 @@
+export { AIChatLayout } from './AIChatLayout/AIChatLayout';
+export type { AIChatLayoutProps } from './AIChatLayout/AIChatLayout';

packages/f36-ai-components/stories/AIChatLayout.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, Story } from '@storybook/react/types-6-0';
+import React from 'react';
+
+import {
+  AIChatLayout,
+  type AIChatLayoutProps,
+} from '../src/AIChatLayout/AIChatLayout';
+
+export default {
+  component: AIChatLayout,
+  title: 'Components/AIChatLayout',
+} as Meta;
+
+export const Default: Story<AIChatLayoutProps> = (args) => {
+  return <AIChatLayout {...args}>AIChatLayout</AIChatLayout>;
+};

scripts/changesets/changelog-generate.js

@@ -10,12 +10,15 @@ const cwd = process.cwd();
 
 // Umbrella package
 const componentsPkg = '@contentful/f36-components';
+
+// todo: could this be retrieved from .changeset/config.json? there is some overlap but docs-utils is not there and codemod is
 // Packages we don't want to have on changelog
 const ignorePkgs = [
   '@contentful/f36-cdn',
   '@contentful/f36-i18n-utils',
   '@contentful/f36-website',
   '@contentful/f36-docs-utils',
+  '@contentful/f36-ai-components',
 ];
 
 // Format package names as Start Case

scripts/plop-templates/package/src/Component.tsx.hbs

@@ -1,6 +1,6 @@
 import React from 'react';
 import { cx } from 'emotion';
-import { CommonProps } from '@contentful/f36-core';
+import { type CommonProps } from '@contentful/f36-core';
 import { getStyles } from './{{componentName}}.styles';
 
 export interface {{componentName}}Props extends CommonProps {