From 896682ac6bf17e34d9fc7e75ba31c8fce5998ea8 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Wed, 26 Feb 2025 11:36:44 -0700
Subject: [PATCH] back button updates

---
 .../UsersBackButton.tsx                       |  4 +-
 .../components/ui/buttons/AppButtonSelect.tsx | 25 ------
 .../ui/buttons/BackButton.stories.tsx         | 68 ++++++++++++++++
 web/src/components/ui/buttons/BackButton.tsx  | 78 ++++++++++---------
 4 files changed, 109 insertions(+), 66 deletions(-)
 delete mode 100644 web/src/components/ui/buttons/AppButtonSelect.tsx
 create mode 100644 web/src/components/ui/buttons/BackButton.stories.tsx

diff --git a/web/src/app/app/settings/(permissions)/users/[userId]/_LayoutHeaderAndSegment/UsersBackButton.tsx b/web/src/app/app/settings/(permissions)/users/[userId]/_LayoutHeaderAndSegment/UsersBackButton.tsx
index 2b4ea18d3..db87a706e 100644
--- a/web/src/app/app/settings/(permissions)/users/[userId]/_LayoutHeaderAndSegment/UsersBackButton.tsx
+++ b/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 = ({}: {}) => {
-  //const previousRoute = useAppLayoutContextSelector((state) => state.previousRoute);
-
+export const UsersBackButton = () => {
   const {
     route,
     text
diff --git a/web/src/components/ui/buttons/AppButtonSelect.tsx b/web/src/components/ui/buttons/AppButtonSelect.tsx
deleted file mode 100644
index cf32b2573..000000000
--- a/web/src/components/ui/buttons/AppButtonSelect.tsx
+++ /dev/null
@@ -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>
-  );
-};
diff --git a/web/src/components/ui/buttons/BackButton.stories.tsx b/web/src/components/ui/buttons/BackButton.stories.tsx
new file mode 100644
index 000000000..40499860b
--- /dev/null
+++ b/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'
+  }
+};
diff --git a/web/src/components/ui/buttons/BackButton.tsx b/web/src/components/ui/buttons/BackButton.tsx
index 5e801a09f..85b2182ad 100644
--- a/web/src/components/ui/buttons/BackButton.tsx
+++ b/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,37 +11,21 @@ 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',
-    size = 'medium',
-    className = '',
-    style,
-    type = 'secondary',
-    linkUrl
-  }) => {
-    const { styles, cx } = useStyles();
-    const titleSize = size === 'large' ? 4 : 5;
-
+  ({ onClick, text = 'Back', className = '', style, linkUrl }) => {
     return (
       <LinkWrapper linkUrl={linkUrl}>
-        <div className={cx('group', styles.container, className)} style={style}>
-          <div className={cx('flex cursor-pointer items-center space-x-2.5')} onClick={onClick}>
-            <AppMaterialIcons
-              className={cx(styles.icon, 'group-hover:text-black dark:group-hover:text-white')}
-              icon="chevron_left"
-            />
-
-            <Title type={type} level={titleSize} clickable>
-              {text}
-            </Title>
-          </div>
-        </div>
+        <Button
+          prefix={<ChevronLeft />}
+          variant="link"
+          onClick={onClick}
+          className={className}
+          style={style}>
+          {text}
+        </Button>
       </LinkWrapper>
     );
   }
@@ -49,20 +33,38 @@ export const BackButton: React.FC<BackButtonProps> = React.memo(
 
 BackButton.displayName = 'BackButton';
 
-const LinkWrapper = ({ children, linkUrl }: { children: React.ReactNode; linkUrl?: string }) => {
+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};
-    }
-  `
-}));
+// 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
+    className={cx(styles.icon, 'group-hover:text-black dark:group-hover:text-white')}
+    icon="chevron_left"
+  /> 
+
+  <Title type={type} level={titleSize} clickable>
+    {text}
+  </Title>
+</div>
+</div> */
+}