Isolate @storybook/addon-docs imports

department-of-veterans-affairs · Nov 9, 2023 · 1feef56 · 1feef56
1 parent 51b03a2
commit 1feef56
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 16 deletions.
diff --git a/packages/components/src/components/Button/Button.tsx b/packages/components/src/components/Button/Button.tsx
@@ -9,7 +9,7 @@ import {
 } from 'react-native'
 import React from 'react'
 
-import { webStorybookColorScheme } from '../../utils/storybook'
+import { webStorybookColorScheme } from '../../utils'
 
 export enum ButtonVariants {
   Base,

diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx
@@ -13,7 +13,7 @@ import styled from 'styled-components/native'
 
 import { ComponentWrapper } from '../../wrapper'
 import { PressableOpacityStyle } from '../../utils'
-import { webStorybookColorScheme } from '../../utils/storybook'
+import { webStorybookColorScheme } from '../../utils'
 
 /**
  * Props for {@link SegmentedControl}

diff --git a/packages/components/src/utils/index.tsx b/packages/components/src/utils/index.tsx
@@ -1,4 +1,21 @@
-import { PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native'
+import {
+  ColorSchemeName,
+  PressableStateCallbackType,
+  StyleProp,
+  ViewStyle,
+} from 'react-native'
+
+/** Function for web Storybook to override setting colorScheme based on UI toggle button */
+export function webStorybookColorScheme(): ColorSchemeName {
+  // If not web Storybook, set with RN useColorScheme hook
+  if (!process.env.STORYBOOK_WEB) {
+    return null
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const storybookDarkMode = require('storybook-dark-mode')
+  return storybookDarkMode.useDarkMode() ? 'dark' : 'light'
+}
 
 /**
  * Convenience function for handling TouchableOpacity styling on Pressable component

diff --git a/packages/components/src/utils/storybook.tsx b/packages/components/src/utils/storybook.tsx
@@ -6,7 +6,7 @@ import {
   Subtitle,
   Title,
 } from '@storybook/addon-docs'
-import { ColorSchemeName, Linking, Text, View } from 'react-native'
+import { Linking, Text, View } from 'react-native'
 
 type DocProps = {
   name: string
@@ -51,15 +51,3 @@ export const generateDocs = ({ name, docUrl }: DocProps) => ({
     </>
   ),
 })
-
-/** Function for web Storybook to override setting colorScheme based on UI toggle button */
-export function webStorybookColorScheme(): ColorSchemeName {
-  // If not web Storybook, set with RN useColorScheme hook
-  if (!process.env.STORYBOOK_WEB) {
-    return null
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const storybookDarkMode = require('storybook-dark-mode')
-  return storybookDarkMode.useDarkMode() ? 'dark' : 'light'
-}