Renamed components name from Sui to Soft

Author: sanam453

CHANGELOG.md

@@ -5,7 +5,7 @@
 ### Bug fixing
 
 - Momoized the context provider values
-- Fix the conditionally used of useContext for SuiPagination component
+- Fix the conditionally used of useContext for SoftPagination component
 - Fix the import/no-anonymouse-default-export
 
 ### Major style changes
@@ -54,12 +54,12 @@ There is a warnings related to the stylis-plugin-rtl dependency that won't affec
 - The `box-shadow`, `border-radius` and `typography` `regular` size renamed to `md` for theme
 - The `backgroundColor` prop renamed to `bgColor` for components
 - The `boxShadow` prop renamed to `shadow` for components
-- SuiBox `backgroundGradient` prop replaced with `variant: ["contained", "gradient"]`
-- SuiButton `buttonColor` prop renamed to `color`
-- SuiBadge `size` prop updated to ["xs", "sm", "md", "lg"]
-- SuiInput `withIcon` prop renamed to `icon`
-- SuiProgress `gradient` prop replaced with `variant: ["contained", "gradient"]`
-- SuiTypography `textColor` prop renamed to `color`
+- SoftBox `backgroundGradient` prop replaced with `variant: ["contained", "gradient"]`
+- SoftButton `buttonColor` prop renamed to `color`
+- SoftBadge `size` prop updated to ["xs", "sm", "md", "lg"]
+- SoftInput `withIcon` prop renamed to `icon`
+- SoftProgress `gradient` prop replaced with `variant: ["contained", "gradient"]`
+- SoftTypography `textColor` prop renamed to `color`
 - Sidenav is more dynamic now, color, brand, brandName props are added
 
 ### Deleted components

README.md

@@ -110,15 +110,15 @@ soft-ui-dashboard-react
     │   │       ├── index.js
     │   │       └── theme-rtl.js
     │   ├── components
-    │   │   ├── SuiAlert
-    │   │   ├── SuiAvatar
-    │   │   ├── SuiBadge
-    │   │   ├── SuiBox
-    │   │   ├── SuiButton
-    │   │   ├── SuiInput
-    │   │   ├── SuiPagination
-    │   │   ├── SuiProgress
-    │   │   └── SuiTypography
+    │   │   ├── SoftAlert
+    │   │   ├── SoftAvatar
+    │   │   ├── SoftBadge
+    │   │   ├── SoftBox
+    │   │   ├── SoftButton
+    │   │   ├── SoftInput
+    │   │   ├── SoftPagination
+    │   │   ├── SoftProgress
+    │   │   └── SoftTypography
     │   ├── context
     │   ├── examples
     │   │   ├── Breadcrumbs

src/App.js

@@ -24,7 +24,7 @@ import CssBaseline from "@mui/material/CssBaseline";
 import Icon from "@mui/material/Icon";
 
 // Soft UI Dashboard React components
-import SuiBox from "components/SuiBox";
+import SoftBox from "components/SoftBox";
 
 // Soft UI Dashboard React examples
 import Sidenav from "examples/Sidenav";
@@ -109,7 +109,7 @@ export default function App() {
     });
 
   const configsButton = (
-    <SuiBox
+    <SoftBox
       display="flex"
       justifyContent="center"
       alignItems="center"
@@ -129,7 +129,7 @@ export default function App() {
       <Icon fontSize="default" color="inherit">
         settings
       </Icon>
-    </SuiBox>
+    </SoftBox>
   );
 
   return direction === "rtl" ? (

src/components/SuiAlert/SuiAlertCloseIcon.js renamed to src/components/SoftAlert/SoftAlertCloseIcon.js

@@ -22,28 +22,28 @@ import PropTypes from "prop-types";
 import Fade from "@mui/material/Fade";
 
 // Soft UI Dashboard React components
-import SuiBox from "components/SuiBox";
+import SoftBox from "components/SoftBox";
 
-// Custom styles for the SuiAlert
-import SuiAlertRoot from "components/SuiAlert/SuiAlertRoot";
-import SuiAlertCloseIcon from "components/SuiAlert/SuiAlertCloseIcon";
+// Custom styles for the SoftAlert
+import SoftAlertRoot from "components/SoftAlert/SoftAlertRoot";
+import SoftAlertCloseIcon from "components/SoftAlert/SoftAlertCloseIcon";
 
-function SuiAlert({ color, dismissible, children, ...rest }) {
+function SoftAlert({ color, dismissible, children, ...rest }) {
   const [alertStatus, setAlertStatus] = useState("mount");
 
   const handleAlertStatus = () => setAlertStatus("fadeOut");
 
   // The base template for the alert
   const alertTemplate = (mount = true) => (
     <Fade in={mount} timeout={300}>
-      <SuiAlertRoot ownerState={{ color }} {...rest}>
-        <SuiBox display="flex" alignItems="center" color="white">
+      <SoftAlertRoot ownerState={{ color }} {...rest}>
+        <SoftBox display="flex" alignItems="center" color="white">
           {children}
-        </SuiBox>
+        </SoftBox>
         {dismissible ? (
-          <SuiAlertCloseIcon onClick={mount ? handleAlertStatus : null}>&times;</SuiAlertCloseIcon>
+          <SoftAlertCloseIcon onClick={mount ? handleAlertStatus : null}>&times;</SoftAlertCloseIcon>
         ) : null}
-      </SuiAlertRoot>
+      </SoftAlertRoot>
     </Fade>
   );
 
@@ -61,14 +61,14 @@ function SuiAlert({ color, dismissible, children, ...rest }) {
   return null;
 }
 
-// Setting default values for the props of SuiAlert
-SuiAlert.defaultProps = {
+// Setting default values for the props of SoftAlert
+SoftAlert.defaultProps = {
   color: "info",
   dismissible: false,
 };
 
-// Typechecking props of the SuiAlert
-SuiAlert.propTypes = {
+// Typechecking props of the SoftAlert
+SoftAlert.propTypes = {
   color: PropTypes.oneOf([
     "primary",
     "secondary",
@@ -83,4 +83,4 @@ SuiAlert.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-export default SuiAlert;
+export default SoftAlert;

src/components/SuiAlert/SuiAlertRoot.js renamed to src/components/SoftAlert/SoftAlertRoot.js

@@ -18,22 +18,22 @@ import { forwardRef } from "react";
 // prop-types is a library for typechecking of props
 import PropTypes from "prop-types";
 
-// Custom styles for SuiAvatar
-import SuiAvatarRoot from "components/SuiAvatar/SuiAvatarRoot";
+// Custom styles for SoftAvatar
+import SoftAvatarRoot from "components/SoftAvatar/SoftAvatarRoot";
 
-const SuiAvatar = forwardRef(({ bgColor, size, shadow, ...rest }, ref) => (
-  <SuiAvatarRoot ref={ref} ownerState={{ shadow, bgColor, size }} {...rest} />
+const SoftAvatar = forwardRef(({ bgColor, size, shadow, ...rest }, ref) => (
+  <SoftAvatarRoot ref={ref} ownerState={{ shadow, bgColor, size }} {...rest} />
 ));
 
-// Setting default values for the props of SuiAvatar
-SuiAvatar.defaultProps = {
+// Setting default values for the props of SoftAvatar
+SoftAvatar.defaultProps = {
   bgColor: "transparent",
   size: "md",
   shadow: "none",
 };
 
-// Typechecking props for the SuiAvatar
-SuiAvatar.propTypes = {
+// Typechecking props for the SoftAvatar
+SoftAvatar.propTypes = {
   bgColor: PropTypes.oneOf([
     "transparent",
     "primary",
@@ -49,4 +49,4 @@ SuiAvatar.propTypes = {
   shadow: PropTypes.oneOf(["none", "xs", "sm", "md", "lg", "xl", "xxl", "inset"]),
 };
 
-export default SuiAvatar;
+export default SoftAvatar;

src/components/SuiAlert/index.js renamed to src/components/SoftAlert/index.js

@@ -18,24 +18,24 @@ import { forwardRef } from "react";
 // prop-types is a library for typechecking of props
 import PropTypes from "prop-types";
 
-// Custom styles for the SuiBadge
-import SuiBadgeRoot from "components/SuiBadge/SuiBadgeRoot";
+// Custom styles for the SoftBadge
+import SoftBadgeRoot from "components/SoftBadge/SoftBadgeRoot";
 
-const SuiBadge = forwardRef(
+const SoftBadge = forwardRef(
   ({ color, variant, size, circular, indicator, border, container, children, ...rest }, ref) => (
-    <SuiBadgeRoot
+    <SoftBadgeRoot
       {...rest}
       ownerState={{ color, variant, size, circular, indicator, border, container, children }}
       ref={ref}
       color="default"
     >
       {children}
-    </SuiBadgeRoot>
+    </SoftBadgeRoot>
   )
 );
 
-// Setting default values for the props of SuiBadge
-SuiBadge.defaultProps = {
+// Setting default values for the props of SoftBadge
+SoftBadge.defaultProps = {
   color: "info",
   variant: "gradient",
   size: "sm",
@@ -46,8 +46,8 @@ SuiBadge.defaultProps = {
   container: false,
 };
 
-// Typechecking props of the SuiBadge
-SuiBadge.propTypes = {
+// Typechecking props of the SoftBadge
+SoftBadge.propTypes = {
   color: PropTypes.oneOf([
     "primary",
     "secondary",
@@ -67,4 +67,4 @@ SuiBadge.propTypes = {
   container: PropTypes.bool,
 };
 
-export default SuiBadge;
+export default SoftBadge;

src/components/SuiAvatar/SuiAvatarRoot.js renamed to src/components/SoftAvatar/SoftAvatarRoot.js

@@ -18,21 +18,21 @@ import { forwardRef } from "react";
 // prop-types is a library for typechecking of props
 import PropTypes from "prop-types";
 
-// Custom styles for SuiBox
-import SuiBoxRoot from "components/SuiBox/SuiBoxRoot";
+// Custom styles for SoftBox
+import SoftBoxRoot from "components/SoftBox/SoftBoxRoot";
 
-const SuiBox = forwardRef(
+const SoftBox = forwardRef(
   ({ variant, bgColor, color, opacity, borderRadius, shadow, ...rest }, ref) => (
-    <SuiBoxRoot
+    <SoftBoxRoot
       {...rest}
       ref={ref}
       ownerState={{ variant, bgColor, color, opacity, borderRadius, shadow }}
     />
   )
 );
 
-// Setting default values for the props of SuiBox
-SuiBox.defaultProps = {
+// Setting default values for the props of SoftBox
+SoftBox.defaultProps = {
   variant: "contained",
   bgColor: "transparent",
   color: "dark",
@@ -41,8 +41,8 @@ SuiBox.defaultProps = {
   shadow: "none",
 };
 
-// Typechecking props for the SuiBox
-SuiBox.propTypes = {
+// Typechecking props for the SoftBox
+SoftBox.propTypes = {
   variant: PropTypes.oneOf(["contained", "gradient"]),
   bgColor: PropTypes.string,
   color: PropTypes.string,
@@ -51,4 +51,4 @@ SuiBox.propTypes = {
   shadow: PropTypes.string,
 };
 
-export default SuiBox;
+export default SoftBox;

src/components/SuiAvatar/index.js renamed to src/components/SoftAvatar/index.js

@@ -18,12 +18,12 @@ import { forwardRef } from "react";
 // prop-types is a library for typechecking of props
 import PropTypes from "prop-types";
 
-// Custom styles for SuiButton
-import SuiButtonRoot from "components/SuiButton/SuiButtonRoot";
+// Custom styles for SoftButton
+import SoftButtonRoot from "components/SoftButton/SoftButtonRoot";
 
-const SuiButton = forwardRef(
+const SoftButton = forwardRef(
   ({ color, variant, size, circular, iconOnly, children, ...rest }, ref) => (
-    <SuiButtonRoot
+    <SoftButtonRoot
       {...rest}
       ref={ref}
       color="primary"
@@ -32,21 +32,21 @@ const SuiButton = forwardRef(
       ownerState={{ color, variant, size, circular, iconOnly }}
     >
       {children}
-    </SuiButtonRoot>
+    </SoftButtonRoot>
   )
 );
 
-// Setting default values for the props of SuiButton
-SuiButton.defaultProps = {
+// Setting default values for the props of SoftButton
+SoftButton.defaultProps = {
   size: "medium",
   variant: "contained",
   color: "white",
   circular: false,
   iconOnly: false,
 };
 
-// Typechecking props for the SuiButton
-SuiButton.propTypes = {
+// Typechecking props for the SoftButton
+SoftButton.propTypes = {
   size: PropTypes.oneOf(["small", "medium", "large"]),
   variant: PropTypes.oneOf(["text", "contained", "outlined", "gradient"]),
   color: PropTypes.oneOf([
@@ -65,4 +65,4 @@ SuiButton.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-export default SuiButton;
+export default SoftButton;