introduce react-cap-theme package

.github/CODEOWNERS

@@ -24,6 +24,7 @@ packages/teams-components @microsoft/teams-prg
 packages/token-analyzer @microsoft/xc-uxe
 packages/react-contextual-pane @microsoft/teams-prg
 packages/react-virtualizer @microsoft/xc-uxe @microsoft/cxe-prg
+packages/react-cap-theme @microsoft/teams-prg @dvdzkwsk
 # <%= NX-CODEOWNER-PLACEHOLDER %>
 
 #### Build/Infra

packages/react-cap-theme/.babelrc

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

packages/react-cap-theme/.storybook/main.ts

@@ -0,0 +1,11 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import rootConfig from '../../../.storybook/main';
+
+const config: StorybookConfig = {
+  ...rootConfig,
+  stories: ['../stories/**/index.stories.@(js|jsx|ts|tsx|mdx)'],
+};
+
+export default config;

packages/react-cap-theme/.storybook/preview.tsx

@@ -0,0 +1,11 @@
+import type { Preview } from '@storybook/react';
+
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import rootPreview from '../../../.storybook/preview';
+
+const preview: Preview = {
+  ...rootPreview,
+  tags: ['autodocs'],
+};
+
+export default preview;

packages/react-cap-theme/.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-cap-theme/.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-cap-theme/README.md

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

packages/react-cap-theme/eslint.config.js

@@ -0,0 +1,15 @@
+const baseConfig = require('../../eslint.config.js');
+
+module.exports = [
+  ...baseConfig,
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    // Override or add rules here
+    rules: {},
+  },
+  {
+    files: ['**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];

packages/react-cap-theme/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/nx-api/jest/documents/overview#global-setupteardown-with-nx-libraries
+// jest needs EsModule Interop to find the default exported setup/teardown functions
+// swcJestConfig.module.noInterop = false;
+
+export default {
+  displayName: 'react-cap-theme',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]s$': ['@swc/jest', swcJestConfig],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  testEnvironment: 'jsdom',
+  coverageDirectory: '../../coverage/packages/react-cap-theme',
+};

packages/react-cap-theme/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@fluentui-contrib/react-cap-theme",
+  "version": "0.0.1",
+  "main": "./src/index.js",
+  "types": "./src/index.d.ts",
+  "private": true,
+  "peerDependencies": {
+    "@fluentui/react-components": ">=9.70.0 <10.0.0",
+    "@types/react": ">=16.8.0 <20.0.0",
+    "react": ">=16.8.0 <20.0.0"
+  },
+  "dependencies": {
+    "@swc/helpers": "~0.5.11"
+  }
+}

packages/react-cap-theme/project.json

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

packages/react-cap-theme/src/components/Badge.styles.ts

@@ -0,0 +1,153 @@
+import {
+  makeStyles,
+  mergeClasses,
+  shorthands,
+  tokens,
+  type BadgeState,
+  useBadgeStyles_unstable,
+} from '@fluentui/react-components';
+
+import { CAP_THEME } from './Theme';
+
+const textPadding = tokens.spacingHorizontalXXS;
+
+const useCAPBadgeStyles = makeStyles({
+  root: {
+    padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`,
+  },
+
+  tiny: {
+    padding: 'unset',
+  },
+
+  'extra-small': {
+    padding: 'unset',
+  },
+
+  small: {
+    padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,
+  },
+
+  medium: {
+    // Set by root
+  },
+
+  large: {
+    padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`,
+  },
+
+  'extra-large': {
+    padding: `0 calc(${tokens.spacingHorizontalS} + ${textPadding})`,
+  },
+
+  // shape
+  'rounded-extra-large': { borderRadius: tokens.borderRadiusXLarge },
+  'rounded-large': { borderRadius: tokens.borderRadiusLarge },
+  'rounded-medium': { borderRadius: tokens.borderRadiusMedium },
+  'rounded-small': { borderRadius: tokens.borderRadiusMedium },
+  'rounded-extra-small': { borderRadius: tokens.borderRadiusSmall },
+  'rounded-tiny': { borderRadius: tokens.borderRadiusSmall },
+
+  'outline-brand': {
+    ...shorthands.borderColor(tokens.colorBrandStroke2),
+  },
+  'outline-warning': {
+    ...shorthands.borderColor(tokens.colorStatusWarningBorder1),
+  },
+  'outline-important': {
+    ...shorthands.borderColor(tokens.colorNeutralStroke1),
+  },
+  'outline-danger': {
+    ...shorthands.borderColor(tokens.colorStatusDangerBorder1),
+  },
+  'outline-success': {
+    ...shorthands.borderColor(tokens.colorStatusSuccessBorder1),
+  },
+  'outline-informative': {
+    ...shorthands.borderColor(tokens.colorNeutralStroke1),
+  },
+  'outline-subtle': {
+    ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),
+  },
+
+  'tint-brand': {
+    color: CAP_THEME.colorBrandForegroundCompound,
+  },
+
+  'ghost-brand': {
+    color: CAP_THEME.colorBrandForegroundCompound,
+  },
+
+  'filled-warning': {
+    color: tokens.colorNeutralForegroundOnBrand,
+    backgroundColor: tokens.colorStatusWarningBackground3,
+  },
+
+  'tint-informative': {
+    backgroundColor: tokens.colorNeutralBackground5,
+    ...shorthands.borderColor(tokens.colorNeutralStroke1),
+  },
+
+  'filled-important': {
+    backgroundColor: tokens.colorNeutralBackgroundInverted,
+    color: tokens.colorNeutralForegroundOnBrand,
+  },
+
+  'tint-important': {
+    backgroundColor: tokens.colorNeutralBackground5,
+    color: tokens.colorNeutralForeground3,
+    ...shorthands.borderColor(tokens.colorNeutralStroke1),
+  },
+
+  'filled-subtle': {
+    color: tokens.colorNeutralForeground3,
+    backgroundColor: tokens.colorNeutralBackground5,
+  },
+
+  'tint-subtle': {
+    ...shorthands.borderColor(tokens.colorNeutralStroke1),
+  },
+});
+
+const useCAPBadgeIconStyles = makeStyles({
+  beforeTextSmall: {
+    marginRight: textPadding,
+  },
+  afterTextSmall: {
+    marginLeft: textPadding,
+  },
+});
+
+export function useCAPBadgeStylesHook(_state: unknown): BadgeState {
+  const state = _state as BadgeState;
+
+  // Apply base Badge styles first
+  useBadgeStyles_unstable(state);
+
+  // Then override with CAP styles
+  const styles = useCAPBadgeStyles();
+  const iconStyles = useCAPBadgeIconStyles();
+
+  state.root.className = mergeClasses(
+    state.root.className,
+    styles.root,
+    styles[state.size],
+    state.shape === 'rounded' && styles[`rounded-${state.size}`],
+    `${state.appearance}-${state.color}` in styles &&
+      styles[`${state.appearance}-${state.color}` as keyof typeof styles]
+  );
+
+  // Override icon spacing for small size
+  if (state.icon && state.size === 'small') {
+    const iconPositionClass =
+      state.iconPosition === 'after'
+        ? iconStyles.afterTextSmall
+        : iconStyles.beforeTextSmall;
+    state.icon.className = mergeClasses(
+      state.icon.className,
+      iconPositionClass
+    );
+  }
+
+  return state;
+}