@saasmakers/ui 1.5.10 → 2.0.1

package/app/composables/useChartist.ts

@@ -1,130 +0,0 @@
-import type { AreaDrawEvent, BarChartOptions, BarDrawEvent, BaseChart, DrawEvent, LineDrawEvent, Options } from 'chartist'
-import { easings } from 'chartist'
-
-export default function useChartist() {
-  type EasingType = keyof typeof easings | number[]
-
-  const progressiveLinePlugin = (params: {
-    animateArea?: boolean
-    delay?: number
-    duration?: number
-    easing?: EasingType
-    stagger?: number
-  } = {}) => {
-    const animateArea = params.animateArea ?? true
-    const delay = params.delay ?? 0
-    const duration = params.duration ?? 500
-    const easing = params.easing ?? easings.easeOutQuart
-    const stagger = params.stagger ?? 0
-
-    return (chart: BaseChart) => {
-      chart.on('draw', (ctx: DrawEvent) => {
-        const begin = delay + (stagger ? stagger * (ctx.seriesIndex ?? 0) : 0)
-
-        // Animation for line charts
-        if (ctx.type === 'line') {
-          const lineCtx = ctx as LineDrawEvent
-          const node = lineCtx.element.getNode<SVGPathElement>()
-          const length = node.getTotalLength()
-
-          // Set the stroke dasharray and dashoffset
-          lineCtx.element.attr({
-            'stroke-dasharray': `${length}px ${length}px`,
-            'stroke-dashoffset': `${length}px`,
-          })
-
-          // Animate the stroke dashoffset to 0
-          lineCtx.element.animate({
-            'stroke-dashoffset': {
-              begin,
-              dur: duration,
-              easing,
-              fill: 'freeze',
-              from: `${length}px`,
-              to: '0px',
-            },
-          }, false)
-
-          // Clean up the dash attributes after it finishes
-          const total = delay + duration + (stagger ? stagger * (lineCtx.seriesIndex ?? 0) : 0)
-
-          globalThis.setTimeout(() => {
-            lineCtx.element.attr({
-              'stroke-dasharray': undefined,
-              'stroke-dashoffset': undefined,
-            })
-          }, total + 30)
-        }
-
-        // Animation for area charts
-        if (animateArea && ctx.type === 'area') {
-          const areaCtx = ctx as AreaDrawEvent
-
-          areaCtx.element.animate({
-
-            d: {
-              begin,
-              dur: duration,
-              easing,
-              fill: 'freeze',
-              from: areaCtx.path
-                .clone()
-                .scale(1, 0)
-                .translate(0, areaCtx.chartRect.height())
-                .stringify(),
-              to: areaCtx.path.stringify(),
-            },
-          }, false)
-        }
-
-        // Animation for bar charts
-        if (ctx.type === 'bar') {
-          const barCtx = ctx as BarDrawEvent
-
-          // Access private options property via type assertion
-          const chartOptions = (chart as unknown as {
-            options?: Options & Partial<BarChartOptions>
-          }).options
-
-          const horizontal = !!(chartOptions as BarChartOptions | undefined)?.horizontalBars
-
-          // For vertical bars, y1 is baseline, y2 is top. For horizontal, x1 is baseline, x2 is end.
-          const from = horizontal ? barCtx.x1 : barCtx.y1
-          const to = horizontal ? barCtx.x2 : barCtx.y2
-
-          // Start collapsed at baseline
-          if (horizontal) {
-            barCtx.element.attr({ x2: from })
-
-            barCtx.element.animate({
-              x2: {
-                begin,
-                dur: duration,
-                easing,
-                fill: 'freeze',
-                from: String(from),
-                to: String(to),
-              },
-            }, false)
-          }
-          else {
-            barCtx.element.attr({ y2: from })
-
-            barCtx.element.animate({
-              y2: {
-                begin,
-                dur: duration,
-                easing,
-                fill: 'freeze',
-                from: String(from),
-                to: String(to),
-              },
-            }, false)
-          }
-        }
-      })
-    }
-  }
-
-  return { progressiveLinePlugin }
-}

package/app/composables/useMotion.ts

@@ -1,39 +0,0 @@
-export default function useMotion() {
-  const fadeIn = {
-    animate: {
-      opacity: 1,
-      transition: { duration: 0.25 },
-    },
-    initial: { opacity: 0 },
-  }
-
-  const fadeInLeft = {
-    animate: {
-      opacity: 1,
-      transition: { duration: 0.25 },
-      x: 0,
-    },
-    initial: {
-      opacity: 0,
-      x: -25,
-    },
-  }
-
-  const fadeInUp = {
-    animate: {
-      opacity: 1,
-      transition: { duration: 0.25 },
-      y: 0,
-    },
-    initial: {
-      opacity: 0,
-      y: 25,
-    },
-  }
-
-  return {
-    fadeIn,
-    fadeInLeft,
-    fadeInUp,
-  }
-}