fix: merge conflicts

README.md

@@ -16,6 +16,7 @@
 | 📦 [`@rocket.chat/css-supports`](/packages/css-supports) | Memoized and SSR-compatible facade of CSS.supports API | [![npm](https://img.shields.io/npm/v/@rocket.chat/css-supports?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/css-supports) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/css-supports?style=flat-square) |
 | 📦 [`@rocket.chat/emitter`](/packages/emitter) | Event Emitter by Rocket.Chat | [![npm](https://img.shields.io/npm/v/@rocket.chat/emitter?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/emitter) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/emitter?style=flat-square) |
 | 📦 [`@rocket.chat/fuselage`](/packages/fuselage) | Rocket.Chat's React Components Library | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage?style=flat-square) |
+| 📦 [`@rocket.chat/fuselage-forms`](/packages/fuselage-forms) | A set of component wrappers to provide ease of use and accessibility out-of-box. | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-forms?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-forms) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-forms?style=flat-square) |
 | 📦 [`@rocket.chat/fuselage-hooks`](/packages/fuselage-hooks) | React hooks for Fuselage, Rocket.Chat's design system and UI toolkit | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-hooks?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-hooks) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-hooks?style=flat-square) |
 | 📦 [`@rocket.chat/fuselage-polyfills`](/packages/fuselage-polyfills) | A bundle of useful poly/ponyfills used by fuselage | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-polyfills?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-polyfills) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-polyfills?style=flat-square) |
 | 📦 [`@rocket.chat/fuselage-toastbar`](/packages/fuselage-toastbar) | Fuselage ToastBar component | [![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-toastbar?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/fuselage-toastbar) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/fuselage-toastbar?style=flat-square) |

package.json

@@ -32,29 +32,29 @@
   },
   "devDependencies": {
     "@changesets/changelog-github": "~0.5.1",
-    "@changesets/cli": "~2.29.4",
-    "@eslint/js": "~9.29.0",
+    "@changesets/cli": "~2.29.5",
+    "@eslint/js": "~9.31.0",
     "@rocket.chat/prettier-config": "workspace:~",
     "eslint": "~9.29.0",
-    "eslint-import-resolver-typescript": "~4.4.3",
-    "eslint-plugin-import": "~2.31.0",
+    "eslint-import-resolver-typescript": "~4.4.4",
+    "eslint-plugin-import": "~2.32.0",
     "eslint-plugin-jsx-a11y": "~6.10.2",
-    "eslint-plugin-mdx": "~3.5.0",
-    "eslint-plugin-prettier": "~5.4.1",
+    "eslint-plugin-mdx": "~3.6.2",
+    "eslint-plugin-prettier": "~5.5.3",
     "eslint-plugin-react": "~7.37.5",
     "eslint-plugin-react-hooks": "~5.2.0",
-    "eslint-plugin-storybook": "~9.0.11",
+    "eslint-plugin-storybook": "~9.0.18",
     "execa": "~9.6.0",
     "fuselagesnap-local": "workspace:~",
-    "globals": "~16.2.0",
+    "globals": "~16.3.0",
     "husky": "~9.1.7",
     "hygen": "~6.2.11",
     "pinst": "~3.0.0",
     "prettier": "~3.5.3",
-    "storybook": "~9.0.11",
-    "turbo": "~2.5.4",
+    "storybook": "~9.0.18",
+    "turbo": "~2.5.5",
     "typescript": "~5.8.3",
-    "typescript-eslint": "~8.34.0",
+    "typescript-eslint": "~8.38.0",
     "update-readme": "workspace:~"
   },
   "packageManager": "[email protected]",

packages/css-in-js/package.json

@@ -44,19 +44,19 @@
     "stylis": "~4.3.6"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "~28.0.5",
+    "@rollup/plugin-commonjs": "~28.0.6",
     "@rollup/plugin-json": "~6.1.0",
     "@rollup/plugin-node-resolve": "~16.0.1",
     "@rollup/plugin-terser": "~0.4.4",
-    "@rollup/plugin-typescript": "~12.1.2",
+    "@rollup/plugin-typescript": "~12.1.4",
     "@types/stylis": "^4.2.7",
     "eslint": "~9.29.0",
     "jest": "~30.0.0",
     "lint-all": "workspace:~",
     "prettier": "~3.5.3",
-    "rollup": "~4.43.0",
+    "rollup": "~4.45.1",
     "ts-jest": "~29.4.0",
-    "typedoc": "~0.28.5",
+    "typedoc": "~0.28.7",
     "typescript": "~5.8.3"
   },
   "publishConfig": {

packages/css-supports/package.json

@@ -37,7 +37,7 @@
     "lint-all": "workspace:~",
     "prettier": "~3.5.3",
     "rimraf": "~6.0.1",
-    "typedoc": "~0.28.5",
+    "typedoc": "~0.28.7",
     "typescript": "~5.8.3"
   },
   "publishConfig": {

packages/emitter/package.json

@@ -34,19 +34,19 @@
     "docs": "typedoc"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "~28.0.5",
+    "@rollup/plugin-commonjs": "~28.0.6",
     "@rollup/plugin-json": "~6.1.0",
     "@rollup/plugin-node-resolve": "~16.0.1",
     "@rollup/plugin-terser": "~0.4.4",
-    "@rollup/plugin-typescript": "~12.1.2",
+    "@rollup/plugin-typescript": "~12.1.4",
     "eslint": "~9.29.0",
     "jest": "~30.0.0",
     "lint-all": "workspace:~",
     "npm-run-all": "^4.1.5",
     "prettier": "~3.5.3",
-    "rollup": "~4.43.0",
+    "rollup": "~4.45.1",
     "ts-jest": "~29.4.0",
-    "typedoc": "~0.28.5",
+    "typedoc": "~0.28.7",
     "typescript": "~5.8.3"
   },
   "publishConfig": {

packages/fuselage-forms/.gitignore

@@ -0,0 +1 @@
+/dist

packages/fuselage-forms/.prettierignore

@@ -0,0 +1 @@
+/dist

packages/fuselage-forms/.storybook/DocsContainer.tsx

@@ -0,0 +1,25 @@
+import { DocsContainer as BaseContainer } from '@storybook/addon-docs/blocks';
+import type { ComponentPropsWithoutRef } from 'react';
+import { useEffect, useState } from 'react';
+import { addons } from 'storybook/preview-api';
+import { themes } from 'storybook/theming';
+import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
+
+const channel = addons.getChannel();
+
+const DocsContainer = (
+  props: ComponentPropsWithoutRef<typeof BaseContainer>,
+) => {
+  const [isDark, setDark] = useState(false);
+
+  useEffect(() => {
+    channel.on(DARK_MODE_EVENT_NAME, setDark);
+    return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
+  }, [setDark]);
+
+  return (
+    <BaseContainer {...props} theme={isDark ? themes.dark : themes.light} />
+  );
+};
+
+export default DocsContainer;

packages/fuselage-forms/.storybook/logo.svg.d.ts

@@ -0,0 +1,3 @@
+declare const path: string;
+
+export = path;

packages/fuselage-forms/.storybook/main.ts

@@ -0,0 +1,38 @@
+import { dirname, join } from 'path';
+
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+export default {
+  addons: [
+    getAbsolutePath('storybook-dark-mode'),
+    getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
+    getAbsolutePath('@storybook/addon-docs'),
+  ],
+  logLevel: 'silent',
+
+  stories: ['../src/**/*.stories.tsx', '../src/**/stories.tsx'],
+
+  framework: {
+    name: getAbsolutePath('@storybook/react-webpack5'),
+    options: {},
+  },
+  swc: () => ({
+    jsc: {
+      transform: {
+        react: {
+          runtime: 'automatic',
+        },
+      },
+    },
+  }),
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+} satisfies StorybookConfig;
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}

packages/fuselage-forms/.storybook/preview.tsx

@@ -0,0 +1,92 @@
+import { PaletteStyleTag } from '@rocket.chat/fuselage';
+import breakpointTokens from '@rocket.chat/fuselage-tokens/breakpoints.json';
+import surface from '@rocket.chat/fuselage-tokens/dist/surface.json';
+import type { Preview } from '@storybook/react-webpack5';
+import { themes } from 'storybook/theming';
+import { useDarkMode } from 'storybook-dark-mode';
+
+import manifest from '../package.json';
+
+import DocsContainer from './DocsContainer';
+import logo from './logo.svg';
+
+import '@rocket.chat/fuselage/dist/fuselage.css';
+import '@rocket.chat/icons/dist/rocketchat.css';
+import '@rocket.chat/fuselage-polyfills';
+
+export default {
+  parameters: {
+    backgrounds: {
+      grid: {
+        cellSize: 4,
+        cellAmount: 4,
+        opacity: 0.5,
+      },
+    },
+    docs: {
+      container: DocsContainer,
+    },
+    options: {
+      storySort: {
+        order: [
+          'Inputs',
+          'Data Display',
+          'Feedback',
+          'Containers',
+          'Navigation',
+          'Layout',
+          'Message',
+          'Sidebar',
+        ],
+      },
+    },
+    viewport: {
+      viewports: breakpointTokens.reduce(
+        (obj, { name, minViewportWidth }) => ({
+          ...obj,
+          [name]: {
+            name,
+            styles: {
+              width: `${minViewportWidth}px`,
+              height: '90%',
+            },
+            type: 'desktop',
+          },
+        }),
+        {},
+      ),
+    },
+    darkMode: {
+      dark: {
+        ...themes.dark,
+        appBg: surface.surface.dark.sidebar,
+        appContentBg: surface.surface.dark.light,
+        appPreviewBg: 'transparent',
+        barBg: surface.surface.dark.light,
+        brandTitle: manifest.name,
+        brandImage: logo,
+        brandUrl: manifest.homepage,
+      },
+      light: {
+        ...themes.normal,
+        appPreviewBg: 'transparent',
+        brandTitle: manifest.name,
+        brandImage: logo,
+        brandUrl: manifest.homepage,
+      },
+    },
+  },
+  decorators: [
+    (Story) => {
+      const dark = useDarkMode();
+
+      return (
+        <>
+          <PaletteStyleTag theme={dark ? 'dark' : 'light'} />
+          <Story />
+        </>
+      );
+    },
+  ],
+  tags: ['autodocs'],
+} satisfies Preview;

packages/fuselage-forms/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @rocket.chat/fuselage-forms
+
+## 0.1.0
+
+### Minor Changes
+
+- [#1670](https://github.com/RocketChat/fuselage/pull/1670) [`bbc28d1`](https://github.com/RocketChat/fuselage/commit/bbc28d1fe1fea3f36acd7bcf8467ca01c7ccdcd4) Thanks [@gabriellsh](https://github.com/gabriellsh)! - feat(fuselage-forms): Create Package - Form utility wrappers for a11y compliance