Grabbed dndbeyond's source code

``` ~/go/bin/sourcemapper -output ddb -jsurl https://media.dndbeyond.com/character-app/static/js/main.90aa78c5.js ```
2025-05-28 11:50:03 -07:00
commit 8df9031d27
3592 changed files with 319051 additions and 0 deletions
@@ -0,0 +1,100 @@
+import React from "react";
+
+import { Tooltip } from "@dndbeyond/character-common-components/es";
+import {
+  CharacterTheme,
+  ProficiencyGroup,
+} from "@dndbeyond/character-rules-engine/es";
+
+interface Props {
+  proficiencyGroups: Array<ProficiencyGroup>;
+  onClick?: () => void;
+  theme?: CharacterTheme;
+}
+export default class ProficiencyGroups extends React.PureComponent<Props> {
+  handleClick = (evt: React.MouseEvent): void => {
+    const { onClick } = this.props;
+
+    if (onClick) {
+      evt.stopPropagation();
+      evt.nativeEvent.stopImmediatePropagation();
+      onClick();
+    }
+  };
+
+  render() {
+    const { proficiencyGroups, theme } = this.props;
+
+    return (
+      <div className="ct-proficiency-groups" onClick={this.handleClick}>
+        {proficiencyGroups.map((group) => {
+          let itemsNode: React.ReactNode = "None";
+          if (group.modifierGroups.length) {
+            itemsNode = (
+              <React.Fragment>
+                {group.modifierGroups.map((modifierGroup, idx) => {
+                  let title: string = modifierGroup.sources.join(", ");
+                  return (
+                    <Tooltip
+                      isDarkMode={theme?.isDarkMode}
+                      tippyOpts={{
+                        dynamicTitle: true,
+                      }}
+                      title={title}
+                      key={modifierGroup.label}
+                    >
+                      <span
+                        className={`ct-proficiency-groups__group-item ${
+                          theme?.isDarkMode
+                            ? "ct-proficiency-groups__group-item--dark-mode"
+                            : ""
+                        }`}
+                      >
+                        {modifierGroup.label}
+                        {modifierGroup.restriction
+                          ? ` (${modifierGroup.restriction})`
+                          : ""}
+                        {idx + 1 !== group.modifierGroups.length ? ", " : ""}
+                      </span>
+                    </Tooltip>
+                  );
+                })}
+              </React.Fragment>
+            );
+          }
+
+          return (
+            <div
+              className="ct-proficiency-groups__group"
+              key={group.label ? group.label : ""}
+              style={
+                theme?.isDarkMode
+                  ? { borderColor: `${theme.themeColor}66` }
+                  : undefined
+              }
+            >
+              <div
+                className={`ct-proficiency-groups__group-label ${
+                  theme?.isDarkMode
+                    ? "ct-proficiency-groups__group-label--dark-mode"
+                    : ""
+                }`}
+              >
+                {group.label}
+              </div>
+              <div
+                className={`ct-proficiency-groups__group-items ${
+                  theme?.isDarkMode
+                    ? "ct-proficiency-groups__group-items--dark-mode"
+                    : ""
+                }`}
+              >
+                {itemsNode}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+}