[DRAFT] wip - empty state component

packages/react-components/react-empty-state-preview/library/etc/react-empty-state-preview.api.md

@@ -0,0 +1,36 @@
+## API Report File for "@fluentui/react-empty-state-preview"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { ComponentProps } from '@fluentui/react-utilities/src/index';
+import { ComponentState } from '@fluentui/react-utilities/src/index';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+
+// @public (undocumented)
+export const EmptyState: ForwardRefComponent<EmptyStateProps>;
+
+// @public (undocumented)
+export type EmptyStateProps = ComponentProps<EmptyStateSlots>;
+
+// @public (undocumented)
+export type EmptyStateSlots = {
+    root: Slot<'div'>;
+    title: Slot<'span'>;
+};
+
+// @public (undocumented)
+export type EmptyStateState = ComponentState<EmptyStateSlots>;
+
+// @public (undocumented)
+export const renderEmptyState: (state: EmptyStateState) => JSX.Element;
+
+// @public
+export const useEmptyState: (props: EmptyStateProps, ref: React_2.Ref<HTMLElement>) => EmptyStateState;
+
+// (No @packageDocumentation comment for this package)
+
+```

packages/react-components/react-empty-state-preview/library/src/components/EmptyState/EmptyState.types.ts

@@ -13,6 +13,6 @@ export type EmptyStateSlots = {
   title: Slot<'span'>;
 };
 
-export type EmptyStateProps = ComponentProps<EmptyStateSlots> & {};
+export type EmptyStateProps = ComponentProps<EmptyStateSlots>;
 
-export type EmptyStateState = ComponentState<EmptyStateSlots> & {};
+export type EmptyStateState = ComponentState<EmptyStateSlots>;

packages/react-components/react-empty-state-preview/library/src/components/EmptyState/useEmptyState.tsx

@@ -12,7 +12,7 @@ import type { EmptyStateProps, EmptyStateState } from './EmptyState.types';
  * @param ref - reference to root HTMLElement of EmptyState
  */
 export const useEmptyState = (props: EmptyStateProps, ref: React.Ref<HTMLElement>): EmptyStateState => {
-  const { title } = props;
+  const { title, ...rest } = props;
 
   const state: EmptyStateState = {
     components: {
@@ -22,7 +22,7 @@ export const useEmptyState = (props: EmptyStateProps, ref: React.Ref<HTMLElement
     root: slot.always(
       getIntrinsicElementProps('div', {
         ref: ref as React.Ref<HTMLDivElement>,
-        ...props,
+        ...rest,
       }),
       { elementType: 'div' },
     ),

packages/react-components/react-empty-state-preview/library/src/components/EmptyState/useEmptyStateStyles.styles.ts

@@ -0,0 +1,42 @@
+import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import { tokens } from '@fluentui/react-theme';
+import type { EmptyStateSlots, EmptyStateState } from './EmptyState.types';
+
+export const emptyStateClassNames: SlotClassNames<EmptyStateSlots> = {
+  root: 'fui-EmptyState',
+  title: 'fui-EmptyState__title',
+};
+
+/**
+ * Styles for the root slot
+ */
+const useRootStyles = makeResetStyles({
+  padding: '20px',
+});
+
+const useTitleStyles = makeStyles({
+  title: {
+    fontSize: tokens.fontSizeBase500,
+    fontWeight: tokens.fontWeightSemibold,
+    color: tokens.colorNeutralForeground1,
+  },
+});
+
+/**
+ * Apply styling to the ColorSlider slots based on the state
+ */
+export const useColorSliderStyles_unstable = (state: EmptyStateState): EmptyStateState => {
+  'use no memo';
+
+  const rootStyles = useRootStyles();
+  const titleStyles = useTitleStyles();
+
+  state.root.className = mergeClasses(emptyStateClassNames.root, rootStyles, state.root.className);
+
+  if (state.title) {
+    state.title.className = mergeClasses(emptyStateClassNames.title, titleStyles.title);
+  }
+
+  return state;
+};

packages/react-components/react-empty-state-preview/stories/package.json

@@ -3,7 +3,9 @@
   "version": "0.0.0",
   "private": true,
   "devDependencies": {
+    "@fluentui/react-components": "*",
     "@fluentui/react-storybook-addon": "*",
+    "@fluentui/react-empty-state-preview": "*",
     "@fluentui/react-storybook-addon-export-to-sandbox": "*",
     "@fluentui/scripts-storybook": "*",
     "@fluentui/eslint-plugin": "*"

packages/react-components/react-empty-state-preview/stories/src/EmptyState/EmptyStateDefault.stories.tsx

@@ -1,4 +1,11 @@
 import * as React from 'react';
-import { EmptyState } from '../../../library/src'; // @fluentui/react-empty-state-preview?
+import { EmptyState } from '@fluentui/react-empty-state-preview';
 
-export const EmptyStateDefault = () => <EmptyState title="No data" />;
+export const EmptyStateDefault = () => {
+  return (
+    <div>
+      Test
+      {/* <EmptyState title="No data" /> */}
+    </div>
+  );
+};

packages/react-components/react-empty-state-preview/stories/src/EmptyState/index.stories.tsx

@@ -0,0 +1,13 @@
+import { EmptyState } from '@fluentui/react-empty-state-preview';
+
+export { EmptyStateDefault } from './EmptyStateDefault.stories';
+
+export default {
+  title: 'Preview Components/EmptyState',
+  component: EmptyState,
+  parameters: {
+    docs: {
+      description: 'The EmptyState component is used to indicate that there is no data to display.',
+    },
+  },
+};