Skip to content

Commit

Permalink
Merge pull request #328 from department-of-veterans-affairs/bug/261-r…
Browse files Browse the repository at this point in the history
…oettger-StorybookFixCodeSnippets

[Bug] Storybook - Fix Code Snippets and Custom Docs Template
  • Loading branch information
TimRoe authored May 23, 2024
2 parents 3f1bbb3 + 8c10af2 commit e5dc229
Show file tree
Hide file tree
Showing 15 changed files with 608 additions and 249 deletions.
47 changes: 37 additions & 10 deletions packages/components/.storybook/native/storybook.requires.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
/* do not change this file, it is auto generated by storybook. */

import { start } from "@storybook/react-native";
import {
start,
prepareStories,
getProjectAnnotations,
} from "@storybook/react-native";

import "@storybook/addon-ondevice-controls/register";
import "@storybook/addon-ondevice-actions/register";
Expand Down Expand Up @@ -34,14 +38,37 @@ const normalizedStories = [
},
];

// @ts-ignore
declare global {
var view: ReturnType<typeof start>;
var STORIES: typeof normalizedStories;
}

const annotations = [
require("./preview"),
require("@storybook/react-native/dist/preview"),
require("@storybook/addon-actions/preview"),
];

global.STORIES = normalizedStories;

export const view = start({
annotations: [
require("./preview"),
require("@storybook/react-native/dist/preview"),
require("@storybook/addon-actions/preview"),
],
storyEntries: normalizedStories,
});
// @ts-ignore
module?.hot?.accept?.();

if (!global.view) {
global.view = start({
annotations,
storyEntries: normalizedStories,
});
} else {
const { importMap } = prepareStories({ storyEntries: normalizedStories });

global.view._preview.onStoriesChanged({
importFn: async (importPath: string) => importMap[importPath],
});

global.view._preview.onGetProjectAnnotationsChanged({
getProjectAnnotations: getProjectAnnotations(global.view, annotations),
});
}

export const view = global.view;
4 changes: 0 additions & 4 deletions packages/components/.storybook/web/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ const CopyPlugin = require('copy-webpack-plugin')

module.exports = {
stories: [
'../../src/components/**/*.stories.mdx',
'../../src/components/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: [
Expand All @@ -21,9 +20,6 @@ module.exports = {
},
framework: '@storybook/react-webpack5',
options: { builder: { useSWC: true } }, // improves build performance
typescript: {
reactDocgen: 'react-docgen',
},
staticDirs: ['../../src/assets'],
webpackFinal: async (config) => {
// Copies fonts from mobile-assets to storybook static folder
Expand Down
24 changes: 12 additions & 12 deletions packages/components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -62,19 +62,19 @@
"@react-native-async-storage/async-storage": "1.23.1",
"@react-native-community/datetimepicker": "7.7.0",
"@react-native-community/slider": "4.5.2",
"@storybook/addon-actions": "^7.6.15",
"@storybook/addon-controls": "^7.6.15",
"@storybook/addon-actions": "7.6.19",
"@storybook/addon-controls": "7.6.19",
"@storybook/addon-designs": "^7.0.9",
"@storybook/addon-docs": "^7.6.15",
"@storybook/addon-essentials": "^7.6.15",
"@storybook/addon-links": "^7.6.15",
"@storybook/addon-ondevice-actions": "^7.6.15",
"@storybook/addon-ondevice-controls": "^7.6.15",
"@storybook/addon-docs": "7.6.19",
"@storybook/addon-essentials": "7.6.19",
"@storybook/addon-links": "7.6.19",
"@storybook/addon-ondevice-actions": "^7.6.18",
"@storybook/addon-ondevice-controls": "^7.6.18",
"@storybook/addon-react-native-web": "^0.0.23",
"@storybook/builder-webpack5": "^7.6.15",
"@storybook/react": "^7.6.15",
"@storybook/react-native": "^7.6.15",
"@storybook/react-webpack5": "^7.6.15",
"@storybook/builder-webpack5": "7.6.19",
"@storybook/react": "7.6.19",
"@storybook/react-native": "^7.6.18",
"@storybook/react-webpack5": "7.6.19",
"@svgr/webpack": "^8.1.0",
"@testing-library/react-native": "^12.4.5",
"@types/jest": "^29.5.12",
Expand Down Expand Up @@ -107,7 +107,7 @@
"react-native-svg-transformer": "^1.3.0",
"react-native-web": "~0.19.10",
"react-test-renderer": "^18.2.0",
"storybook": "^7.6.15",
"storybook": "7.6.19",
"storybook-dark-mode": "^3.0.3",
"ts-jest": "^29.1.2",
"typescript": "^5.3.3"
Expand Down
15 changes: 12 additions & 3 deletions packages/components/src/components/Alert/Alert.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import { Alert, AlertProps } from './Alert'
import { Link } from '../Link/Link'
import { Meta, StoryObj } from '@storybook/react'
import { Spacer } from '../Spacer/Spacer'
import { View } from 'react-native'
import React from 'react'

import { Alert, AlertProps } from './Alert'
import { Link } from '../Link/Link'
import { Spacer } from '../Spacer/Spacer'
import { generateDocs } from '../../utils/storybook'

const meta: Meta<AlertProps> = {
title: 'Alert',
component: Alert,
Expand All @@ -20,6 +22,13 @@ const meta: Meta<AlertProps> = {
</View>
),
],
parameters: {
docs: generateDocs({
name: 'Alert',
docUrl:
'https://department-of-veterans-affairs.github.io/va-mobile-app/design/Components/Alerts%20and%20Progress/Alert',
}),
},
}

export default meta
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/components/Alert/Alert.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,6 @@ export type AlertProps = {
}
)

/** [View guidance for the Alert component on the VA Mobile Documentation Site](https://department-of-veterans-affairs.github.io/va-mobile-app/design/Components/Alerts%20and%20progress/Alert) */
export const Alert: FC<AlertProps> = ({
variant,
header,
Expand Down
9 changes: 8 additions & 1 deletion packages/components/src/components/Button/Button.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { Button, ButtonProps, ButtonVariants } from './Button'
import { Meta, StoryObj } from '@storybook/react'
import { View } from 'react-native'
import React from 'react'

import { Button, ButtonProps, ButtonVariants } from './Button'
import { generateDocs } from '../../utils/storybook'

const meta: Meta<ButtonProps> = {
title: 'Button',
component: Button,
Expand Down Expand Up @@ -36,6 +38,11 @@ const meta: Meta<ButtonProps> = {
url: 'https://www.figma.com/file/Zzt8z60hCtdEzXx2GFWghH/%F0%9F%93%90-Component-Library?type=design&node-id=224-532&mode=design&t=LVehKHpWhqSKrQMW-4',
},
],
docs: generateDocs({
name: 'Button',
docUrl:
'https://department-of-veterans-affairs.github.io/va-mobile-app/design/Components/Buttons%20and%20links/Button',
}),
},
}

Expand Down
1 change: 0 additions & 1 deletion packages/components/src/components/Button/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ export type ButtonProps = {
testOnlyPressed?: boolean
}

/** [View guidance for the Button component on the VA Mobile Documentation Site](https://department-of-veterans-affairs.github.io/va-mobile-app/design/Components/Buttons%20and%20links/Button) */
export const Button: React.FC<ButtonProps> = ({
label,
onPress,
Expand Down
4 changes: 4 additions & 0 deletions packages/components/src/components/Icon/Icon.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { View } from 'react-native'
import React from 'react'

import { Icon, IconMap, IconProps } from './Icon'
import { generateDocs } from '../../utils/storybook'
import CustomSVG from '../../assets/svgs/custom.svg'

const meta: Meta<IconProps> = {
Expand All @@ -23,6 +24,9 @@ const meta: Meta<IconProps> = {
argTypes: {
name: { options: Object.keys(IconMap) },
},
parameters: {
docs: generateDocs({})
}
}

export default meta
Expand Down
8 changes: 8 additions & 0 deletions packages/components/src/components/Link/Link.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { View } from 'react-native'
import React from 'react'

import { Link, LinkProps } from './Link'
import { generateDocs } from '../../utils/storybook'

const meta: Meta<LinkProps> = {
title: 'Link',
Expand All @@ -24,6 +25,13 @@ const meta: Meta<LinkProps> = {
</View>
),
],
parameters: {
docs: generateDocs({
name: 'Link',
docUrl:
'https://department-of-veterans-affairs.github.io/va-mobile-app/design/Components/Buttons%20and%20links/Link',
}),
},
}

export default meta
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/components/Link/Link.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,6 @@ export type LinkProps = linkTypes & {
testOnlyPressed?: boolean
}

/** [View guidance for the Link component on the VA Mobile Documentation Site](https://department-of-veterans-affairs.github.io/va-mobile-app/design/Components/Buttons%20and%20links/Link) */
export const Link: FC<LinkProps> = ({
type,
text,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { View } from 'react-native'
import React, { useState } from 'react'

import { SegmentedControl, SegmentedControlProps } from './SegmentedControl'
import { generateDocs } from '../../utils/storybook'

const meta: Meta<SegmentedControlProps> = {
title: 'Segmented control',
Expand All @@ -27,6 +28,11 @@ const meta: Meta<SegmentedControlProps> = {
url: 'https://www.figma.com/file/QVLPB3eOunmKrgQOuOt0SU/%F0%9F%93%90-DesignLibrary2.0---VAMobile?type=design&node-id=7332%3A11331&mode=design&t=IfpGfogEOoBtNhmN-1',
},
],
docs: generateDocs({
name: 'Segmented control',
docUrl:
'https://department-of-veterans-affairs.github.io/va-mobile-app/design/Components/Navigation/Secondary/SegmentedControl',
}),
},
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,7 @@ const Segment = styled(Pressable)<SegmentProps>`
elevation: ${(props) => (props.isSelected ? 4 : 0)};
background-color: ${(props) => props.backgroundColor};
`
/** A segmented control is used to switch between related views of information within the same context.
*
* [View guidance for the SegmentedControl component on the VA Mobile Documentation Site](https://department-of-veterans-affairs.github.io/va-mobile-app/design/Components/Navigation/Secondary/SegmentedControl) */
/** A segmented control is used to switch between related views of information within the same context. */
export const SegmentedControl: FC<SegmentedControlProps> = ({
labels,
onChange,
Expand Down
4 changes: 4 additions & 0 deletions packages/components/src/components/Spacer/Spacer.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { Button, ButtonVariants } from '../Button/Button'
import { Icon } from '../Icon/Icon'
import { Link } from '../Link/Link'
import { Spacer, SpacerProps } from './Spacer'
import { generateDocs } from '../../utils/storybook'

const centerProps: ViewStyle = {
flex: 1,
Expand All @@ -23,6 +24,9 @@ const meta: Meta<SpacerProps> = {
</View>
),
],
parameters: {
docs: generateDocs({})
}
}

export default meta
Expand Down
14 changes: 7 additions & 7 deletions packages/components/src/utils/storybook.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import { ColorSchemeName, Linking, Text, View } from 'react-native'
import {
ArgsTable,
Controls,
Description,
Primary,
Stories,
Subtitle,
Title,
} from '@storybook/addon-docs'
import { ColorSchemeName, Linking, Text, View } from 'react-native'
import React, { useSyncExternalStore } from 'react'

type DocProps = {
name: string
docUrl: string
name?: string
docUrl?: string
}

/**
Expand All @@ -20,7 +20,7 @@ type DocProps = {
* @param docUrl - URL for the component's documentation on the docs site
* @returns
*/
export const DocLink = ({ name, docUrl }: DocProps): JSX.Element => (
export const DocLink = ({ name, docUrl }: Required<DocProps>): JSX.Element => (
<View style={{ marginVertical: 10 }}>
<Text
style={{ color: 'blue', textDecorationLine: 'underline', lineHeight: 20 }}
Expand All @@ -43,10 +43,10 @@ export const generateDocs = ({ name, docUrl }: DocProps) => ({
<>
<Title />
<Subtitle />
<DocLink name={name} docUrl={docUrl} />
{name && docUrl ? <DocLink name={name} docUrl={docUrl} /> : null}
<Description />
<Primary />
<ArgsTable />
<Controls />
<Stories />
</>
),
Expand Down
Loading

0 comments on commit e5dc229

Please sign in to comment.