Controls: subcomponents doesn't show controls column in prop tables.

wengsj11 commented 4 years ago

Describe the bug subcomponents doesn't show controls column in prop tables.

To Reproduce my component is like this, it has a father component ConditionPanel, and a child component Item which would be passed into ConditionPanel as children props. While the father component is showing the controls column, the subcomponent isn't.

Expected behavior show all the subcomponents controls, and be able to control the main story.

Screenshots

Code snippets my x.story.jsfile

import React from 'react'
import ConditionPanel, { Item } from "../components/ConditionPanel/index";
import { Input } from 'antd'
export default {
  title: 'UI/ConditionPanel',
  component: ConditionPanel,
  subcomponents: { 'ConditionPanel.Item': Item }
};
export const Main = (args) => (
  <ConditionPanel {...args} >
    <Item label="test101">
      <Input placeholder="asdsad" style={{width: '100%'}}/>
    </Item>
    <Item label="test101">
      <Input placeholder="asdsad" style={{width: '100%'}}/>
    </Item>
    <Item label="test101">
      <Input placeholder="asdsad" style={{width: '100%'}}/>
    </Item>
    <Item label="test101">
      <Input placeholder="asdsad" style={{width: '100%'}}/>
    </Item>
    <Item label="test101">
      <Input placeholder="asdsad" style={{width: '100%'}}/>
    </Item>
    <Item label="test101">
      <Input placeholder="asdsad" style={{width: '100%'}}/>
    </Item>
  </ConditionPanel>
);

System:

"@babel/core": "^7.10.5",
    "@storybook/addon-actions": "^6.0.0-rc.29",
    "@storybook/addon-controls": "^6.0.3",
    "@storybook/addon-docs": "^6.0.3",
    "@storybook/addon-knobs": "^5.3.19",
    "@storybook/addon-links": "^5.3.19",
    "@storybook/addon-notes": "^5.3.19",
    "@storybook/addon-viewport": "^5.3.19",
    "@storybook/addons": "^5.3.19",
    "@storybook/react": "^6.0.3",
    "babel-loader": "^8.1.0",
    "babel-plugin-import": "^1.13.0",
    "babel-plugin-react-docgen": "^4.1.0",
    "storybook-addon-jsx": "^7.3.3",
    "storybook-addon-react-live-edit": "^2.0.4",
    "storybook-addon-smart-knobs": "^6.0.2",
    "storybook-host": "^5.1.0",
    "storybook-readme": "^5.0.8"

Additional context None

shilman commented 4 years ago

To achieve this you'll need to customize the args for your story by hand: https://storybook.js.org/docs/react/essentials/controls#fully-custom-args

wengsj11 commented 4 years ago

To achieve this you'll need to customize the args for your story by hand: https://storybook.js.org/docs/react/essentials/controls#fully-custom-args

Is there any more specific examples to do that ? I tried but failed😂

sami616 commented 4 years ago

I wonder if an API like the below could work to automate this? 🤔

code

shilman commented 4 years ago

Pretty nice @sami616 😻

sami616 commented 4 years ago

@shilman not sure how TS users would type the second argument though, would an intersection type work?

subcomponents: SubOneProps & SubTwoProps

semmerich-fliptrx commented 2 years ago

Any update on this? My company uses subcomponents.

mayyamark commented 2 years ago

Having the same issue. I have Card component, which I'll use as a wrapper. I have a few other components - CardActions, CardImage, CardText and CardTitle, which I'll use as children. I'd like to be able to use the Controls pannel to change the children's args. The approach from the docs didn't work for me. When I try to use the subcomponents field in the Card's story, I see the Args unsupported. See Args documentation for your framework. in the Docs panel.

card.stories.jsx (removed business logic for simplicity)

export default {
  title: "Components / Card",
  component: Card,
  subcomponents: {
    CardActions,
    CardImage,
    CardText,
    CardTitle
  },
  argTypes: { 
    children: {
      description: "The content of the component.",
      type: "node"
    }
 }
};

export const Example = (args) => <Card {...args} />;

Example.args = {
  children: (
    <>
      <CardTitle>Lorem Ipsum</CardTitle>
      <CardImage src="https://picsum.photos/536/354" alt="lorem ipsum" />
      <CardText>
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry&apos;s standard dummy text
        ever since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book.
      </CardText>
      <CardActions>lorem ipsum</CardActions>
    </>
  )
};

Canvas panel:

Screenshot 2022-03-09 at 11 44 49

Docs panel: Screenshot 2022-03-09 at 11 45 16

I tried to describe each subcomponent, like this:

export default {
  title: "Components / Card",
  component: CustomCard,
  subcomponents: {
    CardActions: {
      component: CardActions,
      argTypes: {
        children: {
          description: "The content of the component.",
          type: "node"
        }
      }
    }
  },
  ...
}

The result was the same. Any with ideas are welcome