@youcan/celeste 0.6.59 → 0.6.61

package/src/components/sidebar/stories/sidebar.stories.ts

@@ -0,0 +1,358 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import CompactButton from '@/components/button/compact-button.vue';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/collapsible';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/dropdown-menu';
+import SidebarMenuBadge from '@/components/sidebar/sidebar-menu-badge.vue';
+import { ref } from 'vue';
+import { Sidebar, SidebarContent, SidebarElement, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarSeparator, SidebarTrigger } from '..';
+
+const meta: Meta<typeof Sidebar> = {
+  title: 'Components/Sidebar',
+  component: Sidebar,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Sidebar>;
+
+export const Simple: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+
+  args: {},
+
+  render: args => ({
+    components: {
+      CompactButton,
+      Collapsible,
+      CollapsibleContent,
+      CollapsibleTrigger,
+      DropdownMenu,
+      DropdownMenuContent,
+      DropdownMenuGroup,
+      DropdownMenuItem,
+      DropdownMenuLabel,
+      DropdownMenuSeparator,
+      DropdownMenuTrigger,
+      Sidebar,
+      SidebarContent,
+      SidebarElement,
+      SidebarFooter,
+      SidebarGroup,
+      SidebarGroupLabel,
+      SidebarHeader,
+      SidebarMenu,
+      SidebarMenuAction,
+      SidebarMenuButton,
+      SidebarMenuItem,
+      SidebarMenuSub,
+      SidebarMenuSubButton,
+      SidebarMenuSubItem,
+      SidebarProvider,
+      SidebarSeparator,
+      SidebarMenuBadge,
+      SidebarTrigger,
+    },
+    setup() {
+      // Track which items are expanded
+      const expandedItems = ref<Record<string, boolean>>({
+        Orders: true,
+        Products: false,
+        Upsells: false,
+        Coupons: false,
+        Customers: false,
+        Store: true,
+        Insights: false,
+        Invoices: false,
+      });
+
+      const sidebarItems = [
+        {
+          title: 'Dashboard',
+          link: '#',
+          icon: 'i-celeste-dashboard-line',
+        },
+        {
+          title: 'Orders',
+          link: '#',
+          icon: 'i-celeste-shopping-bag-line',
+          children: [
+            { title: 'All orders', link: '#' },
+            { title: 'New order', link: '#' },
+            { title: 'Abandoned carts', link: '#' },
+          ],
+        },
+        {
+          title: 'Products',
+          link: '#',
+          icon: 'i-celeste-shopping-cart-line',
+          children: [
+            { title: 'All products', link: '#' },
+            { title: 'New product', link: '#' },
+            { title: 'Categories', link: '#' },
+            { title: 'Reviews', link: '#' },
+            { title: 'Inventory', link: '#' },
+          ],
+        },
+        {
+          title: 'Upsells',
+          link: '#',
+          icon: 'i-celeste-arrow-up-line',
+          children: [
+            { title: 'All upsells', link: '#' },
+            { title: 'New upsell', link: '#' },
+          ],
+        },
+        {
+          title: 'Coupons',
+          link: '#',
+          icon: 'i-celeste-coupon-line',
+          children: [
+            { title: 'All coupons', link: '#' },
+            { title: 'New coupon', link: '#' },
+          ],
+        },
+        {
+          title: 'Customers',
+          link: '#',
+          icon: 'i-celeste-group-line',
+          children: [
+            { title: 'All customers', link: '#' },
+            { title: 'New customer', link: '#' },
+          ],
+        },
+        {
+          title: 'Store',
+          link: '#',
+          icon: 'i-celeste-store-line',
+          children: [
+            { title: 'Theme', link: '#' },
+            { title: 'Themes', link: '#' },
+            { title: 'Menus', link: '#' },
+            { title: 'Languages', link: '#' },
+            { title: 'Pages', link: '#' },
+            { title: 'Funnels', link: '#' },
+            { title: 'Domains', link: '#' },
+          ],
+        },
+        {
+          title: 'Insights',
+          link: '#',
+          icon: 'i-celeste-bar-chart-line',
+        },
+        {
+          title: 'Invoices',
+          link: '#',
+          icon: 'i-celeste-file-list-line',
+        },
+        {
+          title: 'Apps',
+          link: '#',
+          icon: 'i-celeste-apps-line',
+        },
+      ];
+
+      const footerItems = [
+        {
+          title: 'Affiliate',
+          link: '#',
+          icon: 'i-celeste-service-line',
+        },
+        {
+          title: 'Support',
+          link: '#',
+          icon: 'i-celeste-question-line',
+        },
+        {
+          title: 'Settings',
+          link: '#',
+          icon: 'i-celeste-settings-line',
+        },
+      ];
+
+      return {
+        expandedItems,
+        sidebarItems,
+        footerItems,
+        args,
+      };
+    },
+    template: `
+      <SidebarProvider>
+        <Sidebar collapsible="icon" side="end" v-bind="args">
+          <SidebarHeader>
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <SidebarElement>
+                  <i class="i-celeste-apps-line" />
+                  <div class="flex flex-col">
+                    <div style="color: var(--color-text-strong-950);font: var(--label-sm)">
+                      Ageeba
+                    </div>
+                    <div style="color: var(--color-text-sub-600);font: var(--paragraph-xs)">
+                      ageeba.dotshop.com
+                    </div>
+                  </div>
+                  <CompactButton
+                    style="margin-inline-start: auto;"
+                    variant="stroke"
+                    size="md"
+                    icon="i-celeste-expand-up-down-line"
+                  />
+                </SidebarElement>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuLabel>Stores</DropdownMenuLabel>
+                <DropdownMenuGroup>
+                  <DropdownMenuItem>
+                    Dotshop
+                    <template #prefix>
+                      <i class="i-celeste-building-line" />
+                    </template>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    Dawg
+                    <template #prefix>
+                      <i class="i-celeste-building-line" />
+                    </template>
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  Create a new store
+                  <template #prefix>
+                    <i class="i-celeste-add-line" />
+                  </template>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarHeader>
+
+          <SidebarSeparator />
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>Application</SidebarGroupLabel>
+              <SidebarMenu>
+                <template v-for="item in sidebarItems" :key="item.title">
+                  <SidebarMenuItem v-if="!item.children">
+                    <SidebarMenuButton
+                      as="a"
+                      :href="item.link"
+                    >
+                      <i :class="item.icon" />
+                      <span>{{ item.title }}</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                  <Collapsible
+                    v-else
+                    v-model:open="expandedItems[item.title]"
+                    as-child
+                  >
+                    <SidebarMenuItem>
+                      <CollapsibleTrigger as-child>
+                        <SidebarMenuButton :is-active="item.title === 'Store'">
+                          <i :class="item.icon" />
+                          <span>{{ item.title }}</span>
+                          </SidebarMenuButton>
+                          <SidebarMenuBadge size="sm" v-if="item.title === 'Store'" label="New" state="information" />
+                      </CollapsibleTrigger>
+                      <SidebarMenuAction>
+                        <i class="i-celeste-arrow-right-s-line"/>
+                      </SidebarMenuAction>
+                      <CollapsibleContent>
+                        <SidebarMenuSub>
+                          <SidebarMenuSubItem v-for="child in item.children" :key="child.title">
+                            <SidebarMenuSubButton
+                              as="a"
+                              :href="child.link"
+                              :is-active="child.title === 'Themes'"
+                            >
+                              <span>{{ child.title }}</span>
+                              </SidebarMenuSubButton>
+                              <SidebarMenuBadge size="sm" v-if="child.title === 'Themes'" label="New" state="information" />
+                          </SidebarMenuSubItem>
+                        </SidebarMenuSub>
+                      </CollapsibleContent>
+                    </SidebarMenuItem>
+                  </Collapsible>
+                </template>
+              </SidebarMenu>
+            </SidebarGroup>
+            <SidebarGroup style="margin-block-start: auto;">
+              <SidebarGroupLabel>Other</SidebarGroupLabel>
+              <SidebarMenu>
+                <template v-for="item in footerItems" :key="item.title">
+                  <SidebarMenuButton
+                    as="a"
+                    :href="item.link"
+                  >
+                    <i :class="item.icon" />
+                    <span>{{ item.title }}</span>
+                  </SidebarMenuButton>
+                </template>
+              </SidebarMenu>
+            </SidebarGroup>
+          </SidebarContent>
+
+          <SidebarSeparator />
+
+          <SidebarFooter>
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <SidebarElement>
+                  <i class="i-celeste-user-line" />
+                  <div class="flex flex-col">
+                    <div style="color: var(--color-text-strong-950);font: var(--label-sm)">
+                      Dara
+                    </div>
+                  </div>
+                  <CompactButton
+                    style="margin-inline-start: auto;"
+                    variant="stroke"
+                    size="md"
+                    icon="i-celeste-more-2-fill"
+                  />
+                </SidebarElement>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                <DropdownMenuGroup>
+                  <DropdownMenuItem>
+                    Profile
+                    <template #prefix>
+                      <i class="i-celeste-user-line" />
+                    </template>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    Settings
+                    <template #prefix>
+                      <i class="i-celeste-settings-line" />
+                    </template>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    Billing
+                    <template #prefix>
+                      <i class="i-celeste-bank-card-line" />
+                    </template>
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  Log out
+                  <template #prefix>
+                    <i class="i-celeste-logout-box-line" />
+                  </template>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarFooter>
+        </Sidebar>
+
+        <div style="padding: 24px;">
+          <SidebarTrigger />
+        <div>
+      </SidebarProvider>
+    `,
+  }),
+};

package/src/components/tooltip/index.ts

@@ -1,2 +1,14 @@
+export * from './tooltip-content.vue';
+export { default as TooltipContent } from './tooltip-content.vue';
+
+export * from './tooltip-provider.vue';
+export { default as TooltipProvider } from './tooltip-provider.vue';
+
+export * from './tooltip-root.vue';
+export { default as TooltipRoot } from './tooltip-root.vue';
+
+export * from './tooltip-trigger.vue';
+export { default as TooltipTrigger } from './tooltip-trigger.vue';
+
 export * from './tooltip.vue';
 export { default as Tooltip } from './tooltip.vue';

package/src/components/tooltip/tooltip-content.vue

@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import CompactButton from '@/components/button/compact-button.vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import { type TooltipContentProps as PrimitiveProps, TooltipArrow, TooltipContent, type TooltipContentEmits, TooltipPortal, useForwardPropsEmits } from 'radix-vue';
+
+const props = withDefaults(
+  defineProps<TooltipContentProps>(),
+  {
+    sideOffset: 12,
+    variant: 'light',
+    size: 'sm',
+  },
+);
+
+const emits = defineEmits<TooltipContentEmits>();
+
+const delegated = useDelegatedProps(props, ['class', 'size', 'variant', 'icon', 'title', 'description', 'dismissible', 'onDismiss']);
+const forwarded = useForwardPropsEmits(delegated, emits);
+
+function handleDismiss() {
+  props.onDismiss?.();
+}
+</script>
+
+<script lang="ts">
+export interface TooltipContentProps extends PrimitiveProps {
+  class?: HTMLAttributes['class'];
+  size?: 'xs' | 'sm' | 'md';
+  variant?: 'light' | 'dark';
+  icon?: string;
+  title?: string;
+  description?: string;
+  dismissible?: boolean;
+  onDismiss?: () => void;
+}
+</script>
+
+<template>
+  <TooltipPortal class="celeste-tooltip-portal">
+    <TooltipContent
+      v-bind="forwarded"
+      :size="size"
+      :variant="variant"
+      :class="clsx('celeste-tooltip-content', props.class)"
+    >
+      <i v-if="icon" :class="`celeste-tooltip-content-icon ${icon}`" />
+      <div class="celeste-tooltip-content-box">
+        <span v-if="title" class="celeste-tooltip-content-title">{{ title }}</span>
+        <span v-if="description" class="celeste-tooltip-content-description">
+          {{ description }}
+        </span>
+        <slot />
+      </div>
+      <CompactButton
+        v-if="dismissible"
+        variant="ghost"
+        icon="i-celeste-close-line"
+        @click="handleDismiss"
+      />
+      <TooltipArrow as-child>
+        <span class="celeste-tooltip-content-arrow" />
+      </TooltipArrow>
+    </TooltipContent>
+  </TooltipPortal>
+</template>
+
+<style scoped lang="scss">
+:deep(.celeste-tooltip-content) {
+  display: flex;
+  position: relative;
+  align-items: flex-start;
+  width: auto;
+  max-width: calc(var(--radix-tooltip-content-available-width) / 1.5);
+  height: auto;
+  animation: var(--animation-fast) ease-out forwards;
+  border: 1px solid transparent;
+  opacity: 0;
+  background-color: var(--color-bg-white-0);
+  box-shadow:
+    0 12px 24px 0 rgb(14 18 27 / 6%),
+    0 1px 2px 0 rgb(14 18 27 / 3%);
+  gap: var(--spacing-12);
+  scale: 0.98;
+
+  &[data-state='delayed-open'] {
+    animation-name: open;
+  }
+
+  &[data-state='closed'] {
+    &[data-side='left'] {
+      animation-name: close-left;
+    }
+
+    &[data-side='right'] {
+      animation-name: close-right;
+    }
+
+    &[data-side='top'] {
+      animation-name: close-top;
+    }
+
+    &[data-side='bottom'] {
+      animation-name: close-bottom;
+    }
+  }
+
+  .celeste-tooltip-content-box {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-4);
+
+    .celeste-tooltip-content-description {
+      font: var(--paragraph-xs);
+    }
+  }
+
+  .celeste-tooltip-content-icon {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .celeste-tooltip-content-arrow {
+    --tooltip-arrow-size: 8px;
+
+    position: absolute;
+    width: var(--tooltip-arrow-size);
+    border: 1px solid transparent;
+    border-bottom-left-radius: calc(var(--radius-6) / 2);
+    background-color: var(--color-bg-white-0);
+    rotate: -45deg;
+    aspect-ratio: 1;
+    clip-path: polygon(0 0, 100% 100%, 0 100%);
+    inset-inline-start: calc(var(--tooltip-arrow-size) / 2 * -1);
+    inset-block-start: calc((var(--tooltip-arrow-size) / 2 + 1px) * -1);
+  }
+
+  &[variant='light'] {
+    border-color: var(--color-stroke-soft-200);
+
+    .celeste-tooltip-content-icon {
+      color: var(--color-icon-sub-600);
+    }
+
+    .celeste-tooltip-content-title {
+      color: var(--color-text-strong-950);
+    }
+
+    .celeste-tooltip-content-description {
+      color: var(--color-text-sub-600);
+    }
+
+    .celeste-tooltip-content-arrow {
+      border-color: var(--color-stroke-soft-200);
+    }
+  }
+
+  &[variant='dark'] {
+    background-color: var(--color-bg-strong-950);
+
+    .celeste-tooltip-content-icon {
+      color: var(--color-icon-soft-400);
+    }
+
+    .celeste-tooltip-content-title {
+      color: var(--color-text-white-0);
+    }
+
+    .celeste-tooltip-content-description {
+      color: var(--color-text-soft-400);
+    }
+
+    .celeste-tooltip-content-arrow {
+      background-color: var(--color-bg-strong-950);
+    }
+  }
+
+  &[size='xs'] {
+    padding: var(--spacing-2) var(--spacing-6);
+    border-radius: var(--radius-4);
+
+    .celeste-tooltip-content-title {
+      font: var(--paragraph-xs);
+    }
+  }
+
+  &[size='sm'] {
+    padding: var(--spacing-4) var(--spacing-10);
+    border-radius: var(--radius-6);
+
+    .celeste-tooltip-content-title {
+      font: var(--paragraph-sm);
+    }
+  }
+
+  &[size='md'] {
+    padding: var(--spacing-12);
+    border-radius: var(--radius-12);
+
+    .celeste-tooltip-content-title {
+      font: var(--label-sm);
+    }
+  }
+
+  &[data-side='left'],
+  &[data-side='right'] {
+    .celeste-tooltip-content-arrow {
+      translate: calc(var(--tooltip-arrow-size) / 4 * -1) 0;
+    }
+  }
+
+  &:has(button):not(:has(.celeste-tooltip-content-description)) {
+    align-items: center;
+  }
+}
+
+@keyframes open {
+  to {
+    translate: 0;
+    opacity: 1;
+    scale: 1;
+  }
+}
+
+$directions: (
+  left: calc(var(--spacing-4) * -1) 0,
+  right: var(--spacing-4) 0,
+  top: 0 calc(var(--spacing-4) * -1),
+  bottom: 0 var(--spacing-4),
+);
+
+@each $dir, $position in $directions {
+  @keyframes close-#{$dir} {
+    from {
+      translate: 0;
+      opacity: 1;
+      scale: 1;
+    }
+
+    to {
+      translate: #{$position};
+      scale: 0.98;
+      opacity: 0;
+    }
+  }
+}
+</style>

package/src/components/tooltip/tooltip-provider.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { type TooltipProviderProps as PrimitiveProps, TooltipProvider } from 'radix-vue';
+
+const props = withDefaults(defineProps<TooltipProviderProps>(), {
+  delayDuration: 0,
+});
+</script>
+
+<script lang="ts">
+export interface TooltipProviderProps extends PrimitiveProps {}
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>

package/src/components/tooltip/tooltip-root.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import { type TooltipRootProps as PrimitiveProps, TooltipRoot, type TooltipRootEmits, useForwardPropsEmits } from 'radix-vue';
+import { ref } from 'vue';
+
+const props = defineProps<TooltipRootProps>();
+const emits = defineEmits<TooltipRootEmits>();
+
+const delegatedProps = useDelegatedProps(props, 'open');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const open = ref(false);
+</script>
+
+<script lang="ts">
+export interface TooltipRootProps extends PrimitiveProps {}
+</script>
+
+<template>
+  <TooltipRoot v-bind="forwarded" v-model:open="open">
+    <slot />
+  </TooltipRoot>
+</template>

package/src/components/tooltip/tooltip-trigger.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { type TooltipTriggerProps as PrimitiveProps, TooltipTrigger, useForwardProps } from 'radix-vue';
+
+const props = defineProps<TooltipTriggerProps>();
+
+const forwardedProps = useForwardProps(props);
+</script>
+
+<script lang="ts">
+export interface TooltipTriggerProps extends PrimitiveProps {}
+</script>
+
+<template>
+  <TooltipTrigger v-bind="forwardedProps" as-child>
+    <slot />
+  </TooltipTrigger>
+</template>