# Component package scaffolding

## Problem
right now we have:

digraph hierarchy {
  nodesep=.5 // increases the separation between nodes
  node [color=Black,fontname=Courier,shape=box] //All nodes will this shape and colour
  edge [color=Blue] //All the lines look like this

  "@fluentui/react" -> {
    "@fluentui/react-tabs",
    "@fluentui/react-button",
    "office-ui-fabric-react"
  }
  
  "@fluentui/react-tabs" -> {
    "office-ui-fabric-react"
  }
  
  "@fluentui/react-button" -> {
    "office-ui-fabric-react"
  }
            
}

`office-ui-fabric-react` is used to resolve circular dependency.

Since we currently decided to NOT have OUFR v8, we need an alternative from above. The simplest way would be creating `@fluentui/react-internal` as we branch off v7 (simply rename `oufr` package in master after branching). Then to have `@fluentui/react` to just re-exports from `react-internal`:

digraph hierarchy {
  nodesep=.5 // increases the separation between nodes
  node [color=Black,fontname=Courier,shape=box] //All nodes will this shape and colour
  edge [color=Blue] //All the lines look like this

  "@fluentui/react" -> {
    "@fluentui/react-tabs",
    "@fluentui/react-button",
    "@fluentui/react-internal"
  }
  
  "@fluentui/react-tabs" -> {
    "@fluentui/react-internal"
  }
  
  "@fluentui/react-button" -> {
    "@fluentui/react-internal"
  }
        
}

One major problem with this is partner code has lots of imports like [this](https://outlookweb.visualstudio.com/_search?action=contents&text=office-ui-fabric-react%2Flib%2Fcomponents&type=code&lp=custom-Collection&filters=ProjectFilters%7BOutlook%20Web%7DRepositoryFilters%7Bclient-web%7D&pageSize=25&result=DefaultCollection%2FOutlook%20Web%2Fclient-web%2FGBmaster%2F%2Fpackages%2Fapps%2Fcalendar%2Fowa-calendar-module-view%2Flib%2Fcomponents%2FNewEventButton.tsx):

import { IButtonProps } from 'office-ui-fabric-react/lib/components/Button/Button.types';
import { IContextualMenuProps } from 'office-ui-fabric-react/lib/components/ContextualMenu';

which will break when they change `office-ui-fabric-react` to `@fluentui/react`.

## Solutions

### Option 1 (not a solution) --- Preferred
Continue with existing plan above. Users will need to fix all the deep import paths in v8

Next step [here](https://hackmd.io/neqAP8haRBaYSkQT6z0J8w?both#Next-step)

### Option 2
Have OUFR v8 - if it's too painful for user to fix the imports, they can remain on OUFR v8 instead of using @fluentui/react v8.
We can remove OUFR in v9.

*Caveat: regardless the current import paths won't continue working for Button, Pivot, etc (the ones we scaffolded packages for)*

### Option 3
Unscaffold packages - keeping the code we want to ship for v8 in `react` package for all components except for new buttons. No point of moving `react-buttons` code because user will rely on `compat` layer.

We can still scaffold new packakges for other components for V9 development. And we communicate to user ahead of time that this is coming.

*Caveat: we still need an "internal" layer for components used by `react-button` (e.g. ContextualMenu & all its dependencies)*

## Next step

Draft an email to partner and notify them about our plan while suggesting them to move to `@fluentui/react` the earlier the better

## Mail draft

> Fluent UI Partners,
>
> As the Fabric brand has evolved to Fluent UI, we're getting close to a new major release, and as such we have a few things you can help with to prepare to upgrade:
>
> * Rename your dependencies and imports from `office-ui-fabric-react` to `@fluentui/react`
> * Fix deep imports if you have them
>
> ## Package rename details
>
> We've updated our component package name from `office-ui-fabric-react` to `@fluentui/react`. Today we publish both names in lock step, giving you a way today to update your imports without any additional changes.
>
> In our [upcoming version 8 release](), we are planning to discontinue publishing both names in lock step, so there will not be v8 of the `office-ui-fabric-react` package and only the current package name [`@fluentui/react`](https://www.npmjs.com/package/@fluentui/react) will be moving forward with version 8+.
>
> We strongly recommend updating your imports now, before we release our next major. This will ensure you are able to continue receiving updates in the future.
>
> As always we will still take patches and minor fixes to `office-ui-fabric-react@v7+` on demand, as will live in a branch in the Fluent UI repo next to our v5 and v6 versions.
>
> ## Deep imports: what are they, why are they bad?
>
> Some partners have deep imports into the current Fabric package; for example:
>
> ```tsx
> import { ActionButton } from 'office-ui-fabric-react/lib/components/Button/ActionButton/ActionButton';
> ```
> This has never been supported officially, as we've always recommended to use either the package import or a "top level import" meaning a file directly under the `/lib/` path.
>
> ```tsx
> import { ActionButton } from '@fluentui/react'; // Good
> import { ActionButton } from '@fluentui/react/lib/Button'; // Also good
> ```
>
> We cannot guarantee any deep import will continue working across major releases. They will break any time any given file is moved, renamed, or even when the casing is changed. This would create a massive surface contract that we are not able to support.
>
> If you have deep imports in your product, please update them now to only use package or top-level imports. (And please, let us know if you depend on something that is not exported. We can fix that.)
>
> If you have any questions/concerns, please let us know. We are here to help!

## Questions:

(What about withResponsiveMode?)

> Export them in Utilities, or even just a Misc.ts or Etc.ts grab bag?

Which partener teams (emails) do we send this to?

> Paul should be maintaining a list, and possibly a DL :) Let's ping him

we should put all these in github wiki . also add a wiki for estimated release timelines.