From 4f31eeaf031c4e945b0a6b810089bddb242d4a94 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Tue, 15 Feb 2022 23:00:20 +0000 Subject: [PATCH 1/2] Provides additional information to the FAQ --- docs/faq.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/docs/faq.md b/docs/faq.md index 1932c6fe4d0a..7ff48bf8f5f1 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -350,3 +350,27 @@ Applying this small change will enable you to add syntax highlight for SCSS or a ### How can my code detect if it is running in Storybook? You can do this by checking for the `IS_STORYBOOK` global variable, which will equal `true` when running in Storybook. The environment variable `process.env.STORYBOOK` is also set to `true`. + +### Why are the TypeScript examples and documentation using `as` for type safety? + +We're aware that the default Typescript story construct might seem outdated and could potentially introduce a less than ideal way of handling type safety and strictness and could be rewritten as such: + +```ts +// Button.stories.ts | tsx + +import React from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; + +const StoryMeta: ComponentMeta = { + /* 👇 The title prop is optional. + * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', + component: Button, +}; + +export default meta; +``` + +Although valid, it introduces additional boilerplate code to the story definition. Instead, we're working towards implementing a safer mechanism based on what's currently being discussed in the following [issue](https://github.com/microsoft/TypeScript/issues/7481). Once the feature is released, we'll migrate our existing examples and documentation accordingly. \ No newline at end of file From b484832fc59cd8cc334b99f39694d1e8faa4a8ac Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Tue, 15 Feb 2022 23:05:07 +0000 Subject: [PATCH 2/2] Adds missing entry for the FAQ --- docs/faq.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/faq.md b/docs/faq.md index 7ff48bf8f5f1..c6f2923e686d 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -351,6 +351,10 @@ Applying this small change will enable you to add syntax highlight for SCSS or a You can do this by checking for the `IS_STORYBOOK` global variable, which will equal `true` when running in Storybook. The environment variable `process.env.STORYBOOK` is also set to `true`. +### Why are my stories not showing up correctly when using certain characters? + +Storybook allows you to use most characters while naming your stories. Still, specific characters (e.g., `#`) can lead to issues when Storybook generates the internal identifier for the story, leading to collisions and incorrectly outputting the correct story. We recommend using such characters sparsely. + ### Why are the TypeScript examples and documentation using `as` for type safety? We're aware that the default Typescript story construct might seem outdated and could potentially introduce a less than ideal way of handling type safety and strictness and could be rewritten as such: