2296 lines
56 KiB
TypeScript
2296 lines
56 KiB
TypeScript
import { ComponentDefinition } from "../../../proxy/developerKit/componentInfo";
|
||
|
||
export const CUSTOM_COMPONENTS: ComponentDefinition[] = [
|
||
{
|
||
name: "Alert",
|
||
icon: "AlertCircle",
|
||
category: "feedback",
|
||
description: "Farklı türlerde uyarı mesajları gösterir",
|
||
properties: [
|
||
{
|
||
name: "children",
|
||
type: "string",
|
||
value: "Bu bir uyarı mesajıdır",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "type",
|
||
type: "select",
|
||
value: "warning",
|
||
category: "properties",
|
||
options: ["success", "warning", "danger", "info"],
|
||
},
|
||
{
|
||
name: "closable",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "customClose",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{ name: "customIcon", type: "string", value: "", category: "properties" },
|
||
{ name: "duration", type: "number", value: 3000, category: "properties" },
|
||
{
|
||
name: "title",
|
||
type: "string",
|
||
value: "Uyarı Başlığı",
|
||
category: "properties",
|
||
},
|
||
{ name: "rounded", type: "boolean", value: true, category: "properties" },
|
||
{
|
||
name: "showIcon",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "triggerByToast",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{ name: "onClose", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [],
|
||
},
|
||
{
|
||
name: "Avatar",
|
||
icon: "User",
|
||
category: "media",
|
||
description: "Kullanıcı profil resmi gösterir",
|
||
properties: [
|
||
{
|
||
name: "alt",
|
||
type: "string",
|
||
value: "Kullanıcı Avatarı",
|
||
category: "properties",
|
||
},
|
||
{ name: "icon", type: "string", value: "", category: "properties" },
|
||
{
|
||
name: "size",
|
||
type: "select",
|
||
value: "md",
|
||
category: "properties",
|
||
options: ["sm", "md", "lg"],
|
||
},
|
||
{
|
||
name: "shape",
|
||
type: "select",
|
||
value: "rounded",
|
||
category: "properties",
|
||
options: ["round", "square", "circle", "rounded"],
|
||
},
|
||
{
|
||
name: "src",
|
||
type: "string",
|
||
value:
|
||
"https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=150",
|
||
category: "properties",
|
||
},
|
||
{ name: "srcSet", type: "string", value: "", category: "properties" },
|
||
{
|
||
name: "title",
|
||
type: "string",
|
||
value: "Kullanıcı Avatarı",
|
||
category: "properties",
|
||
},
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{ name: "onClick", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [],
|
||
},
|
||
{
|
||
name: "Badge",
|
||
icon: "Tag",
|
||
category: "feedback",
|
||
description: "Sayaç ve durum göstergesi",
|
||
properties: [
|
||
{
|
||
name: "children",
|
||
type: "string",
|
||
value: "New",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "badgeStyle",
|
||
type: "object",
|
||
value: {},
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "content",
|
||
type: "string",
|
||
value: "5",
|
||
category: "properties",
|
||
},
|
||
{ name: "innerClass", type: "string", value: "", category: "styling" },
|
||
{ name: "maxCount", type: "number", value: 99, category: "properties" },
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
],
|
||
hooks: [],
|
||
},
|
||
{
|
||
name: "Button",
|
||
icon: "MousePointer",
|
||
category: "basic",
|
||
description: "Tıklanabilir buton bileşeni",
|
||
properties: [
|
||
{
|
||
name: "children",
|
||
type: "string",
|
||
value: "Buton",
|
||
category: "properties",
|
||
},
|
||
{ name: "active", type: "boolean", value: false, category: "properties" },
|
||
{ name: "block", type: "boolean", value: false, category: "properties" },
|
||
{ name: "color", type: "string", value: "blue-500", category: "styling" },
|
||
{
|
||
name: "disabled",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{ name: "icon", type: "string", value: "", category: "properties" },
|
||
{
|
||
name: "loading",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "shape",
|
||
type: "select",
|
||
value: "round",
|
||
category: "properties",
|
||
options: ["round", "circle", "none"],
|
||
},
|
||
{
|
||
name: "size",
|
||
type: "select",
|
||
value: "md",
|
||
category: "properties",
|
||
options: ["md", "sm", "lg", "xs"],
|
||
},
|
||
{
|
||
name: "variant",
|
||
type: "select",
|
||
value: "solid",
|
||
category: "properties",
|
||
options: ["solid", "twoTone", "plain", "default"],
|
||
},
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{ name: "onClick", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [],
|
||
},
|
||
{
|
||
name: "Card",
|
||
icon: "Square",
|
||
category: "layout",
|
||
description: "Başlık ve içerik alanı olan kart bileşeni",
|
||
properties: [
|
||
{
|
||
name: "children",
|
||
type: "string",
|
||
value:
|
||
"Kart içeriği buraya gelir. Lorem ipsum dolor sit amet consectetur adipisicing elit.",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "clickable",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{ name: "bodyClass", type: "string", value: "", category: "styling" },
|
||
{
|
||
name: "bordered",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "header",
|
||
type: "string",
|
||
value: "Kart Başlığı",
|
||
category: "properties",
|
||
},
|
||
{ name: "headerClass", type: "string", value: "", category: "styling" },
|
||
{
|
||
name: "headerBorder",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "headerExtra",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{ name: "footer", type: "string", value: "", category: "properties" },
|
||
{ name: "footerClass", type: "string", value: "", category: "styling" },
|
||
{
|
||
name: "footerBorder",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{ name: "onClick", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [],
|
||
},
|
||
{
|
||
name: "Checkbox",
|
||
icon: "Check",
|
||
category: "form",
|
||
description: "Onay kutusu bileşeni",
|
||
properties: [
|
||
{
|
||
name: "children",
|
||
type: "string",
|
||
value: "Onay Kutusu",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "checked",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{ name: "color", type: "string", value: "blue-500", category: "styling" },
|
||
{
|
||
name: "defaultChecked",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "disabled",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{ name: "name", type: "string", value: "", category: "properties" },
|
||
{
|
||
name: "readOnly",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{ name: "value", type: "string", value: "", category: "properties" },
|
||
{ name: "field", type: "string", value: null, category: "properties" },
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{ name: "onChange", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [
|
||
{ name: "useState", type: "useState", enabled: false },
|
||
{ name: "useRef", type: "useRef", enabled: false },
|
||
],
|
||
},
|
||
{
|
||
name: "DatePicker",
|
||
icon: "Calendar",
|
||
category: "form",
|
||
description: "Tarih seçici bileşeni",
|
||
properties: [
|
||
{
|
||
name: "closePickerOnChange",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "defaultOpen",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "defaultValue",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{ name: "value", type: "string", value: "", category: "properties" },
|
||
{
|
||
name: "inputFormat",
|
||
type: "string",
|
||
value: "YYYY-MM-DD",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "inputtableBlurClose",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "openPickerOnClear",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{
|
||
name: "clearable",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "clearButton",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "disabled",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "inputtable",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "inputPrefix",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "inputSuffix",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{ name: "name", type: "string", value: "date", category: "properties" },
|
||
{
|
||
name: "firstDayOfWeek",
|
||
type: "select",
|
||
value: "monday",
|
||
category: "properties",
|
||
options: ["sunday", "monday"],
|
||
},
|
||
{
|
||
name: "hideOutOfMonthDates",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "hideWeekdays",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "disableOutOfMonth",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "enableHeaderLabel",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "dateViewCount",
|
||
type: "number",
|
||
value: 1,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "defaultView",
|
||
type: "select",
|
||
value: "date",
|
||
category: "properties",
|
||
options: ["date", "month", "year"],
|
||
},
|
||
{
|
||
name: "placeholder",
|
||
type: "string",
|
||
value: "Tarih seçin",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "size",
|
||
type: "select",
|
||
value: "md",
|
||
category: "properties",
|
||
options: ["sm", "md", "lg"],
|
||
},
|
||
{ name: "type", type: "string", value: "date", category: "properties" },
|
||
{ name: "onChange", type: "function", value: "", category: "events" },
|
||
{ name: "onBlur", type: "function", value: "", category: "events" },
|
||
{
|
||
name: "onDropdownOpen",
|
||
type: "function",
|
||
value: "",
|
||
category: "events",
|
||
},
|
||
{
|
||
name: "onDropdownClose",
|
||
type: "function",
|
||
value: "",
|
||
category: "events",
|
||
},
|
||
{ name: "onFocus", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [{ name: "useState", type: "useState", enabled: false }],
|
||
},
|
||
{
|
||
name: "Dialog",
|
||
icon: "Square",
|
||
category: "interactive",
|
||
description: "Modal dialog penceresi",
|
||
properties: [
|
||
{
|
||
name: "title",
|
||
type: "string",
|
||
value: "Dialog Başlığı",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "children",
|
||
type: "string",
|
||
value: "Dialog içeriği buraya gelir.",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "closable",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "contentClassName",
|
||
type: "string",
|
||
value: "",
|
||
category: "styling",
|
||
},
|
||
{
|
||
name: "height",
|
||
type: "number",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{ name: "width", type: "number", value: 520, category: "properties" },
|
||
{ name: "isOpen", type: "boolean", value: false, category: "properties" },
|
||
{
|
||
name: "bodyOpenClassName",
|
||
type: "string",
|
||
value: "",
|
||
category: "styling",
|
||
},
|
||
{
|
||
name: "htmlOpenClassName",
|
||
type: "string",
|
||
value: "",
|
||
category: "styling",
|
||
},
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{ name: "onClose", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [{ name: "useState", type: "useState", enabled: false }],
|
||
},
|
||
{
|
||
name: "Drawer",
|
||
icon: "Sidebar",
|
||
category: "interactive",
|
||
description: "Yan panel bileşeni",
|
||
properties: [
|
||
{
|
||
name: "children",
|
||
type: "string",
|
||
value: "Drawer içeriği buraya gelir.",
|
||
category: "properties",
|
||
},
|
||
{ name: "bodyClass", type: "string", value: "", category: "styling" },
|
||
{
|
||
name: "closable",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "closeTimeoutMS",
|
||
type: "number",
|
||
value: 300,
|
||
category: "properties",
|
||
},
|
||
{ name: "footer", type: "string", value: "", category: "properties" },
|
||
{ name: "footerClass", type: "string", value: "", category: "styling" },
|
||
{ name: "headerClass", type: "string", value: "", category: "styling" },
|
||
{ name: "height", type: "number", value: 400, category: "properties" },
|
||
{
|
||
name: "lockScroll",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "placement",
|
||
type: "select",
|
||
value: "right",
|
||
category: "properties",
|
||
options: ["left", "right", "top", "bottom"],
|
||
},
|
||
{
|
||
name: "showBackdrop",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "title",
|
||
type: "string",
|
||
value: "Drawer Başlığı",
|
||
category: "properties",
|
||
},
|
||
{ name: "width", type: "number", value: 400, category: "properties" },
|
||
{ name: "isOpen", type: "boolean", value: false, category: "properties" },
|
||
{
|
||
name: "showOkButton",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "showCancelButton",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{ name: "onClose", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [{ name: "useState", type: "useState", enabled: false }],
|
||
},
|
||
{
|
||
name: "Dropdown",
|
||
icon: "MoreVertical",
|
||
category: "interactive",
|
||
description: "Açılır menü bileşeni",
|
||
properties: [
|
||
{
|
||
name: "title",
|
||
type: "string",
|
||
value: "Dropdown",
|
||
category: "properties",
|
||
},
|
||
{ name: "menuClass", type: "string", value: "", category: "styling" },
|
||
{ name: "menuStyle", type: "string", value: "", category: "styling" },
|
||
{
|
||
name: "disabled",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{ name: "activeKey", type: "string", value: "", category: "properties" },
|
||
{
|
||
name: "trigger",
|
||
type: "select",
|
||
value: "click",
|
||
category: "properties",
|
||
options: ["click", "hover", "context"],
|
||
},
|
||
{
|
||
name: "placement",
|
||
type: "string",
|
||
value: "bottom-start",
|
||
category: "properties",
|
||
},
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{
|
||
name: "items",
|
||
type: "array",
|
||
value: [
|
||
{ eventKey: "a", children: "Öğe A", to: "" },
|
||
{ eventKey: "b", children: "Öğe B", to: "" },
|
||
{ eventKey: "c", children: "Öğe C", to: "" },
|
||
],
|
||
category: "properties",
|
||
},
|
||
{ name: "onClick", type: "function", value: "", category: "events" },
|
||
{ name: "onMouseEnter", type: "function", value: "", category: "events" },
|
||
{ name: "onMouseLeave", type: "function", value: "", category: "events" },
|
||
{
|
||
name: "onContextMenu",
|
||
type: "function",
|
||
value: "",
|
||
category: "events",
|
||
},
|
||
{ name: "onSelect", type: "function", value: "", category: "events" },
|
||
{ name: "onOpen", type: "function", value: "", category: "events" },
|
||
{ name: "onClose", type: "function", value: "", category: "events" },
|
||
{ name: "onToggle", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [],
|
||
},
|
||
{
|
||
name: "Input",
|
||
icon: "Edit",
|
||
category: "form",
|
||
description: "Metin giriş alanı",
|
||
properties: [
|
||
{
|
||
name: "disabled",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "invalid",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{ name: "rows", type: "number", value: 3, category: "properties" },
|
||
{ name: "prefix", type: "string", value: "", category: "properties" },
|
||
{
|
||
name: "size",
|
||
type: "select",
|
||
value: "md",
|
||
category: "properties",
|
||
options: ["sm", "md", "lg"],
|
||
},
|
||
{ name: "suffix", type: "string", value: "", category: "properties" },
|
||
{
|
||
name: "textArea",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "type",
|
||
type: "select",
|
||
value: "text",
|
||
category: "properties",
|
||
options: [
|
||
"button",
|
||
"checkbox",
|
||
"color",
|
||
"date",
|
||
"datetime-local",
|
||
"email",
|
||
"file",
|
||
"hidden",
|
||
"image",
|
||
"month",
|
||
"number",
|
||
"password",
|
||
"radio",
|
||
"range",
|
||
"reset",
|
||
"search",
|
||
"submit",
|
||
"tel",
|
||
"text",
|
||
"time",
|
||
"url",
|
||
"week",
|
||
],
|
||
},
|
||
{
|
||
name: "unstyle",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{
|
||
name: "placeholder",
|
||
type: "string",
|
||
value: "Metin girin...",
|
||
category: "properties",
|
||
},
|
||
{ name: "value", type: "string", value: "", category: "properties" },
|
||
{ name: "name", type: "string", value: "", category: "properties" },
|
||
{
|
||
name: "autoComplete",
|
||
type: "select",
|
||
value: "off",
|
||
category: "properties",
|
||
options: ["on", "off"],
|
||
},
|
||
{
|
||
name: "autoFocus",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "readOnly",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "required",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "maxLength",
|
||
type: "number",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "minLength",
|
||
type: "number",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{ name: "pattern", type: "string", value: "", category: "properties" },
|
||
{ name: "onChange", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [
|
||
{ name: "useState", type: "useState", enabled: false, initialValue: "" },
|
||
{ name: "useRef", type: "useRef", enabled: false }
|
||
],
|
||
},
|
||
{
|
||
name: "Menu",
|
||
icon: "Menu",
|
||
category: "navigation",
|
||
description: "Navigasyon menüsü",
|
||
properties: [
|
||
{ name: "children", type: "string", value: "", category: "properties" },
|
||
{
|
||
name: "menuItemHeight",
|
||
type: "number",
|
||
value: 40,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "sideCollapsed",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "variant",
|
||
type: "select",
|
||
value: "light",
|
||
category: "properties",
|
||
options: ["light", "dark", "themed", "transparent"],
|
||
},
|
||
{ name: "icon", type: "string", value: "", category: "properties" },
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{
|
||
name: "items",
|
||
type: "array",
|
||
value: [
|
||
{
|
||
eventKey: "ayarlar",
|
||
icon: "",
|
||
children: "Ayarlar",
|
||
label: "Ayarlar",
|
||
disabled: false,
|
||
},
|
||
{
|
||
eventKey: "mesaj",
|
||
icon: "",
|
||
children: "Mesaj",
|
||
label: "Mesaj",
|
||
disabled: false,
|
||
},
|
||
{
|
||
eventKey: "galeri",
|
||
icon: "",
|
||
children: "Galeri",
|
||
label: "Galeri",
|
||
disabled: false,
|
||
},
|
||
],
|
||
category: "properties",
|
||
},
|
||
{ name: "onSelect", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [],
|
||
},
|
||
{
|
||
name: "Notification",
|
||
icon: "Bell",
|
||
category: "feedback",
|
||
description: "Bildirim bileşeni",
|
||
properties: [
|
||
{
|
||
name: "children",
|
||
type: "string",
|
||
value: "Bu bir bildirim mesajıdır",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "closable",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{ name: "customIcon", type: "string", value: "", category: "properties" },
|
||
{ name: "duration", type: "number", value: 3000, category: "properties" },
|
||
{
|
||
name: "title",
|
||
type: "string",
|
||
value: "Bildirim Başlığı",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "triggerByToast",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "type",
|
||
type: "select",
|
||
value: "info",
|
||
category: "properties",
|
||
options: ["success", "warning", "danger", "info"],
|
||
},
|
||
{ name: "width", type: "string", value: "350", category: "properties" },
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{ name: "onClose", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [],
|
||
},
|
||
{
|
||
name: "Pagination",
|
||
icon: "ChevronRight",
|
||
category: "navigation",
|
||
description: "Sayfalama bileşeni",
|
||
properties: [
|
||
{ name: "currentPage", type: "number", value: 1, category: "properties" },
|
||
{
|
||
name: "displayTotal",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{ name: "pageSize", type: "number", value: 10, category: "properties" },
|
||
{ name: "total", type: "number", value: 100, category: "properties" },
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{ name: "onChange", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [{ name: "useState", type: "useState", enabled: false }],
|
||
},
|
||
{
|
||
name: "Progress",
|
||
icon: "Activity",
|
||
category: "feedback",
|
||
description: "İlerleme çubuğu",
|
||
properties: [
|
||
{ name: "customInfo", type: "string", value: "", category: "properties" },
|
||
{ name: "color", type: "string", value: "", category: "styling" },
|
||
{ name: "gapDegree", type: "number", value: 0, category: "properties" },
|
||
{
|
||
name: "gapPosition",
|
||
type: "select",
|
||
value: "top",
|
||
category: "properties",
|
||
options: ["top", "bottom", "left", "right"],
|
||
},
|
||
{ name: "percent", type: "number", value: 50, category: "properties" },
|
||
{
|
||
name: "showInfo",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "size",
|
||
type: "select",
|
||
value: "md",
|
||
category: "properties",
|
||
options: ["sm", "md"],
|
||
},
|
||
{
|
||
name: "strokeLinecap",
|
||
type: "select",
|
||
value: "round",
|
||
category: "properties",
|
||
options: ["round", "square"],
|
||
},
|
||
{ name: "strokeWidth", type: "number", value: 8, category: "properties" },
|
||
{ name: "width", type: "number", value: 120, category: "properties" },
|
||
{
|
||
name: "variant",
|
||
type: "select",
|
||
value: "line",
|
||
category: "properties",
|
||
options: ["line", "circle"],
|
||
},
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
],
|
||
hooks: [],
|
||
},
|
||
{
|
||
name: "Radio.Group",
|
||
icon: "Circle",
|
||
category: "form",
|
||
description: "Radio buton grubu",
|
||
properties: [
|
||
{
|
||
name: "checked",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{ name: "color", type: "string", value: "blue-500", category: "styling" },
|
||
{
|
||
name: "defaultChecked",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "disabled",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "name",
|
||
type: "string",
|
||
value: "radioGroup",
|
||
category: "properties",
|
||
},
|
||
{ name: "value", type: "string", value: "", category: "properties" },
|
||
{
|
||
name: "vertical",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "readOnly",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{
|
||
name: "items",
|
||
type: "array",
|
||
value: [
|
||
{ value: "secenekA", label: "Seçenek A", disabled: false },
|
||
{ value: "secenekB", label: "Seçenek B", disabled: false },
|
||
{ value: "secenekC", label: "Seçenek C", disabled: false },
|
||
],
|
||
category: "properties",
|
||
},
|
||
{ name: "onChange", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [{ name: "useState", type: "useState", enabled: false }],
|
||
},
|
||
{
|
||
name: "Segment",
|
||
icon: "ToggleLeft",
|
||
category: "form",
|
||
description: "Segment kontrol bileşeni",
|
||
properties: [
|
||
{ name: "children", type: "string", value: "", category: "properties" },
|
||
{
|
||
name: "defaultValue",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "selectionType",
|
||
type: "select",
|
||
value: "single",
|
||
category: "properties",
|
||
options: ["single", "multiple"],
|
||
},
|
||
{
|
||
name: "size",
|
||
type: "select",
|
||
value: "md",
|
||
category: "properties",
|
||
options: ["lg", "md", "sm", "xs"],
|
||
},
|
||
{ name: "value", type: "string", value: "", category: "properties" },
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{
|
||
name: "items",
|
||
type: "array",
|
||
value: [
|
||
{ label: "Seçenek 1", value: "secenekA", icon: "", disabled: false },
|
||
{ label: "Seçenek 2", value: "secenekB", icon: "", disabled: false },
|
||
{ label: "Seçenek 3", value: "secenekC", icon: "", disabled: false },
|
||
],
|
||
category: "properties",
|
||
},
|
||
{ name: "onChange", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [],
|
||
},
|
||
{
|
||
name: "Select",
|
||
icon: "ChevronDown",
|
||
category: "form",
|
||
description: "Açılır seçim listesi",
|
||
properties: [
|
||
{ name: "children", type: "string", value: "", category: "properties" },
|
||
{
|
||
name: "size",
|
||
type: "select",
|
||
value: "md",
|
||
category: "properties",
|
||
options: ["sm", "md", "lg"],
|
||
},
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{ name: "value", type: "string", value: "", category: "properties" },
|
||
{
|
||
name: "disabled",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "multiple",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "clearable",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "searchable",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "items",
|
||
type: "array",
|
||
value: [
|
||
{ label: "Seçenek 1", value: "secenekA", disabled: false },
|
||
{ label: "Seçenek 2", value: "secenekB", disabled: false },
|
||
{ label: "Seçenek 3", value: "secenekC", disabled: false },
|
||
],
|
||
category: "properties",
|
||
},
|
||
{ name: "onChange", type: "function", value: "", category: "events" },
|
||
{ name: "onSearch", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [{ name: "useState", type: "useState", enabled: false }],
|
||
},
|
||
{
|
||
name: "Skeleton",
|
||
icon: "Square",
|
||
category: "feedback",
|
||
description: "Yükleme iskelet bileşeni",
|
||
properties: [
|
||
{
|
||
name: "animated",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{ name: "height", type: "string", value: "", category: "properties" },
|
||
{
|
||
name: "variant",
|
||
type: "select",
|
||
value: "block",
|
||
category: "properties",
|
||
options: ["block", "circle"],
|
||
},
|
||
{ name: "width", type: "string", value: "", category: "properties" },
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
],
|
||
hooks: [],
|
||
},
|
||
{
|
||
name: "Spinner",
|
||
icon: "Loader",
|
||
category: "feedback",
|
||
description: "Yükleme döner bileşeni",
|
||
properties: [
|
||
{ name: "color", type: "string", value: "#3b82f6", category: "styling" },
|
||
{
|
||
name: "enableTheme",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "isSpining",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "size",
|
||
type: "number",
|
||
value: "md",
|
||
category: "properties",
|
||
},
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
],
|
||
hooks: [],
|
||
},
|
||
{
|
||
name: "Steps",
|
||
icon: "GitBranch",
|
||
category: "navigation",
|
||
description: "Adım adım navigasyon göstergesi",
|
||
properties: [
|
||
{ name: "children", type: "string", value: "", category: "properties" },
|
||
{ name: "current", type: "number", value: 0, category: "properties" },
|
||
{
|
||
name: "status",
|
||
type: "select",
|
||
value: "in-progress",
|
||
category: "properties",
|
||
options: ["in-progress", "error", "complete", "pending"],
|
||
},
|
||
{
|
||
name: "vertical",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{
|
||
name: "items",
|
||
type: "array",
|
||
value: [
|
||
{
|
||
title: "Giriş",
|
||
description: "Kullanıcı doğrulama adımı",
|
||
icon: "",
|
||
},
|
||
{ title: "Sipariş", description: "Sipariş onay adımı", icon: "" },
|
||
{
|
||
title: "İnceleme",
|
||
description: "İnceleme ve işleme adımı",
|
||
icon: "",
|
||
},
|
||
{ title: "Onay", description: "Son onay adımı", icon: "" },
|
||
],
|
||
category: "properties",
|
||
},
|
||
{ name: "onChange", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [{ name: "useState", type: "useState", enabled: false }],
|
||
},
|
||
{
|
||
name: "Switcher",
|
||
icon: "ToggleLeft",
|
||
category: "form",
|
||
description: "Açma/kapama anahtarı",
|
||
properties: [
|
||
{
|
||
name: "checked",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "checkedContent",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{ name: "color", type: "string", value: "", category: "styling" },
|
||
{
|
||
name: "defaultChecked",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "disabled",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "isLoading",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{ name: "name", type: "string", value: "", category: "properties" },
|
||
{
|
||
name: "readOnly",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "unCheckedContent",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{ name: "onChange", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [{ name: "useState", type: "useState", enabled: false }],
|
||
},
|
||
{
|
||
name: "Table",
|
||
icon: "Table",
|
||
category: "data",
|
||
description: "Veri tablosu",
|
||
properties: [
|
||
{
|
||
name: "borderlessRow",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "compact",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "hoverable",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "overflow",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{
|
||
name: "columns",
|
||
type: "array",
|
||
value: [
|
||
{ title: "Ad", dataIndex: "name", key: "name" },
|
||
{ title: "Yaş", dataIndex: "age", key: "age" },
|
||
{ title: "Şehir", dataIndex: "city", key: "city" },
|
||
],
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "data",
|
||
type: "array",
|
||
value: [
|
||
{ key: 1, name: "Ali Veli", age: 32, city: "İstanbul" },
|
||
{ key: 2, name: "Ayşe Fatma", age: 28, city: "Ankara" },
|
||
{ key: 3, name: "Mehmet Can", age: 35, city: "İzmir" },
|
||
],
|
||
category: "properties",
|
||
},
|
||
],
|
||
hooks: [],
|
||
},
|
||
{
|
||
name: "Tabs",
|
||
icon: "Tabs",
|
||
category: "navigation",
|
||
description: "Sekmeli navigasyon",
|
||
properties: [
|
||
{
|
||
name: "defaultValue",
|
||
type: "string",
|
||
value: "tab1",
|
||
category: "properties",
|
||
},
|
||
{ name: "value", type: "string", value: "", category: "properties" },
|
||
{
|
||
name: "variant",
|
||
type: "select",
|
||
value: "underline",
|
||
category: "properties",
|
||
options: ["underline", "pill"],
|
||
},
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{
|
||
name: "items",
|
||
type: "array",
|
||
value: [
|
||
{
|
||
key: "tab1",
|
||
label: "Sekme 1",
|
||
children: "İlk sekme içeriği",
|
||
disabled: false,
|
||
},
|
||
{
|
||
key: "tab2",
|
||
label: "Sekme 2",
|
||
children: "İkinci sekme içeriği",
|
||
disabled: false,
|
||
},
|
||
{
|
||
key: "tab3",
|
||
label: "Sekme 3",
|
||
children: "Üçüncü sekme içeriği",
|
||
disabled: false,
|
||
},
|
||
],
|
||
category: "properties",
|
||
},
|
||
{ name: "onChange", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [{ name: "useState", type: "useState", enabled: false }],
|
||
},
|
||
{
|
||
name: "Tag",
|
||
icon: "Hash",
|
||
category: "feedback",
|
||
description: "Etiket bileşeni",
|
||
properties: [
|
||
{
|
||
name: "children",
|
||
type: "string",
|
||
value: "Etiket",
|
||
category: "properties",
|
||
},
|
||
{ name: "prefix", type: "boolean", value: false, category: "properties" },
|
||
{ name: "suffix", type: "boolean", value: false, category: "properties" },
|
||
{ name: "prefixClass", type: "string", value: "", category: "styling" },
|
||
{ name: "suffixClass", type: "string", value: "", category: "styling" },
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{ name: "onClose", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [],
|
||
},
|
||
{
|
||
name: "TimeInput",
|
||
icon: "Clock",
|
||
category: "form",
|
||
description: "Saat giriş bileşeni",
|
||
properties: [
|
||
{ name: "amLabel", type: "string", value: "AM", category: "properties" },
|
||
{
|
||
name: "amPmPlaceholder",
|
||
type: "string",
|
||
value: "AM",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "clearable",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "defaultValue",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "disabled",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "format",
|
||
type: "select",
|
||
value: "24",
|
||
category: "properties",
|
||
options: ["12", "24"],
|
||
},
|
||
{
|
||
name: "invalid",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{ name: "name", type: "string", value: "", category: "properties" },
|
||
{ name: "pmLabel", type: "string", value: "PM", category: "properties" },
|
||
{ name: "prefix", type: "string", value: "", category: "properties" },
|
||
{
|
||
name: "showSeconds",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "size",
|
||
type: "select",
|
||
value: "md",
|
||
category: "properties",
|
||
options: ["sm", "md", "lg"],
|
||
},
|
||
{ name: "suffix", type: "string", value: "", category: "properties" },
|
||
{
|
||
name: "timeFieldPlaceholder",
|
||
type: "string",
|
||
value: "--:--",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "timeFieldClass",
|
||
type: "string",
|
||
value: "",
|
||
category: "styling",
|
||
},
|
||
{
|
||
name: "unstyle",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{ name: "value", type: "string", value: "", category: "properties" },
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{ name: "onchange", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [{ name: "useState", type: "useState", enabled: false }],
|
||
},
|
||
{
|
||
name: "Tooltip",
|
||
icon: "MessageCircle",
|
||
category: "interactive",
|
||
description: "İpucu bileşeni",
|
||
properties: [
|
||
{
|
||
name: "children",
|
||
type: "string",
|
||
value: "Üzerime gel",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "placement",
|
||
type: "select",
|
||
value: "top",
|
||
category: "properties",
|
||
options: [
|
||
"right",
|
||
"left",
|
||
"top",
|
||
"bottom",
|
||
"bottom-start",
|
||
"top-start",
|
||
"top-end",
|
||
"bottom-end",
|
||
"right-start",
|
||
"right-end",
|
||
"left-start",
|
||
"left-end",
|
||
],
|
||
},
|
||
{
|
||
name: "title",
|
||
type: "string",
|
||
value: "Tooltip içeriği",
|
||
category: "properties",
|
||
},
|
||
{ name: "wrapperClass", type: "string", value: "", category: "styling" },
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
],
|
||
hooks: [{ name: "useState", type: "useState", enabled: false }],
|
||
},
|
||
{
|
||
name: "Upload",
|
||
icon: "Upload",
|
||
category: "form",
|
||
description: "Dosya yükleme bileşeni",
|
||
properties: [
|
||
{
|
||
name: "children",
|
||
type: "string",
|
||
value: "Dosya yükle",
|
||
category: "properties",
|
||
},
|
||
{ name: "accept", type: "string", value: "", category: "properties" },
|
||
{
|
||
name: "disabled",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "draggable",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{ name: "fileList", type: "array", value: [], category: "properties" },
|
||
{ name: "fileListClass", type: "string", value: "", category: "styling" },
|
||
{ name: "fileItemClass", type: "string", value: "", category: "styling" },
|
||
{
|
||
name: "multiple",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "showList",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{ name: "tip", type: "string", value: "", category: "properties" },
|
||
{ name: "uploadLimit", type: "number", value: 5, category: "properties" },
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{ name: "beforeUpload", type: "function", value: "", category: "events" },
|
||
{ name: "onChange", type: "function", value: "", category: "events" },
|
||
{ name: "onFileRemove", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [],
|
||
},
|
||
{
|
||
name: "Grid",
|
||
icon: "Grid3x3",
|
||
category: "layout",
|
||
description: "Responsive grid sistemi - sütun ve satır bazlı düzen",
|
||
properties: [
|
||
{ name: "children", type: "string", value: "", category: "properties" },
|
||
{
|
||
name: "cols",
|
||
type: "select",
|
||
value: "3",
|
||
category: "properties",
|
||
options: [
|
||
"1",
|
||
"2",
|
||
"3",
|
||
"4",
|
||
"5",
|
||
"6",
|
||
"7",
|
||
"8",
|
||
"9",
|
||
"10",
|
||
"11",
|
||
"12",
|
||
],
|
||
},
|
||
{
|
||
name: "rows",
|
||
type: "select",
|
||
value: "2",
|
||
category: "properties",
|
||
options: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
|
||
},
|
||
{
|
||
name: "gap",
|
||
type: "select",
|
||
value: "4",
|
||
category: "properties",
|
||
options: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
|
||
},
|
||
{
|
||
name: "colGap",
|
||
type: "select",
|
||
value: "4",
|
||
category: "properties",
|
||
options: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
|
||
},
|
||
{
|
||
name: "rowGap",
|
||
type: "select",
|
||
value: "4",
|
||
category: "properties",
|
||
options: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
|
||
},
|
||
{
|
||
name: "responsive",
|
||
type: "boolean",
|
||
value: true,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "smCols",
|
||
type: "select",
|
||
value: "1",
|
||
category: "properties",
|
||
options: [
|
||
"1",
|
||
"2",
|
||
"3",
|
||
"4",
|
||
"5",
|
||
"6",
|
||
"7",
|
||
"8",
|
||
"9",
|
||
"10",
|
||
"11",
|
||
"12",
|
||
],
|
||
},
|
||
{
|
||
name: "mdCols",
|
||
type: "select",
|
||
value: "2",
|
||
category: "properties",
|
||
options: [
|
||
"1",
|
||
"2",
|
||
"3",
|
||
"4",
|
||
"5",
|
||
"6",
|
||
"7",
|
||
"8",
|
||
"9",
|
||
"10",
|
||
"11",
|
||
"12",
|
||
],
|
||
},
|
||
{
|
||
name: "lgCols",
|
||
type: "select",
|
||
value: "3",
|
||
category: "properties",
|
||
options: [
|
||
"1",
|
||
"2",
|
||
"3",
|
||
"4",
|
||
"5",
|
||
"6",
|
||
"7",
|
||
"8",
|
||
"9",
|
||
"10",
|
||
"11",
|
||
"12",
|
||
],
|
||
},
|
||
{
|
||
name: "xlCols",
|
||
type: "select",
|
||
value: "4",
|
||
category: "properties",
|
||
options: [
|
||
"1",
|
||
"2",
|
||
"3",
|
||
"4",
|
||
"5",
|
||
"6",
|
||
"7",
|
||
"8",
|
||
"9",
|
||
"10",
|
||
"11",
|
||
"12",
|
||
],
|
||
},
|
||
{
|
||
name: "autoFit",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "minColWidth",
|
||
type: "string",
|
||
value: "200px",
|
||
category: "properties",
|
||
},
|
||
{ name: "height", type: "string", value: "auto", category: "properties" },
|
||
{ name: "className", type: "string", value: "", category: "styling" },
|
||
{
|
||
name: "items",
|
||
type: "array",
|
||
value: [
|
||
{
|
||
id: "grid-item-1",
|
||
content: "Grid Item 1",
|
||
colSpan: 1,
|
||
rowSpan: 1,
|
||
colStart: 1,
|
||
rowStart: 1,
|
||
className: "bg-blue-100 p-4 border rounded",
|
||
},
|
||
{
|
||
id: "grid-item-2",
|
||
content: "Grid Item 2",
|
||
colSpan: 1,
|
||
rowSpan: 1,
|
||
colStart: 2,
|
||
rowStart: 1,
|
||
className: "bg-green-100 p-4 border rounded",
|
||
},
|
||
{
|
||
id: "grid-item-3",
|
||
content: "Grid Item 3",
|
||
colSpan: 1,
|
||
rowSpan: 1,
|
||
colStart: 3,
|
||
rowStart: 1,
|
||
className: "bg-yellow-100 p-4 border rounded",
|
||
},
|
||
{
|
||
id: "grid-item-4",
|
||
content: "Grid Item 4",
|
||
colSpan: 2,
|
||
rowSpan: 1,
|
||
colStart: 1,
|
||
rowStart: 2,
|
||
className: "bg-purple-100 p-4 border rounded",
|
||
},
|
||
{
|
||
id: "grid-item-5",
|
||
content: "Grid Item 5",
|
||
colSpan: 1,
|
||
rowSpan: 1,
|
||
colStart: 3,
|
||
rowStart: 2,
|
||
className: "bg-red-100 p-4 border rounded",
|
||
},
|
||
],
|
||
category: "properties",
|
||
},
|
||
],
|
||
hooks: [],
|
||
},
|
||
];
|
||
|
||
export const HTML_ELEMENTS: ComponentDefinition[] = [
|
||
{
|
||
name: "div",
|
||
icon: "Square",
|
||
category: "basic",
|
||
description: "Genel amaçlı blok düzeyinde HTML elemanı",
|
||
properties: [
|
||
{
|
||
name: "children",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "className",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "style",
|
||
type: "object",
|
||
value: {},
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "onClick",
|
||
type: "string",
|
||
value: "",
|
||
category: "events",
|
||
},
|
||
{
|
||
name: "onMouseEnter",
|
||
type: "string",
|
||
value: "",
|
||
category: "events",
|
||
},
|
||
{
|
||
name: "onMouseLeave",
|
||
type: "string",
|
||
value: "",
|
||
category: "events",
|
||
},
|
||
],
|
||
hooks: [
|
||
{
|
||
name: "useState",
|
||
type: "useState",
|
||
enabled: false,
|
||
},
|
||
{
|
||
name: "useRef",
|
||
type: "useRef",
|
||
enabled: false,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: "input",
|
||
icon: "Input",
|
||
category: "form",
|
||
description: "Giriş alanı bileşeni",
|
||
properties: [
|
||
{
|
||
name: "type",
|
||
type: "select",
|
||
value: "text",
|
||
options: ["text", "password", "email", "number", "tel", "url"],
|
||
category: "properties",
|
||
},
|
||
{ name: "value", type: "string", value: "", category: "properties" },
|
||
{
|
||
name: "placeholder",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "disabled",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "required",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{ name: "className", type: "string", value: "", category: "properties" },
|
||
{ name: "onClick", type: "function", value: "", category: "events" },
|
||
{ name: "onKeyDown", type: "function", value: "", category: "events" },
|
||
{ name: "onKeyUp", type: "function", value: "", category: "events" },
|
||
{ name: "onChange", type: "function", value: "", category: "events" },
|
||
{ name: "onFocus", type: "function", value: "", category: "events" },
|
||
{ name: "onBlur", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [
|
||
{ name: "useState", type: "useState", enabled: false, initialValue: "" },
|
||
{ name: "useRef", type: "useRef", enabled: false },
|
||
],
|
||
},
|
||
{
|
||
name: "button",
|
||
icon: "MousePointerClick",
|
||
category: "form",
|
||
description: "Buton bileşeni",
|
||
properties: [
|
||
{
|
||
name: "children",
|
||
type: "string",
|
||
value: "",
|
||
description: "Button text",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "type",
|
||
type: "select",
|
||
value: "button",
|
||
options: ["button", "submit", "reset"],
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "disabled",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "className",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "onClick",
|
||
type: "function",
|
||
value: "",
|
||
category: "events",
|
||
},
|
||
],
|
||
hooks: [
|
||
{
|
||
name: "useState",
|
||
type: "useState",
|
||
enabled: false,
|
||
initialValue: false,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: "textarea",
|
||
icon: "AlignLeft",
|
||
category: "form",
|
||
description: "Çok satırlı metin giriş bileşeni",
|
||
properties: [
|
||
{
|
||
name: "value",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "placeholder",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "rows",
|
||
type: "number",
|
||
value: 4,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "cols",
|
||
type: "number",
|
||
value: 50,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "disabled",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "className",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "onChange",
|
||
type: "function",
|
||
value: "",
|
||
category: "events",
|
||
},
|
||
],
|
||
hooks: [
|
||
{
|
||
name: "useState",
|
||
type: "useState",
|
||
enabled: false,
|
||
initialValue: "",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: "select",
|
||
icon: "ListTree",
|
||
category: "form",
|
||
description: "Seçim kutusu bileşeni",
|
||
properties: [
|
||
{
|
||
name: "value",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "disabled",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "multiple",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "className",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "onChange",
|
||
type: "function",
|
||
value: "",
|
||
category: "events",
|
||
},
|
||
],
|
||
hooks: [
|
||
{
|
||
name: "useState",
|
||
type: "useState",
|
||
enabled: false,
|
||
initialValue: "",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: "checkbox",
|
||
icon: "CheckSquare",
|
||
category: "form",
|
||
description: "Checkbox bileşeni",
|
||
properties: [
|
||
{
|
||
name: "checked",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "disabled",
|
||
type: "boolean",
|
||
value: false,
|
||
category: "properties",
|
||
},
|
||
{ name: "className", type: "string", value: "", category: "properties" },
|
||
{ name: "onChange", type: "function", value: "", category: "events" },
|
||
],
|
||
hooks: [
|
||
{
|
||
name: "useState",
|
||
type: "useState",
|
||
enabled: false,
|
||
initialValue: false,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: "p",
|
||
icon: "Text",
|
||
category: "basic",
|
||
description: "Paragraf metni gösterir",
|
||
properties: [
|
||
{
|
||
name: "children",
|
||
type: "string",
|
||
value: "",
|
||
description: "Text content",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "className",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "onClick",
|
||
type: "function",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
],
|
||
hooks: [
|
||
{
|
||
name: "useState",
|
||
type: "useState",
|
||
enabled: false,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: "span",
|
||
icon: "Type",
|
||
category: "basic",
|
||
description: "Satır içi metin elemanı",
|
||
properties: [
|
||
{
|
||
name: "children",
|
||
type: "string",
|
||
value: "",
|
||
description: "Text content",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "className",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "onClick",
|
||
type: "function",
|
||
value: "",
|
||
category: "events",
|
||
},
|
||
],
|
||
hooks: [
|
||
{
|
||
name: "useState",
|
||
type: "useState",
|
||
enabled: false,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: "h1",
|
||
icon: "Heading1",
|
||
category: "basic",
|
||
description: "Başlık metni (h1)",
|
||
properties: [
|
||
{
|
||
name: "children",
|
||
type: "string",
|
||
value: "",
|
||
description: "Heading text",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "className",
|
||
type: "string",
|
||
value: "",
|
||
category: "styling",
|
||
},
|
||
{
|
||
name: "onClick",
|
||
type: "function",
|
||
value: "",
|
||
description: "Click event handler",
|
||
category: "events",
|
||
},
|
||
],
|
||
hooks: [
|
||
{
|
||
name: "useState",
|
||
type: "useState",
|
||
enabled: false,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: "h2",
|
||
icon: "Heading2",
|
||
category: "basic",
|
||
description: "Başlık metni (h2)",
|
||
properties: [
|
||
{
|
||
name: "children",
|
||
type: "string",
|
||
value: "",
|
||
description: "Heading text",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "className",
|
||
type: "string",
|
||
value: "",
|
||
category: "styling",
|
||
},
|
||
{
|
||
name: "onClick",
|
||
type: "function",
|
||
value: "",
|
||
description: "Click event handler",
|
||
category: "events",
|
||
},
|
||
],
|
||
hooks: [
|
||
{
|
||
name: "useState",
|
||
type: "useState",
|
||
enabled: false,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: "h3",
|
||
icon: "Heading3",
|
||
category: "basic",
|
||
description: "Başlık metni (h3)",
|
||
properties: [
|
||
{
|
||
name: "children",
|
||
type: "string",
|
||
value: "",
|
||
description: "Heading text",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "className",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "onClick",
|
||
type: "function",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
],
|
||
hooks: [
|
||
{
|
||
name: "useState",
|
||
type: "useState",
|
||
enabled: false,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: "img",
|
||
icon: "Image",
|
||
category: "media",
|
||
description: "Görsel bileşeni",
|
||
properties: [
|
||
{
|
||
name: "src",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "alt",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "width",
|
||
type: "number",
|
||
value: 0,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "height",
|
||
type: "number",
|
||
value: 0,
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "className",
|
||
type: "string",
|
||
value: "",
|
||
category: "properties",
|
||
},
|
||
{
|
||
name: "onClick",
|
||
type: "function",
|
||
value: "",
|
||
category: "events",
|
||
},
|
||
{
|
||
name: "onLoad",
|
||
type: "string",
|
||
value: "",
|
||
category: "events",
|
||
},
|
||
],
|
||
hooks: [
|
||
{
|
||
name: "useState",
|
||
type: "useState",
|
||
enabled: false,
|
||
},
|
||
],
|
||
},
|
||
];
|
||
|
||
export const getAllComponentDefinitions = (): ComponentDefinition[] => {
|
||
//return [...HTML_ELEMENTS, ...CUSTOM_COMPONENTS];
|
||
return [...CUSTOM_COMPONENTS];
|
||
};
|
||
|
||
export const getComponentDefinition = (
|
||
name: string
|
||
): ComponentDefinition | undefined => {
|
||
return getAllComponentDefinitions().find((comp) => comp.name === name);
|
||
};
|
||
|
||
export interface PanelState {
|
||
toolbox: boolean;
|
||
properties: boolean;
|
||
}
|