Add new components Combobox and EmptyState (#37748)

app/javascript/mastodon/components/empty_state/empty_state.module.scss

@@ -0,0 +1,23 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 600px;
+  padding: 20px;
+  gap: 16px;
+  text-align: center;
+  color: var(--color-text-primary);
+}
+
+.content {
+  h3 {
+    font-size: 17px;
+    font-weight: 500;
+  }
+
+  p {
+    font-size: 15px;
+    margin-top: 8px;
+    color: var(--color-text-secondary);
+  }
+}

app/javascript/mastodon/components/empty_state/empty_state.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { action } from 'storybook/actions';
+
+import { Button } from '../button';
+
+import { EmptyState } from '.';
+
+const meta = {
+  title: 'Components/EmptyState',
+  component: EmptyState,
+  argTypes: {
+    title: {
+      control: 'text',
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+  },
+} satisfies Meta<typeof EmptyState>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    message: 'Try clearing filters or refreshing the page.',
+  },
+};
+
+export const WithoutMessage: Story = {
+  args: {
+    message: undefined,
+  },
+};
+
+export const WithAction: Story = {
+  args: {
+    ...Default.args,
+    // eslint-disable-next-line react/jsx-no-bind
+    children: <Button onClick={() => action('Refresh')}>Refresh</Button>,
+  },
+};

app/javascript/mastodon/components/empty_state/index.tsx

@@ -0,0 +1,32 @@
+import { FormattedMessage } from 'react-intl';
+
+import classes from './empty_state.module.scss';
+
+/**
+ * Simple empty state component with a neutral default title and customisable message.
+ *
+ * Action buttons can be passed as `children`
+ */
+
+export const EmptyState: React.FC<{
+  title?: string | React.ReactElement;
+  message?: string | React.ReactElement;
+  children?: React.ReactNode;
+}> = ({
+  title = (
+    <FormattedMessage id='empty_state.no_results' defaultMessage='No results' />
+  ),
+  message,
+  children,
+}) => {
+  return (
+    <div className={classes.wrapper}>
+      <div className={classes.content}>
+        <h3>{title}</h3>
+        {!!message && <p>{message}</p>}
+      </div>
+
+      {children}
+    </div>
+  );
+};