From f0c03a9b8e15387c4defd0a0e3e0298324406fae Mon Sep 17 00:00:00 2001
From: flu0r1ne <flu0r1ne@flu0r1ne.net>
Date: Mon, 28 Aug 2023 21:33:44 -0500
Subject: Add wg2nd

---
 components/utils/systemProps.tsx | 107 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 components/utils/systemProps.tsx

(limited to 'components/utils/systemProps.tsx')

diff --git a/components/utils/systemProps.tsx b/components/utils/systemProps.tsx
new file mode 100644
index 0000000..8fc0317
--- /dev/null
+++ b/components/utils/systemProps.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+
+export type SystemProps = {
+  // Margin
+  mt?: number;
+  mb?: number;
+  ml?: number;
+  mr?: number;
+  mx?: number;
+  my?: number;
+  m?: number;
+
+  // Padding
+  pt?: number;
+  pb?: number;
+  pl?: number;
+  pr?: number;
+  px?: number;
+  py?: number;
+  p?: number;
+
+  // Arbitrary style
+  sx?: React.CSSProperties;
+};
+
+const calculateStyleValue = (multiplier: number, spacer: number = 1): string => {
+  return `${multiplier * spacer}em`;
+};
+
+const getSystemStyle = (
+  systemProps: SystemProps,
+  userStyle: React.CSSProperties = {}
+): React.CSSProperties => {
+  const spacer = 1; // 1em
+
+  let style: React.CSSProperties = {};
+
+  // Margin
+  const { mt, mb, ml, mr, mx, my, m } = systemProps;
+
+  if (m !== undefined) {
+    const value = calculateStyleValue(m, spacer);
+    style.marginTop = value;
+    style.marginBottom = value;
+    style.marginLeft = value;
+    style.marginRight = value;
+  }
+
+  if (mx !== undefined) {
+    const value = calculateStyleValue(mx, spacer);
+    style.marginLeft = value;
+    style.marginRight = value;
+  }
+
+  if (my !== undefined) {
+    const value = calculateStyleValue(my, spacer);
+    style.marginTop = value;
+    style.marginBottom = value;
+  }
+
+  if (mt !== undefined) style.marginTop = calculateStyleValue(mt, spacer);
+  if (mb !== undefined) style.marginBottom = calculateStyleValue(mb, spacer);
+  if (ml !== undefined) style.marginLeft = calculateStyleValue(ml, spacer);
+  if (mr !== undefined) style.marginRight = calculateStyleValue(mr, spacer);
+
+  // Padding
+  const { pt, pb, pl, pr, px, py, p } = systemProps;
+
+  if (p !== undefined) {
+    const value = calculateStyleValue(p, spacer);
+    style.paddingTop = value;
+    style.paddingBottom = value;
+    style.paddingLeft = value;
+    style.paddingRight = value;
+  }
+
+  if (px !== undefined) {
+    const value = calculateStyleValue(px, spacer);
+    style.paddingLeft = value;
+    style.paddingRight = value;
+  }
+
+  if (py !== undefined) {
+    const value = calculateStyleValue(py, spacer);
+    style.paddingTop = value;
+    style.paddingBottom = value;
+  }
+
+  if (pt !== undefined) style.paddingTop = calculateStyleValue(pt, spacer);
+  if (pb !== undefined) style.paddingBottom = calculateStyleValue(pb, spacer);
+  if (pl !== undefined) style.paddingLeft = calculateStyleValue(pl, spacer);
+  if (pr !== undefined) style.paddingRight = calculateStyleValue(pr, spacer);
+
+  // Merge with arbitrary styles (sx)
+  if (systemProps.sx) {
+    style = { ...style, ...systemProps.sx };
+  }
+
+  // Override with user-defined style
+  style = { ...style, ...userStyle };
+
+  return style;
+};
+
+export {
+  getSystemStyle
+};
-- 
cgit v1.2.3