@youcan/celeste 0.6.31 → 0.6.33

package/src/components/progress/progress-circle.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useDelegatedProps } from '@/composables/use-delegated-props';
+import clsx from 'clsx';
+import {
+  ProgressIndicator,
+  ProgressRoot,
+  type ProgressRootProps,
+} from 'radix-vue';
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<
+    ProgressRootProps & {
+      class?: HTMLAttributes['class'];
+      size?: 80 | 72 | 64 | 56 | 48;
+    }
+  >(),
+  {
+    modelValue: 0,
+    size: 80,
+    max: 100,
+  },
+);
+
+const delegatedProps = useDelegatedProps(props, 'class');
+
+const STROKE_WIDTH = 6.4;
+const radius = computed(() => (props.size - STROKE_WIDTH) / 2);
+const circumference = computed(() => 2 * Math.PI * radius.value);
+
+const progress = computed(() => {
+  if (props.max === 0)
+    return 0;
+
+  const value = Math.min(Math.max(props.modelValue ?? 0, 0), props.max);
+
+  return Math.round((value / props.max) * 100);
+});
+
+const offset = computed(() => {
+  return circumference.value * (1 - progress.value / 100);
+});
+
+const circleSize = computed(() => `${props.size}px`);
+</script>
+
+<template>
+  <ProgressRoot
+    v-bind="delegatedProps"
+    :value="props.modelValue"
+    :class="clsx('celeste-progress-circle', props.class)"
+    as="div"
+  >
+    <ProgressIndicator as-child>
+      <svg
+        class="celeste-progress-circle-svg"
+        :width="props.size"
+        :height="props.size"
+      >
+        <circle
+          class="celeste-progress-circle-track"
+          :cx="props.size / 2"
+          :cy="props.size / 2"
+          :r="radius"
+          :stroke-width="STROKE_WIDTH"
+          fill="transparent"
+        />
+        <circle
+          class="celeste-progress-circle-indicator"
+          :cx="props.size / 2"
+          :cy="props.size / 2"
+          :r="radius"
+          :stroke-width="STROKE_WIDTH"
+          fill="transparent"
+          :stroke-dasharray="circumference"
+          :stroke-dashoffset="offset"
+        />
+      </svg>
+    </ProgressIndicator>
+    <div
+      v-if="props.size !== 48"
+      class="celeste-progress-circle-label"
+    >
+      <slot>
+        {{ progress }}%
+      </slot>
+    </div>
+  </ProgressRoot>
+</template>
+
+<style scoped lang="scss">
+.celeste-progress-circle {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  width: v-bind('circleSize');
+  height: v-bind('circleSize');
+}
+
+.celeste-progress-circle-svg {
+  transform: rotate(-90deg);
+}
+
+.celeste-progress-circle-track {
+  stroke: var(--color-bg-soft-200);
+}
+
+.celeste-progress-circle-indicator {
+  transition: stroke-dashoffset 0.3s ease;
+  stroke: var(--color-primary-base);
+}
+
+.celeste-progress-circle-label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--color-text-strong-950);
+  font: var(--label-sm);
+  text-align: center;
+  pointer-events: none;
+  user-select: none;
+}
+</style>

package/src/components/progress/stories/progress-bar.stories.ts

@@ -0,0 +1,328 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import ProgressBar from '../progress-bar.vue';
+
+const meta: Meta<typeof ProgressBar> = {
+  title: 'Components/Progress/Progress Bar',
+  component: ProgressBar,
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: ['primary', 'blue', 'red', 'orange', 'green'],
+    },
+    layout: {
+      control: { type: 'select' },
+      options: ['default', 'no-description', 'inline', 'bare'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ProgressBar>;
+
+export const Default: Story = {
+  args: {
+    layout: 'default',
+    title: 'Data Storage',
+    modelValue: 60,
+    color: 'primary',
+  },
+  render: args => ({
+    components: { ProgressBar },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ProgressBar v-bind="args">
+         <template #description>
+            Upgrade to unlock unlimited data storage.
+         </template>
+      </ProgressBar>
+    `,
+  }),
+};
+
+export const ZeroProgress: Story = {
+  args: {
+    layout: 'default',
+    title: 'Download Progress',
+    modelValue: 0,
+  },
+  render: args => ({
+    components: { ProgressBar },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ProgressBar v-bind="args">
+        <template #description>
+          Waiting to start download...
+        </template>
+      </ProgressBar>
+    `,
+  }),
+};
+
+export const FullProgress: Story = {
+  args: {
+    layout: 'default',
+    title: 'Upload Complete',
+    modelValue: 100,
+    color: 'green',
+  },
+  render: args => ({
+    components: { ProgressBar },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ProgressBar v-bind="args">
+        <template #description>
+          All files have been uploaded successfully.
+        </template>
+      </ProgressBar>
+    `,
+  }),
+};
+
+export const WithCustomMax: Story = {
+  name: 'With Custom Max Value',
+  args: {
+    layout: 'default',
+    title: 'Memory Usage',
+    modelValue: 6144,
+    max: 8192,
+  },
+  render: args => ({
+    components: { ProgressBar },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ProgressBar v-bind="args">
+        <template #label>
+          {{ args.modelValue }}MB / {{ args.max }}MB
+        </template>
+        <template #description>
+          System memory utilization is within normal range.
+        </template>
+      </ProgressBar>
+    `,
+  }),
+};
+
+export const DifferentLayouts: Story = {
+  render: () => ({
+    components: { ProgressBar },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 32px;">
+        <div>
+          <h3 style="margin-bottom: 16px; font: var(--label-md);">Default Layout</h3>
+          <ProgressBar layout="default" title="Project Progress" :modelValue="75">
+            <template #description>
+              3 of 4 milestones completed
+            </template>
+          </ProgressBar>
+        </div>
+        
+        <div>
+          <h3 style="margin-bottom: 16px; font: var(--label-md);">No Description Layout</h3>
+          <ProgressBar layout="no-description" title="Sync Status" :modelValue="45" />
+        </div>
+        
+        <div>
+          <h3 style="margin-bottom: 16px; font: var(--label-md);">Inline Layout</h3>
+          <ProgressBar layout="inline" :modelValue="80" />
+        </div>
+        
+        <div>
+          <h3 style="margin-bottom: 16px; font: var(--label-md);">Bare Layout</h3>
+          <ProgressBar layout="bare" :modelValue="30" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const DifferentColors: Story = {
+  render: () => ({
+    components: { ProgressBar },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px;">
+        <div>
+          <p style="margin-bottom: 8px; font: var(--label-sm);">Primary</p>
+          <ProgressBar layout="inline" color="primary" :modelValue="60" />
+        </div>
+        <div>
+          <p style="margin-bottom: 8px; font: var(--label-sm);">Blue (Information)</p>
+          <ProgressBar layout="inline" color="blue" :modelValue="40" />
+        </div>
+        <div>
+          <p style="margin-bottom: 8px; font: var(--label-sm);">Green (Success)</p>
+          <ProgressBar layout="inline" color="green" :modelValue="85" />
+        </div>
+        <div>
+          <p style="margin-bottom: 8px; font: var(--label-sm);">Orange (Warning)</p>
+          <ProgressBar layout="inline" color="orange" :modelValue="25" />
+        </div>
+        <div>
+          <p style="margin-bottom: 8px; font: var(--label-sm);">Red (Error)</p>
+          <ProgressBar layout="inline" color="red" :modelValue="15" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const WithCustomLabel: Story = {
+  name: 'With Custom Label (Slot)',
+  args: {
+    layout: 'default',
+    title: 'File Transfer',
+    modelValue: 1024,
+    max: 2048,
+  },
+  render: args => ({
+    components: { ProgressBar },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ProgressBar v-bind="args">
+        <template #label>
+          {{ Math.round(args.modelValue / 1024 * 10) / 10 }}GB of {{ args.max / 1024 }}GB
+        </template>
+        <template #description>
+          Transfer speed: 25 MB/s • Time remaining: 2 minutes
+        </template>
+      </ProgressBar>
+    `,
+  }),
+};
+
+export const InlineWithTitle: Story = {
+  name: 'Inline Layout with Title',
+  args: {
+    layout: 'inline',
+    title: 'CPU Usage',
+    modelValue: 68,
+    color: 'orange',
+  },
+  render: args => ({
+    components: { ProgressBar },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ProgressBar v-bind="args" />
+    `,
+  }),
+};
+
+export const LoadingStates: Story = {
+  name: 'Loading States Example',
+  render: () => ({
+    components: { ProgressBar },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px;">
+        <div>
+          <h4 style="margin-bottom: 12px; font: var(--label-sm);">Initializing</h4>
+          <ProgressBar layout="default" title="Setup" :modelValue="5" color="blue">
+            <template #description>
+              Preparing environment...
+            </template>
+          </ProgressBar>
+        </div>
+        
+        <div>
+          <h4 style="margin-bottom: 12px; font: var(--label-sm);">In Progress</h4>
+          <ProgressBar layout="default" title="Installation" :modelValue="47" color="primary">
+            <template #description>
+              Installing dependencies (23 of 49)
+            </template>
+          </ProgressBar>
+        </div>
+        
+        <div>
+          <h4 style="margin-bottom: 12px; font: var(--label-sm);">Nearly Complete</h4>
+          <ProgressBar layout="default" title="Finalizing" :modelValue="92" color="green">
+            <template #description>
+              Running final checks...
+            </template>
+          </ProgressBar>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const EdgeCases: Story = {
+  render: () => ({
+    components: { ProgressBar },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px;">
+        <div>
+          <p style="margin-bottom: 8px; font: var(--label-sm);">Over Max Value</p>
+          <ProgressBar layout="inline" :modelValue="150" :max="100" color="red" />
+        </div>
+        <div>
+          <p style="margin-bottom: 8px; font: var(--label-sm);">Negative Value</p>
+          <ProgressBar layout="inline" :modelValue="-20" color="red" />
+        </div>
+        <div>
+          <p style="margin-bottom: 8px; font: var(--label-sm);">Max is Zero</p>
+          <ProgressBar layout="inline" :modelValue="0" :max="0" />
+        </div>
+        <div>
+          <p style="margin-bottom: 8px; font: var(--label-sm);">Very Small Progress</p>
+          <ProgressBar layout="inline" :modelValue="0.5" :max="100" />
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const RealWorldExamples: Story = {
+  name: 'Real World Use Cases',
+  render: () => ({
+    components: { ProgressBar },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 32px; max-width: 400px;">
+        <div>
+          <h4 style="margin-bottom: 16px; font: var(--label-md);">Storage Quota</h4>
+          <ProgressBar layout="default" title="Cloud Storage" :modelValue="1847" :max="2000" color="orange">
+            <template #label>
+              1.8GB of 2GB used
+            </template>
+            <template #description>
+              You're running low on storage space. Consider upgrading your plan.
+            </template>
+          </ProgressBar>
+        </div>
+        
+        <div>
+          <h4 style="margin-bottom: 16px; font: var(--label-md);">Profile Completion</h4>
+          <ProgressBar layout="default" title="Profile Setup" :modelValue="6" :max="8" color="blue">
+            <template #label>
+              6 of 8 steps completed
+            </template>
+            <template #description>
+              Complete your profile to unlock all features.
+            </template>
+          </ProgressBar>
+        </div>
+        
+        <div>
+          <h4 style="margin-bottom: 16px; font: var(--label-md);">System Health</h4>
+          <ProgressBar layout="no-description" title="CPU Usage" :modelValue="23" color="green" />
+          <div style="margin-top: 8px;">
+            <ProgressBar layout="no-description" title="Memory" :modelValue="67" color="primary" />
+          </div>
+          <div style="margin-top: 8px;">
+            <ProgressBar layout="no-description" title="Disk Space" :modelValue="89" color="orange" />
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};

package/src/components/progress/stories/progress-circular.stories.ts

@@ -0,0 +1,152 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import ProgressCircle from '../progress-circle.vue';
+
+const meta: Meta<typeof ProgressCircle> = {
+  title: 'Components/Progress/Progress Circle',
+  component: ProgressCircle,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ProgressCircle>;
+
+export const Default: Story = {
+  args: {
+    modelValue: 45,
+  },
+  render: args => ({
+    components: { ProgressCircle },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ProgressCircle v-bind="args" />
+    `,
+  }),
+};
+
+export const ZeroProgress: Story = {
+  args: {
+    modelValue: 0,
+  },
+  render: args => ({
+    components: { ProgressCircle },
+    setup() {
+      return { args };
+    },
+    template: `<ProgressCircle v-bind="args" />`,
+  }),
+};
+
+export const FullProgress: Story = {
+  args: {
+    modelValue: 100,
+  },
+  render: args => ({
+    components: { ProgressCircle },
+    setup() {
+      return { args };
+    },
+    template: `<ProgressCircle v-bind="args" />`,
+  }),
+};
+
+export const WithValueAndMax: Story = {
+  name: 'With Custom Max Value',
+  args: {
+    modelValue: 256,
+    max: 1024,
+  },
+  render: args => ({
+    components: { ProgressCircle },
+    setup() {
+      return { args };
+    },
+    template: `<ProgressCircle v-bind="args" />`,
+  }),
+};
+
+export const WithCustomLabelInSlot: Story = {
+  name: 'With Custom Label (Slot)',
+  args: {
+    modelValue: 5,
+    max: 10,
+    size: 80,
+  },
+  render: args => ({
+    components: { ProgressCircle },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ProgressCircle v-bind="args">
+        5/10 Done
+      </ProgressCircle>
+    `,
+  }),
+};
+
+export const WithCustomIconInSlot: Story = {
+  name: 'With Custom Icon (Slot)',
+  args: {
+    modelValue: 100,
+    max: 100,
+    size: 80,
+  },
+  render: args => ({
+    components: { ProgressCircle },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ProgressCircle v-bind="args">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M5 13l4 4L19 7" />
+        </svg>
+      </ProgressCircle>
+    `,
+  }),
+};
+
+export const DifferentSizes: Story = {
+  args: {
+    modelValue: 75,
+  },
+  render: args => ({
+    components: { ProgressCircle },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; align-items: center; gap: 16px;">
+        <ProgressCircle v-bind="args" :size="80" />
+        <ProgressCircle v-bind="args" :size="72" />
+        <ProgressCircle v-bind="args" :size="64" />
+        <ProgressCircle v-bind="args" :size="56" />
+        <ProgressCircle v-bind="args" :size="48" />
+      </div>
+    `,
+  }),
+};
+
+export const EdgeCases: Story = {
+  render: () => ({
+    components: { ProgressCircle },
+    template: `
+      <div style="display: flex; align-items: center; gap: 24px;">
+        <div>
+          <p style="text-align: center; margin-bottom: 8px; font: var(--label-sm);">Over Max</p>
+          <ProgressCircle :modelValue="150" :max="100" />
+        </div>
+        <div>
+          <p style="text-align: center; margin-bottom: 8px; font: var(--label-sm);">Negative Value</p>
+          <ProgressCircle :modelValue="-50" />
+        </div>
+        <div>
+          <p style="text-align: center; margin-bottom: 8px; font: var(--label-sm);">Max is Zero</p>
+          <ProgressCircle :modelValue="0" :max="0" />
+        </div>
+      </div>
+    `,
+  }),
+};

package/src/index.ts

@@ -11,3 +11,4 @@ export const Celeste = {
 };
 
 export * from '@/components';
+export * from '@/utils';