back button updates

web/src/app/app/settings/(permissions)/users/[userId]/_LayoutHeaderAndSegment/UsersBackButton.tsx

@@ -4,9 +4,7 @@ import { BackButton } from '@/components/ui';
 import { createBusterRoute, BusterRoutes } from '@/routes/busterRoutes';
 import { useMemo } from 'react';
 
-export const UsersBackButton = ({}: {}) => {
+export const UsersBackButton = () => {
-  //const previousRoute = useAppLayoutContextSelector((state) => state.previousRoute);
-
   const {
     route,
     text

web/src/components/ui/buttons/AppButtonSelect.tsx

@@ -1,25 +0,0 @@
-import { Button, ButtonProps } from 'antd';
-import { createStyles } from 'antd-style';
-import React, { PropsWithChildren } from 'react';
-
-const useStyles = createStyles(({ css, token }) => ({
-  selected: {
-    background: token.colorBgContainerDisabled
-  }
-}));
-
-export const AppButtonSelect: React.FC<
-  PropsWithChildren<
-    ButtonProps & {
-      selected?: boolean;
-    }
-  >
-> = ({ children, selected, ...props }) => {
-  const { cx, styles } = useStyles();
-
-  return (
-    <Button {...props} className={cx(props.className, selected && styles.selected)}>
-      {children}
-    </Button>
-  );
-};

web/src/components/ui/buttons/BackButton.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BackButton } from './BackButton';
+
+const meta: Meta<typeof BackButton> = {
+  title: 'Base/Buttons/BackButton',
+  component: BackButton,
+  tags: ['autodocs'],
+  argTypes: {
+    text: {
+      control: 'text',
+      description: 'The text to display in the button'
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes to apply'
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Function to call when the button is clicked'
+    },
+    linkUrl: {
+      control: 'text',
+      description: 'URL to navigate to when clicked (uses Next.js Link)'
+    },
+    style: {
+      control: 'object',
+      description: 'Additional inline styles to apply'
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof BackButton>;
+
+export const Default: Story = {
+  args: {
+    text: 'Back'
+  }
+};
+
+export const CustomText: Story = {
+  args: {
+    text: 'Go Back'
+  }
+};
+
+export const WithLink: Story = {
+  args: {
+    text: 'Back to Home',
+    linkUrl: '/'
+  }
+};
+
+export const WithCustomStyle: Story = {
+  args: {
+    text: 'Back',
+    style: {
+      color: 'blue'
+    }
+  }
+};
+
+export const WithCustomClass: Story = {
+  args: {
+    text: 'Back',
+    className: 'font-bold'
+  }
+};

web/src/components/ui/buttons/BackButton.tsx

@@ -1,9 +1,9 @@
 'use client';
 import React from 'react';
-import { AppMaterialIcons } from '../icons';
-import { createStyles } from 'antd-style';
 import { Title } from '../text';
 import Link from 'next/link';
+import { ChevronLeft } from '../icons';
+import { Button } from './Button';
 
 interface BackButtonProps {
   onClick?: () => void;
@@ -11,28 +11,53 @@ interface BackButtonProps {
   size?: 'medium' | 'large';
   className?: string;
   style?: React.CSSProperties;
-  type?: 'default' | 'secondary' | 'tertiary';
   linkUrl?: string;
 }
 
 export const BackButton: React.FC<BackButtonProps> = React.memo(
-  ({
+  ({ onClick, text = 'Back', className = '', style, linkUrl }) => {
-    onClick,
-    text = 'Back',
-    size = 'medium',
-    className = '',
-    style,
-    type = 'secondary',
-    linkUrl
-  }) => {
-    const { styles, cx } = useStyles();
-    const titleSize = size === 'large' ? 4 : 5;
-
     return (
       <LinkWrapper linkUrl={linkUrl}>
-        <div className={cx('group', styles.container, className)} style={style}>
+        <Button
+          prefix={<ChevronLeft />}
+          variant="link"
+          onClick={onClick}
+          className={className}
+          style={style}>
+          {text}
+        </Button>
+      </LinkWrapper>
+    );
+  }
+);
+
+BackButton.displayName = 'BackButton';
+
+const LinkWrapper: React.FC<{ children: React.ReactNode; linkUrl?: string }> = ({
+  children,
+  linkUrl
+}) => {
+  if (linkUrl) {
+    return <Link href={linkUrl}>{children}</Link>;
+  }
+  return <>{children}</>;
+};
+
+// const useStyles = createStyles(({ css, token }) => ({
+//   icon: {
+//     color: token.colorIcon
+//   },
+//   container: css`
+//     &:hover {
+//       color: ${token.colorText};
+//     }
+//   `
+// }));
+
+{
+  /* <div className={cx('group', styles.container, className)} style={style}>
 <div className={cx('flex cursor-pointer items-center space-x-2.5')} onClick={onClick}>
-            <AppMaterialIcons
+  {/* <AppMaterialIcons
     className={cx(styles.icon, 'group-hover:text-black dark:group-hover:text-white')}
     icon="chevron_left"
   /> 
@@ -41,28 +66,5 @@ export const BackButton: React.FC<BackButtonProps> = React.memo(
     {text}
   </Title>
 </div>
-        </div>
+</div> */
-      </LinkWrapper>
-    );
 }
-);
-
-BackButton.displayName = 'BackButton';
-
-const LinkWrapper = ({ children, linkUrl }: { children: React.ReactNode; linkUrl?: string }) => {
-  if (linkUrl) {
-    return <Link href={linkUrl}>{children}</Link>;
-  }
-  return <>{children}</>;
-};
-
-const useStyles = createStyles(({ css, token }) => ({
-  icon: {
-    color: token.colorIcon
-  },
-  container: css`
-    &:hover {
-      color: ${token.colorText};
-    }
-  `
-}));