@levo-so/studio 0.1.0

package/dist/utils/withBlockPropsUtils.d.ts

@@ -0,0 +1,132 @@
+import { ComponentType } from 'react';
+import { IFieldConfig, AnimationConfig } from '../interfaces';
+import { MotionProps } from 'motion/react';
+type MutableDeep<T> = T extends object ? {
+    -readonly [K in keyof T]: MutableDeep<T[K]>;
+} : T;
+/**
+ * Animation props interface for components using Framer Motion types
+ * This is the processed version of AnimationConfig used by components
+ */
+export interface AnimationProps {
+    initial?: MutableDeep<MotionProps["initial"]>;
+    animate?: MutableDeep<MotionProps["animate"]>;
+    whileHover?: MutableDeep<MotionProps["whileHover"]>;
+    exit?: MutableDeep<MotionProps["exit"]>;
+}
+/**
+ * Extended props interface for useCommonProps return type
+ */
+export type ExtendedProps<P extends Record<string, any>> = P & {
+    elementKey: string;
+    config: any;
+    styles: any;
+    content: any;
+    generatedClassName: string;
+};
+/**
+ * withBlockProps Utilities
+ *
+ * Consolidated utility functions extracted from withBlockProps.tsx
+ * to improve code organization and reusability.
+ */
+/**
+ * Utility function to safely access nested object properties
+ *
+ * Handles dot-notation paths and array indices to extract values
+ * from deeply nested block data structures
+ *
+ * @param obj - The object to traverse
+ * @param path - Dot-notation path to the desired property
+ * @returns The value at the specified path or undefined if not found
+ *
+ * @example
+ * getNestedValue({ user: { profile: { name: 'John' } } }, 'user.profile.name') // 'John'
+ * getNestedValue({ items: [{ id: 1 }, { id: 2 }] }, 'items.0.id') // 1
+ */
+export declare const getNestedValue: <P = unknown>(obj: Record<string, unknown>, path: string) => P | undefined;
+/**
+ * Type guard to check if a config object has selectedVariants
+ */
+export declare const isConfigWithVariants: (val: unknown) => val is {
+    selectedVariants: Record<string, string>;
+};
+/**
+ * Sanitizes element key for use in CSS class names
+ * Replaces dots with dashes and removes invalid characters
+ */
+export declare const sanitizeElementKey: (elementKey: string) => string;
+/**
+ * Hook to create a stable animation configuration that only updates when the config actually changes
+ * Uses deep equality comparison to prevent animation re-triggers when object references change
+ *
+ * @param animationConfig - The current animation configuration from field config
+ * @returns Stable animation configuration object
+ */
+export declare const useStableAnimationConfig: (animationConfig: AnimationConfig | null | undefined) => AnimationConfig | null;
+/**
+ * Generates standardized animation props for Framer Motion components
+ *
+ * @param animationConfig - The animation configuration object
+ * @returns Object containing initial, animate, whileHover, and exit props
+ */
+export declare const generateAnimationProps: (animationConfig: AnimationConfig | null | undefined) => AnimationProps;
+/**
+ * Determines the animate value based on visibility state
+ *
+ * @param isInView - Whether the element is in view
+ * @param animationProps - The animation props object
+ * @returns The appropriate animate value
+ */
+export declare const getAnimateValue: (isInView: boolean, animationProps: AnimationProps) => MutableDeep<MotionProps["animate"]> | undefined;
+/**
+ * Generates variant CSS classes from selected variants configuration
+ *
+ * @param configValue - The field configuration containing selectedVariants
+ * @returns Array of variant class names
+ */
+export declare const generateVariantClasses: (configValue: IFieldConfig | undefined) => string[];
+/**
+ * Generates the complete CSS class name for an element
+ * Combines base class with variant classes for complete CSS targeting
+ *
+ * @param elementKey - The element key identifier
+ * @param blockId - The block ID
+ * @param configValue - The field configuration
+ * @returns Complete CSS class name string
+ */
+export declare const generateElementClassName: (elementKey: string, blockId: string, configValue: IFieldConfig | undefined) => string;
+/**
+ * Hook to generate and memoize CSS class names for an element
+ * Prevents unnecessary re-renders when class names haven't changed
+ *
+ * @param elementKey - The element key identifier
+ * @param blockId - The block ID
+ * @param configValue - The field configuration
+ * @returns Memoized CSS class name string
+ */
+export declare const useGeneratedClassName: (elementKey: string, blockId: string, configValue: IFieldConfig | undefined) => string;
+/**
+ * Hook to create a memoized Motion component
+ * Only recreates the component when animation config changes
+ *
+ * @param WrappedComponent - The component to wrap with motion
+ * @param animationConfig - The animation configuration
+ * @returns Memoized Motion component or null if no animation
+ */
+export declare const useMotionComponent: <P extends Record<string, any>>(WrappedComponent: ComponentType<P>, animationConfig: AnimationConfig | null | undefined) => ComponentType<any> | null;
+/**
+ * Hook to create memoized common props for components
+ * Excludes frequently changing props that don't affect animation
+ *
+ * @param props - The original props object
+ * @param elementKey - The element key
+ * @param configValue - The field configuration
+ * @param stylesValue - The styles value
+ * @param contentValue - The content value
+ * @param generatedClassName - The generated CSS class name
+ * @returns Memoized common props object
+ */
+export declare const useCommonProps: <P extends Record<string, any>>(props: P, elementKey: string, configValue: any, stylesValue: any, contentValue: any, generatedClassName: string) => ExtendedProps<P>;
+export {};
+//# sourceMappingURL=withBlockPropsUtils.d.ts.map

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@levo-so/studio",
+  "version": "0.1.0",
+  "author": "Levo Engineering <devs@theinternetfolks.com>",
+  "description": "Levo Studio components and utilities for building block-based pages",
+  "type": "module",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist/**/*",
+    "!dist/**/*.d.ts.map",
+    "package.json"
+  ],
+  "scripts": {
+    "clean": "rimraf dist node_modules .turbo",
+    "check-types": "tsc --noEmit",
+    "lint": "eslint",
+    "build": "vite build",
+    "dev": "vite build --watch"
+  },
+  "peerDependencies": {
+    "@levo-so/core": "workspace:*",
+    "@levo-so/react": "workspace:*",
+    "@levo-so/react-collection": "workspace:*",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "1.2.0",
+    "@radix-ui/react-popover": "1.1.1",
+    "@theinternetfolks/mate": "1.0.4",
+    "class-variance-authority": "0.7.0",
+    "culori": "4.0.1",
+    "deepmerge-ts": "7.1.5",
+    "embla-carousel-auto-scroll": "8.1.8",
+    "embla-carousel-autoplay": "8.6.0",
+    "embla-carousel-react": "8.1.8",
+    "embla-carousel-wheel-gestures": "8.0.1",
+    "fast-deep-equal": "3.1.3",
+    "html-react-parser": "5.1.12",
+    "isomorphic-dompurify": "2.14.0",
+    "lucide-react": "0.424.0",
+    "motion": "12.23.6",
+    "react-icons": "5.2.1",
+    "use-debounce": "10.0.2"
+  },
+  "devDependencies": {
+    "@levo/eslint-config": "workspace:*",
+    "@levo/ts-config": "workspace:*",
+    "@levo/tw-config": "workspace:*",
+    "@types/culori": "4.0.0",
+    "@types/node": "20.16.5",
+    "@types/react": "19.1.8",
+    "@types/react-dom": "19.1.6",
+    "@vitejs/plugin-react": "4.3.4",
+    "rollup-preserve-directives": "1.1.1",
+    "typescript": "5.8.2",
+    "vite": "6.0.5",
+    "vite-plugin-dts": "4.1.0"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  }
+}