I’m using loader.
I created a npm package in order to have all my code components there as a design system. That package is installed in my project. In studio, all code components are visible and function as expected. But only on local or deployed version is where this issue happens.
Example of a code component from my npm package:
import React from "react";
import registerComponent, {
CodeComponentMeta,
} from "@plasmicapp/host/registerComponent";
import { Registerable } from "./registerable";
import { theme } from "antd";
import { Icon } from "./registerIcon";
interface DropdownItemProps {
leftSection : any;
rightSection : any;
label : string;
isSelected : boolean;
onClick : any;
onIsSelectedChange : any;
className : string;
selectedPosition : "left" | "right";
}
export const DropdownItem = ({
leftSection,
rightSection,
label,
isSelected,
selectedPosition,
onClick,
className,
} : DropdownItemProps ) => {
const { token } = theme.useToken();
const dropdownItemStyles : React.CSSProperties = {
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
padding: "0px 8px",
gap: "12px",
borderRadius: "4px",
cursor: "pointer",
transition : "all 0.3s ease-in-out",
background : token.colorBgContainer,
maxHeight : "34px",
minHeight : "34px",
margin : "2px",
};
const labelStyle : React.CSSProperties = {
fontSize: "14px",
fontWeight: isSelected ? "500" : "400",
lineHeight: "20px",
color: token.colorText,
width: "100%",
maxWidth: "100%",
whiteSpace: "pre",
textOverflow : "ellipsis",
overflow : "hidden",
};
return (
<div
className={`dropdown-item ${className}`}
style={dropdownItemStyles}
onClick={ () => onClick() }
>
{ (isSelected && selectedPosition === "left") && (
<Icon
size={16}
variant="duotone"
icon="CheckCircle"
color={token.colorPrimary}
/>
)}
{leftSection}
<p className="dropdown-item-label" style={labelStyle}>{label}</p>
{rightSection}
{ (isSelected && selectedPosition === "right") && (
<Icon
size={16}
variant="duotone"
icon="CheckCircle"
color={token.colorPrimary}
/>
)}
</div>
);
};
export const dropdownItemMeta: CodeComponentMeta<DropdownItemProps> = {
name: "DropdownItem",
displayName: "Dropdown Item",
states : {
isSelected : {
type : "writable",
variableType : "boolean",
valueProp : "isSelected",
onChangeProp : "onIsSelectedChange",
},
},
props: {
label : {
type : "string",
defaultValue : "Dropdown Item",
},
isSelected : {
type : "boolean",
defaultValue : false,
},
selectedPosition : {
type : "choice",
options : ["left", "right"],
defaultValue : "right",
advanced : true,
},
rightSection : {
type : "slot",
hidePlaceholder : true,
},
leftSection : {
type : "slot",
defaultValue: [
{
type: "component",
name: "Icon",
},
],
hidePlaceholder : true,
},
onClick : {
type : "eventHandler",
argTypes : [],
},
onIsSelectedChange : {
type : "eventHandler",
argTypes : [],
},
},
importPath: "inprodi-design-system",
importName: "DropdownItem",
};
export function registerDropdownItem(
loader?: Registerable,
customDropdownItemMeta?: CodeComponentMeta<DropdownItemProps>
) {
const doRegisterComponent: typeof registerComponent = (...args) =>
loader ? loader.registerComponent(...args) : registerComponent(...args);
doRegisterComponent(DropdownItem, customDropdownItemMeta ?? dropdownItemMeta);
}
Example of how code components are registered in index of npm package:
import { Registerable } from "./registerable";
import { registerAdvancedTable } from "./registerAdvancedTable";
import { registerAdvancedTableCell } from "./registerAdvancedTableCell";
import { registerAdvancedTableColumn } from "./registerAdvancedTableColumn";
import { registerAutoComplete } from "./registerAutoComplete";
import { registerAvatar } from "./registerAvatar";
import { registerButton } from "./registerButton";
import { registerCard } from "./registerCard";
import { registerConfirmation } from "./registerConfirmation";
import { registerDivider } from "./registerDivider";
import { registerDrawer } from "./registerDrawer";
import { registerDropdown } from "./registerDropdown";
import { registerDropdownItem } from "./registerDropdownItem";
import { registerForm } from "./registerForm";
import { registerFormField } from "./registerFormField";
import { registerIcon } from "./registerIcon";
import { registerInput } from "./registerInput";
import { registerLayout } from "./registerLayout";
import { registerPasswordInput } from "./registerPasswordInput";
import { registerProgress } from "./registerProgress";
import { registerRate } from "./registerRate";
import { registerSegmented } from "./registerSegmented";
import { registerSelect } from "./registerSelect";
import { registerSkeleton } from "./registerSkeleton";
import { registerSlider } from "./registerSlider";
import { registerStat } from "./registerStat";
import { registerTag } from "./registerTag";
export function registerAll(loader?: Registerable) {
registerTag(loader);
registerStat(loader);
registerCard(loader);
registerForm(loader);
registerIcon(loader);
registerRate(loader);
registerInput(loader);
registerSelect(loader);
registerDrawer(loader);
registerAvatar(loader);
registerButton(loader);
registerLayout(loader);
registerSlider(loader);
registerDivider(loader);
registerDropdown(loader);
registerSkeleton(loader);
registerProgress(loader);
registerSegmented(loader);
registerFormField(loader);
registerConfirmation(loader);
registerAutoComplete(loader);
registerDropdownItem(loader);
registerPasswordInput(loader);
registerAdvancedTable(loader);
registerAdvancedTableCell(loader);
registerAdvancedTableColumn(loader);
};
For a reason, only in my local view is when this happens. Plasmic studio works perfectly in edit and preview mode.
