microsoft · TristanWatanabe · Oct 18, 2022 · Oct 13, 2022 · Oct 13, 2022 · Oct 13, 2022
diff --git a/change/@fluentui-react-card-b12bffb2-b1c6-45bf-ba0b-23cb9108bd9e.json b/change/@fluentui-react-card-b12bffb2-b1c6-45bf-ba0b-23cb9108bd9e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: Migrate to new package structure.",
+  "packageName": "@fluentui/react-card",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
@@ -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
 

@@ -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) };

@@ -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"]
 }
@@ -16,7 +16,7 @@ import { Card, CardPreview, CardHeader, CardFooter } from "@fluentui/react-compo
 
 Example Card usage:
 
-![example of a Card component in usage](./assets/card-example.png)
+![example of a Card component in usage](./docs/assets/card-example.png)
 
 ```jsx
 import { Share16Regular, ArrowReply16Regular } from '@fluentui/react-icons';

@@ -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"
+  }
 }
@@ -5,7 +5,7 @@
   "description": "Card container components for Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
-  "typings": "dist/index.d.ts",
+  "typings": "./dist/index.d.ts",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -23,10 +23,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-card/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": "*",
@@ -58,9 +57,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"
   }
 }
@@ -14,7 +14,7 @@ const mountFluent = (element: JSX.Element) => {
 const CardSample = (props: CardProps) => {
   const ASSET_URL = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-card';
 
-  const powerpointLogoURL = ASSET_URL + '/assets/powerpoint_logo.svg';
+  const powerpointLogoURL = ASSET_URL + '/stories/assets/powerpoint_logo.svg';
 
   return (
     <>

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

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

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

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

@@ -5,9 +5,9 @@ import { ArrowReplyRegular, ShareRegular } from '@fluentui/react-icons';
 import { Card, CardFooter, CardHeader, CardPreview } from '@fluentui/react-card';
 
 const ASSET_URL = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card';
-const avatarElviaURL = ASSET_URL + '/assets/avatar_elvia.svg';
-const wordLogoURL = ASSET_URL + '/assets/word_logo.svg';
-const docTemplateURL = ASSET_URL + '/assets/doc_template.png';
+const avatarElviaURL = ASSET_URL + '/stories/assets/avatar_elvia.svg';
+const wordLogoURL = ASSET_URL + '/stories/assets/word_logo.svg';
+const docTemplateURL = ASSET_URL + '/stories/assets/doc_template.png';
 
 export const Default = () => {
   return (

@@ -6,7 +6,7 @@ import { SampleCard, Title } from './SampleCard.stories';
 import Logo from '../../../assets/logo.svg';
 
 const ASSET_URL = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card';
-const avatarElviaURL = ASSET_URL + '/assets/avatar_elvia.svg';
+const avatarElviaURL = ASSET_URL + '/stories/assets/avatar_elvia.svg';
 
 const useStyles = makeStyles({
   root: {

@@ -24,14 +24,14 @@ import {
   MoreHorizontal48Regular,
 } from '@fluentui/react-icons';
 import { Card, CardHeader, CardPreview } from '@fluentui/react-card';
-import appLogo from '../../../assets/app_logo.svg';
-import logo1 from '../../../assets/logo.svg';
-import logo2 from '../../../assets/logo2.svg';
-import logo3 from '../../../assets/logo3.svg';
-import excelLogo from '../../../assets/excel_logo.svg';
-import office1 from '../../../assets/office1.png';
-import office2 from '../../../assets/office2.png';
-import avatarColin from '../../../assets/avatar_colin.svg';
+import appLogo from '../assets/app_logo.svg';
+import logo1 from '../assets/logo.svg';
+import logo2 from '../assets/logo2.svg';
+import logo3 from '../assets/logo3.svg';
+import excelLogo from '../assets/excel_logo.svg';
+import office1 from '../assets/office1.png';
+import office2 from '../assets/office2.png';
+import avatarColin from '../assets/avatar_colin.svg';
 
 const ASSET_URL = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card';
 const powerpointLogoURL = ASSET_URL + '/assets/powerpoint_logo.svg';

@@ -5,8 +5,8 @@ import { Card, CardHeader, CardFooter, CardPreview } from '@fluentui/react-card'
 import type { CardProps } from '@fluentui/react-card';
 
 const ASSET_URL = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card';
-const powerpointLogoURL = ASSET_URL + '/assets/powerpoint_logo.svg';
-const salesPresentationTemplateURL = ASSET_URL + '/assets/sales_template.png';
+const powerpointLogoURL = ASSET_URL + '/stories/assets/powerpoint_logo.svg';
+const salesPresentationTemplateURL = ASSET_URL + '/stories/assets/sales_template.png';
 
 export const SampleCard = (props: CardProps) => (
   <Card {...props}>

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { makeStyles, Button } from '@fluentui/react-components';
 import { ArrowReply16Regular, MoreHorizontal16Filled, Share16Regular } from '@fluentui/react-icons';
-import { CardFooter } from '../../index';
+import { CardFooter } from '@fluentui/react-card';
 
 const useStyles = makeStyles({
   footer: {

@@ -1,4 +1,4 @@
-import { CardFooter } from '../../index';
+import { CardFooter } from '@fluentui/react-card';
 import descriptionMd from './CardFooterDescription.md';
 
 export { Default } from './CardFooterDefault.stories';

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { CardHeader } from '../../index';
+import { CardHeader } from '@fluentui/react-card';
 import { makeStyles, shorthands, Button, Body1, Caption1 } from '@fluentui/react-components';
 import { MoreHorizontal20Filled } from '@fluentui/react-icons';
 
 const ASSET_URL = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card';
 
-const powerpointLogoURL = ASSET_URL + '/assets/powerpoint_logo.svg';
+const powerpointLogoURL = ASSET_URL + '/stories/assets/powerpoint_logo.svg';
 
 const useStyles = makeStyles({
   container: {

@@ -1,4 +1,4 @@
-import { CardHeader } from '../../index';
+import { CardHeader } from '@fluentui/react-card';
 import descriptionMd from './CardHeaderDescription.md';
 
 export { Default } from './CardHeaderDefault.stories';

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { CardPreview } from '../../index';
+import { CardPreview } from '@fluentui/react-card';
 
 const ASSET_URL = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card';
-const wordLogoURL = ASSET_URL + '/assets/word_logo.svg';
-const docTemplateURL = ASSET_URL + '/assets/doc_template.png';
+const wordLogoURL = ASSET_URL + '/stories/assets/word_logo.svg';
+const docTemplateURL = ASSET_URL + '/stories/assets/doc_template.png';
 
 export const Default = () => (
   <CardPreview logo={<img src={wordLogoURL} alt="Microsoft Word logo" />}>

@@ -1,4 +1,4 @@
-import { CardPreview } from '../../index';
+import { CardPreview } from '@fluentui/react-card';
 import descriptionMd from './CardPreviewDescription.md';
 
 export { Default } from './CardPreviewDefault.stories';

@@ -1,9 +1,9 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": "./tsconfig.json",
   "compilerOptions": {
     "isolatedModules": false,
     "types": ["node", "cypress", "cypress-storybook/cypress", "cypress-real-events"],
     "lib": ["ES2019", "dom"]
   },
-  "include": ["**/*.ts", "**/*.tsx"]
+  "include": ["**/*.cy.ts", "**/*.cy.tsx"]
 }
@@ -22,7 +22,7 @@
       "path": "./.storybook/tsconfig.json"
     },
     {
-      "path": "./e2e/tsconfig.json"
+      "path": "./tsconfig.cy.json"
     }
   ]
 }
@@ -3,20 +3,22 @@
   "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",
     "**/*.test.tsx",
     "**/*.stories.ts",
-    "**/*.stories.tsx"
+    "**/*.stories.tsx",
+    "**/*.cy.ts",
+    "**/*.cy.tsx"
   ],
   "include": ["./src/**/*.ts", "./src/**/*.tsx"]
 }
@@ -5,5 +5,13 @@
     "outDir": "dist",
     "types": ["jest", "node"]
   },
-  "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"
+  ]
 }