feat(form-state): Updated the base field packages to no longer includ…

…e `form-state` code
storm-software · Oct 24, 2024 · ed41708 · ed41708
1 parent 0564725
commit ed41708
Show file tree

Hide file tree

Showing 42 changed files with 1,300 additions and 1,268 deletions.
diff --git a/components/button/src/Button.tsx b/components/button/src/Button.tsx
@@ -1,3 +1,20 @@
+/*-------------------------------------------------------------------
+
+                   ⚡ Storm Software - Cyclone UI
+
+ This code was released as part of the Cyclone UI project. Cyclone UI
+ is maintained by Storm Software under the Apache-2.0 License, and is
+ free for commercial and private use. For more information, please visit
+ our licensing page.
+
+ Website:         https://stormsoftware.com
+ Repository:      https://github.com/storm-software/cyclone-ui
+ Documentation:   https://stormsoftware.com/projects/cyclone-ui/docs
+ Contact:         https://stormsoftware.com/contact
+ License:         https://stormsoftware.com/projects/cyclone-ui/license
+
+ -------------------------------------------------------------------*/
+
 import { ThemedIcon } from "@cyclone-ui/themeable-icon";
 import type { ColorTokens, FontSizeTokens } from "@tamagui/core";
 import { View } from "@tamagui/core";
@@ -351,7 +368,7 @@ const ButtonFrame = styled(View, {
   } as const,
 
   defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1" ? true : false,
+    unstyled: process.env.TAMAGUI_HEADLESS === "1",
     disabled: false,
     outlined: false,
     circular: false
@@ -432,7 +449,7 @@ const ButtonText = styled(SizableText, {
   } as const,
 
   defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1" ? true : false,
+    unstyled: process.env.TAMAGUI_HEADLESS === "1",
     disabled: false
   }
 });
@@ -452,15 +469,14 @@ const ButtonIcon = ButtonIconFrame.styleable(
       <ButtonIconFrame
         ref={forwardedRef}
         color={
-          color
-            ? color
-            : variant === "secondary"
-              ? "$primary"
-              : variant === "glass" || variant === "ghost"
-                ? "$fg"
-                : variant === "link"
-                  ? "$borderColor"
-                  : "$color"
+          color ||
+          (variant === "secondary"
+            ? "$primary"
+            : variant === "glass" || variant === "ghost"
+              ? "$fg"
+              : variant === "link"
+                ? "$borderColor"
+                : "$color")
         }
         size={size as FontSizeTokens}
         {...props}>
@@ -600,7 +616,7 @@ const ButtonContainerImpl = ButtonFrame.styleable<ButtonProps>(
           <ButtonFrame
             ref={forwardedRef}
             {...rest}
-            onPress={onPress ? onPress : onClick}
+            onPress={onPress || onClick}
             circular={circular}
             variant={variant}
             disabled={disabled}

diff --git a/components/card/src/Card.tsx b/components/card/src/Card.tsx
@@ -1,5 +1,22 @@
-import { Link } from "@cyclone-ui/link";
+/*-------------------------------------------------------------------
+
+                   ⚡ Storm Software - Cyclone UI
+
+ This code was released as part of the Cyclone UI project. Cyclone UI
+ is maintained by Storm Software under the Apache-2.0 License, and is
+ free for commercial and private use. For more information, please visit
+ our licensing page.
+
+ Website:         https://stormsoftware.com
+ Repository:      https://github.com/storm-software/cyclone-ui
+ Documentation:   https://stormsoftware.com/projects/cyclone-ui/docs
+ Contact:         https://stormsoftware.com/contact
+ License:         https://stormsoftware.com/projects/cyclone-ui/license
+
+ -------------------------------------------------------------------*/
+
 import { ColorRole } from "@cyclone-ui/colors";
+import { Link } from "@cyclone-ui/link";
 import {
   createStyledContext,
   getVariable,
@@ -80,7 +97,7 @@ export const CardFrame = styled(ThemeableStack, {
   } as const,
 
   defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1" ? true : false
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
   }
 });
 
@@ -181,7 +198,7 @@ export const CardHeader = styled(ThemeableStack, {
   } as const,
 
   defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1" ? true : false
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
   }
 });
 
@@ -261,7 +278,7 @@ export const CardTitleSection = styled(ThemeableStack, {
   } as const,
 
   defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1" ? true : false
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
   }
 });
 

diff --git a/components/checkbox-field/package.json b/components/checkbox-field/package.json
@@ -32,11 +32,10 @@
     "react-native": "0.74.1"
   },
   "dependencies": {
+    "@storm-stack/types": "latest",
+    "@tamagui/checkbox-headless": "^1.110.5",
     "@tamagui/core": "^1.110.5",
-    "@tamagui/label": "^1.110.5",
-    "@tamagui/stacks": "^1.110.5",
-    "@tamagui/web": "^1.110.5",
-    "react-native-svg": "^15.2.0"
+    "@tamagui/stacks": "^1.110.5"
   },
   "devDependencies": {
     "react": "18.3.1",

diff --git a/components/checkbox-field/src/CheckboxField.tsx b/components/checkbox-field/src/CheckboxField.tsx
@@ -16,11 +16,12 @@
  -------------------------------------------------------------------*/
 
 import { Checkbox } from "@cyclone-ui/checkbox";
-import { Field, FieldThemeIcon } from "@cyclone-ui/field";
-import { useFieldStore } from "@cyclone-ui/form-state";
+import { Field } from "@cyclone-ui/field";
+import { useFieldActions, useFieldStore } from "@cyclone-ui/form-state";
+import { isSet } from "@storm-stack/types/type-checks/is-set";
 import { withStaticProperties } from "@tamagui/core";
-import { XStack, XStackProps } from "@tamagui/stacks";
-import { forwardRef } from "react";
+import { XStack } from "@tamagui/stacks";
+import { useCallback } from "react";
 
 const CheckboxFieldGroup = Field.styleable((props, forwardedRef) => {
   const { children, ...rest } = props;
@@ -32,38 +33,58 @@ const CheckboxFieldGroup = Field.styleable((props, forwardedRef) => {
   );
 });
 
-const InnerCheckboxFieldLabel = forwardRef<typeof XStack, XStackProps>(
-  (props, forwardedRef) => {
-    const { children, ...rest } = props;
-
+const CheckboxFieldLabel = Field.Label.styleable(
+  ({ children, ...props }, forwardedRef) => {
     const store = useFieldStore();
+    const disabled = store.get.disabled();
 
     return (
-      <XStack
-        ref={forwardedRef}
-        gap="$0.5"
-        alignContent="center"
-        verticalAlign="center"
-        {...rest}>
-        {children}
-        {store.get.disabled() && <FieldThemeIcon disabled={true} />}
-      </XStack>
+      <Field.Label ref={forwardedRef} paddingBottom={0} {...props}>
+        <XStack gap="$0.5" alignContent="center" verticalAlign="center">
+          {children}
+          {disabled && <Field.ThemeIcon disabled={true} />}
+        </XStack>
+      </Field.Label>
     );
   }
 );
 
-export const CheckboxFieldLabel = Field.Label.styled((props, forwardedRef) => {
-  const { children, ...rest } = props;
+const CheckboxFieldControl = Checkbox.styleable(
+  ({ children, ...props }, forwardedRef) => {
+    const { focus, change, blur } = useFieldActions<boolean>();
+    const handleCheckedChange = useCallback(
+      async (checked: boolean) => {
+        await change(checked);
+        await blur();
+      },
+      [blur, change]
+    );
 
-  return (
-    <Field.Label ref={forwardedRef} paddingBottom={0} {...rest}>
-      <InnerCheckboxFieldLabel>{children}</InnerCheckboxFieldLabel>
-    </Field.Label>
-  );
-});
+    const store = useFieldStore<boolean>();
+    const disabled = store.get.disabled();
+    const focused = store.get.focused();
+    const value = store.get.value();
+    const initialValue = store.get.initialValue();
+
+    return (
+      <Checkbox
+        ref={forwardedRef}
+        {...props}
+        onFocus={focus}
+        onBlur={blur}
+        onCheckedChange={handleCheckedChange}
+        checked={isSet(value) ? value : "indeterminate"}
+        defaultChecked={isSet(initialValue) ? initialValue : "indeterminate"}
+        focused={focused}
+        disabled={disabled}>
+        {children}
+      </Checkbox>
+    );
+  }
+);
 
 export const CheckboxField = withStaticProperties(CheckboxFieldGroup, {
   Label: CheckboxFieldLabel,
-  Control: Checkbox,
+  Control: CheckboxFieldControl,
   Details: Field.Details
 });
diff --git a/components/checkbox/package.json b/components/checkbox/package.json
@@ -27,24 +27,13 @@
     "react-native": "0.74.1"
   },
   "dependencies": {
-    "@tamagui/animate-presence": "^1.110.5",
     "@tamagui/checkbox": "^1.110.5",
-    "@tamagui/compose-refs": "^1.110.5",
+    "@tamagui/checkbox-headless": "^1.110.5",
     "@tamagui/constants": "^1.110.5",
     "@tamagui/core": "^1.110.5",
-    "@tamagui/focusable": "^1.110.5",
-    "@tamagui/font-size": "^1.110.5",
-    "@tamagui/get-button-sized": "^1.110.5",
-    "@tamagui/get-font-sized": "^1.110.5",
-    "@tamagui/get-token": "^1.110.5",
     "@tamagui/group": "^1.110.5",
-    "@tamagui/helpers": "^1.110.5",
-    "@tamagui/helpers-tamagui": "^1.110.5",
-    "@tamagui/label": "^1.110.5",
     "@tamagui/lucide-icons": "^1.110.5",
     "@tamagui/stacks": "^1.110.5",
-    "@tamagui/text": "^1.110.5",
-    "@tamagui/web": "^1.110.5",
     "react-native-svg": "^15.2.0"
   },
   "devDependencies": {

diff --git a/components/checkbox/src/Checkbox.stories.tsx b/components/checkbox/src/Checkbox.stories.tsx
@@ -26,8 +26,8 @@ const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
   tags: ["autodocs"],
   render: (props: any) => (
-    <Form name="formName" defaultValues={{ inputName: false }}>
-      <Field name="inputName" {...props}>
+    <Form name="formName" defaultValues={{ checkboxName: false }}>
+      <Field name="checkboxName" {...props}>
         <XStack gap="$3" alignContent="center" verticalAlign="center">
           <Checkbox />
           <Field.Label paddingBottom={0}>