Rename TypeScript types and export more of them

Author: fabian-hiller

packages/solid/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to the library will be documented in this file.
 
+## vX.X.X (Month DD, YYYY)
+
+- Rename TypeScript types and export more of them
+
 ## v0.5.0 (November 06, 2022)
 
 - Reset form response at `handleSubmit` and `reset` method

packages/solid/src/index.ts

@@ -1,18 +1,5 @@
-import type {
-  FormState as ModularForm,
-  FieldState as ModularField,
-  FieldValue as ModularValue,
-  FieldValues as ModularValues,
-  FieldArrayState as ModularFieldArray,
-} from './types';
-export type {
-  ModularForm,
-  ModularField,
-  ModularValue,
-  ModularValues,
-  ModularFieldArray,
-};
 export * from './components';
 export * from './methods';
 export * from './primitives';
+export * from './types';
 export * from './validation';

packages/website/src/components/Debugger.tsx

@@ -1,14 +1,14 @@
 import {
   getValues,
-  ModularValue,
-  ModularValues,
-  ModularForm,
+  FieldValue,
+  FieldValues,
+  FormState,
 } from '@modular-forms/solid';
 import clsx from 'clsx';
 import { createMemo, For, Show } from 'solid-js';
 
 type DebuggerProps = {
-  of: ModularForm<any> | undefined;
+  of: FormState<any> | undefined;
 };
 
 /**
@@ -82,7 +82,7 @@ export function Debugger(props: DebuggerProps) {
           when={Object.keys(values() || {}).length}
           fallback={<p>Wait for input...</p>}
         >
-          <FieldValues values={values()} />
+          <FieldValueList values={values()} />
         </Show>
       </div>
     </div>
@@ -91,13 +91,13 @@ export function Debugger(props: DebuggerProps) {
 
 type FieldValuesProps = {
   class?: string;
-  values: ModularValue[] | ModularValues | ModularValues[];
+  values: FieldValue[] | FieldValues | FieldValues[];
 };
 
 /**
  * Recusive component that displays individual form values.
  */
-function FieldValues(props: FieldValuesProps) {
+function FieldValueList(props: FieldValuesProps) {
   return (
     <ul class={clsx('space-y-5', props.class)}>
       <For each={Object.entries(props.values)}>
@@ -136,7 +136,7 @@ function FieldValues(props: FieldValuesProps) {
                   : String(value)}
               </span>
             ) : (
-              <FieldValues class="ml-2 mt-3" values={value} />
+              <FieldValueList class="ml-2 mt-3" values={value} />
             )}
           </li>
         )}

packages/website/src/components/FormFooter.tsx

@@ -1,8 +1,8 @@
-import { ModularForm, reset } from '@modular-forms/solid';
+import { FormState, reset } from '@modular-forms/solid';
 import { ActionButton } from './ActionButton';
 
 type FormFooterProps = {
-  of: ModularForm<any>;
+  of: FormState<any>;
 };
 
 /**

packages/website/src/components/FormHeader.tsx

@@ -1,8 +1,8 @@
-import { ModularForm, reset } from '@modular-forms/solid';
+import { FormState, reset } from '@modular-forms/solid';
 import { ActionButton } from './ActionButton';
 
 type FormHeaderProps = {
-  of: ModularForm<any>;
+  of: FormState<any>;
   heading: string;
 };
 

packages/website/src/contexts/form.tsx

@@ -1,4 +1,4 @@
-import { ModularForm } from '@modular-forms/solid';
+import { FormState } from '@modular-forms/solid';
 import {
   Accessor,
   createContext,
@@ -8,7 +8,7 @@ import {
   useContext,
 } from 'solid-js';
 
-type Form = ModularForm<any> | undefined;
+type Form = FormState<any> | undefined;
 
 // Create form context
 const FormContext = createContext<{ get: Accessor<Form>; set: Setter<Form> }>();

packages/website/src/routes/api.tsx

@@ -64,11 +64,15 @@ export default function ApiLayout() {
         {
           heading: 'Types',
           items: [
-            'ModularField',
-            'ModularFieldArray',
-            'ModularForm',
-            'ModularValue',
-            'ModularValues',
+            'FieldArrayState',
+            'FieldElement',
+            'FieldState',
+            'FieldValue',
+            'FieldValues',
+            'FormState',
+            'Response',
+            'ValidateField',
+            'ValidateFieldArray',
           ],
         },
       ]}

packages/website/src/routes/api/Field.mdx

@@ -48,16 +48,16 @@ export const properties = {
   of: {
     type: {
       type: 'custom',
-      name: 'ModularForm',
-      href: '/api/ModularForm',
+      name: 'FormState',
+      href: '/api/FormState',
     },
   },
   initialValue: {
     type: [
       {
         type: 'custom',
-        name: 'ModularValue',
-        href: '/api/ModularValue',
+        name: 'FieldValue',
+        href: '/api/FieldValue',
       },
       'undefined',
     ],
@@ -71,8 +71,8 @@ export const properties = {
             name: 'value',
             type: {
               type: 'custom',
-              name: 'ModularValue',
-              href: '/api/ModularValue',
+              name: 'FieldValue',
+              href: '/api/FieldValue',
             },
           },
         ],
@@ -94,8 +94,8 @@ export const properties = {
               name: 'value',
               type: {
                 type: 'custom',
-                name: 'ModularValue',
-                href: '/api/ModularValue',
+                name: 'FieldValue',
+                href: '/api/FieldValue',
               },
             },
           ],
@@ -128,8 +128,8 @@ export const properties = {
           name: 'field',
           type: {
             type: 'custom',
-            name: 'ModularField',
-            href: '/api/ModularField',
+            name: 'FieldState',
+            href: '/api/FieldState',
           },
         },
       ],

packages/website/src/routes/api/FieldArray.mdx

@@ -37,8 +37,8 @@ export const properties = {
   of: {
     type: {
       type: 'custom',
-      name: 'ModularForm',
-      href: '/api/ModularForm',
+      name: 'FormState',
+      href: '/api/FormState',
     },
   },
   validate: {
@@ -105,8 +105,8 @@ export const properties = {
           name: 'fieldArray',
           type: {
             type: 'custom',
-            name: 'ModularFieldArray',
-            href: '/api/ModularFieldArray',
+            name: 'FieldArrayState',
+            href: '/api/FieldArrayState',
           },
         },
       ],

packages/website/src/routes/api/ModularFieldArray.mdx renamed to packages/website/src/routes/api/FieldArrayState.mdx

@@ -1,15 +1,15 @@
 import { Description, Property, Title } from '~/components';
 
-<Title>ModularFieldArray</Title>
+<Title>FieldArrayState</Title>
 <Description>Type that defines the state of a form field array.</Description>
 
-# ModularFieldArray
+# FieldArrayState
 
 Type that defines the state of a form field array.
 
 ## Definition
 
-- `ModularFieldArray` <Property type="object" />
+- `FieldArrayState` <Property type="object" />
   - `name` <Property type="string" />
   - `items` <Property type={{ type: 'array', item: 'number' }} />
   - `length` <Property type="number" />

packages/website/src/routes/api/FieldElement.mdx

@@ -0,0 +1,31 @@
+import { Description, Property, Title } from '~/components';
+
+<Title>FieldElement</Title>
+<Description>Type that defines the HTML element of a field.</Description>
+
+# FieldElement
+
+Type that defines the HTML element of a field.
+
+## Definition
+
+- `FieldElement` <Property {...properties.FieldElement} />
+
+export const properties = {
+  FieldElement: {
+    type: [
+      {
+        type: 'custom',
+        name: 'HTMLInputElement',
+      },
+      {
+        type: 'custom',
+        name: 'HTMLSelectElement',
+      },
+      {
+        type: 'custom',
+        name: 'HTMLTextAreaElement',
+      },
+    ],
+  },
+};

packages/website/src/routes/api/ModularField.mdx renamed to packages/website/src/routes/api/FieldState.mdx

@@ -1,15 +1,15 @@
 import { Description, Property, Title } from '~/components';
 
-<Title>ModularField</Title>
+<Title>FieldState</Title>
 <Description>Type that defines the state of a form field.</Description>
 
-# ModularField
+# FieldState
 
 Type that defines the state of a form field.
 
 ## Definition
 
-- `ModularField` <Property type="object" />
+- `FieldState` <Property type="object" />
   - `props` <Property type="object" />
     - `name` <Property type="string" />
     - `ref` <Property {...properties.ref} />
@@ -40,11 +40,11 @@ export const properties = {
       params: [
         {
           name: 'element',
-          type: [
-            { type: 'custom', name: 'HTMLInputElement' },
-            { type: 'custom', name: 'HTMLSelectElement' },
-            { type: 'custom', name: 'HTMLTextAreaElement' },
-          ],
+          type: {
+            type: 'custom',
+            name: 'FieldElement',
+            href: '/api/FieldElement',
+          },
         },
       ],
       return: 'void',
@@ -98,8 +98,8 @@ export const properties = {
   value: {
     type: {
       type: 'custom',
-      name: 'ModularValue',
-      href: '/api/ModularValue',
+      name: 'FieldValue',
+      href: '/api/FieldValue',
     },
   },
 };

packages/website/src/routes/api/ModularValue.mdx renamed to packages/website/src/routes/api/FieldValue.mdx

@@ -1,21 +1,21 @@
 import { A } from 'solid-start';
 import { Description, Property, Title } from '~/components';
 
-<Title>ModularValue</Title>
+<Title>FieldValue</Title>
 <Description>Type that defines the value of a field.</Description>
 
-# ModularValue
+# FieldValue
 
 Type that defines the value of a field.
 
 ## Definition
 
-- `ModularValue` <Property {...properties.ModularValue} />
+- `FieldValue` <Property {...properties.FieldValue} />
 
 > Make sure to use the correct input fields with the correct setting for the respective values. You can find instructions <A href="/guides/special-inputs">here</A>.
 
 export const properties = {
-  ModularValue: {
+  FieldValue: {
     type: [
       'string',
       'number',

packages/website/src/routes/api/ModularValues.mdx renamed to packages/website/src/routes/api/FieldValues.mdx

@@ -1,40 +1,40 @@
 import { A } from 'solid-start';
 import { Description, Property, Title } from '~/components';
 
-<Title>ModularValues</Title>
+<Title>FieldValues</Title>
 <Description>Type that defines the field values of a form.</Description>
 
-# ModularValues
+# FieldValues
 
 Type that defines the field values of a form.
 
 ## Definition
 
-- `ModularValues` <Property {...properties.ModularValues} />
+- `FieldValues` <Property {...properties.FieldValues} />
 
 > When defining your field values, make sure that the individual values are compatible with the respective input element. You can learn more about this <A href="/guides/special-inputs">here</A>.
 
 export const properties = {
-  ModularValues: {
+  FieldValues: {
     type: {
       type: 'object',
       entries: [
         {
           key: { name: 'name', type: 'string' },
           value: [
-            { type: 'custom', name: 'ModularValue', href: '/api/ModularValue' },
+            { type: 'custom', name: 'FieldValue', href: '/api/FieldValue' },
             {
               type: 'array',
               item: {
                 type: 'custom',
-                name: 'ModularValue',
-                href: '/api/ModularValue',
+                name: 'FieldValue',
+                href: '/api/FieldValue',
               },
             },
-            { type: 'custom', name: 'ModularValues' },
+            { type: 'custom', name: 'FieldValues' },
             {
               type: 'array',
-              item: { type: 'custom', name: 'ModularValues' },
+              item: { type: 'custom', name: 'FieldValues' },
             },
           ],
         },