Skip to content

Commit

Permalink
fix: hide component source when no components
Browse files Browse the repository at this point in the history
  • Loading branch information
@atanasster
atanasster committed Apr 1, 2020
1 parent 1a8ff2a commit a496da3
Show file tree
Hide file tree
Showing 7 changed files with 44 additions and 21 deletions.
2 changes: 1 addition & 1 deletion examples/storybook-5/.storybook/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ module.exports = {
{ name: '@component-controls/react-docgen-typescript-info', test: /\.(ts|tsx)$/}
],
prettier: {
tabWidth: 4,
tabWidth: 2,
},
components: {
storeSourceFile: true, //false
Expand Down
44 changes: 26 additions & 18 deletions ui/blocks/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,19 +49,21 @@ _ComponentsBlockContainer [source code](https:/github.com/ccontrols/component-co
| `title` | _string_ | optional section title for the block. |
| `id` | _string_ | optional id to be used for the block if no id is provided, one will be calculated automatically from the title. |
| `collapsible` | _boolean_ | if false, will nothave a collapsible frame. |
| `sxStyle` | _SystemStyleObject_ | theme-ui styling object for Block Box |

## <ins>StoryBlockContainer</ins>

_StoryBlockContainer [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/blocks/src/BlockContainer/story/StoryBlockContainer.tsx)_

### properties

| Name | Type | Description |
| ------------- | --------- | --------------------------------------------------------------------------- |
| `id` | _string_ | id of the story |
| `name` | _string_ | alternatively you can use the name of a story to load from an external file |
| `title` | _string_ | optional section title for the block. |
| `collapsible` | _boolean_ | if false, will nothave a collapsible frame. |
| Name | Type | Description |
| ------------- | ------------------- | --------------------------------------------------------------------------- |
| `id` | _string_ | id of the story |
| `name` | _string_ | alternatively you can use the name of a story to load from an external file |
| `title` | _string_ | optional section title for the block. |
| `collapsible` | _boolean_ | if false, will nothave a collapsible frame. |
| `sxStyle` | _SystemStyleObject_ | theme-ui styling object for Block Box |

## <ins>ComponentSource</ins>

Expand All @@ -79,6 +81,7 @@ _ComponentSource [source code](https:/github.com/ccontrols/component-controls/tr
| `title` | _string_ | optional section title for the block. |
| `id` | _string_ | optional id to be used for the block if no id is provided, one will be calculated automatically from the title. |
| `collapsible` | _boolean_ | if false, will nothave a collapsible frame. |
| `sxStyle` | _SystemStyleObject_ | theme-ui styling object for Block Box |
| `actions` | _ActionItem\[]_ | optional actions provided to the component |
| `plain` | _boolean_ | if plain, skip the border and spacing around the children |
| `theme` | _PrismTheme_ | optional \`PrismTheme\` theme provided to the component. Themes can be imported from \`prism-react-renderer/themes\`. |
Expand Down Expand Up @@ -131,12 +134,13 @@ _Playground [source code](https:/github.com/ccontrols/component-controls/tree/ma

### properties

| Name | Type | Description |
| ----------- | ---------------------------- | --------------------------------------------------------- |
| `transform` | _PlaygroundTransformOptions_ | |
| `openTab` | _any_ | by default, which tab to have open. |
| `actions` | _ActionItem\[]_ | optional actions provided to the component |
| `plain` | _boolean_ | if plain, skip the border and spacing around the children |
| Name | Type | Description |
| ----------- | ---------------------------- | ------------------------------------------------------------- |
| `transform` | _PlaygroundTransformOptions_ | |
| `openTab` | _any_ | by default, which tab to have open. |
| `dark` | _boolean_ | whether to use the dark theme for the story source component. |
| `actions` | _ActionItem\[]_ | optional actions provided to the component |
| `plain` | _boolean_ | if plain, skip the border and spacing around the children |

## <ins>PropsTable</ins>

Expand All @@ -152,6 +156,7 @@ _PropsTable [source code](https:/github.com/ccontrols/component-controls/tree/ma
| `title` | _string_ | optional section title for the block. |
| `id` | _string_ | optional id to be used for the block if no id is provided, one will be calculated automatically from the title. |
| `collapsible` | _boolean_ | if false, will nothave a collapsible frame. |
| `sxStyle` | _SystemStyleObject_ | theme-ui styling object for Block Box |
| `header` | _boolean_ | show or hide the header element. |
| `sorting` | _boolean_ | enable.disable sorting. |
| `filtering` | _boolean_ | enable/disable filtering. |
Expand All @@ -162,16 +167,19 @@ _PropsTable [source code](https:/github.com/ccontrols/component-controls/tree/ma

## <ins>Stories</ins>

displays multiple stories in ther own Playground components

_Stories [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/blocks/src/Stories/Stories.tsx)_

### properties

| Name | Type | Description |
| ----------- | ---------------------------- | --------------------------------------------------------- |
| `transform` | _PlaygroundTransformOptions_ | |
| `openTab` | _any_ | by default, which tab to have open. |
| `actions` | _ActionItem\[]_ | optional actions provided to the component |
| `plain` | _boolean_ | if plain, skip the border and spacing around the children |
| Name | Type | Description |
| ----------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| `dark` | _boolean_ | whether to display the dark theme storysource code component whether to use the dark theme for the story source component. |
| `transform` | _PlaygroundTransformOptions_ | |
| `openTab` | _any_ | by default, which tab to have open. |
| `actions` | _ActionItem\[]_ | optional actions provided to the component |
| `plain` | _boolean_ | if plain, skip the border and spacing around the children |

## <ins>Story</ins>

Expand Down
4 changes: 4 additions & 0 deletions ui/blocks/src/BlockContainer/components/ComponentsBlockContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@ export const ComponentsBlockContainer: FC<ComponentsBlockContainerProps> = ({
const [title, setTitle] = React.useState<string | undefined>();
const { components } = useComponentsContext({ of });
const componentNames = Object.keys(components);
if (!componentNames.length) {
//no components to display
return null;
}
React.useEffect(() => {
setTitle(
userTitle === CURRENT_STORY && componentNames.length
Expand Down
5 changes: 5 additions & 0 deletions ui/blocks/src/ComponentSource/ComponentSource.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,8 @@ export const notCollapsible = () => (
<ComponentSource title="." collapsible={false} />
</MockContext>
);
export const noComponent = () => (
<MockContext storyId="id-no-component">
<ComponentSource title="Component" id="." />
</MockContext>
);
1 change: 0 additions & 1 deletion ui/blocks/src/ComponentSource/ComponentSource.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ export const ComponentSource: FC<ComponentSourceProps> = ({
? `import { ${componentName} } from '${importFrom}';`
: `import ${componentName} from '${importFrom}';`;
}

if (!source) {
return null;
}
Expand Down
7 changes: 7 additions & 0 deletions ui/blocks/src/test/storyStore.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -406,5 +406,12 @@ and a [link](https://google.com)
);
`,
},
'id-no-component': {
renderFn: () => <Heading>Components</Heading>,
id: 'id-no-component',
kind: 'Story',
name: 'no component',
source: "() => 'hello'",
},
},
};
2 changes: 1 addition & 1 deletion ui/components/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ _BlockContainer [source code](https:/github.com/ccontrols/component-controls/tre
| `title` | _string_ | optional section title for the block. |
| `id` | _string_ | optional id to be used for the block if no id is provided, one will be calculated automatically from the title. |
| `collapsible` | _boolean_ | if false, will nothave a collapsible frame. |
| `sx` | _SystemStyleObject_ | theme-ui styling object for Block Box |
| `sxStyle` | _SystemStyleObject_ | theme-ui styling object for Block Box |

## <ins>Collapsible</ins>

Expand Down

0 comments on commit a496da3

Please sign in to comment.