docs(react-keytips): add custom doc container and decorator for keytips

microsoft · Oct 25, 2024 · 9289b9e · 9289b9e
1 parent 474d865
commit 9289b9e
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 27 deletions.
diff --git a/packages/react-keytips/stories/Default.stories.tsx b/packages/react-keytips/stories/Default.stories.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react';
 import {
-  Keytips,
-  KeytipsProps,
   ExecuteKeytipEventHandler,
   useKeytipRef,
 } from '@fluentui-contrib/react-keytips';
@@ -122,7 +120,7 @@ const MenuButtonComponent = () => {
   );
 };
 
-export const DefaultStory = (props: KeytipsProps) => {
+export const DefaultStory = () => {
   const classes = useStyles();
 
   const normalButton = useKeytipRef({
@@ -146,7 +144,6 @@ export const DefaultStory = (props: KeytipsProps) => {
 
   return (
     <>
-      <Keytips {...props} content="Alt Meta" />
       <div className={classes.column}>
         <div className={classes.row}>
           <Button ref={normalButton}>Button</Button>

diff --git a/packages/react-keytips/stories/Dynamic.stories.tsx b/packages/react-keytips/stories/Dynamic.stories.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react';
 import {
-  Keytips,
-  KeytipsProps,
   ExecuteKeytipEventHandler,
   useKeytipRef,
 } from '@fluentui-contrib/react-keytips';
@@ -21,7 +19,7 @@ const useStyles = makeStyles({
   },
 });
 
-export const DynamicStory = (props: KeytipsProps) => {
+export const DynamicStory = () => {
   const classes = useStyles();
 
   const [currentButton, setCurrentButton] = React.useState('Button 1');
@@ -52,7 +50,6 @@ export const DynamicStory = (props: KeytipsProps) => {
 
   return (
     <>
-      <Keytips {...props} content="Alt Control" />
       <div className={classes.column}>
         <div className={classes.row}>
           <Button

diff --git a/packages/react-keytips/stories/OverflowMenu.stories.tsx b/packages/react-keytips/stories/OverflowMenu.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-  Keytips,
   ExecuteKeytipEventHandler,
   useKeytipRef,
 } from '@fluentui-contrib/react-keytips';
@@ -163,7 +162,6 @@ export const OverflowStory = () => {
 
   return (
     <>
-      <Keytips content="Alt Control" />
       <Overflow>
         <div className={mergeClasses(styles.container, styles.resizableArea)}>
           {itemIds.map((i) => (

diff --git a/packages/react-keytips/stories/WithTabs.stories.tsx b/packages/react-keytips/stories/WithTabs.stories.tsx
@@ -1,8 +1,6 @@
 import * as React from 'react';
 import {
   ExecuteKeytipEventHandler,
-  Keytips,
-  KeytipsProps,
   useKeytipRef,
 } from '@fluentui-contrib/react-keytips';
 import {
@@ -44,7 +42,7 @@ const btnExecute: ExecuteKeytipEventHandler = (_, el) => {
   el.targetElement?.click();
 };
 
-export const WithTabsStory = (props: KeytipsProps) => {
+export const WithTabsStory = () => {
   const classes = useStyles();
 
   const [selectedValue, setSelectedValue] = React.useState<TabValue>('1');
@@ -103,7 +101,6 @@ export const WithTabsStory = (props: KeytipsProps) => {
 
   return (
     <>
-      <Keytips {...props} content="Alt Control" />
       <TabList onTabSelect={onTabSelect}>
         <Tab id="1" ref={refFirstTab} value="1">
           First Tab

diff --git a/packages/react-keytips/stories/index.stories.ts b/packages/react-keytips/stories/index.stories.ts
diff --git a/packages/react-keytips/stories/index.stories.tsx b/packages/react-keytips/stories/index.stories.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+
+import { Meta } from '@storybook/react';
+import { Keytips } from '@fluentui-contrib/react-keytips';
+export { DefaultStory as Default } from './Default.stories';
+export { WithTabsStory as WithTabs } from './WithTabs.stories';
+export { DynamicStory as Dynamic } from './Dynamic.stories';
+export { OverflowStory as Overflow } from './OverflowMenu.stories';
+import { DocsContainer, type DocsContextProps } from '@storybook/addon-docs';
+import { webLightTheme, FluentProvider } from '@fluentui/react-components';
+
+interface CustomKeytipsContainerProps {
+  children: React.ReactNode;
+  context: DocsContextProps;
+}
+
+const CustomKeytipsContainer = ({
+  children,
+  context,
+}: CustomKeytipsContainerProps) => {
+  return (
+    <FluentProvider
+      className="sb-unstyled"
+      style={{ backgroundColor: 'transparent' }}
+      theme={webLightTheme}
+    >
+      <Keytips />
+      <DocsContainer context={context}>{children}</DocsContainer>
+    </FluentProvider>
+  );
+};
+
+const meta = {
+  title: 'Packages/react-keytips',
+  component: Keytips,
+  decorators: [
+    (Story, { viewMode }) => (
+      <>
+        {viewMode === 'story' && <Keytips />}
+        <Story />
+      </>
+    ),
+  ],
+  parameters: {
+    docs: {
+      container: CustomKeytipsContainer,
+    },
+  },
+} satisfies Meta<typeof Keytips>;
+
+export default meta;