@youcan/celeste 0.6.30 → 0.6.31

package/src/components/rich-editor/stories/rich-editor.stories.ts

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import RichEditor from '../rich-editor.vue';
+
+const meta: Meta<typeof RichEditor> = {
+  title: 'Components/RichEditor',
+  component: RichEditor,
+
+  argTypes: {
+    customToolbar: {
+      description: `An array of toolbar item slugs that defines the order and visibility of editor actions.
+        * item_slugs: [
+          'heading',
+          'fontSize',
+          'color',
+          'bold',
+          'italic',
+          'underline',
+          'strike',
+          'bulletList',
+          'orderedList',
+          'align',
+          'link',
+          'undo',
+          'redo',
+          'clear',
+        ]
+
+        * 'divider': use it for separation.
+
+        Example: ['bold', 'divider', 'color']
+      `,
+    },
+    showExtraSettings: {
+      description: 'Controls the visibility of the dropdown menu containing options like copy, cut, delete, and duplicate.',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RichEditor>;
+
+export const Default: Story = {
+  args: {
+    modelValue: '',
+    customToolbar: [],
+  },
+
+  render: args => ({
+    components: { RichEditor },
+    setup() {
+      return { args };
+    },
+    template: `
+      <RichEditor v-bind="args" />
+    `,
+  }),
+};
+
+export const CustomToolbar: Story = {
+  args: {
+    modelValue: '',
+    placeholder: 'Write something...',
+    customToolbar: [
+      'heading',
+      'divider',
+      'fontSize',
+      'divider',
+      'bold',
+      'underline',
+      'divider',
+      'align',
+    ],
+    maxLimit: 200,
+    showExtraSettings: false,
+  },
+
+  render: args => ({
+    components: { RichEditor },
+    setup() {
+      return { args };
+    },
+    template: `
+      <RichEditor v-bind="args" />
+    `,
+  }),
+};

package/src/components/rich-editor/types.ts

@@ -0,0 +1,21 @@
+export interface ToolbarChildOption {
+  option: string;
+  name: string;
+  icon?: string;
+  active: string | Record<string, unknown>;
+}
+
+interface ToolbarAction {
+  type?: 'action';
+  slug: string;
+  name?: string;
+  icon?: string;
+  active?: string | Record<string, unknown>;
+  children?: ToolbarChildOption[];
+}
+
+interface ToolbarDivider {
+  type: 'divider';
+}
+
+export type ToolbarItem = ToolbarAction | ToolbarDivider;

package/src/components/sonner/index.ts

@@ -0,0 +1,5 @@
+export { default as SonnerAlert } from './sonner-alert.vue';
+export * from './sonner-alert.vue';
+
+export { default as Sonner } from './sonner.vue';
+export * from './sonner.vue';

package/src/components/sonner/sonner-alert.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { Alert, type AlertProps } from '../alert';
+
+export interface SonnerAlertProps extends /* @vue-ignore */ Partial<AlertProps> {
+  title: string;
+  description?: string;
+  onDismiss?: () => void;
+}
+
+const props = withDefaults(
+  defineProps<SonnerAlertProps>(),
+  {
+    size: 'lg',
+    variant: 'stroke',
+    state: 'success',
+    dismissable: true,
+  },
+);
+
+function handleDismiss(): void {
+  if (props.onDismiss) {
+    props.onDismiss();
+  }
+}
+</script>
+
+<template>
+  <Alert
+    v-bind="props"
+    class="sonner-alert"
+    @dismiss="handleDismiss"
+  >
+    <template #title>
+      {{ props.title }}
+    </template>
+    <template v-if="props.description" #description>
+      {{ props.description }}
+    </template>
+  </Alert>
+</template>
+
+<style scoped>
+.sonner-alert {
+  width: min(360px, calc(100vw - 32px));
+  min-width: 360px;
+  max-width: 360px;
+}
+
+@media (width <= 400px) {
+  .sonner-alert {
+    min-width: calc(100vw - 32px);
+  }
+}
+</style>

package/src/components/sonner/sonner.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { Toaster, type ToasterProps } from 'vue-sonner';
+
+const props = defineProps<SonnerProps>();
+</script>
+
+<script lang="ts">
+export interface SonnerProps extends ToasterProps {}
+</script>
+
+<template>
+  <Toaster v-bind="props" />
+</template>

package/src/components/sonner/stories/sonner.stories.ts

@@ -0,0 +1,194 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { toast } from '../../../utils/sonner';
+import Button from '../../button/button.vue';
+import Sonner from '../sonner.vue';
+import 'vue-sonner/style.css';
+
+const meta: Meta<typeof Sonner> = {
+  title: 'Components/Sonner',
+  component: Sonner,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Sonner>;
+
+export const Default: Story = {
+  args: {
+    position: 'top-center',
+  },
+
+  render: args => ({
+    components: { Sonner, Button },
+    setup() {
+      const showBasicToast = (): void => {
+        toast('Event has been created', { dismissable: false });
+      };
+
+      const showToastWithDescription = (): void => {
+        toast('Event has been created', {
+          description: 'Monday, January 3rd at 6:00pm',
+        });
+      };
+
+      const showSuccessToast = (): void => {
+        toast.success('Changes saved!', {
+          description: 'Your changes have been saved successfully.',
+        });
+      };
+
+      const showErrorToast = (): void => {
+        toast.error('Something went wrong!', {
+          description: 'Please try again later.',
+        });
+      };
+
+      const showWarningToast = (): void => {
+        toast.warning('Please review!', {
+          description: 'Please review your changes before proceeding.',
+        });
+      };
+
+      const showInfoToast = (): void => {
+        toast.info('Information', {
+          description: 'Here is some helpful information.',
+        });
+      };
+
+      const showFeatureToast = (): void => {
+        toast.feature('New Feature!', {
+          description: 'Check out this amazing new feature.',
+        });
+      };
+
+      const showFillVariant = (): void => {
+        toast.success('Success with fill!', {
+          description: 'This uses the fill variant style.',
+          variant: 'fill',
+        });
+      };
+
+      const showLightVariant = (): void => {
+        toast.info('Info with light variant', {
+          description: 'This uses the light variant style.',
+          variant: 'light',
+        });
+      };
+
+      const showDismissExample = (): void => {
+        const toastId = toast('This toast can be dismissed', {
+          description: 'Click the dismiss button to remove this toast.',
+          duration: Infinity,
+        });
+
+        setTimeout(() => {
+          toast.dismiss(toastId);
+          toast.success('Toast dismissed!', {
+            description: 'The previous toast was programmatically dismissed.',
+          });
+        }, 3000);
+      };
+
+      const showCustomSizing = (): void => {
+        toast('Custom sized toast', {
+          description: 'This toast uses a smaller size.',
+          size: 'sm',
+        });
+      };
+
+      return {
+        args,
+        showBasicToast,
+        showToastWithDescription,
+        showSuccessToast,
+        showErrorToast,
+        showWarningToast,
+        showInfoToast,
+        showFeatureToast,
+        showFillVariant,
+        showLightVariant,
+        showDismissExample,
+        showCustomSizing,
+      };
+    },
+    template: `
+      <div class="sonner-story-container">
+        <Sonner v-bind="args" />
+        
+        <div class="space-y-6">
+          <div>
+            <h3 class="story-heading">Basic Toasts</h3>
+            <p class="story-description">
+              Default: success state, stroke variant, large size, dismissable
+            </p>
+            <div class="button-grid">
+              <Button @click="showBasicToast" size="sm" intent="primary">
+                Basic Toast
+              </Button>
+              
+              <Button @click="showToastWithDescription" size="sm" intent="primary">
+                With Description
+              </Button>
+
+              <Button @click="showCustomSizing" size="sm" intent="neutral">
+                Custom Size (sm)
+              </Button>
+            </div>
+          </div>
+
+          <div>
+            <h3 class="story-heading">Helper Functions</h3>
+            <div class="button-grid">
+              <Button @click="showSuccessToast" size="sm" intent="primary">
+                toast.success()
+              </Button>
+              
+              <Button @click="showErrorToast" size="sm" intent="error">
+                toast.error()
+              </Button>
+              
+              <Button @click="showWarningToast" size="sm" intent="neutral">
+                toast.warning()
+              </Button>
+              
+              <Button @click="showInfoToast" size="sm" intent="neutral">
+                toast.info()
+              </Button>
+              
+              <Button @click="showFeatureToast" size="sm" intent="primary">
+                toast.feature()
+              </Button>
+            </div>
+          </div>
+
+          <div>
+            <h3 class="story-heading">Variant Examples</h3>
+            <div class="button-grid">
+              <Button @click="showFillVariant" size="sm" intent="primary">
+                Success + Fill
+              </Button>
+              
+              <Button @click="showLightVariant" size="sm" intent="neutral">
+                Info + Light
+              </Button>
+            </div>
+          </div>
+
+          <div>
+            <h3 class="story-heading">Advanced Features</h3>
+            <div class="button-grid">
+              <Button @click="showDismissExample" size="sm" intent="neutral">
+                Auto-dismiss Demo
+              </Button>
+            </div>
+          </div>
+        </div>
+        
+        <p class="story-description mt-6">
+          All toasts are 360px wide when space allows, but shrink responsively on narrow viewports. They appear in the {{ args.position }} position.
+          Default styling: success state, stroke variant, large size, dismissable.
+        </p>
+      </div>
+    `,
+  }),
+};

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './color';
+export * from './crypto';
+export * from './sonner';

package/src/utils/sonner.ts

@@ -0,0 +1,72 @@
+import type { SonnerAlertProps } from '@/components/sonner/sonner-alert.vue';
+import SonnerAlert from '@/components/sonner/sonner-alert.vue';
+import { markRaw } from 'vue';
+import { type ExternalToast, toast as sonner } from 'vue-sonner';
+
+export interface ToastOptions extends ExternalToast {
+  state?: SonnerAlertProps['state'];
+  variant?: SonnerAlertProps['variant'];
+  size?: SonnerAlertProps['size'];
+  dismissable?: SonnerAlertProps['dismissable'];
+}
+
+function createToast(title: string, data?: ToastOptions): string | number {
+  const {
+    state = 'success',
+    variant = 'stroke',
+    size = 'lg',
+    dismissable = true,
+    ...externalToastProps
+  } = data || {};
+
+  let toastId: string | number;
+
+  const dismissToast = (): void => {
+    sonner.dismiss(toastId);
+  };
+
+  toastId = sonner.custom(markRaw(SonnerAlert), {
+    ...externalToastProps,
+    componentProps: {
+      title,
+      description: data?.description,
+      state,
+      variant,
+      size,
+      dismissable,
+      onDismiss: dismissToast,
+    },
+  });
+
+  return toastId;
+}
+
+export const toast = Object.assign(createToast, {
+  success: (title: string, data?: Omit<ToastOptions, 'state'>): string | number => {
+    return createToast(title, { ...data, state: 'success' });
+  },
+
+  error: (title: string, data?: Omit<ToastOptions, 'state'>): string | number => {
+    return createToast(title, { ...data, state: 'error' });
+  },
+
+  warning: (title: string, data?: Omit<ToastOptions, 'state'>): string | number => {
+    return createToast(title, { ...data, state: 'warning' });
+  },
+
+  info: (title: string, data?: Omit<ToastOptions, 'state'>): string | number => {
+    return createToast(title, { ...data, state: 'information' });
+  },
+
+  feature: (title: string, data?: Omit<ToastOptions, 'state'>): string | number => {
+    return createToast(title, { ...data, state: 'feature' });
+  },
+
+  dismiss: (id?: string | number): void => {
+    sonner.dismiss(id);
+  },
+
+  loading: (title: string, data?: ExternalToast): string | number => {
+    return sonner.loading(title, data);
+  },
+});