Kds 1855 remove unused dependencies (#4205)

* replace Heading

* replace Paragraph with KAIO Text

* remove KAIO dep on @kaizen/typography

* more removal of @kaizen/typography

* fix Paragraph replacement

* remove kaizen/typography from design-tokens docs

* lint fix

* add changeset

* remove text typography from design-tokens

* Revert "remove kaizen/typography from design-tokens docs"

This reverts commit 1932717.

* remove brand moment dep

* remove legacy select

* remove legacy form

* removed unused

* remove legacy Brand

* remove legacy responsive

* remove unused

* remove unused

* Update wet-pens-arrive.md

* Update wet-pens-arrive.md

* fixed badge test

* update docscomponents

* update docscomponents

* Update wet-pens-arrive.md

* update inline notification api

* fix inline notification

* add changeset

* remove box from design-token

* fix docs

* docs: fix padding in DocsComponents

* remove all component-library uses and references

* disable stylelint in tailwind

* jokes on me for messing with jest

* fix circular dep

* fix up design-tokens changelog

* fix up design-tokens changelog

* refactor(heading): add @layer to margin reset

* remove normalize

* move fonts

* fix yarnlock

* change something to trigger chromatic

* up the delay

* Moved deprecation notices to the index.ts

* Moved deprecation notices to the index.ts

* fix tokens docs

* fix lint

* get chromatic to run again

* test removal of pseudo states

* replace most of draft-illustration

* lint fix

* fix tokens path

* replace legacy tabs in tokens docs with new tabs

* fix design token alias?

* fix test mock

* fixups

* fixups

* remove tabs as a dep

* revert button stickersheet

* split working button stories

* remove layer

* fix lint + chaangeset

* wip layers

* introduce layers to control heading style cascade

* add normalize layer

* fix lint

* lint fix

* replace path

* fix tailwind

* fix import order

* add normalize css

* use design-tokens package in manager

* revert package use

* changed reset.css to foundation-styles

* remove layer

* rename kaio globalcss to tailwind

* Fix style build

* Fix changeset

* add foundation styles to kaio

* move scss styles to utils folder

* fix scss utils paths

* Remove foundation-styles

* add css vars to root

* update changeset

* update changeset

* update changeset

* lint fix

* fix highlight styles

* lower specificity of heading

* add typography reset css to the reset layer

* update app-starter docs

* update changesets

* reverted text reset layer

* combine working button stickersheet

* remove linting disable in docs

* remove working sheets

* update guidance block scss

* fix design-tokens dep

* fix deps

* replace draft-illustration

* update changeset

* Update package.json

* fix: replace usages of @kaizen/button

* chore: install @types/uuid

* fix: fix circular dependency for Filter components

* refactor(GuidanceBlock): remove default export

* chore(deps): remove duplicate dep of @kaizen/design-tokens

* refactor: fix css calc errors

* refactor: update uuid to useId for components

* chore: re-enable testing BrandMoment

* ci: ensure chromatic runs when css files are changed

* shuffled around design-tokens internals

* fixing paths

* remove experimental exports

---------

Co-authored-by: Cassandra Tam <[email protected]>

.changeset/gold-carrots-notice.md

@@ -1,10 +1,10 @@
 ---
-"@kaizen/tailwind": major
+"@kaizen/tailwind": minor
 ---
 
 Fix long utility strings for borders in Tailwind (in combination with the introduction of `@kaizen/reset.css`)
 
-**note: these utilities will not work without installing `@kaizen/reset.css`**
+**Important: these utilities will not work without upgrading to `@kaizen/[email protected]`**
 
 - Adds DEFAULT values to `borderWidth` and `borderColor` in the Tailwind preset, so these don't need to be written with utility classes.
 

.changeset/serious-dolphins-cough.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/design-tokens": patch
+---
+
+Move CSS vars to :root

.changeset/silver-cars-yawn.md

@@ -0,0 +1,12 @@
+---
+"@kaizen/components": minor
+---
+
+Added the following foundational styles to dist/styles.css:
+
+- Reset: initially to provide the border properties that support Tailwind's border default settings.
+- Fonts: with font-face definitions for Inter, Tiempos and IBM Mono
+- Normalize: A standard Normalize already present across CultureAmp
+- Layers: A set of CSS layers to help control the specificity of these 3 CSS stylesheets and our component's CSS.
+
+**Important: Remove any other normalize or reset stylesheets in your application repo**

.changeset/tall-buses-march.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/design-tokens": patch
+---
+
+Remove use of `@kaizen/typography`

.changeset/wet-pens-arrive.md

@@ -0,0 +1,24 @@
+---
+"@kaizen/components": patch
+---
+
+- Replace all usages of `Heading` from `@kaizen/typography` with the same from KAIO
+- Replace all usages of `Paragraph` from `@kaizen/typography` with `Text` from KAIO
+- Remove `@kaizen/brand` and its usages
+- Remove `@kaizen/brand-moment` and its usages
+- Remove `@kaizen/button` and its usages
+- Remove `@kaizen/draft-badge` and its usages
+- Remove `@kaizen/draft-card` and its usages
+- Remove `@kaizen/draft-divider` and its usages
+- Remove `@kaizen/draft-form` and its usages
+- Remove `@kaizen/draft-illustration` and its usages
+- Remove `@kaizen/draft-page-layout` and its usages
+- Remove `@kaizen/draft-select` and its usages
+- Remove `@kaizen/draft-tabs` and its usages
+- Remove `@kaizen/draft-tag` and its usages
+- Remove `@kaizen/draft-tooltip` and its usages
+- Remove `@kaizen/responsive` and its usages
+- Remove `@kaizen/notification` and its usages
+- Remove `@kaizen/loading-skeleton` and its usages
+- Remove `@kaizen/loading-spinner` and its usages
+- Update usages of `uuid` to `useId` within components

.github/workflows/test-stories.yaml

@@ -116,8 +116,7 @@ jobs:
           externals: |
             [
               "**/!(*.module).scss",
-              "packages/button/src/Button/*.scss",
-              "packages/component-library/components/Spacing/Base.module.scss"
+              "packages/components/**/*.css",
             ]
 
   update-branch-preview:

CONTRIBUTING.md

@@ -67,46 +67,6 @@ See the [design tokens](https://github.com/cultureamp/kaizen-design-system/tree/
 
 To learn more about what browsers and devices we support in Kaizen Component Library, Culture Amp employees can see [the Browser Support wiki page](https://cultureamp.atlassian.net/wiki/spaces/Prod/pages/1572948/Browser+Support+and+Stats).
 
-### Local development with other front-end codebases
-
-To strengthen the Kaizen Design System, we encourage engineers to take a component-first development approach. By concentrating on developing Kaizen components in Storybook, we are likely to improve the API design and achieve good separation of concerns, avoiding components tightly coupled to specific applications. If, however, you want to test a component in the context of another front-end codebase, you can [yalc](https://github.com/wclr/yalc) your local version of `@kaizen/component-library` with your other front-end codebase.
-
-#### For core components
-
-**Step 1**: Make your local copy of `@kaizen/component-library` available.
-
-```sh
-# Navigate to code source
-$ cd ./packages/component-library
-
-# Publish the package
-$ yalc publish
-
-```
-
-**Step 2**: Install `@kaizen/component-library` in your other front-end codebase.
-
-```sh
-# Navigate to code source
-$ cd <your_code>/cultureamp/YOUR_FRONT_END_CODEBASE
-
-# Add the package to your front-end codebase
-$ yalc add @kaizen/component-library
-
-# Yarn install
-$ yarn
-
-```
-
-Your local Kaizen changes will now show in your other front-end codebase. If you want to test subsequent updates to the component, you'll need to run through step 1 again to republish the component, and then run `yalc update` in your front-end codebase to see the new changes.
-
-**Step 3**: Removing the package
-
-When you are done, remove the package from your front-end codebase:
-
-`yalc remove @kaizen/component-library`
-
-
 ## Releasing packages
 
 Automated releases to the npm public registry are triggered for all pull requests containing modifications to one or more npm packages (found in the `/packages/` directory). The information required to determine the version update for each release is taken from the title and content of the pull request.
@@ -180,7 +140,7 @@ This will run a build and publish a snapshot and its tag with a name that is con
 
 ## Using new package releases
 
-To use a newly released version of the Kaizen Component Library (or any other package) in a front-end codebase, run `yarn upgrade --latest <scoped package name>` (e.g. `yarn upgrade --latest @kaizen/component-library`).
+To use a newly released version of the Kaizen Component Library (or any other package) in a front-end codebase, run `yarn upgrade --latest <scoped package name>` (e.g. `yarn upgrade --latest @kaizen/components`).
 
 Remember to always check the CHANGELOG (e.g. [`/packages/component-library/CHANGELOG.md`](./packages/component-library/CHANGELOG.md) or the [releases page](https://github.com/cultureamp/kaizen-design-system/releases)) for any package you wish to upgrade, paying extra attention to any breaking changes which have been introduced since the last version used in your project.
 

docs/Systems/Tailwind/components/CardContent.tsx

@@ -1,6 +1,6 @@
 import React from "react"
-import { Button } from "@kaizen/button"
-import { Heading } from "@kaizen/typography"
+import { Button } from "~components/Button"
+import { Heading } from "~components/Heading"
 
 type CardContentProps = {
   title: string

docs/Systems/Tailwind/components/UtilityClassTemplate.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { InlineNotification } from "@kaizen/notification"
+import { InlineNotification } from "~components/Notification"
 import { StickerSheet } from "~storybook/components/StickerSheet"
 import { CodeSnippet } from "./CodeSnippet"
 
@@ -61,9 +61,11 @@ export const UtilityClassTemplate = ({
           <InlineNotification
             type="positive"
             hideCloseIcon
-            autohide
             onHide={(): void => setCopiedText(null)}
-            title="Copied to clipboard: "
+            headingProps={{
+              children: "Copied to clipboard: ",
+              variant: "heading-6",
+            }}
           >
             {copiedText}
           </InlineNotification>

docs/Systems/Tailwind/configuration.mdx

@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/blocks"
-import { InlineNotification } from "@kaizen/notification"
+import { InlineNotification } from "~components/Notification"
 
 <Meta title="Systems/Tailwind/Configuration" />
 

docs/Systems/Tailwind/utility-class-helpers/borders/border-width.mdx

@@ -1,5 +1,5 @@
 import { Description, Meta, Story, Unstyled } from "@storybook/blocks"
-import { Card } from "@kaizen/draft-card"
+import { Card } from "~components/Card"
 import * as Examples from "./border-width.stories"
 
 <Meta of={Examples} />

docs/Systems/Tailwind/utility-class-helpers/modifiers/media-queries.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import { Meta, StoryFn } from "@storybook/react"
-import { Heading, Paragraph } from "@kaizen/typography"
+import { Heading } from "~components/Heading"
+import { Text } from "~components/Text"
 
 export default {
   title: "Systems/Tailwind/Utility Class References/Modifiers/Media Queries",
@@ -27,11 +28,9 @@ const QueryInfo = ({
   children,
 }: QueryInfoProps): React.ReactElement => (
   <div className="my-12">
-    <Paragraph variant="intro-lede">Pseudo selector: {selector}</Paragraph>
-    <Paragraph variant="body">Breakpoint: {selectorValue}</Paragraph>
-    <Paragraph variant="body">
-      In this example: {selector}:bg-blue-400
-    </Paragraph>
+    <Text variant="intro-lede">Pseudo selector: {selector}</Text>
+    <Text variant="body">Breakpoint: {selectorValue}</Text>
+    <Text variant="body">In this example: {selector}:bg-blue-400</Text>
     {/* Passing in as children, as dynamically creating the media query with interpolation fails */}
     {children}
   </div>
@@ -64,23 +63,19 @@ export const ArbitraryMediaQueries: StoryFn = () => (
     </Heading>
 
     <div className="py-32">
-      <Paragraph variant="body">
+      <Text variant="body">
         <strong>Min-width breakpoint</strong> (applied when the screen gets{" "}
         <em>wider</em>)
-      </Paragraph>
-      <Paragraph variant="body">
-        In this example: min-[500px]:bg-blue-400
-      </Paragraph>
-      <div className="border-solid min-[500px]:bg-blue-400 h-[50px] w-full rounded" />
+      </Text>
+      <Text variant="body">In this example: min-[500px]:bg-blue-400</Text>
+      <div className="border-solid min-[500px]:bg-blue-400 h-[50px] w-full rounded-default" />
     </div>
 
-    <Paragraph variant="body">
+    <Text variant="body">
       <strong>Max-width breakpoint</strong> (applied when the screen gets{" "}
       <em>slimmer</em>)
-    </Paragraph>
-    <Paragraph variant="body">
-      In this example: max-[500px]:bg-blue-400
-    </Paragraph>
-    <div className="border-solid max-[500px]:bg-blue-400 h-[50px] w-full rounded" />
+    </Text>
+    <Text variant="body">In this example: max-[500px]:bg-blue-400</Text>
+    <div className="border-solid max-[500px]:bg-blue-400 h-[50px] w-full rounded-default" />
   </div>
 )

docs/Systems/Tailwind/utility-class-helpers/modifiers/pseudo-states.mdx

@@ -1,5 +1,5 @@
 import { Description, Meta, Story, Unstyled } from "@storybook/blocks"
-import { Card } from "@kaizen/draft-card"
+import { Card } from "~components/Card"
 import * as Examples from "./pseudo-states.stories"
 
 <Meta of={Examples} />

docs/Systems/Tailwind/utility-class-helpers/spacing/margin.mdx

@@ -1,5 +1,5 @@
 import { Description, Meta, Story, Unstyled } from "@storybook/blocks"
-import { Card } from "@kaizen/draft-card"
+import { Card } from "~components/Card"
 import * as Examples from "./margin.stories"
 
 <Meta of={Examples} />

docs/Systems/Tailwind/utility-class-helpers/spacing/padding.mdx

@@ -1,5 +1,5 @@
 import { Description, Meta, Story, Unstyled } from "@storybook/blocks"
-import { Card } from "@kaizen/draft-card"
+import { Card } from "~components/Card"
 import * as Examples from "./padding.stories"
 
 <Meta of={Examples} />

docs/Systems/Tailwind/working-with-tailwind.stories.tsx

@@ -1,13 +1,13 @@
 import React from "react"
 import { StoryFn } from "@storybook/react"
-import { Button } from "@kaizen/button"
-import { Card } from "@kaizen/draft-card"
+import { Button } from "~components/Button"
+import { Card } from "~components/Card"
+import { Heading } from "~components/Heading"
 import {
   CustomSurvey,
   CustomUnattributedSurvey,
-} from "@kaizen/draft-illustration"
-import { Skirt } from "@kaizen/draft-page-layout"
-import { Heading } from "@kaizen/typography"
+} from "~components/Illustration"
+import { Skirt } from "~components/Skirt"
 import { CardContent } from "./components/CardContent"
 
 export default {

docs/Systems/layout-and-spacing/DemoComponents/MarginExample.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Button } from "@kaizen/button"
+import { Button } from "~components/Button"
 
 export const MarginExample = (): JSX.Element => (
   <div className="flex">

docs/Systems/layout-and-spacing/DemoComponents/SpacingTokens.tsx

@@ -1,8 +1,8 @@
 import React from "react"
-import { kzSpacing } from "@kaizen/tailwind/src/kz-spacing"
+import { tokens } from "~design-tokens/js"
 
 export const SpacingTokens = (): JSX.Element => {
-  const keyValuePairs = Object.entries(kzSpacing)
+  const keyValuePairs = Object.entries(tokens.spacing)
 
   return (
     <div className="flex justify-center">

docs/Systems/tokens/color/color-tokens.stories.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import { Meta, StoryFn } from "@storybook/react"
 import colorString from "color-string"
-import { Heading } from "@kaizen/typography"
+import { Heading } from "~components/Heading"
 import { tokens } from "~design-tokens/js"
 
 export default {

docs/app-starter.stories.mdx → docs/app-starter.mdx

@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/blocks"
-import { InlineNotification } from "@kaizen/notification"
+import { InlineNotification } from "~components/Notification"
 import { LinkTo } from "~storybook/components/LinkTo"
 
 <Meta title="Guides/App starter" />
@@ -10,8 +10,7 @@ This guide is all about how to introduce the Kaizen Design System to your app.
 
 Whilst the Kaizen Design System mainly focuses on the more atomic components in your app, some of the components have a high level of complexity requiring various global components to be present in order for them to function.
 
-<InlineNotification persistent type="informative">You won't need to apply this if you started your app with the <a href="https://github.com/cultureamp/frontend-template" target="_blank" rel="noreferrer">Frontend template</a> or are using <a href="https://github.com/cultureamp/frontend-services/tree/main/packages/next-services">next-services</a>.</InlineNotification>
-
+<InlineNotification persistent type="informative">You won't need to apply any of the below if you have the latest <a href="https://github.com/cultureamp/frontend-template" target="_blank" rel="noreferrer">Frontend template</a> or <a href="https://github.com/cultureamp/next-template">next-template</a>.</InlineNotification>
 ## 1. Add the KaizenProvider
 
 The <LinkTo pageId="components-kaizen-provider-installation">KaizenProvider</LinkTo> feeds your entire app with Kaizen defaults so it's important that it goes at the very root of your application.
@@ -38,47 +37,30 @@ For full installation instructions, see the <LinkTo pageId="systems-tailwind-get
 
 Whether or not you are already familiar with Tailwind, you'll want to take a look at our <LinkTo pageId="systems-tailwind-utility-class-references-overview">Utility Class References</LinkTo>, as we have made distinct modifications to vanilla Tailwind to suit our design system.
 
-## 3. Add Kaizen's global CSS stylesheets
-
-There are 2 CSS stylesheets to import:
-- reset: which handles any global styles that need to be applied
-- components: which has all the styles for Kaizen's component library
-
-### Important to note
-The order of these CSS stylesheets is **very important**:
-1. Normalize
-2. Kaizen Reset
-3. Kaizen Components
-4. Tailwind (ie. your product CSS)
-
-No matter how you choose to import the following, this order must be upheld.
+## 4. Add Kaizen's global CSS stylesheet
 
-### Reset
-
-Kaizen's CSS reset aims to add any global default styles such as typography or base styles which enable Tailwind utilities (you can think of this as Kaizen's own Preflight).
-
-Note: this is different from a Normalize which aims to create uniformity in basic elements across the multiple browsers. (eg. Corrects bugs and common browser inconsistencies).
-
-You can either import this via JS or CSS, just make sure it is placed _after normalize_ but _before_ any custom CSS:
-```js
-import "normalize.css"
-import "@kaizen/reset.css" // <- Right here!
-import "../src/tailwind.css"
-```
-
-You can also import this into your CSS files if your project perfers, however you must preserve the above order.
+For the convenience of your app, we've compiled all the necessary styles for our components into a single stylesheet to make it easy to set and forget.
 
-### Components
+This includes:
+- [Normalize.css](https://github.com/necolas/normalize.css)
+- reset.css
+- Component styles
 
-For the convenience of your app, we've compiled all the necessary styles for our components into a single stylesheet to make it easy to set and forget.
+You can import this stylesheet in either CSS or JS as long as it sits as the first and only of its kind.
 
-We've especially accounted for using Tailwind's de-duping process for any Tailwind within our components:
+### CSS
+We've especially accounted for Tailwind, so if you opt for CSS, it is recommended you include it at the top of your `tailwind.css`
 ```css
 // tailwind.css
 @import "@kaizen/components/dist/styles.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 ```
 
-Note: If for whatever reason you aren't adding Tailwind to your project, you can do this step in any global css file. Just ensure it's the only one, imported at the root of your app, after resets/normalises.
+### JS
+```js
+import "@kaizen/components/dist/styles.css"
+import "tailwind.css"
+```

jest.config.js

@@ -7,7 +7,9 @@ module.exports = {
   moduleNameMapper: {
     "\\.(jpe?g|png|webm|mp4)$": "jest-static-stubs/$1",
     "\\.s?css$": "identity-obj-proxy",
-    "\\.svg$": require.resolve("@kaizen/component-library/mocks/svgMock"),
+    // Force module uuid to resolve with the CJS entry point, because Jest does not support package.json.exports. See https://github.com/uuidjs/uuid/issues/451
+    // Should be resolved in v9, but @storybook/test-runner has deps which use and bring in v8
+    uuid: require.resolve("uuid"),
   },
   transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"],
   modulePathIgnorePatterns: ["<rootDir>/packages/components"],