diff --git a/.storybook/main.ts b/.storybook/main.ts new file mode 100644 index 000000000..00f1703c0 --- /dev/null +++ b/.storybook/main.ts @@ -0,0 +1,42 @@ +import sharedConfig from '../webpack/shared'; + +import type { StorybookConfig } from '@storybook/core-common'; + +const config: StorybookConfig = { + stories: [ + '../stories/**/*.stories.mdx', + '../stories/**/*.stories.@(js|jsx|ts|tsx)' + ], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-interactions', + { + name: '@storybook/addon-postcss', + options: { + postcssLoaderOptions: { + implementation: require('postcss'), + }, + }, + }, + ], + framework: '@storybook/react', + core: { + builder: '@storybook/builder-webpack5', + }, + webpackFinal: async (config) => { + config.resolve!.alias = { + ...sharedConfig.resolve!.alias, + ...config.resolve!.alias, + }; + + config.resolve!.modules = [ + ...sharedConfig.resolve!.modules!, + ...config.resolve!.modules!, + ]; + + return config; + }, +}; + +export default config; \ No newline at end of file diff --git a/.storybook/preview.ts b/.storybook/preview.ts new file mode 100644 index 000000000..c876c5abf --- /dev/null +++ b/.storybook/preview.ts @@ -0,0 +1,12 @@ +import '../app/styles/tailwind.css'; +import '../stories/theme.css'; + +export const parameters = { + actions: { argTypesRegex: "^on[A-Z].*" }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, +} \ No newline at end of file diff --git a/app/soapbox/components/account-search.tsx b/app/soapbox/components/account-search.tsx index a3d7fd1a6..f69845dd3 100644 --- a/app/soapbox/components/account-search.tsx +++ b/app/soapbox/components/account-search.tsx @@ -1,4 +1,4 @@ -import classNames from 'clsx'; +import clsx from 'clsx'; import React, { useState } from 'react'; import { defineMessages, useIntl } from 'react-intl'; @@ -77,12 +77,12 @@ const AccountSearch: React.FC = ({ onSelected, ...rest }) => { > diff --git a/app/soapbox/components/announcements/announcements-panel.tsx b/app/soapbox/components/announcements/announcements-panel.tsx index 2febea40d..800328678 100644 --- a/app/soapbox/components/announcements/announcements-panel.tsx +++ b/app/soapbox/components/announcements/announcements-panel.tsx @@ -1,4 +1,4 @@ -import classNames from 'clsx'; +import clsx from 'clsx'; import { List as ImmutableList, Map as ImmutableMap } from 'immutable'; import React, { useState } from 'react'; import { FormattedMessage } from 'react-intl'; @@ -52,7 +52,7 @@ const AnnouncementsPanel = () => { key={i} tabIndex={0} onClick={() => setIndex(i)} - className={classNames({ + className={clsx({ 'w-2 h-2 rounded-full focus:ring-primary-600 focus:ring-2 focus:ring-offset-2': true, 'bg-gray-200 hover:bg-gray-300': i !== index, 'bg-primary-600': i === index, diff --git a/app/soapbox/components/announcements/reaction.tsx b/app/soapbox/components/announcements/reaction.tsx index 230613701..edcdc5206 100644 --- a/app/soapbox/components/announcements/reaction.tsx +++ b/app/soapbox/components/announcements/reaction.tsx @@ -1,4 +1,4 @@ -import classNames from 'clsx'; +import clsx from 'clsx'; import React, { useState } from 'react'; import AnimatedNumber from 'soapbox/components/animated-number'; @@ -43,7 +43,7 @@ const Reaction: React.FC = ({ announcementId, reaction, addReaction, return (