Convert @fluentui/react-text stories to index.stories.tsx approach (#…

…23662)

* chore: Convert Text to index based stories

* changefile

change/@fluentui-react-text-a50df107-186b-4e4b-ab2b-806d0e31b0b7.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: Convert Text to index based stories",
+  "packageName": "@fluentui/react-text",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/react-components/react-text/.storybook/main.js

@@ -2,7 +2,7 @@ const rootMain = require('../../../../.storybook/main');
 
 module.exports = /** @type {Omit<import('../../../../.storybook/main'), 'typescript'|'babel'>} */ ({
   ...rootMain,
-  stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'],
+  stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'],
   addons: [...rootMain.addons],
   webpackFinal: (config, options) => {
     const localConfig = { ...rootMain.webpackFinal(config, options) };

packages/react-components/react-text/src/stories/Default.stories.tsx → packages/react-components/react-text/src/stories/Text/Default.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { makeStyles } from '@griffel/react';
-import { Text } from '../Text';
-import type { TextProps } from '../Text';
+import { Text } from '@fluentui/react-text';
+import type { TextProps } from '@fluentui/react-text';
 
 const useStyles = makeStyles({
   container: {

packages/react-components/react-text/src/stories/TextFont.stories.tsx → packages/react-components/react-text/src/stories/Text/TextFont.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text } from '../index';
+import { Text } from '@fluentui/react-text';
 
 export const Font = () => (
   <div style={{ display: 'flex', gap: 20 }}>

packages/react-components/react-text/src/stories/TextItalic.stories.tsx → packages/react-components/react-text/src/stories/Text/TextItalic.stories.tsx

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { Text } from '../index';
+import { Text } from '@fluentui/react-text';
 
 export const Italic = () => <Text italic>Italic text</Text>;

packages/react-components/react-text/src/stories/TextSize.stories.tsx → packages/react-components/react-text/src/stories/Text/TextSize.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text } from '../index';
+import { Text } from '@fluentui/react-text';
 
 export const Size = () => (
   <div style={{ display: 'flex', gap: 10, alignItems: 'baseline' }}>

packages/react-components/react-text/src/stories/TextStrikeThrough.stories.tsx → packages/react-components/react-text/src/stories/Text/TextStrikeThrough.stories.tsx

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { Text } from '../index';
+import { Text } from '@fluentui/react-text';
 
 export const StrikeThrough = () => <Text strikethrough>Strikethrough text</Text>;

packages/react-components/react-text/src/stories/TextTruncate.stories.tsx → packages/react-components/react-text/src/stories/Text/TextTruncate.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text } from '../index';
+import { Text } from '@fluentui/react-text';
 
 export const Truncate = () => (
   <Text truncate style={{ width: 100, overflow: 'hidden', whiteSpace: 'nowrap' }} block>

packages/react-components/react-text/src/stories/TextTypography.stories.tsx → packages/react-components/react-text/src/stories/Text/TextTypography.stories.tsx

@@ -1,5 +1,16 @@
 import * as React from 'react';
-import { Body1, Caption1, Display, Subtitle1, LargeTitle, Title1, Title2, Title3, Subtitle2, Caption2 } from '../index';
+import {
+  Body1,
+  Caption1,
+  Display,
+  Subtitle1,
+  LargeTitle,
+  Title1,
+  Title2,
+  Title3,
+  Subtitle2,
+  Caption2,
+} from '@fluentui/react-text';
 
 export const Typography = () => (
   <>

packages/react-components/react-text/src/stories/TextUnderline.stories.tsx → packages/react-components/react-text/src/stories/Text/TextUnderline.stories.tsx

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { Text } from '../index';
+import { Text } from '@fluentui/react-text';
 
 export const Underline = () => <Text underline>Underlined text</Text>;

packages/react-components/react-text/src/stories/TextWeight.stories.tsx → packages/react-components/react-text/src/stories/Text/TextWeight.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text } from '../index';
+import { Text } from '@fluentui/react-text';
 
 export const Weight = () => (
   <div style={{ display: 'flex', gap: 20 }}>

packages/react-components/react-text/src/stories/Text.stories.tsx → packages/react-components/react-text/src/stories/Text/index.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react';
-import { Text } from '../Text';
+import { Text } from '@fluentui/react-text';
 import textDescriptionMd from './TextDescription.md';
 import textBestPractices from './TextBestPractices.md';