Storybook: Minimize circular dependencies to avoid issues with vite

Author: nicolas-jaussaud

assets/src/Control.tsx

@@ -3,7 +3,7 @@ import {
   useState,
   useContext
 } from 'react'
-import { ControlContext } from './index.tsx'
+import { ControlContext } from './context'
 
 import { triggerEvent } from './events'
 import { OverlayProvider } from 'react-aria'

assets/src/Element.tsx

@@ -3,7 +3,7 @@ import {
   useContext,
   useEffect
 } from 'react'
-import { ControlContext } from './index.tsx'
+import { ControlContext } from './context'
 
 import types from './types.ts'
 import DependendWrapper from './components/dependent/DependendWrapper'

assets/src/components/base/dialog/Dialog.tsx

@@ -1,6 +1,6 @@
 import { useRef } from 'react'
 import { useDialog } from 'react-aria'
-import { Title } from '../../base'
+import Title from '../title/Title'
 
 /**
  * @see https://react-spectrum.adobe.com/react-aria/useDialog.html 

assets/src/components/base/modal/Modal.tsx

@@ -7,7 +7,7 @@ import {
   Overlay,
   useModalOverlay
 } from 'react-aria'
-import { ControlContext } from '../../../index.tsx'
+import { ControlContext } from '../../../context'
 
 const Modal = ({ state, children, ...props }) => {
 

assets/src/components/base/modal/ModalTrigger.tsx

@@ -1,17 +1,15 @@
 import { useOverlayTriggerState } from 'react-stately'
 import { useOverlayTrigger } from 'react-aria'
 
-import { 
-  Button, 
-  Dialog, 
-  Modal 
-} from '../../base'
+import Button from '../button/Button'
+import Dialog from '../dialog/Dialog'
+import Modal from './Modal'
 
 const ModalTrigger = props => {
-  
+
   // Some props names are going to be different when generated from PHP
   const content = props.content ?? props.children
-  
+
   const state = useOverlayTriggerState(props)
   const { triggerProps, overlayProps } = useOverlayTrigger(
     { type: 'dialog' },

assets/src/components/base/popover/Popover.tsx

@@ -8,7 +8,7 @@ import {
   Overlay, 
   usePopover
 } from 'react-aria'
-import { ControlContext } from '../../../index.tsx'
+import { ControlContext } from '../../../context'
 
 function Popover({ 
   children, 

assets/src/components/dynamic/settings-modal/DynamicFieldSettings.tsx

@@ -13,7 +13,8 @@ import {
 } from 'react-aria'
 import { useOverlayTriggerState } from 'react-stately'
 
-import { ControlContext, getConfig } from '../../../index.tsx'
+import { ControlContext } from '../../../context'
+import { getConfig } from '../../../index.tsx'
 import { Button, Title } from '../../base'
 import ComboBox from '../../field/combo-box'
 import Control from '../../../Control'

assets/src/components/field/checkbox/CheckboxStates.stories.tsx

@@ -63,6 +63,7 @@ export const LegacyVsTui: Story = {
 
 export const InteractiveComparison: Story = {
   render: () => {
+
     const [legacyChecked, setLegacyChecked] = useState(false)
     const [tuiChecked, setTuiChecked] = useState(false)
 

assets/src/context.ts

@@ -0,0 +1,23 @@
+import { createContext } from 'react'
+
+/**
+ * Used to detect the current context from child components
+ *
+ * Extracted to its own module to avoid circular dependencies when
+ * base components (Modal, Popover) need ControlContext, as index.tsx
+ * imports types.ts which imports from the base barrel
+ *
+ * @see ./Control.tsx
+ * @see ./Element.tsx
+ * @see ./components/base/modal/Modal.tsx
+ * @see ./components/base/popover/Popover.tsx
+ * @see ./components/dynamic/settings-modal/DynamicFieldSettings.tsx
+ *
+ * The circular dependency won't cause issues with tangible-roller, but Vite
+ * (used by Storybook) won't support it
+ *
+ * @see https://github.com/TangibleInc/fields/issues/11
+ */
+const ControlContext = createContext(null)
+
+export { ControlContext }

assets/src/index.tsx

@@ -3,7 +3,7 @@ import {
   createRoot 
 } from 'react-dom'
 
-import { createContext } from 'react'
+import { ControlContext } from './context'
 
 import {
   config,
@@ -23,11 +23,6 @@ import types from './types'
 import fields from './fields'
 import * as utils from './utils'
 
-/**
- * Used to detect the current context from child components
- */
-const ControlContext = createContext(null)
-
 const renderComponent = (props, type = 'field') => (
   type === 'element' 
     ? renderElement(props)