feat(react-text-vr): bootstrap visual-regression project

.github/CODEOWNERS

@@ -250,6 +250,7 @@ packages/react-components/react-tabs/library @microsoft/cxe-prg @dmytrokirpa
 packages/react-components/react-tabs/stories @microsoft/cxe-prg @dmytrokirpa
 packages/react-components/react-text/library @microsoft/cxe-prg @marcosmoura
 packages/react-components/react-text/stories @microsoft/cxe-prg @marcosmoura
+packages/react-components/react-text/visual-regression @microsoft/cxe-prg @marcosmoura
 packages/react-components/react-textarea/library @microsoft/cxe-prg
 packages/react-components/react-textarea/stories @microsoft/cxe-prg
 packages/react-components/react-tooltip/library @microsoft/cxe-prg

.github/workflows/pr-vrt-poc.yml

@@ -18,6 +18,74 @@ env:
   NX_VERBOSE_LOGGING: true
 
 jobs:
+  debug:
+    if: github.repository_owner == 'microsoft' && github.event_name == 'pull_request'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: 'write'
+      actions: 'read'
+    steps:
+      - name: Get Pull Request Details
+        id: pr_details
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const response = await github.rest.pulls.get({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              pull_number: context.issue.number,
+            });
+
+            console.log({issue:context.issue})
+
+            return response.data;
+
+      - name: Debug
+        run: |
+          echo "${{ steps.pr_details.outputs.result.head }}"
+          echo "${{ fromJson(steps.pr_details.outputs.result).head.ref }}"
+          echo "${{ fromJson(steps.pr_details.outputs.result).head.repo.full_name }}"
+          echo '========'
+          echo '========'
+          echo '========'
+          echo $W_RUN
+          echo '========'
+          echo '========'
+          echo '========'
+          echo $RESULT
+        env:
+          W_RUN: ${{ toJSON(github.event) }}
+          RESULT: ${{steps.pr_details.outputs.result}}
+
+      - name: Checkout Forked Repository
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ fromJson(steps.pr_details.outputs.result).head.ref }}
+          repository: ${{ fromJson(steps.pr_details.outputs.result).head.repo.full_name }}
+          fetch-depth: 10
+
+      - name: Debug2
+        run: |
+          echo "--base ${{ fromJson(steps.pr_details.outputs.result).base.sha }} --head ${{ fromJson(steps.pr_details.outputs.result).head.sha }}"
+          echo "===="
+          git status
+          echo '===='
+          ls -la packages/react-components/react-text/visual-regression
+
+      - name: Configure Git
+        run: |
+          git config user.email "${{ github.actor }}@users.noreply.github.com"
+          git config user.name "${{ github.actor }}"
+
+      - name: commit
+        run: |
+          git remote -v
+          touch packages/react-components/react-text/visual-regression/hello.txt
+          git status
+          git add *.txt
+          git commit -m "chore: test by bot"
+          git push origin ${{ fromJson(steps.pr_details.outputs.result).head.ref }}
+
   approve_vrt_diff:
     if: github.repository_owner == 'microsoft' && github.event.issue.pull_request && contains(github.event.comment.body,'/approve-visual-regression-diff')
     runs-on: ubuntu-latest

packages/react-components/react-text/visual-regression/.eslintrc.json

@@ -0,0 +1,30 @@
+{
+  "extends": ["../../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": [
+          "error",
+          {
+            "ignoredFiles": ["{projectRoot}/eslint.config.{js,cjs,mjs}"]
+          }
+        ]
+      }
+    }
+  ]
+}

packages/react-components/react-text/visual-regression/.storybook/main.js

@@ -0,0 +1,58 @@
+const path = require('path');
+
+const { registerTsPaths, registerRules, rules, loadWorkspaceAddon } = require('@fluentui/scripts-storybook');
+const tsConfigPath = path.resolve(__dirname, '../../../../../tsconfig.base.json');
+
+module.exports = /** @type {import('@storybook/react-webpack5').StorybookConfig} */ ({
+  addons: [loadWorkspaceAddon('@fluentui/react-storybook-addon', { tsConfigPath })],
+  stories: ['../src/**/*.stories.tsx'],
+  core: {
+    disableTelemetry: true,
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      builder: {
+        useSWC: true,
+        lazyCompilation: false,
+      },
+    },
+  },
+  typescript: {
+    // disable react-docgen-typescript (totally not needed here, slows things down a lot)
+    reactDocgen: false,
+  },
+  webpackFinal: (config, options) => {
+    if (options.configType === 'PRODUCTION') {
+      // Disable source maps
+      config.devtool = false;
+    }
+    registerTsPaths({ config, configFile: tsConfigPath });
+    registerRules({ config, rules: [rules.griffelRule] });
+
+    return config;
+  },
+  swc() {
+    return {
+      jsc: {
+        target: 'es2019',
+        parser: {
+          syntax: 'typescript',
+          tsx: true,
+          decorators: true,
+          dynamicImport: true,
+        },
+        transform: {
+          decoratorMetadata: true,
+          legacyDecorator: true,
+        },
+        keepClassNames: true,
+        externalHelpers: true,
+        loose: true,
+        minify: {
+          mangle: false,
+        },
+      },
+    };
+  },
+});

packages/react-components/react-text/visual-regression/.storybook/preview.js

@@ -0,0 +1,8 @@
+/** @type {import("@fluentui/react-storybook-addon").FluentParameters} */
+export const parameters = {
+  layout: 'none',
+  mode: 'vr-test',
+  reactStorybookAddon: {
+    disabledDecorators: ['AriaLive'],
+  },
+};

packages/react-components/react-text/visual-regression/.storybook/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "",
+    "allowJs": true,
+    "checkJs": true,
+    "types": ["static-assets", "environment"]
+  },
+  "include": ["*.js"]
+}

packages/react-components/react-text/visual-regression/README.md

@@ -0,0 +1,75 @@
+# react-text-visual-regression
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build react-text-visual-regression` to build the library.
+
+## Running visual regression
+
+Run `nx run react-text-visual-regression:test-vr-cli`.
+
+## About
+
+Project for visual regression scenarios.
+
+> Uses Free, Secure and OSS VR testing solution based on:
+>
+> - Storybook to author VR scenarios
+> - StoryWright for capturing Stories and their interactions
+> - Visual Regression Assert CLI - to execute diffing and updating snapshots baseline
+
+## Authoring VR scenarios
+
+1. write stories following Storybook CSF3 format
+
+```ts
+import { Steps, type StoryParameters } from 'storywright';
+
+export default {
+  title: 'Text Converged',
+  // 1. Define decorators to create scoped images that won't change dimensions over time
+  decorators: [
+    Story => (
+      <div className="testWrapper" style={{ width: '250px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  // 2. If interactions are needed , define those via StoryWright Steps API
+  parameters: {
+    storyWright: { steps: new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end() },
+  } satisfies StoryParameters,
+} satisfies Meta<typeof Text>;
+```
+
+2. Override steps per story if needed
+
+```ts
+export const Default = {
+  name: 'Default',
+  render: () => {
+    return <div>markup</div>;
+  },
+  // 1. overriding default export steps - this story will execute different behaviors
+  parameters: {
+    storyWright: { steps: new Steps().click().snapshot('normal').end() },
+  } satisfies StoryParameters,
+} satisfies StoryObj;
+```
+
+3. leverage `@fluentui/visual-regression-utilities` to create scenarios for Right to Left, Dark Mode, High Contrast Mode etc
+
+```ts
+export const Default = {
+  // 1. name is mandatory to properly propagate it to getStoryVariant fn call
+  name: 'Default',
+  render: () => {
+    return <div>markup</div>;
+  },
+} satisfies StoryObj;
+
+// 2. create new Variants of your scenario
+export const DefaultRTL = getStoryVariant(Default, RTL);
+```

packages/react-components/react-text/visual-regression/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@fluentui/react-text-visual-regression",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@fluentui/react-text": "*",
+    "@fluentui/visual-regression-utilities": "*"
+  },
+  "peerDependencies": {
+    "@storybook/react": "^7.6.20"
+  },
+  "devDependencies": {
+    "@fluentui/react-storybook-addon": "*",
+    "@fluentui/scripts-storybook": "*"
+  },
+  "type": "commonjs",
+  "main": "./src/index.js",
+  "typings": "./src/index.d.ts"
+}

packages/react-components/react-text/visual-regression/project.json

@@ -0,0 +1,49 @@
+{
+  "name": "react-text-visual-regression",
+  "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/react-components/react-text/visual-regression/src",
+  "projectType": "library",
+  "tags": ["vNext", "platform:web", "visual-regression"],
+  "targets": {
+    "build-storybook": {
+      "command": "storybook build -o dist/storybook --quiet",
+      "options": {
+        "cwd": "{projectRoot}"
+      }
+    },
+    "generate-image-for-vrt": {
+      "command": "rm -rf dist/vrt/actual && storywright  --browsers chromium --url dist/storybook --destpath dist/vrt/actual --waitTimeScreenshot 500 --concurrency 4 --headless true",
+      "options": {
+        "cwd": "{projectRoot}"
+      },
+      "metadata": {
+        "help": {
+          "command": "yarn storywright --help",
+          "example": {}
+        }
+      },
+      "dependsOn": ["build-storybook"],
+      "inputs": ["{projectRoot}/src/**/*.stories.tsx"],
+      "outputs": ["{projectRoot}/dist/vrt/actual/**"],
+      "cache": true
+    },
+    "test-vr-cli": {
+      "command": "visual-regression-assert assert --baselineDir src/__snapshots__ --outputPath dist/vrt",
+      "options": {
+        "cwd": "{projectRoot}"
+      },
+      "dependsOn": [
+        "build-storybook",
+        "generate-image-for-vrt",
+        { "projects": ["visual-regression-assert"], "target": "build" }
+      ],
+      "inputs": ["{projectRoot}/dist/vrt/screenshots/**", "{projectRoot}/src/**/*.stories.tsx"],
+      "metadata": {
+        "help": {
+          "command": "yarn visual-regression-assert --help",
+          "example": {}
+        }
+      }
+    }
+  }
+}