Addon-docs: Preserve Source indentation by default

[atanasster]

Issue: #8078

What I did

• Removed default decent (remove template strings spacing)
• code styling prevent white space wrapping style

How to test

I didn't get much stories to try with, so mostly tested indentation.
Possibly find stories that are using template strings?

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/storybook/monorepo/e2sp097bq
✅ Preview: https://monorepo-git-fork-atanasster-code-preview-remove-dedent.storybook.now.sh

[shilman]

This is "kind of" a breaking change. I think it's probably better than what it's replacing in most cases. Here's a case where it's not:

[shilman]

@atanasster Oh, see also the failing chromatic tests! 😱

[atanasster]

This is "kind of" a breaking change. I think it's probably better than what it's replacing in most cases. Here's a case where it's not:

Can you please elaborate, the new version is outputting it as it is in the code, while before it was mangling the code> no ?

Here is the code for the story:

export const MultipleActionsObjectConfig = () => (
  <Button
    {...actions({ onClick: 'clicked', onMouseOver: 'hovered' }, { clearOnStoryChange: false })}
  >
    Moving away from this story will persist the action logger
  </Button>
);
``

[atanasster]

chromatic tests - no idea what they say :)
Like one issue seems to be a styled-components className? And some issues are expectedly the code output changes?

[atanasster]

Can you please elaborate, the new version is outputting it as it is in the code, while before it was mangling the code> no ?

If the issue is the long line, I specifically removed the white-space wrapping style, so the code stays the same as the story was written and the user has control over the code. I can put it back in (to force-wrap lines)

[shilman]

I took a look at all the different permutations. What I think:

1. Leave the SourceHighlighter alone
2. Modify format=false as the default on the lib/components Source component instead

That way we still get line wrapping (debatable, I know) but most of the annoying bugs that people are reporting go away. WDYT?

[atanasster]

sounds good, checking in

[shilman]

LGTM 😅

[patricklafrance]

Not sure if these changes are a good idea.

Before 5.3.7 about 15% of my source were not formatted well. Now it's about 90%.

Most of them are like the following:

[shilman]

@atanasster WDYT

[atanasster]

@patricklafrance - can you paste your code that breaks here?

@shilman yes, lets keep for the 6.0 branch, its too much of a risk to push out. In general, i think we should not touch the source code on our end (including in source-loader) and use the syntax highlighter’s prettier configuration that would be also available to the end-user - ie he prefers 2 vs 4 spaces etc.

[patricklafrance]

@atanasster for this particular case:

<Preview>
    <Story name="size">
        <div className="flex flex-row items-end">
            <Button type="button" size="tiny">Tiny</Button>
            <Button type="button" size="small">Small</Button>
            <Button type="button" size="medium">Medium</Button>
            <Button type="button" size="large">Large</Button>
        </div>
    </Story>
</Preview>

I have a few other cases:

<Preview>
    <Story name="default">
        <RemoteSearchInput
            onFetchResults={useDefaultResultsFetcher("https://wft-geo-db.p.rapidapi.com/v1/geo/countries?limit=5", "namePrefix", { requestOptions: API_REQUEST_OPTIONS })}
            onResults={response => {
                return response.data.map(x => searchInputResult(x.code, x.name));
            }}
            onValueChange={logValueChanged}
            placeholder="Type a country name"
        />
    </Story>
</Preview>

<Preview>
    <Story name="disabled">
        <MultiSelect
            items={DEFAULT_ITEMS}
            defaultValues={[GROUP_RESTORED_VALUE, GROUP_NAME_CHANGED_VALUE]}
            disabled
            onValuesChange={logValuesChanged}
        />
    </Story>
</Preview>

<Preview>
    <Story name="custom-color">
        <Label
            naked
            style={{
                backgroundColor: "#FFF6E7",
                color: "var(--marine-500)",
                border: "1px solid #FEE9C3"
            }}
        >
            Notification Sent
        </Label>
    </Story>
</Preview>

[atanasster]

@patricklafrance thanks !

[shilman]

@atanasster This has already been released in 5.3.7. Should I revert the change there?

[atanasster]

Ah sorry didnt realize. Based on what @patricklafrance is saying, i guess we should revert it if possible?

[shilman]

👍 will revert it @patricklafrance @atanasster and let's figure out the right fix on the next/6.0 branch