chore(react-text): migrate to new package structure (microsoft#25231)

change/@fluentui-react-text-a4574ee1-6ef1-490d-930a-383a0cd7c20f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: Migrate to new package structure.",
+  "packageName": "@fluentui/react-text",
+  "email": "tristan.watanabe@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-text/.npmignore

@@ -3,10 +3,11 @@
 bundle-size/
 config/
 coverage/
-e2e/
+docs/
 etc/
 node_modules/
 src/
+stories/
 dist/types/
 temp/
 __fixtures__
@@ -16,7 +17,7 @@ __tests__
 *.api.json
 *.log
 *.spec.*
-*.stories.*
+*.cy.*
 *.test.*
 *.yml
 

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/**/index.stories.@(ts|tsx)'],
+  stories: [...rootMain.stories, '../stories/**/*.stories.mdx', '../stories/**/index.stories.@(ts|tsx)'],
   addons: [...rootMain.addons],
   webpackFinal: (config, options) => {
     const localConfig = { ...rootMain.webpackFinal(config, options) };

packages/react-components/react-text/.storybook/tsconfig.json

@@ -6,5 +6,5 @@
     "checkJs": true,
     "types": ["static-assets", "environment", "storybook__addons"]
   },
-  "include": ["../src/**/*.stories.ts", "../src/**/*.stories.tsx", "*.js"]
+  "include": ["../stories/**/*.stories.ts", "../stories/**/*.stories.tsx", "*.js"]
 }

packages/react-components/react-text/README.md

@@ -47,7 +47,7 @@ const App = () => (
 
 ## Typography wrappers
 
-![List of typography variants by sorted descending by size](./assets/typography-examples.gif 'Typography wrapper list')
+![List of typography variants by sorted descending by size](./docs/assets/typography-examples.gif 'Typography wrapper list')
 
 Wrappers offer an easy way to use text according to the Fluent Design System while also providing semantic code readability.
 

packages/react-components/react-text/config/api-extractor.json

@@ -1,5 +1,9 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
   "extends": "@fluentui/scripts/api-extractor/api-extractor.common.v-next.json",
-  "mainEntryPointFilePath": "<projectFolder>/dist/types/index.d.ts"
+  "dtsRollup": {
+    "enabled": true,
+    "untrimmedFilePath": "",
+    "publicTrimmedFilePath": "<projectFolder>/dist/index.d.ts"
+  }
 }

packages/react-components/react-text/package.json

@@ -4,7 +4,7 @@
   "description": "Text is a typography and styling abstraction component that can be used to ensure the consistency of all text across your application.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
-  "typings": "dist/index.d.ts",
+  "typings": "./dist/index.d.ts",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -20,10 +20,9 @@
     "lint": "just-scripts lint",
     "start": "yarn storybook",
     "test": "jest --passWithNoTests",
-    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-text/src && yarn docs",
     "storybook": "start-storybook",
-    "type-check": "tsc -b tsconfig.json"
+    "type-check": "tsc -b tsconfig.json",
+    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
@@ -51,9 +50,10 @@
   },
   "exports": {
     ".": {
-      "types": "./lib/index.d.ts",
+      "types": "./dist/index.d.ts",
       "import": "./lib/index.js",
       "require": "./lib-commonjs/index.js"
-    }
+    },
+    "./package.json": "./package.json"
   }
 }

packages/react-components/react-text/src/components/Body1/Body1.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import { Body1 } from './Body1';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 
 describe('Body1', () => {
   isConformant({

packages/react-components/react-text/src/components/Caption1/Caption1.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import { Caption1 } from './Caption1';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 
 describe('Caption1', () => {
   isConformant({

packages/react-components/react-text/src/components/Caption2/Caption2.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import { Caption2 } from './Caption2';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 
 describe('Caption2', () => {
   isConformant({

packages/react-components/react-text/src/components/Display/Display.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import { Display } from './Display';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 
 describe('Display', () => {
   isConformant({

packages/react-components/react-text/src/components/LargeTitle/LargeTitle.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import { LargeTitle } from './LargeTitle';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 
 describe('LargeTitle', () => {
   isConformant({

packages/react-components/react-text/src/components/Subtitle1/Subtitle1.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import { Subtitle1 } from './Subtitle1';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 
 describe('Subtitle1', () => {
   isConformant({

packages/react-components/react-text/src/components/Subtitle2/Subtitle2.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import { Subtitle2 } from './Subtitle2';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 
 describe('Subtitle2', () => {
   isConformant({

packages/react-components/react-text/src/components/Text/Text.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import { Text } from './Text';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 import { TextProps } from './Text.types';
 
 describe('Text', () => {

packages/react-components/react-text/src/components/Title1/Title1.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import { Title1 } from './Title1';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 
 describe('Title1', () => {
   isConformant({

packages/react-components/react-text/src/components/Title2/Title2.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import { Title2 } from './Title2';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 
 describe('Title2', () => {
   isConformant({

packages/react-components/react-text/src/components/Title3/Title3.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import { Title3 } from './Title3';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 
 describe('Title3', () => {
   isConformant({

packages/react-components/react-text/tsconfig.lib.json

@@ -3,14 +3,14 @@
   "compilerOptions": {
     "noEmit": false,
     "lib": ["ES2019", "dom"],
-    "outDir": "dist",
     "declaration": true,
-    "declarationDir": "dist/types",
+    "declarationDir": "../../../dist/out-tsc/types",
+    "outDir": "../../../dist/out-tsc",
     "inlineSources": true,
     "types": ["static-assets", "environment"]
   },
   "exclude": [
-    "./src/common/**",
+    "./src/testing/**",
     "**/*.spec.ts",
     "**/*.spec.tsx",
     "**/*.test.ts",

packages/react-components/react-text/tsconfig.spec.json

@@ -5,5 +5,13 @@
     "outDir": "dist",
     "types": ["jest", "node", "@testing-library/jest-dom"]
   },
-  "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
+  "include": [
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.d.ts",
+    "./src/testing/**/*.ts",
+    "./src/testing/**/*.tsx"
+  ]
 }