droplinked-editor-configs 1.8.0

package/README.md

@@ -0,0 +1,149 @@
+# Droplinked Designer
+
+A visual page builder based on React and Puck Editor for creating and managing configurable components.
+
+---
+
+## Project Structure
+
+```
+src/
+├── configured-components/    # Define categories and components here
+│   └── [category]/           # Each folder is a category (e.g., design-layout)
+│       └── [component]/      # Each folder is a component
+│           ├── configs/      # Configs and interfaces
+│           └── ...           # Component files
+├── puck-editor/              # Puck editor core and wrapper
+├── App.tsx                   # Main entry and configuration
+└── ...
+```
+
+---
+
+## How to Add a New Component
+
+### 1. Define the Props Interface
+
+In the appropriate path (e.g., `src/configured-components/design-layout/[component]/configs/interface.ts`):
+
+```typescript
+export interface MyComponentProps {
+  foo: string;
+  bar: number;
+}
+```
+
+### 2. Implement the React Component
+
+In the appropriate path (e.g., `src/configured-components/design-layout/[component]/MyComponent.tsx`):
+
+```tsx
+import { DropZone } from "../../../puck-editor";
+import { MyComponentProps } from "./configs/interface";
+
+const MyComponent: React.FC<MyComponentProps> = ({ foo, bar }) => (
+  <div>{foo} - {bar}</div>
+);
+
+export default MyComponent;
+```
+
+### 3. Define the Component Config for Puck
+
+In `src/configured-components/design-layout/[component]/configs/[component]Config.tsx`:
+
+```tsx
+import MyComponent from "../MyComponent";
+import MyComponentVisualExample from "../MyComponentVisualExample";
+import { Config } from "../../../puck-editor";
+
+export const myComponentConfig: Config["components"][string] = {
+  label: "My Component",
+  labelIcon: <span>🌟</span>,
+  visualExample: <MyComponentVisualExample />,
+  fields: {
+    foo: { type: "text", label: "Foo" },
+    bar: { type: "number", label: "Bar" },
+  },
+  defaultProps: {
+    foo: "Hello",
+    bar: 1,
+  },
+  render: (props) => <MyComponent {...props} />,
+};
+```
+
+### 4. Add to Exports
+
+In `src/configured-components/design-layout/index.tsx`:
+
+```tsx
+import { myComponentConfig } from "./[component]/configs/[component]Config";
+
+export const designLayoutComponents = {
+  // ...existing code...
+  myComponent: myComponentConfig,
+};
+```
+
+### 5. Add to Category (Optional)
+
+In `src/configured-components/design-layout/categoryConfig.ts`:
+
+```typescript
+export const designLayoutCategory: Config["categories"] = {
+  designLayout: {
+    // ...existing code...
+    components: [
+      // ...existing code...
+      "myComponent"
+    ],
+  },
+};
+```
+
+---
+
+## Using Components in the Page Builder
+
+- After defining and adding your component, it will be available in the Puck Editor for selection and use.
+- You can drag & drop it onto the page and edit its properties.
+
+---
+
+## Important Notes
+
+- Each component must define its props in a type-safe manner.
+- Create a `visualExample` for each component so it can be displayed in the UI.
+- Use `DropZone` to create droppable areas.
+- The component name and its export key must be unique.
+
+---
+
+## Development & Running
+
+1. Install dependencies:
+```bash
+npm install
+```
+
+2. Run the project:
+```bash
+npm run dev
+```
+
+3. View the project in your browser:
+
+Default address: [http://localhost:5173](http://localhost:5173)
+
+---
+
+## Resources & Documentation
+
+- [Puck Editor Documentation](https://puck-editor.com/docs)
+- [React Documentation](https://react.dev/)
+- [TypeScript Handbook](https://www.typescriptlang.org/docs/)
+
+---
+
+For further guidance, refer to the project documentation or code comments.

package/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "components",
+    "utils": "lib/utils",
+    "ui": "components/ui",
+    "lib": "lib",
+    "hooks": "hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/dist/App.d.ts

@@ -0,0 +1,2 @@
+
+export default function App(): import("react/jsx-runtime").JSX.Element;

package/dist/AppStoreProvider.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { IAppStore } from 'lib/stores/app/appStore';
+
+interface AppStoreProviderProps {
+    appStoreData: IAppStore;
+    children: ReactNode;
+}
+interface AppStoreContextType extends IAppStore {
+}
+export declare const useAppStore: () => AppStoreContextType;
+export declare function AppStoreProvider({ appStoreData, children }: AppStoreProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Editor.d.ts

@@ -0,0 +1,3 @@
+import { EditorProps } from 'types/editorProps';
+
+export default function Editor(props: EditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/InnerContent.d.ts

@@ -0,0 +1,4 @@
+import { innerContentProps } from 'index';
+
+declare function InnerContent({ data, handleNavigate }: innerContentProps): import("react/jsx-runtime").JSX.Element;
+export default InnerContent;

package/dist/NavigationContext.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+
+interface NavigationContextType {
+    handleNavigate: (route: string) => void;
+}
+interface NavigationProviderProps {
+    children: ReactNode;
+    handleNavigate: (route: string) => void;
+}
+export declare function NavigationProvider({ children, handleNavigate }: NavigationProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useNavigation(): NavigationContextType;
+export {};

package/dist/PageFooter.d.ts

@@ -0,0 +1,4 @@
+import { PageFooterProps } from 'types/renderersProps';
+
+declare function PageFooter({ data, handleNavigate }: PageFooterProps): import("react/jsx-runtime").JSX.Element;
+export default PageFooter;

package/dist/PageHeader.d.ts

@@ -0,0 +1,4 @@
+import { PageHeaderProps } from 'types/renderersProps';
+
+declare function PageHeader(props: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default PageHeader;

package/dist/ShopProvider.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+
+interface ShopProviderProps {
+    shopName: string;
+    children: ReactNode;
+}
+interface ShopContextType {
+    loading: boolean;
+}
+export declare const useShopContext: () => ShopContextType;
+export declare function ShopProvider({ shopName, children }: ShopProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/apis/axiosConfig.d.ts

@@ -0,0 +1,2 @@
+declare const axiosInstance: import('axios').AxiosInstance;
+export default axiosInstance;

package/dist/apis/blogs/interfaces.d.ts

@@ -0,0 +1,64 @@
+export interface BlogPost {
+    id: string;
+    title: string;
+    content: string;
+    image: string;
+    createdAt: Date;
+    category: string;
+    searchEngineSummary: string;
+    tags: string[];
+    slug: string;
+}
+export interface IBlogContent {
+    _id: string;
+    shopID: string;
+    author: string;
+    content: string;
+    title: string;
+    writer: string;
+    isVisible: boolean;
+    category: string[];
+    tags: string[];
+    commentsCount: number;
+    image: string;
+    likes: number;
+    readTime: number;
+    version: number;
+    isFeatured: boolean;
+    seoData: {
+        metaDescription: string;
+        keywords: string[];
+        slug: string;
+        canonicalUrl: string;
+        ogTitle: string;
+        ogDescription: string;
+        ogImage: string;
+        structuredData: string;
+        _id: string;
+    };
+    mediaData: {
+        url: string;
+        title: string;
+        positionIndex: number;
+        _id: string;
+    }[];
+    publishedDate: string;
+    createdAt: string;
+    updatedAt: Date;
+    __v: number;
+}
+export interface Blog {
+    featured: BlogPost[];
+    recent: BlogPost[];
+    moreToDiscover: {
+        data: BlogPost[];
+        currentPage: string;
+        hasNextPage: boolean;
+        hasPreviousPage: boolean;
+        limit: string;
+        nextPage: number;
+        previousPage: number;
+        totalDocuments: number;
+        totalPages: number;
+    };
+}

package/dist/apis/blogs/services.d.ts

@@ -0,0 +1,10 @@
+import { Blog, IBlogContent } from './interfaces';
+
+export declare const getShopBlogsService: (shopName: string) => Promise<{
+    data: Blog;
+}>;
+export declare const getBlogByIdService: ({ slug }: {
+    slug: string;
+}) => Promise<{
+    data: IBlogContent;
+}>;

package/dist/apis/product/interface.d.ts

@@ -0,0 +1,113 @@
+import { IRuleSetID, IMedia as Media } from 'lib/models/product';
+import { ProductQuery } from 'lib/stores/productQueryStore/productQueryStore';
+
+export interface IGetProductsRequest extends ProductQuery {
+    page: number;
+    shopName: string;
+    limit: number;
+}
+export interface IHomePageProduct {
+    _id: string;
+    title: string;
+    slug: string;
+    skuIDs: {
+        options: IOption[];
+    }[];
+    media: Media[];
+    lowestSkuPrice: number;
+    gatedRuleset: boolean;
+    discountRuleset: boolean;
+}
+export interface IgetProductPublicService {
+    shopname: string;
+    productID: string;
+}
+export interface IGetProductBySlugService {
+    shopname: string;
+    slug: string;
+}
+export interface IGetProductByLinkId {
+    linkId: string;
+}
+interface IMedia {
+    isMain: boolean;
+    thumbnail: string;
+    url: string;
+    _id: string;
+}
+interface IProductCollection {
+    title: string;
+    ruleSetID?: IRuleSetID;
+}
+interface IRuleSet {
+    gated?: boolean;
+    redeemedNFTs?: any;
+    rules?: any;
+}
+export interface IOption {
+    variantName: string;
+    value: string;
+    caption: string;
+}
+export interface ISku {
+    _id: string;
+    price: number;
+    quantity: number;
+    image?: string;
+    weight: number;
+    dimensions: {
+        height: number;
+        length: number;
+        width: number;
+    };
+    options?: IOption[];
+}
+export interface IProduct {
+    description: string;
+    media: IMedia[];
+    productCollectionID: IProductCollection;
+    ruleSet?: IRuleSet;
+    slug: string | null;
+    title: string;
+    _id: string | null;
+    ownerID: string | null;
+    product_type: "NORMAL" | "PRINT_ON_DEMAND" | "DIGITAL";
+    skuIDs: ISku[];
+    launchDate?: string;
+    purchaseAvailable: boolean;
+    pod_blank_product_id: string;
+    nftData?: INftData;
+    m2m_positions: IM2MPosition[];
+    m2m_services: IM2MService[];
+    shippingType: string;
+}
+export interface IM2MPosition {
+    placement: string;
+    variantIDs: number[];
+    url: string;
+}
+export interface IM2MService {
+    _id: string;
+    name: string;
+    chain: string;
+}
+export interface INftData {
+    deployHash: string;
+    transactionUrl: string;
+    networkName: string;
+}
+export interface IShippingAvailbilityData {
+    statusCode: number;
+    message: string | null;
+    data: string[];
+}
+export declare const convertProductDataToModel: (data: any) => IProduct;
+export interface ISemanticSearchParams {
+    query: string;
+    limit?: number;
+}
+export interface NftImagesData {
+    nfts: string[];
+    domains: string[];
+}
+export {};

package/dist/apis/product/services.d.ts

@@ -0,0 +1,8 @@
+import { IGetProductByLinkId, IGetProductBySlugService, IgetProductPublicService, IGetProductsRequest, IProduct, ISemanticSearchParams, IShippingAvailbilityData } from './interface';
+
+export declare const getProductsService: (params: IGetProductsRequest) => Promise<any>;
+export declare const getProductPublicService: ({ productID, shopname }: IgetProductPublicService) => Promise<IProduct>;
+export declare const getProductBySlugService: ({ slug, shopname }: IGetProductBySlugService) => Promise<import('axios').AxiosResponse<any, any>>;
+export declare const getProductByLinkId: ({ linkId }: IGetProductByLinkId) => Promise<import('axios').AxiosResponse<any, any>>;
+export declare const getShippingAvailability: (productId: string) => Promise<IShippingAvailbilityData>;
+export declare const semanticSearchService: ({ query, limit }: ISemanticSearchParams) => Promise<import('axios').AxiosResponse<any, any>>;

package/dist/apis/shop/interface.d.ts

@@ -0,0 +1,25 @@
+export interface IshopDomainService {
+    domain: string;
+}
+export interface IgetShopService {
+    shopName: string;
+}
+export interface ProductFilterCollection {
+    _id: string;
+    title: string;
+    count: number;
+}
+export interface ProductFilterType {
+    label: string;
+    value: string;
+    count: number;
+}
+export interface ProductFilterPriceRange {
+    min: number;
+    max: number;
+}
+export interface ProductFiltersResponse {
+    collections: ProductFilterCollection[];
+    types: ProductFilterType[];
+    price: ProductFilterPriceRange;
+}

package/dist/apis/shop/service.d.ts

@@ -0,0 +1,7 @@
+import { IgetShopService, IshopDomainService, ProductFiltersResponse } from './interface';
+
+export declare const shopDomainService: ({ domain }: IshopDomainService) => Promise<import('axios').AxiosResponse<any, any>>;
+export declare const getShopService: ({ shopName }: IgetShopService) => Promise<import('axios').AxiosResponse<any, any>>;
+export declare const getAvailableProductFilters: (shopName: string) => Promise<{
+    data: ProductFiltersResponse;
+}>;

package/dist/assets/icon/Action/Archive/ArchiveLg.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const ArchiveLg: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Archive/ArchiveMd.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const ArchiveMd: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Archive/ArchiveSm.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const ArchiveSm: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Attachment/AttachmentLg.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const AttachmentLg: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Attachment/AttachmentMd.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const AttachmentMd: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Attachment/AttachmentSm.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const AttachmentSm: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Barcode/BarcodeLg.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const BarcodeLg: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Barcode/BarcodeMd.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const BarcodeMd: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Barcode/BarcodeSm.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const BarcodeSm: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Clipboard/ClipboardLg.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const ClipboardLg: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Clipboard/ClipboardMd.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const ClipboardMd: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Clipboard/ClipboardSm.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const ClipboardSm: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/ClipboardCopy/ClipboardcopyLg.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const ClipboardcopyLg: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/ClipboardCopy/ClipboardcopyMd.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const ClipboardcopyMd: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/ClipboardCopy/ClipboardcopySm.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const ClipboardcopySm: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Copy/CopyLg.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const CopyLg: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Copy/CopyMd.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const CopyMd: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Copy/CopySm.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const CopySm: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Dislike/DislikeLg.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const DislikeLg: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Dislike/DislikeMd.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const DislikeMd: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Dislike/DislikeSm.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const DislikeSm: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Document/DocumentLg.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const DocumentLg: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Document/DocumentMd.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const DocumentMd: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Document/DocumentSm.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const DocumentSm: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/DocumentDownload/DocumentdownloadLg.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const DocumentdownloadLg: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/DocumentDownload/DocumentdownloadMd.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const DocumentdownloadMd: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/DocumentDownload/DocumentdownloadSm.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const DocumentdownloadSm: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/DocumentUpload/DocumentuploadLg.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const DocumentuploadLg: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/DocumentUpload/DocumentuploadMd.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const DocumentuploadMd: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/DocumentUpload/DocumentuploadSm.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const DocumentuploadSm: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Download/DownloadLg.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const DownloadLg: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Download/DownloadMd.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const DownloadMd: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Download/DownloadSm.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const DownloadSm: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/assets/icon/Action/Edit/EditLg.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare const EditLg: ({ color, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;