Fixes styling conflicts with other design systems

CHANGELOG.md

@@ -0,0 +1,17 @@
+Changelog
+
+# v2.0.0 [2024-07-31]
+
+## Patch with Breaking Changes
+
+### Fixes 
+- Styling conflicts with other design systems by scoping the Tailwind base styles
+
+### Breaking Changes
+- Wraps the toolkit with a div with the class name "stk-core" to enable scoping of the toolkit styles. An additional property is added to the style prop under `core` to allow customization of the core div.
+
+---
+
+# v1.0.0 [2024-06-18]
+
+## Initial Stable Release

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezh-hq/react-seat-toolkit",
-  "version": "1.3.8",
+  "version": "2.0.0-blizzard.2",
   "description": "React UI library to design and render seat layouts",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -28,7 +28,7 @@
     "build:types": "bunx tsc --project ./tsconfig.declaration.json && tsc-alias --project ./tsconfig.declaration.json && cd dist && ls -d */ | grep -Ev 'actions|types' | xargs rm -rf && cp ./index.d.ts ./index.slim.d.ts",
     "bump-version": "bunx --bun automatic-versioning --disable-auto-sync --recursive $(if [ \"$TAG\" != \"latest\" ]; then echo --prerelease; fi) --prerelease-branch=development --prerelease-tag=$TAG --name=@mezh-hq/react-seat-toolkit --ignore-prefixes=ci",
     "format": "bunx prettier --write --cache \"**/*.{js,jsx,ts,tsx,md,css,yml}\"",
-    "lint": "bun run --bun eslint . --ext js,jsx,ts,tsx,mdx --ignore-path .gitignore --fix --cache --report-unused-disable-directives",
+    "lint": "bun run --bun eslint . --ext js,jsx,ts,tsx --ignore-path .gitignore --fix --cache --report-unused-disable-directives",
     "storybook": "NODE_ENV=storybook storybook dev -p 6006",
     "build-storybook": "storybook build",
     "postbuild": "bun build:types && bun build:css",
@@ -116,8 +116,9 @@
     "sonner": "1.5.0",
     "storybook": "7.3.2",
     "storybook-addon-deep-controls": "0.2.1",
-    "tailwindcss": "3.4.1",
+    "tailwindcss": "3.4.6",
     "tailwindcss-animate": "1.0.6",
+    "tailwindcss-scoped-preflight": "3.4.3",
     "tsc-alias": "1.8.8",
     "vite": "4.5.2"
   },

src/hooks/breakpoint.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { screens } from "../../tailwind.config";
+import { screens } from "../utils/tailwind";
 
 const calculateBreakpoints = () =>
   Object.entries(screens).reduce((acc, [key, value]) => {

src/index.tsx

@@ -1,4 +1,5 @@
 import { Provider } from "react-redux";
+import { twMerge } from "tailwind-merge";
 import { default as Core, TooltipProvider } from "@/components";
 import { store } from "@/store";
 import { type ISTKProps } from "./types";
@@ -11,7 +12,12 @@ export const SeatToolkit = (props: ISTKProps) => {
   return (
     <Provider store={store}>
       <TooltipProvider>
-        <Core {...props} />
+        <div
+          className={twMerge("stk-core h-full w-full", props.styles?.core?.container?.className)}
+          style={props.styles?.core?.container?.properties}
+        >
+          <Core {...props} />
+        </div>
       </TooltipProvider>
     </Provider>
   );

src/styles/storybook.css

@@ -4,6 +4,7 @@ body,
 #storybook-root {
   min-height: 100% !important;
   height: 100% !important;
+  font-family: "Inter", sans-serif !important;
 }
 body {
   margin-right: 0px !important;

src/types/styles.ts

@@ -87,6 +87,7 @@ export interface IStyles {
     };
   };
   core?: {
+    container?: IStyle;
     button?: IStyle;
   };
 }

src/utils/index.ts

@@ -4,6 +4,7 @@ import { ids, selectors } from "@/constants";
 export * from "./d3";
 export * from "./transformer";
 export * from "./workspace";
+export * from "./tailwind";
 
 export const fallible = (fn: Function) => {
   try {

src/utils/tailwind.ts

@@ -0,0 +1,9 @@
+export const screens = {
+  xs: "400px",
+  xsm: "450px",
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  xxl: "1536px"
+};

tailwind.config.js

@@ -1,14 +1,6 @@
 import animate from "tailwindcss-animate";
-
-export const screens = {
-  xs: "400px",
-  xsm: "450px",
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px",
-  xxl: "1536px"
-};
+import { isolateInsideOfContainer, scopedPreflightStyles } from "tailwindcss-scoped-preflight";
+import { screens } from "./src/utils/tailwind";
 
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -26,5 +18,10 @@ export default {
       }
     }
   },
-  plugins: [animate]
+  plugins: [
+    animate,
+    scopedPreflightStyles({
+      isolationStrategy: isolateInsideOfContainer(".stk-core")
+    })
+  ]
 };