From ae43d39fd986f47974af17858e8ec1bf92a2eca7 Mon Sep 17 00:00:00 2001
From: Andrii Vorobiov <and.vorobiov@gmail.com>
Date: Thu, 25 Apr 2024 15:25:54 +0300
Subject: [PATCH] storybook: fix imports and required types

- update import of main styles to use in storybook;
- update components with required types in stories;
---
 README.md                                              | 10 ++++++++++
 packages/storybook-ui-components/.storybook/preview.ts |  2 +-
 .../stories/ExpandableText.stories.tsx                 |  2 +-
 .../storybook-ui-components/stories/Input.stories.tsx  |  6 ++++--
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index b70f06081..0161f0879 100644
--- a/README.md
+++ b/README.md
@@ -10,3 +10,13 @@ package | source
 [@cockroachlabs/design-tokens](https://www.npmjs.com/package/@cockroachlabs/design-tokens) | [`/packages/design-tokens`](https://github.com/cockroachdb/ui/tree/master/packages/design-tokens)
 [@cockroachlabs/icons](https://www.npmjs.com/package/@cockroachlabs/icons) | [`/packages/icons`](https://github.com/cockroachdb/ui/tree/master/packages/icons)
 [@cockroachlabs/ui-components](https://www.npmjs.com/package/@cockroachlabs/ui-components) | [`/packages/ui-components`](https://github.com/cockroachdb/ui/tree/master/packages/ui-components)
+
+## storybook-ui-components
+To run storybook locally, it's required to build all dependent packages and then run Storybook itself:
+```
+pnpm install # install dependencies 
+pnpm build # run `build` scrips for all workspaces
+pnpm --dir packages/storybook-ui-components start # run storybooks
+# -or-
+pnpm --dir packages/storybook-ui-components build-storybook # build a static version of storybooks
+```
\ No newline at end of file
diff --git a/packages/storybook-ui-components/.storybook/preview.ts b/packages/storybook-ui-components/.storybook/preview.ts
index 969e22a70..2855a419a 100644
--- a/packages/storybook-ui-components/.storybook/preview.ts
+++ b/packages/storybook-ui-components/.storybook/preview.ts
@@ -1,5 +1,5 @@
 // .storybook/preview.ts
-import "@cockroachlabs/ui-components/dist/main.css"
+import "@cockroachlabs/ui-components/dist/cjs/index.css"
 
 const preview = {
   parameters: {},
diff --git a/packages/storybook-ui-components/stories/ExpandableText.stories.tsx b/packages/storybook-ui-components/stories/ExpandableText.stories.tsx
index 409831e25..be06f1b25 100644
--- a/packages/storybook-ui-components/stories/ExpandableText.stories.tsx
+++ b/packages/storybook-ui-components/stories/ExpandableText.stories.tsx
@@ -12,7 +12,7 @@ export default {
 
 export const Default = () => (
   <div style={{ width: divWidth }}>
-    <ExpandableText text={fourLinetext} />
+    <ExpandableText text={fourLinetext} maxLine={4} />
   </div>
 );
 
diff --git a/packages/storybook-ui-components/stories/Input.stories.tsx b/packages/storybook-ui-components/stories/Input.stories.tsx
index f9915109b..62de940cb 100644
--- a/packages/storybook-ui-components/stories/Input.stories.tsx
+++ b/packages/storybook-ui-components/stories/Input.stories.tsx
@@ -18,7 +18,7 @@ export const Number = () => {
       <h1>Number Input</h1>
 
       <NumberInput
-        initialValue={number("Initial value", 0)}
+        defaultValue={number("Initial value", 0)}
         value={value}
         disabled={boolean("disabled", false)}
         invalid={boolean("invalid", false)}
@@ -40,7 +40,7 @@ export const Text = () => {
       </StoryDescription>
 
       <TextInput
-        initialValue={text("Initial value", "some text")}
+        defaultValue={text("Initial value", "some text")}
         disabled={boolean("disabled", false)}
         invalid={boolean("invalid", false)}
       />
@@ -77,6 +77,7 @@ export const Email = () => {
       </StoryDescription>
 
       <EmailInput
+        validatorLabel={text("validatorLabel", "validate email")}
         disabled={boolean("disabled", false)}
         invalid={boolean("invalid", false)}
       />
@@ -94,6 +95,7 @@ export const NewPassword = () => {
       </StoryDescription>
 
       <NewPasswordInput
+        validatorLabel={text("validatorLabel", "validate password")}
         disabled={boolean("disabled", false)}
         invalid={boolean("invalid", false)}
         required={boolean("required", true)}