Merge pull request #306 from elliotBraem/refactor/root

Establish new root and refactor communities (#306)

src/DevHub/App.jsx

@@ -0,0 +1,116 @@
+/**
+ * This is the main entry point for the DevHub application.
+ * Page route gets passed in through params, along with all other page props.
+ */
+
+const { page, ...passProps } = props;
+
+// Import our modules
+const { AppLayout } = VM.require(
+  "${REPL_DEVHUB}/widget/DevHub.components.templates.AppLayout"
+);
+if (!AppLayout) {
+  return <p>Loading modules...</p>;
+}
+
+// Define our Theme
+const Theme = styled.div`
+  a {
+    color: inherit;
+  }
+
+  .attractable {
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
+    transition: box-shadow 0.6s;
+
+    &:hover {
+      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+    }
+  }
+`;
+
+if (!page) {
+  // If no page is specified, we default to the home page
+  page = "feed";
+}
+
+// This is our navigation, rendering the page based on the page parameter
+function Page() {
+  const routes = page.split(".");
+  switch (routes[0]) {
+    // ?page=home
+    case "home": {
+      return <p>Homepage</p>;
+    }
+    // ?page=communities
+    case "communities": {
+      return (
+        <Widget
+          src={"${REPL_DEVHUB}/widget/DevHub.pages.communities"}
+          props={passProps}
+        />
+      );
+    }
+    // ?page=community
+    case "community": {
+      return (
+        <Widget
+          src={"${REPL_DEVHUB}/widget/DevHub.entity.community.Provider"}
+          props={{
+            ...passProps,
+            Children: (p) => {
+              switch (routes[1]) {
+                // ?page=community.configuration
+                case "configuration": {
+                  return (
+                    <Widget
+                      src={
+                        "${REPL_DEVHUB}/widget/DevHub.pages.community.configuration"
+                      }
+                      props={{
+                        ...passProps,
+                        ...p,
+                      }}
+                    />
+                  );
+                }
+              }
+              // ?page=community
+              return (
+                <Widget
+                  src={"${REPL_DEVHUB}/widget/DevHub.pages.community.index"}
+                  props={{
+                    ...passProps,
+                    ...p,
+                  }}
+                />
+              );
+            },
+          }}
+        />
+      );
+    }
+    // ?page=feed
+    case "feed": {
+      // TODO: This needs to be updated, old widget has the header attached
+      return (
+        <Widget
+          src={"${REPL_DEVHUB}/widget/DevHub.pages.feed"}
+          props={{
+            ...passProps,
+          }}
+        />
+      );
+    }
+  } // default case does not work in VM
+  // If no page is found, we return a 404
+  return <p>404</p>;
+}
+
+return (
+  <Theme>
+    <AppLayout page={page}>
+      <Page />
+    </AppLayout>
+  </Theme>
+);

src/DevHub/components/atom/Icon.jsx

@@ -0,0 +1,45 @@
+const svgIconsByVariant = {
+  floppy_drive: (elementProps) => (
+    <svg
+      fill="#ffffff"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      width="16px"
+      height="16px"
+      viewBox="0 0 353.073 353.073"
+      {...elementProps}
+    >
+      <g>
+        <path
+          d={[
+            "M340.969,0H12.105C5.423,0,0,5.423,0,12.105v328.863c0,6.68,5.423,12.105,12.105,12.105h328.864",
+            "c6.679,0,12.104-5.426,12.104-12.105V12.105C353.073,5.423,347.647,0,340.969,0z",
+            "M67.589,18.164h217.895v101.884H67.589V18.164z",
+            "M296.082,327.35H57.003V176.537h239.079V327.35z",
+            "M223.953,33.295h30.269v72.638h-30.269V33.295z",
+            "M274.135,213.863H78.938v-12.105",
+            "h195.197V213.863z",
+            "M274.135,256.231H78.938v-12.105h195.197V256.231z",
+            "M274.135,297.087H78.938v-12.105h195.197V297.087z",
+          ].join(" ")}
+        />
+      </g>
+    </svg>
+  ),
+};
+
+const iconsByType = {
+  bootstrap_icon: ({ className, variant, ...otherProps }) => (
+    <i className={`bi ${variant} ${className}`} {...otherProps} />
+  ),
+
+  svg_icon: ({ variant, ...elementProps }) =>
+    svgIconsByVariant[variant](elementProps),
+};
+
+const Icon = ({ type, ...otherProps }) =>
+  typeof iconsByType[type] === "function"
+    ? iconsByType[type](otherProps)
+    : null;
+
+return Icon(props);

src/DevHub/components/atom/Toggle.jsx

@@ -0,0 +1,77 @@
+const ToggleRoot = styled.div`
+  justify-content: space-between;
+  width: fit-content;
+  max-width: 100%;
+`;
+
+const ToggleSwitchRoot = styled("Switch.Root")`
+  all: unset;
+  display: block;
+  width: 42px;
+  height: 25px;
+  background-color: #d1d1d1;
+  border-radius: 9999px;
+  position: relative;
+  box-shadow: 0 2px 10px var(--blackA7);
+
+  &[data-state="checked"] {
+    background-color: #00d084;
+  }
+
+  &[data-disabled=""] {
+    opacity: 0.7;
+  }
+`;
+
+const ToggleSwitchThumb = styled("Switch.Thumb")`
+  all: unset;
+  display: block;
+  width: 21px;
+  height: 21px;
+  border-radius: 9999px;
+  transition: transform 100ms;
+  transform: translateX(2px);
+  will-change: transform;
+
+  &[data-state="checked"] {
+    transform: translateX(19px);
+  }
+`;
+
+const ToggleLabel = styled.label`
+  white-space: nowrap;
+`;
+
+const Toggle = ({
+  className,
+  direction,
+  disabled,
+  inputProps,
+  key,
+  label,
+  onChange,
+  value: checked,
+  ...rest
+}) => (
+  <ToggleRoot
+    className={[
+      "d-flex justify-content-between, align-items-center gap-3 p-2",
+      direction === "rtl" ? "flex-row-reverse" : "",
+      className,
+    ].join(" ")}
+    {...rest}
+  >
+    <ToggleLabel htmlFor={`toggle-${key}`}>{label}</ToggleLabel>
+
+    <ToggleSwitchRoot
+      className="shadow-none"
+      id={`toggle-${key}`}
+      onCheckedChange={disabled ? null : onChange}
+      {...{ checked, disabled, ...inputProps }}
+    >
+      {!disabled && <ToggleSwitchThumb className="bg-light shadow" />}
+    </ToggleSwitchRoot>
+  </ToggleRoot>
+);
+
+return Toggle(props);

src/DevHub/components/molecule/Button.jsx

@@ -0,0 +1,144 @@
+const styles = `
+  padding: 0.5rem 1.2rem !important;
+  min-height: 42px;
+  line-height: 1.5;
+  text-decoration: none !important;
+
+  &:not(.shadow-none) {
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
+    transition: box-shadow 0.6s;
+  }
+
+  &:hover {
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+  }
+
+  &.btn-sm {
+    padding: 0.5rem 0.8rem !important;
+    min-height: 32px;
+    line-height: 1;
+  }
+
+  &.btn-lg {
+    padding: 1rem 1.5rem !important;
+    min-height: 48px;
+  }
+
+  &.btn-primary {
+    border: none;
+    --bs-btn-color: #ffffff;
+    --bs-btn-bg: #087990;
+    --bs-btn-border-color: #087990;
+    --bs-btn-hover-color: #ffffff;
+    --bs-btn-hover-bg: #055160;
+    --bs-btn-hover-border-color: #055160;
+    --bs-btn-focus-shadow-rgb: 49, 132, 253;
+    --bs-btn-active-color: #ffffff;
+    --bs-btn-active-bg: #055160;
+    --bs-btn-active-border-color: #055160;
+    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    --bs-btn-disabled-color: #ffffff;
+    --bs-btn-disabled-bg: #0551604a;
+  }
+
+	&.btn-outline-primary {
+		--bs-btn-color: #087990;
+		--bs-btn-border-color: #087990;
+		--bs-btn-hover-color: #ffffff;
+		--bs-btn-hover-bg: #087990;
+		--bs-btn-hover-border-color: #087990;
+		--bs-btn-focus-shadow-rgb: 49, 132, 253;
+		--bs-btn-active-color: #ffffff;
+		--bs-btn-active-bg: #087990;
+		--bs-btn-active-border-color: #087990;
+		--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+		--bs-btn-disabled-border-color: #0551604a;
+	}
+
+  &[class*="btn-outline-"] {
+    border-width: 2px;
+  }
+
+  &.btn-outline-primary {
+    --bs-btn-disabled-color: #6c757d8f;
+  }
+
+  &.btn-secondary {
+    border: none;
+  }
+
+  &.btn-outline-secondary {
+    --bs-btn-disabled-color: #6c757d8f;
+  }
+
+  &.btn-success {
+    border: none;
+    --bs-btn-disabled-bg: #35482a4a;
+  }
+
+  &.btn-outline-success {
+    --bs-btn-disabled-color: #6c757d8f;
+  }
+
+  &.btn-danger {
+    border: none;
+  }
+
+  &.btn-outline-danger {
+    --bs-btn-disabled-color: #6c757d8f;
+  }
+
+  &.btn-warning {
+    border: none;
+  }
+
+  &.btn-outline-warning {
+    --bs-btn-disabled-color: #6c757d8f;
+  }
+
+  &.btn-info {
+    border: none;
+  }
+
+  &.btn-outline-info {
+    --bs-btn-disabled-color: #6c757d8f;
+  }
+`;
+
+const rootElementByType = (type) =>
+  type === "link"
+    ? styled.a`
+        ${styles}
+      `
+    : styled.button`
+        ${styles}
+      `;
+
+const Button = ({ classNames, icon: iconProps, label, type, ...restProps }) => {
+  const ButtonRoot = rootElementByType(type);
+
+  return (
+    <ButtonRoot
+      className={[
+        "btn d-inline-flex align-items-center gap-2 rounded-pill",
+        classNames?.root ?? "btn-primary",
+      ].join(" ")}
+      style={{ width: "fit-content" }}
+      {...restProps}
+    >
+      {iconProps !== null &&
+        typeof iconProps === "object" &&
+        !Array.isArray(iconProps) && (
+          <Widget
+            src={"${REPL_DEVHUB}/widget/DevHub.components.atom.Icon"}
+            props={iconProps}
+          />
+        )}
+      <span className={classNames?.label} style={{ lineHeight: "inherit" }}>
+        {label}
+      </span>
+    </ButtonRoot>
+  );
+};
+
+return Button(props);