chore: remove @griffel/react from peerDependencies (#113)

components/password-input/package.json

@@ -1,5 +1,4 @@
 {
-  "author": "Axis Communications AB",
   "name": "@axiscommunications/fluent-password-input",
   "version": "8.5.0",
   "description": "Password input for Fluent UI v9",
@@ -10,6 +9,7 @@
     "directory": "components/password-input"
   },
   "license": "MIT",
+  "author": "Axis Communications AB",
   "exports": {
     ".": {
       "require": "./lib/cjs/index.js",
@@ -48,7 +48,6 @@
     "@fluentui/react-components": "^9.41.0",
     "@fluentui/react-icons": "^2.0.223",
     "@fluentui/react-utilities": "^9.15.2",
-    "@griffel/react": "^1.5.18",
     "react": ">=16.8.0 <19.0.0",
     "react-dom": ">=16.8.0 <19.0.0"
   },

components/slider/package.json

@@ -1,5 +1,4 @@
 {
-  "author": "Axis Communications AB",
   "name": "@axiscommunications/fluent-slider",
   "version": "8.5.0",
   "description": "Axis branded Slider",
@@ -10,6 +9,7 @@
     "directory": "components/slider"
   },
   "license": "MIT",
+  "author": "Axis Communications AB",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "files": [
@@ -41,7 +41,6 @@
     "@fluentui/react-components": "^9.41.0",
     "@fluentui/react-icons": "^2.0.223",
     "@fluentui/react-utilities": "^9.15.2",
-    "@griffel/react": "^1.5.18",
     "react": ">=16.8.0 <19.0.0",
     "react-dom": ">=16.8.0 <19.0.0",
     "scheduler": "^0.20.0"

components/stepper/package.json

@@ -1,5 +1,4 @@
 {
-  "author": "Axis Communications AB",
   "name": "@axiscommunications/fluent-stepper",
   "version": "8.5.0",
   "description": "Stepper for Fluent UI v9",
@@ -10,6 +9,7 @@
     "directory": "components/stepper"
   },
   "license": "MIT",
+  "author": "Axis Communications AB",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [
@@ -40,7 +40,6 @@
     "@fluentui/react-components": "^9.41.0",
     "@fluentui/react-icons": "^2.0.223",
     "@fluentui/react-utilities": "^9.15.2",
-    "@griffel/react": "^1.5.18",
     "react": ">=16.8.0 <19.0.0",
     "react-dom": ">=16.8.0 <19.0.0",
     "scheduler": "^0.20.0"

components/stepper/src/step-symbol/use-step-symbol-styles.ts

@@ -1,5 +1,9 @@
-import { makeStyles, mergeClasses, shorthands } from "@griffel/react";
-import { tokens } from "@fluentui/react-components";
+import {
+  makeStyles,
+  mergeClasses,
+  shorthands,
+  tokens,
+} from "@fluentui/react-components";
 import type { SlotClassNames } from "@fluentui/react-utilities";
 import type { StepSymbolSlots, StepSymbolState } from "./step-symbol.types";
 

components/stepper/src/step/use-step-styles.ts

@@ -1,5 +1,9 @@
-import { makeStyles, mergeClasses, shorthands } from "@griffel/react";
-import { tokens } from "@fluentui/react-components";
+import {
+  makeStyles,
+  mergeClasses,
+  shorthands,
+  tokens,
+} from "@fluentui/react-components";
 import type { SlotClassNames } from "@fluentui/react-utilities";
 import type { StepSlots, StepState } from "./step.types";
 

components/topbar/package.json

@@ -1,5 +1,4 @@
 {
-  "author": "Axis Communications AB",
   "name": "@axiscommunications/fluent-topbar",
   "version": "8.5.0",
   "description": "Axis branded TopBar",
@@ -10,6 +9,7 @@
     "directory": "components/topbar"
   },
   "license": "MIT",
+  "author": "Axis Communications AB",
   "exports": {
     ".": {
       "require": "./lib/cjs/index.js",
@@ -49,7 +49,6 @@
     "@fluentui/react-components": "^9.41.0",
     "@fluentui/react-icons": "^2.0.223",
     "@fluentui/react-utilities": "^9.15.2",
-    "@griffel/react": "^1.5.18",
     "react": ">=16.8.0 <19.0.0",
     "react-dom": ">=16.8.0 <19.0.0",
     "scheduler": "^0.20.0"

examples/package.json

@@ -1,5 +1,4 @@
 {
-  "author": "Axis Communications AB",
   "name": "examples",
   "version": "8.5.0",
   "private": true,
@@ -11,6 +10,7 @@
     "directory": "examples"
   },
   "license": "MIT",
+  "author": "Axis Communications AB",
   "scripts": {
     "build": "vite build",
     "build:deploy": "pnpm run build && cp -r ./dist/. ../docs",
@@ -33,7 +33,6 @@
     "@fluentui/react-components": "^9.41.0",
     "@fluentui/react-context-selector": "^9.1.42",
     "@fluentui/react-icons": "^2.0.223",
-    "@griffel/react": "^1.5.18",
     "@vitejs/plugin-react": "^1.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -42,8 +41,8 @@
     "vite": "^3.0.9"
   },
   "devDependencies": {
-    "@types/node": "^20.9.0",
     "@playwright/test": "1.39.0",
+    "@types/node": "^20.9.0",
     "@types/react": "^17.0.67",
     "@types/react-dom": "^17.0.21",
     "eslint": "^8.53.0",

examples/src/landingpage/index.tsx

@@ -1,6 +1,5 @@
-import { makeStyles, shorthands } from "@griffel/react";
 import React from "react";
-import { tokens } from "@fluentui/react-components";
+import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
 import { useLayoutStyles } from "../styles/page";
 import { WelcomeMessage } from "./welcome-message/welcome-message.component";
 import { WelcomeImage } from "./welcome-image/welcome-image.component";

examples/src/stories/icon-page.tsx

@@ -1,7 +1,12 @@
 import * as AxisReactIcons from "@axiscommunications/fluent-icons";
 import { AxisIconProps } from "@axiscommunications/fluent-icons";
-import { Caption1, Input } from "@fluentui/react-components";
-import { makeStyles, mergeClasses, shorthands } from "@griffel/react";
+import {
+  Caption1,
+  Input,
+  makeStyles,
+  mergeClasses,
+  shorthands,
+} from "@fluentui/react-components";
 import React from "react";
 import { PageHeader } from "../components/page-header";
 import { SimpleHeader } from "../components/simple-header";

examples/src/stories/theme-page.tsx

@@ -5,22 +5,24 @@ import {
   axisLightTheme,
 } from "@axiscommunications/fluent-theme";
 import {
+  makeStyles,
   Menu,
   MenuButton,
   MenuItem,
   MenuList,
   MenuPopover,
   MenuTrigger,
+  mergeClasses,
   SelectTabData,
   SelectTabEvent,
+  shorthands,
   Switch,
   Tab,
   TabList,
   Theme,
 } from "@fluentui/react-components";
 import { useAppContext } from "../context/ApplicationStateProvider";
 import { DarkThemeRegular } from "@fluentui/react-icons";
-import { makeStyles, mergeClasses, shorthands } from "@griffel/react";
 import React, { memo, useCallback, useState } from "react";
 import { PageHeader } from "../components/page-header";
 import { SimpleHeader } from "../components/simple-header";

examples/src/styles/static.ts

@@ -1,4 +1,4 @@
-import { makeStaticStyles } from "@griffel/react";
+import { makeStaticStyles } from "@fluentui/react-components";
 
 export const useStaticStyles = makeStaticStyles({
   body: {

hooks/package.json

@@ -1,5 +1,4 @@
 {
-  "author": "Axis Communications AB",
   "name": "@axiscommunications/fluent-hooks",
   "version": "8.5.0",
   "description": "Hooks",
@@ -10,6 +9,7 @@
     "directory": "hooks"
   },
   "license": "MIT",
+  "author": "Axis Communications AB",
   "exports": {
     ".": {
       "require": "./lib/cjs/index.js",

icons/package.json

@@ -1,5 +1,4 @@
 {
-  "author": "Axis Communications AB",
   "name": "@axiscommunications/fluent-icons",
   "version": "8.5.0",
   "description": "Icons",
@@ -10,6 +9,7 @@
     "directory": "icons"
   },
   "license": "MIT",
+  "author": "Axis Communications AB",
   "main": "lib/cjs/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -36,6 +36,9 @@
     "react:svg:optimize": "svgo --folder=./dist/react-svg --precision=2 --disable=removeViewBox,mergePaths",
     "react:svg:unfill": "find ./dist/react-svg -type f -name '*.svg' -exec sed -i.bak 's/fill=\"none\"//g' '{}' \\; && find ./dist/react-svg -type f -name '*.bak' -delete"
   },
+  "dependencies": {
+    "@griffel/react": "^1.5.18"
+  },
   "devDependencies": {
     "@svgr/core": "^5.5.0",
     "@types/node": "^20.9.0",
@@ -50,7 +53,6 @@
     "yargs": "^14.2.3"
   },
   "peerDependencies": {
-    "@griffel/react": "^1.5.18",
     "react": ">=16.8.0 <19.0.0"
   },
   "packageManager": "[email protected]",

package.json

@@ -1,5 +1,4 @@
 {
-  "author": "Axis Communications AB",
   "name": "@axiscommunications/fluent-components",
   "version": "8.5.0",
   "private": true,
@@ -9,6 +8,7 @@
     "url": "https://github.com/AxisCommunications/fluent-components.git"
   },
   "license": "MIT",
+  "author": "Axis Communications AB",
   "scripts": {
     "build": "pnpm -r build",
     "check": "pnpm format:check && pnpm lint",

styles/package.json

@@ -1,5 +1,4 @@
 {
-  "author": "Axis Communications AB",
   "name": "@axiscommunications/fluent-styles",
   "version": "8.5.0",
   "description": "Styles for Fluent UI v9",
@@ -10,6 +9,7 @@
     "directory": "styles"
   },
   "license": "MIT",
+  "author": "Axis Communications AB",
   "exports": {
     ".": {
       "require": "./lib/cjs/index.js",

theme/package.json

@@ -1,5 +1,4 @@
 {
-  "author": "Axis Communications AB",
   "name": "@axiscommunications/fluent-theme",
   "version": "8.5.0",
   "description": "Theme for Fluent UI v9",
@@ -10,6 +9,7 @@
     "directory": "theme"
   },
   "license": "MIT",
+  "author": "Axis Communications AB",
   "exports": {
     ".": {
       "require": "./lib/cjs/index.js",

tools/package.json

@@ -1,20 +1,20 @@
 {
-  "author": "Axis Communications AB",
   "name": "tools",
   "version": "8.5.0",
   "private": true,
+  "author": "Axis Communications AB",
   "type": "module",
-  "scripts": {
-    "generate": "tsc",
-    "git:check-dirty": "git diff --quiet || (echo 'workspace dirty!'; git diff; exit 1)",
-    "lint:eslint": "eslint . --cache",
-    "lint": "pnpm run lint:eslint && pnpm run generate && pnpm run git:check-dirty"
-  },
   "bin": {
     "changelog": "generated/changelog/cli.js",
     "commitlint": "generated/commitlint/cli.js",
     "release": "generated/release/cli.js"
   },
+  "scripts": {
+    "generate": "tsc",
+    "git:check-dirty": "git diff --quiet || (echo 'workspace dirty!'; git diff; exit 1)",
+    "lint": "pnpm run lint:eslint && pnpm run generate && pnpm run git:check-dirty",
+    "lint:eslint": "eslint . --cache"
+  },
   "dependencies": {
     "cmd-ts": "0.13.0",
     "semver": "^7.5.4"