Recover more storybooks

packages/gazzodown/.babelrc.json

@@ -0,0 +1,9 @@
+{
+	"presets": [
+		"@babel/preset-env",
+		["@babel/preset-react", {
+			"runtime": "automatic"
+		}],
+		"@babel/preset-typescript"
+	]
+}

packages/gazzodown/.eslintrc.json

@@ -51,7 +51,7 @@
 			"files": ["*.ts", "*.tsx"],
 			"rules": {
 				"@typescript-eslint/ban-ts-ignore": "off",
-				"@typescript-eslint/explicit-function-return-type": "warn",
+				"@typescript-eslint/explicit-function-return-type": "off",
 				"@typescript-eslint/indent": "off",
 				"@typescript-eslint/no-extra-parens": "off",
 				"@typescript-eslint/no-explicit-any": "off",

packages/gazzodown/.storybook/main.ts

@@ -0,0 +1,37 @@
+import { dirname, join, resolve } from 'path';
+
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+export default {
+	stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+	addons: [
+		getAbsolutePath('@storybook/addon-essentials'),
+		getAbsolutePath('@storybook/addon-webpack5-compiler-babel'),
+		getAbsolutePath('@storybook/addon-styling-webpack'),
+	],
+
+	framework: {
+		name: getAbsolutePath('@storybook/react-webpack5'),
+		options: {},
+	},
+
+	typescript: {
+		reactDocgen: 'react-docgen',
+	},
+
+	webpackFinal: (config) => {
+		// This is only needed because of Fontello
+		config.resolve = {
+			...config.resolve,
+			roots: [...(config.resolve?.roots ?? []), resolve(__dirname, '../../../apps/meteor/public')],
+		};
+
+		return config;
+	},
+
+	docs: {},
+} satisfies StorybookConfig;
+
+function getAbsolutePath(value: any): string {
+	return dirname(require.resolve(join(value, 'package.json')));
+}

packages/ui-composer/.storybook/preview.js → packages/gazzodown/.storybook/preview.tsx

@@ -1,8 +1,9 @@
+import type { Decorator, Parameters } from '@storybook/react';
+
 import '../../../apps/meteor/app/theme/client/main.css';
 import 'highlight.js/styles/github.css';
 
-export const parameters = {
-	actions: { argTypesRegex: '^on[A-Z].*' },
+export const parameters: Parameters = {
 	controls: {
 		matchers: {
 			color: /(background|color)$/i,
@@ -11,7 +12,7 @@ export const parameters = {
 	},
 };
 
-export const decorators = [
+export const decorators: Decorator[] = [
 	(Story) => (
 		<div className='rc-old'>
 			<style>{`
@@ -23,3 +24,4 @@ export const decorators = [
 		</div>
 	),
 ];
+export const tags = ['autodocs'];

packages/gazzodown/package.json

@@ -8,14 +8,14 @@
 		"/dist"
 	],
 	"scripts": {
-		"build": "rm -rf dist && tsc -p tsconfig.build.json",
-		"build-storybook": "NODE_OPTIONS=--openssl-legacy-provider build-storybook",
-		"build-preview": "NODE_OPTIONS=--openssl-legacy-provider build-storybook --quiet",
 		".:build-preview-move": "mkdir -p ../../.preview && cp -r ./storybook-static ../../.preview/gazzodown",
+		"build": "rm -rf dist && tsc -p tsconfig.build.json",
+		"build-preview": "storybook build --quiet",
+		"build-storybook": "storybook build",
 		"dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
 		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
 		"lint:fix": "eslint --ext .js,.jsx,.ts,.tsx . --fix",
-		"storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006",
+		"storybook": "storybook dev -p 6006",
 		"test": "jest",
 		"testunit": "jest",
 		"typecheck": "tsc --noEmit"
@@ -37,15 +37,15 @@
 		"@rocket.chat/styled": "~0.31.25",
 		"@rocket.chat/ui-client": "workspace:^",
 		"@rocket.chat/ui-contexts": "workspace:^",
-		"@storybook/addon-actions": "~6.5.16",
-		"@storybook/addon-docs": "~6.5.16",
-		"@storybook/addon-essentials": "~6.5.16",
-		"@storybook/addon-interactions": "~6.5.16",
-		"@storybook/addon-links": "~6.5.16",
-		"@storybook/builder-webpack4": "~6.5.16",
-		"@storybook/manager-webpack4": "~6.5.16",
-		"@storybook/react": "~6.5.16",
-		"@storybook/testing-library": "~0.0.13",
+		"@storybook/addon-actions": "^8.3.5",
+		"@storybook/addon-docs": "^8.3.5",
+		"@storybook/addon-essentials": "^8.3.5",
+		"@storybook/addon-interactions": "^8.3.5",
+		"@storybook/addon-links": "^8.3.5",
+		"@storybook/addon-styling-webpack": "^1.0.0",
+		"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+		"@storybook/react": "^8.3.5",
+		"@storybook/react-webpack5": "^8.3.5",
 		"@testing-library/react": "~16.0.1",
 		"@types/dompurify": "^3.0.5",
 		"@types/jest": "~29.5.13",
@@ -59,13 +59,13 @@
 		"eslint-plugin-anti-trojan-source": "~1.1.1",
 		"eslint-plugin-react": "~7.32.2",
 		"eslint-plugin-react-hooks": "~4.6.2",
-		"eslint-plugin-storybook": "~0.6.15",
+		"eslint-plugin-storybook": "^0.9.0",
 		"identity-obj-proxy": "^3.0.0",
 		"jest": "~29.7.0",
 		"katex": "~0.16.11",
 		"outdent": "^0.8.0",
-		"react-docgen-typescript-plugin": "~1.0.8",
 		"react-dom": "~17.0.2",
+		"storybook": "^8.3.5",
 		"typescript": "~5.5.4"
 	},
 	"peerDependencies": {

packages/gazzodown/src/Markup.stories.tsx

@@ -2,7 +2,7 @@ import { css } from '@rocket.chat/css-in-js';
 import { Box, MessageBody, MessageContainer } from '@rocket.chat/fuselage';
 import colors from '@rocket.chat/fuselage-tokens/colors.json';
 import { Options, parse } from '@rocket.chat/message-parser';
-import type { ComponentMeta, ComponentStoryFn, StoryFn } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import outdent from 'outdent';
 import { ReactElement, Suspense } from 'react';
 
@@ -69,9 +69,9 @@ export default {
 			},
 		},
 	},
-} as ComponentMeta<typeof Markup>;
+} satisfies Meta<typeof Markup>;
 
-const Template: ComponentStoryFn<typeof Markup> = (args) => <Markup {...args} />;
+const Template: StoryFn<typeof Markup> = (args) => <Markup {...args} />;
 
 export const Empty = Template.bind({});
 Empty.args = {

packages/gazzodown/tsconfig.build.json

@@ -4,6 +4,5 @@
 		"rootDir": "./src",
 		"outDir": "./dist"
 	},
-	"include": ["./src/**/*"],
-	"exclude": ["./src/**/*.spec.ts", "./src/**/*.spec.tsx"]
+	"exclude": ["./src/**/*.stories.tsx", "./src/**/*.spec.ts", "./src/**/*.spec.tsx", "./.storybook/**/*", "./jest.config.ts"]
 }

packages/gazzodown/tsconfig.json

@@ -1,3 +1,8 @@
 {
-	"extends": "../../tsconfig.base.client.json"
+	"extends": "../../tsconfig.base.client.json",
+	"compilerOptions": {
+		"rootDirs": ["./src", "./"],
+		"outDir": "./dist"
+	},
+	"include": ["./src/**/*", "./jest.config.ts", "./.storybook/**/*"]
 }

packages/ui-client/.babelrc.json

@@ -0,0 +1,9 @@
+{
+	"presets": [
+		"@babel/preset-env",
+		["@babel/preset-react", {
+			"runtime": "automatic"
+		}],
+		"@babel/preset-typescript"
+	]
+}

packages/ui-client/.storybook/main.ts

@@ -0,0 +1,37 @@
+import { dirname, join, resolve } from 'path';
+
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+export default {
+	stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+	addons: [
+		getAbsolutePath('@storybook/addon-essentials'),
+		getAbsolutePath('@storybook/addon-webpack5-compiler-babel'),
+		getAbsolutePath('@storybook/addon-styling-webpack'),
+	],
+
+	framework: {
+		name: getAbsolutePath('@storybook/react-webpack5'),
+		options: {},
+	},
+
+	typescript: {
+		reactDocgen: 'react-docgen',
+	},
+
+	docs: {},
+
+	webpackFinal: (config) => {
+		// This is only needed because of Fontello
+		config.resolve = {
+			...config.resolve,
+			roots: [...(config.resolve?.roots ?? []), resolve(__dirname, '../../../apps/meteor/public')],
+		};
+
+		return config;
+	},
+} satisfies StorybookConfig;
+
+function getAbsolutePath(value: any): string {
+	return dirname(require.resolve(join(value, 'package.json')));
+}

packages/ui-client/.storybook/preview.js → packages/ui-client/.storybook/preview.tsx

@@ -1,9 +1,10 @@
+import type { Decorator, Parameters } from '@storybook/react';
+
 import '../../../apps/meteor/app/theme/client/main.css';
 import 'highlight.js/styles/github.css';
 import '@rocket.chat/icons/dist/rocketchat.css';
 
-export const parameters = {
-	actions: { argTypesRegex: '^on[A-Z].*' },
+export const parameters: Parameters = {
 	controls: {
 		matchers: {
 			color: /(background|color)$/i,
@@ -12,7 +13,7 @@ export const parameters = {
 	},
 };
 
-export const decorators = [
+export const decorators: Decorator[] = [
 	(Story) => (
 		<div className='rc-old'>
 			<style>{`
@@ -24,3 +25,4 @@ export const decorators = [
 		</div>
 	),
 ];
+export const tags = ['autodocs'];

packages/ui-client/package.json

@@ -2,6 +2,21 @@
 	"name": "@rocket.chat/ui-client",
 	"version": "11.0.0",
 	"private": true,
+	"main": "./dist/index.js",
+	"typings": "./dist/index.d.ts",
+	"files": [
+		"/dist"
+	],
+	"scripts": {
+		"build": "rm -rf dist && tsc -p tsconfig.build.json",
+		"dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
+		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
+		"lint:fix": "eslint --ext .js,.jsx,.ts,.tsx . --fix",
+		"storybook": "storybook dev -p 6006",
+		"test": "jest",
+		"testunit": "jest",
+		"typecheck": "tsc --noEmit"
+	},
 	"devDependencies": {
 		"@babel/core": "~7.22.20",
 		"@react-aria/toolbar": "^3.0.0-beta.1",
@@ -13,16 +28,16 @@
 		"@rocket.chat/mock-providers": "workspace:^",
 		"@rocket.chat/ui-avatar": "workspace:~",
 		"@rocket.chat/ui-contexts": "workspace:~",
-		"@storybook/addon-actions": "~6.5.16",
-		"@storybook/addon-docs": "~6.5.16",
-		"@storybook/addon-essentials": "~6.5.16",
-		"@storybook/addon-interactions": "~6.5.16",
-		"@storybook/addon-links": "~6.5.16",
+		"@storybook/addon-actions": "^8.3.5",
+		"@storybook/addon-docs": "^8.3.5",
+		"@storybook/addon-essentials": "^8.3.5",
+		"@storybook/addon-interactions": "^8.3.5",
+		"@storybook/addon-links": "^8.3.5",
 		"@storybook/addon-postcss": "~2.0.0",
-		"@storybook/builder-webpack4": "~6.5.16",
-		"@storybook/manager-webpack4": "~6.5.16",
-		"@storybook/react": "~6.5.16",
-		"@storybook/testing-library": "~0.0.13",
+		"@storybook/addon-styling-webpack": "^1.0.0",
+		"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+		"@storybook/react": "^8.3.5",
+		"@storybook/react-webpack5": "^8.3.5",
 		"@testing-library/react": "~16.0.1",
 		"@types/jest": "~29.5.13",
 		"@types/react": "~17.0.80",
@@ -37,23 +52,9 @@
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
 		"react-hook-form": "~7.45.4",
+		"storybook": "^8.3.5",
 		"typescript": "~5.5.4"
 	},
-	"scripts": {
-		"build": "rm -rf dist && tsc -p tsconfig.build.json",
-		"dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
-		"typecheck": "tsc --noEmit",
-		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
-		"lint:fix": "eslint --ext .js,.jsx,.ts,.tsx . --fix",
-		"test": "jest",
-		"testunit": "jest",
-		"storybook": "start-storybook -p 6006"
-	},
-	"main": "./dist/index.js",
-	"typings": "./dist/index.d.ts",
-	"files": [
-		"/dist"
-	],
 	"peerDependencies": {
 		"@react-aria/toolbar": "*",
 		"@rocket.chat/css-in-js": "*",

packages/ui-client/src/components/DotLeader.stories.tsx

@@ -1,14 +1,14 @@
 import { Box } from '@rocket.chat/fuselage';
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 import { DotLeader } from './DotLeader';
 
 export default {
 	title: 'Components/DotLeader',
 	component: DotLeader,
-} as ComponentMeta<typeof DotLeader>;
+} satisfies Meta<typeof DotLeader>;
 
-export const Default: ComponentStory<typeof DotLeader> = (args) => (
+export const Default: StoryFn<typeof DotLeader> = (args) => (
 	<Box display='flex' flexDirection='row'>
 		Label
 		<DotLeader {...args} />