@js-empire/emperor-ui 1.2.4 → 1.2.6

package/src/providers/form-builder-provider-context.tsx

@@ -0,0 +1,18 @@
+import type { FieldValues } from "react-hook-form";
+import type { ReactNode } from "react";
+import { FormBuilderValue } from "@/types";
+import { FormBuilderContext } from "@/context";
+
+export function FormBuilderProvider<TSchema extends FieldValues>({
+  children,
+  value,
+}: {
+  children: ReactNode;
+  value: FormBuilderValue<TSchema>;
+}) {
+  return (
+    <FormBuilderContext.Provider value={value as FormBuilderValue<FieldValues>}>
+      {children}
+    </FormBuilderContext.Provider>
+  );
+}

package/src/providers/index.ts

@@ -3,3 +3,4 @@ export * from "./emperor-ui-provider";
 export * from "./navigation-provider";
 export * from "./uploader-provider";
 export * from "./theme-provider";
+export * from "./form-builder-provider-context";

package/src/styles/globals.css

@@ -1,7 +1,8 @@
 @import "tailwindcss";
 @plugin './hero.ts';
 @source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
-@custom-variant dark (&:is(.dark *));
+
+/* @custom-variant dark (&:is(.dark *)); */
 
 .scrollbar-hide {
   -ms-overflow-style: none; /* IE and Edge */
@@ -11,3 +12,27 @@
 .scrollbar-hide::-webkit-scrollbar {
   display: none; /* Chrome, Safari, Opera */
 }
+
+/* Rounded corners and compact size for native color input swatch */
+.color-swatch {
+  width: 1.25rem;
+  height: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
+  cursor: pointer;
+}
+
+.color-swatch::-webkit-color-swatch-wrapper {
+  padding: 0;
+  border-radius: 0.375rem;
+}
+
+.color-swatch::-webkit-color-swatch {
+  border: none;
+  border-radius: 0.375rem;
+}
+
+.color-swatch::-moz-color-swatch {
+  border: none;
+  border-radius: 0.375rem;
+}

package/src/styles/hero.ts

@@ -1,2 +1,3 @@
 import { heroui } from "@heroui/theme";
+
 export default heroui();

package/src/styles/index.css

@@ -1,14 +1,9 @@
 @import "tailwindcss";
 
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
-
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;

package/src/types/components/atoms/color-picker/color-picker.ts

@@ -5,8 +5,17 @@ export type ColorPickerInputType = "free" | "preset";
 
 export type ColorPickerProps = Omit<
   InputProps & SelectProps,
-  "onChange" | "children"
+  | "onChange"
+  | "onValueChange"
+  | "onSelectionChange"
+  | "children"
+  | "selectedKeys"
+  | "defaultSelectedKeys"
+  | "value"
 > & {
   inputType: ColorPickerInputType;
   presets?: string[];
+  onChange?: (value: string) => void;
+  value?: string;
+  defaultValue?: string;
 };

package/src/types/components/atoms/field/field.ts

@@ -1,9 +1,61 @@
 import type { SharedComponentProps } from "@/types";
+import type {
+  AutocompleteItemProps,
+  AutocompleteProps,
+} from "@heroui/autocomplete";
+import type { CheckboxProps } from "@heroui/checkbox";
+import type { InputProps, TextAreaProps } from "@heroui/input";
+import type { RadioGroupProps } from "@heroui/radio";
+import type { SelectItemProps, SelectProps } from "@heroui/select";
+import type { SwitchProps } from "@heroui/switch";
+import type { FieldValues, Path } from "react-hook-form";
 
 export type FieldClassnames = {
   base?: string;
+  field?: string;
 };
 
-export type FieldProps = SharedComponentProps & {
+export type FieldType =
+  | "input"
+  | "textarea"
+  | "checkbox"
+  | "select"
+  | "autocomplete"
+  | "switch"
+  | "radio";
+
+export type FieldOption = {
+  key: string;
+  label: string;
+};
+
+type FieldTypesProps = {
+  inputProps?: InputProps;
+  textareaProps?: TextAreaProps;
+  checkboxProps?: CheckboxProps;
+  selectProps?: Omit<
+    SelectProps,
+    "children" | "selectedKeys" | "onSelectionChange"
+  >;
+  selectItemProps?: SelectItemProps;
+  autocompleteProps?: Omit<
+    AutocompleteProps,
+    "children" | "selectedKey" | "onSelectionChange"
+  >;
+  autocompleteItemProps?: AutocompleteItemProps;
+  switchProps?: SwitchProps;
+  radioGroupProps?: Omit<
+    RadioGroupProps,
+    "children" | "value" | "onValueChange"
+  >;
+};
+
+type SharedFieldProps<TFieldValues extends FieldValues> = {
   classNames?: FieldClassnames;
+  type: FieldType;
+  name: Path<TFieldValues>;
+  options?: FieldOption[];
 };
+
+export type FieldProps<TFieldValues extends FieldValues = FieldValues> =
+  SharedComponentProps & FieldTypesProps & SharedFieldProps<TFieldValues>;

package/src/types/components/atoms/filter/filter.ts

@@ -1,11 +1,11 @@
 import type { SelectFilterProps, SharedComponentProps } from "@/types";
-import { AutocompleteProps } from "@heroui/autocomplete";
+import { AutocompleteItemProps, AutocompleteProps } from "@heroui/autocomplete";
 import { CheckboxGroupProps } from "@heroui/checkbox";
 import { CheckboxProps } from "@heroui/checkbox";
 import { DatePickerProps } from "@heroui/date-picker";
 import { InputProps } from "@heroui/input";
 import { RadioProps } from "@heroui/radio";
-import { SelectProps } from "@heroui/select";
+import { SelectItemProps, SelectProps } from "@heroui/select";
 import { SliderProps } from "@heroui/slider";
 import { SwitchProps } from "@heroui/switch";
 
@@ -25,19 +25,28 @@ export type FilterType =
   | "switch"
   | "range";
 
+type FilterTypesProps = {
+  searchProps?: InputProps;
+  selectProps?: Omit<SelectProps, "children">;
+  selectItemProps?: SelectItemProps;
+  autocompleteProps?: Omit<AutocompleteProps, "children">;
+  autocompleteItemProps?: AutocompleteItemProps;
+  dateProps?: DatePickerProps;
+  numericProps?: InputProps;
+  checkboxProps?: CheckboxProps;
+  checkboxGroupProps?: Omit<CheckboxGroupProps, "children">;
+  radioProps?: RadioProps;
+  switchProps?: SwitchProps;
+  rangeProps?: SliderProps;
+};
+
+type SharedFilterProps = {
+  classNames?: FilterClassnames;
+  type: FilterType;
+  paramKey: string;
+};
+
 export type FilterProps = SharedComponentProps &
-  SelectFilterProps & {
-    classNames?: FilterClassnames;
-    type: FilterType;
-    paramKey: string;
-    searchProps?: InputProps;
-    selectProps?: Omit<SelectProps, "children">;
-    autocompleteProps?: AutocompleteProps;
-    dateProps?: DatePickerProps;
-    numericProps?: InputProps;
-    checkboxProps?: CheckboxProps;
-    checkboxGroupProps?: CheckboxGroupProps;
-    radioProps?: RadioProps;
-    switchProps?: SwitchProps;
-    rangeProps?: SliderProps;
-  };
+  SelectFilterProps &
+  FilterTypesProps &
+  SharedFilterProps;

package/src/types/components/organisms/form-builder/context.ts

@@ -0,0 +1,6 @@
+import { Control, FieldValues } from "react-hook-form";
+
+export type FormBuilderValue<TSchema extends FieldValues> = {
+  control: Control<TSchema, any, TSchema>;
+  formValues: Partial<TSchema>;
+};

package/src/types/components/organisms/form-builder/form-builder.ts

@@ -0,0 +1,39 @@
+import type { SharedComponentProps } from "@/types";
+import { ReactNode } from "react";
+import type {
+  FieldErrors,
+  FieldValues,
+  UseFormProps,
+  UseFormReturn,
+} from "react-hook-form";
+import type { ZodType } from "zod";
+import { z } from "zod";
+
+export type FormBuilderSubmitArgs<TFieldValues extends FieldValues> = {
+  values: TFieldValues;
+  form: UseFormReturn<TFieldValues>;
+};
+
+export type FormBuilderSuccessArgs<TFieldValues extends FieldValues> = {
+  values: TFieldValues;
+  form: UseFormReturn<TFieldValues>;
+};
+
+export type FormBuilderErrorArgs<TFieldValues extends FieldValues> = {
+  error?: unknown;
+  errors?: FieldErrors<TFieldValues>;
+  form: UseFormReturn<TFieldValues>;
+};
+
+export type FormBuilderProps<TSchema extends ZodType<any, any, any>> = Omit<
+  SharedComponentProps,
+  "children"
+> & {
+  children: ReactNode;
+  formProps?: UseFormProps<z.infer<TSchema>>;
+  onSubmit: (values: z.infer<TSchema>) => Promise<unknown> | unknown;
+  onSuccess?: (values: z.infer<TSchema>) => void;
+  onError?: (error: unknown) => void;
+  /** Called whenever form values change. Use this to read values outside FormBuilder (e.g. in parent state). */
+  onValuesChange?: (values: Partial<z.infer<TSchema>>) => void;
+};

package/src/types/components/organisms/form-builder/index.ts

@@ -0,0 +1,2 @@
+export type * from "./form-builder";
+export type * from "./context";

package/src/types/components/organisms/index.ts

@@ -1 +1,2 @@
 export * from "./filters";
+export * from "./form-builder";

package/src/types/context/config.ts

@@ -1,6 +1,7 @@
 import { type ReactNode } from "react";
 import { EmperorUIInterLocalization } from "@/types";
 import { ToastProps } from "@heroui/toast";
+import { EmperorUITheme } from "@/types";
 
 export type ConfigContextState = {
   config: EmperorUIConfig;
@@ -19,4 +20,5 @@ export type EmperorUIConfig = {
   layout?: Partial<EmperorUILayout>;
   interLocalization?: Partial<EmperorUIInterLocalization>;
   toast?: ToastProps;
+  theme?: Partial<EmperorUITheme>;
 };

package/src/types/context/index.ts

@@ -1,3 +1,4 @@
 export type * from "./config";
 export type * from "./navigation";
 export type * from "./localization";
+export type * from "./theme";

package/src/types/context/theme.ts

@@ -0,0 +1,33 @@
+import { InputProps, TextAreaProps } from "@heroui/input";
+import { ButtonProps } from "@heroui/button";
+import { CardProps } from "@heroui/card";
+import { DropdownProps } from "@heroui/dropdown";
+import { ModalProps } from "@heroui/modal";
+import { CheckboxGroupProps, CheckboxProps } from "@heroui/checkbox";
+import { AutocompleteItemProps, AutocompleteProps } from "@heroui/autocomplete";
+import { SelectProps, SelectItemProps } from "@heroui/select";
+import { RadioProps } from "@heroui/radio";
+import { SwitchProps } from "@heroui/switch";
+import { DatePickerProps } from "@heroui/date-picker";
+import { SliderProps } from "@heroui/slider";
+
+export type EmperorUITheme = {
+  components?: {
+    input?: InputProps;
+    textarea?: TextAreaProps;
+    button?: ButtonProps;
+    card?: CardProps;
+    dropdown?: DropdownProps;
+    modal?: ModalProps;
+    checkbox?: CheckboxProps;
+    checkboxGroup?: CheckboxGroupProps;
+    autocomplete?: Omit<AutocompleteProps, "children">;
+    autocompleteItem?: Omit<AutocompleteItemProps, "children">;
+    radio?: Omit<RadioProps, "children">;
+    select?: Omit<SelectProps, "children">;
+    selectItem?: Omit<SelectItemProps, "children">;
+    switch?: SwitchProps;
+    datePicker?: DatePickerProps;
+    slider?: SliderProps;
+  };
+};

package/dist/index-BXtdEByK.js

@@ -1,5 +0,0 @@
-import { d as a } from "./index-CDB93OLO.js";
-var o = a;
-export {
-  o as default
-};

package/dist/src-UW24ZMRV-C1Pn8-w8.js

@@ -1,5 +0,0 @@
-import { d as a } from "./index-CDB93OLO.js";
-var r = a;
-export {
-  r as default
-};

package/src/components/atoms/color-picker/styles/color-picker.css

@@ -1,23 +0,0 @@
-/* Rounded corners and compact size for native color input swatch */
-.color-swatch {
-  width: 1.25rem;
-  height: 1.25rem;
-  min-width: 1.25rem;
-  min-height: 1.25rem;
-  cursor: pointer;
-}
-
-.color-swatch::-webkit-color-swatch-wrapper {
-  padding: 0;
-  border-radius: 0.375rem;
-}
-
-.color-swatch::-webkit-color-swatch {
-  border: none;
-  border-radius: 0.375rem;
-}
-
-.color-swatch::-moz-color-swatch {
-  border: none;
-  border-radius: 0.375rem;
-}

package/src/components/atoms/field/field.stories.tsx

@@ -1,27 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Field } from "@/components";
-import { getStorybookDecorators } from "@/utils";
-
-const meta: Meta<typeof Field> = {
-  title: "Atoms/Field",
-  component: Field,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  decorators: getStorybookDecorators({
-    config: {
-      layout: {
-        withScaffold: false,
-      },
-    },
-  }),
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};

package/src/components/organisms/filters/filters.stories.tsx

@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Filter, Filters } from "@/components";
-import { getStorybookDecorators } from "@/utils";
-
-const meta: Meta<typeof Filters> = {
-  title: "Organisms/Filters",
-  component: Filters,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  decorators: getStorybookDecorators({
-    config: {
-      layout: {
-        withScaffold: false,
-      },
-    },
-  }),
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-  render: () => (
-    <Filters>
-      <Filter type="search" paramKey="search" />
-    </Filters>
-  ),
-};

package/src/components/organisms/filters/filters.tsx

@@ -1,36 +0,0 @@
-import { cn } from "@/utils";
-import { FilterProps, FiltersProps } from "@/types";
-import { filtersClasses } from "./styles";
-import { Children, isValidElement, ReactElement } from "react";
-import { Filter } from "@/components";
-
-export function Filters({
-  className,
-  classNames,
-  children,
-  ...props
-}: FiltersProps) {
-  const childArray = Children.toArray(children).filter(
-    isValidElement,
-  ) as ReactElement<FilterProps, typeof Filter>[];
-
-  childArray.forEach((child) => {
-    const type = child.type;
-
-    if (type !== Filter) {
-      throw new Error(
-        `Allowed children for <Filters /> must be of type <Filter />. Got ${type} instead.`,
-      );
-    }
-  });
-
-  return (
-    <nav
-      data-slot="emperor-ui-filters"
-      className={cn(filtersClasses({}), className)}
-      {...props}
-    >
-      <ul className="flex items-center gap-2">{children}</ul>
-    </nav>
-  );
-}

package/src/components/organisms/filters/index.ts

@@ -1 +0,0 @@
-export * from "./filters";

package/src/components/organisms/filters/styles/classes.ts

@@ -1,9 +0,0 @@
-import { cva } from "class-variance-authority";
-
-export const filtersClasses = cva([""], {
-  variants: {
-    variant: {},
-  },
-  defaultVariants: {},
-  compoundVariants: [],
-});

package/src/components/organisms/filters/styles/index.ts

@@ -1 +0,0 @@
-export * from "./classes";