Add a Breadcrumb component

[cruxcode]

The signature for the BreadCrumb component is as follows:

export type BreadCrumbProps = {
  styles: React.CSSProperties;
  custom: {
    divider: string;
    items: {
      // this will be visible
      name: string;
      // link
      link: string;
    }[];
  };
  onClick: (item: { name: string; link: string }) => {};
};

export const BreadCrumb: React.FC<BreadCrumbProps> = React.forwardRef(
  (ref, props) => {
    return <div></div>;
  }
);

The divider can be any string like "/" or ">" in the example images below. Each item will have a name and a link.

[cruxcode]

The steps to add a new component can be found in this discussion #169

[Jitulteron7]

@cruxcode plz assign me to this

[whiletrueee]

@cruxcode i would like to work on this , please assign me this work

[cruxcode]

@flying-solo @Jitulteron7 please take a note of the updated component signature.

[Jitulteron7]

@cruxcode plz look into this I have written it like this

import React, { forwardRef, useCallback } from "react";
import reactSchemaId from "@atrilabs/react-component-manifest-schema?id";
import type { ReactComponentManifestSchema } from "@atrilabs/react-component-manifest-schema/lib/types";
import iconSchemaId from "@atrilabs/component-icon-manifest-schema?id";
import { CommonIcon } from "../CommonIcon";
import CSSTreeId from "@atrilabs/app-design-forest/lib/cssTree?id";
import { CSSTreeOptions } from "@atrilabs/app-design-forest/lib/cssTree";
import { CustomPropsTreeOptions } from "@atrilabs/app-design-forest/lib/customPropsTree";
import CustomTreeId from "@atrilabs/app-design-forest/lib/customPropsTree?id";
import { ReactComponent as Icon } from "./icon.svg";
import {Link as RouterLink} from "react-router-dom";
type BreadCrumbProps = {
    divider: string;
    items: {
      // this will be visible
      name: string;
      // link
      link: string;
    }[];
    onClick: (item: { name: string; link: string }) => {};
  };

export  const BreadCrumb: React.FC<BreadCrumbProps> = (props:BreadCrumbProps) => {
    return (
    <div className="bread-crumb-container">
       {props.items.map((item,index)=>{
        return(<RouterLink to={item.link}>{item.name}</RouterLink>)
       })}
    </div>
    );
};

const cssTreeOptions: CSSTreeOptions = {
  flexContainerOptions: false,
  flexChildOptions: true,
  positionOptions: true,
  typographyOptions: true,
  spacingOptions: true,
  sizeOptions: true,
  borderOptions: true,
  outlineOptions: true,
  backgroundOptions: true,
  miscellaneousOptions: true,
};

const customTreeOptions: CustomPropsTreeOptions = {
  dataTypes: {
    text: "text",
  },
};

const compManifest: ReactComponentManifestSchema = {
  meta: { key: "BreadCrumb", category: "Basics" },
  render: {
    comp: BreadCrumb,
  },
  dev: {
    decorators: [],
    attachProps: {
      styles: {
        treeId: CSSTreeId,
        initialValue: {
          color: "#fff",
          backgroundColor: "#1890ff",
          paddingTop: "8px",
          paddingLeft: "15px",
          paddingBottom: "8px",
          paddingRight: "15px",
          fontSize: "16px",
          borderRadius: "2px",
          outline: "none",
          fontWeight: 400,
          textAlign: "center",
          borderWidth: "1px",
          borderStyle: "solid",
          borderColor: "#1890ff",
          cursor: "pointer",
          userSelect: "none",
        },
        treeOptions: cssTreeOptions,
        canvasOptions: { groupByBreakpoint: true },
      },
      custom: {
        treeId: CustomTreeId,
        initialValue: {
          text: "Submit",
        },
        treeOptions: customTreeOptions,
        canvasOptions: { groupByBreakpoint: false },
      },
    },
    attachCallbacks: {
      onClick: [{ type: "do_nothing" }],
    },
    defaultCallbackHandlers: {
      onClick: [{ sendEventData: true }],
    },
  },
};

const iconManifest = {
  panel: { comp: CommonIcon, props: { name: "BreadCrumb", svg: Icon } },
  drag: {
    comp: CommonIcon,
    props: { name: "BreadCrumb", containerStyle: { padding: "1rem", svg: Icon } },
  },
  renderSchema: compManifest,
};

export default {
  manifests: {
    [reactSchemaId]: [compManifest],
    [iconSchemaId]: [iconManifest],
  },
}
```;

but when I drag and drop breadcrumb arti engine shows whole screen white 
what should be the next step ?

[Jitulteron7]

and is their is an icon for breadcrumb also cuz for now I am using button icon

[cruxcode]

and is their is an icon for breadcrumb also cuz for now I am using button icon

Please see this discussion for icon #180

[Jitulteron7]

should I write like this or simple

export  const BreadCrumb: React.FC<BreadCrumbProps> = (props:BreadCrumbProps) => {
    return (
    <div className="bread-crumb-container">
       {props.items.map((item,index)=>{
        return(<RouterLink to={item.link}>{item.name}</RouterLink>)
       })}
    </div>
    );
};

or simple 

export const BreadCrumb: React.FC<BreadCrumbProps> = React.forwardRef(
  (ref, props) => {
    return <div></div>;
  }
);

@cruxcode

[cruxcode]

@cruxcode plz look into this I have written it like this

import React, { forwardRef, useCallback } from "react";
import reactSchemaId from "@atrilabs/react-component-manifest-schema?id";
import type { ReactComponentManifestSchema } from "@atrilabs/react-component-manifest-schema/lib/types";
import iconSchemaId from "@atrilabs/component-icon-manifest-schema?id";
import { CommonIcon } from "../CommonIcon";
import CSSTreeId from "@atrilabs/app-design-forest/lib/cssTree?id";
import { CSSTreeOptions } from "@atrilabs/app-design-forest/lib/cssTree";
import { CustomPropsTreeOptions } from "@atrilabs/app-design-forest/lib/customPropsTree";
import CustomTreeId from "@atrilabs/app-design-forest/lib/customPropsTree?id";
import { ReactComponent as Icon } from "./icon.svg";
import {Link as RouterLink} from "react-router-dom";
type BreadCrumbProps = {
    divider: string;
    items: {
      // this will be visible
      name: string;
      // link
      link: string;
    }[];
    onClick: (item: { name: string; link: string }) => {};
  };

export  const BreadCrumb: React.FC<BreadCrumbProps> = (props:BreadCrumbProps) => {
    return (
    <div className="bread-crumb-container">
       {props.items.map((item,index)=>{
        return(<RouterLink to={item.link}>{item.name}</RouterLink>)
       })}
    </div>
    );
};

const cssTreeOptions: CSSTreeOptions = {
  flexContainerOptions: false,
  flexChildOptions: true,
  positionOptions: true,
  typographyOptions: true,
  spacingOptions: true,
  sizeOptions: true,
  borderOptions: true,
  outlineOptions: true,
  backgroundOptions: true,
  miscellaneousOptions: true,
};

const customTreeOptions: CustomPropsTreeOptions = {
  dataTypes: {
    text: "text",
  },
};

const compManifest: ReactComponentManifestSchema = {
  meta: { key: "BreadCrumb", category: "Basics" },
  render: {
    comp: BreadCrumb,
  },
  dev: {
    decorators: [],
    attachProps: {
      styles: {
        treeId: CSSTreeId,
        initialValue: {
          color: "#fff",
          backgroundColor: "#1890ff",
          paddingTop: "8px",
          paddingLeft: "15px",
          paddingBottom: "8px",
          paddingRight: "15px",
          fontSize: "16px",
          borderRadius: "2px",
          outline: "none",
          fontWeight: 400,
          textAlign: "center",
          borderWidth: "1px",
          borderStyle: "solid",
          borderColor: "#1890ff",
          cursor: "pointer",
          userSelect: "none",
        },
        treeOptions: cssTreeOptions,
        canvasOptions: { groupByBreakpoint: true },
      },
      custom: {
        treeId: CustomTreeId,
        initialValue: {
          text: "Submit",
        },
        treeOptions: customTreeOptions,
        canvasOptions: { groupByBreakpoint: false },
      },
    },
    attachCallbacks: {
      onClick: [{ type: "do_nothing" }],
    },
    defaultCallbackHandlers: {
      onClick: [{ sendEventData: true }],
    },
  },
};

const iconManifest = {
  panel: { comp: CommonIcon, props: { name: "BreadCrumb", svg: Icon } },
  drag: {
    comp: CommonIcon,
    props: { name: "BreadCrumb", containerStyle: { padding: "1rem", svg: Icon } },
  },
  renderSchema: compManifest,
};

export default {
  manifests: {
    [reactSchemaId]: [compManifest],
    [iconSchemaId]: [iconManifest],
  },
}
```;

but when I drag and drop breadcrumb arti engine shows whole screen white 
what should be the next step ?

Hi @Jitulteron7,

Instead of copy-pasting the entire code here, you can provide a link to the file from your fork. You can also highlight portion of codes and then share links if you want suggestions on specific part of the code.

The mistakes that I see in your code are:

• You are not using a React.forwardRef component as mentioned in this issue's first message. Please read #169
• You haven't assigned ref to the top-most element in JSX. Please read #169
• The initial value for custom props is not correct for your Breadcrumb. Please read #187

[cruxcode]

Relevant discussions for this issue https://github.com/Atri-Labs/atrilabs-engine/discussions/169 https://github.com/Atri-Labs/atrilabs-engine/discussions/184 https://github.com/Atri-Labs/atrilabs-engine/discussions/180 https://github.com/Atri-Labs/atrilabs-engine/discussions/186 https://github.com/Atri-Labs/atrilabs-engine/discussions/187

[Jitulteron7]

https://github.com/Jitulteron7/atrilabs-engine/blob/breadcrumb-component/packages/react-component-manifests/src/manifests/BreadCrumb/BreadCrumb.tsx#L69-L74 @cruxcode in this link you can see customTreeOptions props type of items

https://github.com/Jitulteron7/atrilabs-engine/blob/breadcrumb-component/packages/react-component-manifests/src/manifests/BreadCrumb/BreadCrumb.tsx#L29-L35 here you can see that items:{name:"text",link:"text"} Is their is a props type where We can add items as object array ?

My current result you can see:

This is My breadcrumb items is now of size 2 as I have added two items value

Sorry for the inconvenience for the two separate link I actually dont know how to show multiple para highlights in the same file

[Jitulteron7]

@cruxcode I have implemented items like this items: { // this will be visible name: string; // link link: string; }[];

and datatype of items like items: "array"

but how will I enter values in this format items:[{name"test",link:"link1"}]

plz guid me

[cruxcode]

@Jitulteron7 as of now, when a prop type is a complex like in this case "array of objects", we just show dummy data in the frontend. This will change soon and we will handle a few like "array of objects with single fold" in the UI itself.

The way to show dummy data is by writing Dev component. See this for details https://github.com/Atri-Labs/atrilabs-engine/discussions/169#discussioncomment-3647028

[Jitulteron7]

@cruxcode Does this look good

https://user-images.githubusercontent.com/58761652/190608196-67d5aad8-2de7-4d6f-86d0-ce02252c00b7.mp4

[cruxcode]

@cruxcode Does this look good

WhatsApp.Video.2022-09-16.at.3.10.16.PM.mp4

@Jitulteron7 this looks correct!

[darshitac11]

@all-contributors please add @flying-solo for userTesting

[allcontributors[bot]]

@darshitac11

I've put up a pull request to add @flying-solo! :tada: