feat: init

Author: HamadTheIronside

.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules

README.md

@@ -0,0 +1,53 @@
+# Slots Component
+
+## Installation
+
+`npm i slots-component`
+
+## How to use it?
+
+```tsx
+import { SlotsProps, Slots, SlotsCreator } from './Slots';
+
+const DEFAULT_SLOTS = {
+  List: 'ul',
+  Row: 'li',
+} satisfies Slots;
+
+type SlotsConfig = SlotsCreator<typeof DEFAULT_SLOTS, {
+  Row: [TItem];
+}>
+
+interface TItem {
+  id: string;
+  name: string;
+}
+
+interface Props {
+  rows: TItem[];
+}
+
+export const List = <
+  TSlots extends SlotsConfig["Slots"],
+  >({ rows, slots, slotProps }: Props & SlotsProps<SlotsConfig, TSlots>) => {
+  const combinedSlots = {
+    ...DEFAULT_SLOTS,
+    ...slots,
+  };
+
+  return (
+    <combinedSlots.List {...slotProps?.list}>
+      {rows.map((row) => (
+        <combinedSlots.Row
+          key={row.id}
+          {...(typeof slotProps?.row === 'function'
+            ? slotProps?.row(row)
+            : slotProps?.row)}
+        >
+          {row.name}
+        </combinedSlots.Row>
+      ))}
+    </combinedSlots.List>
+  );
+};
+```

index.ts

@@ -0,0 +1,52 @@
+import { ComponentProps, JSXElementConstructor, JSX } from 'react';
+
+type MaybeFunc<Value, Args extends Array<unknown>> =
+  | Value
+  | ((...args: Args) => Value);
+
+type ReactComponent = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
+type Slots = Record<string, ReactComponent>;
+
+type CallbacksCreator<DefaultProps extends Slots> = {
+  [Key in keyof DefaultProps]?: Array<any>;
+};
+
+type SlotProps<
+  TSlots extends Slots,
+  SlotPropsWithCallback extends CallbacksCreator<TSlots>
+> = {
+    [SlotKey in keyof TSlots as SlotKey extends string
+    ? Lowercase<SlotKey>
+    : never]: TSlots[SlotKey] extends ReactComponent
+    ? SlotPropsWithCallback[SlotKey] extends Array<any>
+    ? MaybeFunc<
+      Partial<ComponentProps<TSlots[SlotKey]>>,
+      SlotPropsWithCallback[SlotKey]
+    >
+    : Partial<ComponentProps<TSlots[SlotKey]>>
+    : never;
+  };
+
+type SlotsCreator<
+  TDefaultSlots extends Slots,
+  TCallbacks extends CallbacksCreator<TDefaultSlots>
+> = {
+  DefaultSlots: TDefaultSlots;
+  Slots: { [Key in keyof TDefaultSlots]?: ReactComponent };
+  Callbacks: TCallbacks;
+};
+
+type SlotsProps<
+  TSlotsConfig extends SlotsCreator<any, any>,
+  TSlots extends TSlotsConfig['Slots']
+> = {
+  slots?: TSlots;
+  slotProps?: Partial<
+    SlotProps<
+      Omit<TSlotsConfig['DefaultSlots'], keyof TSlots> & TSlots,
+      TSlotsConfig['Callbacks']
+    >
+  >;
+};
+
+export type { SlotsProps, SlotsCreator, Slots };