Skip to content

Commit

Permalink
feat(code-snippet): remove default props from manual snippet
Browse files Browse the repository at this point in the history
- updates readme to reflect that functionality
  • Loading branch information
mgadewoll committed Jun 28, 2024
1 parent d272e3c commit dbb9a20
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 5 deletions.
6 changes: 4 additions & 2 deletions packages/eui/.storybook/addons/code-snippet/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -191,9 +191,11 @@ const meta = {

### Manual code snippets

Instead of using the automatic code snippet generation, we can also provide a manual snippet which will be output instead. This is especially useful when the story content is not actually a component (e.g. a hook). You can see an example of this for the story of `useEuiTextDiff`.
Instead of using the automatic code snippet generation, you can also provide a manual snippet which will be output instead. This is especially useful when the story content is not actually a component (e.g. a hook). You can see an example of this for the story of `useEuiTextDiff`.

To add the story args to the code snippet, add the defined marker `{{STORY_ARGS}}` to the snippet string. If the args should be spread on the root component use `{{...STORY_ARGS}}` instead.
These markers will be replaced automatically with the current story args. It's important to note that the `children` prop is removed and it should be manually added to the snippet input instead. Additionally the story `args` are filtered to remove the default props. This can be changed via the `removeDefaultProps` option.

To add the story args to the code snippet, add the defined marker `{{STORY_ARGS}}` to the snippet string. This marker will be replaced automatically with the current story args. If the args should be spread on the root component use `{{...STORY_ARGS}}` instead.

```ts
// {{STORY_ARGS}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,11 @@ import {
STORY_ARGS_MARKER,
} from '../constants';

import { getFormattedCode, skipJsxRender } from './utils';
import {
getDefaultPropsfromDocgenInfo,
getFormattedCode,
skipJsxRender,
} from './utils';
import { JSXOptions, renderJsx } from './render_jsx';

const defaultJsxOptions = {
Expand Down Expand Up @@ -104,9 +108,18 @@ export const customJsxDecorator = (
// use manually provided code snippet and replace args if available
if (codeSnippet) {
const args: typeof context.args = { ...context.args };
const defaultProps = getDefaultPropsfromDocgenInfo(story, context);

for (const key of Object.keys(context.args)) {
if (!context.args[key]) {
// checks story args for:
// - remove if no value
// - remove if `chidlren`
// - remove if arg is a default prop
if (
!context.args[key] ||
key === 'children' ||
defaultProps?.includes(key)
) {
delete args[key];
}
}
Expand Down Expand Up @@ -141,7 +154,7 @@ export const customJsxDecorator = (

getFormattedCode(code)
.then((res: string) => {
jsx = res;
jsx = res.replace(';\n', '\n');
})
.catch((error: Error): void => {
logger.error(
Expand Down

0 comments on commit dbb9a20

Please sign in to comment.