chore(react-components): migrate to new dx stage-1 #19040
+411
−39
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "none", | ||
| "comment": "chore(react-components): migrate to new dx stage-1", | ||
| "packageName": "@fluentui/react-components", | ||
| "email": "[email protected]", | ||
| "dependentChangeType": "none" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -131,6 +131,7 @@ | |
| "@types/prettier": "2.2.3", | ||
| "@types/react": "16.9.42", | ||
| "@types/react-dom": "16.9.10", | ||
| "@types/react-test-renderer": "16.8.2", | ||
| "@types/semver": "^5.5.0", | ||
| "@types/tmp": "0.2.0", | ||
| "@types/webpack-dev-middleware": "4.1.0", | ||
|
|
@@ -202,6 +203,7 @@ | |
| "react": "16.8.6", | ||
| "react-app-polyfill": "2.0.0", | ||
| "react-dom": "16.8.6", | ||
| "react-test-renderer": "16.8.6", | ||
|
There was a problem hiding this comment. propagating dev dep to single version policy |
||
| "sass-loader": "10.1.1", | ||
| "satisfied": "^1.1.1", | ||
| "semver": "^6.2.0", | ||
|
|
@@ -285,6 +287,7 @@ | |
| "dependencies": [ | ||
| "@babel/core", | ||
| "@babel/preset-typescript", | ||
| "@types/react-test-renderer", | ||
|
There was a problem hiding this comment. syncpack opt out behaviour as it doesn't understand single version policy and devDeps - note the version are the same in all packages having this specified as devDep There was a problem hiding this comment. If syncpack can be modified to help with that I'm happy to take a look if you'd like to open an issue to explain this use case. There was a problem hiding this comment. hey @JamieMason , thanks for chiming in ! Once this is merged and we'll have some extra time , we gonna submit an issue. cheers Btw, just out of curiosity how did you managed to notice in a draft PR that there was mention on syncpack ? :D There was a problem hiding this comment. Great, sounds good 👍🏻
from github code/issues search it's (admittedly kind of sad but also) a handy way to find out about problems or feature feedback 😄 There was a problem hiding this comment. haha nice, thanks for sharing! |
||
| "@typescript-eslint/eslint-plugin", | ||
| "@typescript-eslint/experimental-utils", | ||
| "@typescript-eslint/parser", | ||
|
|
@@ -309,6 +312,7 @@ | |
| "loader-utils", | ||
| "pretty-bytes", | ||
| "schema-utils", | ||
| "react-test-renderer", | ||
|
There was a problem hiding this comment. same as comment above |
||
| "tslib", | ||
| "terser", | ||
| "terser-webpack-plugin", | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { create } from '@storybook/theming'; | ||
|
There was a problem hiding this comment. copied from There was a problem hiding this comment. Instead of duplicating the custom styling files, let's just delete them from react-examples since having the customized storybook styling there isn't important. There was a problem hiding this comment. I'll address those in PR followup There was a problem hiding this comment. It would have been nice to do that together with this change so it would show up as a rename not a new file (at least in git tools that are configured to handle renames) |
||
| import logo from '../public/fluent.svg'; | ||
|
|
||
| // Theming and branding the storybook to fluent. Taken from https://storybook.js.org/docs/react/configure/theming | ||
| export default create({ | ||
| base: 'light', | ||
|
|
||
| // Storybook-specific color palette | ||
| colorPrimary: 'rgba(255, 255, 255, .4)', | ||
| colorSecondary: '#0078d4', | ||
|
|
||
| // UI | ||
| appBg: '#ffffff', | ||
| appContentBg: '#ffffff', | ||
| appBorderColor: '#e0e0e0', // use msft gray | ||
| appBorderRadius: 4, | ||
|
|
||
| // Fonts | ||
| fontBase: | ||
| '"Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;', | ||
| fontCode: 'monospace', | ||
|
|
||
| // Text colors | ||
| textColor: '#11100f', | ||
| textInverseColor: '#0078d4', // use msft primary blue default | ||
|
|
||
| // Toolbar default and active colors | ||
| barSelectedColor: '#0078d4', // use msft primary blue default | ||
|
|
||
| // Form colors | ||
| inputBorderRadius: 4, | ||
|
|
||
| // Use the fluent branding for the upper left image | ||
| brandTitle: 'Fluent UI React vNext Components', | ||
| brandUrl: 'https://github.com/microsoft/fluentui', | ||
| brandImage: logo, | ||
| }); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| const fs = require('fs'); | ||
| const path = require('path'); | ||
|
|
||
| const rootMain = require('../../../.storybook/main'); | ||
|
|
||
| module.exports = /** @type {Pick<import('../../../.storybook/main').StorybookConfig,'addons'|'stories'|'webpackFinal'>} */ ({ | ||
| stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)', ...getVnextStories()], | ||
| addons: [...rootMain.addons], | ||
| webpackFinal: (config, options) => { | ||
| const localConfig = { ...rootMain.webpackFinal(config, options) }; | ||
|
|
||
| return localConfig; | ||
| }, | ||
| }); | ||
|
|
||
| function getVnextStories() { | ||
|
There was a problem hiding this comment. custom logic to parse for component stories that are part of |
||
| /** @type {Record<string,unknown>} */ | ||
| const packageJson = JSON.parse(fs.readFileSync(path.resolve(__dirname, `../package.json`), 'utf-8')); | ||
|
|
||
| const dependencies = /** @type {Record<string,string>} */ (packageJson.dependencies); | ||
|
|
||
| return Object.keys(dependencies) | ||
| .filter(pkgName => pkgName.startsWith('@fluentui/')) | ||
| .map(pkgName => '../../' + pkgName.replace('@fluentui/', '') + '/src/**/*.stories.@(ts|tsx|mdx)'); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| <!-- | ||
|
There was a problem hiding this comment.
|
||
| Override the default favicon used in the Storybook in the browser tab. | ||
| --> | ||
| <link rel="shortcut icon" href="https://www.microsoft.com/design/fluent/assets/favicons/favicon-192.png" /> | ||
| <link | ||
| rel="icon" | ||
| type="image/png" | ||
| href="https://www.microsoft.com/design/fluent/assets/favicons/favicon-192.png" | ||
| sizes="192x192" | ||
| /> | ||
|
|
||
| <!-- | ||
| Override the default styles used in the Storybook svg icons for the left tree panel. | ||
|
|
||
| @see https://storybook.js.org/docs/react/configure/theming#css-escape-hatches | ||
|
|
||
| > 💡 NOTE: | ||
| > | ||
| > This is brittle way for providing custom non thenable styles for manager UI | ||
| > | ||
| > Those selectors might change on any storybook version bump. | ||
| --> | ||
|
|
||
| <style> | ||
| @font-face { | ||
| font-family: 'Segoe UI'; | ||
| src: local('Segoe UI Light'), | ||
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2) format('woff2'), | ||
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff) format('woff'), | ||
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf) format('truetype'); | ||
| font-weight: 100; | ||
| } | ||
|
|
||
| @font-face { | ||
| font-family: 'Segoe UI'; | ||
| src: local('Segoe UI Semilight'), | ||
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2) format('woff2'), | ||
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff) format('woff'), | ||
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf) format('truetype'); | ||
| font-weight: 200; | ||
| } | ||
|
|
||
| @font-face { | ||
| font-family: 'Segoe UI'; | ||
| src: local('Segoe UI'), | ||
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2) format('woff2'), | ||
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff) format('woff'), | ||
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf) format('truetype'); | ||
| font-weight: 400; | ||
| } | ||
|
|
||
| @font-face { | ||
| font-family: 'Segoe UI'; | ||
| src: local('Segoe UI Semibold'), | ||
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2) format('woff2'), | ||
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff) format('woff'), | ||
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf) format('truetype'); | ||
| font-weight: 600; | ||
| } | ||
|
|
||
| @font-face { | ||
| font-family: 'Segoe UI'; | ||
| src: local('Segoe UI Bold'), | ||
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2) format('woff2'), | ||
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff) format('woff'), | ||
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf) format('truetype'); | ||
| font-weight: 700; | ||
| } | ||
|
|
||
| #storybook-explorer-searchfield { | ||
| font-weight: 400 !important; | ||
| font-size: 14px !important; | ||
| letter-spacing: -0.01em !important; | ||
| line-height: 14px !important; | ||
| } | ||
|
|
||
| .sidebar-item svg, | ||
| .sidebar-svg-icon { | ||
| color: #11100f !important; | ||
| } | ||
|
|
||
| .sidebar-item[data-selected='true'] svg, | ||
| .sidebar-item[data-selected='true'] .sidebar-svg-icon { | ||
| color: #ffffff !important; | ||
| } | ||
|
|
||
| .sidebar-subheading { | ||
| font-weight: 600 !important; | ||
| font-size: 16px !important; | ||
| letter-spacing: 0px !important; | ||
| line-height: 24px !important; | ||
| text-transform: none !important; | ||
| color: #11100f !important; | ||
| } | ||
|
|
||
| .sidebar-item { | ||
| font-weight: 400 !important; | ||
| font-size: 14px !important; | ||
| letter-spacing: -0.01em !important; | ||
| line-height: 14px !important; | ||
| color: #11100f !important; | ||
| } | ||
|
|
||
| .sidebar-item[data-selected='true'] { | ||
| font-weight: 600 !important; | ||
| font-size: 14px !important; | ||
| letter-spacing: -0.01em !important; | ||
| line-height: 14px !important; | ||
| color: #ffffff !important; | ||
| } | ||
| </style> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import { addons } from '@storybook/addons'; | ||
|
There was a problem hiding this comment. copied from |
||
| import fluentuiTheme from './fluentuiTheme'; | ||
|
|
||
| addons.setConfig({ | ||
| showPanel: true, | ||
| panelPosition: 'right', | ||
| theme: fluentuiTheme, | ||
| }); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import * as rootPreview from '../../../.storybook/preview'; | ||
|
|
||
| // load global styles | ||
| import '../public/intro.css'; | ||
|
|
||
| /** @type {typeof rootPreview.decorators} */ | ||
| export const decorators = [...rootPreview.decorators]; | ||
|
|
||
| /** @type {typeof rootPreview.parameters} */ | ||
| export const parameters = { | ||
| ...rootPreview.parameters, | ||
| options: { | ||
| storySort: { | ||
| /** | ||
| * @see https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#sorting-stories | ||
| */ | ||
| order: [ | ||
|
There was a problem hiding this comment. partially copied from |
||
| 'Concepts', | ||
| ['Introduction', 'Developer', ['Quick Start', 'Styling Components']], | ||
| 'Theme', | ||
| 'Components', | ||
| 'Migrations', | ||
| ], | ||
| }, | ||
| }, | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| { | ||
| "extends": "../tsconfig.json", | ||
| "compilerOptions": { | ||
| "allowJs": true, | ||
|
There was a problem hiding this comment. Is this basically just to check the JS files in this folder? (Also anything we need to do to avoid checking JS in any node_modules?) There was a problem hiding this comment. context/note:
good thinking! fortunately for us node modules are ignored so no need :) |
||
| "checkJs": true | ||
| }, | ||
| "exclude": ["../**/*.test.ts", "../**/*.test.js", "../**/*.test.tsx", "../**/*.test.jsx"], | ||
| "include": ["../src/**/*", "*.js"] | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| { | ||
| "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", | ||
| "extends": "@fluentui/scripts/api-extractor/api-extractor.common.json" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| { | ||
| "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", | ||
| "extends": "./api-extractor.json", | ||
| "mainEntryPointFilePath": "<projectFolder>/dist/<unscopedPackageName>/src/index.d.ts", | ||
| "compiler": { | ||
| /** | ||
| * This is a quickfix to make build:local work | ||
| * - @see https://github.com/microsoft/fluentui/issues/19360 | ||
| * - config copied/mirrored from package tsconfig.json | ||
| */ | ||
| "overrideTsconfig": { | ||
| "extends": "../../tsconfig.base.json", | ||
| "include": ["src"], | ||
| "compilerOptions": { | ||
| "target": "ES5", | ||
| "module": "CommonJS", | ||
| "lib": ["ES2016", "dom"], | ||
| "outDir": "dist", | ||
| "jsx": "react", | ||
| "declaration": true, | ||
| "experimentalDecorators": true, | ||
| "importHelpers": true, | ||
| "noUnusedLocals": true, | ||
| "preserveConstEnums": true, | ||
| "types": ["jest", "custom-global", "inline-style-expand-shorthand", "storybook__addons"], | ||
| "baseUrl": ".", | ||
| "paths": { | ||
| "@fluentui/*": ["dist/*/src/index.d.ts"] | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| /** Jest test setup file. */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| // @ts-check | ||
|
|
||
| /** | ||
| * @type {jest.InitialOptions} | ||
| */ | ||
| module.exports = { | ||
| displayName: 'react-components', | ||
| preset: '../../jest.preset.js', | ||
| globals: { | ||
| 'ts-jest': { | ||
| tsConfig: '<rootDir>/tsconfig.json', | ||
| diagnostics: false, | ||
| }, | ||
| }, | ||
| transform: { | ||
| '^.+\\.tsx?$': 'ts-jest', | ||
| }, | ||
| coverageDirectory: './coverage', | ||
| setupFilesAfterEnv: ['./config/tests.js'], | ||
| snapshotSerializers: ['@fluentui/jest-serializer-make-styles'], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -13,15 +13,18 @@ | |
| "license": "MIT", | ||
| "scripts": { | ||
| "build": "just-scripts build", | ||
| "bundle-size": "bundle-size measure", | ||
| "chromatic": "npx [email protected] --project-token $CHROMATIC_PROJECT_TOKEN --exit-zero-on-changes --build-script-name build-storybook", | ||
|
There was a problem hiding this comment. with this we will ship a proper production builds ( |
||
| "clean": "just-scripts clean", | ||
| "code-style": "just-scripts code-style", | ||
| "just": "just-scripts", | ||
| "lint": "just-scripts lint", | ||
| "start": "yarn storybook", | ||
| "docs": "api-extractor run --config=config/api-extractor.local.json --local", | ||
| "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-components/src && yarn docs", | ||
| "storybook": "start-storybook --port 3000 -s ./public", | ||
|
There was a problem hiding this comment. we override sb default static assets behaviour -> static assets are consumed from |
||
| "build-storybook": "build-storybook -s ./public -o ./dist/storybook", | ||
| "test": "jest" | ||
| }, | ||
| "devDependencies": { | ||
| "@fluentui/eslint-plugin": "^1.3.3", | ||
|
|
||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,4 @@ | ||
| import { Meta } from '@storybook/addon-docs'; | ||
|
|
||
| <Meta title="Concepts/Introduction" /> | ||
|
|
||
|
|
||
File renamed without changes.
File renamed without changes.
File renamed without changes.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
for now execute only on react-components if affected -> follow up #19366