Remove display name validation (#52)

* Removed display name validation. * add changeset
embellishing · Jun 19, 2024 · a7e660a · a7e660a
1 parent 4dd080e
commit a7e660a
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 59 deletions.
diff --git a/.changeset/ninety-ladybugs-vanish.md b/.changeset/ninety-ladybugs-vanish.md
@@ -0,0 +1,5 @@
+---
+"@embellish/react": patch
+---
+
+Removed component display name validation, which is not needed because React allows any string.
diff --git a/docs/api/react.createcomponent.md b/docs/api/react.createcomponent.md
@@ -10,14 +10,13 @@ Creates a polymorphic component that can be styled using first-class props and C
 
 ```typescript
 export declare function createComponent<
-const DisplayName extends string,
 StyleProps,
 Conds,
 DefaultAs extends
 | keyof JSX.IntrinsicElements
 | JSXElementConstructor<any> = "div", // eslint-disable-line @typescript-eslint/no-explicit-any
 >(config: {
-    displayName?: DisplayName & ValidComponentDisplayName<DisplayName>;
+    displayName?: string;
     defaultAs?: DefaultAs;
     defaultStyle?: CSSProperties;
     styleProps?: StyleProps & {
@@ -95,7 +94,7 @@ config
 
 </td><td>
 
-{ displayName?: DisplayName &amp; [ValidComponentDisplayName](./react.validcomponentdisplayname.md)<!-- -->&lt;DisplayName&gt;; defaultAs?: DefaultAs; defaultStyle?: CSSProperties; styleProps?: StyleProps &amp; { \[P in keyof StyleProps\]: [ValidStylePropName](./react.validstylepropname.md)<!-- -->&lt;P&gt; &amp; // eslint-disable-next-line @typescript-eslint/no-explicit-any ((value: any) =&gt; { \[Q in keyof ReturnType&lt; // eslint-disable-next-line @typescript-eslint/no-explicit-any StyleProps\[P\] extends (value: any) =&gt; unknown ? StyleProps\[P\] : never &gt;\]: Q extends keyof CSSProperties ? CSSProperties\[Q\] : never; }); }; conditions?: Conds; fallback?: "revert-layer" \| "unset"; }
+{ displayName?: string; defaultAs?: DefaultAs; defaultStyle?: CSSProperties; styleProps?: StyleProps &amp; { \[P in keyof StyleProps\]: [ValidStylePropName](./react.validstylepropname.md)<!-- -->&lt;P&gt; &amp; // eslint-disable-next-line @typescript-eslint/no-explicit-any ((value: any) =&gt; { \[Q in keyof ReturnType&lt; // eslint-disable-next-line @typescript-eslint/no-explicit-any StyleProps\[P\] extends (value: any) =&gt; unknown ? StyleProps\[P\] : never &gt;\]: Q extends keyof CSSProperties ? CSSProperties\[Q\] : never; }); }; conditions?: Conds; fallback?: "revert-layer" \| "unset"; }
 
 
 </td><td>

diff --git a/docs/api/react.md b/docs/api/react.md
@@ -196,17 +196,6 @@ Represents a hook implementation consisting of either a basic CSS selector or an
 Represents an uppercase letter (A-Z).
 
 
-</td></tr>
-<tr><td>
-
-[ValidComponentDisplayName](./react.validcomponentdisplayname.md)
-
-
-</td><td>
-
-Ensures that a component display name is alphanumeric and begins with an uppercase letter.
-
-
 </td></tr>
 <tr><td>
 

diff --git a/docs/api/react.validcomponentdisplayname.md b/docs/api/react.validcomponentdisplayname.md
diff --git a/packages/react/src/component.d.ts b/packages/react/src/component.d.ts
@@ -5,17 +5,12 @@ import type {
 } from "@embellish/core";
 import type { CSSProperties, JSXElementConstructor } from "react";
 
-import type {
-  ComponentPropsWithRef,
-  ValidComponentDisplayName,
-  ValidStylePropName,
-} from "./types";
+import type { ComponentPropsWithRef, ValidStylePropName } from "./types";
 
 /**
  * Creates a polymorphic component that can be styled using first-class props and
  * CSS hooks.
  *
- * @typeParam DisplayName - The display name of the component.
  * @typeParam StyleProps - The type of the style properties.
  * @typeParam Conds - The type of the conditions.
  * @typeParam DefaultAs - The default element type for the component, defaults to
@@ -28,14 +23,13 @@ import type {
  * @public
  */
 export function createComponent<
-  const DisplayName extends string,
   StyleProps,
   Conds,
   DefaultAs extends
     | keyof JSX.IntrinsicElements
     | JSXElementConstructor<any> = "div", // eslint-disable-line @typescript-eslint/no-explicit-any
 >(config: {
-  displayName?: DisplayName & ValidComponentDisplayName<DisplayName>;
+  displayName?: string;
   defaultAs?: DefaultAs;
   defaultStyle?: CSSProperties;
   styleProps?: StyleProps & {

diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
@@ -15,8 +15,4 @@ export type {
 } from "@embellish/core";
 export { createComponent } from "./component.js";
 export { createStyleProps } from "./style-props.js";
-export type {
-  ComponentPropsWithRef,
-  ValidComponentDisplayName,
-  ValidStylePropName,
-} from "./types.js";
+export type { ComponentPropsWithRef, ValidStylePropName } from "./types.js";
diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
@@ -1,9 +1,4 @@
-import type {
-  Digit,
-  Letter,
-  OnlyChars,
-  UppercaseLetter,
-} from "@embellish/core";
+import type { Digit, Letter, OnlyChars } from "@embellish/core";
 import type {
   Component,
   ComponentProps,
@@ -12,17 +7,6 @@ import type {
   RefAttributes,
 } from "react";
 
-/**
- * Ensures that a component display name is alphanumeric and begins with an
- * uppercase letter.
- *
- * @public
- */
-export type ValidComponentDisplayName<Name> =
-  Name extends `${UppercaseLetter}${infer Tail}`
-    ? OnlyChars<Letter | Digit, Tail>
-    : never;
-
 /**
  * Ensures that a style prop name is alphanumeric and begins with a letter.
  *