Revert "Kds 1855 Remove unused packages" (#4190)

* Revert "Kds 1855 Remove unused packages (#4183)"

This reverts commit 12a69c4.

* add changeset

.changeset/rare-fishes-clap.md

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

CONTRIBUTING.md

@@ -67,6 +67,46 @@ 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.
@@ -140,7 +180,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/components`).
+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`).
 
 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/LayoutAndSpacing/DemoComponents/MarginExample.tsx

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

docs/Systems/Tailwind/UtilityClassReferences/Modifiers/media-queries.stories.tsx

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

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

@@ -2,7 +2,7 @@ import React, { HTMLAttributes } from "react"
 import { Meta, StoryFn } from "@storybook/react"
 import colorString from "color-string"
 import { useTheme } from "@kaizen/design-tokens"
-import { Heading } from "~components/Heading"
+import { Heading } from "@kaizen/typography"
 
 export default {
   title: "Systems/Tokens/Classname References/Color Tokens",

docs/Systems/Tailwind/components/CardContent.tsx

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

docs/Systems/Tailwind/components/UtilityClassTemplate.tsx

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

docs/Systems/Tailwind/configuration.mdx

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

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

@@ -7,7 +7,7 @@ import {
   CustomUnattributedSurvey,
 } from "@kaizen/draft-illustration"
 import { Skirt } from "@kaizen/draft-page-layout"
-import { Heading } from "~components/Heading"
+import { Heading } from "@kaizen/typography"
 import { CardContent } from "./components/CardContent"
 
 export default {

docs/pages/app-starter.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/blocks"
-import { InlineNotification } from "~components/Notification"
+import { InlineNotification } from "@kaizen/notification"
 import { LinkTo } from "~storybook/components/LinkTo"
 
 <Meta title="Guides/App starter" />

package.json

@@ -69,9 +69,14 @@
     "@babel/preset-typescript": "^7.23.0",
     "@changesets/cli": "^2.26.2",
     "@cultureamp/changelog-github": "^0.1.0",
+    "@kaizen/brand-moment": "^1.13.8",
+    "@kaizen/button": "^3.0.5",
     "@kaizen/draft-card": "^3.2.11",
     "@kaizen/draft-page-layout": "^2.3.13",
+    "@kaizen/draft-select": "^2.10.42",
     "@kaizen/draft-tabs": "^5.2.43",
+    "@kaizen/notification": "^1.7.0",
+    "@kaizen/typography": "^2.3.11",
     "@storybook/addon-a11y": "^7.4.5",
     "@storybook/addon-essentials": "^7.4.5",
     "@storybook/addon-interactions": "^7.4.5",

packages/components/package.json

@@ -43,13 +43,20 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.2",
     "@headlessui/react": "<=1.5.0",
+    "@kaizen/brand": "^1.5.8",
     "@kaizen/design-tokens": "^10.3.13",
+    "@kaizen/draft-badge": "^1.13.12",
+    "@kaizen/draft-divider": "^2.2.11",
+    "@kaizen/draft-form": "^10.5.0",
     "@kaizen/draft-illustration": "^7.0.1",
     "@kaizen/draft-menu": "^5.0.2",
+    "@kaizen/draft-tag": "^3.5.0",
     "@kaizen/draft-tooltip": "^5.4.47",
     "@kaizen/hosted-assets": "^2.0.3",
     "@kaizen/loading-skeleton": "^2.0.7",
     "@kaizen/loading-spinner": "^2.3.11",
+    "@kaizen/responsive": "^1.8.10",
+    "@kaizen/typography": "^2.3.11",
     "@popperjs/core": "^2.11.8",
     "@react-aria/button": "^3.8.2",
     "@react-aria/focus": "^3.14.1",

packages/components/src/Badge/_docs/Badge.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { BadgeAnimated } from "~components/Badge"
+import { BadgeAnimated } from "@kaizen/draft-badge"
 import { Badge } from "../index"
 
 const meta = {

packages/components/src/BrandMoment/BrandMoment.tsx

@@ -2,9 +2,8 @@ import React, { ReactNode, ReactElement, HTMLAttributes } from "react"
 import classnames from "classnames"
 import { SceneProps } from "@kaizen/draft-illustration"
 import { assetUrl } from "@kaizen/hosted-assets"
+import { Heading, Paragraph } from "@kaizen/typography"
 import { Button, ButtonProps } from "~components/Button"
-import { Heading } from "~components/Heading"
-import { Text } from "~components/Text"
 import { OverrideClassName } from "~types/OverrideClassName"
 import { useMediaQueries } from "~utils/useMediaQueries"
 import styles from "./BrandMoment.module.scss"
@@ -72,12 +71,12 @@ export const BrandMoment = ({
                   {text.title}
                 </Heading>
                 {text.body && (
-                  <Text
+                  <Paragraph
                     variant="intro-lede"
                     classNameOverride={styles.textBody}
                   >
                     {text.body}
-                  </Text>
+                  </Paragraph>
                 )}
                 {body && <div className={styles.textBody}>{body}</div>}
                 <div className={styles.actions}>
@@ -108,9 +107,9 @@ export const BrandMoment = ({
           <div className={styles.container}>
             <div className={styles.footerInner}>
               <div className={styles.poweredByContainer}>
-                <Text variant="extra-small" color="dark-reduced-opacity">
+                <Paragraph variant="extra-small" color="dark-reduced-opacity">
                   Powered by
-                </Text>
+                </Paragraph>
                 <a
                   href="https://www.cultureamp.com"
                   className={styles.poweredByLogo}
@@ -122,7 +121,7 @@ export const BrandMoment = ({
                 </a>
               </div>
               <div className={styles.footerTextContainer}>
-                <Text variant="extra-small">{text.footer}</Text>
+                <Paragraph variant="extra-small">{text.footer}</Paragraph>
               </div>
             </div>
           </div>

packages/components/src/BrandMoment/_docs/BrandMoment.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta } from "@storybook/blocks"
-import { InlineNotification } from "~components/Notification"
+import { InlineNotification } from "@kaizen/notification"
 import { ResourceLinks, KaioNotification, Installation } from "~storybook/components"
 import * as BrandMoment from "./BrandMoment.stories"
 

packages/components/src/BrandMoment/_docs/BrandMoment.stories.tsx

@@ -8,14 +8,14 @@ import {
   BrandMomentError,
   AnimatedSceneProps,
 } from "@kaizen/draft-illustration"
+import { Paragraph } from "@kaizen/typography"
 import {
   ArrowLeftIcon,
   ArrowRightIcon,
   EmailIcon,
   FeedbackClassifyIcon,
   SecurityTipIcon,
 } from "~components/Icon"
-import { Text } from "~components/Text"
 import { BrandMoment } from "../index"
 import {
   MinimalBasic,
@@ -201,14 +201,14 @@ export const Error: Story = {
     body: (
       <>
         <div className="mb-16">
-          <Text variant="intro-lede">
+          <Paragraph variant="intro-lede">
             Sorry but we can&apos;t find the page you&apos;re looking for. Go
             back and try again, or head to <a href="#">Home</a>.
-          </Text>
+          </Paragraph>
         </div>
-        <Text variant="small" color="dark-reduced-opacity">
+        <Paragraph variant="small" color="dark-reduced-opacity">
           Error code 404
-        </Text>
+        </Paragraph>
       </>
     ),
     primaryAction: {

packages/components/src/BrandMoment/_docs/ExampleHeaders.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import { Select } from "@kaizen/draft-select"
 import { assetUrl } from "@kaizen/hosted-assets"
 import { Button } from "~components/Button"
 import { CloseIcon } from "~components/Icon"
@@ -30,11 +31,27 @@ export const MinimalBasic = (): JSX.Element => (
   </div>
 )
 
+const exampleLocales = [
+  { value: "a", label: "English (US English)" },
+  { value: "b", label: "العربية (Arabic)" },
+  { value: "c", label: "беларускі (Belarusian)" },
+  { value: "d", label: "български (Bulgarian)" },
+  { value: "e", label: "čeština (Czech)" },
+]
+
 export const MinimalCustomerFocused = (): JSX.Element => (
   <div className={styles.headerCustomerFocused}>
     <div className={styles.logoContainer}>
       <img src={assetUrl("brand/enso-default.svg")} alt="Culture Amp" />
     </div>
+    <div className={styles.rightAlign}>
+      <Select
+        options={exampleLocales}
+        isSearchable={false}
+        defaultValue={exampleLocales[0]}
+        variant="secondary"
+      />
+    </div>
   </div>
 )
 

packages/components/src/Button/Button/_docs/Button.stories.tsx

@@ -1,8 +1,8 @@
 import React, { ReactNode } from "react"
 import { StoryObj, Meta } from "@storybook/react"
+import { TextField } from "@kaizen/draft-form"
 import { LoadingInput } from "@kaizen/loading-skeleton"
 import { AddIcon, ArrowRightIcon } from "~components/Icon"
-import { TextField } from "~components/TextField"
 import { Button } from "../index"
 
 const meta = {
@@ -67,7 +67,7 @@ export const Disabled: Story = {
 
 /**
  * <p>When a Button is supplied to the `icon` prop, it displays an icon.</p>
- * <p>`import { TrashIcon } from "@kaizen/components"`</p>
+ * <p>`import trashIcon from "@kaizen/component-library/icons/trash.icon.svg"`</p>
  * <p>Once the icons are imported, you can pass them directly into the Button component.</p>
  * <h3>IconPosition</h3>
  * <p>The consumer can specify the icon placement with the iconPosition prop, default position is start.</p>

packages/components/src/Button/GenericButton/GenericButton.tsx

@@ -8,8 +8,8 @@ import React, {
   FocusEvent,
 } from "react"
 import classnames from "classnames"
+import { Badge, BadgeAnimated } from "@kaizen/draft-badge"
 import { LoadingSpinner } from "@kaizen/loading-spinner"
-import { Badge, BadgeAnimated } from "~components/Badge"
 import styles from "./GenericButton.module.scss"
 
 export type CustomButtonProps = {