Skip to content

Commit

Permalink
Merge branch 'react-icons-entry-point-fix' of https://github.com/tomi…
Browse files Browse the repository at this point in the history
…-msft/fluentui into react-icons-entry-point-fix
  • Loading branch information
tomi-msft committed May 22, 2024
2 parents d0da31c + d72a6bc commit 720b077
Show file tree
Hide file tree
Showing 1,249 changed files with 50,233 additions and 31,172 deletions.
4 changes: 4 additions & 0 deletions .devops/templates/deployE2E.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ steps:
filePath: yarn-ci.sh
displayName: yarn

- script: |
yarn playwright install --with-deps
displayName: Install Playwright dependencies
- script: |
yarn cypress verify
displayName: verify cypress install
Expand Down
4 changes: 4 additions & 0 deletions .devops/templates/runpublishvrscreenshot.yml
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@ steps:
filePath: yarn-ci.sh
displayName: yarn (install packages)

- script: |
yarn playwright install --with-deps
displayName: Install Playwright dependencies
- script: |
isPR=${{lower(eq(variables['Build.Reason'], 'PullRequest'))}}
echo $isPR
Expand Down
3 changes: 2 additions & 1 deletion .github/CODEOWNERS
Validating CODEOWNERS rules …
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ apps/ts-minbar-test-react @microsoft/fluentui-react-build
apps/ts-minbar-test-react-components @microsoft/fluentui-react-build
apps/vr-tests @microsoft/fluentui-react
apps/vr-tests-react-components @microsoft/fluentui-react
apps/vr-tests-web-components @microsoft/fui-wc
apps/ssr-tests @microsoft/fluentui-react
apps/pr-deploy-site @microsoft/fluentui-react-build
apps/public-docsite-v9 @microsoft/cxe-red @microsoft/fluentui-react-build
Expand Down Expand Up @@ -241,7 +242,7 @@ packages/react-components/react-nav-preview @microsoft/cxe-red @mltejera
packages/react-components/react-motion-preview @microsoft/cxe-prg @marcosmoura
packages/react-components/react-message-bar @microsoft/teams-prg
packages/react-components/react-rating @microsoft/cxe-red @tomi-msft
packages/react-components/react-swatch-picker-preview @microsoft/cxe-prg
packages/react-components/react-swatch-picker @microsoft/cxe-prg
packages/react-components/react-calendar-compat @microsoft/cxe-red @sopranopillow
packages/react-components/react-infolabel @microsoft/cxe-red @sopranopillow
packages/react-components/react-list-preview @microsoft/teams-prg
Expand Down
30 changes: 30 additions & 0 deletions .github/workflows/azure-static-web-apps-deploy.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
name: Azure Static Web Apps web components

on:
push:
branches:
- master
paths:
- packages/web-components/**
workflow_dispatch:

permissions:
contents: read

jobs:
build_and_deploy:
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout@v2

- name: Build and Deploy Job
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.WEB_COMPONENTS_AZURE_STATIC_WEB_APPS_API_TOKEN }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
action: 'upload'
app_build_command: 'yarn workspace @fluentui/web-components build-storybook'
output_location: 'packages/web-components/dist/storybook' # Built app content directory, relative to app_location - optional
skip_api_build: true
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,9 @@ rush.json
# tsdoc
tsdoc-metadata.json

# benchmarking
.tensile/

# tools cache
gulp-cache
.cache
Expand Down
3 changes: 0 additions & 3 deletions .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,6 @@ packages/fluentui/docs/src/behaviorMenu.json
packages/fluentui/docs/src/exampleMenus
packages/fluentui/docs/src/exampleSources
packages/fluentui/ability-attributes/src/schema.ts
packages/web-components/src/**/*.styles.ts
packages/web-components/**/*.spec.ts
packages/web-components/src/default-palette.ts

# template files which actually follow a different language's formatting
*.hbs
Expand Down
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

> Fluent UI React is shipping its v9 final stable release. Visit the [Fluent UI React v9 Release page on the wiki](https://github.com/microsoft/fluentui/wiki/Fluent-UI-React-v9-Release) to learn more about the upcoming release schedule.
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
Fluent UI web represents a collection of utilities, React components, and Web Components for building web applications.

This repo is home to 3 separate projects today. Combining Fluent UI React v9 components with Fluent UI React v8 or v0 components is possible and allows gradual migration to Fluent UI v9.

Expand All @@ -21,7 +21,7 @@ The following table will help you navigate the 3 projects and understand their d
| **Quick Start** | [Quick Start](https://react.fluentui.dev/?path=/docs/concepts-developer-quick-start--page) | [Quick Start](https://developer.microsoft.com/en-us/fluentui#/get-started/web) | [See README.md](https://github.com/microsoft/fluentui/tree/master/packages/web-components/README.md) |
| **Docs** | [https://react.fluentui.dev/](https://react.fluentui.dev/) | [aka.ms/fluentui-react](https://aka.ms/fluentui-react) | [aka.ms/fluentui-web-components](https://aka.ms/fluentui-web-components) |
| **NPM** | `@fluentui/react-components` | `@fluentui/react`| `@fluentui/web-components` |
| **Version** | [![npm version](https://img.shields.io/npm/v/@fluentui/react-components?style=flat-square)](https://www.npmjs.com/package/@fluentui/react-components) | [![npm version](https://img.shields.io/npm/v/@fluentui/react?style=flat-square)](https://www.npmjs.com/package/@fluentui/react) | [![npm version](https://img.shields.io/npm/v/@fluentui/web-components?style=flat-square)](https://www.npmjs.com/package/@fluentui/web-components) |
| **Version** | [![npm version](https://img.shields.io/npm/v/@fluentui/react-components?style=flat-square)](https://www.npmjs.com/package/@fluentui/react-components) | [![npm version](https://img.shields.io/npm/v/@fluentui/react?style=flat-square)](https://www.npmjs.com/package/@fluentui/react) | [![npm version](https://img.shields.io/npm/v/@fluentui/web-components/beta?style=flat-square)](https://www.npmjs.com/package/@fluentui/web-components/v/3.0.0-beta.15) |
| **Issues** | [![Fluent UI React Components GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/Fluent%20UI%20react-components%20(v9)?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22Fluent+UI+react-components+%28v9%29%22) | [![Fluent UI React GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/Fluent%20UI%20react%20(v8)?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22Fluent+UI+react+(v8)%22) | [![Fluent UI Web Components GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/web-components?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22web-components%22) |
<!-- prettier-ignore-end -->

Expand Down
4 changes: 2 additions & 2 deletions apps/perf-test-react-components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,13 @@
"@fluentui/scripts-perf-test-flamegrill": "*",
"@fluentui/react-avatar": "*",
"@fluentui/react-button": "*",
"@fluentui/react-components": "*",
"@fluentui/react-field": "*",
"@fluentui/react-persona": "*",
"@fluentui/react-provider": "*",
"@fluentui/react-spinbutton": "*",
"@fluentui/react-swatch-picker-preview": "*",
"@fluentui/react-theme": "*",
"@griffel/core": "^1.14.1",
"@griffel/core": "^1.16.0",
"@microsoft/load-themed-styles": "^1.10.26",
"react": "17.0.2",
"react-dom": "17.0.2",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { SwatchPicker, ColorSwatch, ImageSwatch, EmptySwatch } from '@fluentui/react-swatch-picker-preview';
import { SwatchPicker, ColorSwatch, ImageSwatch, EmptySwatch } from '@fluentui/react-components';
import { FluentProvider } from '@fluentui/react-provider';
import { webLightTheme } from '@fluentui/react-theme';

Expand Down
3 changes: 1 addition & 2 deletions apps/public-docsite-v9/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,9 @@
"@fluentui/react-storybook-addon": "*",
"@fluentui/react-storybook-addon-export-to-sandbox": "*",
"@fluentui/theme-designer": "*",
"@fluentui/react-swatch-picker-preview": "*",
"@fluentui/react-motions-preview": "*",
"@fluentui/react-timepicker-compat": "*",
"@griffel/react": "^1.5.14",
"@griffel/react": "^1.5.22",
"@microsoft/applicationinsights-web": "^3",
"react": "17.0.2",
"react-dom": "17.0.2",
Expand Down
2 changes: 1 addition & 1 deletion apps/recipes-react-components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"@fluentui/react-provider": "*",
"@fluentui/react-storybook-addon": "*",
"@fluentui/react-storybook-addon-export-to-sandbox": "*",
"@griffel/react": "^1.5.14",
"@griffel/react": "^1.5.22",
"react": "17.0.2",
"react-dom": "17.0.2",
"tslib": "^2.1.0"
Expand Down
4 changes: 2 additions & 2 deletions apps/vr-tests-react-components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
"@fluentui/react-spinbutton": "*",
"@fluentui/react-storybook-addon": "*",
"@fluentui/react-storybook-addon-export-to-sandbox": "*",
"@fluentui/react-swatch-picker-preview": "*",
"@fluentui/react-swatch-picker": "*",
"@fluentui/react-switch": "*",
"@fluentui/react-table": "*",
"@fluentui/react-tabs": "*",
Expand All @@ -71,7 +71,7 @@
"@fluentui/react-toolbar": "*",
"@fluentui/react-tree": "*",
"@fluentui/react-utilities": "*",
"@griffel/react": "^1.5.14",
"@griffel/react": "^1.5.22",
"react": "17.0.2",
"react-dom": "17.0.2",
"tslib": "^2.1.0",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,23 @@ export const Multiline = () => (
</div>
);

export const MultilineWithoutActions = () => (
<div
style={{ display: 'flex', flexDirection: 'column', gap: '10px', width: 500, padding: 10 }}
className="testWrapper"
>
{intents.map(intent => (
<MessageBar layout="multiline" key={intent} intent={intent}>
<MessageBarBody>
<MessageBarTitle>{intent}</MessageBarTitle>
Message providing information to the user with actionable insights. <Link>Link</Link>
</MessageBarBody>
<MessageBarActions containerAction={<Button appearance="transparent" icon={<DismissRegular />} />} />
</MessageBar>
))}
</div>
);

export const MultilineNoActions = () => (
<div
style={{ display: 'flex', flexDirection: 'column', gap: '10px', width: 500, padding: 10 }}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { SwatchPicker } from '@fluentui/react-swatch-picker-preview';
import { SwatchPicker } from '@fluentui/react-swatch-picker';
import { SampleSwatchPickerColors, SampleSwatchPickerImages, SampleSwatchPickerGrid, steps } from './utils';
import { ComponentMeta } from '@storybook/react';
import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
ImageSwatch,
EmptySwatch,
SwatchPickerRow,
} from '@fluentui/react-swatch-picker-preview';
} from '@fluentui/react-swatch-picker';
import { HeartRegular } from '@fluentui/react-icons';

export const steps = new Steps()
Expand Down
14 changes: 14 additions & 0 deletions apps/vr-tests-web-components/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint", "import"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"prettier"
],
"rules": {
"@typescript-eslint/explicit-module-boundary-types": "off"
}
}
90 changes: 90 additions & 0 deletions apps/vr-tests-web-components/.storybook/main.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
const path = require('path');
const CircularDependencyPlugin = require('circular-dependency-plugin');
const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');

const tsBin = require.resolve('typescript');
const tsConfigPath = path.resolve(__dirname, '../../../tsconfig.base.wc.json');

const tsPaths = new TsconfigPathsPlugin({
configFile: tsConfigPath,
});

// TODO - these types are copied from root ./storybook/main.js as if we would like to use those as is, it will force us to add our custom storybook plugins as devDeps to WC
// - refactor this to be shared

/** @typedef {import('@storybook/core-common').StorybookConfig} StorybookBaseConfig */

module.exports = /** @type {StorybookBaseConfig} */ ({
addons: [
{
name: '@storybook/addon-docs',
},
{
name: '@storybook/addon-essentials',
options: {
backgrounds: false,
viewport: false,
toolbars: false,
actions: false,
},
},
],

stories: ['../src/**/*.stories.tsx'],
core: {
builder: 'webpack5',
disableTelemetry: true,
},
babel: {},
typescript: {
// disable react-docgen-typescript (totally not needed here, slows things down a lot)
reactDocgen: false,
},
webpackFinal: async config => {
config.resolve = config.resolve ?? {};
config.resolve.extensions = config.resolve.extensions ?? [];
config.resolve.plugins = config.resolve.plugins ?? [];
config.module = config.module ?? {};
config.plugins = config.plugins ?? [];

config.resolve.extensionAlias = {
'.js': ['.js', '.ts', '.tsx'],
'.mjs': ['.mjs', '.mts'],
};
config.resolve.extensions.push(...['.ts', '.js']);
config.resolve.plugins.push(tsPaths);
config.module.rules = config.module.rules ?? [];
config.module.rules.push(
{
test: /\.([cm]?ts|tsx)$/,
loader: 'ts-loader',
sideEffects: true,
options: {
transpileOnly: true,
compiler: tsBin,
},
},
// Following config is needed to be able to resolve @storybook packages imported in specified files that don't ship valid ESM
// It also enables importing other packages without proper ESM extensions, but that should be avoided !
// @see https://webpack.js.org/configuration/module/#resolvefullyspecified
{
test: /\.m?js/,
resolve: { fullySpecified: false },
},
);

config.plugins.push(
new CircularDependencyPlugin({
exclude: /node_modules/,
failOnError: process.env.NODE_ENV === 'production',
}),
);

// Disable ProgressPlugin which logs verbose webpack build progress. Warnings and Errors are still logged.
if (process.env.TF_BUILD || process.env.LAGE_PACKAGE_NAME) {
config.plugins = config.plugins.filter(({ constructor }) => constructor.name !== 'ProgressPlugin');
}

return config;
},
});
11 changes: 11 additions & 0 deletions apps/vr-tests-web-components/.storybook/manager.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { addons } from '@storybook/addons';

addons.setConfig({
previewTabs: {
canvas: { hidden: true },
},
enableShortcuts: false,
sidebar: {
showRoots: true,
},
});
17 changes: 17 additions & 0 deletions apps/vr-tests-web-components/.storybook/preview.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { WCThemeDecorator } from '../src/utilities/WCThemeDecorator';

export const parameters = {
layout: 'fullscreen',
controls: { expanded: true },
viewMode: 'docs',
previewTabs: {
canvas: { hidden: true },
},
options: {
storySort: {
method: 'alphabetical',
},
},
};

export const decorators = [WCThemeDecorator];
28 changes: 28 additions & 0 deletions apps/vr-tests-web-components/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"name": "@fluentui/vr-tests-web-components",
"version": "0.0.1",
"private": true,
"description": "Visual regression tests for @fluentui/web-components",
"type": "module",
"scripts": {
"build": "build-storybook -o dist/storybook",
"format": "prettier . -w --ignore-path ../../.prettierignore",
"lint": "eslint src --ext .ts,.tsx",
"start": "start-storybook",
"type-check": "echo 'TODO'",
"vr:build": "yarn build",
"vr:test": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true"
},
"devDependencies": {
"@fluentui/eslint-plugin": "*",
"@fluentui/scripts-tasks": "*",
"html-react-parser": "4.0.0",
"typescript": "4.7.4"
},
"dependencies": {
"@fluentui/react-button": "*",
"@fluentui/react-storybook-addon": "*",
"@fluentui/web-components": ">=3.0.0-alpha",
"tslib": "^2.1.0"
}
}
6 changes: 6 additions & 0 deletions apps/vr-tests-web-components/project.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"name": "@fluentui/vr-tests-web-components",
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"projectType": "application",
"implicitDependencies": []
}
Loading

0 comments on commit 720b077

Please sign in to comment.