Merge Props for components

package.json

@@ -70,6 +70,7 @@
     "access": "public"
   },
   "dependencies": {
+    "merge-props": "^6.0.0",
     "react-aria": "^3.31.1",
     "react-stately": "^3.29.1",
     "rollup-plugin-visualizer": "^5.11.0"

src/components/FontSizes/Text.tsx

@@ -1,16 +1,17 @@
-import React, {HTMLProps} from "react";
-import {Size} from "../../utils/types";
+import React from "react";
+import {Code0Component, Code0Sizes} from "../../utils/types";
 import "./Text.style.scss"
+import {mergeCode0Props} from "../../utils/utils";
 
-export interface FontType extends Omit<Omit<HTMLProps<HTMLSpanElement>, "children">, "size"> {
+export interface FontType extends Omit<Omit<Code0Component<HTMLSpanElement>, "children">, "size"> {
     children: string,
-    size: Size,
+    size: Code0Sizes,
     hierarchy?: "primary" | "secondary" | "tertiary"
 }
 
-const Text: React.FC<FontType> = ({ size, children , hierarchy = "secondary", ...rest }) => {
+const Text: React.FC<FontType> = ({size, children, hierarchy = "secondary", ...rest}) => {
 
-    return <span {...rest} className={`text text--${hierarchy} text--${size}`}>
+    return <span {...mergeCode0Props(`text text--${hierarchy} text--${size}`, rest)}>
         {children}
     </span>
 }

src/components/alert/Alert.tsx

@@ -1,9 +1,10 @@
-import React, {ReactElement, ReactNode} from "react";
+import React, {ReactNode} from "react";
 import {IconAlertCircle, IconCircleCheck, IconCircleX, IconInfoCircle, IconX} from "@tabler/icons-react";
 import "./Alert.style.scss"
-import {Color} from "../../utils/types";
+import {Code0Component, Color} from "../../utils/types";
+import {mergeCode0Props} from "../../utils/utils";
 
-export interface AlertType {
+export interface AlertType extends Omit<Code0Component<HTMLDivElement>, "title"> {
 
     children?: ReactNode | ReactNode[]
     title: ReactNode
@@ -28,9 +29,9 @@ const IconColors = {
 
 const Alert: React.FC<AlertType> = (props) => {
 
-    const {color = "primary", dismissible = false, icon = true, title, onClose = (event) => {}, children} = props
+    const {color = "primary", dismissible = false, icon = true, title, onClose = (event) => {}, children, ...rest} = props
 
-    return <div className={`alert alert--${color}`}>
+    return <div {...mergeCode0Props(`alert alert--${color}`, rest)}>
         <div className={"alert__header"}>
             <div className={"alert__header-wrapper"}>
                 {icon ? <AlertIcon color={color}/> : null}
@@ -46,10 +47,6 @@ const Alert: React.FC<AlertType> = (props) => {
 
 }
 
-export interface AlertHeadingType {
-    children: ReactNode
-}
-
 export interface AlertIconType {
     color: Color
 }
@@ -61,5 +58,4 @@ const AlertIcon: React.FC<AlertIconType> = ({color}) => {
 }
 
 
-
 export default Alert

src/components/badge/Badge.tsx

@@ -1,8 +1,9 @@
-import React, {HTMLProps} from "react";
+import React from "react";
 import "./Badge.style.scss"
-import {Color} from "../../utils/types";
+import {Code0Component, Color} from "../../utils/types";
+import {mergeCode0Props} from "../../utils/utils";
 
-export interface BadgeType extends HTMLProps<HTMLSpanElement>{
+export interface BadgeType extends Code0Component<HTMLSpanElement>{
     children: string
     //defaults to primary
     color?: Color
@@ -12,7 +13,7 @@ const Badge: React.FC<BadgeType> = (props) => {
 
     const {color = "primary", children, ...args} = props
 
-    return <span {...args} className={`badge badge--${color}`}>
+    return <span {...mergeCode0Props(`badge badge--${color}`, args)}>
         {children}
     </span>
 }

src/components/button-group/ButtonGroup.tsx

@@ -1,16 +1,18 @@
 import React, {ReactElement} from "react";
 import {ButtonType} from "../button/Button";
 import "./ButtonGroup.style.scss"
+import {Code0Component} from "../../utils/types";
+import {mergeCode0Props} from "../../utils/utils";
 
-export interface ButtonGroupType {
+export interface ButtonGroupType extends Code0Component<HTMLDivElement> {
     children: ReactElement<ButtonType>[]
 }
 
 const ButtonGroup: React.FC<ButtonGroupType> = (props) => {
 
-    const {children} = props
+    const {children, ...args} = props
 
-    return <div className={"button-group"}>
+    return <div {...mergeCode0Props("button-group", args)}>
 
         {children.map((child, i) => {
             return <div

src/components/button/Button.tsx

@@ -1,13 +1,11 @@
 import "./Button.style.scss"
 import React, {
-    AnchorHTMLAttributes,
-    DetailedHTMLProps,
     ReactNode
 } from "react";
-import {getChild, getContent} from "../../utils/utils";
-import {Color} from "../../utils/types"
+import {getChild, getContent, mergeCode0Props} from "../../utils/utils";
+import {Code0Component, Color} from "../../utils/types"
 
-export interface ButtonType extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
+export interface ButtonType extends Code0Component<HTMLAnchorElement> {
     children: ReactNode | ReactNode[]
     //defaults to primary
     color?: Color,
@@ -19,7 +17,7 @@ export interface ButtonType extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLA
     disabled?: boolean
 }
 
-export interface ButtonIconType {
+export interface ButtonIconType extends Code0Component<HTMLSpanElement>{
     children: ReactNode
 }
 
@@ -29,16 +27,17 @@ const Button: React.FC<ButtonType> = (props) => {
     const icon = getChild(children, ButtonIcon)
     const content = getContent(children, ButtonIcon)
 
-    return <a {...args}
-              className={`button button--${color} ${active ? "button--active" : ""} ${disabled ? "button--disabled" : ""} button--${variant}`}
+    return <a {...mergeCode0Props(`button button--${color} ${active ? "button--active" : ""} ${disabled ? "button--disabled" : ""} button--${variant}`, args)}
               aria-disabled={disabled ? "true" : "false"}>
         {icon}
         {content ? <span className={"button__content"}>{content}</span> : null}
     </a>
 }
 
-const ButtonIcon: React.FC<ButtonIconType> = ({children}) => {
-    return <span className={"button__icon"}>
+const ButtonIcon: React.FC<ButtonIconType> = (props) => {
+
+    const {children, ...args} = props
+    return <span {...mergeCode0Props("button__icon", args)}>
         {children}
     </span>
 }

src/components/card/Card.tsx

@@ -1,9 +1,10 @@
-import React, {HTMLProps, ReactElement, ReactNode} from "react";
+import React, {ReactNode} from "react";
 import "./Card.style.scss"
-import {Color, Size} from "../../utils/types";
+import {Code0Component, Color} from "../../utils/types";
+import {mergeCode0Props} from "../../utils/utils";
 
 
-export interface CardType extends HTMLProps<HTMLDivElement> {
+export interface CardType extends Code0Component<HTMLDivElement> {
     children: ReactNode | ReactNode[]
     //defaults to secondary
     color?: Color,
@@ -18,7 +19,7 @@ export interface CardType extends HTMLProps<HTMLDivElement> {
 }
 
 
-export interface SectionType {
+export interface SectionType extends Code0Component<HTMLDivElement> {
     children: ReactNode | ReactNode[]
     //defaults to false
     image?: boolean,
@@ -40,8 +41,7 @@ const Card: React.FC<CardType> = (props) => {
     } = props
 
     return <>
-        <div {...args}
-             className={`card ${outline && "card--outline"} ${gradient && "card--gradient"} ${gradient && `card--gradient-${gradientPosition}`} card--${color} card--${variant}`}>
+        <div {...mergeCode0Props(`card ${outline ? "card--outline" : ""} ${gradient ? "card--gradient" : ""} ${gradient ? `card--gradient-${gradientPosition}` : ""} card--${color} card--${variant}`, args)}>
             {children}
         </div>
     </>
@@ -52,12 +52,14 @@ const CardSection: React.FC<SectionType> = (props) => {
     const {
         image = false,
         border = false,
-        children
+        children,
+        ...args
     } = props;
 
     return <>
-        <div
-            className={`card__section ${border ? "card__section--border" : ""} ${image ? "card__section--image" : ""}`}>{children}</div>
+        <div {...mergeCode0Props(`card__section ${border ? "card__section--border" : ""} ${image ? "card__section--image" : ""}`, args)}>
+            {children}
+        </div>
     </>
 }
 

src/components/col/Col.tsx

@@ -1,9 +1,11 @@
-import React, {HTMLProps, ReactNode} from "react";
+import React, {ReactNode} from "react";
 import "./Col.style.scss"
+import {Code0Component} from "../../utils/types";
+import {mergeCode0Props} from "../../utils/utils";
 
 export type ColBreakPointRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
-export interface ColType extends HTMLProps<HTMLDivElement> {
+export interface ColType extends Code0Component<HTMLDivElement> {
     children: ReactNode | ReactNode[]
     xs?: ColBreakPointRange
     sm?: ColBreakPointRange
@@ -17,7 +19,7 @@ const Col: React.FC<ColType> = (props) => {
 
     const {children, xs, sm, md, lg, xl, xxl, ...args} = props
 
-    return <div {...args} className={`col ${xs ? `col-xs-${xs}` : ""} ${sm ? `col-sm-${sm}` : ""} ${md ? `col-md-${md}` : ""} ${lg ? `col-lg-${lg}` : ""} ${xl ? `col-lg-${xl}` : ""} ${xxl ? `col-xxl-${xxl}` : ""}`}>
+    return <div {...mergeCode0Props(`col ${xs ? `col-xs-${xs}` : ""} ${sm ? `col-sm-${sm}` : ""} ${md ? `col-md-${md}` : ""} ${lg ? `col-lg-${lg}` : ""} ${xl ? `col-lg-${xl}` : ""} ${xxl ? `col-xxl-${xxl}` : ""}`, args)}>
         {children}
     </div>
 }