chore: Remove src, test, build, docs path aliases

.github/test-a-feature.md

@@ -51,9 +51,9 @@ These tests are typically imported into individual component tests.
 Every common test receives your component as its first argument.
 
 ```tsx
-import { isConformant } from 'test/specs/commonTests'
+import { isConformant } from '../../commonTests'
 
-import Divider from 'src/components/Divider/Divider'
+import { Divider } from '@fluentui/react'
 
 describe('Divider', () => {
   isConformant(Divider)
@@ -85,9 +85,9 @@ There should be one describe block for each prop of your component.
 Example for `Button` component:
 
 ```tsx
-import { isConformant } from 'test/specs/commonTests'
+import { isConformant } from '../../commonTests'
 
-import Button from 'src/components/Button'
+import { Button } from '@fluentui/react'
 
 describe('Button', () => {
   isConformant(Button)
@@ -242,7 +242,7 @@ Add your spec file into the array of files `skipSpecChecksForFiles` in `testHelp
 
 ## Performance Tests
 
-Performance tests will measure performance, set a baseline for performance and help guard against regressions. 
+Performance tests will measure performance, set a baseline for performance and help guard against regressions.
 
 ### Adding a Perf Test
 

build/gulp/plugins/gulp-example-source.ts

@@ -7,7 +7,7 @@ import Vinyl from 'vinyl'
 
 const prettierConfig = require('../../../.prettierrc.json')
 
-import { ExampleSource } from '../../../docs/src/types'
+import { ExampleSource } from './util/docs-types'
 import transformStarImportPlugin from '../../babel/transform-star-import-plugin'
 import { getRelativePathToSourceFile } from './util'
 

build/gulp/plugins/util/docs-types.ts

@@ -0,0 +1,5 @@
+// Temporary workaround to prevent having a circular dependency on @fluentui/docs or
+// outside-package path imports in several files. Long-term the types and/or docs build scripts
+// should move somewhere else.
+// TODO (@ecraig12345) - remove relative docs import
+export * from '../../.././../docs/src/types'

build/gulp/plugins/util/getComponentInfo.ts

@@ -4,7 +4,7 @@ import _ from 'lodash'
 import path from 'path'
 import fs from 'fs'
 
-import { BehaviorInfo, ComponentInfo, ComponentProp } from 'docs/src/types'
+import { BehaviorInfo, ComponentInfo, ComponentProp } from './docs-types'
 import * as docgen from './docgen'
 import parseDefaultValue from './parseDefaultValue'
 import parseDocblock from './parseDocblock'

build/gulp/plugins/util/getShorthandInfo.ts

@@ -2,7 +2,7 @@ import * as Babel from '@babel/core'
 import { NodePath } from '@babel/traverse'
 import * as t from '@babel/types'
 
-import { ComponentInfo } from 'docs/src/types'
+import { ComponentInfo } from './docs-types'
 
 type ShorthandInfo = Required<
   Pick<ComponentInfo, 'implementsCreateShorthand' | 'mappedShorthandProp'>

build/gulp/plugins/util/parseDefaultValue.ts

@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import * as React from 'react'
 
-import { ComponentPropType } from 'docs/src/types'
+import { ComponentPropType } from './docs-types'
 import { PropItem } from './docgen'
 
 const parseDefaultValue = (

build/gulp/plugins/util/parseType.ts

@@ -3,7 +3,7 @@ import { NodePath } from '@babel/traverse'
 import * as t from '@babel/types'
 import _ from 'lodash'
 
-import { ComponentPropType } from 'docs/src/types'
+import { ComponentPropType } from './docs-types'
 import { PropItem } from './docgen'
 import parseTypeAnnotation from './parseTypeAnnotation'
 

build/gulp/plugins/util/parseTypeAnnotation.ts

@@ -1,7 +1,7 @@
 import * as t from '@babel/types'
 import _ from 'lodash'
 
-import { ComponentPropType } from 'docs/src/types'
+import { ComponentPropType } from './docs-types'
 
 const keywords: Record<string, Function> = {
   any: t.isTSAnyKeyword,

build/gulp/tasks/perf.ts

@@ -17,7 +17,7 @@ import {
 } from '../../../perf/types'
 import config from '../../../config'
 import webpackPlugin from '../plugins/gulp-webpack'
-import { safeLaunchOptions } from 'build/puppeteer.config'
+import { safeLaunchOptions } from '../../puppeteer.config'
 
 const { paths } = config
 const { colors, log } = require('gulp-load-plugins')().util

build/gulp/tasks/test-dependencies/utils.ts

@@ -59,11 +59,7 @@ export const prepareWebpackConfig = (options: WebpackOptions) => {
     ],
     resolve: {
       extensions: ['.ts', '.tsx', '.js', '.json'],
-      alias: {
-        ...lernaAliases(),
-        src: paths.packageSrc('react'),
-        docs: paths.base('docs'),
-      },
+      alias: lernaAliases(),
     },
   }
 }

build/gulp/tasks/test-projects.ts

@@ -11,7 +11,7 @@ import del from 'del'
 import config from '../../../config'
 import tmp from 'tmp'
 import http from 'http'
-import { safeLaunchOptions } from 'build/puppeteer.config'
+import { safeLaunchOptions } from '../../puppeteer.config'
 
 type PackedPackages = Record<string, string>
 

build/screener/screener.config.js

@@ -1,7 +1,7 @@
 require('@fluentui/internal-tooling/babel/register')
 
 const config = require('../../config').default
-const { compilerOptions } = require('../../build/tsconfig.docs.json')
+const { compilerOptions } = require('../../build/tsconfig.common.json')
 
 require('tsconfig-paths').register({
   baseUrl: config.path_base,

build/tsconfig.docs.json

@@ -1,13 +1,7 @@
 {
   "extends": "./tsconfig.common.json",
   "compilerOptions": {
-    "module": "esnext",
-    "paths": {
-      "@fluentui/*": ["packages/*/src"],
-      "docs/*": ["docs/*"],
-      "src/*": ["packages/react/src/*"],
-      "test/*": ["packages/react/test/*"]
-    }
+    "module": "esnext"
   },
-  "include": ["../docs/src", "../packages/react/src", "../types"]
+  "include": ["../docs/src", "../types"]
 }

build/webpack.config.perf.ts

@@ -54,8 +54,6 @@ const webpackConfig: any = {
     extensions: ['.ts', '.tsx', '.js', '.json'],
     alias: {
       ...lernaAliases(),
-      docs: paths.base('docs'),
-      src: paths.packageSrc('react'),
 
       // We are using React in production mode with tracing.
       // https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977

build/webpack.config.ts

@@ -116,11 +116,7 @@ const webpackConfig: any = {
   ].filter(Boolean),
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.json'],
-    alias: {
-      ...lernaAliases(),
-      src: paths.packageSrc('react'),
-      docs: paths.base('docs'),
-    },
+    alias: lernaAliases(),
   },
   optimization: {
     // Automatically split vendor and commons

docs/src/components/ComponentDoc/BehaviorCard.tsx

@@ -3,7 +3,7 @@ import { Divider, ICSSInJSStyle, Segment, Text } from '@fluentui/react'
 import * as _ from 'lodash'
 import ComponentExampleTitle from './ComponentExample/ComponentExampleTitle'
 import BehaviorDescription from './BehaviorDescription'
-import { BehaviorVariantionInfo } from 'docs/src/types'
+import { BehaviorVariantionInfo } from '../../types'
 
 export const behaviorVariantDisplayName = (fileName: string) => {
   const divided = _.startCase(fileName.replace(/Behavior\.ts$/, ''))

docs/src/components/ComponentDoc/ComponentBestPractices.tsx

@@ -2,8 +2,8 @@ import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { exampleBestPracticesContext } from 'docs/src/utils'
-import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+import { exampleBestPracticesContext } from '../../utils'
+import ExampleSection from '../ComponentDoc/ExampleSection'
 
 interface ComponentBestPracticesProps {
   displayName: string

docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx

@@ -4,7 +4,7 @@ import * as _ from 'lodash'
 import * as React from 'react'
 import { NavLink } from 'react-router-dom'
 
-import { ComponentSourceManagerLanguage } from 'docs/src/components/ComponentDoc/ComponentSourceManager'
+import { ComponentSourceManagerLanguage } from '../ComponentSourceManager'
 import ComponentControlsCodeSandbox, {
   CodeSandboxState,
 } from './ComponentControlsCodeSandbox/ComponentControlsCodeSandbox'

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox/ComponentControlsCodeSandbox.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import CodeSandboxer from 'react-codesandboxer'
 
-import { ComponentSourceManagerLanguage } from 'docs/src/components/ComponentDoc/ComponentSourceManager'
+import { ComponentSourceManagerLanguage } from '../../ComponentSourceManager'
 import { appTemplate } from './indexTemplates'
 import createPackageJson from './createPackageJson'
 

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox/createPackageJson.ts

@@ -1,7 +1,7 @@
 import * as _ from 'lodash'
 
-import { imports } from 'docs/src/components/Playground/renderConfig'
-import { ComponentSourceManagerLanguage } from 'docs/src/components/ComponentDoc/ComponentSourceManager'
+import { imports } from '../../../Playground/renderConfig'
+import { ComponentSourceManagerLanguage } from '../../ComponentSourceManager'
 
 const name = 'fluent-ui-example'
 const description =

docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCopyLink.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as _ from 'lodash'
-import { Icon, Tooltip } from 'src/index'
+import { Icon, Tooltip } from '@fluentui/react'
 
 export default class ComponentControlsCopyLink extends React.Component<any, any> {
   mounted: boolean

docs/src/components/ComponentDoc/ComponentDoc.tsx

@@ -2,16 +2,16 @@ import * as React from 'react'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
 import { tabListBehavior, Header, Icon, Dropdown, Text, Grid, Menu } from '@fluentui/react'
 
-import { getFormattedHash } from 'docs/src/utils'
+import { getFormattedHash } from '../../utils'
 // import ComponentDocLinks from './ComponentDocLinks'
 // import ComponentDocSee from './ComponentDocSee'
 import { ComponentExamples } from './ComponentExamples'
 import ComponentProps from './ComponentProps'
 import { ComponentDocAccessibility } from './ComponentDocAccessibility'
-import { ThemeContext } from 'docs/src/context/ThemeContext'
-import ExampleContext from 'docs/src/context/ExampleContext'
-import ComponentPlayground from 'docs/src/components/ComponentPlayground/ComponentPlayground'
-import { ComponentInfo } from 'docs/src/types'
+import { ThemeContext } from '../../context/ThemeContext'
+import ExampleContext from '../../context/ExampleContext'
+import ComponentPlayground from '../ComponentPlayground/ComponentPlayground'
+import { ComponentInfo } from '../../types'
 import ComponentBestPractices from './ComponentBestPractices'
 import * as _ from 'lodash'
 

docs/src/components/ComponentDoc/ComponentDocAccessibility.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react'
 import * as _ from 'lodash'
 import { Flex, Loader, Text, Segment, Header } from '@fluentui/react'
-import { link } from './../../utils/helpers'
-import { BehaviorInfo, ComponentInfo, BehaviorVariantionInfo } from 'docs/src/types'
+import { link } from '../../utils/helpers'
+import { BehaviorInfo, ComponentInfo, BehaviorVariantionInfo } from '../../types'
 import { BehaviorCard, exampleStyle, behaviorVariantDisplayName } from './BehaviorCard'
 
 const InlineMarkdown = React.lazy(() => import('./InlineMarkdown'))
 
-const behaviorMenu = require('docs/src/behaviorMenu')
+const behaviorMenu = require('../../behaviorMenu')
 
 const knownIsusesId = 'known-issues'
 

docs/src/components/ComponentDoc/ComponentDocLinks.tsx

@@ -1,7 +1,6 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-import { Flex, Icon } from '@fluentui/react'
-import { constants } from '@fluentui/react/src/utils'
+import { Flex, Icon, constants } from '@fluentui/react'
 
 export default class ComponentDocLinks extends React.PureComponent<any, any> {
   static propTypes = {

docs/src/components/ComponentDoc/ComponentDocSee.tsx

@@ -4,7 +4,7 @@ import * as React from 'react'
 import { Link } from 'react-router-dom'
 import { List, Header } from '@fluentui/react'
 
-import { getComponentPathname, getInfoForSeeTags } from 'docs/src/utils'
+import { getComponentPathname, getInfoForSeeTags } from '../../utils'
 
 const listStyle = { display: 'block' }
 

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -7,6 +7,7 @@ import {
 } from '@fluentui/docs-components'
 import {
   ComponentVariablesInput,
+  constants,
   Flex,
   ICSSInJSStyle,
   Menu,
@@ -21,18 +22,17 @@ import * as copyToClipboard from 'copy-to-clipboard'
 import qs from 'qs'
 import SourceRender from 'react-source-render'
 
-import { examplePathToHash, getFormattedHash, scrollToAnchor } from 'docs/src/utils'
-import { constants } from '@fluentui/react/src/utils'
-import Editor, { EDITOR_BACKGROUND_COLOR, EDITOR_GUTTER_COLOR } from 'docs/src/components/Editor'
-import { babelConfig, importResolver } from 'docs/src/components/Playground/renderConfig'
-import ExampleContext, { ExampleContextValue } from 'docs/src/context/ExampleContext'
+import { examplePathToHash, getFormattedHash, scrollToAnchor } from '../../../utils'
+import Editor, { EDITOR_BACKGROUND_COLOR, EDITOR_GUTTER_COLOR } from '../../Editor'
+import { babelConfig, importResolver } from '../../Playground/renderConfig'
+import ExampleContext, { ExampleContextValue } from '../../../context/ExampleContext'
 import ComponentControls from '../ComponentControls'
 import ComponentExampleTitle from './ComponentExampleTitle'
 import ComponentSourceManager, {
   ComponentSourceManagerRenderProps,
 } from '../ComponentSourceManager'
-import VariableResolver from 'docs/src/components/VariableResolver/VariableResolver'
-import ComponentExampleVariables from 'docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables'
+import VariableResolver from '../../VariableResolver/VariableResolver'
+import ComponentExampleVariables from './ComponentExampleVariables'
 
 const ERROR_COLOR = '#D34'
 

docs/src/components/ComponentDoc/ComponentExample/ComponentExampleColorPicker.tsx

@@ -1,12 +1,10 @@
-import { ProviderContextPrepared } from '@fluentui/react'
+import { ProviderContextPrepared, ColorVariants } from '@fluentui/react'
 import * as Color from 'color'
 import * as _ from 'lodash'
 import * as React from 'react'
 // @ts-ignore
 import { ThemeContext } from 'react-fela'
 
-import { ColorVariants } from 'src/themes/types'
-
 type ComponentExampleColorPickerProps = {
   onChange: (colorValue: string) => void
   variableValue: string

docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariable.tsx

@@ -1,6 +1,6 @@
 import { Input, InputProps, Popup } from '@fluentui/react'
 import * as React from 'react'
-import ComponentExampleColorPicker from 'docs/src/components/ComponentDoc/ComponentExample/ComponentExampleColorPicker'
+import ComponentExampleColorPicker from './ComponentExampleColorPicker'
 
 export type ComponentExampleVariableProps = {
   componentName: string

docs/src/components/ComponentDoc/ComponentExamples.tsx

@@ -2,7 +2,7 @@ import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { exampleIndexContext, exampleSourcesContext } from 'docs/src/utils'
+import { exampleIndexContext, exampleSourcesContext } from '../../utils'
 import { List, Segment } from '@fluentui/react'
 import { componentAPIs } from './ComponentSourceManager'
 

docs/src/components/ComponentDoc/ComponentPerfExample/ComponentPerfChart.tsx

@@ -1,8 +1,8 @@
 import * as _ from 'lodash'
 import { Box, Flex, RadioGroup, Text, Checkbox } from '@fluentui/react'
-import { PerfChart, usePerfData } from 'docs/src/components/ComponentDoc/PerfChart'
+import { PerfChart, usePerfData } from '../PerfChart'
 import * as React from 'react'
-import { PerfData, PerfSample } from 'docs/src/components/ComponentDoc/PerfChart/PerfDataContext'
+import { PerfData, PerfSample } from '../PerfChart/PerfDataContext'
 
 enum FILTER_BY {
   CI_BUILD = 'ci build',

docs/src/components/ComponentDoc/ComponentProps/ComponentProps.tsx

@@ -2,7 +2,7 @@ import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { getComponentGroup, scrollToAnchor } from 'docs/src/utils'
+import { getComponentGroup, scrollToAnchor } from '../../../utils'
 import ComponentPropsOutline from './ComponentPropsOutline'
 import { Flex, Header } from '@fluentui/react'
 import ComponentPropCard from './ComponentPropCard'

docs/src/components/ComponentDoc/ComponentProps/ComponentPropsOutline.tsx

@@ -1,6 +1,6 @@
 import * as _ from 'lodash'
 import * as React from 'react'
-import { link } from 'docs/src/utils/helpers'
+import { link } from '../../../utils/helpers'
 
 const ComponentPropsOutline: any = (props: ComponentPropsOutlineProps) => {
   const { displayNames } = props

docs/src/components/ComponentDoc/ComponentPropsTable/ComponentPropsRow.tsx

@@ -2,10 +2,10 @@ import * as React from 'react'
 import * as _ from 'lodash'
 import { Link } from 'react-router-dom'
 
-import { ComponentProp, ComponentPropType } from 'docs/src/types'
-import componentInfoContext from 'docs/src/utils/componentInfoContext'
+import { ComponentProp, ComponentPropType } from '../../../types'
+import componentInfoContext from '../../../utils/componentInfoContext'
 import ComponentPropName from '../ComponentProp/ComponentPropName'
-import { getComponentGroup } from 'docs/src/utils'
+import { getComponentGroup } from '../../../utils'
 
 const InlineMarkdown = React.lazy(() => import('../InlineMarkdown'))
 

docs/src/components/ComponentDoc/ComponentPropsTable/ComponentPropsTable.tsx

@@ -1,7 +1,7 @@
 import { Loader } from '@fluentui/react'
 import * as React from 'react'
 
-import useComponentProps from 'docs/src/components/ComponentDoc/useComponentProps'
+import useComponentProps from '../useComponentProps'
 import ComponentPropsRow from './ComponentPropsRow'
 
 const tableStyles: React.CSSProperties = {