Storybook: Addon-docs: Add Controls ("knobs") support to Props

[shilman]

• [ ] Refactor to use Args
• [ ] Add controls to PropTable
• [ ] Update tests & documentation

More generally: https://github.com/storybookjs/storybook/issues/6700

[Portals]

Will this be released in 5.2.0?

[shilman]

@Portals hopefully 5.3. 5.2 is almost ready to ship, so really just bugfixes and minor tweaks at this point!

[atanasster]

Anyone working on this, can i give it a try if you have some design mockups

[shilman]

@atanasster @JeroenReumkens has built an amazing prototype. I don't know the current status: https://github.com/JeroenReumkens/storybook/commit/2a9267ecd811d6a2be963eca527441aa8e4707d6

[ronnyek]

How would this work with docs pages that have multiple examples? Would we have multiple docs tables, or would the singular docs table just affect all examples? Or would the default example be the only thing knobs would get applied to?

[shilman]

Jeepers creepers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.30 containing PR #10258 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[YuunYang]

I upgrade to prerelease version, but seems we still cant use knobs in docs?

the errors I got:

but work fine on version 5.3.18

[shilman]

@YuunYang all @storybook/* should be on the same version. so if you upgrade @storybook/addon-docs to 6.0 but don't upgrade @storybook/react you shouldn't expect it to work.

Also the controls PR hasn't been merged yet.

[shilman]

Jeepers creepers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.34 containing PR #10354 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.35 containing PR #10432 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.37 containing PR #10451 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

[shilman]

I've written a Storybook Args w/ CRA & TypeScript Walkthrough for anybody who wants to try it:

[lpoulter]

@shilman This write up is great thanks. Do you need typescript to get the full benefits of args?

[YuunYang]

Awesome !!!

[shilman]

@lpoulter No, it works in React/JS with PropTypes ... and should work with Vue, Angular, Ember, Web components--though I haven't tested that yet (and I wouldn't be surprised if there are tweaks needed to get it working. And if you don't have any of those, you can declare your own ArgTypes to make it work in ANY setup (more documentation forthcoming on that, but you can probably reverse engineer it from the existing docs).

[YuunYang]

seems got an error, if I want reset the filed to initial value, it can't trigger

even I change another field, It still not changed, and by the way, maybe we need a throttle function.
@shilman

[shilman]

@YuunYang do you have a repro i can look at?

[YuunYang]

@shilman I'm sorry I cant, because it is a private repo, and our company forbid us to share the code. my English is not very good, maybe I didn't describe this question detailedly, I will give you a live pic next week when I back to work.

[YuunYang]

The HD GIF https://drive.google.com/file/d/1jONAgoxzJTj59S2r-MqAMoW8N6xxNKpJ/view?usp=sharing

Looks at this example, the default value is right, when I change the value It changed in the meantime, but when I try to change it to it default value "right", it seems not changed.

this is my code

import React from 'react';
import Xtable from '../Basic';
import getConfig from '../utils/getConfig';
import { IXtableCoreConfig } from '../../src/Xtable/type';

export const Basic = ({ ...config }: IXtableCoreConfig ) => {
  console.log(config)
  return <Xtable {...config} />
}

const config = {
  // scroll: { x: 2000 },
  headerWidgetsAlign: 'right',
  showEditBtn: false,
  showResetBtn: false,
  showSearchBtn: false,
  showDeleteBtn: false,
  searchTrigger: 'onChange',
  ...
}

Basic.story = {
  args: {
    ...config
  }
}

export default {
  title: 'xtable',
  parameters: {
    component: Basic,
    componentSubtitle: '',
  },
};

@shilman

Edit:
I just tried using it in mdx, it works, but in tsx, it failed

[shilman]

w00t!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.40 containing PR #10473 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.