@rarui/typings 1.0.0-rc.1

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+This package is intended for internal use in creating components with polymorphic typing.
+
+## 2024-03-22 `1.0.0`
+
+#### 🎉 New features
+
+- Added useRefObjectAsForwardedRef hook used to sync ref object with forwarded ref and allow local access to instance reference with `.current`. ([#4](https://git.rarolabs.com.br/frontend/rarui/pull/4) by [@junior](https://git.rarolabs.com.br/junior))
+- Added types that support dynamic typing of polymorphic components. ([#4](https://git.rarolabs.com.br/frontend/rarui/pull/4) by [@junior](https://git.rarolabs.com.br/junior))

package/README.md

@@ -0,0 +1,15 @@
+# `@rarui/typings`
+
+This package is intended for internal use in creating components with polymorphic typing.
+
+## Installation
+
+```sh
+$ yarn add @rarui/typings
+# or
+$ npm install @rarui/typings
+```
+
+## Usage
+
+This is an internal utility, not intended for public usage.

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+// Generated by dts-bundle-generator v9.3.1
+
+import React$1 from 'react';
+import { ForwardedRef, RefObject } from 'react';
+
+export type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
+/**
+ * Infers the OwnProps if E is a ForwardRefExoticComponentWithAs
+ */
+export type OwnProps<E> = E extends PolymorphicForwardRefComponent<any, infer P> ? P : {};
+/**
+ * Infers the JSX.IntrinsicElement if E is a ForwardRefExoticComponentWithAs
+ */
+export type IntrinsicElement<E> = E extends PolymorphicForwardRefComponent<infer I, any> ? I : never;
+export type ForwardRefExoticComponent<E, OwnProps> = React$1.ForwardRefExoticComponent<Merge<E extends React$1.ElementType ? React$1.ComponentPropsWithRef<E> : never, OwnProps & {
+	as?: E;
+}>>;
+export interface PolymorphicForwardRefComponent<IntrinsicElementString, OwnProps = {}> extends ForwardRefExoticComponent<IntrinsicElementString, OwnProps> {
+	/**
+	 * When `as` prop is passed, use this overload.
+	 * Merges original own props (without DOM props) and the inferred props
+	 * from `as` element with the own props taking precendence.
+	 *
+	 * We explicitly avoid `React.ElementType` and manually narrow the prop types
+	 * so that events are typed when using JSX.IntrinsicElements.
+	 */
+	<As = IntrinsicElementString>(props: As extends "" ? {
+		as: keyof JSX.IntrinsicElements;
+	} : As extends React$1.ComponentType<infer P> ? Merge<P, OwnProps & {
+		as: As;
+	}> : As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], OwnProps & {
+		as: As;
+	}> : never): React$1.ReactElement | null;
+}
+/**
+ * Use a ref object as the imperative handle for a forwarded ref. This can be used to
+ * synchronize the ref object with the forwarded ref and allow local access the reference
+ * instance with `.current`.
+ *
+ * **NOTE**: The `refObject` should be passed to the underlying element, NOT the `forwardedRef`.
+ */
+export declare function useRefObjectAsForwardedRef<T>(forwardedRef: React$1.ForwardedRef<T>, refObject: React$1.RefObject<T>): void;
+
+export {};

package/dist/index.js

@@ -0,0 +1 @@
+!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react")):"function"==typeof define&&define.amd?define(["react"],r):"object"==typeof exports?exports["@rarui/typings"]=r(require("react")):e["@rarui/typings"]=r(e.react)}(global,(e=>(()=>{"use strict";var r={155:r=>{r.exports=e}},t={};function o(e){var n=t[e];if(void 0!==n)return n.exports;var s=t[e]={exports:{}};return r[e](s,s.exports,o),s.exports}var n={};return(()=>{var e=n;Object.defineProperty(e,"__esModule",{value:!0}),e.useRefObjectAsForwardedRef=void 0;const r=o(155);e.useRefObjectAsForwardedRef=function(e,t){(0,r.useImperativeHandle)(e,(()=>t.current))}})(),n})()));

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@rarui/typings",
+  "version": "1.0.0-rc.1",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "sideEffects": false,
+  "scripts": {
+    "build": "yarn g:webpack",
+    "clean": "rm -rf dist",
+    "version": "yarn version"
+  },
+  "homepage": "https://github.com/juniorconquista/boilerplate-design-system",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/juniorconquista/boilerplate-design-system.git"
+  },
+  "bugs": {
+    "url": "https://github.com/juniorconquista/boilerplate-design-system/issues"
+  },
+  "devDependencies": {
+    "@rarui/webpack": "workspace:^"
+  },
+  "stableVersion": "0.0.0"
+}

package/src/index.ts

@@ -0,0 +1,25 @@
+import { ForwardedRef, RefObject, useImperativeHandle } from "react";
+
+/**
+ * Use a ref object as the imperative handle for a forwarded ref. This can be used to
+ * synchronize the ref object with the forwarded ref and allow local access the reference
+ * instance with `.current`.
+ *
+ * **NOTE**: The `refObject` should be passed to the underlying element, NOT the `forwardedRef`.
+ */
+export function useRefObjectAsForwardedRef<T>(
+  forwardedRef: ForwardedRef<T>,
+  refObject: RefObject<T>,
+): void {
+  useImperativeHandle<T | null, T | null>(
+    forwardedRef,
+    () => refObject.current,
+  );
+}
+
+export type {
+  PolymorphicForwardRefComponent,
+  OwnProps,
+  IntrinsicElement,
+  Merge,
+} from "./index.types";

package/src/index.types.ts

@@ -0,0 +1,70 @@
+/**
+ * This file is originally from `@radix-ui/react-polymorphic` before the package
+ * was deprecated. The original source for this lived in the URL below.
+ *
+ * @see https://github.com/radix-ui/primitives/blob/17ffcb7aaa42cbd36b3c210ba86d7d73d218e5be/packages/react/polymorphic/src/polymorphic.ts
+ */
+
+import React from "react";
+
+/* -------------------------------------------------------------------------------------------------
+ * Utility types
+ * -----------------------------------------------------------------------------------------------*/
+type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
+
+/**
+ * Infers the OwnProps if E is a ForwardRefExoticComponentWithAs
+ */
+type OwnProps<E> =
+  E extends PolymorphicForwardRefComponent<any, infer P> ? P : {};
+
+/**
+ * Infers the JSX.IntrinsicElement if E is a ForwardRefExoticComponentWithAs
+ */
+type IntrinsicElement<E> =
+  E extends PolymorphicForwardRefComponent<infer I, any> ? I : never;
+
+type ForwardRefExoticComponent<E, OwnProps> = React.ForwardRefExoticComponent<
+  Merge<
+    E extends React.ElementType ? React.ComponentPropsWithRef<E> : never,
+    OwnProps & { as?: E }
+  >
+>;
+
+/* -------------------------------------------------------------------------------------------------
+ * PolymorphicForwardRefComponent
+ * -----------------------------------------------------------------------------------------------*/
+
+interface PolymorphicForwardRefComponent<
+  IntrinsicElementString,
+  OwnProps = {},
+  /**
+   * Extends original type to ensure built in React types play nice
+   * with polymorphic components still e.g. `React.ElementRef` etc.
+   */
+> extends ForwardRefExoticComponent<IntrinsicElementString, OwnProps> {
+  /**
+   * When `as` prop is passed, use this overload.
+   * Merges original own props (without DOM props) and the inferred props
+   * from `as` element with the own props taking precendence.
+   *
+   * We explicitly avoid `React.ElementType` and manually narrow the prop types
+   * so that events are typed when using JSX.IntrinsicElements.
+   */
+  <As = IntrinsicElementString>(
+    props: As extends ""
+      ? { as: keyof JSX.IntrinsicElements }
+      : As extends React.ComponentType<infer P>
+        ? Merge<P, OwnProps & { as: As }>
+        : As extends keyof JSX.IntrinsicElements
+          ? Merge<JSX.IntrinsicElements[As], OwnProps & { as: As }>
+          : never,
+  ): React.ReactElement | null;
+}
+
+export type {
+  PolymorphicForwardRefComponent,
+  OwnProps,
+  IntrinsicElement,
+  Merge,
+};

package/webpack.config.ts

@@ -0,0 +1,11 @@
+import path from "path";
+import { configuration } from "@rarui/webpack";
+
+const config = {
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    library: "@rarui/typings",
+  },
+};
+
+export default () => configuration.getConfiguration(config);