refactor: rename ComponentProps and ComponentInProps

swordev · Apr 11, 2022 · ed0ee1c · ed0ee1c
1 parent a275334
commit ed0ee1c
Show file tree

Hide file tree

Showing 36 changed files with 103 additions and 105 deletions.
diff --git a/.changeset/forty-pans-walk.md b/.changeset/forty-pans-walk.md
@@ -0,0 +1,9 @@
+---
+"@suid/base": patch
+"@suid/codemod": patch
+"@suid/material": patch
+"@suid/system": patch
+"@suid/types": patch
+---
+
+Rename `ComponentProps` and `ComponentInProps`
diff --git a/packages/base/src/BadgeUnstyled/BadgeUnstyled.tsx b/packages/base/src/BadgeUnstyled/BadgeUnstyled.tsx
@@ -3,14 +3,13 @@ import createComponentFactory from "../createComponentFactory";
 import appendOwnerState from "../utils/appendOwnerState";
 import { getBadgeUtilityClass } from "./badgeUnstyledClasses";
 import useBadge from "./useBadge";
-import { ComponentInProps } from "@suid/types";
+import { InPropsOf } from "@suid/types";
 import capitalize from "@suid/utils/capitalize";
 import clsx from "clsx";
 import { createMemo, mergeProps } from "solid-js";
 import { Dynamic } from "solid-js/web";
 
-type OnwerState = ComponentInProps<BadgeUnstyledTypeMap> &
-  ReturnType<typeof useBadge>;
+type OnwerState = InPropsOf<BadgeUnstyledTypeMap> & ReturnType<typeof useBadge>;
 
 const $ = createComponentFactory<BadgeUnstyledTypeMap, OnwerState>()({
   name: "MuiBadgeUnstyled",

diff --git a/packages/base/src/ModalUnstyled/ModalUnstyled.tsx b/packages/base/src/ModalUnstyled/ModalUnstyled.tsx
@@ -6,15 +6,15 @@ import isHostComponent from "../utils/isHostComponent";
 import ModalManager, { ariaHidden } from "./ModalManager";
 import { getModalUtilityClass } from "./modalUnstyledClasses";
 import createElementRef from "@suid/system/createElementRef";
-import { ComponentInProps } from "@suid/types";
+import { InPropsOf } from "@suid/types";
 import ownerDocument from "@suid/utils/ownerDocument";
 import clsx from "clsx";
 import { createEffect, createSignal, JSX, onCleanup, Show } from "solid-js";
 import { Dynamic } from "solid-js/web";
 
 const $ = createComponentFactory<
   ModalUnstyledTypeMap,
-  ComponentInProps<ModalUnstyledTypeMap> & {
+  InPropsOf<ModalUnstyledTypeMap> & {
     exited: boolean;
   }
 >()({

diff --git a/packages/base/src/PopperUnstyled/PopperUnstyled.tsx b/packages/base/src/PopperUnstyled/PopperUnstyled.tsx
@@ -6,7 +6,7 @@ import { createPopper } from "@popperjs/core";
 import { Instance, Options } from "@popperjs/core";
 import createElementRef from "@suid/system/createElementRef";
 import createRef from "@suid/system/createRef";
-import { ComponentInProps } from "@suid/types";
+import { InPropsOf } from "@suid/types";
 import ownerDocument from "@suid/utils/ownerDocument";
 import {
   createEffect,
@@ -45,7 +45,7 @@ const $ = createComponentFactory<PopperUnstyledTypeMap>()({
     }),
 });
 
-type PopperUnstyledInProps = ComponentInProps<PopperUnstyledTypeMap>;
+type PopperUnstyledInProps = InPropsOf<PopperUnstyledTypeMap>;
 
 function flipPlacement(
   placement: PopperUnstyledInProps["placement"],

diff --git a/packages/base/src/createComponentFactory.ts b/packages/base/src/createComponentFactory.ts
@@ -2,9 +2,9 @@ import composeClasses from "./composeClasses";
 import useTheme from "./useTheme";
 import { Theme } from "@suid/system/createTheme";
 import {
-  ComponentDefaultProps,
-  ComponentInProps,
-  ComponentProps,
+  DefaultPropsOf,
+  InPropsOf,
+  PropsOf,
   OverridableComponent,
   OverridableTypeMap,
   SuidComponentType,
@@ -15,15 +15,15 @@ import { createMutable } from "solid-js/store";
 
 function createComponentFactory<
   C extends SuidComponentType,
-  O = ComponentInProps<C>
+  O = InPropsOf<C>
 >() {
-  type Props = ComponentProps<C>;
-  type InProps = ComponentInProps<C>;
+  type Props = PropsOf<C>;
+  type InProps = InPropsOf<C>;
   return function <S extends Record<string, (string | false)[]>>(options: {
     name: NonNullable<C["name"]>;
     selfPropNames: Exclude<keyof C["selfProps"], "sx">[];
     propDefaults?: (data: {
-      set: (props: Omit<ComponentDefaultProps<C>, "children">) => InProps;
+      set: (props: Omit<DefaultPropsOf<C>, "children">) => InProps;
       theme: Theme;
       inProps: Props;
     }) => InProps;

diff --git a/packages/codemod/src/transforms/replaceReactHTMLAttributes.ts b/packages/codemod/src/transforms/replaceReactHTMLAttributes.ts
@@ -200,7 +200,7 @@ export default function replaceReactHTMLAttributes(node: Identifier) {
         factory.createLiteralTypeNode(factory.createStringLiteral(tag))
       );
 
-    parentExpr?.replaceWithText("ST.ComponentProps");
+    parentExpr?.replaceWithText("ST.PropsOf");
     node.getSourceFile().addImportDeclaration({
       namespaceImport: "ST",
       moduleSpecifier: "@suid/types",

diff --git a/packages/material/src/AppBar/AppBar.tsx b/packages/material/src/AppBar/AppBar.tsx
@@ -4,7 +4,7 @@ import styled from "../styles/styled";
 import capitalize from "../utils/capitalize";
 import { getAppBarUtilityClass } from "./appBarClasses";
 import createComponentFactory from "@suid/base/createComponentFactory";
-import { ComponentInProps } from "@suid/types";
+import { InPropsOf } from "@suid/types";
 import clsx from "clsx";
 
 const $ = createComponentFactory<AppBarTypeMap>()({
@@ -37,7 +37,7 @@ const AppBarRoot = styled(Paper, {
       styles[`color${capitalize(props.ownerState.color)}`],
     ];
   },
-})<ComponentInProps<AppBarTypeMap>>(({ theme, ownerState }) => {
+})<InPropsOf<AppBarTypeMap>>(({ theme, ownerState }) => {
   const backgroundColorDefault =
     theme.palette.mode === "light"
       ? theme.palette.grey[100]

diff --git a/packages/material/src/Breadcrumbs/Breadcrumbs.tsx b/packages/material/src/Breadcrumbs/Breadcrumbs.tsx
@@ -7,7 +7,7 @@ import breadcrumbsClasses, {
 } from "./breadcrumbsClasses";
 import createComponentFactory from "@suid/base/createComponentFactory";
 import createElementRef from "@suid/system/createElementRef";
-import { ComponentInProps } from "@suid/types";
+import { InPropsOf } from "@suid/types";
 import clsx from "clsx";
 import {
   children,
@@ -82,7 +82,7 @@ function insertSeparators(
   items: any[],
   className: string,
   separator: JSXElement,
-  ownerState: ComponentInProps<BreadcrumbsTypeMap>
+  ownerState: InPropsOf<BreadcrumbsTypeMap>
 ) {
   return items.reduce((acc, current, index) => {
     if (index < items.length - 1) {

diff --git a/packages/material/src/Button/Button.tsx b/packages/material/src/Button/Button.tsx
@@ -6,11 +6,11 @@ import ButtonGroupContext from "./../ButtonGroup/ButtonGroupContext";
 import buttonClasses, { getButtonUtilityClass } from "./buttonClasses";
 import createComponentFactory from "@suid/base/createComponentFactory";
 import { alpha } from "@suid/system";
-import { ComponentInProps } from "@suid/types";
+import { InPropsOf } from "@suid/types";
 import clsx from "clsx";
 import { Show, useContext } from "solid-js";
 
-type OwnerState = ComponentInProps<ButtonTypeMap>;
+type OwnerState = InPropsOf<ButtonTypeMap>;
 
 const $ = createComponentFactory<ButtonTypeMap>()({
   name: "MuiButton",

diff --git a/packages/material/src/ButtonBase/ButtonBase.tsx b/packages/material/src/ButtonBase/ButtonBase.tsx
@@ -7,7 +7,7 @@ import buttonBaseClasses, {
 } from "./buttonBaseClasses";
 import createComponentFactory from "@suid/base/createComponentFactory";
 import createRef from "@suid/system/createRef";
-import { ComponentInProps, EventParam } from "@suid/types";
+import { InPropsOf, EventParam } from "@suid/types";
 import useIsFocusVisible from "@suid/utils/useIsFocusVisible";
 import clsx from "clsx";
 import {
@@ -22,7 +22,7 @@ import {
 
 const $ = createComponentFactory<
   ButtonBaseTypeMap,
-  ComponentInProps<ButtonBaseTypeMap> & {
+  InPropsOf<ButtonBaseTypeMap> & {
     focusVisible: boolean;
   }
 >()({

diff --git a/packages/material/src/CardMedia/CardMedia.tsx b/packages/material/src/CardMedia/CardMedia.tsx
@@ -2,11 +2,11 @@ import { CardMediaTypeMap } from ".";
 import styled from "../styles/styled";
 import { getCardMediaUtilityClass } from "./cardMediaClasses";
 import createComponentFactory from "@suid/base/createComponentFactory";
-import { ComponentInProps } from "@suid/types";
+import { InPropsOf } from "@suid/types";
 import clsx from "clsx";
 import { createMemo, mergeProps } from "solid-js";
 
-type OwnerState = ComponentInProps<CardMediaTypeMap> & {
+type OwnerState = InPropsOf<CardMediaTypeMap> & {
   isMediaComponent: boolean;
   isImageComponent: boolean;
 };

diff --git a/packages/material/src/CircularProgress/CircularProgress.tsx b/packages/material/src/CircularProgress/CircularProgress.tsx
@@ -4,7 +4,7 @@ import capitalize from "../utils/capitalize";
 import { getCircularProgressUtilityClass } from "./circularProgressClasses";
 import createComponentFactory from "@suid/base/createComponentFactory";
 import SxProps from "@suid/system/sxProps";
-import { ComponentProps } from "@suid/types";
+import { PropsOf } from "@suid/types";
 import { randomString } from "@suid/utils/crypto";
 import clsx from "clsx";
 import { createMemo } from "solid-js";
@@ -178,7 +178,7 @@ const CircularProgress = $.component(function CircularProgress({
     if (props.variant !== "determinate") return {};
     return {
       "aria-valuenow": Math.round(props.value),
-    } as ComponentProps<CircularProgressTypeMap>;
+    } as PropsOf<CircularProgressTypeMap>;
   });
 
   return (

diff --git a/packages/material/src/Fab/Fab.tsx b/packages/material/src/Fab/Fab.tsx
@@ -4,7 +4,7 @@ import capitalize from "../utils/capitalize";
 import { FabTypeMap } from "./FabProps";
 import fabClasses, { getFabUtilityClass } from "./fabClasses";
 import createComponentFactory from "@suid/base/createComponentFactory";
-import { ComponentInProps } from "@suid/types";
+import { InPropsOf } from "@suid/types";
 import clsx from "clsx";
 
 const $ = createComponentFactory<FabTypeMap>()({
@@ -55,7 +55,7 @@ const FabRoot = styled(ButtonBase, {
       styles[ownerState.color],
     ];
   },
-})<ComponentInProps<FabTypeMap>>(
+})<InPropsOf<FabTypeMap>>(
   ({ theme, ownerState }) => ({
     ...theme.typography.button,
     minHeight: 36,

diff --git a/packages/material/src/FilledInput/FilledInput.tsx b/packages/material/src/FilledInput/FilledInput.tsx
@@ -12,7 +12,7 @@ import filledInputClasses, {
   getFilledInputUtilityClass,
 } from "./filledInputClasses";
 import createComponentFactory from "@suid/base/createComponentFactory";
-import { ComponentProps } from "@suid/types";
+import { PropsOf } from "@suid/types";
 import deepmerge from "@suid/utils/deepmerge";
 import { createMemo, mergeProps } from "solid-js";
 
@@ -47,7 +47,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
       !ownerState.disableUnderline && styles.underline,
     ];
   },
-})<ComponentProps<FilledInputTypeMap>>(({ theme, ownerState }) => {
+})<PropsOf<FilledInputTypeMap>>(({ theme, ownerState }) => {
   const light = theme.palette.mode === "light";
   const bottomLineColor = light
     ? "rgba(0, 0, 0, 0.42)"
@@ -151,7 +151,7 @@ const FilledInputInput = styled(InputBaseInput, {
   name: "MuiFilledInput",
   slot: "Input",
   overridesResolver: inputBaseInputOverridesResolver as any,
-})<ComponentProps<FilledInputTypeMap>>(({ theme, ownerState }) => ({
+})<PropsOf<FilledInputTypeMap>>(({ theme, ownerState }) => ({
   paddingTop: 25,
   paddingRight: 12,
   paddingBottom: 8,

diff --git a/packages/material/src/FormControlLabel/FormControlLabel.tsx b/packages/material/src/FormControlLabel/FormControlLabel.tsx
@@ -9,7 +9,7 @@ import formControlLabelClasses, {
   getFormControlLabelUtilityClasses,
 } from "./formControlLabelClasses";
 import createComponentFactory from "@suid/base/createComponentFactory";
-import { ComponentInProps } from "@suid/types";
+import { InPropsOf } from "@suid/types";
 import clsx from "clsx";
 import {
   children,
@@ -19,7 +19,7 @@ import {
   splitProps,
 } from "solid-js";
 
-type OwnerState = ComponentInProps<FormControlLabelTypeMap> & {
+type OwnerState = InPropsOf<FormControlLabelTypeMap> & {
   error?: boolean;
 };
 

diff --git a/packages/material/src/FormGroup/FormGroup.tsx b/packages/material/src/FormGroup/FormGroup.tsx
@@ -4,11 +4,11 @@ import styled from "../styles/styled";
 import { FormGroupTypeMap } from "./FormGroupProps";
 import { getFormGroupUtilityClass } from "./formGroupClasses";
 import createComponentFactory from "@suid/base/createComponentFactory";
-import { ComponentInProps } from "@suid/types";
+import { InPropsOf } from "@suid/types";
 import clsx from "clsx";
 import { mergeProps } from "solid-js";
 
-type OwnerState = ComponentInProps<FormGroupTypeMap> & {
+type OwnerState = InPropsOf<FormGroupTypeMap> & {
   error?: boolean;
 };
 

diff --git a/packages/material/src/FormHelperText/FormHelperText.tsx b/packages/material/src/FormHelperText/FormHelperText.tsx
@@ -8,11 +8,11 @@ import formHelperTextClasses, {
   getFormHelperTextUtilityClasses,
 } from "./formHelperTextClasses";
 import createComponentFactory from "@suid/base/createComponentFactory";
-import { ComponentProps } from "@suid/types";
+import { PropsOf } from "@suid/types";
 import clsx from "clsx";
 import { children, mergeProps } from "solid-js";
 
-type OwnerState = ComponentProps<FormHelperTextTypeMap> &
+type OwnerState = PropsOf<FormHelperTextTypeMap> &
   Pick<
     FormControlState,
     | "variant"

diff --git a/packages/material/src/FormLabel/FormLabel.tsx b/packages/material/src/FormLabel/FormLabel.tsx
@@ -9,11 +9,11 @@ import formLabelClasses, {
   getFormLabelUtilityClasses,
 } from "./formLabelClasses";
 import createComponentFactory from "@suid/base/createComponentFactory";
-import { ComponentProps } from "@suid/types";
+import { PropsOf } from "@suid/types";
 import clsx from "clsx";
 import { mergeProps, Show } from "solid-js";
 
-type OwnerState = ComponentProps<FormLabelTypeMap> &
+type OwnerState = PropsOf<FormLabelTypeMap> &
   Pick<
     FormControlState,
     "disabled" | "error" | "filled" | "focused" | "required"

diff --git a/packages/material/src/FormLabel/FormLabelProps.tsx b/packages/material/src/FormLabel/FormLabelProps.tsx
@@ -2,11 +2,7 @@ import { OverrideProps } from "../OverridableComponent";
 import { Theme } from "../styles";
 import { FormLabelClasses } from "./formLabelClasses";
 import { SxProps } from "@suid/system";
-import {
-  OverridableStringUnion,
-  ElementType,
-  ComponentProps,
-} from "@suid/types";
+import { OverridableStringUnion, ElementType, PropsOf } from "@suid/types";
 import { JSXElement } from "solid-js";
 
 export interface FormLabelPropsColorOverrides {}
@@ -58,7 +54,7 @@ export interface FormLabelTypeMap<P = {}, D extends ElementType = "label"> {
   defaultComponent: D;
 }
 
-export type FormLabelBaseProps = ComponentProps<"label">;
+export type FormLabelBaseProps = PropsOf<"label">;
 
 export type FormLabelProps<
   D extends ElementType = FormLabelTypeMap["defaultComponent"],

diff --git a/packages/material/src/Grid/Grid.tsx b/packages/material/src/Grid/Grid.tsx
@@ -20,7 +20,7 @@ import {
   resolveBreakpointValues,
 } from "@suid/system";
 import { SxPropsObject } from "@suid/system/sxProps";
-import { ComponentInProps } from "@suid/types";
+import { InPropsOf } from "@suid/types";
 import clsx from "clsx";
 import { JSXElement, useContext } from "solid-js";
 
@@ -88,7 +88,7 @@ function getOffset(val: string) {
 
 export function generateGrid(input: {
   theme: Theme;
-  ownerState: ComponentInProps<GridTypeMap>;
+  ownerState: InPropsOf<GridTypeMap>;
 }) {
   const { theme, ownerState } = input;
   let size: number | boolean | "auto";
@@ -182,7 +182,7 @@ export function generateGrid(input: {
 
 export function generateDirection(input: {
   theme: Theme;
-  ownerState: ComponentInProps<GridTypeMap>;
+  ownerState: InPropsOf<GridTypeMap>;
 }) {
   const { theme, ownerState } = input;
   const directionValues = resolveBreakpointValues({
@@ -210,7 +210,7 @@ export function generateDirection(input: {
 
 export function generateRowGap(input: {
   theme: Theme;
-  ownerState: ComponentInProps<GridTypeMap>;
+  ownerState: InPropsOf<GridTypeMap>;
 }) {
   const { theme, ownerState } = input;
   const { container, rowSpacing } = ownerState;
@@ -243,7 +243,7 @@ export function generateRowGap(input: {
 
 export function generateColumnGap(input: {
   theme: Theme;
-  ownerState: ComponentInProps<GridTypeMap>;
+  ownerState: InPropsOf<GridTypeMap>;
 }) {
   const { theme, ownerState } = input;
   const { container, columnSpacing } = ownerState;
@@ -356,7 +356,7 @@ const GridRoot = styled("div", {
       xl !== false && styles[`grid-xl-${String(xl)}`],
     ];
   },
-})<ComponentInProps<GridTypeMap>>(
+})<InPropsOf<GridTypeMap>>(
   ({ ownerState }) => ({
     boxSizing: "border-box",
     ...(ownerState.container && {