p-sw/pswui-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: install lib as directory

Browse Source
This commit is contained in:
p-sw 2024-06-15 04:22:45 +09:00
parent 7af1d09359
commit d16df342a2
3 changed files with 104 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
src/pswui/lib/Slot.tsx Normal file
View File

@ -0,0 +1,97 @@
import { twMerge } from "tailwind-merge";
import React from "react";
/**
* Merges the react props.
* Basically childProps will override parentProps.
* But if it is a event handler, style, or className, it will be merged.
*
* @param parentProps - The parent props.
* @param childProps - The child props.
* @returns The merged props.
*/
function mergeReactProps(
parentProps: Record<string, unknown>,
childProps: Record<string, unknown>,
) {
const overrideProps = { ...childProps };
for (const propName in childProps) {
const parentPropValue = parentProps[propName];
const childPropValue = childProps[propName];
const isHandler = /^on[A-Z]/.test(propName);
if (isHandler) {
if (
childPropValue &&
parentPropValue &&
typeof childPropValue === "function" &&
typeof parentPropValue === "function"
) {
overrideProps[propName] = (...args: unknown[]) => {
childPropValue?.(...args);
parentPropValue?.(...args);
};
} else if (parentPropValue) {
overrideProps[propName] = parentPropValue;
}
} else if (
propName === "style" &&
typeof parentPropValue === "object" &&
typeof childPropValue === "object"
) {
overrideProps[propName] = { ...parentPropValue, ...childPropValue };
} else if (
propName === "className" &&
typeof parentPropValue === "string" &&
typeof childPropValue === "string"
) {
overrideProps[propName] = twMerge(parentPropValue, childPropValue);
}
}
return { ...parentProps, ...overrideProps };
}
/**
* Takes an array of refs, and returns a single ref.
*
* @param refs - The array of refs.
* @returns The single ref.
*/
function combinedRef<I>(refs: React.Ref<I | null>[]) {
return (instance: I | null) =>
refs.forEach((ref) => {
if (ref instanceof Function) {
ref(instance);
} else if (ref) {
(ref as React.MutableRefObject<I | null>).current = instance;
}
});
}
interface SlotProps {
children?: React.ReactNode;
}
export const Slot = React.forwardRef<
HTMLElement,
SlotProps & Record<string, unknown>
>((props, ref) => {
const { children, ...slotProps } = props;
const { asChild: _1, ...safeSlotProps } = slotProps;
if (!React.isValidElement(children)) {
console.warn(`given children "${children}" is not valid for asChild`);
return null;
}
return React.cloneElement(children, {
...mergeReactProps(safeSlotProps, children.props),
ref: combinedRef([
ref,
(children as unknown as { ref: React.Ref<HTMLElement> }).ref,
]),
} as never);
});
export interface AsChild {
asChild?: boolean;
}

2
src/pswui/lib/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from "./vcn";
export * from "./Slot";

90
src/pswui/lib.tsx → src/pswui/lib/vcn.ts
View File

@ -1,4 +1,3 @@
import React from "react";
import { twMerge } from "tailwind-merge";
/**
@ -109,6 +108,7 @@ export function vcn<V extends VariantType>(param: {
/**
* Any Props -> Variant Props, Other Props
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
<AnyPropBeforeResolve extends Record<string, any>>(
anyProps: AnyPropBeforeResolve,
) => [
@ -139,6 +139,7 @@ export function vcn<V extends VariantType, P extends PresetType<V>>(param: {
/**
* Any Props -> Variant Props, Other Props
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
<AnyPropBeforeResolve extends Record<string, any>>(
anyProps: AnyPropBeforeResolve,
) => [
@ -223,7 +224,7 @@ export function vcn<
* @param anyProps - Any props that have passed to the component.
* @returns [variantProps, otherProps]
*/
<AnyPropBeforeResolve extends Record<string, any>>(
<AnyPropBeforeResolve extends Record<string, unknown>>(
anyProps: AnyPropBeforeResolve,
) => {
const variantKeys = Object.keys(variants) as (keyof V)[];
@ -268,86 +269,5 @@ export function vcn<
* }
* ```
*/
export type VariantProps<F extends (props: any) => string> = F extends (
props: infer P,
) => string
? P
: never;
/**
* Merges the react props.
* Basically childProps will override parentProps.
* But if it is a event handler, style, or className, it will be merged.
*
* @param parentProps - The parent props.
* @param childProps - The child props.
* @returns The merged props.
*/
function mergeReactProps(
parentProps: Record<string, any>,
childProps: Record<string, any>,
) {
const overrideProps = { ...childProps };
for (const propName in childProps) {
const parentPropValue = parentProps[propName];
const childPropValue = childProps[propName];
const isHandler = /^on[A-Z]/.test(propName);
if (isHandler) {
if (childPropValue && parentPropValue) {
overrideProps[propName] = (...args: unknown[]) => {
childPropValue?.(...args);
parentPropValue?.(...args);
};
} else if (parentPropValue) {
overrideProps[propName] = parentPropValue;
}
} else if (propName === "style") {
overrideProps[propName] = { ...parentPropValue, ...childPropValue };
} else if (propName === "className") {
overrideProps[propName] = twMerge(parentPropValue, childPropValue);
}
}
return { ...parentProps, ...overrideProps };
}
/**
* Takes an array of refs, and returns a single ref.
*
* @param refs - The array of refs.
* @returns The single ref.
*/
function combinedRef<I>(refs: React.Ref<I | null>[]) {
return (instance: I | null) =>
refs.forEach((ref) => {
if (ref instanceof Function) {
ref(instance);
} else if (!!ref) {
(ref as React.MutableRefObject<I | null>).current = instance;
}
});
}
interface SlotProps {
children?: React.ReactNode;
}
export const Slot = React.forwardRef<any, SlotProps & Record<string, any>>(
(props, ref) => {
const { children, ...slotProps } = props;
const { asChild: _1, ...safeSlotProps } = slotProps;
if (!React.isValidElement(children)) {
console.warn(`given children "${children}" is not valid for asChild`);
return null;
}
return React.cloneElement(children, {
...mergeReactProps(safeSlotProps, children.props),
ref: combinedRef([ref, (children as any).ref]),
} as any);
},
);
export interface AsChild {
asChild?: boolean;
}
export type VariantProps<F extends (props: Record<string, unknown>) => string> =
F extends (props: infer P) => string ? { [key in keyof P]: P[key] } : never;