Deploy version 0.3.1

README.md

@@ -1 +1,21 @@
 # GGF-Design-System
+
+![GGF-Design-System](https://github.com/sprint-team3/GGF-Design-System/assets/43297823/8d9b448c-06f6-4990-a45c-8102074c827e)
+
+GGF UI is an open-source React component library. It is designed for easy accessibility, allowing anyone to use its components effortlessly. Comprised of components with a dark mode-friendly default configuration, it promotes user-friendly design practices.
+
+# Installation
+
+```bash
+npm install ggf-ui@latest
+```
+
+# Documentation
+
+You can find usage instructions for the provided components at the GitHub link below
+
+[https://github.com/sprint-team3/GGF-Design-System/tree/dev/docs](https://github.com/sprint-team3/GGF-Design-System/tree/dev/docs)
+
+# License
+
+This project is licensed under the terms of the MIT license

docs/Alarm.mdx

@@ -0,0 +1,28 @@
+## Title
+
+Alarm
+
+## Description
+
+An interactive indicator that visually represents alarm status and allows users to toggle alarm activation through user interaction.
+
+## Anatomy
+
+- **`isAlarmExisted`** : Boolean flag to indicate whether an alarm is currently set.
+- **`isActivated`** : Boolean flag to indicate whether the alarm is active and alerting.
+- **`onClick`** : Function to handle click events on the alarm, typically used to toggle the alarm state.
+- **`alarmRef`** (optional): React ref object attached to the button element for direct DOM manipulation or access.
+
+## Usage
+
+```tsx
+import { Alarm } from 'ggf-ui';
+```
+
+```tsx
+<Alarm isAlarmExisted={true} isActivated={true} onClick={onClick} alarmRef={alarmRef} />
+```
+
+## Storybook
+
+[https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/alarm-alarm--example&globals=backgrounds.value:!hex(333333)](<https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/alarm-alarm--example&globals=backgrounds.value:!hex(333333)>)

docs/AlarmCard.mdx

@@ -0,0 +1,28 @@
+## Title
+
+AlarmCard
+
+## Description
+
+A component that displays an alarm's details and provides an interactive delete button with hover effects.
+
+## Anatomy
+
+- **`id`** : A unique identifier for the alarm card, used to handle specific actions.
+- **`content`** : Text content displayed on the card, representing the alarm's description or details.
+- **`createdAt`** : String indicating the alarm's creation time, displayed at the card's bottom.
+- **`onClick`** : Function triggered when the delete button is clicked, taking the alarm's **`id`** as an argument to identify which alarm to delete.
+
+## Usage
+
+```tsx
+import { AlarmCard } from 'ggf-ui';
+```
+
+```tsx
+<AlarmCard id={1} content='Alarm content here' createdAt='2024-04-24 10:00 AM' onClick={onClick} />
+```
+
+## Storybook
+
+[https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/cards-alarmcard--example&globals=backgrounds.value:!hex(333333)](<https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/cards-alarmcard--example&globals=backgrounds.value:!hex(333333)>)

docs/AlarmList.mdx

@@ -0,0 +1,46 @@
+## Title
+
+AlarmList
+
+## Description
+
+A component for displaying a list of alarm notifications, including options to delete individual alarms or all alarms.
+
+## Anatomy
+
+- **`alarmText`**: Text indicating the purpose or category of the alarms.
+- **`deleteAllText`**: Text displayed on the button to delete all alarms.
+- **`notifications`**: Array of objects representing individual alarm notifications, each containing:
+  - **`id`**: Unique identifier for the alarm.
+  - **`content`**: Description or details of the alarm.
+  - **`createdAt`**: Time stamp of when the alarm was created.
+- **`totalCount`**: Total count of alarms in the list.
+- **`handleDelete`**: Function triggered when an alarm is deleted, taking the alarm's ID as an argument.
+- **`handleDeleteAll`**: Function triggered when the button to delete all alarms is clicked.
+- **`emptyAlarmText`**: Text displayed when there are no alarms to show.
+- **`alarmListRef`** (optional): React ref object attached to the **`<div>`** element wrapping the alarm list.
+
+## Usage
+
+```tsx
+import { AlarmList } from 'ggf-ui';
+```
+
+```tsx
+<AlarmList
+  alarmText='Current Alarms:'
+  deleteAllText='Delete All'
+  notifications={[
+    { id: 1, content: 'Alarm 1', createdAt: '2024-04-24 10:00 AM' },
+    { id: 2, content: 'Alarm 2', createdAt: '2024-04-25 11:00 AM' },
+  ]}
+  totalCount={2}
+  handleDelete={handleDelete}
+  handleDeleteAll={handleDeleteAll}
+  emptyAlarmText='No alarms to display'
+/>
+```
+
+## Storybook
+
+[https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/alarmlist-alarmlist--example&globals=backgrounds.value:!hex(333333)](<https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/alarmlist-alarmlist--example&globals=backgrounds.value:!hex(333333)>)

docs/Avatar.mdx

@@ -0,0 +1,27 @@
+## Title
+
+Avatar
+
+## Description
+
+A component for displaying user avatars with optional activation.
+
+## Anatomy
+
+- **`profileImageUrl`**: URL of the user's profile image.
+- **`size`** (optional): Sets the size of the avatar. Can be `'small' | 'medium' | 'large'` Defaults to 'medium'.
+- **`isActivated`** (optional): Boolean indicating whether the avatar is activated.
+
+## Usage
+
+```tsx
+import { Avatar } from 'ggf-ui';
+```
+
+```tsx
+<Avatar profileImageUrl='url/to/profile/image.jpg' size='small' isActivated={true} />
+```
+
+## Storybook
+
+[https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/avatar-avatar--example&globals=backgrounds.value:!hex(333333)](<https://661f5982ddc662c8c9a12d6b-fqsleqszgq.chromatic.com/?path=/story/avatar-avatar--example&globals=backgrounds.value:!hex(333333)>)

docs/Badge.mdx

@@ -0,0 +1,26 @@
+## Title
+
+Badge
+
+## Description
+
+Displays a Badge with various visual styles to indicate different types of information or statuses.
+
+## Anatomy
+
+- **`children`** : Content to be displayed within the badge.
+- **`variant`**: Optional string prop specifying the style variant of the badge. It can be one of the following values: `'default' | 'secondary' | 'tertiary' | 'destructive' | 'outline'`. If not provided, the default value is 'default'.
+
+## Usage
+
+```tsx
+import { Badge } from 'ggf-ui';
+```
+
+```tsx
+<Badge variant='primary'>Badge</Badge>
+```
+
+## Storybook
+
+[https://661f5982ddc662c8c9a12d6b-jjaouzkrop.chromatic.com/?path=/story/badge-badge--example&globals=backgrounds.value:!hex(333333)](<https://661f5982ddc662c8c9a12d6b-jjaouzkrop.chromatic.com/?path=/story/badge-badge--example&globals=backgrounds.value:!hex(333333)>)

docs/BaseButton.mdx

@@ -0,0 +1,40 @@
+## Title
+
+BaseButton
+
+## Description
+
+The Base Button component serves as a foundational button element that can be customized with various styles and functionalities. It allows users to create buttons with different visual appearances, sizes, colors, and behaviors.
+
+## Anatomy
+
+- **`children`**: The text content to be displayed within the button.
+- **`isDisabled`** (optional): A boolean indicating whether the button should be disabled.
+- **`onClick`** (optional): A function to be executed when the button is clicked.
+- **`variant`** (optional): Specifies the visual style of the button. It can be `'fill' | 'ghost' | 'outline'` Defaults to 'fill'.
+- **`size`** (optional): Sets the size of the button. Can be `'small' | 'medium' | 'large'` Defaults to 'medium'.
+- **`color`** (optional): Specifies the color theme of the button. Options include `'yellow' | 'purple' | 'red'` Defaults to 'yellow'.
+- **`type`** (optional): Specifies the type of button. Can be `'button' | 'submit'` Defaults to 'button'.
+- **`isQuantico`** (optional): A boolean indicating whether the button should have a Quantico-specific style.
+
+## Usage
+
+```tsx
+import { BaseButton } from 'ggf-ui';
+```
+
+```tsx
+<BaseButton onClick={onClick} variant='ghost' size='small' color='red'>
+  Click Me
+</BaseButton>
+```
+
+```tsx
+<BaseButton onClick={onClick} variant='outline' size='large' color='purple' isDisabled={true}>
+  Disabled Button
+</BaseButton>
+```
+
+## Storybook
+
+[https://661f5982ddc662c8c9a12d6b-nqfkxankpk.chromatic.com/?path=/story/buttons-basebutton--example&globals=backgrounds.value:!hex(333333)](<https://661f5982ddc662c8c9a12d6b-nqfkxankpk.chromatic.com/?path=/story/buttons-basebutton--example&globals=backgrounds.value:!hex(333333)>)

docs/Card.mdx

@@ -0,0 +1,39 @@
+## Title
+
+Card
+
+## Description
+
+Displays structured content including a title, rating, review count, creation date, and a tag, suitable for presenting various types of information or items
+
+## Anatomy
+
+- **`path`** : String representing the URL path to navigate to when the card is clicked.
+- **`title`** : String representing the title of the card.
+- **`rating`** : Number representing the rating of the card, usually ranging from 0 to 5.
+- **`reviewCount`** : Number representing the count of reviews for the card.
+- **`createdAt`** : String or number representing the creation date of the card.
+- **`tagContent`** : String or number representing the content of the tag displayed on the card.
+- **`tagVariant`** : Optional string prop specifying the variant of the tag displayed on the card. It can be one of the following values: `'default' | 'primary' | 'secondary' | 'tertiary'`. If not provided, the default value is 'default'.
+
+## Usage
+
+```tsx
+import { Card } from 'ggf-ui';
+```
+
+```tsx
+<Card
+  path='/'
+  title='title'
+  rating={4}
+  reviewCount={reviewCount}
+  createdAt={createdAt}
+  tagContent='tag'
+  tagVariant='primary'
+/>
+```
+
+## Storybook
+
+[https://661f5982ddc662c8c9a12d6b-nqfkxankpk.chromatic.com/?path=/story/cards-card--example&globals=backgrounds.value:!hex(333333)](<https://661f5982ddc662c8c9a12d6b-nqfkxankpk.chromatic.com/?path=/story/cards-card--example&globals=backgrounds.value:!hex(333333)>)

docs/CardButton.mdx

@@ -0,0 +1,29 @@
+## Title
+
+CardButton
+
+## Description
+
+The Card Button component is designed to represent a button within a card-like element. It enables users to perform actions associated with the card, such as viewing details or navigating to another page. The button can be customized with different colors.
+
+## Anatomy
+
+- **`children`**: The text content to be displayed within the button.
+- **`onClick`** (optional): A function to be executed when the button is clicked.
+- **`color`** (optional): Specifies the color theme of the button. Options include `'yellow' | 'red' | 'gray'` Defaults to 'yellow'.
+
+## Usage
+
+```tsx
+import { CardButton } from 'ggf-ui';
+```
+
+```tsx
+<CardButton onClick={onClick} color='red'>
+  View Details
+</CardButton>
+```
+
+## Storybook
+
+[https://661f5982ddc662c8c9a12d6b-nqfkxankpk.chromatic.com/?path=/story/buttons-cardbutton--example&globals=backgrounds.value:!hex(333333)](<https://661f5982ddc662c8c9a12d6b-nqfkxankpk.chromatic.com/?path=/story/buttons-cardbutton--example&globals=backgrounds.value:!hex(333333)>)

docs/CardSkeleton.mdx

@@ -0,0 +1,21 @@
+## Title
+
+CardSkeleton
+
+## Description
+
+The CardSkeleton component represents a skeleton layout for a card, typically used to indicate loading or placeholder content before the actual content is loaded.
+
+## Usage
+
+```tsx
+import { CardSkeleton } from 'ggf-ui';
+```
+
+```tsx
+<CardSkeleton />
+```
+
+## Storybook
+
+[https://661f5982ddc662c8c9a12d6b-nqfkxankpk.chromatic.com/?path=/story/cards-cardskeleton--example&globals=backgrounds.value:!hex(333333)](<https://661f5982ddc662c8c9a12d6b-nqfkxankpk.chromatic.com/?path=/story/cards-cardskeleton--example&globals=backgrounds.value:!hex(333333)>)

docs/CommonModal.mdx

@@ -0,0 +1,28 @@
+## Title
+
+CommonModal
+
+## Description
+
+The CommonModal component represents a modal dialog used for displaying content with a title and customizable content area.
+
+## Anatomy
+
+- **`openModal`** : Boolean prop indicating whether the modal is open or closed.
+- **`title`** : String prop representing the title of the modal.
+- **`renderContent`** : ReactNode prop representing the content to be rendered within the modal.
+- **`onClose`** : Function prop to handle the closing action of the modal.
+
+## Usage
+
+```tsx
+import { CommonModal } from 'ggf-ui';
+```
+
+```tsx
+<CommonModal openModal={ture} title='title' renderContent={<renderContent />} onClose={onClose} />
+```
+
+## Storybook
+
+[https://661f5982ddc662c8c9a12d6b-nqfkxankpk.chromatic.com/?path=/story/modals-commonmodal--example&globals=backgrounds.value:!hex(333333)](<https://661f5982ddc662c8c9a12d6b-nqfkxankpk.chromatic.com/?path=/story/modals-commonmodal--example&globals=backgrounds.value:!hex(333333)>)