[Draft] Tinkering with AddressInput hook/ui

[rin-st]

Created AddressInput2 component, which is absolutely similary to AddressInput, but

• all the logic now lives in useAddressInput hook
• prefix and suffix now UI components
• since AddressInput2 depends of InputBase, I copied it to InputBase2 component too and moved it's logic to useInputBase.

So, to change UI of AddressInput, user needs to change UI parts of it: components InputBase, AddressInputPrefix and AddressInputSuffix

Update: #1056

---

In this AddressInput component we already have predefined UI (our current default). I'll create another PR soon with different option

[rin-st]

Example: #1055

[rin-st]

Thinking more about this and I understood that I cant simply put the component code to the npm so it will be available for change. So there is two ways coming to my mind:

Lets assume just for InputBase

1. Make it like shadcn way. Like npx se-2-lib InputBase and it will create the folder se-2-lib in users project with InputBase component and it will be easy to change that created component for user needs. But overall this requires a lot of efforts.
2. Just add to npm useInputBase hook. And then add to that hook readme example of usage, plus maybe example folder to npm package too

Details

import { ReactNode } from "react";
import { CommonInputProps, useInputBase } from "se-2-hooks/useInputBase";

// Describe all the props here
type InputBaseProps<T> = CommonInputProps<T> & {
  error?: boolean;
  prefix?: ReactNode;
  suffix?: ReactNode;
  reFocus?: boolean;
};

export const InputBase2 = <T extends { toString: () => string } | undefined = string>({
  name,
  value,
  onChange,
  placeholder,
  error,
  disabled,
  prefix,
  suffix,
  reFocus,
}: InputBaseProps<T>) => {
  // get handlers from useInputBase hook
  const { handleChange, onFocus, inputRef } = useInputBase<T>({ onChange, reFocus });

  // change styles for your needs
  let modifier = "";
  if (error) {
    modifier = "border-error";
  } else if (disabled) {
    modifier = "border-disabled bg-base-300";
  }

  return (
    <div className={`flex border-2 border-base-300 bg-base-200 rounded-full text-accent ${modifier}`}>
      {prefix}
      <input
        className="input input-ghost focus-within:border-transparent focus:outline-none focus:bg-transparent h-[2.2rem] min-h-[2.2rem] px-4 border w-full font-medium placeholder:text-accent/70 text-base-content/70 focus:text-base-content/70"
        placeholder={placeholder}
        name={name}
        value={value?.toString()}
        onChange={handleChange}
        disabled={disabled}
        autoComplete="off"
        ref={inputRef}
        onFocus={onFocus}
      />
      {suffix}
    </div>
  );
};

All the code below the hook could be abstracted to one more UI component but I think it's redundant.

But for more complex hooks like useAddressInput we need to add links to how to use dependency hooks/components like useBaseInput 🤔

[rin-st]

We decided to try another way of implementing components