Move Calendar and DatePicker to legacy package (#9253)

* Move Calendar and DatePicker to legacy package * Fix doc generation for legacy package * Snapshot updates? * Remove codepen links * Change files * Fix PageJsonGenerator to work with multiple packages
microsoft · May 30, 2019 · 5e4f160 · 5e4f160
1 parent bb3eb04
commit 5e4f160
Show file tree

Hide file tree

Showing 92 changed files with 558 additions and 1,417 deletions.
diff --git a/apps/fabric-website-resources/src/components/pages/CalendarPage.tsx b/apps/fabric-website-resources/src/components/pages/CalendarPage.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CalendarPageProps } from 'office-ui-fabric-react/lib/components/Calendar/Calendar.doc';
+import { CalendarPageProps } from '@uifabric/legacy/lib/components/Calendar/Calendar.doc';
 import { DemoPage } from '../DemoPage';
 
 export const CalendarPage = (props: { isHeaderVisible: boolean }) => (

diff --git a/apps/fabric-website-resources/src/components/pages/DatePickerPage.tsx b/apps/fabric-website-resources/src/components/pages/DatePickerPage.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { DemoPage } from '../DemoPage';
-import { DatePickerPageProps } from 'office-ui-fabric-react/lib/components/DatePicker/DatePicker.doc';
+import { DatePickerPageProps } from '@uifabric/legacy/lib/components/DatePicker/DatePicker.doc';
 
 export const DatePickerPage = (props: { isHeaderVisible: boolean }) => (
   <DemoPage

diff --git a/apps/fabric-website-resources/webpack.config.js b/apps/fabric-website-resources/webpack.config.js
@@ -24,8 +24,9 @@ module.exports = [
 
     resolve: {
       alias: {
-        '@uifabric/legacy/src': path.join(__dirname, '../../packages/legacy/src'),
-        '@uifabric/legacy/lib': path.join(__dirname, '../../packageslegacy/lib'),
+        '@uifabric/legacy$': path.resolve(__dirname, '../../packages/legacy/lib'),
+        '@uifabric/legacy/src': path.resolve(__dirname, '../../packages/legacy/src'),
+        '@uifabric/legacy/lib': path.resolve(__dirname, '../../packages/legacy/lib'),
         'office-ui-fabric-react/src': path.resolve(__dirname, '../../packages/office-ui-fabric-react/src'),
         'office-ui-fabric-react/lib': path.resolve(__dirname, '../../packages/office-ui-fabric-react/lib'),
         '@uifabric/api-docs/lib': path.resolve(__dirname, 'node_modules/@uifabric/api-docs/lib'),

diff --git a/apps/fabric-website-resources/webpack.serve.config.js b/apps/fabric-website-resources/webpack.serve.config.js
@@ -15,14 +15,14 @@ module.exports = resources.createServeConfig({
 
   resolve: {
     alias: {
-      '@uifabric/legacy/src': path.join(__dirname, '../../packages/legacy/src'),
-      '@uifabric/legacy/lib': path.join(__dirname, '../../packages/legacy/src'),
-      '@uifabric/legacy$': path.join(__dirname, '../../packages/legacy/src'),
+      '@uifabric/legacy$': path.resolve(__dirname, '../../packages/legacy/src'),
+      '@uifabric/legacy/src': path.resolve(__dirname, '../../packages/legacy/src'),
+      '@uifabric/legacy/lib': path.resolve(__dirname, '../../packages/legacy/src'),
       'office-ui-fabric-react$': path.resolve(__dirname, '../../packages/office-ui-fabric-react/src'),
       'office-ui-fabric-react/src': path.resolve(__dirname, '../../packages/office-ui-fabric-react/src'),
       'office-ui-fabric-react/lib': path.resolve(__dirname, '../../packages/office-ui-fabric-react/src'),
-      '@uifabric/fluent-theme$': path.join(__dirname, '../../packages/fluent-theme/src'),
-      '@uifabric/theme-samples$': path.join(__dirname, '../../packages/theme-samples/src'),
+      '@uifabric/fluent-theme$': path.resolve(__dirname, '../../packages/fluent-theme/src'),
+      '@uifabric/theme-samples$': path.resolve(__dirname, '../../packages/theme-samples/src'),
       'Props.ts.js': 'Props',
       'Example.tsx.js': 'Example'
     }

diff --git a/apps/fabric-website/src/pages/Controls/CalendarPage/CalendarPage.doc.ts b/apps/fabric-website/src/pages/Controls/CalendarPage/CalendarPage.doc.ts
@@ -1,5 +1,5 @@
 import { TFabricPlatformPageProps } from '../../../interfaces/Platforms';
-import { CalendarPageProps as ExternalProps } from 'office-ui-fabric-react/lib/components/Calendar/Calendar.doc';
+import { CalendarPageProps as ExternalProps } from '@uifabric/legacy/lib/components/Calendar/Calendar.doc';
 
 const related = require('!raw-loader!@uifabric/fabric-website/src/pages/Controls/CalendarPage/docs/CalendarRelated.md') as string;
 

diff --git a/apps/fabric-website/src/pages/Controls/DatePickerPage/DatePickerPage.doc.ts b/apps/fabric-website/src/pages/Controls/DatePickerPage/DatePickerPage.doc.ts
@@ -1,5 +1,5 @@
 import { TFabricPlatformPageProps } from '../../../interfaces/Platforms';
-import { DatePickerPageProps as ExternalProps } from 'office-ui-fabric-react/lib/components/DatePicker/DatePicker.doc';
+import { DatePickerPageProps as ExternalProps } from '@uifabric/legacy/lib/components/DatePicker/DatePicker.doc';
 
 const related = require('!raw-loader!@uifabric/fabric-website/src/pages/Controls/DatePickerPage/docs/DatePickerRelated.md') as string;
 const componentUrl =

diff --git a/apps/fabric-website/webpack.config.js b/apps/fabric-website/webpack.config.js
@@ -46,6 +46,7 @@ module.exports = function(env) {
           '@uifabric/fabric-website/lib': path.join(__dirname, 'lib'),
           'office-ui-fabric-react/src': path.join(__dirname, 'node_modules/office-ui-fabric-react/src'),
           'office-ui-fabric-react/lib': path.join(__dirname, 'node_modules/office-ui-fabric-react/lib'),
+          '@uifabric/legacy$': path.join(__dirname, 'node_modules/@uifabric/legacy/lib'),
           '@uifabric/legacy/src': path.join(__dirname, 'node_modules/@uifabric/legacy/src'),
           '@uifabric/legacy/lib': path.join(__dirname, 'node_modules/@uifabric/legacy/lib'),
           '@uifabric/api-docs/lib': path.join(__dirname, 'node_modules/@uifabric/api-docs/lib')

diff --git a/apps/fabric-website/webpack.serve.config.js b/apps/fabric-website/webpack.serve.config.js
@@ -24,15 +24,15 @@ module.exports = resources.createServeConfig({
 
   resolve: {
     alias: {
-      '@uifabric/legacy$': path.join(__dirname, '../../packages/legacy/src'),
-      '@uifabric/legacy/lib': path.join(__dirname, '../../packages/legacy/src'),
-      '@uifabric/legacy/src': path.join(__dirname, '../../packages/legacy/src'),
+      '@uifabric/legacy$': path.resolve(__dirname, '../../packages/legacy/src'),
+      '@uifabric/legacy/lib': path.resolve(__dirname, '../../packages/legacy/src'),
+      '@uifabric/legacy/src': path.resolve(__dirname, '../../packages/legacy/src'),
       'office-ui-fabric-react$': path.resolve(__dirname, '../../packages/office-ui-fabric-react/src'),
       'office-ui-fabric-react/lib': path.resolve(__dirname, '../../packages/office-ui-fabric-react/src'),
       'office-ui-fabric-react/src': path.resolve(__dirname, '../../packages/office-ui-fabric-react/src'),
       '@uifabric/fabric-website/src': path.join(__dirname, 'src'),
       '@uifabric/fabric-website/lib': path.join(__dirname, 'lib'),
-      '@uifabric/example-app-base$': path.join(__dirname, '../../packages/example-app-base/src'),
+      '@uifabric/example-app-base$': path.resolve(__dirname, '../../packages/example-app-base/src'),
       'Props.ts.js': 'Props',
       'Example.tsx.js': 'Example'
     }

diff --git a/apps/ssr-tests/webpack.config.js b/apps/ssr-tests/webpack.config.js
@@ -20,6 +20,7 @@ module.exports = resources.createConfig('ssr-tests', false, {
       'office-ui-fabric-react/lib': path.join(__dirname, 'node_modules/office-ui-fabric-react/lib'),
       '@uifabric/fabric-website-resources/src': path.join(__dirname, 'node_modules/@uifabric/fabric-website-resources/src'),
       '@uifabric/fabric-website-resources/lib': path.join(__dirname, 'node_modules/@uifabric/fabric-website-resources/lib'),
+      '@uifabric/legacy$': path.join(__dirname, 'node_modules/@uifabric/legacy/lib'),
       '@uifabric/legacy/src': path.join(__dirname, 'node_modules/@uifabric/legacy/src'),
       '@uifabric/legacy/lib': path.join(__dirname, 'node_modules/@uifabric/legacy/lib'),
       '@uifabric/styling/lib': path.join(__dirname, '../../packages/styling/lib'),

diff --git a/apps/vr-tests/src/stories/DatePicker.stories.tsx b/apps/vr-tests/src/stories/DatePicker.stories.tsx
@@ -3,7 +3,8 @@ import * as React from 'react';
 import Screener from 'screener-storybook/src/screener';
 import { storiesOf } from '@storybook/react';
 import { FabricDecoratorFixedWidth } from '../utilities';
-import { Fabric, DatePicker } from 'office-ui-fabric-react';
+import { Fabric } from 'office-ui-fabric-react';
+import { DatePicker } from '@uifabric/legacy';
 
 const date = new Date(2010, 1, 12);
 storiesOf('DatePicker', module)

diff --git a/common/changes/@uifabric/api-docs/calendar_2019-05-29-18-11.json b/common/changes/@uifabric/api-docs/calendar_2019-05-29-18-11.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/api-docs",
+      "comment": "Generate API docs for legacy controls",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/api-docs",
+  "email": "[email protected]"
+}
diff --git a/common/changes/@uifabric/azure-themes/calendar_2019-05-29-18-11.json b/common/changes/@uifabric/azure-themes/calendar_2019-05-29-18-11.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/azure-themes",
+      "comment": "Update DatePicker import path",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/azure-themes",
+  "email": "[email protected]"
+}
diff --git a/common/changes/@uifabric/date-time/calendar_2019-05-29-18-11.json b/common/changes/@uifabric/date-time/calendar_2019-05-29-18-11.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/date-time",
+      "comment": "Re-export shared date utilities rather than duplicating",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/date-time",
+  "email": "[email protected]"
+}
diff --git a/common/changes/@uifabric/fabric-website-resources/calendar_2019-05-29-18-11.json b/common/changes/@uifabric/fabric-website-resources/calendar_2019-05-29-18-11.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/fabric-website-resources",
+      "comment": "Update Calendar and DatePicker import paths",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/fabric-website-resources",
+  "email": "[email protected]"
+}
diff --git a/common/changes/@uifabric/fabric-website/calendar_2019-05-29-18-11.json b/common/changes/@uifabric/fabric-website/calendar_2019-05-29-18-11.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/fabric-website",
+      "comment": "Update Calendar and DatePicker import paths",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/fabric-website",
+  "email": "[email protected]"
+}
diff --git a/common/changes/@uifabric/fluent-theme/calendar_2019-05-29-18-11.json b/common/changes/@uifabric/fluent-theme/calendar_2019-05-29-18-11.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/fluent-theme",
+      "comment": "Update DatePicker import path",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/fluent-theme",
+  "email": "[email protected]"
+}
diff --git a/common/changes/@uifabric/legacy/calendar_2019-05-29-18-08.json b/common/changes/@uifabric/legacy/calendar_2019-05-29-18-08.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/legacy",
+      "comment": "Move Calendar and DatePicker to legacy package",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/legacy",
+  "email": "[email protected]"
+}
diff --git a/common/changes/@uifabric/legacy/calendar_2019-05-29-18-11.json b/common/changes/@uifabric/legacy/calendar_2019-05-29-18-11.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "",
+      "packageName": "@uifabric/legacy",
+      "type": "none"
+    }
+  ],
+  "packageName": "@uifabric/legacy",
+  "email": "[email protected]"
+}
diff --git a/common/changes/office-ui-fabric-react/calendar_2019-05-29-18-08.json b/common/changes/office-ui-fabric-react/calendar_2019-05-29-18-08.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Move Calendar and DatePicker to legacy package",
+      "type": "major"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}
diff --git a/common/changes/office-ui-fabric-react/calendar_2019-05-29-18-11.json b/common/changes/office-ui-fabric-react/calendar_2019-05-29-18-11.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "",
+      "packageName": "office-ui-fabric-react",
+      "type": "none"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}
diff --git a/packages/api-docs/package.json b/packages/api-docs/package.json
@@ -21,9 +21,10 @@
   ],
   "devDependencies": {
     "@types/node": "^8.10.29",
-    "@uifabric/tslint-rules": ">=1.0.2 <2.0.0",
-    "@uifabric/styling": "^6.47.6",
+    "@uifabric/legacy": "^6.164.5",
     "@uifabric/merge-styles": "^6.17.4",
+    "@uifabric/styling": "^6.47.6",
+    "@uifabric/tslint-rules": ">=1.0.2 <2.0.0",
     "@uifabric/utilities": "^6.39.0",
     "office-ui-fabric-react": "^6.185.0"
   },

diff --git a/packages/api-docs/src/PageJsonGenerator.tsx b/packages/api-docs/src/PageJsonGenerator.tsx
@@ -82,6 +82,11 @@ export function generateJson(options: IPageJsonOptions[]): void {
     console.log('Deleting contents of ' + option.pageJsonFolderPath);
     FileSystem.ensureEmptyFolder(option.pageJsonFolderPath);
 
+    // Store the data for each page in a map
+    for (const pageName of option.pageNames) {
+      collectedData.pageDataByPageName.set(pageName, new PageData(pageName, option.kind));
+    }
+
     for (const apiJsonPath of option.apiJsonPaths) {
       console.log('Loading ' + apiJsonPath);
 
@@ -93,11 +98,6 @@ export function generateJson(options: IPageJsonOptions[]): void {
 
       const apiEntryPoint: ApiEntryPoint = apiPackage.entryPoints[0]; // assume there is only one entry point
 
-      // Store the data for each page in a map
-      for (const pageName of option.pageNames) {
-        collectedData.pageDataByPageName.set(pageName, new PageData(pageName, option.kind));
-      }
-
       collectPageData(collectedData, apiEntryPoint, option.kind);
     }
   }

diff --git a/packages/api-docs/src/generatePageJsonFiles.ts b/packages/api-docs/src/generatePageJsonFiles.ts
@@ -1,7 +1,7 @@
 import * as path from 'path';
 import { generateJson } from './PageJsonGenerator';
 
-// Generate JSON for office-ui-fabric-react, styling, utilities, and merge-styles
+// Generate JSON for office-ui-fabric-react, styling, utilities, merge-styles, and legacy
 
 generateJson([
   {
@@ -15,7 +15,10 @@ generateJson([
     kind: 'References'
   },
   {
-    apiJsonPaths: [path.resolve(__dirname, '../../../packages/office-ui-fabric-react/dist/office-ui-fabric-react.api.json')],
+    apiJsonPaths: [
+      path.resolve(__dirname, '../../../packages/office-ui-fabric-react/dist/office-ui-fabric-react.api.json'),
+      path.resolve(__dirname, '../../../packages/legacy/dist/legacy.api.json')
+    ],
     pageJsonFolderPath: path.resolve(__dirname, '../lib/pages/office-ui-fabric-react'),
     pageNames: [
       'ActivityItem',

diff --git a/packages/azure-themes/src/azure/styles/DatePicker.styles.ts b/packages/azure-themes/src/azure/styles/DatePicker.styles.ts
@@ -1,6 +1,6 @@
 import { FontSizes } from '../AzureType';
 import * as StyleConstants from '../Constants';
-import { IDatePickerStyles, IDatePickerStyleProps } from 'office-ui-fabric-react/lib/DatePicker';
+import { IDatePickerStyles, IDatePickerStyleProps } from '@uifabric/legacy/lib/DatePicker';
 
 export const DatePickerStyles = (props: IDatePickerStyleProps): Partial<IDatePickerStyles> => {
   const { disabled, theme } = props;

diff --git a/packages/date-time/etc/date-time.api.md b/packages/date-time/etc/date-time.api.md
@@ -5,6 +5,9 @@
 ```ts
 
 import * as CSS from 'csstype';
+import { DateRangeType } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues';
+import { DayOfWeek } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues';
+import { FirstWeekOfYear } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues';
 import { IBaseProps } from '@uifabric/utilities';
 import { IBaseProps as IBaseProps_2 } from 'office-ui-fabric-react/lib/Utilities';
 import { IRefObject } from '@uifabric/utilities';
@@ -20,45 +23,11 @@ import * as PropTypes from 'prop-types';
 // @public
 export const Calendar: React.FunctionComponent<ICalendarProps>;
 
-// @public
-export enum DateRangeType {
-    // (undocumented)
-    Day = 0,
-    // (undocumented)
-    Month = 2,
-    // (undocumented)
-    Week = 1,
-    // (undocumented)
-    WorkWeek = 3
-}
+export { DateRangeType }
 
-// @public
-export enum DayOfWeek {
-    // (undocumented)
-    Friday = 5,
-    // (undocumented)
-    Monday = 1,
-    // (undocumented)
-    Saturday = 6,
-    // (undocumented)
-    Sunday = 0,
-    // (undocumented)
-    Thursday = 4,
-    // (undocumented)
-    Tuesday = 2,
-    // (undocumented)
-    Wednesday = 3
-}
+export { DayOfWeek }
 
-// @public
-export enum FirstWeekOfYear {
-    // (undocumented)
-    FirstDay = 0,
-    // (undocumented)
-    FirstFourDayWeek = 2,
-    // (undocumented)
-    FirstFullWeek = 1
-}
+export { FirstWeekOfYear }
 
 // @public (undocumented)
 export interface ICalendar {

diff --git a/packages/date-time/src/components/Calendar/Calendar.base.tsx b/packages/date-time/src/components/Calendar/Calendar.base.tsx
@@ -8,7 +8,7 @@ import {
   ICalendarStyleProps,
   ICalendarStyles
 } from './Calendar.types';
-import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '../../utilities/dateValues/DateValues';
+import { DayOfWeek, FirstWeekOfYear, DateRangeType } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues';
 import { CalendarDay } from './CalendarDay/CalendarDay';
 import { CalendarMonth } from './CalendarMonth/CalendarMonth';
 import { ICalendarDay } from './CalendarDay/CalendarDay.types';

diff --git a/packages/date-time/src/components/Calendar/Calendar.types.ts b/packages/date-time/src/components/Calendar/Calendar.types.ts
@@ -1,4 +1,4 @@
-import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '../../utilities/dateValues/DateValues';
+import { DayOfWeek, FirstWeekOfYear, DateRangeType } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues';
 import { IRefObject, IBaseProps, IStyleFunctionOrObject } from '@uifabric/utilities';
 import { IStyle, ITheme } from '@uifabric/styling';
 import { ICalendarDayProps } from './CalendarDay/CalendarDay.types';

diff --git a/packages/date-time/src/components/Calendar/CalendarDay/CalendarDay.base.tsx b/packages/date-time/src/components/Calendar/CalendarDay/CalendarDay.base.tsx
@@ -13,7 +13,7 @@ import {
   getWeekNumbersInMonth,
   getMonthStart,
   getMonthEnd
-} from '../../../utilities/dateMath/DateMath';
+} from 'office-ui-fabric-react/lib/utilities/dateMath/DateMath';
 import { ICalendarDayProps, ICalendarDayStyleProps, ICalendarDayStyles } from './CalendarDay.types';
 import { IProcessedStyleSet } from '@uifabric/styling';
 import { DateRangeType } from '../Calendar.types';

diff --git a/packages/date-time/src/components/Calendar/CalendarDay/CalendarDay.styles.ts b/packages/date-time/src/components/Calendar/CalendarDay/CalendarDay.styles.ts
@@ -1,6 +1,6 @@
 import { ICalendarDayStyleProps, ICalendarDayStyles } from './CalendarDay.types';
 import { normalize, FontSizes, FontWeights, getFocusStyle, getGlobalClassNames } from '@uifabric/styling';
-import { DateRangeType } from '../../../utilities/dateValues/DateValues';
+import { DateRangeType } from 'office-ui-fabric-react/lib/utilities/dateValues/DateValues';
 
 const GlobalClassNames = {
   hoverStyle: 'ms-CalendarDay-hoverStyle',