Experiment/deps

.github/CODEOWNERS

@@ -7,6 +7,7 @@ packages/react-data-grid-react-window-grid/ @microsoft/ms-fabric
 packages/react-draggable-dialog/ @microsoft/cxe-prg @marcosmoura
 packages/pierce-dom @spmonahan
 packages/houdini-utils @microsoft/teams-prg
+packages/react-themeless-provider @spmonahan
 # <%= NX-CODEOWNER-PLACEHOLDER %>
 
 #### Build/Infra

change/fluentui-contrib-e0f9df68-b86b-4cc8-9fd2-a18226c70fdb.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: scaffold react-themeless-provider package",
+  "packageName": "fluentui-contrib",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

package.json

@@ -37,15 +37,20 @@
     "@nx/plugin": "17.3.2",
     "@nx/react": "17.3.2",
     "@nx/storybook": "17.3.2",
+    "@nx/web": "17.3.2",
     "@nx/webpack": "17.3.2",
     "@nx/workspace": "17.3.2",
     "@playwright/experimental-ct-react": "^1.41.2",
     "@rnx-kit/eslint-plugin": "0.4.2",
     "@storybook/addon-essentials": "7.6.10",
+    "@storybook/addon-interactions": "^7.5.3",
     "@storybook/addon-storysource": "7.6.10",
     "@storybook/core-common": "^7.0.9",
     "@storybook/core-server": "7.6.10",
+    "@storybook/jest": "^0.2.3",
     "@storybook/react-webpack5": "7.6.10",
+    "@storybook/test-runner": "^0.13.0",
+    "@storybook/testing-library": "^0.2.2",
     "@swc-node/register": "1.6.8",
     "@swc/cli": "~0.1.62",
     "@swc/core": "1.3.107",
@@ -59,6 +64,7 @@
     "@typescript-eslint/eslint-plugin": "6.20.0",
     "@typescript-eslint/parser": "6.20.0",
     "beachball": "^2.33.2",
+    "core-js": "^3.6.5",
     "eslint": "8.48.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "^2.27.5",

packages/react-themeless-provider/.babelrc

@@ -0,0 +1,3 @@
+{
+  "extends": "../../babel.config.json"
+}

packages/react-themeless-provider/.eslintrc.json

@@ -0,0 +1,24 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["stories/**/*.tsx", "stories/**/*.ts"],
+      "rules": {
+        "@nx/enforce-module-boundaries": "off"
+      }
+    }
+  ]
+}

packages/react-themeless-provider/.storybook/main.ts

@@ -0,0 +1,26 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: ['../stories/**/index.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: [
+    '@nx/react/plugins/storybook',
+    {
+      name: '@storybook/addon-storysource',
+      options: {
+        loaderOptions: {
+          injectStoryParameters: true,
+        },
+      },
+    },
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+};
+
+export default config;
+
+// To customize your webpack configuration you can use the webpackFinal field.
+// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
+// and https://nx.dev/packages/storybook/documents/custom-builder-configs

packages/react-themeless-provider/.storybook/preview.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+import { Preview } from '@storybook/react';
+
+import { FluentProvider, webLightTheme } from '@fluentui/react-components';
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <FluentProvider theme={webLightTheme}>
+        <Story />
+      </FluentProvider>
+    ),
+  ],
+};
+
+export default preview;

packages/react-themeless-provider/.storybook/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "outDir": ""
+  },
+  "files": [
+    "../../../node_modules/@nx/react/typings/styled-jsx.d.ts",
+    "../../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nx/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "../**/*.spec.ts",
+    "../**/*.spec.js",
+    "../**/*.spec.tsx",
+    "../**/*.spec.jsx"
+  ],
+  "include": [
+    "../stories/**/*.stories.ts",
+    "../stories/**/*.stories.js",
+    "../stories/**/*.stories.jsx",
+    "../stories/**/*.stories.tsx",
+    "../stories/**/*.stories.mdx",
+    "*.ts",
+    "*.js"
+  ]
+}

packages/react-themeless-provider/.swcrc

@@ -0,0 +1,30 @@
+{
+  "jsc": {
+    "target": "es2019",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "transform": {
+      "react": {
+        "runtime": "classic",
+        "useSpread": true
+      }
+    },
+    "keepClassNames": true,
+    "externalHelpers": true,
+    "loose": true
+  },
+  "sourceMaps": true,
+  "exclude": [
+    "jest.config.ts",
+    ".*\\.spec.tsx?$",
+    ".*\\.test.tsx?$",
+    "./src/jest-setup.ts$",
+    "./**/jest-setup.ts$",
+    ".*.js$"
+  ],
+  "$schema": "https://json.schemastore.org/swcrc"
+}

packages/react-themeless-provider/README.md

@@ -0,0 +1,11 @@
+# react-themeless-provider
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build react-themeless-provider` to build the library.
+
+## Running unit tests
+
+Run `nx test react-themeless-provider` to execute the unit tests via [Jest](https://jestjs.io).

packages/react-themeless-provider/jest.config.ts

@@ -0,0 +1,30 @@
+/* eslint-disable */
+import { readFileSync } from 'fs';
+
+// Reading the SWC compilation config and remove the "exclude"
+// for the test files to be compiled by SWC
+const { exclude: _, ...swcJestConfig } = JSON.parse(
+  readFileSync(`${__dirname}/.swcrc`, 'utf-8')
+);
+
+// disable .swcrc look-up by SWC core because we're passing in swcJestConfig ourselves.
+// If we do not disable this, SWC Core will read .swcrc and won't transform our test files due to "exclude"
+if (swcJestConfig.swcrc === undefined) {
+  swcJestConfig.swcrc = false;
+}
+
+// Uncomment if using global setup/teardown files being transformed via swc
+// https://nx.dev/packages/jest/documents/overview#global-setup/teardown-with-nx-libraries
+// jest needs EsModule Interop to find the default exported setup/teardown functions
+// swcJestConfig.module.noInterop = false;
+
+export default {
+  displayName: 'react-themeless-provider',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]s$': ['@swc/jest', swcJestConfig],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  testEnvironment: 'jsdom',
+  coverageDirectory: '../../coverage/packages/react-themeless-provider',
+};

packages/react-themeless-provider/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@fluentui-contrib/react-themeless-provider",
+  "version": "0.0.1",
+  "dependencies": {
+    "@swc/helpers": "~0.5.2"
+  },
+  "main": "./src/index.js",
+  "typings": "./src/index.d.ts",
+  "private": true,
+  "peerDependencies": {
+    "@fluentui/react-components": ">=9.46.3 <10.0.0",
+    "@types/react": ">=16.8.0 <19.0.0",
+    "@types/react-dom": ">=16.8.0 <19.0.0",
+    "react": ">=16.8.0 <19.0.0",
+    "react-dom": ">=16.8.0 <19.0.0"
+  }
+}

packages/react-themeless-provider/project.json

@@ -0,0 +1,67 @@
+{
+  "name": "react-themeless-provider",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/react-themeless-provider/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@fluentui-contrib/nx-plugin:build"
+    },
+    "publish": {
+      "command": "node tools/scripts/publish.mjs react-themeless-provider {args.ver} {args.tag}",
+      "dependsOn": ["build"]
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "lintFilePatterns": [
+          "packages/react-themeless-provider/**/*.ts",
+          "packages/react-themeless-provider/**/*.tsx"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "packages/react-themeless-provider/jest.config.ts",
+        "passWithNoTests": true
+      }
+    },
+    "type-check": {
+      "executor": "@fluentui-contrib/nx-plugin:type-check"
+    },
+    "storybook": {
+      "executor": "@nx/storybook:storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "packages/react-themeless-provider/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@nx/storybook:build",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "outputDir": "dist/storybook/react-themeless-provider",
+        "configDir": "packages/react-themeless-provider/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "test-storybook": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "test-storybook -c packages/react-themeless-provider/.storybook --url=http://localhost:4400"
+      }
+    }
+  },
+  "tags": []
+}

packages/react-themeless-provider/src/components/ThemelessFluentProvider/ThemelessFluentProvider.styles.ts

@@ -0,0 +1,22 @@
+import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
+
+export const useStyles = makeStyles({
+  root: {
+    ...shorthands.padding(tokens.spacingHorizontalM),
+    ...shorthands.border(
+      tokens.strokeWidthThin,
+      'solid',
+      tokens.colorNeutralStroke1
+    ),
+    color: tokens.colorNeutralForeground1,
+    backgroundColor: tokens.colorNeutralBackground1,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    maxWidth: '200px',
+    ':hover': {
+      backgroundColor: tokens.colorNeutralBackground1Hover,
+      color: tokens.colorNeutralForeground1Hover,
+    },
+  },
+});

packages/react-themeless-provider/src/components/ThemelessFluentProvider/ThemelessFluentProvider.test.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { ThemelessFluentProvider } from './ThemelessFluentProvider';
+
+describe('ThemelessFluentProvider', () => {
+  it('should render', () => {
+    render(<ThemelessFluentProvider />);
+  });
+});

packages/react-themeless-provider/src/components/ThemelessFluentProvider/ThemelessFluentProvider.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { mergeClasses } from '@fluentui/react-components';
+import { useStyles } from './ThemelessFluentProvider.styles';
+
+export const ThemelessFluentProvider: React.FC = () => {
+  const styles = useStyles();
+  return <div className={mergeClasses(styles.root)}>Hello World!</div>;
+};

packages/react-themeless-provider/src/components/ThemelessFluentProvider/index.ts

@@ -0,0 +1 @@
+export * from './ThemelessFluentProvider';

packages/react-themeless-provider/src/index.ts

@@ -0,0 +1,2 @@
+export * from './components/ThemelessFluentProvider';
+export {};

packages/react-themeless-provider/stories/ThemelessFluentProvider/Default.stories.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { ThemelessFluentProvider } from '@fluentui-contrib/react-themeless-provider';
+
+export const Default = () => <ThemelessFluentProvider />;

packages/react-themeless-provider/stories/ThemelessFluentProvider/index.stories.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Meta } from '@storybook/react';
+import { ThemelessFluentProvider } from '@fluentui-contrib/react-themeless-provider';
+export { Default } from './Default.stories';
+
+const meta: Meta<typeof ThemelessFluentProvider> = {
+  component: ThemelessFluentProvider,
+};
+
+export default meta;

packages/react-themeless-provider/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "compilerOptions": {
+    "jsx": "react"
+  },
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.storybook.json"
+    }
+  ]
+}