<|start_filename|>apps/vr-tests/screener.local.config.js<|end_filename|>
module.exports = {
  projectRepo: 'microsoft/fluentui',
  storybookConfigDir: '.storybook',
  /*
    We need to force version 5, regardless of our current version.
    This is due to an implementation limitation on the `storybook-screener` package.
    Read more about it here: https://github.com/microsoft/fluentui/pull/19257
  */
  storybookVersion: '5',
  storybookBinPath: '../../node_modules/.bin/',
  apiKey: process.env.SCREENER_API_KEY,
  resolution: '1024x768',
  baseBranch: 'master',
  branch: 'localTest',
};


<|start_filename|>packages/bundle-size/config/tests.js<|end_filename|>
const tmp = require('tmp');

// Clean up created files/folders on exit, even after exceptions
// (will not catch SIGINT on windows)
tmp.setGracefulCleanup();


<|start_filename|>packages/react-switch/bundle-size/Switch.fixture.js<|end_filename|>
import { Switch } from '@fluentui/react-switch';

console.log(Switch);

export default {
  name: 'Switch',
};


<|start_filename|>packages/react-badge/bundle-size/PresenseBadge.fixture.js<|end_filename|>
import { PresenceBadge } from '@fluentui/react-badge';

console.log(PresenceBadge);

export default {
  name: 'PresenceBadge',
};


<|start_filename|>packages/react-button/bundle-size/ToggleButton.fixture.js<|end_filename|>
import { ToggleButton } from '@fluentui/react-button';

console.log(ToggleButton);

export default {
  name: 'ToggleButton',
};


<|start_filename|>packages/web-components/.storybook/manager.js<|end_filename|>
import { addons } from '@storybook/addons';
import webcomponentsTheme from './theme';

addons.setConfig({
  previewTabs: {
    canvas: { hidden: true },
  },
  enableShortcuts: false,
  sidebar: {
    showRoots: true,
  },
  theme: webcomponentsTheme, // override the default Storybook theme with a custom fluent theme
});


<|start_filename|>packages/react-text/bundle-size/Text.Wrappers.fixture.js<|end_filename|>
import {
  Display,
  LargeTitle,
  Title1,
  Title2,
  Title3,
  Headline,
  Subheadline,
  Body,
  Caption,
} from '@fluentui/react-text';

console.log(Display, LargeTitle, Title1, Title2, Title3, Headline, Subheadline, Body, Caption);

export default {
  name: 'Text - Wrappers',
};


<|start_filename|>scripts/prettier/index.js<|end_filename|>
module.exports = require('./prettier-helpers');


<|start_filename|>packages/react-make-styles/bundle-size/makeStaticStyles-runtime.fixture.js<|end_filename|>
import { makeStaticStyles } from '@fluentui/react-make-styles';

console.log(makeStaticStyles);

export default {
  name: 'makeStaticStyles (runtime)',
};


<|start_filename|>packages/bundle-size/src/utils/prepareFixture.test.js<|end_filename|>
const fs = require('fs').promises;
const path = require('path');
const process = require('process');
const tmp = require('tmp');

const prepareFixture = require('./prepareFixture');

/**
 * @param {string} fixtureContent
 * @return {Promise<string>} Returns a relative path to a temporary fixture
 */
async function setup(fixtureContent) {
  const packageDir = tmp.dirSync({ prefix: 'prepareFixture', unsafeCleanup: true });

  const spy = jest.spyOn(process, 'cwd');
  spy.mockReturnValue(packageDir.name);

  const fixtureDir = tmp.dirSync({ dir: packageDir.name, name: 'bundle-size', unsafeCleanup: true });
  const fixture = tmp.fileSync({ dir: fixtureDir.name, name: 'test-fixture.js' });

  await fs.writeFile(fixture.name, fixtureContent);

  return path.relative(packageDir.name, fixture.name);
}

describe('prepareFixture', () => {
  beforeEach(() => {
    jest.resetAllMocks();
  });

  it('reads & removes metadata from a fixture file, writes it to "/dist"', async () => {
    const fixturePath = await setup(`import Component from '@fluentui/react-component';
export default { name: 'Test fixture' }
`);
    const fixtureData = await prepareFixture(fixturePath);

    expect(fixtureData.relativePath).toMatch(/bundle-size[\\|/]test-fixture.js/);
    expect(fixtureData.name).toBe('Test fixture');

    expect(await fs.readFile(fixtureData.absolutePath, 'utf8')).toMatchInlineSnapshot(
      `"import Component from '@fluentui/react-component';"`,
    );
  });

  it('throws when metadata is not valid', async () => {
    const fixturePath = await setup(`import Component from '@fluentui/react-component';
export default { foo: 'bar' }
`);

    await expect(prepareFixture(fixturePath)).rejects.toMatchInlineSnapshot(
      `[Error: unknown: Validation failed for a schema in a component: data must have required property 'name']`,
    );
  });

  it('throws when metadata is missing', async () => {
    const fixturePath = await setup(`import Component from '@fluentui/react-component';`);

    await expect(prepareFixture(fixturePath)).rejects.toMatchInlineSnapshot(`
      [Error: A fixture file should contain a default export with metadata.
      For example: export default { name: '<NAME>' }]
    `);
  });
});


<|start_filename|>lint-staged.config.js<|end_filename|>
// @ts-check

const { prettierSupportedFileExtensionsByContext } = require('@fluentui/scripts/prettier');

const commands = {
  format: 'prettier --write',
  /**
   * Run eslint in fix mode for applicable files followed by prettier.
   * The eslint wrapper handles filtering which files should be linted, since we need to both:
   * - respect ignore files (which eslint doesn't do by default when passed a specific file path)
   * - match the set of files that are linted by the package's normal `lint` command
   */
  lint: 'node ./scripts/lint-staged/eslint',
};

// https://www.npmjs.com/package/lint-staged
module.exports = {
  [`**/*.{${[].concat(
    prettierSupportedFileExtensionsByContext.stylesheets,
    prettierSupportedFileExtensionsByContext.markdown,
    prettierSupportedFileExtensionsByContext.others,
  )}}`]: [commands.format],
  [`**/*.{${prettierSupportedFileExtensionsByContext.js}}`]: [commands.format, commands.lint],
};


<|start_filename|>packages/react-card/bundle-size/Card.All.fixture.js<|end_filename|>
import { Card, CardHeader, CardPreview, CardFooter } from '@fluentui/react-card';

console.log(Card, CardHeader, CardPreview, CardFooter);

export default {
  name: 'Card - All',
};


<|start_filename|>packages/bundle-size/__fixture__/sampleReport.js<|end_filename|>
/** @type {import('../src/utils/collectLocalReport').BundleSizeReport} */
const sampleReport = [
  {
    packageName: 'foo-package',
    name: 'New entry',
    path: 'foo.fixture.js',
    minifiedSize: 1000,
    gzippedSize: 100,
  },
  {
    packageName: 'bar-package',
    name: 'An entry without diff',
    path: 'bar.fixture.js',
    minifiedSize: 1000,
    gzippedSize: 100,
  },
  {
    packageName: 'baz-package',
    name: 'An entry with diff',
    path: 'baz.fixture.js',
    minifiedSize: 1000,
    gzippedSize: 100,
  },
];

module.exports = sampleReport;


<|start_filename|>packages/babel-make-styles/__fixtures__/config-babel-options/options.json<|end_filename|>
{
  "babelOptions": {
    "plugins": ["./__fixtures__/config-babel-options/colorRenamePlugin"]
  }
}


<|start_filename|>packages/fluentui/react-northstar/jest-setup.js<|end_filename|>
// eslint-disable-next-line import/no-extraneous-dependencies -- single version policy dev dep
require('@testing-library/jest-dom');


<|start_filename|>packages/react-utilities/bundle-size/SSRProvider.fixture.js<|end_filename|>
import { SSRProvider } from '@fluentui/react-utilities';

console.log(SSRProvider);

export default {
  name: 'SSRProvider',
};


<|start_filename|>packages/react-image/bundle-size/Image.fixture.js<|end_filename|>
import { Image } from '@fluentui/react-image';

console.log(Image);

export default {
  name: 'Image',
};


<|start_filename|>packages/react-examples/.storybook/tsconfig.json<|end_filename|>
{
  "extends": "../../../tsconfig.base.json",
  "compilerOptions": {
    "jsx": "preserve",
    "noEmit": true,
    "allowJs": true,
    "checkJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "../../..",
    "paths": {
      "@fluentui/scripts/storybook/webpack.config": ["scripts/storybook/webpack.config.js"],
      "@fluentui/font-icons-mdl2": ["packages/font-icons-mdl2/src/index.ts"],
      "@fluentui/storybook": ["packages/storybook/src/index.ts"]
    }
  },
  "include": ["**/*.js"]
}


<|start_filename|>packages/react-aria/bundle-size/Default.fixture.js<|end_filename|>
import { useARIAButton } from '@fluentui/react-aria';

console.log(useARIAButton);

export default {
  name: 'ARIA - Default',
};


<|start_filename|>packages/react-input/bundle-size/Input.fixture.js<|end_filename|>
import { Input } from '@fluentui/react-input';

console.log(Input);

export default {
  name: 'Input',
};


<|start_filename|>packages/react-examples/.storybook/main.js<|end_filename|>
import custom from '@fluentui/scripts/storybook/webpack.config';
import * as path from 'path';

export default {
  addons: [
    '@storybook/addon-a11y',
    '@storybook/addon-essentials',
    'storybook-addon-performance',
    {
      name: '@storybook/addon-knobs',
      options: { escapeHTML: false },
    },
  ],
  typescript: {
    // disable react-docgen-typescript due to perf issues
    // (also appears that it would require more configuration to work properly)
    reactDocgen: false,
  },
  webpackFinal: (/** @type {import("webpack").Configuration} */ config) => {
    const customConfig = custom(config);

    customConfig.module?.rules?.push({
      // Special loader that only includes stories from the current package
      test: /\.storybook[/\\]preview.js/,
      loader: path.resolve(__dirname, 'preview-loader.js'),
    });

    return {
      ...customConfig,
      resolve: {
        ...customConfig.resolve,
        // @ts-ignore
        fallback: {
          crypto: require.resolve('crypto-browserify'),
          stream: require.resolve('stream-browserify'),
          vm: require.resolve('vm-browserify'),
          path: require.resolve('path-browserify'),
        },
      },
    };
  },

  core: {
    builder: 'webpack5',
  },
};


<|start_filename|>packages/react-tooltip/bundle-size/Tooltip.fixture.js<|end_filename|>
import { Tooltip } from '@fluentui/react-tooltip';

console.log(Tooltip);

export default {
  name: 'Tooltip',
};


<|start_filename|>packages/bundle-size/src/utils/readConfig.test.js<|end_filename|>
const fs = require('fs').promises;
const path = require('path');
const process = require('process');
const tmp = require('tmp');

const readConfig = require('./readConfig');

/**
 * @param {string} configContent
 * @param {number} pwdNesting How many folders to nest the pwd
 * @return {Promise<string>} Returns a relative path to a config file
 */
async function setup(configContent, pwdNesting = 0) {
  let packageDir = tmp.dirSync({ prefix: 'test-package', unsafeCleanup: true });
  const config = tmp.fileSync({ dir: packageDir.name, name: 'bundle-size.config.js' });

  for (let i = 0; i < pwdNesting; i++) {
    packageDir = tmp.dirSync({ dir: packageDir.name, prefix: 'nested', unsafeCleanup: true });
  }
  const spy = jest.spyOn(process, 'cwd');
  spy.mockReturnValue(packageDir.name);

  await fs.writeFile(config.name, configContent);

  return path.relative(packageDir.name, config.name);
}

describe('prepareFixture', () => {
  beforeEach(() => {
    jest.resetAllMocks();
    jest.resetModules();
  });

  it('should read config from package', async () => {
    await setup(`module.exports = { webpack: (config) => { config.foo = 'bar'; return config; } }`);

    const config = await readConfig();

    expect(config.webpack({})).toEqual({ foo: 'bar' });
  });

  it('should return default webpack config if no config file defined', async () => {
    const config = await readConfig();

    expect(config.webpack({})).toEqual({});
  });

  it('should cache config', async () => {
    process.env.NODE_ENV = 'nottest';

    await setup(`module.exports = { webpack: (config) => config }`);
    const firstConfig = await readConfig();
    await setup(`module.exports = { webpack: (config) => { config.foo = 'bar'; return config; } }`);
    const config = await readConfig();

    expect(firstConfig).toBe(config);
    expect(config.webpack({})).toEqual({});

    process.env.NODE_ENV = 'test';
  });

  it.each([1, 2, 3])('should cache config for %i layers of nesting', async nesting => {
    await setup(`module.exports = { webpack: (config) => { config.foo = 'bar'; return config; } }`, nesting);
    const config = await readConfig();

    expect(config.webpack({})).toEqual({ foo: 'bar' });
  });
});


<|start_filename|>scripts/prettier/prettier-helpers.js<|end_filename|>
// @ts-check
const path = require('path');
const fs = require('fs');
const execSync = require('../exec-sync');
const exec = require('../exec');
const findGitRoot = require('../monorepo/findGitRoot');

const repoRoot = findGitRoot();
const prettierBin = getPrettierBinary();
const prettierRulesConfig = path.join(repoRoot, 'prettier.config.js');
const prettierIgnorePath = path.join(repoRoot, '.prettierignore');

const prettierSupportedFileExtensionsByContext = {
  js: ['js', 'jsx', 'ts', 'tsx'],
  stylesheets: ['css', 'scss', 'less'],
  markdown: ['md', 'mdx'],
  others: ['html', 'json', 'yml'],
};

const prettierSupportedFileExtensions = Object.values(prettierSupportedFileExtensionsByContext).reduce(
  (acc, current) => {
    acc.push(...current);
    return acc;
  },
  [],
);

function getPrettierBinary() {
  const prettierPath = path.dirname(require.resolve('prettier'));
  const pkg = JSON.parse(fs.readFileSync(path.join(prettierPath, 'package.json'), 'utf-8'));

  return path.join(prettierPath, pkg.bin);
}

/**
 * Run prettier for a given set of files.
 *
 * @param {string[]} files - List of files for which to run prettier
 * @param {Object} config
 * @param {boolean=} config.runAsync - Whether to run the command synchronously or asynchronously
 * @param {boolean=} config.logErrorsOnly - If true, log errors/warnings only. Otherwise log all output.
 * @param {boolean=} config.check - run prettier in check mode
 * @returns A promise if run asynchronously, or nothing if run synchronously
 */
function runPrettier(files, config = {}) {
  const { check, logErrorsOnly, runAsync } = config;

  const fileIsGlob = files.length === 1 && files[0].includes('*');

  const prettierSupportedFiles = fileIsGlob
    ? files
    : files.filter(file => {
        const ext = path.extname(file).replace('.', '');
        return prettierSupportedFileExtensions.includes(ext);
      });

  if (!prettierSupportedFiles.length) {
    // Exit if there are no supported files (otherwise it will hang forever waiting for stdin)
    return;
  }

  // As of writing, Prettier's Node API (https://prettier.io/docs/en/api.html) only supports running
  // on a single file. So to easily format multiple files, we have to use the CLI.
  const cmd = [
    'node',
    prettierBin,
    '--config',
    prettierRulesConfig,
    '--ignore-path',
    `"${prettierIgnorePath}"`,
    ...(logErrorsOnly ? ['--loglevel', 'warn'] : []),
    check ? '--check' : '--write',
    ...prettierSupportedFiles,
  ].join(' ');

  if (runAsync) {
    return exec(cmd, undefined, undefined, process);
  }

  return execSync(cmd);
}

/**
 * Runs prettier on all relevant files in a folder.
 *
 * @param {string} folderPath Path to the folder for which to run prettier
 * @param {Object} config
 * @param {boolean=} config.runAsync - Whether to run the command synchronously or asynchronously
 * @param {boolean=} config.nonRecursive - If true, don't add a multi-folder glob to the path.
 * @param {boolean=} config.check - run prettier in check mode
 * @returns A promise if run asynchronously, or nothing if run synchronously
 */
function runPrettierForFolder(folderPath, config = {}) {
  const { check, nonRecursive, runAsync } = config;
  if (!path.isAbsolute(folderPath)) {
    folderPath = path.join(repoRoot, folderPath);
  }

  const fileExtensions = `.{${prettierSupportedFileExtensions.join(',')}}`;
  const sourcePath = `"${path.join(folderPath, nonRecursive ? '' : '**', '*')}${fileExtensions}"`;

  console.log(`Running prettier for ${sourcePath}`);

  return runPrettier([sourcePath], { runAsync, logErrorsOnly: true, check });
}

module.exports = { runPrettierForFolder, runPrettier, prettierSupportedFileExtensionsByContext };


<|start_filename|>packages/web-components/src/accordion/fixtures/base.html<|end_filename|>
<h1>Accordion</h1>
<h4>Default</h4>
<fluent-accordion>
  <fluent-accordion-item expanded>
    <div slot="start">
      <button>1</button>
    </div>
    <div slot="end">
      <button>1</button>
    </div>
    <span slot="heading">
      <span>Panel one</span>
      <span style="display: block; font-size: 10px">Some detail info</span>
    </span>
    Panel one content
  </fluent-accordion-item>
  <fluent-accordion-item>
    <span slot="heading">Panel two</span>
    Panel two content
  </fluent-accordion-item>
  <fluent-accordion-item expanded>
    <span slot="heading">Panel three</span>
    Panel three content
  </fluent-accordion-item>
</fluent-accordion>
<h4>Single expand</h4>
<fluent-accordion expand-mode="single">
  <fluent-accordion-item>
    <div slot="start">
      <button>1</button>
    </div>
    <div slot="end">
      <button>1</button>
    </div>
    <span slot="heading">Panel one</span>
    Panel one content
  </fluent-accordion-item>
  <fluent-accordion-item>
    <span slot="heading">Panel Two</span>
    Panel two content
  </fluent-accordion-item>
  <fluent-accordion-item>
    <span slot="heading">Panel three</span>
    Panel three content
  </fluent-accordion-item>
</fluent-accordion>


<|start_filename|>packages/react-card/bundle-size/CardFooter.fixture.js<|end_filename|>
import { CardFooter } from '@fluentui/react-card';

console.log(CardFooter);

export default {
  name: 'CardFooter',
};


<|start_filename|>packages/react-slider/bundle-size/RangedSlider.fixture.js<|end_filename|>
import { RangedSlider } from '@fluentui/react-slider';

console.log(RangedSlider);

export default {
  name: 'RangedSlider',
};


<|start_filename|>packages/react-card/bundle-size/CardPreview.fixture.js<|end_filename|>
import { CardPreview } from '@fluentui/react-card';

console.log(CardPreview);

export default {
  name: 'CardPreview',
};


<|start_filename|>packages/bundle-size/src/utils/readConfig.js<|end_filename|>
const findUp = require('find-up');

/**
 * @typedef {{
 *  webpack(config: import("webpack").Configuration): import("webpack").Configuration
 * }} Config
 */

/** @type {Config} */
const defaultConfig = {
  webpack: config => config,
};

const CONFIG_FILE_NAME = 'bundle-size.config.js';

/** @type {Config | undefined} */
let cache;

/**
 * @returns {Promise<Config>}
 *
 * @param {boolean=} quiet
 */
async function readConfig(quiet) {
  // don't use the cache in tests
  if (cache && process.env.NODE_ENV !== 'test') {
    return cache;
  }

  const configPath = await findUp(CONFIG_FILE_NAME, { cwd: process.cwd() });

  if (!configPath) {
    if (!quiet) {
      console.log(`no config file found: ${configPath}\n -> fallback to default config`);
    }
    cache = defaultConfig;
    return cache;
  }

  if (!quiet) {
    console.log(`using config: ${configPath}`);
  }

  cache = /** @type {Config}*/ (require(configPath));
  return cache;
}

module.exports = readConfig;


<|start_filename|>packages/react-slider/bundle-size/Slider.fixture.js<|end_filename|>
import { Slider } from '@fluentui/react-slider';

console.log(Slider);

export default {
  name: 'Slider',
};


<|start_filename|>packages/react-theme/bundle-size/TeamsLightTheme.fixture.js<|end_filename|>
import { teamsLightTheme } from '@fluentui/react-theme';

console.log(teamsLightTheme);

export default {
  name: 'Teams: Light theme',
};


<|start_filename|>scripts/create-package/plop-templates-react/.babelrc.json<|end_filename|>
{
  "plugins": ["module:@fluentui/babel-make-styles", "annotate-pure-calls", "@babel/transform-react-pure-annotations"]
}


<|start_filename|>packages/bundle-size/src/reporters/markdownReporter.js<|end_filename|>
const chalk = require('chalk');
const fs = require('fs').promises;
const path = require('path');
const prettier = require('prettier');
const { findPackageRoot } = require('workspace-tools');

const getChangedEntriesInReport = require('../utils/getChangedEntriesInReport');
const { formatBytes } = require('../utils/helpers');

const icons = {
  increase: 'IncreaseYellow.svg',
  decrease: 'Decrease.svg',
};

/**
 * @param {number} value
 *
 * @return {string}
 */
function getDirectionSymbol(value) {
  /**
   * @param {string} iconName
   */
  const img = iconName =>
    `<img aria-hidden="true" src="https://microsoft.github.io/sizeAuditor-website/images/icons/${iconName}" />`;

  if (value < 0) {
    return img(icons.decrease);
  }

  if (value > 0) {
    return img(icons.increase);
  }

  return '';
}

/**
 * @param {import('../utils/calculateDiffByMetric').DiffByMetric} diff
 *
 * @return {string}
 */
function formatDelta({ delta }) {
  if (delta === 0) {
    return '';
  }

  return `\`${formatBytes(delta)}\` ${getDirectionSymbol(delta)}`;
}

/**
 * @param {import('../utils/compareResultsInReports').ComparedReport} result
 * @param {string} commitSHA
 * @param {boolean} quiet
 */
module.exports = async function markdownReporter(result, commitSHA, quiet) {
  const packageRoot = findPackageRoot(__dirname);

  if (!packageRoot) {
    throw new Error(
      [
        'Failed to find a package root (directory that contains "package.json" file)',
        `Lookup start in: ${__dirname}`,
      ].join('\n'),
    );
  }

  const artifactsDir = path.resolve(packageRoot, 'dist');
  const artifactsFilename = path.join(artifactsDir, 'bundle-size.md');

  const report = [];

  report.push('## 📊 Bundle size report');
  report.push('');

  const { changedEntries, unchangedEntries } = getChangedEntriesInReport(result);

  if (changedEntries.length > 0) {
    report.push('| Package & Exports | Baseline (minified/GZIP) | PR    | Change     |');
    report.push('| :---------------- | -----------------------: | ----: | ---------: |');

    changedEntries.forEach(entry => {
      const title = `<samp>${entry.packageName}</samp> <br /> <abbr title='${entry.path}'>${entry.name}</abbr>`;
      const before = entry.diff.empty
        ? [`\`${formatBytes(0)}\``, '<br />', `\`${formatBytes(0)}\``].join('')
        : [
            `\`${formatBytes(entry.minifiedSize - entry.diff.minified.delta)}\``,
            '<br />',
            `\`${formatBytes(entry.gzippedSize - entry.diff.gzip.delta)}\``,
          ].join('');
      const after = [`\`${formatBytes(entry.minifiedSize)}\``, '<br />', `\`${formatBytes(entry.gzippedSize)}\``].join(
        '',
      );
      const difference = entry.diff.empty
        ? '🆕 New entry'
        : [`${formatDelta(entry.diff.minified)}`, '<br />', `${formatDelta(entry.diff.gzip)}`].join('');

      report.push(`| ${title} | ${before} | ${after} | ${difference}|`);
    });

    report.push('');
  }

  if (unchangedEntries.length > 0) {
    report.push('<details>');
    report.push('<summary>Unchanged fixtures</summary>');
    report.push('');

    report.push('| Package & Exports | Size (minified/GZIP) |');
    report.push('| ----------------- | -------------------: |');

    unchangedEntries.forEach(entry => {
      const title = `<samp>${entry.packageName}</samp> <br /> <abbr title='${entry.path}'>${entry.name}</abbr>`;
      const size = [`\`${formatBytes(entry.minifiedSize)}\``, '<br />', `\`${formatBytes(entry.gzippedSize)}\``].join(
        '',
      );

      report.push(`| ${title} | ${size} |`);
    });

    report.push('</details>');
  }

  report.push(
    `<sub>🤖 This report was generated against <a href='https://github.com/microsoft/fluentui/commit/${commitSHA}'>${commitSHA}</a></sub>`,
  );

  await fs.mkdir(artifactsDir, { recursive: true });
  await fs.writeFile(artifactsFilename, prettier.format(report.join('\n'), { parser: 'markdown' }));

  if (!quiet) {
    console.log([chalk.blue('[i]'), `A report file was written to ${artifactsFilename}`].join(' '));
  }
};


<|start_filename|>jest.preset.js<|end_filename|>
// @ts-check

const path = require('path');
const { pathsToModuleNameMapper } = require('ts-jest/utils');

const tsConfig = require('./tsconfig.base.json');

const tsPathAliases = pathsToModuleNameMapper(tsConfig.compilerOptions.paths, {
  prefix: `<rootDir>/${path.relative(process.cwd(), __dirname)}/`,
});

/**
 * @type {jest.InitialOptions}
 */
const baseConfig = {
  transform: {
    '^.+\\.ts$': 'ts-jest',
  },
  testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
  testPathIgnorePatterns: ['/node_modules/', '/lib/', '/lib-commonjs/', '/dist/'],
  moduleNameMapper: { ...tsPathAliases },
  cacheDirectory: '<rootDir>/node_modules/.cache/jest',
  clearMocks: true,
  watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
};

module.exports = { ...baseConfig };


<|start_filename|>packages/react-card/bundle-size/CardHeader.fixture.js<|end_filename|>
import { CardHeader } from '@fluentui/react-card';

console.log(CardHeader);

export default {
  name: 'CardHeader',
};


<|start_filename|>packages/make-styles-webpack-loader/config/tests.js<|end_filename|>
/** Jest test setup file. */

// Tests are using webpack to compile code, default timeout could be not enough to pass tests
jest.setTimeout(30000);


<|start_filename|>scripts/lint-staged/eslint-for-package.js<|end_filename|>
// @ts-check

const micromatch = require('micromatch');
const fs = require('fs-extra');
const path = require('path');
const { ESLint } = require('eslint');
const constants = require('../tasks/eslint-constants');

/**
 * Run ESLint for certain files from a particular package.
 * `process.cwd()` is assumed to be the root of the package containing the files.
 *
 * Background: We can't just run the eslint CLI on the filenames because directly passed filenames
 * override ignores configured elsewhere (so files that should be ignored would be linted).
 * Also, the set of linted files per package may be different. So manually filter out ignored or
 * non-linted files then run eslint via its API [as described here](https://www.npmjs.com/package/lint-staged#how-can-i-ignore-files-from-eslintignore-).
 *
 * (The main lint-staged eslint.js runs this file in a subprocess per package to allow parallelization.)
 */
async function run() {
  // Get information needed to determine whether files in this package should be linted
  const packagePath = process.cwd();
  const packageJson = fs.readJSONSync(path.join(packagePath, 'package.json'));
  const lintScript = packageJson.scripts.lint || '';
  /** @type {import('eslint').ESLint} */
  let eslint;
  /** @type {string} */
  let includePattern;

  if (lintScript.includes('just')) {
    // For packages using just, match the extensions and subdirectory used by scripts/tasks/eslint.ts.
    // (Note that until we start linting all files in the package and can remove the constants.directory
    // segment here, the glob needs to start with the absolute package path in case someone has named
    // the directory containing all their git repos "src".)
    includePattern = path.join(packagePath, constants.directory, '**', `*{${constants.extensions}`);
    eslint = new ESLint({ fix: true, cache: true });
  } else {
    // Otherwise, look for the --ext option to determine extensions
    const extensionsMatch = lintScript.match(/--ext (\S+)/);
    const extensions = extensionsMatch ? extensionsMatch[1] : '.js';
    includePattern = `**/${extensions.includes(',') ? `*{${extensions}}` : `*${extensions}`}`;
    eslint = new ESLint({ fix: true, cache: lintScript.includes('--cache') });
  }

  // Filter out files with non-linted extensions
  const files = process.argv.slice(2).filter(file => micromatch.isMatch(file, includePattern));

  // Filter out ignored files (2-step process due to isPathIgnored returning a promise)
  const ignoreResults = await Promise.all(files.map(f => eslint.isPathIgnored(f)));
  const filteredFiles = files.filter((f, i) => !ignoreResults[i]);

  if (filteredFiles.length === 0) {
    return;
  }

  // Lint files then fix all auto-fixable issues
  const results = await eslint.lintFiles(filteredFiles);
  await ESLint.outputFixes(results);

  // Format results
  const formatter = await eslint.loadFormatter();
  const resultText = formatter.format(results);
  if (resultText) {
    console.error(resultText);
    process.exit(1);
  }
}

run().catch(err => {
  console.log(err);
  process.exit(1);
});


<|start_filename|>packages/react-theme/bundle-size/TeamsAllThemes.fixture.js<|end_filename|>
import { teamsLightTheme, teamsDarkTheme, teamsHighContrastTheme } from '@fluentui/react-theme';

console.log(teamsLightTheme, teamsDarkTheme, teamsHighContrastTheme);

export default {
  name: 'Teams: all themes',
};


<|start_filename|>packages/babel-make-styles/__fixtures__/config-evaluation-rules/options.json<|end_filename|>
{
  "evaluationRules": [
    {
      "action": "@fluentui/babel-make-styles/__fixtures__/config-evaluation-rules/sampleEvaluator"
    }
  ]
}


<|start_filename|>apps/perf-test/src/scenarioRenderTypes.js<|end_filename|>
/**
 * You don't have to add scenarios to this structure unless
 * you want their render types to differ from the default (mount only).
 *
 * Note:
 * You should not need to have virtual-rerender tests in most cases because mount test provides enough coverage.
 * It is mostly usefual for cases where component has memoization logics. And in case of re-rendering,
 * memoization logic help avoid certain code paths.
 */

const AllRenderTypes = ['mount', 'virtual-rerender', 'virtual-rerender-with-unmount'];
const DefaultRenderTypes = ['mount'];

const scenarioRenderTypes = {
  ThemeProvider: AllRenderTypes,
  FluentProviderWithTheme: AllRenderTypes,
};

module.exports = {
  scenarioRenderTypes,
  DefaultRenderTypes,
};


<|start_filename|>packages/react-label/bundle-size/Label.fixture.js<|end_filename|>
import { Label } from '@fluentui/react-label';

console.log(Label);

export default {
  name: 'Label',
};


<|start_filename|>packages/bundle-size/src/reporters/markdownReporter.test.js<|end_filename|>
const markdownReporter = require('./markdownReporter');
const sampleComparedReport = require('../../__fixture__/sampleComparedReport');

describe('markdownReporter', () => {
  it('renders a report to a file', async () => {
    const writeFile = jest.spyOn(require('fs').promises, 'writeFile').mockImplementation(() => {
      return new Promise(resolve => resolve());
    });

    await markdownReporter(sampleComparedReport, 'commit-hash', true);
    expect(writeFile.mock.calls[0][1]).toMatchSnapshot();
  });
});


<|start_filename|>packages/fluentui/e2e/cypress/support/commands.js<|end_filename|>
const CYPRESS_ACTION_TIMEOUT = 10 * 1000;

Cypress.Commands.add('gotoTestCase', (testFilePath, waitForSelector) => {
  const { _ } = Cypress;
  const path = testFilePath
    .split('/')
    .pop()
    .replace(/^(.+).spec.ts?$/, '$1')
    .replace(/^\//, '');

  cy.visit(`/${_.kebabCase(path)}`);
  cy.exist(waitForSelector);
});

Cypress.Commands.add('exist', selector => {
  cy.get(selector, { timeout: CYPRESS_ACTION_TIMEOUT }).should('exist');
});

Cypress.Commands.add('notExist', selector => {
  cy.get(selector, { timeout: CYPRESS_ACTION_TIMEOUT }).should('not.exist');
});

Cypress.Commands.add('nothingIsFocused', () => {
  cy.focused().should('not.exist');
});

Cypress.Commands.add('simulatePageMove', () => {
  cy.get('body').realTouch();
});

Cypress.Commands.add('nothingIsFocused', () => {
  cy.focused().should('not.exist');
});

Cypress.Commands.add('clickOn', selector => {
  cy.get(selector).realClick();
});

Cypress.Commands.add('mouseDownOn', selector => {
  cy.get(selector).trigger('mousedown');
});

Cypress.Commands.add('focusOn', selector => {
  cy.get(selector).focus();
});

Cypress.Commands.add('hover', selector => {
  cy.get(selector).realHover();
});

Cypress.Commands.add('isFocused', selector => {
  cy.get(selector, { timeout: CYPRESS_ACTION_TIMEOUT }).should('be.focused');
});

Cypress.Commands.add('notVisible', selector => {
  cy.get(selector, { timeout: CYPRESS_ACTION_TIMEOUT }).should('not.be.visible');
});

Cypress.Commands.add('visible', selector => {
  cy.get(selector, { timeout: CYPRESS_ACTION_TIMEOUT }).should('be.visible');
});

Cypress.Commands.add('resizeViewport', width => {
  cy.viewport(width, Cypress.config('viewportHeight'));
});

Cypress.Commands.add('expectTextOf', (selector, text) => {
  cy.get(selector, { timeout: CYPRESS_ACTION_TIMEOUT }).should('have.text', text);
});

Cypress.Commands.add('expectCount', (selector, count) => {
  cy.get(selector, { timeout: CYPRESS_ACTION_TIMEOUT }).should('have.length', count);
});

Cypress.Commands.add('hasComputedStyle', (selector, property, value) => {
  cy.get(selector, { timeout: CYPRESS_ACTION_TIMEOUT }).should('have.css', property, value);
});

Cypress.Commands.add('hasPropertyValue', (selector, property, value) => {
  cy.get(selector, { timeout: CYPRESS_ACTION_TIMEOUT }).should('have.prop', property, value);
});

Cypress.Commands.add('waitForSelectorAndPressKey', (selector, key, modifier) => {
  // Enter doesn't work properly for now. It can be hotfixed by Space
  // https://github.com/dmtrKovalenko/cypress-real-events/issues/8
  if (key === '{enter}') {
    cy.realPress('Space');
    return;
  }

  if (key === 'т') {
    cy.get(selector).type(key);
    return;
  }

  if (modifier) {
    cy.realPress([modifier, key]);
    return;
  }
  cy.realPress(key);
});


<|start_filename|>packages/react-components/bundle-size/ProviderAndTheme.fixture.js<|end_filename|>
import { FluentProvider, webLightTheme } from '@fluentui/react-components';

console.log(FluentProvider, webLightTheme);

export default {
  name: 'react-components: FluentProvider & webLightTheme',
};


<|start_filename|>packages/web-components/src/tabs/fixtures/tabs.html<|end_filename|>
<h1>Tabs</h1>
<h4>Default</h4>
<fluent-tabs id="myTab" activeId="TabTwo">
  <fluent-tab id="TabOne">Tab one</fluent-tab>
  <fluent-tab id="TabTwo">Tab two</fluent-tab>
  <fluent-tab id="TabThree">Tab three</fluent-tab>
  <fluent-tab-panel id="TabPanelOne"> Tab one content. This is for testing. </fluent-tab-panel>
  <fluent-tab-panel id="TabPanelTwo"> Tab two content. This is for testing. </fluent-tab-panel>
  <fluent-tab-panel id="TabPanelThree"> Tab three content. This is for testing. </fluent-tab-panel>
  <div>Testing</div>
</fluent-tabs>
<h4>Vertical</h4>
<fluent-tabs orientation="vertical">
  <fluent-tab>Tab one</fluent-tab>
  <fluent-tab>Tab two</fluent-tab>
  <fluent-tab>Tab three</fluent-tab>
  <fluent-tab-panel> Tab one content. This is for testing. </fluent-tab-panel>
  <fluent-tab-panel> Tab two content. This is for testing. </fluent-tab-panel>
  <fluent-tab-panel> Tab three content. This is for testing. </fluent-tab-panel>
</fluent-tabs>
<h4>Supplemental content</h4>
<fluent-tabs>
  <div slot="start">
    <button>1</button>
    <button>2</button>
    <button>3</button>
  </div>
  <div slot="end">
    <button>1</button>
    <button>2</button>
    <button>3</button>
  </div>
  <fluent-tab>Tab one</fluent-tab>
  <fluent-tab>Tab two</fluent-tab>
  <fluent-tab>Tab three</fluent-tab>
  <fluent-tab-panel> Tab one content. This is for testing. </fluent-tab-panel>
  <fluent-tab-panel> Tab two content. This is for testing. </fluent-tab-panel>
  <fluent-tab-panel> Tab three content. This is for testing. </fluent-tab-panel>
</fluent-tabs>
<h4>Supplemental content - Vertical</h4>
<fluent-tabs orientation="vertical">
  <div slot="start">
    <button>1</button>
    <button>2</button>
    <button>3</button>
  </div>
  <div slot="end">
    <button>1</button>
    <button>2</button>
    <button>3</button>
  </div>
  <fluent-tab>Tab one</fluent-tab>
  <fluent-tab>Tab two</fluent-tab>
  <fluent-tab>Tab three</fluent-tab>
  <fluent-tab-panel> Tab one content. This is for testing. </fluent-tab-panel>
  <fluent-tab-panel> Tab two content. This is for testing. </fluent-tab-panel>
  <fluent-tab-panel> Tab three content. This is for testing. </fluent-tab-panel>
</fluent-tabs>
<h4>No active indicator</h4>
<fluent-tabs activeIndicator="false" activeId="TabTwo">
  <fluent-tab id="TabOne">Tab one</fluent-tab>
  <fluent-tab id="TabTwo">Tab two</fluent-tab>
  <fluent-tab id="TabThree">Tab three</fluent-tab>
  <fluent-tab-panel id="TabPanelOne"> Tab one content. This is for testing. </fluent-tab-panel>
  <fluent-tab-panel id="TabPanelTwo"> Tab two content. This is for testing. </fluent-tab-panel>
  <fluent-tab-panel id="TabPanelThree"> Tab three content. This is for testing. </fluent-tab-panel>
</fluent-tabs>
<h4>No active indicator - Vertical</h4>
<fluent-tabs activeIndicator="false" orientation="vertical" activeIndicator>
  <fluent-tab>Tab one</fluent-tab>
  <fluent-tab>Tab two</fluent-tab>
  <fluent-tab>Tab three</fluent-tab>
  <fluent-tab-panel> Tab one content. This is for testing. </fluent-tab-panel>
  <fluent-tab-panel> Tab two content. This is for testing. </fluent-tab-panel>
  <fluent-tab-panel> Tab three content. This is for testing. </fluent-tab-panel>
</fluent-tabs>


<|start_filename|>packages/react-storybook-addon/preset.js<|end_filename|>
function config(entry = []) {
  // This entrypoint is deliberately set to ts for monorepo DX
  // However this is bad for publishing
  // https://github.com/microsoft/fluentui/issues/20474
  // https://github.com/microsoft/fluentui/issues/18357
  return [...entry, require.resolve('./src/preset/preview.ts')];
}

function managerEntries(entry = []) {
  // This entrypoint is deliberately set to ts for monorepo DX
  // However this is bad for publishing
  // https://github.com/microsoft/fluentui/issues/20474
  // https://github.com/microsoft/fluentui/issues/18357
  return [...entry, require.resolve('./src/preset/manager.ts')];
}

module.exports = { managerEntries, config };


<|start_filename|>packages/react-cards/.eslintrc.json<|end_filename|>
{
  "extends": ["plugin:@fluentui/eslint-plugin/react--legacy"],
  "root": true,
  "rules": {
    "@typescript-eslint/no-explicit-any": "off"
  },
  "overrides": [
    {
      "files": "**/*.{ts,tsx}",
      "rules": {
        // The components in this package are all deprecated
        "deprecation/deprecation": "off"
      }
    }
  ]
}


<|start_filename|>scripts/monorepo/isConvergedPackage.js<|end_filename|>
// @ts-check
const semver = require('semver');
const { readConfig } = require('../read-config');

/**
 *  @typedef {string | import('./index').PackageJson}  PathOrPackageJson
 */

/**
 * Determines whether a package is converged, based on its version.
 * @param {PathOrPackageJson} [packagePathOrJson] optional different package path to run in OR previously-read package.json
 * (defaults to reading package.json from `process.cwd()`)
 * @returns {boolean} true if it's a converged package (version >= 9)
 */
function isConvergedPackage(packagePathOrJson) {
  const packageJson =
    !packagePathOrJson || typeof packagePathOrJson === 'string'
      ? readConfig('package.json', /** @type {string|undefined} */ (packagePathOrJson))
      : packagePathOrJson;
  return !!packageJson && (semver.major(packageJson.version) >= 9 || isNightlyVersion(packageJson.version));
}

/**
 * Determins if a version is the 0.0.0 nightly version used by converged packages
 * @param {string} version
 */
function isNightlyVersion(version) {
  return semver.major(version) === 0 && semver.minor(version) === 0 && semver.patch(version) === 0;
}

module.exports = isConvergedPackage;


<|start_filename|>apps/public-docsite-resources/config/api-docs.js<|end_filename|>
// @ts-check
// Config file for API doc JSON (*.page.json) generation

const fs = require('fs');
const path = require('path');
const { findRepoDeps, findGitRoot } = require('@fluentui/scripts/monorepo');

const gitRoot = findGitRoot();

/** @type {import('@fluentui/api-docs').IPageJsonOptions} */
module.exports = {
  apiJsonPaths: [
    'packages/react',
    ...findRepoDeps({ cwd: path.join(gitRoot, 'packages/react'), dev: false }).map(dep => dep.packagePath),
  ]
    .map(packagePath => path.join(gitRoot, packagePath, 'dist', path.basename(packagePath) + '.api.json'))
    .filter(apiJsonPath => fs.existsSync(apiJsonPath)),
  min: process.argv.includes('--production'),
  outputRoot: path.resolve(__dirname, '../dist/api'),
  fallbackGroup: 'references',
  pageGroups: {
    react: [
      'ActivityItem',
      'Announced',
      'Breadcrumb',
      'Button',
      'Calendar',
      'Callout',
      'Checkbox',
      'ChoiceGroup',
      'Coachmark',
      'ColorPicker',
      'ComboBox',
      'CommandBar',
      'ContextualMenu',
      'DatePicker',
      'DetailsList',
      'Dialog',
      'Divider',
      'DocumentCard',
      'Dropdown',
      'ExtendedPeoplePicker',
      'ExtendedPicker',
      'Facepile',
      'FloatingPeoplePicker',
      'FloatingPicker',
      'FocusTrapZone',
      'FocusZone',
      'GroupedList',
      'HoverCard',
      'Icon',
      'Image',
      'Keytips',
      'Label',
      'Layer',
      'Link',
      'List',
      'MarqueeSelection',
      'MessageBar',
      'Modal',
      'Nav',
      'OverflowSet',
      'Overlay',
      'Panel',
      'PeoplePicker',
      'Persona',
      'Pickers',
      'Pivot',
      'Popup',
      'ProgressIndicator',
      'Rating',
      'ResizeGroup',
      'SelectedPeopleList',
      'Separator',
      'ScrollablePane',
      'SearchBox',
      'SelectableOption',
      'SelectedItemsList',
      'Shimmer',
      'Slider',
      'SpinButton',
      'Spinner',
      'Stack',
      'SwatchColorPicker',
      'TeachingBubble',
      'Text',
      'TextField',
      'Toggle',
      'Tooltip',
    ],
  },
};


<|start_filename|>packages/bundle-size/src/commands/compareReports.js<|end_filename|>
const chalk = require('chalk');

const cliReporter = require('../reporters/cliReporter');
const markdownReporter = require('../reporters/markdownReporter');
const collectLocalReport = require('../utils/collectLocalReport');
const { compareResultsInReports } = require('../utils/compareResultsInReports');
const getRemoteReport = require('../utils/getRemoteReport');
const { hrToSeconds } = require('../utils/helpers');

/**
 * @param {typeof import('../index') & { branch: string, output: 'cli' | 'markdown' }} options
 */
async function compareReports(options) {
  const { branch, output, quiet } = options;
  const startTime = process.hrtime();

  const localReportStartTime = process.hrtime();
  const localReport = await collectLocalReport();

  if (!quiet) {
    console.log(
      [chalk.blue('[i]'), `Local report prepared in ${hrToSeconds(process.hrtime(localReportStartTime))}`].join(' '),
    );
  }

  const remoteReportStartTime = process.hrtime();
  const { commitSHA, remoteReport } = await getRemoteReport(branch);

  if (!quiet) {
    if (commitSHA === '') {
      console.log([chalk.blue('[i]'), `Remote report for "${branch}" branch was not found`].join(' '));
    } else {
      console.log(
        [
          chalk.blue('[i]'),
          `Remote report for "${commitSHA}" commit fetched in ${hrToSeconds(process.hrtime(remoteReportStartTime))}`,
        ].join(' '),
      );
    }
  }

  const result = compareResultsInReports(localReport, remoteReport);

  switch (output) {
    case 'cli':
      await cliReporter(result);
      break;
    case 'markdown':
      await markdownReporter(result, commitSHA, quiet);
      break;
  }

  if (!quiet) {
    console.log(`Completed in ${hrToSeconds(process.hrtime(startTime))}`);
  }
}

// ---

/** @type {import('yargs').CommandModule} */
const api = {
  command: 'compare-reports',
  describe: 'compares local and remote results',
  builder: {
    branch: {
      alias: 'b',
      type: 'string',
      description: 'A branch to compare against',
      default: 'main',
    },
    output: {
      alias: 'o',
      type: 'string',
      choices: ['cli', 'markdown'],
      description: 'Defines a reporter to produce output',
      default: 'cli',
    },
  },
  handler: compareReports,
};

module.exports = api;


<|start_filename|>packages/bundle-size/src/utils/sortComparedReport.test.js<|end_filename|>
const { emptyDiff } = require('./compareResultsInReports');
const sortComparedReport = require('./sortComparedReport');

describe('sortComparedReport', () => {
  it('sorts a report by "packageName" & "path', () => {
    /** @type {import('../utils/compareResultsInReports').ComparedReport} */
    const report = [
      { packageName: 'bcd', name: 'BCD-B', path: 'bcd-b.js', minifiedSize: 0, gzippedSize: 0, diff: emptyDiff },
      { packageName: 'bcd', name: 'BCD-A', path: 'bcd-a.js', minifiedSize: 0, gzippedSize: 0, diff: emptyDiff },
      { packageName: 'abc', name: 'ABC', path: 'abc.js', minifiedSize: 0, gzippedSize: 0, diff: emptyDiff },
    ];
    const actual = sortComparedReport(report);

    expect(actual[0]).toEqual(report[2]);
    expect(actual[1]).toEqual(report[1]);
    expect(actual[2]).toEqual(report[0]);
  });
});


<|start_filename|>packages/babel-make-styles/__fixtures__/config-evaluation-rules/sampleEvaluator.js<|end_filename|>
// @ts-check

/** @type {import("@linaria/babel-preset").Evaluator} */
const sampleEvaluator = () => {
  // Evaluators transform input code to something that will be evaluated by Node later. In evaluatePathsInVM() we expect
  // that results will be available as "exports.__mkPreval", this evaluator mocks it
  const result = `exports.__mkPreval = [{ color: 'blue' }]`;

  return [result, null];
};

module.exports.default = sampleEvaluator;


<|start_filename|>scripts/monorepo/findRepoDeps.js<|end_filename|>
// @ts-check

const { readConfig } = require('../read-config');
const getAllPackageInfo = require('./getAllPackageInfo');

/**
 * @param {import('./index').PackageJson} packageJson
 * @param {boolean|undefined} dev
 */
function getDeps(packageJson, dev) {
  if (!packageJson) {
    return [];
  }

  return Object.keys({ ...packageJson.dependencies, ...(dev && packageJson.devDependencies) });
}

/** @type {import('./index').PackageInfo[]} */
let repoDeps;
let cwdForRepoDeps;

/**
 * Find all the dependencies (and their dependencies) within the repo for a specific package (in the CWD when this was called)
 * @param {object} [options]
 * @param {string} [options.cwd] optional different cwd
 * @param {boolean} [options.dev] include dev deps, default true
 * @returns {import('./index').PackageInfo[]}
 */
function findRepoDeps(options = {}) {
  const { cwd = process.cwd(), dev = true } = options;
  if (repoDeps && cwdForRepoDeps === cwd) {
    return repoDeps;
  }

  const packageInfo = getAllPackageInfo();
  const packageJson = readConfig('package.json', cwd);
  const packageDeps = getDeps(packageJson, dev);
  /** @type {Set<string>} */
  const result = new Set();

  while (packageDeps.length > 0) {
    const dep = packageDeps.pop();

    if (dep && packageInfo[dep]) {
      result.add(dep);

      getDeps(packageInfo[dep].packageJson, dev).forEach(child => {
        if (child && packageInfo[child] && !result.has(child)) {
          packageDeps.push(child);
        }
      });
    }
  }

  repoDeps = [...result].map(dep => packageInfo[dep]);
  cwdForRepoDeps = cwd;
  return repoDeps;
}

module.exports = findRepoDeps;

// @ts-ignore
if (require.main === module) {
  console.log(findRepoDeps());
}


<|start_filename|>packages/react-menu/bundle-size/Menu.Selectable.fixture.js<|end_filename|>
import {
  Menu,
  MenuTrigger,
  MenuList,
  MenuItem,
  MenuItemCheckbox,
  MenuItemRadio,
  MenuPopover,
} from '@fluentui/react-menu';

console.log(Menu, MenuTrigger, MenuList, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover);

export default {
  name: 'Menu  (including selectable components)',
};


<|start_filename|>packages/react-button/bundle-size/CompoundButton.fixture.js<|end_filename|>
import { CompoundButton } from '@fluentui/react-button';

console.log(CompoundButton);

export default {
  name: 'CompoundButton',
};


<|start_filename|>packages/bundle-size/src/utils/collectLocalReport.test.js<|end_filename|>
const fs = require('fs').promises;
const process = require('process');
const tmp = require('tmp');

// This mock should be not required 😮
// glob.sync() call in collectLocalReport.js always returns an empty array on Linux/Windows in tests for an unknown
// reason while files are present in filesystem
jest.mock('glob', () => ({
  sync: () => [
    'packages/package-a/dist/bundle-size/bundle-size.json',
    'packages/package-b/dist/bundle-size/bundle-size.json',
  ],
}));

const collectLocalReport = require('./collectLocalReport');

/**
 * @return {string}
 */
function mkPackagesDir() {
  const projectDir = tmp.dirSync({ prefix: 'collectLocalReport', unsafeCleanup: true });
  const packagesDir = tmp.dirSync({ dir: projectDir.name, name: 'packages', unsafeCleanup: true });

  const spy = jest.spyOn(process, 'cwd');
  spy.mockReturnValue(projectDir.name);

  // is required as root directory is determined based on Git project
  tmp.dirSync({ dir: projectDir.name, name: '.git', unsafeCleanup: true });

  return packagesDir.name;
}

/**
 * @param {string} packagesDir
 * @return {string}
 */
function mkReportDir(packagesDir) {
  const distDir = tmp.dirSync({ dir: packagesDir, name: 'dist', unsafeCleanup: true });
  const bundleSizeDir = tmp.dirSync({ dir: distDir.name, name: 'bundle-size', unsafeCleanup: true });

  tmp.fileSync({ dir: packagesDir, name: 'package.json' });

  return tmp.fileSync({ dir: bundleSizeDir.name, name: 'bundle-size.json' }).name;
}

describe('collectLocalReport', () => {
  beforeEach(() => {
    jest.resetAllMocks();
  });

  it('aggregates all local reports to a single one', async () => {
    const packagesDir = mkPackagesDir();

    const reportAPath = mkReportDir(tmp.dirSync({ dir: packagesDir, name: 'package-a', unsafeCleanup: true }).name);
    const reportBPath = mkReportDir(tmp.dirSync({ dir: packagesDir, name: 'package-b', unsafeCleanup: true }).name);

    /** @type {import('../utils/buildFixture').BuildResult[]} */
    const reportA = [
      { name: 'fixtureA1', path: 'path/fixtureA1.js', minifiedSize: 100, gzippedSize: 50 },
      { name: 'fixtureA2', path: 'path/fixtureA2.js', minifiedSize: 200, gzippedSize: 100 },
    ];
    /** @type {import('../utils/buildFixture').BuildResult[]} */
    const reportB = [{ name: 'fixtureB', path: 'path/fixtureB.js', minifiedSize: 10, gzippedSize: 5 }];

    await fs.writeFile(reportAPath, JSON.stringify(reportA));
    await fs.writeFile(reportBPath, JSON.stringify(reportB));

    expect(await collectLocalReport()).toMatchInlineSnapshot(`
      Array [
        Object {
          "gzippedSize": 50,
          "minifiedSize": 100,
          "name": "fixtureA1",
          "packageName": "package-a",
          "path": "path/fixtureA1.js",
        },
        Object {
          "gzippedSize": 100,
          "minifiedSize": 200,
          "name": "fixtureA2",
          "packageName": "package-a",
          "path": "path/fixtureA2.js",
        },
        Object {
          "gzippedSize": 5,
          "minifiedSize": 10,
          "name": "fixtureB",
          "packageName": "package-b",
          "path": "path/fixtureB.js",
        },
      ]
    `);
  });

  it('throws an error if a report file contains invalid JSON', async () => {
    const packagesDir = mkPackagesDir();

    const reportAPath = mkReportDir(tmp.dirSync({ dir: packagesDir, name: 'package-a', unsafeCleanup: true }).name);
    const reportBPath = mkReportDir(tmp.dirSync({ dir: packagesDir, name: 'package-b', unsafeCleanup: true }).name);

    /** @type {import('../utils/buildFixture').BuildResult[]} */
    const reportB = [{ name: 'fixtureB', path: 'path/fixtureB.js', minifiedSize: 10, gzippedSize: 5 }];

    await fs.writeFile(reportAPath, '{ name: "fixture", }');
    await fs.writeFile(reportBPath, JSON.stringify(reportB));

    await expect(collectLocalReport()).rejects.toThrow(/Failed to read JSON/);
  });
});


<|start_filename|>packages/keyboard-keys/bundle-size/MultipleKeyCodes.fixture.js<|end_filename|>
import { keyCodes } from '@fluentui/keyboard-keys';

console.log(keyCodes.Enter, keyCodes.Tab, keyCodes.ArrowDown, keyCodes.ArrowLeft, keyCodes.ArrowRight);

export default {
  name: 'Multiple keyCodes',
};


<|start_filename|>packages/react-card/bundle-size/Card.fixture.js<|end_filename|>
import { Card } from '@fluentui/react-card';

console.log(Card);

export default {
  name: 'Card',
};


<|start_filename|>packages/fluentui/local-sandbox/webpack.config.js<|end_filename|>
// @ts-check

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

/** @type {import("webpack").Configuration} */
const webpackConfig = {
  name: 'client',
  target: 'web',
  mode: 'development',
  entry: {
    app: './src/index.tsx',
  },
  output: {
    filename: `[name].js`,
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['source-map-loader'],
        enforce: 'pre',
      },
      {
        test: /\.(ts|tsx)$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          cacheDirectory: true,
        },
      },
    ],
  },
  plugins: [
    new ForkTsCheckerWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'public/index.html',
        },
      ],
    }),
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false,
    }),
  ],
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json'],
  },
  performance: {
    hints: false, // to (temporarily) disable "WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit")
  },
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          // https://github.com/terser/terser
          mangle: false,
          output: {
            beautify: true,
            comments: true,
          },
        },
      }),
    ],
  },
};

module.exports = webpackConfig;
