@ayasofyazilim/ui 0.0.0 → 0.0.2

package/src/custom/schema-form/fields/field.tsx

@@ -1,67 +1,67 @@
-import { TableCell } from "@repo/ayasofyazilim-ui/components/table";
-import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
-import { FieldTemplateProps } from "@rjsf/utils";
-import { FieldLabel } from "../custom";
-
-export const FieldTemplate = (props: FieldTemplateProps) => {
-  const {
-    id,
-    classNames,
-    style,
-    label,
-    help,
-    required,
-    description,
-    errors,
-    children,
-    displayLabel,
-    hidden,
-    schema,
-    registry,
-  } = props;
-
-  const shouldRenderLabel = label && displayLabel && schema.type !== "boolean";
-  if (hidden) return null;
-  const isInArray = /root_\w+_\d+/.test(id);
-  const { useTableForArrayFields } = registry.formContext;
-  if (schema.type === "object" && isInArray && useTableForArrayFields)
-    return children;
-  if (isInArray && useTableForArrayFields)
-    return (
-      <TableCell
-        className={cn(
-          "p-0",
-          "*:data-wrapper:border-0 *:data-wrapper:shadow-none *:data-wrapper:rounded-none *:data-wrapper:justify-center",
-          "**:[[role=combobox]]:border-0 **:[[role=combobox]]:shadow-none **:[[role=combobox]]:rounded-none",
-          "**:data-[slot=input]:border-0 **:data-[slot=input]:shadow-none **:data-[slot=input]:rounded-none",
-          "**:data-rac:border-0 **:data-rac:shadow-none **:data-rac:rounded-none",
-          "*:data-[slot=drawer-trigger]:border-0"
-        )}
-      >
-        {children}
-      </TableCell>
-    );
-  return (
-    <div
-      className={cn(
-        "flex flex-col gap-1.5 h-max",
-        props.schema.type === "object" && "gap-3",
-        classNames,
-        label
-      )}
-      style={style}
-    >
-      {shouldRenderLabel && (
-        <FieldLabel
-          id={id}
-          label={label}
-          description={description}
-          required={required}
-        />
-      )}
-      {children}
-      {errors}
-      {help}
-    </div>
-  );
-};
+import { TableCell } from "@ayasofyazilim/ui/components/table";
+import { cn } from "@ayasofyazilim/ui/lib/utils";
+import { FieldTemplateProps } from "@rjsf/utils";
+import { FieldLabel } from "../custom";
+
+export const FieldTemplate = (props: FieldTemplateProps) => {
+  const {
+    id,
+    classNames,
+    style,
+    label,
+    help,
+    required,
+    description,
+    errors,
+    children,
+    displayLabel,
+    hidden,
+    schema,
+    registry,
+  } = props;
+
+  const shouldRenderLabel = label && displayLabel && schema.type !== "boolean";
+  if (hidden) return null;
+  const isInArray = /root_\w+_\d+/.test(id);
+  const { useTableForArrayFields } = registry.formContext;
+  if (schema.type === "object" && isInArray && useTableForArrayFields)
+    return children;
+  if (isInArray && useTableForArrayFields)
+    return (
+      <TableCell
+        className={cn(
+          "p-0",
+          "*:data-wrapper:border-0 *:data-wrapper:shadow-none *:data-wrapper:rounded-none *:data-wrapper:justify-center",
+          "**:[[role=combobox]]:border-0 **:[[role=combobox]]:shadow-none **:[[role=combobox]]:rounded-none",
+          "**:data-[slot=input]:border-0 **:data-[slot=input]:shadow-none **:data-[slot=input]:rounded-none",
+          "**:data-rac:border-0 **:data-rac:shadow-none **:data-rac:rounded-none",
+          "*:data-[slot=drawer-trigger]:border-0",
+        )}
+      >
+        {children}
+      </TableCell>
+    );
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-1.5 h-max",
+        props.schema.type === "object" && "gap-3",
+        classNames,
+        label,
+      )}
+      style={style}
+    >
+      {shouldRenderLabel && (
+        <FieldLabel
+          id={id}
+          label={label}
+          description={description}
+          required={required}
+        />
+      )}
+      {children}
+      {errors}
+      {help}
+    </div>
+  );
+};

package/src/custom/schema-form/fields/index.tsx

@@ -1,5 +1,5 @@
-export * from "./field";
-export * from "./object";
-export * from "./table-array/array-field-item";
-export * from "./table-array/array-field-template";
-export * from "./base-input-field";
+export * from "./field";
+export * from "./object";
+export * from "./table-array/array-field-item";
+export * from "./table-array/array-field-template";
+export * from "./base-input-field";

package/src/custom/schema-form/fields/object.tsx

@@ -1,12 +1,12 @@
-import { ObjectFieldTemplateProps } from "@rjsf/utils";
-import { Fragment } from "react";
-
-export const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
-  return (
-    <>
-      {props.properties.map((element, idx) => (
-        <Fragment key={element.name + idx}>{element.content}</Fragment>
-      ))}
-    </>
-  );
-};
+import { ObjectFieldTemplateProps } from "@rjsf/utils";
+import { Fragment } from "react";
+
+export const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
+  return (
+    <>
+      {props.properties.map((element, idx) => (
+        <Fragment key={element.name + idx}>{element.content}</Fragment>
+      ))}
+    </>
+  );
+};

package/src/custom/schema-form/fields/table-array/array-field-item.tsx

@@ -1,90 +1,90 @@
-import { Button } from "@repo/ayasofyazilim-ui/components/button";
-import { ButtonGroup } from "@repo/ayasofyazilim-ui/components/button-group";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@repo/ayasofyazilim-ui/components/popover";
-import { TableCell, TableRow } from "@repo/ayasofyazilim-ui/components/table";
-import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
-import {
-  ArrayFieldItemTemplateProps,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-} from "@rjsf/utils";
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  ClipboardCheck,
-  MoreHorizontal,
-  Trash2,
-} from "lucide-react";
-
-export function ArrayFieldItemTemplate<
-  T = any,
-  S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any,
->(props: ArrayFieldItemTemplateProps<T, S, F>) {
-  const { children, buttonsProps, hasToolbar } = props;
-  const {
-    hasCopy,
-    hasMoveDown,
-    hasMoveUp,
-    hasRemove,
-    onCopyItem,
-    onMoveDownItem,
-    onMoveUpItem,
-    onRemoveItem,
-  } = buttonsProps;
-  const isMultipleToolbar = hasRemove && (hasCopy || hasMoveDown || hasMoveUp);
-  return (
-    <TableRow className={cn("divide-x", props.className)} key={props.itemKey}>
-      {children}
-      <TableCell className="p-0">
-        {hasToolbar && hasRemove && !isMultipleToolbar && (
-          <Button
-            variant="ghost"
-            type="button"
-            onClick={buttonsProps.onRemoveItem}
-          >
-            <Trash2 className="size-4" />
-          </Button>
-        )}
-        {hasToolbar && isMultipleToolbar && (
-          <Popover>
-            <PopoverTrigger asChild>
-              <Button variant="ghost" type="button" className="">
-                <MoreHorizontal className="size-4" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent className="p-0 border-0 min-w-max">
-              <ButtonGroup>
-                {hasCopy && (
-                  <Button variant="outline" onClick={onCopyItem}>
-                    <ClipboardCheck className="size-4" />
-                  </Button>
-                )}
-                {hasMoveUp && (
-                  <Button variant="outline" onClick={onMoveUpItem}>
-                    <ArrowUpIcon className="size-4" />
-                  </Button>
-                )}
-                {hasRemove && (
-                  <Button variant="outline" onClick={onRemoveItem}>
-                    <Trash2 className="size-4" />
-                  </Button>
-                )}
-                {hasMoveDown && (
-                  <Button variant="outline" onClick={onMoveDownItem}>
-                    <ArrowDownIcon className="size-4" />
-                  </Button>
-                )}
-              </ButtonGroup>
-            </PopoverContent>
-          </Popover>
-        )}
-      </TableCell>
-    </TableRow>
-  );
-}
+import { Button } from "@ayasofyazilim/ui/components/button";
+import { ButtonGroup } from "@ayasofyazilim/ui/components/button-group";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@ayasofyazilim/ui/components/popover";
+import { TableCell, TableRow } from "@ayasofyazilim/ui/components/table";
+import { cn } from "@ayasofyazilim/ui/lib/utils";
+import {
+  ArrayFieldItemTemplateProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils";
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  ClipboardCheck,
+  MoreHorizontal,
+  Trash2,
+} from "lucide-react";
+
+export function ArrayFieldItemTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: ArrayFieldItemTemplateProps<T, S, F>) {
+  const { children, buttonsProps, hasToolbar } = props;
+  const {
+    hasCopy,
+    hasMoveDown,
+    hasMoveUp,
+    hasRemove,
+    onCopyItem,
+    onMoveDownItem,
+    onMoveUpItem,
+    onRemoveItem,
+  } = buttonsProps;
+  const isMultipleToolbar = hasRemove && (hasCopy || hasMoveDown || hasMoveUp);
+  return (
+    <TableRow className={cn("divide-x", props.className)} key={props.itemKey}>
+      {children}
+      <TableCell className="p-0">
+        {hasToolbar && hasRemove && !isMultipleToolbar && (
+          <Button
+            variant="ghost"
+            type="button"
+            onClick={buttonsProps.onRemoveItem}
+          >
+            <Trash2 className="size-4" />
+          </Button>
+        )}
+        {hasToolbar && isMultipleToolbar && (
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="ghost" type="button" className="">
+                <MoreHorizontal className="size-4" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0 border-0 min-w-max">
+              <ButtonGroup>
+                {hasCopy && (
+                  <Button variant="outline" onClick={onCopyItem}>
+                    <ClipboardCheck className="size-4" />
+                  </Button>
+                )}
+                {hasMoveUp && (
+                  <Button variant="outline" onClick={onMoveUpItem}>
+                    <ArrowUpIcon className="size-4" />
+                  </Button>
+                )}
+                {hasRemove && (
+                  <Button variant="outline" onClick={onRemoveItem}>
+                    <Trash2 className="size-4" />
+                  </Button>
+                )}
+                {hasMoveDown && (
+                  <Button variant="outline" onClick={onMoveDownItem}>
+                    <ArrowDownIcon className="size-4" />
+                  </Button>
+                )}
+              </ButtonGroup>
+            </PopoverContent>
+          </Popover>
+        )}
+      </TableCell>
+    </TableRow>
+  );
+}

package/src/custom/schema-form/fields/table-array/array-field-template.tsx

@@ -1,115 +1,115 @@
-import { Button } from "@repo/ayasofyazilim-ui/components/button";
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@repo/ayasofyazilim-ui/components/table";
-import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
-import {
-  ArrayFieldTemplateProps,
-  buttonId,
-  getTemplate,
-  getUiOptions,
-} from "@rjsf/utils";
-import { PlusCircle } from "lucide-react";
-
-export function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
-  const {
-    canAdd,
-    disabled,
-    fieldPathId,
-    uiSchema,
-    items,
-    optionalDataControl,
-    onAddClick,
-    readonly,
-    registry,
-    required,
-    schema,
-    title,
-  } = props;
-  const uiOptions = getUiOptions(uiSchema);
-  const ArrayFieldDescriptionTemplate = getTemplate(
-    "ArrayFieldDescriptionTemplate",
-    registry,
-    uiOptions
-  );
-  const ArrayFieldTitleTemplate = getTemplate(
-    "ArrayFieldTitleTemplate",
-    registry,
-    uiOptions
-  );
-  const showOptionalDataControlInTitle = !readonly && !disabled;
-
-  return (
-    <div className="border rounded-md overflow-hidden">
-      <Table key={`array-item-list-${fieldPathId.$id}`} className="caption-top">
-        {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
-        <TableCaption className="border-b mt-0  [&_h5]:font-medium [&_h5]:text-black **:data-[slot=separator]:hidden">
-          <ArrayFieldTitleTemplate
-            fieldPathId={fieldPathId}
-            title={uiOptions.title || title}
-            schema={schema}
-            uiSchema={uiSchema}
-            required={required}
-            registry={registry}
-            optionalDataControl={
-              showOptionalDataControlInTitle ? optionalDataControl : undefined
-            }
-          />
-          <ArrayFieldDescriptionTemplate
-            fieldPathId={fieldPathId}
-            description={uiOptions.description || schema.description}
-            schema={schema}
-            uiSchema={uiSchema}
-            registry={registry}
-          />
-        </TableCaption>
-        <TableHeader>
-          <TableRow className="divide-x">
-            {Object.keys(
-              (schema?.items as { properties: Record<string, string> })
-                ?.properties || {}
-            ).map((item) => {
-              const itemsUiSchema =
-                typeof uiSchema?.items === "function"
-                  ? undefined
-                  : (uiSchema?.items as
-                      | Record<string, { "ui:title": string }>
-                      | undefined);
-              const title =
-                itemsUiSchema?.[item as string]?.["ui:title"] || item;
-              return (
-                <TableHead
-                  key={item}
-                  className={cn("h-9", !canAdd && "nth-last-2:border-0!")}
-                >
-                  {title}
-                </TableHead>
-              );
-            })}
-            <TableHead className={cn("p-0 size-9")}>
-              {canAdd && (
-                <Button
-                  id={buttonId(fieldPathId, "add")}
-                  onClick={onAddClick}
-                  disabled={disabled || readonly}
-                  className="rounded-none h-full"
-                  variant="ghost"
-                >
-                  <PlusCircle className="size-4" />
-                </Button>
-              )}
-            </TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody className="[&_tr:last-child>td]:rounded-md">
-          {items}
-        </TableBody>
-      </Table>
-    </div>
-  );
-}
+import { Button } from "@ayasofyazilim/ui/components/button";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@ayasofyazilim/ui/components/table";
+import { cn } from "@ayasofyazilim/ui/lib/utils";
+import {
+  ArrayFieldTemplateProps,
+  buttonId,
+  getTemplate,
+  getUiOptions,
+} from "@rjsf/utils";
+import { PlusCircle } from "lucide-react";
+
+export function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
+  const {
+    canAdd,
+    disabled,
+    fieldPathId,
+    uiSchema,
+    items,
+    optionalDataControl,
+    onAddClick,
+    readonly,
+    registry,
+    required,
+    schema,
+    title,
+  } = props;
+  const uiOptions = getUiOptions(uiSchema);
+  const ArrayFieldDescriptionTemplate = getTemplate(
+    "ArrayFieldDescriptionTemplate",
+    registry,
+    uiOptions,
+  );
+  const ArrayFieldTitleTemplate = getTemplate(
+    "ArrayFieldTitleTemplate",
+    registry,
+    uiOptions,
+  );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
+
+  return (
+    <div className="border rounded-md overflow-hidden">
+      <Table key={`array-item-list-${fieldPathId.$id}`} className="caption-top">
+        {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
+        <TableCaption className="border-b mt-0  [&_h5]:font-medium [&_h5]:text-black **:data-[slot=separator]:hidden">
+          <ArrayFieldTitleTemplate
+            fieldPathId={fieldPathId}
+            title={uiOptions.title || title}
+            schema={schema}
+            uiSchema={uiSchema}
+            required={required}
+            registry={registry}
+            optionalDataControl={
+              showOptionalDataControlInTitle ? optionalDataControl : undefined
+            }
+          />
+          <ArrayFieldDescriptionTemplate
+            fieldPathId={fieldPathId}
+            description={uiOptions.description || schema.description}
+            schema={schema}
+            uiSchema={uiSchema}
+            registry={registry}
+          />
+        </TableCaption>
+        <TableHeader>
+          <TableRow className="divide-x">
+            {Object.keys(
+              (schema?.items as { properties: Record<string, string> })
+                ?.properties || {},
+            ).map((item) => {
+              const itemsUiSchema =
+                typeof uiSchema?.items === "function"
+                  ? undefined
+                  : (uiSchema?.items as
+                      | Record<string, { "ui:title": string }>
+                      | undefined);
+              const title =
+                itemsUiSchema?.[item as string]?.["ui:title"] || item;
+              return (
+                <TableHead
+                  key={item}
+                  className={cn("h-9", !canAdd && "nth-last-2:border-0!")}
+                >
+                  {title}
+                </TableHead>
+              );
+            })}
+            <TableHead className={cn("p-0 size-9")}>
+              {canAdd && (
+                <Button
+                  id={buttonId(fieldPathId, "add")}
+                  onClick={onAddClick}
+                  disabled={disabled || readonly}
+                  className="rounded-none h-full"
+                  variant="ghost"
+                >
+                  <PlusCircle className="size-4" />
+                </Button>
+              )}
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody className="[&_tr:last-child>td]:rounded-md">
+          {items}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}