Provide stories with argTypes for primitives #3

kof · 2022-05-20T09:50:55Z

webstudio-is/webstudio-designer/#24

kof · 2022-05-31T17:08:57Z

bin/generateArgTypes.ts

@@ -0,0 +1,30 @@
+#!/usr/bin/env node --experimental-loader esbuild-node-loader


Nit: convention for file names is dash separated lower case

Note to self: need a linter for this

Any reason why BTW? I prefer CamelCased (like in code) especially to match component names.

Yeah, I used to like camel cased too because it matches component names, but I am not using default export any more most of the time and components export more than one thing, so there is no matching, also I don't encourage putting a component per module.

Additionally it avoids case-sensitivity file system/git issues you are probably aware of

kof · 2022-05-31T17:10:04Z

bin/generateArgTypes.ts

@@ -0,0 +1,30 @@
+#!/usr/bin/env node --experimental-loader esbuild-node-loader
+
+import path from "path";


Note to self: need to add prettier config

npx mrm prettier && npx mrm lint-staged ;)

kof · 2022-05-31T17:11:33Z

bin/generateArgTypes.ts

+const tsConfigParser = docgen.withCustomConfig(tsConfigPath, options);
+
+// Search for components
+const componentFiles = fg.sync(['./src/components/*.tsx', '!./src/**/*.stories.tsx']);


Probably should be an arg to the script as a single pattern

kof · 2022-05-31T17:16:42Z

bin/generateArgTypes.ts

+    const jsonPath = filePath.replace('.tsx', '.props.json')
+    const res = tsConfigParser.parse(filePath)
+    const argTypes = propsToArgTypes(res[0].props)
+    fs.ensureFileSync(jsonPath)


I think you don't need this line because its fs-extras, makes sure path exists, correct me if I am wrong

No, it doesn't.

kof · 2022-05-31T17:17:21Z

bin/generateArgTypes.ts

+    const res = tsConfigParser.parse(filePath)
+    const argTypes = propsToArgTypes(res[0].props)
+    fs.ensureFileSync(jsonPath)
+    fs.writeJsonSync(jsonPath, argTypes)


Can pass options to format it with 2 spaces and make it human readable and also easy to see future changes in a diff
https://github.com/jprichardson/node-fs-extra/blob/HEAD/docs/writeJson-sync.md

kof · 2022-05-31T17:18:40Z

src/arg-types/index.ts

@@ -0,0 +1,71 @@
+export const globalArgTypes = {


can be removed?

kof · 2022-05-31T17:19:16Z

src/arg-types/loader.js

@@ -0,0 +1,24 @@
+const path = require('path')


I think loader isn't used any more, right?

kof · 2022-05-31T17:20:17Z

src/arg-types/utils.ts

+
+const validAttributes = (prop: PropItem) => {
+    if (prop.parent) {
+        return ['ButtonHTMLAttributes', 'HTMLAttributes', 'AriaAttributes'].includes(prop.parent.name)


This needs to be extended for all elements?

kof · 2022-05-31T17:21:57Z

src/arg-types/utils.ts

+        }, {} as ArgTypes);
+}
+
+const matchers = {


needs to be extended to support all controls?

That's how it's done in Storybook now. I would not do it here at all TBH.

hmm, does this compromise our ability to render controls in both correctly? I guess if we do a better job at rendering than storybook its not a problem, unless we become incompatible

kof · 2022-05-31T17:46:57Z

src/arg-types/utils.ts

+    }
+
+    // args that end with date e.g. purchaseDate
+    if (matchers.date && matchers.date.test(name)) {


this might be too smart, because a field with purchaseDate could actually expect a non-date string or some kind of specific format and we would be probably enforcing an ISO date or something ... unless the type in typescript is an actual date, we probably shouldn't guess like this

I agree it's too "smart" and it's presentational logic that IMO should live in the designer, not in the data set. I would not even add control property to the set and only export pure parsed prop types.

yeah, but then we would loose the interop with storybook

Not really. We could do enhance the data with controls in the designer or use already provided control property from CSF.

I imagine the future where a user can provide their components with stories and those could be potentially manually written, right?

So in this case we say: we always generate argTypes ourselves, no matter what user has defined in the story?

What if user doesn't have types ? :)

kof · 2022-05-31T17:47:33Z

src/arg-types/utils.ts

+            return {control: {type: 'number'}};
+        case 'enum': {
+            const {value} = type;
+            // @ts-ignore


Needs type fix

There is any in the types of react-docgen-typescript so it would be worth fixing there I think.

Replaced with @ts-expect-error

kof · 2022-05-31T17:49:46Z

src/components/bold.stories.tsx

+  <BoldPrimitive {...args} />
+);
+
+export const Bold = Template.bind({});


Note to self: we can rewrite these to just exporting a component that renders the primitive instead of using .args, right?

It can be done, but it will disable addon-controls in the Storybook UI 🤷‍♂️

right, forgot about it, we need them

kof · 2022-05-31T17:52:24Z

src/components/bold.stories.tsx

+export default {
+  title: "Components/Bold",
+  component: BoldPrimitive,
+  argTypes: {},


forgotten one

kof · 2022-05-31T17:54:43Z

src/components/meta.ts

@@ -0,0 +1,10 @@
+export { default as Button } from "./button.stories";


We can now export the argTypes directly and avoid exporting stories which could have some storybook specific stuff we don't need in the designer

In this case it won't be CSF anymore but yeah, I think you can simple import JSONs now.

hmm, in the future designer should be able to discover stories automatically from the file system, without having user provide a meta.ts with all the stories in it, so yeah lets keep it as-is for now and then later add a way for discovering stories automatically

kof

First round done

kof · 2022-05-31T17:56:08Z

@okonet want to finish it or should I?

okonet · 2022-05-31T18:06:38Z

I will finish this one. Thanks for comments.

okonet · 2022-06-01T07:35:40Z

@kof please re-review.

kof · 2022-06-01T20:14:49Z

merged it

kof added 6 commits May 20, 2022 11:49

add storybook

a4bad83

webstudio-is/webstudio-designer/#24

html argtypes for the button

4aa29f8

fix ts

40283b1

basic stories for primitives

bce4bda

fix form enc type

6b7e54a

move global arg types out of button stories, so that they can be reused

3e3c241

kof changed the title ~~CSF~~ Provide stories with argTypes for primitives May 27, 2022

kof mentioned this pull request May 27, 2022

Support Component Story Format (CSF) webstudio-is/webstudio#24

Closed

9 tasks

kof and others added 8 commits May 27, 2022 15:54

add argtype for button type back

2e9bdc5

unify how we define prop types

916bda8

support for boolean property value

5a9208d

WIP on automatic propTypes -> argTypes generation

fb1bbef

Clean up

8c04a13

Add a script to generate argTypes as JSON

2b74c8a

Rename the script and cleanup

4a5547c

Add JSON data and imports

fd6e91d

kof commented May 31, 2022

View reviewed changes

okonet added 8 commits June 1, 2022 09:12

Pass args to generate props script

630e9c1

Format JSON

9872664

Remove loader code

01987c8

Remove hard coded values

47b7793

Better filtering

286f45c

Add missing export

c11ea4e

Regenerate argTypes

8d31cac

Use @ts-expect-error

97fe83f

kof merged commit 2290184 into main Jun 1, 2022

		@@ -0,0 +1,30 @@
		#!/usr/bin/env node --experimental-loader esbuild-node-loader

		@@ -0,0 +1,30 @@
		#!/usr/bin/env node --experimental-loader esbuild-node-loader

		import path from "path";

		@@ -0,0 +1,10 @@
		export { default as Button } from "./button.stories";

Provide stories with argTypes for primitives #3

Provide stories with argTypes for primitives #3

Conversation

kof commented May 20, 2022 • edited Loading

kof May 31, 2022 • edited Loading

Choose a reason for hiding this comment

kof May 31, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

okonet Jun 1, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kof left a comment

Choose a reason for hiding this comment

kof commented May 31, 2022

okonet commented May 31, 2022

okonet commented Jun 1, 2022

kof commented Jun 1, 2022

kof commented May 20, 2022 •

edited

Loading

kof May 31, 2022 •

edited

Loading

kof May 31, 2022 •

edited

Loading

okonet Jun 1, 2022 •

edited

Loading