feat: project init

src/components/ui/code.tsx

@@ -0,0 +1,18 @@
+import { cn } from "@/lib/utils";
+import React from "react";
+
+type Props = React.ComponentPropsWithoutRef<"code">;
+
+const Code = ({ className, ...props }: Props) => {
+  return (
+    <code
+      className={cn(
+        "border border-base-content/20 px-4 py-3 rounded-lg font-mono block",
+        className
+      )}
+      {...props}
+    />
+  );
+};
+
+export default Code;

src/components/ui/form-control.tsx

@@ -0,0 +1,58 @@
+import { cn } from "@/lib/utils";
+import { ComponentPropsWithoutRef } from "react";
+import {
+  FieldValues,
+  UseFormReturn,
+  Controller,
+  ControllerRenderProps,
+  ControllerFieldState,
+  FieldPath,
+  UseFormStateReturn,
+} from "react-hook-form";
+
+type FormControlProps<
+  T extends FieldValues,
+  U extends FieldPath<T> = FieldPath<T>
+> = ComponentPropsWithoutRef<"div"> & {
+  form: UseFormReturn<T>;
+  name: FieldPath<T>;
+  title?: string;
+
+  render: (
+    field: ControllerRenderProps<T, U>,
+    fieldProps: {
+      fieldState: ControllerFieldState;
+      formState: UseFormStateReturn<T>;
+    }
+  ) => React.ReactElement;
+};
+
+const FormControl = <T extends FieldValues>({
+  form,
+  name,
+  title,
+  className,
+  render,
+}: FormControlProps<T>) => {
+  return (
+    <Controller
+      control={form.control}
+      name={name}
+      render={({ field, fieldState, formState }) => (
+        <div className={cn("form-control", className)}>
+          {title ? <label className="label label-text">{title}</label> : null}
+
+          {render(field, { fieldState, formState })}
+
+          {fieldState.error ? (
+            <label className="label label-text text-error">
+              {fieldState.error.message}
+            </label>
+          ) : null}
+        </div>
+      )}
+    />
+  );
+};
+
+export default FormControl;

src/components/ui/select.tsx

@@ -0,0 +1,47 @@
+import { cn } from "@/lib/utils";
+import { ComponentPropsWithoutRef } from "react";
+import BaseSelect from "react-select";
+import Creatable from "react-select/creatable";
+
+type Props = ComponentPropsWithoutRef<typeof BaseSelect> & {
+  creatable?: boolean;
+  onCreateOption?: (inputValue: string) => void;
+};
+
+const Select = ({ creatable, ...props }: Props) => {
+  const Comp = creatable ? Creatable : BaseSelect;
+
+  return (
+    <Comp
+      unstyled
+      classNames={{
+        control: (p) =>
+          cn(
+            "bg-base-100 px-4 rounded-btn border text-base-content border-base-content/20 h-12",
+            p.isMulti && "py-2 flex flex-row gap-2 items-center flex-wrap",
+            p.isMulti && p.hasValue ? "pt-1 px-2 h-auto" : null
+          ),
+        input: () => "text-base-content",
+        menuList: () =>
+          "bg-base-100 rounded-btn border border-base-content/20 p-0",
+        noOptionsMessage: () => "my-4",
+        option: (p) =>
+          cn(
+            "text-base-content bg-base-100 hover:bg-base-300 px-4 py-3 !cursor-pointer",
+            p.isSelected || p.isFocused ? "bg-base-200" : null
+          ),
+        singleValue: () => "text-base-content",
+        multiValue: () =>
+          "bg-base-300/80 text-base-content/80 pl-2 mt-1 mr-1 flex flex-row items-center",
+        multiValueRemove: () =>
+          "px-2 py-2 hover:bg-primary hover:text-primary-content",
+      }}
+      noOptionsMessage={() =>
+        creatable ? "Type something to add..." : undefined
+      }
+      {...props}
+    />
+  );
+};
+
+export default Select;