fix: export form context in a new file (#948)

Author: Sebastien-Ahkrin

src/components/form/components/input/switch.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import type { ChangeEvent } from 'react';
 
 import { useFieldContext } from '../../context/use_ts_form.js';
-import type { Layout } from '../input_groups/form.js';
+import type { Layout } from '../input_groups/form_context.js';
 import { FormGroup } from '../input_groups/form_group.js';
 
 interface SwitchProps {

src/components/form/components/input_groups/form.tsx

@@ -1,22 +1,14 @@
 import type { FormHTMLAttributes, ReactNode } from 'react';
-import { createContext, useContext, useMemo } from 'react';
+import { useMemo } from 'react';
 
-export type Layout = 'inline' | 'stacked';
+import type { Layout } from './form_context.js';
+import { formContext } from './form_context.js';
 
 export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
   children: ReactNode;
   layout?: Layout;
 }
 
-const formContext = createContext<{ layout: Layout }>({
-  layout: 'stacked',
-});
-
-// eslint-disable-next-line react-refresh/only-export-components
-export function useFormContext() {
-  return useContext(formContext);
-}
-
 export function Form(props: FormProps) {
   const { children, layout = 'stacked', ...otherProps } = props;
 

src/components/form/components/input_groups/form_context.ts

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+
+export type Layout = 'inline' | 'stacked';
+
+export const formContext = createContext<{ layout: Layout }>({
+  layout: 'stacked',
+});
+
+export function useFormContext() {
+  return useContext(formContext);
+}

src/components/form/components/input_groups/form_group.tsx

@@ -3,8 +3,8 @@ import { Classes } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import type { ReactNode } from 'react';
 
-import type { Layout } from './form.js';
-import { useFormContext } from './form.js';
+import type { Layout } from './form_context.js';
+import { useFormContext } from './form_context.js';
 
 const INPUT_HEIGHT = 30;
 

stories/components/form/tanstack/input.stories.tsx

@@ -4,7 +4,7 @@ import type { FormEvent } from 'react';
 import { action } from 'storybook/actions';
 import { z } from 'zod';
 
-import type { Layout } from '../../../../src/components/form/components/input_groups/form.js';
+import type { Layout } from '../../../../src/components/form/components/input_groups/form_context.js';
 import { Section } from '../../../../src/components/form/components/layout/Section.js';
 import { useForm } from '../../../../src/components/index.js';
 

stories/components/form/tanstack/new-general-settings.stories.tsx

@@ -4,8 +4,8 @@ import { revalidateLogic } from '@tanstack/react-form';
 import { action } from 'storybook/actions';
 import { z } from 'zod';
 
-import type { Layout } from '../../../../src/components/form/components/input_groups/form.js';
 import { Form } from '../../../../src/components/form/components/input_groups/form.js';
+import type { Layout } from '../../../../src/components/form/components/input_groups/form_context.js';
 import { useForm } from '../../../../src/components/index.js';
 
 export default {