open-index/open-npm huggingface dataset:
npm package: @nico2433/astro-utils
Description: Utils for astro projects
Author: nico2433
Latest version: 0.0.6

# Astro Starter Kit: Component Package

This is a template for an Astro component library. Use this template for writing components to use in multiple projects or publish to NPM.

```sh
npm create astro@latest -- --template component
```

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/non-html-pages)
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/non-html-pages)
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/component/devcontainer.json)

## 🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

```text
/
├── index.ts
├── src
│   └── MyComponent.astro
├── tsconfig.json
├── package.json
```

The `index.ts` file is the "entry point" for your package. Export your components in `index.ts` to make them importable from your package.

## 🧞 Commands

All commands are run from the root of the project, from a terminal:

| Command       | Action                                                                                                                                                                                                                           |
| :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `npm link`    | Registers this package locally. Run `npm link my-component-library` in an Astro project to install your components                                                                                                               |
| `npm publish` | [Publishes](https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages#publishing-unscoped-public-packages) this package to NPM. Requires you to be [logged in](https://docs.npmjs.com/cli/v8/commands/npm-adduser) |
npm package: @nico2433/custom-components
Description: Custom components package for personal FrontEnd projects
Author: nico2433
Latest version: 1.0.49

# Custom Components

This is a simple package I created for personal use. It contains some components that can be useful.

1. **Add the package to your index file:**
   To ensure that the package's styles integrate properly, add the package css to your index file:

   ```javascript
   import "@nico2433/custom-components/index.css";
   ```

2. **Further customization with CSS:**
   You can customize the components to some degree using css classes.

> [!IMPORTANT]
> If you have [@tailwindcss/forms](https://www.npmjs.com/package/@tailwindcss/forms) in your tailwind plugins the default inputs styles probably will broke, so instead of importing the css in your index you will need to add the package route to your tailwind.config content.

## Components

1. **Inputs:**
   DateInput
   FileInput
   FileDropInput
   SelectInput
   TextInput

   > To use these you will need [react-hook-form](https://www.npmjs.com/package/react-hook-form).

2. **UI:**
   DocDelimiter (This component limits width of the page content).

### How to use inputs

```javascript
type InputType = "text" | "password" | "select" | "file" | "date";

interface SelectInputOptions {
  label: string;
  value: string;
}

interface InputConfig {
  name: string;
  type?: InputType;
  label?: string;
  placeholder?: string;
  registerOptions?: RegisterOptions;
  addBtn?: {
    label: string,
    className?: string,
    onClick: (arg?: any) => any,
  };
  selectOptions?: SelectInputOptions[];
}
```

```javascript
const useExampleFormConfig = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const fields: InputConfig[] = [
    {
      name: "example1",
      registerOptions: {
        required: "This field is required",
      },
    },
    {
      name: "example2",
      registerOptions: {
         maxLength: {
            value: 10;
            message: "This field accepts a max length of 10";
         },
         minLength: {
            value: 5;
            message: "This field field accepts a min length of 5";
         },
      }
    }
  ];

  return { fields, register, handleSubmit, errors }
};
```

```javascript
const Component = () => {
  const { fields, register, handleSubmit, errors } = useExampleFormConfig();

  const onSubmit = (values: FieldValues) => {
    console.log(values);
  };

   return (
      <form onSubmit={handleSubmit(onSubmit)}>
         <div>
            {fields.map((field) => (
               <TextInput
               key={field.name}
               config={field}
               register={register}
               errors={errors}
               />
            ))}
         </div>
         <button>Submit</button>
      </form>;
   )
};
```