feat(next-button): Added the Arrow icon component to NextButton a…

…nd `PreviousButton`

components/accordion/README.md

@@ -47,22 +47,21 @@ A package containing the Accordion component used by Storm Software
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 ## Table of Contents
 
-- [Accordion](#accordion)
-  - [Table of Contents](#table-of-contents)
-  - [Installing](#installing)
-  - [Reduced Package Size](#reduced-package-size)
-  - [Development](#development)
-    - [Building](#building)
-    - [Running unit tests](#running-unit-tests)
-    - [Linting](#linting)
-  - [Storm Workspaces](#storm-workspaces)
-  - [Roadmap](#roadmap)
-  - [Support](#support)
-  - [License](#license)
-    - [Documentation](#documentation)
-  - [Changelog](#changelog)
-  - [Contributing](#contributing)
-  - [Contributors](#contributors)
+- [Installing](#installing)
+- [Reduced Package Size](#reduced-package-size)
+- [Development](#development)
+  - [Building](#building)
+  - [Running unit tests](#running-unit-tests)
+  - [Linting](#linting)
+- [Storm Workspaces](#storm-workspaces)
+- [Roadmap](#roadmap)
+- [Support](#support)
+- [License](#license)
+  - [Documentation](#documentation)
+- [Changelog](#changelog)
+- [Contributing](#contributing)
+- [Contributors](#contributors)
+  - [💻 Visit stormsoftware.com to stay up to date with this developer](#-visit-stormsoftwarecom-to-stay-up-to-date-with-this-developer)
 
 <!-- END doctoc -->
 

components/button/src/Button.tsx

@@ -585,7 +585,7 @@ const ButtonIcon = View.styleable(
         : ColorThemeName.BASE;
 
     return (
-      <View ref={forwardedRef} zIndex="$md">
+      <View ref={forwardedRef} zIndex="$md" alignItems="center">
         <Theme name={theme} componentName="ButtonIcon">
           <ThemeableIcon
             {...props}

components/data-table/src/DataTable.tsx

@@ -19,13 +19,13 @@ import { Button } from "@cyclone-ui/button";
 import { CheckboxField } from "@cyclone-ui/checkbox-field";
 import { ColorThemeName } from "@cyclone-ui/colors";
 import { Form } from "@cyclone-ui/form";
-import { InputField } from "@cyclone-ui/input-field";
 import { Pagination } from "@cyclone-ui/pagination";
+import { SearchInputField } from "@cyclone-ui/search-input-field";
 import { SelectField } from "@cyclone-ui/select-field";
 import { Table, type TableProps } from "@cyclone-ui/table";
 import { Adapt } from "@tamagui/adapt";
 import { createStyledContext, View } from "@tamagui/core";
-import { ArrowDownAZ, ArrowUpZA, Filter, X } from "@tamagui/lucide-icons";
+import { ArrowDownAZ, ArrowUpZA, Filter } from "@tamagui/lucide-icons";
 import { Popover } from "@tamagui/popover";
 import { XStack, YStack } from "@tamagui/stacks";
 import { SizableText } from "@tamagui/text";
@@ -171,8 +171,8 @@ export function DataTable<TData extends RowData>({
               );
             })}
           </Table.Body>
-          <Table.Footer>
-            {pageCount > 1 && (
+          {pageCount > 1 && (
+            <Table.Footer>
               <DataTablePagination
                 setPageIndex={table.setPageIndex}
                 nextPage={table.nextPage}
@@ -183,8 +183,8 @@ export function DataTable<TData extends RowData>({
                 pageSize={pagination.pageSize}
                 pageCount={pageCount}
               />
-            )}
-          </Table.Footer>
+            </Table.Footer>
+          )}
         </Table>
       </YStack>
     </DataTableContext.Provider>
@@ -328,31 +328,25 @@ export const DataTableHeader = <TData extends RowData, TValue = any>(
           </Adapt>
 
           <Popover.Content
-          animation="normal"
+            animation="normal"
             borderWidth={1}
             borderColor="$borderColor"
-            elevate={true}
-            >
+            elevate={true}>
             <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
 
             <Form name="columnFilter" onSubmit={handleFilterSubmit}>
               <YStack gap="$4">
-                <InputField
-                  name="search"
+                <SearchInputField
+                  name="filter"
                   value={currentFilter}
                   onChange={handleFilterChanged}>
-                  <InputField.Control>
-                    <InputField.Control.TextBox>
-                      <InputField.Control.TextBox.Value placeholder="Search" />
-
-                      <InputField.Icon onPress={handleFilterClear}>
-                        <X />
-                      </InputField.Icon>
-                    </InputField.Control.TextBox>
-                  </InputField.Control>
-                </InputField>
-
-                <CheckboxField name="filter" value={true}>
+                  <SearchInputField.Label>Filter</SearchInputField.Label>
+                  <SearchInputField.Control>
+                    <SearchInputField.Control.TextBox placeholder="Filter..." />
+                  </SearchInputField.Control>
+                </SearchInputField>
+
+                <CheckboxField name="row1" value={true}>
                   <XStack gap="$2">
                     <CheckboxField.Control />
                     <CheckboxField.Label>Filter</CheckboxField.Label>
@@ -407,7 +401,9 @@ export function DataTablePagination<TData extends RowData>({
             { name: "10", value: 10 },
             { name: "25", value: 25 },
             { name: "50", value: 50 },
-            { name: "100", value: 100 }
+            { name: "100", value: 100 },
+            { name: "500", value: 500 },
+            { name: "1000", value: 1000 }
           ]}
           value={pageSize}
           defaultValue={10}>

components/icons/src/AccordionToggle.tsx

@@ -23,7 +23,7 @@ import { animate, useMotionValue, useMotionValueEvent } from "motion/react";
 import { memo, useEffect, useState } from "react";
 import { Path, Svg, SvgProps } from "react-native-svg";
 
-export const AccordionToggleContainer = styled(View, {
+const AccordionToggleContainer = styled(View, {
   name: "AccordionToggle",
 
   animation: "fast",

components/icons/src/AlertCircle.tsx

@@ -123,4 +123,4 @@ const Icon = ({ isComplete = true, size = 24, ...props }: AlertCircleProps) => {
 
 Icon.displayName = "AlertCircle";
 
-export const AlertCircle = memo<IconProps>(themed(Icon));
+export const AlertCircle = memo<AlertCircleProps>(themed(Icon));

components/icons/src/Arrow.stories.tsx

@@ -44,3 +44,31 @@ export const Base: Story = {
     size: "$6"
   }
 };
+
+export const Up: Story = {
+  args: {
+    size: "$6",
+    pointing: "up"
+  }
+};
+
+export const Right: Story = {
+  args: {
+    size: "$6",
+    pointing: "right"
+  }
+};
+
+export const Down: Story = {
+  args: {
+    size: "$6",
+    pointing: "down"
+  }
+};
+
+export const Left: Story = {
+  args: {
+    size: "$6",
+    pointing: "left"
+  }
+};

components/icons/src/Arrow.tsx

@@ -15,59 +15,134 @@
 
  -------------------------------------------------------------------*/
 
+import { GetProps, styled, View } from "@tamagui/core";
 import type { IconProps } from "@tamagui/helpers-icon";
 import { themed } from "@tamagui/helpers-icon";
 import { useCurrentColor } from "@tamagui/helpers-tamagui";
 import { animate, useMotionValue, useMotionValueEvent } from "motion/react";
 import { memo, useEffect, useState } from "react";
 import { Path, Svg, SvgProps } from "react-native-svg";
 
-export type ArrowProps = IconProps & {
-  isComplete?: boolean;
-};
+const ArrowContainer = styled(View, {
+  name: "Arrow",
+
+  variants: {
+    pointing: {
+      up: {
+        rotate: "-90deg"
+      },
+      right: {},
+      down: {
+        rotate: "90deg"
+      },
+      left: {
+        rotate: "180deg"
+      }
+    }
+  } as const,
+
+  defaultVariants: {
+    pointing: "right"
+  }
+});
 
-const Icon = ({ isComplete = true, size = 24, ...props }: ArrowProps) => {
+type ArrowContainerProps = GetProps<typeof ArrowContainer>;
+
+export type ArrowProps = IconProps &
+  Pick<ArrowContainerProps, "pointing"> & {
+    isComplete?: boolean;
+  };
+
+const Icon = ({
+  isComplete = true,
+  size = 24,
+  pointing = "right",
+  ...props
+}: ArrowProps) => {
   const color = useCurrentColor((props.color || "$color") as any);
 
   const motionPosition = useMotionValue(1);
-  const playback = animate(motionPosition, 15, {
+  const playback = animate(motionPosition, 24, {
+    type: "spring",
+    duration: 0.5,
+    bounce: 0
+  });
+
+  const [position, setPosition] = useState(1);
+  useMotionValueEvent(motionPosition, "change", latest => {
+    setPosition(latest);
+  });
+
+  const motionReverse = useMotionValue(24);
+  const playbackReverse = animate(motionReverse, 1, {
     type: "spring",
     duration: 0.5,
     bounce: 0
   });
 
+  const [reverse, setReverse] = useState(24);
+  useMotionValueEvent(motionReverse, "change", latest => {
+    setReverse(latest);
+  });
+
   useEffect(() => {
     if (isComplete) {
       playback.play();
+
+      playbackReverse.stop();
+      motionReverse.set(24);
     } else {
+      playbackReverse.play();
+
       playback.stop();
       motionPosition.set(1);
     }
-  }, [playback, isComplete]);
-
-  const [position, setPosition] = useState(1);
-  useMotionValueEvent(motionPosition, "change", latest => {
-    setPosition(latest);
-  });
+  }, [playback, isComplete, playbackReverse, motionPosition, motionReverse]);
 
   return (
-    <Svg
-      width={size}
-      height={size}
-      viewBox="0 0 22 24"
-      fill="none"
-      stroke={color}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...(props as SvgProps)}>
-      {isComplete && (
-        <Path d={`M6 12h${position}`} stroke={color} strokeWidth="1.5" />
-      )}
-      <Path stroke={color} d={`m${position} 5 7 7-7 7`} strokeWidth="1.5" />
-    </Svg>
+    <ArrowContainer
+      pointing={pointing}
+      maxWidth={size}
+      maxHeight={(size as number) * 0.6}>
+      <Svg
+        width={size}
+        height={(size as number) * 0.6}
+        viewBox="0 0 33 16"
+        fill="none"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...(props as SvgProps)}>
+        {isComplete && (
+          <>
+            <Path d={`M7 8h${position}`} stroke={color} strokeWidth="3" />
+            <Path stroke={color} d={`m${position} 1 7 7-7 7`} strokeWidth="3" />
+          </>
+        )}
+        {!isComplete && (
+          <>
+            <Path d={`M7 8h${reverse}`} stroke={color} strokeWidth="3" />
+            <Path stroke={color} d={`m${reverse} 1 7 7-7 7`} strokeWidth="3" />
+          </>
+        )}
+      </Svg>
+    </ArrowContainer>
   );
 };
 
 Icon.displayName = "Arrow";
 
-export const Arrow = memo<IconProps>(themed(Icon));
+export const Arrow = memo<ArrowProps>(themed(Icon));
+
+export const RightArrow = (props: ArrowProps) => (
+  <Arrow pointing="right" {...props} />
+);
+export const LeftArrow = (props: ArrowProps) => (
+  <Arrow pointing="left" {...props} />
+);
+export const UpArrow = (props: ArrowProps) => (
+  <Arrow pointing="up" {...props} />
+);
+export const DownArrow = (props: ArrowProps) => (
+  <Arrow pointing="down" {...props} />
+);

components/icons/src/CheckCircle.tsx

@@ -139,4 +139,4 @@ const Icon = ({ isComplete = true, size = 24, ...props }: CheckCircleProps) => {
 
 Icon.displayName = "CheckCircle";
 
-export const CheckCircle = memo<IconProps>(themed(Icon));
+export const CheckCircle = memo<CheckCircleProps>(themed(Icon));

components/icons/src/InfoCircle.tsx

@@ -30,4 +30,4 @@ const Icon = ({ ...props }: InfoCircleProps) => {
 
 Icon.displayName = "InfoCircle";
 
-export const InfoCircle = memo<IconProps>(themed(Icon));
+export const InfoCircle = memo<InfoCircleProps>(themed(Icon));

components/next-button/package.json

@@ -32,8 +32,8 @@
     "react-native": "0.74.1"
   },
   "dependencies": {
+    "@storm-stack/hooks": "latest",
     "@tamagui/core": "^1.116.15",
-    "@tamagui/lucide-icons": "^1.116.15",
     "@tamagui/stacks": "^1.116.15"
   },
   "devDependencies": {