storybook: fix imports and required types

- update import of main styles to use in storybook;
- update components with required types in stories;

Author: koorosh

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
+```

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: {},

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>
 );
 

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)}