From 81c21d8960422c492ebe7fd7f04c70aeaec7786f Mon Sep 17 00:00:00 2001
From: Joel Anton <joel@novu.co>
Date: Thu, 6 Jun 2024 20:46:55 +0200
Subject: [PATCH] feat: Add WIP button

---
 .../src/components/button/Button.stories.tsx  | 55 +++++++++++++++++++
 libs/novui/src/components/button/Button.tsx   | 25 +++++++++
 libs/novui/src/components/button/index.ts     |  1 +
 3 files changed, 81 insertions(+)
 create mode 100644 libs/novui/src/components/button/Button.stories.tsx
 create mode 100644 libs/novui/src/components/button/Button.tsx
 create mode 100644 libs/novui/src/components/button/index.ts

diff --git a/libs/novui/src/components/button/Button.stories.tsx b/libs/novui/src/components/button/Button.stories.tsx
new file mode 100644
index 00000000000..4ae5848d0e2
--- /dev/null
+++ b/libs/novui/src/components/button/Button.stories.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { Button } from './Button';
+import { Flex } from '../../../styled-system/jsx';
+import { Icon10K, IconInfo } from '../../icons';
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: {},
+} as Meta<typeof Button>;
+
+const Template: StoryFn<typeof Button> = ({ ...args }) => <Button {...args}>Click Me</Button>;
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  loading: true,
+};
+
+export const icon = () => (
+  <Flex>
+    <Button size="lg" Icon={Icon10K}>
+      Large
+    </Button>
+    <Button Icon={IconInfo}>Medium</Button>
+  </Flex>
+);
+
+export const filled = () => (
+  <Flex>
+    <Button size="lg">Large</Button>
+    <Button>Medium</Button>
+  </Flex>
+);
+
+export const outline = () => (
+  <Flex>
+    <Button size="lg" variant="outline">
+      Large
+    </Button>
+    <Button variant="outline">Medium</Button>
+  </Flex>
+);
+
+export const disabled = () => (
+  <Flex>
+    <Button disabled>Filled</Button>
+    <Button variant="outline" disabled>
+      Outline
+    </Button>
+  </Flex>
+);
diff --git a/libs/novui/src/components/button/Button.tsx b/libs/novui/src/components/button/Button.tsx
new file mode 100644
index 00000000000..d0c0e98c99d
--- /dev/null
+++ b/libs/novui/src/components/button/Button.tsx
@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { CorePropsWithChildren } from '../../types';
+import { Button as ExternalButton, ButtonProps } from '@mantine/core';
+import { IconType } from '../../icons';
+import { css } from '../../../styled-system/css';
+
+export interface IButtonProps
+  extends CorePropsWithChildren,
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    Pick<ButtonProps, 'size' | 'variant'> {
+  Icon?: IconType;
+}
+
+export const Button: FC<IButtonProps> = ({ children, Icon, size = 'md', variant = 'filled', ...buttonProps }) => {
+  return (
+    <ExternalButton
+      size={size}
+      leftSection={Icon ? <Icon title="button-icon" size="16" className={css({ color: 'legacy.white' })} /> : undefined}
+      variant={variant}
+      {...buttonProps}
+    >
+      {children}
+    </ExternalButton>
+  );
+};
diff --git a/libs/novui/src/components/button/index.ts b/libs/novui/src/components/button/index.ts
new file mode 100644
index 00000000000..8b166a86e4d
--- /dev/null
+++ b/libs/novui/src/components/button/index.ts
@@ -0,0 +1 @@
+export * from './Button';