@ayasofyazilim/ui 0.0.0 → 0.0.2

package/src/custom/schema-form/widgets/email.tsx

@@ -1,34 +1,34 @@
-import { EmailInput } from "@repo/ayasofyazilim-ui/custom/email-input";
-import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
-import { WidgetProps } from "@rjsf/utils";
-import { useState } from "react";
-
-export const EmailInputWidget = (props: WidgetProps) => {
-  const {
-    uiSchema,
-    className,
-    onChange,
-    value,
-    defaultValue,
-    disabled,
-    readOnly,
-  } = props;
-
-  const [email, setEmail] = useState(value || "");
-  return (
-    <EmailInput
-      disabled={disabled}
-      id={props.id}
-      value={email}
-      onValueChange={(val) => {
-        setEmail(val);
-        onChange(val);
-      }}
-      defaultValue={defaultValue}
-      readOnly={readOnly}
-      placeholder={props.placeholder || "Try typing 'john@gmail.com'"}
-      className={cn("w-full", className)}
-      suggestions={uiSchema?.["ui:baseList"] ?? []}
-    />
-  );
-};
+import { EmailInput } from "@ayasofyazilim/ui/custom/email-input";
+import { cn } from "@ayasofyazilim/ui/lib/utils";
+import { WidgetProps } from "@rjsf/utils";
+import { useState } from "react";
+
+export const EmailInputWidget = (props: WidgetProps) => {
+  const {
+    uiSchema,
+    className,
+    onChange,
+    value,
+    defaultValue,
+    disabled,
+    readOnly,
+  } = props;
+
+  const [email, setEmail] = useState(value || "");
+  return (
+    <EmailInput
+      disabled={disabled}
+      id={props.id}
+      value={email}
+      onValueChange={(val) => {
+        setEmail(val);
+        onChange(val);
+      }}
+      defaultValue={defaultValue}
+      readOnly={readOnly}
+      placeholder={props.placeholder || "Try typing 'john@gmail.com'"}
+      className={cn("w-full", className)}
+      suggestions={uiSchema?.["ui:baseList"] ?? []}
+    />
+  );
+};

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

@@ -1,10 +1,10 @@
-export * from "./boolean";
-export * from "./combobox";
-export * from "./date";
-export * from "./email";
-export * from "./password";
-export * from "./url";
-export * from "./phone";
-export * from "./selectable";
-export * from "./select";
-export * from "./string-array";
+export * from "./boolean";
+export * from "./combobox";
+export * from "./date";
+export * from "./email";
+export * from "./password";
+export * from "./url";
+export * from "./phone";
+export * from "./selectable";
+export * from "./select";
+export * from "./string-array";

package/src/custom/schema-form/widgets/password.tsx

@@ -1,40 +1,40 @@
-import { WidgetProps } from "@rjsf/utils";
-import { PasswordInput } from "@repo/ayasofyazilim-ui/custom/password-input";
-
-export const PasswordInputWidget = (props: WidgetProps) => {
-  const {
-    uiSchema,
-    id,
-    className,
-    onChange,
-    value,
-    defaultValue,
-    disabled,
-    readOnly,
-  } = props;
-
-  const required = uiSchema?.["ui:required"] || props.required;
-
-  return (
-    <PasswordInput
-      id={id}
-      data-testid={id}
-      onBlur={props.onBlur && ((event) => props.onBlur(id, event.target.value))}
-      className={className}
-      required={required}
-      onChange={(event) => {
-        if (event.target.value === "") {
-          onChange(undefined);
-        } else {
-          onChange(event.target.value);
-        }
-      }}
-      defaultValue={value || defaultValue}
-      readOnly={readOnly}
-      disabled={disabled}
-      autoComplete={uiSchema?.["ui:autocomplete"]}
-      showGenerator={uiSchema?.["ui:showGenerator"]}
-      passwordLength={uiSchema?.["ui:passwordLength"] || 10}
-    />
-  );
-};
+import { WidgetProps } from "@rjsf/utils";
+import { PasswordInput } from "@ayasofyazilim/ui/custom/password-input";
+
+export const PasswordInputWidget = (props: WidgetProps) => {
+  const {
+    uiSchema,
+    id,
+    className,
+    onChange,
+    value,
+    defaultValue,
+    disabled,
+    readOnly,
+  } = props;
+
+  const required = uiSchema?.["ui:required"] || props.required;
+
+  return (
+    <PasswordInput
+      id={id}
+      data-testid={id}
+      onBlur={props.onBlur && ((event) => props.onBlur(id, event.target.value))}
+      className={className}
+      required={required}
+      onChange={(event) => {
+        if (event.target.value === "") {
+          onChange(undefined);
+        } else {
+          onChange(event.target.value);
+        }
+      }}
+      defaultValue={value || defaultValue}
+      readOnly={readOnly}
+      disabled={disabled}
+      autoComplete={uiSchema?.["ui:autocomplete"]}
+      showGenerator={uiSchema?.["ui:showGenerator"]}
+      passwordLength={uiSchema?.["ui:passwordLength"] || 10}
+    />
+  );
+};

package/src/custom/schema-form/widgets/phone.tsx

@@ -1,40 +1,40 @@
-"use client";
-
-import {
-  PhoneInput,
-  PhoneInputProps,
-} from "@repo/ayasofyazilim-ui/custom/phone-input";
-import { WidgetProps } from "@rjsf/utils";
-
-export function CustomPhoneFieldWithParse<T>(
-  props: Partial<Omit<WidgetProps<T>, "onChange" | "id">> &
-    Omit<PhoneInputProps, "required" | "defaultValue" | "id">
-) {
-  const required = props.required || props.uiSchema?.["ui:required"];
-  return (
-    <PhoneInput
-      {...props}
-      id={props.id || ""}
-      required={required}
-      defaultValue={undefined}
-    />
-  );
-}
-export const PhoneWithParseWidget = CustomPhoneFieldWithParse;
-
-export const PhoneWithValueWidget = function CustomPhoneFieldWithValue(
-  props: WidgetProps & { defaultCountry?: string }
-) {
-  const { onChange, uiSchema } = props;
-  const required = uiSchema?.["ui:required"] || props.required;
-  return (
-    <PhoneInput
-      {...props}
-      required={required}
-      defaultValue={undefined}
-      onChange={(values) => {
-        onChange(values.value);
-      }}
-    />
-  );
-};
+"use client";
+
+import {
+  PhoneInput,
+  PhoneInputProps,
+} from "@ayasofyazilim/ui/custom/phone-input";
+import { WidgetProps } from "@rjsf/utils";
+
+export function CustomPhoneFieldWithParse<T>(
+  props: Partial<Omit<WidgetProps<T>, "onChange" | "id">> &
+    Omit<PhoneInputProps, "required" | "defaultValue" | "id">,
+) {
+  const required = props.required || props.uiSchema?.["ui:required"];
+  return (
+    <PhoneInput
+      {...props}
+      id={props.id || ""}
+      required={required}
+      defaultValue={undefined}
+    />
+  );
+}
+export const PhoneWithParseWidget = CustomPhoneFieldWithParse;
+
+export const PhoneWithValueWidget = function CustomPhoneFieldWithValue(
+  props: WidgetProps & { defaultCountry?: string },
+) {
+  const { onChange, uiSchema } = props;
+  const required = uiSchema?.["ui:required"] || props.required;
+  return (
+    <PhoneInput
+      {...props}
+      required={required}
+      defaultValue={undefined}
+      onChange={(values) => {
+        onChange(values.value);
+      }}
+    />
+  );
+};

package/src/custom/schema-form/widgets/select.tsx

@@ -1,105 +1,105 @@
-import {
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
-} from "@rjsf/utils";
-
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@repo/ayasofyazilim-ui/components/select";
-import { Selectable } from "@repo/ayasofyazilim-ui/custom/selectable";
-import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
-
-/** The `SelectWidget` is a widget for rendering dropdowns.
- *  It is typically used with string properties constrained with enum options.
- *
- * @param props - The `WidgetProps` for this component
- */
-
-interface EnumOption {
-  value: string;
-  label: string;
-  // Add other properties if your options have them (e.g., key, rawData)
-}
-
-// 2. Define the shape of the transformed item (optional, but good for clarity)
-interface MappedItem {
-  value: string;
-  label: string;
-  disabled: boolean;
-}
-
-export function SelectWidget<
-  T = any,
-  S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any,
->({
-  id,
-  options,
-  required,
-  disabled,
-  value,
-  multiple,
-  onChange,
-  rawErrors = [],
-  className,
-}: WidgetProps<T, S, F>) {
-  const { enumOptions, enumDisabled, emptyValue: optEmptyValue } = options;
-  const items: MappedItem[] = (enumOptions as EnumOption[])?.map(
-    ({ value, label }: EnumOption) => {
-      return {
-        value,
-        label,
-        disabled: Array.isArray(enumDisabled) && enumDisabled.includes(value),
-      };
-    }
-  );
-  const cnClassName = cn(
-    "w-full",
-    { "border-destructive": rawErrors.length > 0 },
-    className
-  );
-  return !multiple ? (
-    <Select
-      required={required}
-      value={value}
-      onValueChange={(val) => {
-        onChange(val);
-      }}
-    >
-      <SelectTrigger className={cnClassName} id={id}>
-        <SelectValue placeholder={optEmptyValue} />
-      </SelectTrigger>
-      <SelectContent>
-        {items.map((item) => {
-          return (
-            <SelectItem
-              disabled={item.disabled}
-              key={item.value}
-              value={item.value}
-            >
-              {item.label}
-            </SelectItem>
-          );
-        })}
-      </SelectContent>
-    </Select>
-  ) : (
-    <Selectable<MappedItem>
-      id={id}
-      getKey={(opt) => opt.value}
-      getLabel={(opt) => opt.label}
-      options={items}
-      onChange={(val) => {
-        onChange(val.map((item) => item.value));
-      }}
-      disabled={disabled}
-      makeAChoiceText={optEmptyValue}
-    />
-  );
-}
+import {
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from "@rjsf/utils";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@ayasofyazilim/ui/components/select";
+import { Selectable } from "@ayasofyazilim/ui/custom/selectable";
+import { cn } from "@ayasofyazilim/ui/lib/utils";
+
+/** The `SelectWidget` is a widget for rendering dropdowns.
+ *  It is typically used with string properties constrained with enum options.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+
+interface EnumOption {
+  value: string;
+  label: string;
+  // Add other properties if your options have them (e.g., key, rawData)
+}
+
+// 2. Define the shape of the transformed item (optional, but good for clarity)
+interface MappedItem {
+  value: string;
+  label: string;
+  disabled: boolean;
+}
+
+export function SelectWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>({
+  id,
+  options,
+  required,
+  disabled,
+  value,
+  multiple,
+  onChange,
+  rawErrors = [],
+  className,
+}: WidgetProps<T, S, F>) {
+  const { enumOptions, enumDisabled, emptyValue: optEmptyValue } = options;
+  const items: MappedItem[] = (enumOptions as EnumOption[])?.map(
+    ({ value, label }: EnumOption) => {
+      return {
+        value,
+        label,
+        disabled: Array.isArray(enumDisabled) && enumDisabled.includes(value),
+      };
+    },
+  );
+  const cnClassName = cn(
+    "w-full",
+    { "border-destructive": rawErrors.length > 0 },
+    className,
+  );
+  return !multiple ? (
+    <Select
+      required={required}
+      value={value}
+      onValueChange={(val) => {
+        onChange(val);
+      }}
+    >
+      <SelectTrigger className={cnClassName} id={id}>
+        <SelectValue placeholder={optEmptyValue} />
+      </SelectTrigger>
+      <SelectContent>
+        {items.map((item) => {
+          return (
+            <SelectItem
+              disabled={item.disabled}
+              key={item.value}
+              value={item.value}
+            >
+              {item.label}
+            </SelectItem>
+          );
+        })}
+      </SelectContent>
+    </Select>
+  ) : (
+    <Selectable<MappedItem>
+      id={id}
+      getKey={(opt) => opt.value}
+      getLabel={(opt) => opt.label}
+      options={items}
+      onChange={(val) => {
+        onChange(val.map((item) => item.value));
+      }}
+      disabled={disabled}
+      makeAChoiceText={optEmptyValue}
+    />
+  );
+}

package/src/custom/schema-form/widgets/selectable.tsx

@@ -1,25 +1,25 @@
-import {
-  Selectable,
-  SelectableProps,
-} from "@repo/ayasofyazilim-ui/custom/selectable";
-import { WidgetProps } from "@rjsf/utils";
-
-export function CustomSelectableWidget<T>(
-  selectableProps: Omit<SelectableProps<T>, "onChange">
-) {
-  const { getKey } = selectableProps;
-
-  function Widget(widgetProps: Omit<WidgetProps, "options">) {
-    const handleChange = (values: T[]) => {
-      widgetProps.onChange(values.map((item) => getKey(item)));
-    };
-    return (
-      <Selectable<T>
-        {...widgetProps}
-        {...selectableProps}
-        onChange={handleChange}
-      />
-    );
-  }
-  return Widget;
-}
+import {
+  Selectable,
+  SelectableProps,
+} from "@ayasofyazilim/ui/custom/selectable";
+import { WidgetProps } from "@rjsf/utils";
+
+export function CustomSelectableWidget<T>(
+  selectableProps: Omit<SelectableProps<T>, "onChange">,
+) {
+  const { getKey } = selectableProps;
+
+  function Widget(widgetProps: Omit<WidgetProps, "options">) {
+    const handleChange = (values: T[]) => {
+      widgetProps.onChange(values.map((item) => getKey(item)));
+    };
+    return (
+      <Selectable<T>
+        {...widgetProps}
+        {...selectableProps}
+        onChange={handleChange}
+      />
+    );
+  }
+  return Widget;
+}