feat: create button component (#24)

* Working button and its variants

* add storybook dependency for @csesoc/ui-components and add stories

* fix disabled ghost or text button

* added changelog

* use white dark-mode icon for storybook

* Edited config to use absolute imports with alias @

* yeet the data-testid

CHANGELOG.md

@@ -1,6 +1,11 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## 1.1.0 (2023-03-30)
+
+### Added
+- Implemented the button component
+
 ## 1.0.0 (2023-03-30)
 
 ### Added

apps/storybook/.storybook/main.ts

@@ -2,8 +2,19 @@ import { StorybookViteConfig } from "@storybook/builder-vite";
 import { mergeConfig } from "vite";
 
 export const config: StorybookViteConfig = {
-  async viteFinal(config, options) {
-    return mergeConfig(config, {});
+  async viteFinal(config) { 
+    const tsconfigPaths = require("vite-tsconfig-paths").default;
+    const path = require("path");
+    config.plugins = (config.plugins) ? config.plugins : [];
+    config.plugins.push(
+      tsconfigPaths({
+        projects: [
+          path.resolve(path.dirname(__dirname), "../../packages/components", "tsconfig.json"), 
+          path.resolve(path.dirname(__dirname), ".", "tsconfig.json")
+        ],
+      })
+    );
+    return config;
   },
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [

apps/storybook/package.json

@@ -17,7 +17,8 @@
   "dependencies": {
     "@stitches/react": "^1.2.8",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "@csesoc/ui-components": "workspace:*"
   },
   "devDependencies": {
     "@babel/core": "7.20.2",

apps/storybook/src/stories/examples/button/Button.stories.tsx

@@ -1,41 +1,74 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import React from 'react';
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import { Button, type ButtonProps } from "@csesoc/ui-components/src/button";
+import DarkModeIcon from "@/assets/icons/dark-mode-white.svg"
 
-import { Button } from './Button';
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Example/Button',
+const meta: Meta<typeof Button> = {
   component: Button,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} as ComponentMeta<typeof Button>;
+  title: "Example/Button",
+  argTypes: {},
+};
+export default meta;
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+type Story = StoryObj<typeof Button>;
 
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = (args: ButtonProps) => (
+  <Button {...args} />
+);
 Primary.args = {
-  primary: true,
-  label: 'Button',
+  label: "Button",
+  theme: "light",
+  type: "primary",
+  disabled: false,
+};
+
+export const WithIcon: Story = (args: ButtonProps) => (
+  <Button {...args} />
+);
+WithIcon.args = {
+  label: "dark icon",
+  theme: "light",
+  type: "primary",
+  disabled: false,
+  icon: <img src={DarkModeIcon} alt="dark mode icon" />
+};
+
+export const Disabled: Story = (args: ButtonProps) => (
+  <Button {...args} />
+);
+Disabled.args = {
+  label: "Disabled button",
+  theme: "light",
+  type: "primary",
+  disabled: true,
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const DisabledDarkMode: Story = (args: ButtonProps) => (
+  <Button {...args} />
+);
+DisabledDarkMode.args = {
+  label: "Dark button",
+  theme: "dark",
+  type: "primary",
+  disabled: true,
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Ghost: Story = (args: ButtonProps) => (
+  <Button {...args} />
+);
+Ghost.args = {
+  label: "Ghost button",
+  theme: "light",
+  type: "ghost",
+  disabled: false,
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Text: Story = (args: ButtonProps) => (
+  <Button {...args} />
+);
+Text.args = {
+  label: "Text button",
+  theme: "light",
+  type: "text",
+  disabled: false,
 };

apps/storybook/src/stories/examples/buttonOld/Button.stories.tsx

@@ -0,0 +1,41 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+
+import { Button } from './Button';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Example/ButtonOld',
+  component: Button,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof Button>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Primary.args = {
+  primary: true,
+  label: 'Button',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  label: 'Button',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  size: 'large',
+  label: 'Button',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small',
+  label: 'Button',
+};

apps/storybook/src/stories/examples/header/Header.tsx

@@ -2,7 +2,7 @@ import './header.css';
 
 import React from 'react';
 
-import { Button } from '../button/Button';
+import { Button } from '../buttonOld/Button';
 
 interface User {
   name: string;

apps/storybook/tsconfig.json

@@ -1,4 +1,11 @@
 {
   "extends": "tsconfig/base.tsconfig.json",
-  "include": ["src"]
+  "include": ["src"],
+  "compilerOptions": {
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+    }
+  },
 }