Skip to content

Commit

Permalink
Recover storybooks from @rocket.chat/ui-video-conf and `@rocket.cha…
Browse files Browse the repository at this point in the history
…t/ui-voip`
  • Loading branch information
tassoevan committed Oct 14, 2024
1 parent 6c9cdbf commit c3925f5
Show file tree
Hide file tree
Showing 35 changed files with 340 additions and 190 deletions.
9 changes: 9 additions & 0 deletions packages/ui-video-conf/.babelrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"presets": [
"@babel/preset-env",
["@babel/preset-react", {
"runtime": "automatic"
}],
"@babel/preset-typescript"
]
}
2 changes: 1 addition & 1 deletion packages/ui-video-conf/.eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,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",
Expand Down
12 changes: 0 additions & 12 deletions packages/ui-video-conf/.storybook/main.js

This file was deleted.

38 changes: 38 additions & 0 deletions packages/ui-video-conf/.storybook/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
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-a11y'),
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')));
}
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import type { Decorator } from '@storybook/react';
import type { ReactElement } from '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].*' },
controls: {
matchers: {
color: /(background|color)$/i,
Expand All @@ -12,8 +14,8 @@ export const parameters = {
},
};

export const decorators = [
(Story) => (
export const decorators: Decorator[] = [
(Story): ReactElement => (
<div className='rc-old'>
<style>{`
body {
Expand All @@ -24,3 +26,4 @@ export const decorators = [
</div>
),
];
export const tags = ['autodocs'];
7 changes: 6 additions & 1 deletion packages/ui-video-conf/jest.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,10 @@ import type { Config } from 'jest';
export default {
preset: client.preset,
setupFilesAfterEnv: [...client.setupFilesAfterEnv],
testMatch: ['<rootDir>/src/**/*.spec.{ts,tsx}'],
moduleNameMapper: {
'^react($|/.+)': '<rootDir>/../../node_modules/react$1',
'^react-dom/client$': '<rootDir>/../../node_modules/react-dom$1',
'^react-dom($|/.+)': '<rootDir>/../../node_modules/react-dom$1',
'^react-i18next($|/.+)': '<rootDir>/../../node_modules/react-i18next$1',
},
} satisfies Config;
27 changes: 15 additions & 12 deletions packages/ui-video-conf/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,24 +13,25 @@
"@rocket.chat/styled": "~0.31.25",
"@rocket.chat/ui-avatar": "workspace:^",
"@rocket.chat/ui-contexts": "workspace:^",
"@storybook/addon-a11y": "^6.5.16",
"@storybook/addon-actions": "~6.5.16",
"@storybook/addon-docs": "~6.5.16",
"@storybook/addon-essentials": "~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/testing-react": "~1.3.0",
"@storybook/addon-a11y": "^8.3.5",
"@storybook/addon-actions": "^8.3.5",
"@storybook/addon-docs": "^8.3.5",
"@storybook/addon-essentials": "^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",
"@types/jest": "~29.5.13",
"@types/jest-axe": "~3.5.9",
"@types/react": "~17.0.80",
"eslint": "~8.45.0",
"eslint-plugin-react": "~7.32.2",
"eslint-plugin-react-hooks": "~4.6.2",
"eslint-plugin-storybook": "~0.6.15",
"jest": "~29.7.0",
"jest-axe": "~9.0.0",
"react-docgen-typescript-plugin": "~1.0.8",
"react": "~17.0.2",
"storybook": "^8.3.5",
"typescript": "~5.5.4"
},
"peerDependencies": {
Expand All @@ -41,15 +42,17 @@
"@rocket.chat/styled": "*",
"@rocket.chat/ui-avatar": "7.0.0",
"@rocket.chat/ui-contexts": "11.0.0",
"react": "^17.0.2",
"react": "~17.0.2",
"react-dom": "^17.0.2"
},
"scripts": {
"eslint": "eslint --ext .js,.jsx,.ts,.tsx .",
"eslint:fix": "eslint --ext .js,.jsx,.ts,.tsx . --fix",
"typecheck": "tsc --noEmit",
"test": "jest",
"testunit": "jest",
"build": "tsc -p tsconfig.build.json",
"storybook": "start-storybook -p 6006",
"storybook": "storybook dev -p 6006",
"dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput"
},
"main": "./dist/index.js",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { composeStories } from '@storybook/testing-react';
import { composeStories } from '@storybook/react';
import { render } from '@testing-library/react';
import { axe } from 'jest-axe';

Expand All @@ -7,12 +7,12 @@ import * as stories from './VideoConfButton.stories';
const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);

test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
const tree = render(<Story />);
const tree = render(<Story />, { legacyRoot: true });
expect(tree.baseElement).toMatchSnapshot();
});

test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
const { container } = render(<Story />);
const { container } = render(<Story />, { legacyRoot: true });

const results = await axe(container);
expect(results).toHaveNoViolations();
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import type { ComponentMeta, ComponentStory } from '@storybook/react';
import type { Meta, StoryFn } from '@storybook/react';

import VideoConfButton from './VideoConfButton';

export default {
title: 'Components/VideoConfButton',
component: VideoConfButton,
} satisfies ComponentMeta<typeof VideoConfButton>;
decorators: [],
} satisfies Meta<typeof VideoConfButton>;

export const Default: ComponentStory<typeof VideoConfButton> = () => <VideoConfButton>Button</VideoConfButton>;
export const Default: StoryFn<typeof VideoConfButton> = (args) => <VideoConfButton {...args}>Button</VideoConfButton>;
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { composeStories } from '@storybook/testing-react';
import { composeStories } from '@storybook/react';
import { render } from '@testing-library/react';
import { axe } from 'jest-axe';

Expand All @@ -7,12 +7,12 @@ import * as stories from './VideoConfController.stories';
const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);

test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
const tree = render(<Story />);
const tree = render(<Story />, { legacyRoot: true });
expect(tree.baseElement).toMatchSnapshot();
});

test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
const { container } = render(<Story />);
const { container } = render(<Story />, { legacyRoot: true });

const results = await axe(container);
expect(results).toHaveNoViolations();
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import type { ComponentMeta, ComponentStory } from '@storybook/react';
import type { Meta, StoryFn } from '@storybook/react';

import VideoConfController from './VideoConfController';

export default {
title: 'Components/VideoConfController',
component: VideoConfController,
} satisfies ComponentMeta<typeof VideoConfController>;
} satisfies Meta<typeof VideoConfController>;

export const Default: ComponentStory<typeof VideoConfController> = (args) => <VideoConfController {...args} />;
export const Default: StoryFn<typeof VideoConfController> = (args) => <VideoConfController {...args} />;
Default.args = {
'icon': 'info',
'aria-label': 'info',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { composeStories } from '@storybook/testing-react';
import { composeStories } from '@storybook/react';
import { render } from '@testing-library/react';
import { axe } from 'jest-axe';

Expand All @@ -7,12 +7,12 @@ import * as stories from './VideoConfMessage.stories';
const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);

test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
const tree = render(<Story />);
const tree = render(<Story />, { legacyRoot: true });
expect(tree.baseElement).toMatchSnapshot();
});

test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
const { container } = render(<Story />);
const { container } = render(<Story />, { legacyRoot: true });

const results = await axe(container);
expect(results).toHaveNoViolations();
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { MessageDivider, Message, Avatar, Box } from '@rocket.chat/fuselage';
import type { ComponentMeta, ComponentStory } from '@storybook/react';
import type { Meta, StoryFn } from '@storybook/react';
import type { ReactElement } from 'react';

import { VideoConfMessage, VideoConfMessageIcon, VideoConfMessageRow, VideoConfMessageText } from '.';
Expand Down Expand Up @@ -40,12 +40,12 @@ export default {
</Box>
),
],
} satisfies ComponentMeta<typeof VideoConfMessage>;
} satisfies Meta<typeof VideoConfMessage>;

const avatarUrl =
'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z';

export const CallingDM: ComponentStory<typeof VideoConfMessage> = () => (
export const CallingDM: StoryFn<typeof VideoConfMessage> = () => (
<VideoConfMessage>
<VideoConfMessageRow>
<VideoConfMessageContent>
Expand All @@ -63,7 +63,7 @@ export const CallingDM: ComponentStory<typeof VideoConfMessage> = () => (
</VideoConfMessage>
);

export const CallEndedDM: ComponentStory<typeof VideoConfMessage> = () => (
export const CallEndedDM: StoryFn<typeof VideoConfMessage> = () => (
<VideoConfMessage>
<VideoConfMessageRow>
<VideoConfMessageContent>
Expand All @@ -81,7 +81,7 @@ export const CallEndedDM: ComponentStory<typeof VideoConfMessage> = () => (
</VideoConfMessage>
);

export const CallOngoing: ComponentStory<typeof VideoConfMessage> = () => (
export const CallOngoing: StoryFn<typeof VideoConfMessage> = () => (
<VideoConfMessage>
<VideoConfMessageRow>
<VideoConfMessageContent>
Expand All @@ -100,7 +100,7 @@ export const CallOngoing: ComponentStory<typeof VideoConfMessage> = () => (
</VideoConfMessage>
);

export const CallEnded: ComponentStory<typeof VideoConfMessage> = () => (
export const CallEnded: StoryFn<typeof VideoConfMessage> = () => (
<VideoConfMessage>
<VideoConfMessageRow>
<VideoConfMessageContent>
Expand All @@ -118,4 +118,4 @@ export const CallEnded: ComponentStory<typeof VideoConfMessage> = () => (
</VideoConfMessage>
);

export const Loading: ComponentStory<typeof VideoConfMessage> = () => <VideoConfMessageSkeleton />;
export const Loading: StoryFn<typeof VideoConfMessage> = () => <VideoConfMessageSkeleton />;
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
import type { AllHTMLAttributes, ReactElement } from 'react';

type VideoConfMessageProps = Omit<AllHTMLAttributes<HTMLDivElement>, 'is'>;

const VideoConfMessage = (props: VideoConfMessageProps): ReactElement => (
<Box
mbs={4}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { IVideoConferenceUser, Serialized } from '@rocket.chat/core-typings';
import { Avatar, Box } from '@rocket.chat/fuselage';
import { useUserAvatarPath } from '@rocket.chat/ui-contexts';
import { ReactElement, memo } from 'react';
import { memo, type ReactElement } from 'react';

const MAX_USERS = 3;

Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { composeStories } from '@storybook/testing-react';
import { composeStories } from '@storybook/react';
import { render } from '@testing-library/react';
import { axe } from 'jest-axe';

Expand All @@ -7,12 +7,12 @@ import * as stories from './VideoConfPopup.stories';
const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);

test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
const tree = render(<Story />);
const tree = render(<Story />, { legacyRoot: true });
expect(tree.baseElement).toMatchSnapshot();
});

test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
const { container } = render(<Story />);
const { container } = render(<Story />, { legacyRoot: true });

const results = await axe(container);
expect(results).toHaveNoViolations();
Expand Down
Loading

0 comments on commit c3925f5

Please sign in to comment.