Merge pull request #31 from MysticalMike60t/dev

A bunch of changes, including variables users can change

package.json

@@ -19,6 +19,7 @@
   "author": "Caden Finkelstein",
   "license": "ISC",
   "dependencies": {
+    "classnames": "^2.5.1",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

src/UI/Buttons/Default.js

@@ -0,0 +1,21 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const Default = ({
+  className = "caden-ui-buttons-default",
+  children,
+  ...props
+}) => {
+  return (
+    <button className={className} {...props}>
+      {children}
+    </button>
+  );
+};
+
+Default.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+export default Default;

src/UI/Buttons/Submit.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import styles from "../../../styles";
+import styles from "../../styles";
 
 const getButtonStyles = (type) => {
   switch (type) {
@@ -38,7 +38,7 @@ const getButtonStyles = (type) => {
 };
 
 const Submit = ({
-  className = "submit-button",
+  className = "caden-ui-buttons-submit",
   type = "button",
   uniLabel,
   useInput = false,

src/UI/Buttons/index.js

@@ -1,7 +1,9 @@
+import Default from './Default';
 import Submit from './Submit';
 
 const Buttons = {
   Submit,
+  Default
 };
 
 export default Buttons;

src/UI/Links/Default.js

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+
+const Default = ({
+  className = "caden-ui-links-default",
+  href = "#",
+  filled = false,
+  children,
+  ...props
+}) => {
+  const combinedClassName = classNames(className, {
+    "caden-ui-links-default-filled": filled,
+  });
+
+  return (
+    <a className={combinedClassName} href={href} {...props}>
+      {children}
+    </a>
+  );
+};
+
+Default.propTypes = {
+  className: PropTypes.string,
+  href: PropTypes.string,
+  filled: PropTypes.bool,
+  children: PropTypes.node,
+};
+
+export default Default;

src/UI/Links/index.js

@@ -0,0 +1,7 @@
+import Default from "./Default";
+
+const Links = {
+  Default,
+};
+
+export default Links;

src/UI/index.js

@@ -1,9 +1,11 @@
 import Layouts from './Layouts';
 import Buttons from './Buttons';
+import Links from './Links';
 
 const UI = {
   Layouts,
   Buttons,
+  Links,
 };
 
 export default UI;

src/config.js

@@ -0,0 +1,33 @@
+import setDefaults from "./local_functions/setDefaults";
+import { updateCSSVariables } from "./local_functions/updateCSSVariables";
+
+const defaultConfig = {
+  style: {
+    color: {
+      primary: {
+        hex: "#ae7eec",
+        rgb: "rgb(174, 126, 236)",
+        rgba: "rgba(174, 126, 236, 1)",
+        hsl: "hsl(270, 60%, 70%)",
+        hover: {
+          hex: "#8b5ebf",
+          rgb: "rgb(139, 94, 191)",
+          rgba: "rgba(139, 94, 191, 1)",
+          hsl: "hsl(270, 40%, 60%)",
+        },
+      },
+    },
+  },
+};
+
+const config = {};
+
+setDefaults(config, defaultConfig);
+updateCSSVariables(config);
+
+export const setConfig = (newConfig) => {
+  setDefaults(config, newConfig);
+  updateCSSVariables(config);
+};
+
+export default config;

src/index.js

@@ -1,11 +1,13 @@
 import UI from "./UI";
 import Functions from "./Functions";
+import { setConfig } from "./config";
 import "./styles/css/index.css";
 
 const Caden = {
   UI,
   Functions,
+  setConfig
 };
 
-export { UI, Functions };
+export { UI, Functions, setConfig };
 export default Caden;

src/local_functions/setDefaults.js

@@ -0,0 +1,12 @@
+const setDefaults = (target, defaults) => {
+  for (const key in defaults) {
+    if (typeof defaults[key] === "object" && !Array.isArray(defaults[key])) {
+      target[key] = target[key] || {};
+      setDefaults(target[key], defaults[key]);
+    } else {
+      target[key] = target[key] !== undefined ? target[key] : defaults[key];
+    }
+  }
+};
+
+export default setDefaults;

src/local_functions/updateCSSVariables.js

@@ -0,0 +1,16 @@
+export const updateCSSVariables = (config) => {
+  const root = document.documentElement;
+  if (config.style && config.style.color && config.style.color.primary) {
+    const primary = config.style.color.primary;
+    root.style.setProperty("--primary-color", primary.hex);
+    root.style.setProperty("--primary-color-rgb", primary.rgb);
+    root.style.setProperty("--primary-color-rgba", primary.rgba);
+    root.style.setProperty("--primary-color-hsl", primary.hsl);
+    if (primary.hover) {
+      root.style.setProperty("--primary-color-hover", primary.hover.hex);
+      root.style.setProperty("--primary-color-hover-rgb", primary.hover.rgb);
+      root.style.setProperty("--primary-color-hover-rgba", primary.hover.rgba);
+      root.style.setProperty("--primary-color-hover-hsl", primary.hover.hsl);
+    }
+  }
+};

src/styles/css/index.css

@@ -1,3 +1,72 @@
+@import "./variables.css";
+
+* a {
+  text-decoration: none;
+}
+
+.caden-ui-buttons-default {
+  align-items: center;
+  background: rgba(46, 46, 46, 1);
+  border-radius: 5px;
+  color: #fff;
+  display: flex;
+  flex-direction: none;
+  justify-content: center;
+  outline: none;
+  text-decoration: none;
+  transition: all 0.1s ease;
+  cursor: pointer;
+  padding: 10px 20px;
+  border: none;
+  outline: none;
+}
+.caden-ui-buttons-default:hover {
+  background: rgba(57, 57, 57, 1);
+}
+
+.caden-ui-buttons-submit {
+  align-items: center;
+  background: rgba(46, 46, 46, 1);
+  border-radius: 5px;
+  color: #fff;
+  display: flex;
+  flex-direction: none;
+  justify-content: center;
+  outline: none;
+  text-decoration: none;
+  transition: all 0.1s ease;
+  cursor: pointer;
+  padding: 10px 20px;
+  border: none;
+  outline: none;
+}
+.caden-ui-buttons-submit:hover {
+  background: rgba(57, 57, 57, 1);
+}
+
+.caden-ui-links-default {
+  color: var(--primary-color);
+  text-decoration: none;
+}
+
+.caden-ui-links-default-filled {
+  align-items: center;
+  background: rgba(46, 46, 46, 1);
+  padding: 10px 20px;
+  border-radius: 5px;
+  color: #fff;
+  display: flex;
+  flex-direction: none;
+  justify-content: center;
+  outline: none;
+  text-decoration: none;
+  transition: all 0.1s ease;
+  cursor: pointer;
+}
+.caden-ui-links-default-filled:hover {
+  background: rgba(57, 57, 57, 1);
+}
+
 .submit-button {
   background: var(--primary-background);
   color: var(--primary-color);

src/styles/css/variables.css

@@ -0,0 +1,11 @@
+/* src/styles/css/variables.css */
+:root {
+  --primary-color: #ae7eec;
+  --primary-color-rgb: 174, 126, 236;
+  --primary-color-rgba: rgba(174, 126, 236, 1);
+  --primary-color-hsl: hsl(270, 60%, 70%);
+  --primary-color-hover: #8b5ebf;
+  --primary-color-hover-rgb: 139, 94, 191;
+  --primary-color-hover-rgba: rgba(139, 94, 191, 1);
+  --primary-color-hover-hsl: hsl(270, 40%, 60%);
+}

testing/src/App.js

@@ -13,7 +13,15 @@ function App() {
       <div className="section">
         <h1 className="section-title">Buttons</h1>
         <div className="section-content">
-          <Caden.UI.Buttons.Submit>Submit</Caden.UI.Buttons.Submit>
+          <Caden.UI.Buttons.Default>Default Button</Caden.UI.Buttons.Default>
+          <Caden.UI.Buttons.Submit>Submit Button</Caden.UI.Buttons.Submit>
+        </div>
+      </div>
+      <div className="section">
+        <h1 className="section-title">Links</h1>
+        <div className="section-content">
+          <Caden.UI.Links.Default>Default Link</Caden.UI.Links.Default>
+          <Caden.UI.Links.Default filled={true}>Default Link Filled</Caden.UI.Links.Default>
         </div>
       </div>
     </div>