microsoft · ecraig12345 · Dec 10, 2019 · Dec 6, 2019 · Dec 6, 2019 · Dec 6, 2019
@@ -1,10 +1,4 @@
 coverage/
 dist/
+lib/
 node_modules/
-
-# packages that have lib as the output
-packages/digest/lib
-packages/perf-test/lib
-packages/playground/lib
-packages/react-theming/lib
-
@@ -1,10 +1,8 @@
-CONTRIBUTING
-============
+# CONTRIBUTING
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-
 - [Getting started](#getting-started)
   - [Useful Commands](#useful-commands)
 - [Workflow](#workflow)
@@ -31,7 +29,7 @@ You can contribute to Stardust by being an official [contributor](setup-local-de
 
 ### Useful Commands
 
->This list contains the most useful commands. You should run `yarn run` to see all scripts.
+> This list contains the most useful commands. You should run `yarn run` to see all scripts.
 
 ```sh
 yarn start                 // run doc site
@@ -66,7 +64,7 @@ These guides will walk your through various activities for contributing:
 
 ## Accessibility
 
-Stardust implements accessibility using accessibility behaviors. The behaviors add attributes to the DOM elements (mainly role and aria-* properties) as well as handle keyboard interaction and focus. Every accessible component has a default behavior, which can be overriden using the `accessibility` prop. You can choose a behavior from the ones provided by Stardust or you can implement a new behavior.
+Stardust implements accessibility using accessibility behaviors. The behaviors add attributes to the DOM elements (mainly role and aria-\* properties) as well as handle keyboard interaction and focus. Every accessible component has a default behavior, which can be overriden using the `accessibility` prop. You can choose a behavior from the ones provided by Stardust or you can implement a new behavior.
 
 Behaviors apply properties, focus handling and keyboard handlers to the component slots. When developing a component, the properties and keyboard handlers need to be spread to the corresponding slots.
 
@@ -83,13 +81,15 @@ ARIA [roles][3] and [attributes][4] provide necessary semantics for assistive te
 In addition to behaviors, ARIA [landmarks][5] and [naming props][6] need to be added to the components/elements to form the page structure and provide textual information.
 
 For example, to make an icon-only Button accessible, `aria-label` prop needs to be used:
+
 ```html
-  <Button icon="star" iconOnly aria-label='Favorites' primary />
+<button icon="star" iconOnly aria-label="Favorites" primary />
 ```
 
 ### Focus
 
 An application should always have an element with [focus][7] when in use. The user can change the focused element by:
+
 - pressing TAB/shift+TAB keys to navigate through the components
 - pressing arrow keys to navigate through children (for example menu items in menu)
 - using the screen reader with or without virtual cursor
@@ -98,7 +98,7 @@ Stardust uses Office UI Fabric [FocusZone][8] for basic TAB and arrow key focus
 
 Focused component needs to be clearly visible. This is handled in Stardust by focus indicator functionality. Focus indicator will be displayed only if the application is in keyboard mode. Application switches to keyboard mode when a key relevant to navigation is pressed. It disables keyboard mode on mouse click events.
 
- To style the focused component, you can use the `isFromKeyboard` utility and prop. See [Button component][10] and [Button style][11] for reference.
+To style the focused component, you can use the `isFromKeyboard` utility and prop. See [Button component][10] and [Button style][11] for reference.
 
 ### Keyboard handling
 
@@ -111,7 +111,7 @@ We are using [Lerna][14] to manage our packages and [Yarn Workspaces][15] to lin
 ### Add a new package
 
 #### Run `lerna create`
- 
+
 You should to run `lerna create` command to create a new package
 
 - we are using `@fluentui` namespace on NPM to publish our packages
@@ -126,6 +126,7 @@ lerna create @fluentui/react-proptypes react-proptypes
 ```
 
 ##### Example input
+
 ```
 lerna notice cli v3.11.1
 package name: (@fluentui/react-proptypes)
@@ -179,10 +180,7 @@ If your package uses TypeScript, please also create a new `tsconfig.json` and pl
 ```json
 {
   "extends": "../../build/tsconfig.common",
-  "include": [
-    "src",
-    "test"
-  ]
+  "include": ["src", "test"]
 }
 ```
 
@@ -225,10 +223,10 @@ lerna add @fluentui/react-proptypes packages/react
 [6]: https://www.w3.org/TR/wai-aria-1.1/#namecalculation
 [7]: https://www.w3.org/TR/wai-aria-1.1/#managingfocus
 [8]: https://developer.microsoft.com/en-us/fabric#/components/focuszone
-[9]: https://github.com/stardust-ui/react/blob/master/src/lib/accessibility/Behaviors/Menu/MenuBehavior.ts
+[9]: https://github.com/stardust-ui/react/blob/master/packages/react/src/utils/accessibility/Behaviors/Menu/MenuBehavior.ts
 [10]: https://github.com/stardust-ui/react/blob/master/src/components/Button/Button.tsx
 [11]: https://github.com/stardust-ui/react/blob/master/src/themes/teams/components/Button/buttonStyles.ts
-[12]: https://github.com/stardust-ui/react/blob/master/src/lib/accessibility/Behaviors/Menu/MenuItemBehavior.ts
+[12]: https://github.com/stardust-ui/react/blob/master/packages/react/src/utils/accessibility/Behaviors/Menu/MenuItemBehavior.ts
 [13]: https://github.com/stardust-ui/react/blob/master/src/components/Menu/MenuItem.tsx
 [14]: https://lernajs.io/
 [15]: https://yarnpkg.com/en/docs/workspaces

@@ -3,7 +3,6 @@
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-
 - [Propose feature](#propose-feature)
 - [Prototype](#prototype)
 - [Spec out the API](#spec-out-the-api)
@@ -67,7 +66,7 @@ const Button: React.FunctionalComponent = props => {
 Stateful components should be classes:
 
 ```tsx
-import { AutoControlledComponent as Component } from '../../lib'
+import { AutoControlledComponent as Component } from '../../utils'
 
 class Dropdown extends AutoControlledComponent {
   // ...
@@ -100,7 +99,7 @@ import {
  ContentComponentProps,
  UIComponentProps,
  commonPropTypes,
-} from '../../lib'
+} from '../../utils'
 
 export interface DividerProps
  extends UIComponentProps,
@@ -188,7 +187,7 @@ After iterating on the feature with the maintainers, you will add full test cove
 
 [1]: https://github.com/stardust-ui/react/issues
 [2]: https://github.com/stardust-ui/react/pull/73
-[3]: https://github.com/stardust-ui/react/blob/master/src/lib/AutoControlledComponent.tsx
+[3]: https://github.com/stardust-ui/react/blob/master/packages/react/src/utils/AutoControlledComponent.tsx
 [4]: https://facebook.github.io/react/docs/forms.html#controlled-components
 [5]: https://facebook.github.io/react/docs/forms.html#uncontrolled-components
 [6]: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit

@@ -15,6 +15,7 @@ docs/src/currentBundleStats.json
 docs/src/exampleMenus
 docs/src/exampleSources
 docs/dist/
+# lib/
 node_modules/
 report.*.json
 stats/

@@ -9,16 +9,12 @@ docs/src/currentBundleStats.json
 docs/src/exampleMenus
 docs/src/exampleSources
 e2e
+lib/
 node_modules
 packages/**/dist
 packages/**/test
 perf/dist
 
-packages/digest/lib
-packages/perf-test/lib
-packages/playground/lib
-packages/react-theming/lib
-
 .editorconfig
 .gitignore
 .prettierignore

@@ -2,17 +2,11 @@
 .idea/
 .vscode/
 
-
 coverage/
 dist/
+lib/
 stats/
 
-# packages that have lib as the output
-packages/digest/lib
-packages/perf-test/lib
-packages/playground/lib
-packages/react-theming/lib
-
 package.json
 
 packages/ability-attributes/src/schema.ts

@@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Prevent text highlight on icon consecutive clicks in `Checkbox` @silviuavram ([#2154](https://github.com/microsoft/fluent-ui-react/pull/2154))
 - Always handle provided onKeyDown event be propagated in inner zone @kolaps33 ([#2140](https://github.com/microsoft/fluent-ui-react/pull/2140))
+- Rename `lib` directories to `utils` @ecraig12345 ([#2153](https://github.com/microsoft/fluent-ui-react/pull/2153))
 
 ### Features
 - Add a new experimental @fluentui/react-theming package that includes a `compose()` @kenotron ([#2152](https://github.com/microsoft/fluent-ui-react/pull/2152))

@@ -29,42 +29,42 @@
   </a>
 </p>
 
->Hey, we're in development:
+> Hey, we're in development:
 >
->1. **MINOR** versions represent **breaking changes**
->1. **PATCH** versions represent **fixes _and_ features**
->1. There are **no deprecation warnings** between releases
->1. Consult the [**CHANGELOG**][4] and related issues/PRs for more information
+> 1.  **MINOR** versions represent **breaking changes**
+> 1.  **PATCH** versions represent **fixes _and_ features**
+> 1.  There are **no deprecation warnings** between releases
+> 1.  Consult the [**CHANGELOG**][4] and related issues/PRs for more information
 
-***
+---
 
 Fluent UI React represents a set of specifications and tools for building UI libraries.
 
 ## How Can I Help?
 
 ### [Voice Your Opinion][101]
 
-Help shape this library by weighing in on our [RFC (request for comments)][101] issues. 
+Help shape this library by weighing in on our [RFC (request for comments)][101] issues.
 
 ### [Contribute][3]
 
 Our [CONTRIBUTING.md][3] is a step-by-step setup and development guide.
 
 ### [Good First Issue][103]
 
-Issues labeled [`good first issue`][103] are a great way to ease into development on this project. 
+Issues labeled [`good first issue`][103] are a great way to ease into development on this project.
 
 ### [New Components][102]
 
-There is an issue for every new component labeled [`new component`][102].  Just comment on the issue you'd like to take.
+There is an issue for every new component labeled [`new component`][102]. Just comment on the issue you'd like to take.
 
 ### [Help Wanted Label][100]
 
 Any other issue labeled [`help wanted`][100] is also ready for a PR.
 
 ## Why?
 
-There are a number of packages that a UI library needs to create great UI components. Take a look at SUIR's [`/src/lib`][201] as an example. This core library enables the SUIR features we love today such as shorthand props, event stack handling, auto controlled state, controlling the rendered component, and more.
+There are a number of packages that a UI library needs to create great UI components. Take a look at SUIR's [`/src/utils`][201] as an example. This core library enables the SUIR features we love today such as shorthand props, event stack handling, auto controlled state, controlling the rendered component, and more.
 
 Other libraries in the wild have some of these features and some of their own. It is our desire that the community share the best UI component practices in a core library to the greater benefit of the web.
 
@@ -95,22 +95,26 @@ You can find Stardust usage examples by accessing the [doc site][5]
 See the [MANIFESTO.md][1] for details. SUIR v2 will be built on the specifications and tools from Stardust.
 
 <!-- REPO -->
+
 [1]: https://github.com/microsoft/fluent-ui-react/blob/master/MANIFESTO.md
 [2]: https://github.com/microsoft/fluent-ui-react/issues/new/choose
 [3]: https://github.com/microsoft/fluent-ui-react/blob/master/.github/CONTRIBUTING.md
 [4]: https://github.com/microsoft/fluent-ui-react/blob/master/CHANGELOG.md
 [5]: https://microsoft.github.io/fluent-ui-react
 
 <!-- ISSUE LABELS -->
+
 [100]: https://github.com/microsoft/fluent-ui-react/labels/help%20wanted
 [101]: https://github.com/microsoft/fluent-ui-react/issues?q=is%3Aopen+RFC+label%3ARFC
 [102]: https://github.com/microsoft/fluent-ui-react/issues?q=is%3Aissue+is%3Aopen+label%3A%22new+component%22
 [103]: https://github.com/microsoft/fluent-ui-react/labels/good%20first%20issue
 
 <!-- SUIR -->
+
 [200]: https://github.com/Semantic-Org/Semantic-UI-React
-[201]: https://github.com/Semantic-Org/Semantic-UI-React/tree/master/src/lib
+[201]: https://github.com/Semantic-Org/Semantic-UI-React/tree/master/packages/react/src/utils
 
 <!-- EXTERNAL -->
+
 [300]: https://developer.microsoft.com/en-us/fabric
 [301]: https://products.office.com/en-US/microsoft-teams/group-chat-software
@@ -20,8 +20,8 @@ const hasAddedLinesAfterVersionInChangelog = async (danger): Promise<boolean> =>
 }
 
 const getMalformedChangelogEntries = async (danger): Promise<string[]> => {
-  // +- description @githubname ([#DDDD](https://github.com/stardust-ui/react/pull/DDDD))
-  const validEntry = /^\+- .*@\S+ \(\[#(\d+)]\(https:\/\/github\.com\/(?:stardust-ui\/react|microsoft\/fluent-ui-react)\/pull\/\1\)\)$/
+  // +- description @githubname ([#DDDD](https://github.com/microsoft/fluent-ui-react/pull/DDDD))
+  const validEntry = /^\+- .*@\S+ \(\[#(\d+)]\(https:\/\/github\.com\/microsoft\/fluent-ui-react\/pull\/\1\)\)$/
 
   const addedLines = await getAddedLinesFromChangelog(danger)
 
@@ -50,7 +50,9 @@ export default async ({ danger, fail, warn }: DangerJS) => {
   } else {
     const malformedChangelogEntries = await getMalformedChangelogEntries(danger)
     malformedChangelogEntries.forEach(entry => {
-      fail(`Invalid entry format in ${CHANGELOG_FILE}: >${entry}<`)
+      fail(`Invalid entry format in ${CHANGELOG_FILE}: >${entry}<
+
+The correct format is: \`- description @githubname ([#DDDD](https://github.com/microsoft/fluent-ui-react/pull/DDDD)\``)
     })
 
     const hasLine = await hasAddedLinesAfterVersionInChangelog(danger)

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { hot } from 'react-hot-loader/root'
 import { Provider, Debug, themes } from '@fluentui/react'
 
-import { mergeThemes } from 'src/lib'
+import { mergeThemes } from '@fluentui/react/src/utils'
 import { ThemeContext, ThemeContextData, themeContextDefaults } from './context/ThemeContext'
 import Routes from './routes'
 import { PerfDataProvider } from './components/ComponentDoc/PerfChart'

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

@@ -14,7 +14,7 @@ import qs from 'qs'
 import SourceRender from 'react-source-render'
 
 import { examplePathToHash, getFormattedHash, scrollToAnchor } from 'docs/src/utils'
-import { constants } from 'src/lib'
+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'

@@ -12,7 +12,7 @@ import * as React from 'react'
 import { ThemeContext } from 'react-fela'
 
 import ComponentExampleVariable, { ComponentExampleVariableProps } from './ComponentExampleVariable'
-import { mergeThemeVariables } from 'src/lib/mergeThemes'
+import { mergeThemeVariables } from '@fluentui/react/src/utils/mergeThemes'
 
 type ComponentExampleVariablesProps = {
   onChange: ComponentExampleVariableProps['onChange']

@@ -2,7 +2,7 @@ import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
 import { Icon, Segment, Text, ICSSInJSStyle } from '@fluentui/react'
-import { constants } from 'src/lib'
+import { constants } from '@fluentui/react/src/utils'
 
 const wrapStyle: ICSSInJSStyle = { wordBreak: 'break-word' }
 

@@ -6,7 +6,7 @@ import { withRouter } from 'react-router-dom'
 
 import Sidebar from 'docs/src/components/Sidebar/Sidebar'
 import { scrollToAnchor } from 'docs/src/utils'
-import { mergeThemes } from 'src/lib'
+import { mergeThemes } from '@fluentui/react/src/utils'
 
 const anchors = new AnchorJS({
   class: 'anchor-link',

@@ -20,7 +20,7 @@ import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { NavLink, NavLinkProps, withRouter } from 'react-router-dom'
 
-import { constants } from 'src/lib'
+import { constants } from '@fluentui/react/src/utils'
 
 type ComponentMenuItem = { displayName: string; type: string }
 

@@ -217,11 +217,11 @@ export default () => (
       value={`
       const overridenMenuBehavior: Accessibility = (props: any) => {
         const behavior = menuBehavior(props)
-      
+
         behavior.focusZone.props.defaultTabbableElement = (root: HTMLElement): HTMLElement => {
           return root.querySelector(".ui-menu__item__wrapper:last-child")
         }
-      
+
         return behavior
       }
       `}
@@ -232,7 +232,7 @@ export default () => (
       All Stardust behaviors implementations can be found on the{' '}
       {link(
         'GitHub',
-        'https://github.com/stardust-ui/react/tree/master/packages/react/src/lib/accessibility/Behaviors',
+        'https://github.com/stardust-ui/react/tree/master/packages/react/src/utils/accessibility/Behaviors',
       )}
       .
     </p>