chore(motion): align naming of stories (#33354)

microsoft · Nov 27, 2024 · 805932b · 805932b
1 parent 94f7b85
commit 805932b
Show file tree

Hide file tree

Showing 33 changed files with 75 additions and 72 deletions.
diff --git a/...teMotionComponent/MotionArrays.stories.md → ...nt/CreateMotionComponentArrays.stories.md b/...teMotionComponent/MotionArrays.stories.md → ...nt/CreateMotionComponentArrays.stories.md
diff --git a/...eMotionComponent/MotionArrays.stories.tsx → ...t/CreateMotionComponentArrays.stories.tsx b/...eMotionComponent/MotionArrays.stories.tsx → ...t/CreateMotionComponentArrays.stories.tsx
@@ -12,7 +12,7 @@ import {
 import { PlayFilled, PauseFilled } from '@fluentui/react-icons';
 import * as React from 'react';
 
-import description from './MotionArrays.stories.md';
+import description from './CreateMotionComponentArrays.stories.md';
 
 const useClasses = makeStyles({
   container: {
@@ -90,7 +90,7 @@ const FadeFastGrowSlow = createMotionComponent([
   },
 ]);
 
-export const MotionArrays = () => {
+export const CreateMotionComponentArrays = () => {
   const classes = useClasses();
 
   const motionRef = React.useRef<MotionImperativeRef>();
@@ -154,7 +154,7 @@ export const MotionArrays = () => {
   );
 };
 
-MotionArrays.parameters = {
+CreateMotionComponentArrays.parameters = {
   docs: {
     description: {
       story: description,

diff --git a/...s/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentDefault.stories.tsx b/...s/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentDefault.stories.tsx
@@ -1,6 +1,7 @@
 import {
   createMotionComponent,
   makeStyles,
+  type MotionComponentProps,
   type MotionImperativeRef,
   motionTokens,
   tokens,
@@ -42,7 +43,7 @@ const FadeEnter = createMotionComponent({
   iterations: Infinity,
 });
 
-export const CreateMotionComponentDefault = () => {
+export const CreateMotionComponentDefault = (props: MotionComponentProps) => {
   const classes = useClasses();
   const motionRef = React.useRef<MotionImperativeRef>();
 

diff --git a/...ct-motion/stories/src/CreateMotionComponent/CreateMotionComponentDescription.md b/...ct-motion/stories/src/CreateMotionComponent/CreateMotionComponentDescription.md
@@ -1,7 +1 @@
 `createMotionComponent()` is a factory function that creates a custom motion component powered by Web Animations API.
-
-<!-- Don't allow prettier to collapse code block into single line -->
-<!-- prettier-ignore -->
-> **⚠️ Preview packages are considered unstable:**
-> - Features and APIs may change before final release
-> - Please contact us if you intend to use this in your product
diff --git a/...omponent/CreateMotionComponent.stories.md → ...t/CreateMotionComponentFactory.stories.md b/...omponent/CreateMotionComponent.stories.md → ...t/CreateMotionComponentFactory.stories.md
diff --git a/...mponent/CreateMotionComponent.stories.tsx → .../CreateMotionComponentFactory.stories.tsx b/...mponent/CreateMotionComponent.stories.tsx → .../CreateMotionComponentFactory.stories.tsx
@@ -1,7 +1,7 @@
-import { createMotionComponent, MotionComponentProps, makeStyles, tokens } from '@fluentui/react-components';
+import { createMotionComponent, makeStyles, tokens } from '@fluentui/react-components';
 import * as React from 'react';
 
-import description from './CreateMotionComponent.stories.md';
+import description from './CreateMotionComponentFactory.stories.md';
 
 const useClasses = makeStyles({
   container: {
@@ -47,7 +47,7 @@ const DropIn = createMotionComponent({
   iterations: Infinity,
 });
 
-export const CreateMotionComponent = (props: MotionComponentProps) => {
+export const CreateMotionComponentFactory = () => {
   const classes = useClasses();
 
   return (
@@ -63,7 +63,7 @@ export const CreateMotionComponent = (props: MotionComponentProps) => {
   );
 };
 
-CreateMotionComponent.parameters = {
+CreateMotionComponentFactory.parameters = {
   docs: {
     description: {
       story: description,

diff --git a/...Component/MotionFunctionParams.stories.md → ...eMotionComponentFunctionParams.stories.md b/...Component/MotionFunctionParams.stories.md → ...eMotionComponentFunctionParams.stories.md
diff --git a/...omponent/MotionFunctionParams.stories.tsx → ...MotionComponentFunctionParams.stories.tsx b/...omponent/MotionFunctionParams.stories.tsx → ...MotionComponentFunctionParams.stories.tsx
@@ -10,7 +10,7 @@ import {
 } from '@fluentui/react-components';
 import * as React from 'react';
 
-import description from './MotionFunctionParams.stories.md';
+import description from './CreateMotionComponentFunctionParams.stories.md';
 
 const useClasses = makeStyles({
   container: {
@@ -84,7 +84,7 @@ const Scale = createMotionComponent<{ startFrom?: number }>(({ startFrom = 0.5 }
   };
 });
 
-export const MotionFunctionParams = () => {
+export const CreateMotionComponentFunctionParams = () => {
   const classes = useClasses();
 
   const motionBRef = React.useRef<MotionImperativeRef>();
@@ -142,7 +142,7 @@ export const MotionFunctionParams = () => {
   );
 };
 
-MotionFunctionParams.parameters = {
+CreateMotionComponentFunctionParams.parameters = {
   docs: {
     description: {
       story: description,

diff --git a/...otionComponent/MotionFunctions.stories.md → ...CreateMotionComponentFunctions.stories.md b/...otionComponent/MotionFunctions.stories.md → ...CreateMotionComponentFunctions.stories.md
diff --git a/...tionComponent/MotionFunctions.stories.tsx → ...reateMotionComponentFunctions.stories.tsx b/...tionComponent/MotionFunctions.stories.tsx → ...reateMotionComponentFunctions.stories.tsx
@@ -10,7 +10,7 @@ import {
 } from '@fluentui/react-components';
 import * as React from 'react';
 
-import description from './MotionFunctions.stories.md';
+import description from './CreateMotionComponentFunctions.stories.md';
 
 const useClasses = makeStyles({
   container: {
@@ -70,7 +70,7 @@ const Grow = createMotionComponent(({ element }) => ({
   iterations: Infinity,
 }));
 
-export const MotionFunctions = () => {
+export const CreateMotionComponentFunctions = () => {
   const classes = useClasses();
 
   const motionRef = React.useRef<MotionImperativeRef>();
@@ -122,7 +122,7 @@ export const MotionFunctions = () => {
   );
 };
 
-MotionFunctions.parameters = {
+CreateMotionComponentFunctions.parameters = {
   docs: {
     description: {
       story: description,

diff --git a/...mponent/ImperativeRefPlayState.stories.md → ...omponentImperativeRefPlayState.stories.md b/...mponent/ImperativeRefPlayState.stories.md → ...omponentImperativeRefPlayState.stories.md
diff --git a/...ponent/ImperativeRefPlayState.stories.tsx → ...mponentImperativeRefPlayState.stories.tsx b/...ponent/ImperativeRefPlayState.stories.tsx → ...mponentImperativeRefPlayState.stories.tsx
@@ -12,7 +12,7 @@ import {
 import { PlayFilled, PauseFilled } from '@fluentui/react-icons';
 import * as React from 'react';
 
-import description from './ImperativeRefPlayState.stories.md';
+import description from './CreateMotionComponentImperativeRefPlayState.stories.md';
 
 const useClasses = makeStyles({
   container: {
@@ -68,7 +68,7 @@ const FadeEnter = createMotionComponent({
   iterations: Infinity,
 });
 
-export const ImperativeRefPlayState = () => {
+export const CreateMotionComponentImperativeRefPlayState = () => {
   const classes = useClasses();
   const motionRef = React.useRef<MotionImperativeRef>();
 
@@ -130,7 +130,7 @@ export const ImperativeRefPlayState = () => {
   );
 };
 
-ImperativeRefPlayState.parameters = {
+CreateMotionComponentImperativeRefPlayState.parameters = {
   docs: {
     description: {
       story: description,

diff --git a/...onent/MotionLifecycleCallbacks.stories.md → ...ionComponentLifecycleCallbacks.stories.md b/...onent/MotionLifecycleCallbacks.stories.md → ...ionComponentLifecycleCallbacks.stories.md
@@ -1,4 +1,4 @@
-A React component created with `createMotionComponent` has the following lifecycle callbacks:
+A React component created with `createMotionComponent()` has the following lifecycle callbacks:
 
 - `onMotionStart` \- This is called when any motion has started
 - `onMotionFinish` \- This is called when all motions have finished

diff --git a/...nent/MotionLifecycleCallbacks.stories.tsx → ...onComponentLifecycleCallbacks.stories.tsx b/...nent/MotionLifecycleCallbacks.stories.tsx → ...onComponentLifecycleCallbacks.stories.tsx
@@ -14,7 +14,7 @@ import {
 import { ReplayFilled } from '@fluentui/react-icons';
 import * as React from 'react';
 
-import description from './MotionLifecycleCallbacks.stories.md';
+import description from './CreateMotionComponentLifecycleCallbacks.stories.md';
 
 const useClasses = makeStyles({
   container: {
@@ -93,7 +93,7 @@ const FadeEnter = createMotionComponent({
   duration: motionTokens.durationSlow,
 });
 
-export const MotionLifecycleCallbacks = () => {
+export const CreateMotionComponentLifecycleCallbacks = () => {
   const classes = useClasses();
   const logLabelId = useId();
 
@@ -174,7 +174,7 @@ export const MotionLifecycleCallbacks = () => {
   );
 };
 
-MotionLifecycleCallbacks.parameters = {
+CreateMotionComponentLifecycleCallbacks.parameters = {
   docs: {
     description: {
       story: description,

diff --git a/...ateMotionComponent/TokensUsage.stories.md → ...eateMotionComponentTokensUsage.stories.md b/...ateMotionComponent/TokensUsage.stories.md → ...eateMotionComponentTokensUsage.stories.md
diff --git a/...teMotionComponent/TokensUsage.stories.tsx → ...ateMotionComponentTokensUsage.stories.tsx b/...teMotionComponent/TokensUsage.stories.tsx → ...ateMotionComponentTokensUsage.stories.tsx
@@ -1,7 +1,7 @@
 import { createMotionComponent, makeStyles, tokens } from '@fluentui/react-components';
 import * as React from 'react';
 
-import description from './TokensUsage.stories.md';
+import description from './CreateMotionComponentTokensUsage.stories.md';
 
 const useClasses = makeStyles({
   container: {
@@ -47,7 +47,7 @@ const BackgroundChange = createMotionComponent({
   iterations: Infinity,
 });
 
-export const TokensUsage = () => {
+export const CreateMotionComponentTokensUsage = () => {
   const classes = useClasses();
 
   return (
@@ -63,7 +63,7 @@ export const TokensUsage = () => {
   );
 };
 
-TokensUsage.parameters = {
+CreateMotionComponentTokensUsage.parameters = {
   docs: {
     description: {
       story: description,

diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/index.stories.ts b/packages/react-components/react-motion/stories/src/CreateMotionComponent/index.stories.ts
@@ -1,22 +1,22 @@
 import type { Meta } from '@storybook/react';
 import CreateMotionComponentDescription from './CreateMotionComponentDescription.md';
-import { CreateMotionComponent } from './CreateMotionComponent.stories';
+import { CreateMotionComponentDefault } from './CreateMotionComponentDefault.stories';
 
 export { CreateMotionComponentDefault as Default } from './CreateMotionComponentDefault.stories';
 
-export { CreateMotionComponent as createMotionComponent } from './CreateMotionComponent.stories';
+export { CreateMotionComponentFactory as createMotionComponent } from './CreateMotionComponentFactory.stories';
 
-export { ImperativeRefPlayState as imperativeRef } from './ImperativeRefPlayState.stories';
-export { TokensUsage as tokens } from './TokensUsage.stories';
+export { CreateMotionComponentImperativeRefPlayState as imperativeRef } from './CreateMotionComponentImperativeRefPlayState.stories';
+export { CreateMotionComponentTokensUsage as tokens } from './CreateMotionComponentTokensUsage.stories';
 
-export { MotionLifecycleCallbacks as LifecycleCallbacks } from './MotionLifecycleCallbacks.stories';
-export { MotionArrays as arrays } from './MotionArrays.stories';
-export { MotionFunctions as functions } from './MotionFunctions.stories';
-export { MotionFunctionParams as functionParams } from './MotionFunctionParams.stories';
+export { CreateMotionComponentLifecycleCallbacks as LifecycleCallbacks } from './CreateMotionComponentLifecycleCallbacks.stories';
+export { CreateMotionComponentArrays as arrays } from './CreateMotionComponentArrays.stories';
+export { CreateMotionComponentFunctions as functions } from './CreateMotionComponentFunctions.stories';
+export { CreateMotionComponentFunctionParams as functionParams } from './CreateMotionComponentFunctionParams.stories';
 
 export default {
   title: 'Motion/APIs/createMotionComponent',
-  component: CreateMotionComponent,
+  component: CreateMotionComponentDefault,
   parameters: {
     docs: {
       description: {

diff --git a/...esenceComponent/PresenceAppear.stories.md → .../CreatePresenceComponentAppear.stories.md b/...esenceComponent/PresenceAppear.stories.md → .../CreatePresenceComponentAppear.stories.md
diff --git a/...senceComponent/PresenceAppear.stories.tsx → ...CreatePresenceComponentAppear.stories.tsx b/...senceComponent/PresenceAppear.stories.tsx → ...CreatePresenceComponentAppear.stories.tsx
@@ -11,7 +11,7 @@ import {
 } from '@fluentui/react-components';
 import * as React from 'react';
 
-import description from './PresenceAppear.stories.md';
+import description from './CreatePresenceComponentAppear.stories.md';
 
 const useClasses = makeStyles({
   container: {
@@ -72,7 +72,7 @@ const Fade = createPresenceComponent({
   },
 });
 
-export const PresenceAppear = () => {
+export const CreatePresenceComponentAppear = () => {
   const classes = useClasses();
   const motionRef = React.useRef<MotionImperativeRef>();
 
@@ -124,7 +124,7 @@ export const PresenceAppear = () => {
   );
 };
 
-PresenceAppear.parameters = {
+CreatePresenceComponentAppear.parameters = {
   docs: {
     description: {
       story: description,

diff --git a/...Component/PresenceMotionArrays.stories.md → .../CreatePresenceComponentArrays.stories.md b/...Component/PresenceMotionArrays.stories.md → .../CreatePresenceComponentArrays.stories.md
diff --git a/...omponent/PresenceMotionArrays.stories.tsx → ...CreatePresenceComponentArrays.stories.tsx b/...omponent/PresenceMotionArrays.stories.tsx → ...CreatePresenceComponentArrays.stories.tsx
@@ -11,7 +11,7 @@ import {
 } from '@fluentui/react-components';
 import * as React from 'react';
 
-import description from './PresenceMotionArrays.stories.md';
+import description from './CreatePresenceComponentArrays.stories.md';
 
 const useClasses = makeStyles({
   container: {
@@ -95,7 +95,7 @@ const FastFadeSlowScale = createPresenceComponent({
   },
 });
 
-export const PresenceMotionArrays = () => {
+export const CreatePresenceComponentArrays = () => {
   const classes = useClasses();
 
   const motionRef = React.useRef<MotionImperativeRef>();
@@ -148,7 +148,7 @@ export const PresenceMotionArrays = () => {
   );
 };
 
-PresenceMotionArrays.parameters = {
+CreatePresenceComponentArrays.parameters = {
   docs: {
     description: {
       story: description,

diff --git a/...act-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentDefault.stories.tsx b/...act-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentDefault.stories.tsx
@@ -1,4 +1,12 @@
-import { createPresenceComponent, Field, makeStyles, motionTokens, tokens, Switch } from '@fluentui/react-components';
+import {
+  createPresenceComponent,
+  Field,
+  makeStyles,
+  motionTokens,
+  tokens,
+  Switch,
+  PresenceComponentProps,
+} from '@fluentui/react-components';
 import * as React from 'react';
 
 const useClasses = makeStyles({
@@ -55,7 +63,7 @@ const Fade = createPresenceComponent({
   },
 });
 
-export const CreatePresenceComponentDefault = () => {
+export const CreatePresenceComponentDefault = (props: PresenceComponentProps) => {
   const classes = useClasses();
   const [visible, setVisible] = React.useState<boolean>(false);
 

diff --git a/...ponent/CreatePresenceComponent.stories.md → ...CreatePresenceComponentFactory.stories.md b/...ponent/CreatePresenceComponent.stories.md → ...CreatePresenceComponentFactory.stories.md
diff --git a/...onent/CreatePresenceComponent.stories.tsx → ...reatePresenceComponentFactory.stories.tsx b/...onent/CreatePresenceComponent.stories.tsx → ...reatePresenceComponentFactory.stories.tsx
@@ -3,13 +3,12 @@ import {
   Field,
   makeStyles,
   type MotionImperativeRef,
-  PresenceComponentProps,
   tokens,
   Switch,
 } from '@fluentui/react-components';
 import * as React from 'react';
 
-import description from './CreatePresenceComponent.stories.md';
+import description from './CreatePresenceComponentFactory.stories.md';
 
 const useClasses = makeStyles({
   container: {
@@ -68,7 +67,7 @@ const DropIn = createPresenceComponent({
   },
 });
 
-export const CreatePresenceComponent = (props: PresenceComponentProps) => {
+export const CreatePresenceComponentFactory = () => {
   const classes = useClasses();
 
   const motionRef = React.useRef<MotionImperativeRef>();
@@ -91,7 +90,7 @@ export const CreatePresenceComponent = (props: PresenceComponentProps) => {
   );
 };
 
-CreatePresenceComponent.parameters = {
+CreatePresenceComponentFactory.parameters = {
   docs: {
     description: {
       story: description,

diff --git a/...t/PresenceMotionFunctionParams.stories.md → ...resenceComponentFunctionParams.stories.md b/...t/PresenceMotionFunctionParams.stories.md → ...resenceComponentFunctionParams.stories.md
diff --git a/.../PresenceMotionFunctionParams.stories.tsx → ...esenceComponentFunctionParams.stories.tsx b/.../PresenceMotionFunctionParams.stories.tsx → ...esenceComponentFunctionParams.stories.tsx
@@ -11,7 +11,7 @@ import {
 } from '@fluentui/react-components';
 import * as React from 'react';
 
-import description from './PresenceMotionFunctionParams.stories.md';
+import description from './CreatePresenceComponentFunctionParams.stories.md';
 
 const useClasses = makeStyles({
   container: {
@@ -91,7 +91,7 @@ const Scale = createPresenceComponent<{ startFrom?: number }>(({ startFrom = 0.5
   };
 });
 
-export const PresenceMotionFunctionParams = () => {
+export const CreatePresenceComponentFunctionParams = () => {
   const classes = useClasses();
 
   const motionBRef = React.useRef<MotionImperativeRef>();
@@ -152,7 +152,7 @@ export const PresenceMotionFunctionParams = () => {
   );
 };
 
-PresenceMotionFunctionParams.parameters = {
+CreatePresenceComponentFunctionParams.parameters = {
   docs: {
     description: {
       story: description,

diff --git a/...ponent/PresenceMotionFunctions.stories.md → ...eatePresenceComponentFunctions.stories.md b/...ponent/PresenceMotionFunctions.stories.md → ...eatePresenceComponentFunctions.stories.md