Generate v. 3.0.0

Author: Krzysztof Wilk

README.txt

@@ -1,6 +1,6 @@
 MDB 5 React
 
-Version: FREE 2.4.0
+Version: FREE 3.0.0
 
 Documentation:
 https://mdbootstrap.com/docs/b5/react/

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-react-ui-kit-demo",
-  "version": "2.4.0",
+  "version": "3.0.0",
   "main": "index.js",
   "repository": {
     "type": "git",

app/src/components/Accordion/Accordion.tsx

@@ -19,6 +19,6 @@ const MDBAccordion: React.FC<AccordionProps> = React.forwardRef<HTMLAllCollectio
   }
 );
 
-MDBAccordion.defaultProps = { tag: 'div', initialActive: '' };
+MDBAccordion.defaultProps = { tag: 'div', initialActive: 0 };
 
 export default MDBAccordion;

app/src/components/Accordion/AccordionContext.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 
 interface AccordionProps {
-  activeItem: string | undefined;
+  activeItem?: number;
   setActiveItem: React.SetStateAction<any>;
-  alwaysOpen: boolean | undefined;
-  initialActive: string | undefined;
+  alwaysOpen?: boolean;
+  initialActive?: number;
 }
 
 const AccordionContext = React.createContext<AccordionProps>({
-  activeItem: '',
+  activeItem: 0,
   setActiveItem: null,
   alwaysOpen: false,
-  initialActive: '',
+  initialActive: 0,
 });
 
 export { AccordionContext };

app/src/components/Accordion/AccordionItem/AccordionItem.tsx

@@ -5,7 +5,21 @@ import type { AccordionItemProps } from './types';
 import MDBCollapse from '../../Collapse/Collapse';
 
 const MDBAccordionItem: React.FC<AccordionItemProps> = React.forwardRef<HTMLAllCollection, AccordionItemProps>(
-  ({ className, bodyClassName, headerClassName, collapseId, headerTitle, tag: Tag, children, ...props }, ref) => {
+  (
+    {
+      className,
+      bodyClassName,
+      bodyStyle,
+      headerClassName,
+      collapseId,
+      headerTitle,
+      headerStyle,
+      tag: Tag,
+      children,
+      ...props
+    },
+    ref
+  ) => {
     const { activeItem, setActiveItem, alwaysOpen, initialActive } = useContext(AccordionContext);
 
     const [openState, setOpenState] = useState(initialActive);
@@ -18,23 +32,28 @@ const MDBAccordionItem: React.FC<AccordionItemProps> = React.forwardRef<HTMLAllC
       alwaysOpen ? collapseId !== openState && 'collapsed' : collapseId !== activeItem && 'collapsed'
     );
 
-    const toggleAccordion = (value: string) => {
+    const toggleAccordion = (value: number) => {
       if (alwaysOpen) {
-        value !== openState ? setOpenState(value) : setOpenState('');
+        value !== openState ? setOpenState(value) : setOpenState(0);
       } else {
-        value !== activeItem ? setActiveItem(value) : setActiveItem('');
+        value !== activeItem ? setActiveItem(value) : setActiveItem(0);
       }
     };
 
     return (
       <Tag className={classes} ref={ref} {...props}>
-        <h2 className={headerClasses}>
+        <h2 className={headerClasses} style={headerStyle}>
           <button onClick={() => toggleAccordion(collapseId)} className={buttonClasses} type='button'>
             {headerTitle}
           </button>
         </h2>
-        <MDBCollapse id={collapseId} show={alwaysOpen ? openState : activeItem}>
-          <div className={bodyClasses}>{children}</div>
+        <MDBCollapse
+          id={collapseId.toString()}
+          show={alwaysOpen ? openState === collapseId : activeItem === collapseId}
+        >
+          <div className={bodyClasses} style={bodyStyle}>
+            {children}
+          </div>
         </MDBCollapse>
       </Tag>
     );

app/src/components/Accordion/AccordionItem/index.d.ts

@@ -1,13 +1,6 @@
 import * as React from 'react';
+import { AccordionItemProps } from './types';
 
-declare const MDBAccordionItem: React.FunctionComponent<{
-  className?: string;
-  bodyClassName?: string;
-  headerClassName?: string;
-  collapseId: string;
-  headerTitle?: string;
-  tag?: React.ComponentProps<any>;
-  [rest: string]: any;
-}>;
+declare const MDBAccordionItem: React.FunctionComponent<AccordionItemProps>;
 
 export default MDBAccordionItem;

app/src/components/Accordion/AccordionItem/types.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 
-type AccordionItemProps = {
-  className?: string;
+interface AccordionItemProps extends React.HTMLAttributes<HTMLElement> {
   bodyClassName?: string;
+  bodyStyle?: React.CSSProperties;
+  collapseId: number;
   headerClassName?: string;
-  collapseId: string;
-  headerTitle?: string;
+  headerStyle?: React.CSSProperties;
+  headerTitle?: React.ReactNode;
+  ref?: React.ForwardedRef<HTMLAllCollection>;
   tag?: React.ComponentProps<any>;
-  [rest: string]: any;
-};
+}
 
 export { AccordionItemProps };

app/src/components/Accordion/index.d.ts

@@ -1,12 +1,6 @@
 import * as React from 'react';
+import { AccordionProps } from './types';
 
-declare const MDBAccordion: React.FunctionComponent<{
-  alwaysOpen?: boolean;
-  className?: string;
-  flush?: boolean;
-  initialActive?: string;
-  tag?: React.ComponentProps<any>;
-  [rest: string]: any;
-}>;
+declare const MDBAccordion: React.FunctionComponent<AccordionProps>;
 
 export default MDBAccordion;

app/src/components/Accordion/types.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 
-type AccordionProps = {
+interface AccordionProps extends React.HTMLAttributes<HTMLElement> {
   alwaysOpen?: boolean;
-  className?: string;
   flush?: boolean;
-  initialActive?: string;
+  initialActive?: number;
+  ref?: React.ForwardedRef<HTMLAllCollection>;
   tag?: React.ComponentProps<any>;
-  [rest: string]: any;
-};
+}
 
 export { AccordionProps };

app/src/components/Badge/index.d.ts

@@ -1,13 +1,6 @@
 import * as React from 'react';
+import { BadgeProps } from './types';
 
-declare const MDBBadge: React.FunctionComponent<{
-  className?: string;
-  pill?: boolean;
-  dot?: boolean;
-  notification?: boolean;
-  color?: string;
-  tag?: React.ComponentProps<any>;
-  [rest: string]: any;
-}>;
+declare const MDBBadge: React.FunctionComponent<BadgeProps>;
 
 export default MDBBadge;

app/src/components/Badge/types.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 
-type BadgeProps = {
-  className?: string;
-  pill?: boolean;
+interface BadgeProps extends Omit<React.AllHTMLAttributes<HTMLElement>, 'color'> {
+  color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'light' | 'dark' | 'muted' | 'white' | 'info';
   dot?: boolean;
   notification?: boolean;
-  color?: string;
+  pill?: boolean;
+  ref?: React.ForwardedRef<HTMLAllCollection>;
   tag?: React.ComponentProps<any>;
-  [rest: string]: any;
-};
+}
 
 export { BadgeProps };

app/src/components/Button/index.d.ts

@@ -1,24 +1,6 @@
 import * as React from 'react';
+import { ButtonProps } from './types';
 
-declare const MDBBtn: React.FunctionComponent<{
-  className?: string;
-  color?: string;
-  outline?: boolean;
-  rounded?: boolean;
-  floating?: boolean;
-  disabled?: boolean;
-  size?: string;
-  href?: string;
-  role?: string;
-  block?: boolean;
-  type?: 'reset' | 'submit' | 'button';
-  active?: boolean;
-  toggle?: boolean;
-  target?: string;
-  value?: string | number;
-  noRipple?: boolean;
-  tag?: React.ComponentProps<any>;
-  [rest: string]: any;
-}>;
+declare const MDBBtn: React.FunctionComponent<ButtonProps>;
 
 export default MDBBtn;

app/src/components/Button/types.tsx

@@ -1,22 +1,40 @@
-type ButtonProps = {
-  className?: string;
-  color?: string;
+type btnProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+type anchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
+
+type joinedTypes = btnProps & anchorProps;
+
+interface ButtonProps extends Omit<joinedTypes, 'size' | 'color'> {
+  active?: boolean;
+  block?: boolean;
+  color?:
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'light'
+    | 'dark'
+    | 'muted'
+    | 'white'
+    | 'info'
+    | 'none'
+    | 'link';
+
+  floating?: boolean;
+  noRipple?: boolean;
   outline?: boolean;
+  rippleUnbound?: boolean;
+  rippleColor?: string;
+  rippleRadius?: number;
+  rippleDuration?: number;
+  rippleCentered?: boolean;
+  ref?: React.ForwardedRef<HTMLAllCollection>;
   rounded?: boolean;
-  floating?: boolean;
-  disabled?: boolean;
-  size?: string;
-  href?: string;
-  role?: string;
-  block?: boolean;
-  type?: 'reset' | 'submit' | 'button';
-  active?: boolean;
+  size?: 'sm' | 'lg';
   toggle?: boolean;
   target?: string;
-  value?: string | number;
-  noRipple?: boolean;
   tag?: React.ComponentProps<any>;
-  [rest: string]: any;
-};
+  to?: string;
+}
 
 export { ButtonProps };

app/src/components/ButtonGroup/ButtonGroup.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import clsx from 'clsx';
 import type { ButtonGroupProps } from './types';
 

app/src/components/ButtonGroup/index.d.ts

@@ -1,14 +1,6 @@
 import * as React from 'react';
+import { ButtonGroupProps } from './types';
 
-declare const MDBBtnGroup: React.FunctionComponent<{
-  className?: string;
-  role?: string;
-  shadow?: string;
-  toolbar?: boolean;
-  size?: string;
-  vertical?: boolean;
-  tag?: React.ComponentProps<any>;
-  [rest: string]: any;
-}>;
+declare const MDBBtnGroup: React.FunctionComponent<ButtonGroupProps>;
 
 export default MDBBtnGroup;

app/src/components/ButtonGroup/types.tsx

@@ -1,12 +1,10 @@
-type ButtonGroupProps = {
-  className?: string;
-  role?: string;
-  shadow?: string;
+interface ButtonGroupProps extends Omit<React.HTMLAttributes<HTMLElement>, 'size'> {
+  ref?: React.ForwardedRef<HTMLAllCollection>;
+  size?: 'sm' | 'lg';
+  shadow?: '0' | '1' | '2' | '3' | '4' | '5';
   toolbar?: boolean;
-  size?: string;
   vertical?: boolean;
   tag?: React.ComponentProps<any>;
-  [rest: string]: any;
-};
+}
 
 export { ButtonGroupProps };

app/src/components/Card/CardBody/index.d.ts

@@ -1,9 +1,6 @@
 import * as React from 'react';
+import { CardBodyProps } from './types';
 
-declare const MDBCardBody: React.FunctionComponent<{
-  className?: string;
-  tag?: React.ComponentProps<any>;
-  [rest: string]: any;
-}>;
+declare const MDBCardBody: React.FunctionComponent<CardBodyProps>;
 
 export default MDBCardBody;

app/src/components/Card/CardBody/types.tsx

@@ -1,7 +1,6 @@
-type CardBodyProps = {
-  className?: string;
+interface CardBodyProps extends React.HTMLAttributes<HTMLElement> {
   tag?: React.ComponentProps<any>;
-  [rest: string]: any;
-};
+  ref?: React.ForwardedRef<HTMLAllCollection>;
+}
 
 export { CardBodyProps };

app/src/components/Card/CardFooter/index.d.ts

@@ -1,11 +1,6 @@
 import * as React from 'react';
+import { CardFooterProps } from './types';
 
-declare const MDBCardFooter: React.FunctionComponent<{
-  className?: string;
-  tag?: React.ComponentProps<any>;
-  border?: string;
-  background?: string;
-  [rest: string]: any;
-}>;
+declare const MDBCardFooter: React.FunctionComponent<CardFooterProps>;
 
 export default MDBCardFooter;

app/src/components/Card/CardFooter/types.tsx

@@ -1,9 +1,18 @@
-type CardFooterProps = {
-  className?: string;
-  tag?: React.ComponentProps<any>;
+interface CardFooterProps extends React.HTMLAttributes<HTMLElement> {
   border?: string;
-  background?: string;
-  [rest: string]: any;
-};
+  background?:
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'light'
+    | 'dark'
+    | 'white'
+    | 'info'
+    | 'transparent';
+  ref?: React.ForwardedRef<HTMLAllCollection>;
+  tag?: React.ComponentProps<any>;
+}
 
 export { CardFooterProps };