docs: fix SB diff styles (#5152)

* docs: fix SB diff styles

* chore(docs): add missing deps

.changeset/silver-guests-build.md

@@ -0,0 +1,2 @@
+---
+---

docs/components/Diff/Diff.tsx

@@ -0,0 +1,15 @@
+import React from "react"
+import { Unstyled } from "@storybook/blocks"
+import classnames from "classnames"
+import Highlight from "react-highlight"
+
+export type DiffProps = {
+  children: React.ReactNode
+  className?: string
+}
+
+export const Diff = ({ children, className }: DiffProps): JSX.Element => (
+  <Unstyled>
+    <Highlight className={classnames("diff", className)}>{children}</Highlight>
+  </Unstyled>
+)

docs/components/Diff/index.ts

@@ -0,0 +1 @@
+export * from "./Diff"

docs/components/DocsContainer/DefaultDocsContainer.tsx

@@ -1,5 +1,4 @@
 import React, { useContext } from "react"
-// eslint-disable-next-line import/no-extraneous-dependencies
 import {
   DocsContainer,
   DocsContainerProps,

docs/components/DosAndDonts/DosAndDonts.tsx

@@ -1,5 +1,4 @@
 import React, { HTMLAttributes } from "react"
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { Canvas, Unstyled } from "@storybook/blocks"
 import classnames from "classnames"
 import { Text } from "~components/Text"

docs/components/Installation/Installation.tsx

@@ -1,5 +1,4 @@
 import React from "react"
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { Source } from "@storybook/blocks"
 
 export type InstallationProps = {

docs/components/LinkTo/LinkTo.tsx

@@ -1,5 +1,4 @@
 import React, { HTMLAttributes } from "react"
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { linkTo } from "@storybook/addon-links"
 import classnames from "classnames"
 

docs/components/NoClipCanvas/NoClipCanvas.tsx

@@ -1,5 +1,4 @@
 import React, { useId, useState } from "react"
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { Source, SourceProps, Story, Unstyled } from "@storybook/blocks"
 import classnames from "classnames"
 import styles from "./NoClipCanvas.module.scss"

docs/components/ResourceLinks/ResourceLinks.tsx

@@ -1,5 +1,4 @@
 import React, { HTMLAttributes } from "react"
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { Unstyled } from "@storybook/blocks"
 import classNames from "classnames"
 import { Text } from "~components/Text"

docs/components/SbContent/SbContent.tsx

@@ -1,5 +1,4 @@
 import React, { HTMLAttributes } from "react"
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { Unstyled } from "@storybook/blocks"
 import classNames from "classnames"
 import styles from "./SbContent.module.scss"

docs/components/StickerSheet/types.ts

@@ -1,5 +1,4 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { StoryObj } from "@storybook/react"
+import type { StoryObj } from "@storybook/react"
 
 export type StickerSheetArgs<T extends Record<string, any>> = {
   isReversed?: boolean

docs/components/index.ts

@@ -1,7 +1,8 @@
-export * from "./NoClipCanvas"
+export * from "./Diff"
+export * from "./DosAndDonts"
 export * from "./Installation"
 export * from "./LinkTo"
+export * from "./NoClipCanvas"
 export * from "./ResourceLinks"
 export * from "./SbReleaseNotification"
 export * from "./SbContent"
-export * from "./DosAndDonts"

docs/package.json

@@ -24,17 +24,22 @@
     "@kaizen/design-tokens": "workspace:*",
     "@kaizen/tailwind": "workspace:*",
     "@rollup/plugin-alias": "^5.1.1",
+    "@storybook/addon-links": "^8.4.6",
+    "@storybook/blocks": "^8.4.6",
     "@storybook/builder-vite": "^8.4.6",
     "@storybook/manager-api": "^8.4.6",
+    "@storybook/react": "^8.4.6",
     "@storybook/react-vite": "^8.4.6",
     "@storybook/test-runner": "^0.19.1",
     "@types/jest-axe": "^3.5.9",
+    "@types/react-highlight": "^0.12.8",
     "@vitejs/plugin-react": "^4.3.3",
     "axe-playwright": "^2.0.3",
     "classnames": "^2.5.1",
     "globals": "^15.12.0",
     "highlight.js": "^11.10.0",
     "jest-axe": "^9.0.0",
+    "react-highlight": "^0.15.0",
     "sass": "1.79.6",
     "storybook": "^8.4.6",
     "tailwindcss": "^3.4.15",

docs/tailwind.css

@@ -6,13 +6,14 @@ pre code {
   font-family: ui-monospace, Menlo, Monaco, "Roboto Mono", "Oxygen Mono",
     "Ubuntu Monospace", "Source Code Pro", "Droid Sans Mono", "Courier New",
     monospace !important;
-  font-size: 14px !important;
-  border: 1px solid rgb(0 0 0 / 10%);
+  font-size: 13px !important;
+  line-height: 19px;
+  border: 1px solid hsla(203, 50%, 30%, 0.15);
+  box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
   border-radius: 4px;
   padding: 20px !important;
   font-weight: 300 !important;
   -webkit-font-smoothing: antialiased;
-  line-height: 19px;
 }
 
 #storybook-docs {

packages/components/src/KaizenProvider/_docs/KaizenProvider.mdx

@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/blocks"
-import Highlight from "react-highlight"
+import { Diff } from "~storybook/components"
 import migrationBonus from "./code-diffs/migration-bonus.diff?raw"
 import migrationFETBonus from "./code-diffs/migration-fe-template-bonus.diff?raw"
 import migrationFETToV1 from "./code-diffs/migration-fe-template-to-v1.diff?raw"
@@ -30,20 +30,18 @@ import { KaizenProvider } from "@kaizen/components";
 
 `KaizenProvider` our new root level wrapping component.
 
-
-<Highlight className="diff shadow-sm">{migrationToV1}</Highlight>
-
+<Diff>{migrationToV1}</Diff>
 
 If you're using the [frontend-template](https://github.com/cultureamp/frontend-template), you can replace it like this:
 
 Note: `defaultPreset` comes from the `frontend-template`.
 
-<Highlight className="diff shadow-sm">{migrationFETToV1}</Highlight>
+<Diff>{migrationFETToV1}</Diff>
 
 ### Bonus
 
 If you're using the `defaultTheme`, this is already setup within the provider, so depending on your team's setup you might be able to remove config that sets this up for you.
 
-<Highlight className="diff shadow-sm mb-16">{migrationBonus}</Highlight>
+<Diff className="mb-16">{migrationBonus}</Diff>
 
-<Highlight className="diff shadow-sm">{migrationFETBonus}</Highlight>
+<Diff>{migrationFETBonus}</Diff>