From df31b33877771b880b3ac98b5798afcdeb8760b1 Mon Sep 17 00:00:00 2001 From: vivian <86246033+aquivere@users.noreply.github.com> Date: Sat, 7 Oct 2023 19:51:21 +1100 Subject: [PATCH] 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 | 5 + apps/storybook/.storybook/main.ts | 15 +- apps/storybook/package.json | 3 +- .../src/assets/icons/dark-mode-white.svg | 3 + .../examples/button/Button.stories.tsx | 91 +- .../examples/buttonOld/Button.stories.tsx | 41 + .../examples/{button => buttonOld}/Button.tsx | 0 .../examples/{button => buttonOld}/button.css | 0 .../src/stories/examples/header/Header.tsx | 2 +- apps/storybook/tsconfig.json | 9 +- package-lock.json | 166 + .../components/src/button/Button.styled.tsx | 143 + packages/components/src/button/Button.tsx | 25 + .../components/src/button/Button.types.ts | 28 + packages/components/src/button/index.ts | 4 + packages/components/tsconfig.json | 9 +- packages/components/vite.config.ts | 3 + pnpm-lock.yaml | 4115 +++++++++-------- 18 files changed, 2610 insertions(+), 2052 deletions(-) create mode 100644 apps/storybook/src/assets/icons/dark-mode-white.svg create mode 100644 apps/storybook/src/stories/examples/buttonOld/Button.stories.tsx rename apps/storybook/src/stories/examples/{button => buttonOld}/Button.tsx (100%) rename apps/storybook/src/stories/examples/{button => buttonOld}/button.css (100%) create mode 100644 package-lock.json create mode 100644 packages/components/src/button/Button.styled.tsx create mode 100644 packages/components/src/button/Button.tsx create mode 100644 packages/components/src/button/Button.types.ts create mode 100644 packages/components/src/button/index.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 3f00be3..ddfe408 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/apps/storybook/.storybook/main.ts b/apps/storybook/.storybook/main.ts index 4b57848..a4a94f6 100644 --- a/apps/storybook/.storybook/main.ts +++ b/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: [ diff --git a/apps/storybook/package.json b/apps/storybook/package.json index 7478e29..f589ddd 100644 --- a/apps/storybook/package.json +++ b/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", diff --git a/apps/storybook/src/assets/icons/dark-mode-white.svg b/apps/storybook/src/assets/icons/dark-mode-white.svg new file mode 100644 index 0000000..c7a122a --- /dev/null +++ b/apps/storybook/src/assets/icons/dark-mode-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/storybook/src/stories/examples/button/Button.stories.tsx b/apps/storybook/src/stories/examples/button/Button.stories.tsx index aafe1bf..55d39b2 100644 --- a/apps/storybook/src/stories/examples/button/Button.stories.tsx +++ b/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 = { component: Button, - // More on argTypes: https://storybook.js.org/docs/react/api/argtypes - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as ComponentMeta; + 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 = (args) =>