component and docs changes

.storybook/index.scss

@@ -1,4 +1,7 @@
 .css-1njl3fa {
+	border: none !important;
+	background-image: none !important;
+
 	div {
 		:first-child {
 			margin-left: 2px;

.storybook/theme.ts

@@ -2,5 +2,6 @@ import { create } from '@storybook/theming/create';
 
 export default create({
 	base: 'light',
-	brandTitle: 'Gecko UI Library',
+	brandTitle: 'Shohin',
+	brandUrl: 'https://mrksbnc.github.io/ds',
 });

README.md

@@ -1,4 +1,4 @@
-# Vue Component Library
+# Ds - Vue 3 Component Library
 
 ![Version](https://img.shields.io/github/package-json/v/mrksbnc/complib)
 
@@ -46,7 +46,7 @@ npm run build-storybook
 ```
 
 This will build the Storybook documentation and generate the static files in the `docs` folder.
-The directory is used by GitHub Pages to host the documentation.
+The directory is used by DstHub Pages to host the documentation.
 
 ### Run your unit tests
 

package.json

@@ -1,5 +1,5 @@
 {
-	"name": "@mrksbnc/shohin",
+	"name": "@mrksbnc/ds",
 	"version": "0.0.0",
 	"description": "Vue 3 UI library built with Vite, TailwindCSS, and Storybook",
 	"scripts": {
@@ -18,10 +18,10 @@
 		"minor": "npm version --no-git-tag-version minor",
 		"major": "npm version --no-git-tag-version major"
 	},
-	"homepage": "http://mrksbnc.github.io/shohin",
+	"homepage": "http://mrksbnc.github.io/ds",
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/mrksbnc/shohin.git"
+		"url": "https://github.com/mrksbnc/ds.git"
 	},
 	"files": [
 		"dist/**/*"

src/components/Button/ClButton.vue → src/components/Button/DsButton.vue

@@ -1,27 +1,30 @@
 <template>
 	<button
 		:id="id"
-		ref="cl-button"
-		class="cl-button"
+		ref="Ds-button"
+		class="Ds-button"
 		:class="[btnClass]"
 		:disabled="disabled"
 		@click="clickHandler($event)"
 	>
 		<div v-if="isLoading">
-			<cl-loading-spinner
+			<Ds-loading-spinner
 				:size="loaderSize"
 				:show-label="false"
 				:color="loaderColor"
 			/>
 		</div>
-		<div v-else>
-			<span>
+		<div
+			v-else
+			class="flex flex-row justify-center items-center"
+		>
+			<span class="sh-button__prefix mr-2">
 				<slot name="prefix" />
 			</span>
 			<span>
 				{{ label }}
 			</span>
-			<span>
+			<span class="sh-button__suffix ml-2">
 				<slot name="suffix" />
 			</span>
 		</div>
@@ -30,8 +33,8 @@
 
 <script setup lang="ts">
 	import { type PropType, computed, toRefs, ref } from 'vue';
-	import { ButtonType, ButtonSize } from './constants';
-	import { ClLoadingSpinner, LoadingSpinnerColor, LoadingSpinnerSize } from '../Loader';
+	import { ButtonType, ButtonSize, ButtonForm } from './constants';
+	import { DsLoadingSpinner, LoadingSpinnerColor, LoadingSpinnerSize } from '../Loader';
 
 	const props = defineProps({
 		type: {
@@ -58,17 +61,21 @@
 			type: Function as PropType<(event: MouseEvent) => void>,
 			default: () => {},
 		},
+		form: {
+			type: String as PropType<ButtonForm>,
+			default: ButtonForm.base,
+		},
 	});
 
-	const { label, type, disabled, size, isLoading, onClick } = toRefs(props);
+	const { label, type, disabled, size, isLoading, onClick, form } = toRefs(props);
 
-	const id = ref('cl-button_' + Date.now());
+	const id = ref('Ds-button_' + Date.now());
 
 	const disabledBtnColorClass =
 		'text-gray-400 bg-gray-200 cursor-not-allowed hover:bg-gray-200 focus:ring-gray-300 dark:bg-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
 
 	const defaultBtnClass =
-		'w-full h-full flex flex-row justify-center items-center focus:ring-1 font-medium rounded-lg focus:outline-none';
+		'w-full h-full flex flex-row justify-center items-center focus:ring-1 font-medium focus:outline-none';
 
 	const colorClasses = computed<string>(() => {
 		switch (type.value) {
@@ -108,10 +115,21 @@
 		}
 	});
 
+	const computedButtonFormClass = computed<string>(() => {
+		switch (form.value) {
+			case ButtonForm.base:
+				return 'rounded-lg';
+			case ButtonForm.pill:
+				return 'rounded-full';
+			default:
+				return 'rounded-lg';
+		}
+	});
+
 	const btnClass = computed(() => {
 		const color = disabled.value ? disabledBtnColorClass : colorClasses.value;
 
-		return `${defaultBtnClass} ${computedBtnSize.value} ${color}`;
+		return `${defaultBtnClass} ${computedBtnSize.value} ${computedButtonFormClass.value} ${color}`;
 	});
 
 	const loaderColor = computed(() => {

src/components/Button/DsButtonGroup.vue

@@ -0,0 +1,90 @@
+<template>
+	<div
+		class="inline-flex rounded-md shadow-sm"
+		role="group"
+	>
+		<button
+			type="button"
+			:key="item.id"
+			@click="select(item, index)"
+			:class="[
+				getClass(index),
+				isSelectedItem(item)
+					? 'border-blue-700 focus:ring-blue-700 focus:text-blue-700 dark:focus:ring-blue-500 dark:focus:text-white focus:z-10 focus:ring-1'
+					: 'text-gray-700 bg-white',
+			]"
+			v-for="(item, index) in items"
+			class="flex items-center justify-center px-4 py-2 text-sm font-medium bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600"
+		>
+			<span
+				v-if="item.prefix"
+				class="mr-2"
+				:class="`button_group__prefix__${index}`"
+			>
+				<Ds-icon
+					:size="14"
+					:icon="item.prefix"
+					:color="item.iconColor"
+				/>
+			</span>
+			{{ item.label }}
+			<span
+				v-if="item.suffix"
+				class="ml-2"
+				:class="`button_group__suffix__${index}`"
+			>
+				<Ds-icon
+					:size="14"
+					:icon="item.suffix"
+					:color="item.iconColor"
+				/>
+			</span>
+		</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { DsIcon, Icon } from '../Icon';
+	import { ButtonGroupEvents } from './events';
+	import type { ButtonGroupItem } from './types';
+	import { toRefs, type PropType, ref } from 'vue';
+
+	const emits = defineEmits({
+		[ButtonGroupEvents.select]: ({ item, index }: { item: ButtonGroupItem; index: number }) => true,
+	});
+
+	const props = defineProps({
+		items: {
+			type: Array as PropType<ButtonGroupItem[]>,
+			default: () => [],
+		},
+		selected: {
+			type: Number,
+			default: null,
+		},
+		icon: {
+			type: String as PropType<Icon>,
+			default: null,
+		},
+	});
+
+	const { items, selected, icon } = toRefs(props);
+
+	const selectedId = ref<number | null>(selected.value ?? null);
+
+	const select = (item: ButtonGroupItem, index: number): void => {
+		selectedId.value = item.id;
+		emits(ButtonGroupEvents.select, { item, index });
+	};
+
+	const isSelectedItem = (item: ButtonGroupItem): boolean => {
+		return item.id === selectedId.value;
+	};
+
+	const getClass = (index: number): string => {
+		if (index === 0 && items.value.length != 1) return 'rounded-l-lg ';
+		if (index === items.value.length - 1 && items.value.length != 1) return 'rounded-r-lg ';
+		if (items.value.length === 1) return 'rounded-lg ';
+		return '';
+	};
+</script>

src/components/Button/ClIconButton.vue → src/components/Button/DsIconButton.vue

@@ -3,15 +3,15 @@
 		aria-label="button-with-icon"
 		:disabled="disabled"
 		:class="[computedTypeClass]"
-		class="flex items-center justify-center cursor-pointer hover:opacity-80 transition-opacity duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+		class="flex items-center justify-center cursor-pointer hover:opacity-60 transition-opacity duration-50 disabled:opacity-50 disabled:cursor-not-allowed"
 		:style="{
 			backgroundColor: backgroundColor,
 			width: `${computedSize}px`,
 			height: `${computedSize}px`,
 		}"
 		@click="clickHandler($event)"
 	>
-		<cl-icon
+		<Ds-icon
 			:icon="icon"
 			:color="iconColor"
 			:size="computedIconSize"
@@ -21,7 +21,7 @@
 
 <script setup lang="ts">
 	import { Color } from '@/data';
-	import { ClIcon, Icon } from '../Icon';
+	import { DsIcon, Icon } from '../Icon';
 	import { toRefs, type PropType, computed } from 'vue';
 	import { IconButtonSize, IconButtonType } from './constants';