From 56d1575f8f71e60c648fd6a0e05778cb5b93b584 Mon Sep 17 00:00:00 2001
From: Aymane Dara Hlamnach <dara-@outlook.jp>
Date: Sat, 11 Jan 2025 01:17:34 +0100
Subject: [PATCH] feat: link button (#8)

---
 .../celeste-vue/src/components/alert/index.ts |   1 +
 .../src/components/button/button.vue          |   7 +-
 .../src/components/button/index.ts            |   5 +
 .../src/components/button/link-button.vue     | 126 ++++++++++++++++++
 .../button/stories/link-button.stories.ts     |  26 ++++
 packages/celeste-vue/src/components/index.ts  |   2 +
 packages/celeste-vue/src/index.ts             |  14 +-
 packages/celeste-vue/tsconfig.app.json        |   1 +
 packages/celeste-vue/tsconfig.build.json      |   1 +
 packages/celeste-vue/tsconfig.check.json      |   1 +
 packages/celeste-vue/uno.config.ts            |   2 +-
 packages/celeste-vue/vite.config.ts           |  27 ++--
 12 files changed, 196 insertions(+), 17 deletions(-)
 create mode 100644 packages/celeste-vue/src/components/button/index.ts
 create mode 100644 packages/celeste-vue/src/components/button/link-button.vue
 create mode 100644 packages/celeste-vue/src/components/button/stories/link-button.stories.ts
 create mode 100644 packages/celeste-vue/src/components/index.ts

diff --git a/packages/celeste-vue/src/components/alert/index.ts b/packages/celeste-vue/src/components/alert/index.ts
index 853b4cb..53a6053 100644
--- a/packages/celeste-vue/src/components/alert/index.ts
+++ b/packages/celeste-vue/src/components/alert/index.ts
@@ -1 +1,2 @@
 export * from './alert.vue';
+export { default as Alert } from './alert.vue';
diff --git a/packages/celeste-vue/src/components/button/button.vue b/packages/celeste-vue/src/components/button/button.vue
index b5086d5..0f5e462 100644
--- a/packages/celeste-vue/src/components/button/button.vue
+++ b/packages/celeste-vue/src/components/button/button.vue
@@ -21,15 +21,13 @@ export interface ButtonProps extends PrimitiveProps {
   iconPosition?: 'leading' | 'trailing';
   icon?: string;
   label?: string;
-  disabled?: boolean;
-  as?: keyof HTMLElementTagNameMap;
 }
 </script>
 
 <template>
   <Primitive
     :as
-    :disabled
+    :as-child
     :class="clsx(
       'celeste-button',
       `celeste-button-type-${type}`,
@@ -37,6 +35,7 @@ export interface ButtonProps extends PrimitiveProps {
       `celeste-button-variant-${variant}`,
       props.class,
     )"
+    :role="as === 'a' ? 'link' : 'button'"
   >
     <i v-if="icon && iconPosition === 'leading'" :class="icon" />
     <span v-if="label" role="presentation">{{ label }}</span>
@@ -236,7 +235,7 @@ $hover-map: (
   transition-timing-function: ease-out;
   transition-duration: var(--animation-fast);
   text-decoration: none;
-  transition-property: background-color color border-color;
+  transition-property: background-color, color, border-color;
 
   &:disabled {
     cursor: default;
diff --git a/packages/celeste-vue/src/components/button/index.ts b/packages/celeste-vue/src/components/button/index.ts
new file mode 100644
index 0000000..f605fee
--- /dev/null
+++ b/packages/celeste-vue/src/components/button/index.ts
@@ -0,0 +1,5 @@
+export * from './button.vue';
+export { default as Button } from './button.vue';
+
+export * from './link-button.vue';
+export { default as LinkButton } from './link-button.vue';
diff --git a/packages/celeste-vue/src/components/button/link-button.vue b/packages/celeste-vue/src/components/button/link-button.vue
new file mode 100644
index 0000000..e51cd96
--- /dev/null
+++ b/packages/celeste-vue/src/components/button/link-button.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import clsx from 'clsx';
+import { Primitive, type PrimitiveProps } from 'radix-vue';
+
+const props = withDefaults(defineProps<LinkButtonProps>(), {
+  size: 'sm',
+  type: 'primary',
+  as: 'a',
+});
+</script>
+
+<script lang="ts">
+export interface LinkButtonProps extends PrimitiveProps {
+  class?: HTMLAttributes['class'];
+  size?: 'sm' | 'md';
+  type?: 'primary' | 'black' | 'gray' | 'error';
+  underline?: boolean;
+  disabled?: boolean;
+}
+</script>
+
+<template>
+  <Primitive
+    :as
+    :disabled
+    :as-child
+    :class="clsx(
+      'celeste-link-button',
+      `celeste-link-button-${type}`,
+      `celeste-link-button-${size}`,
+      disabled && 'celeste-link-button-disabled',
+      underline && 'celeste-link-button-underline',
+      props.class,
+    )"
+    :role="as === 'a' ? 'link' : 'button'"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<style lang="scss" scoped>
+.celeste-link-button {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  justify-content: center;
+  transition-property: color, text-decoration-color;
+  transition-timing-function: ease-out;
+  transition-duration: var(--animation-fast);
+  cursor: pointer;
+
+  &:disabled,
+  &-disabled {
+    cursor: default;
+    pointer-events: none;
+    color: var(--color-text-disabled-300);
+  }
+
+  &:hover,
+  &:focus {
+    outline: none;
+    text-decoration: underline;
+  }
+
+  &-underline {
+    text-decoration: underline;
+  }
+
+  &-md {
+    height: 20px;
+    font: var(--label-sm);
+
+    i {
+      height: 20px;
+      width: 20px;
+    }
+  }
+
+  &-sm {
+    height: 16px;
+    font: var(--label-xs);
+
+    i {
+      height: 16px;
+      width: 16px;
+    }
+  }
+
+  &-primary:not(&-disabled) {
+    color: var(--color-primary-base);
+
+    &:hover,
+    &:focus {
+      color: var(--color-primary-darker);
+    }
+  }
+
+  &-black:not(&-disabled) {
+    color: var(--color-text-strong-950);
+
+    &:hover,
+    &:focus {
+      color: var(--color-text-strong-950);
+    }
+  }
+
+  &-gray:not(&-disabled) {
+    color: var(--color-text-sub-600);
+
+    &:hover,
+    &:focus {
+      color: var(--color-text-sub-600);
+    }
+  }
+
+  &-error:not(&-disabled) {
+    color: var(--color-state-error-base);
+
+    &:hover,
+    &:focus {
+      color: var(--color-red-700);
+    }
+  }
+}
+</style>
diff --git a/packages/celeste-vue/src/components/button/stories/link-button.stories.ts b/packages/celeste-vue/src/components/button/stories/link-button.stories.ts
new file mode 100644
index 0000000..eee3ebb
--- /dev/null
+++ b/packages/celeste-vue/src/components/button/stories/link-button.stories.ts
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import LinkButton from '../link-button.vue';
+
+const meta: Meta<typeof LinkButton> = {
+  title: 'Components/LinkButton',
+  component: LinkButton,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LinkButton>;
+
+export const Default: Story = {
+  render: args => ({
+    components: { LinkButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <LinkButton target="self" href="https://google.com" v-bind="args">
+        Link Button Text
+        <i i-celeste-arrow-right-s-line />
+      </LinkButton>
+    `,
+  }),
+};
diff --git a/packages/celeste-vue/src/components/index.ts b/packages/celeste-vue/src/components/index.ts
new file mode 100644
index 0000000..c7b4064
--- /dev/null
+++ b/packages/celeste-vue/src/components/index.ts
@@ -0,0 +1,2 @@
+export * from './alert';
+export * from './button';
diff --git a/packages/celeste-vue/src/index.ts b/packages/celeste-vue/src/index.ts
index 189a3a1..27113fe 100644
--- a/packages/celeste-vue/src/index.ts
+++ b/packages/celeste-vue/src/index.ts
@@ -1,3 +1,15 @@
+import type { App } from 'vue';
+import * as components from '@/components';
 import 'virtual:uno.css';
 
-export * from '@/components/alert';
+const Celeste = {
+  install(vue: App) {
+    Object.entries(components).forEach(([name, component]) => {
+      vue.component(name, component);
+    });
+  },
+};
+
+export * from '@/components';
+
+export default Celeste;
diff --git a/packages/celeste-vue/tsconfig.app.json b/packages/celeste-vue/tsconfig.app.json
index 1805731..2c9d7ae 100644
--- a/packages/celeste-vue/tsconfig.app.json
+++ b/packages/celeste-vue/tsconfig.app.json
@@ -4,6 +4,7 @@
   "compilerOptions": {
     "target": "esnext",
     "jsx": "preserve",
+    "jsxImportSource": "vue",
     "lib": ["esnext", "dom"],
     "baseUrl": ".",
     "module": "esnext",
diff --git a/packages/celeste-vue/tsconfig.build.json b/packages/celeste-vue/tsconfig.build.json
index 3617918..c18823a 100644
--- a/packages/celeste-vue/tsconfig.build.json
+++ b/packages/celeste-vue/tsconfig.build.json
@@ -3,6 +3,7 @@
   "compilerOptions": {
     "target": "esnext",
     "jsx": "preserve",
+    "jsxImportSource": "vue",
     "lib": ["esnext", "dom"],
     "baseUrl": ".",
     "module": "esnext",
diff --git a/packages/celeste-vue/tsconfig.check.json b/packages/celeste-vue/tsconfig.check.json
index f52f408..6b69cc3 100644
--- a/packages/celeste-vue/tsconfig.check.json
+++ b/packages/celeste-vue/tsconfig.check.json
@@ -4,6 +4,7 @@
   "compilerOptions": {
     "target": "esnext",
     "jsx": "preserve",
+    "jsxImportSource": "vue",
     "lib": [
       "esnext",
       "dom"
diff --git a/packages/celeste-vue/uno.config.ts b/packages/celeste-vue/uno.config.ts
index 94bc825..f9f902a 100644
--- a/packages/celeste-vue/uno.config.ts
+++ b/packages/celeste-vue/uno.config.ts
@@ -11,7 +11,7 @@ export default defineConfig({
       extraProperties: {
         width: '16px',
         height: '16px',
-        display: 'block',
+        display: 'inline-block',
       },
       collections: {
         [info.prefix]: () => icons,
diff --git a/packages/celeste-vue/vite.config.ts b/packages/celeste-vue/vite.config.ts
index 46eeb94..7d9f9a2 100644
--- a/packages/celeste-vue/vite.config.ts
+++ b/packages/celeste-vue/vite.config.ts
@@ -4,8 +4,6 @@ import uno from 'unocss/vite';
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 
-const root = resolve(__dirname);
-
 export default defineConfig({
   plugins: [
     uno(),
@@ -18,29 +16,36 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      '@': resolve(root, 'src'),
+      '@': resolve(import.meta.dirname, 'src'),
     },
-    dedupe: [
-      'vue',
-      '@vue/runtime-core',
-    ],
+    dedupe: ['vue'],
   },
   build: {
+    cssCodeSplit: true,
     lib: {
-      formats: ['es'],
-      name: 'celeste',
-      fileName: (format, name) => `${name}.${format === 'es' ? 'js' : 'umd.cjs'}`,
+      name: 'celeste-vue',
+      fileName: (format, name) => {
+        return `${name}.${format === 'es' ? 'js' : 'umd.cjs'}`;
+      },
       entry: {
         index: resolve(__dirname, 'src/index.ts'),
       },
     },
     rollupOptions: {
-      external: ['vue', '@vue/runtime-core'],
+      external: ['vue', 'os'],
       output: {
+        exports: 'named',
         globals: {
           vue: 'Vue',
         },
+        assetFileNames: (chunkInfo) => {
+          if (chunkInfo.name === 'style.css')
+            return 'index.css';
+
+          return chunkInfo.name as string;
+        },
       },
     },
+    emptyOutDir: true,
   },
 });