Grabbed dndbeyond's source code

```
~/go/bin/sourcemapper -output ddb -jsurl https://media.dndbeyond.com/character-app/static/js/main.90aa78c5.js
```

ddb_main/tools/js/smartComponents/Collapsible/Collapsible.tsx

@@ -0,0 +1,165 @@
+import * as React from "react";
+
+import {
+  DarkChevronUpSvg,
+  DisabledChevronDownSvg,
+  LightChevronUpSvg,
+} from "../Svg";
+import CollapsibleHeaderContent from "./CollapsibleHeaderContent";
+
+interface Props {
+  header: React.ReactNode;
+  headerFooter?: React.ReactNode;
+  className: string;
+  initiallyCollapsed: boolean;
+  collapsed?: boolean;
+  overrideCollapsed?: boolean;
+  onChangeHandler?: (isCollapsed: boolean) => void;
+  layoutType: "standard" | "minimal";
+  useBuilderStyles?: boolean;
+}
+
+interface State {
+  isCollapsed: boolean;
+  isDarkMode: boolean;
+}
+
+export class Collapsible extends React.PureComponent<Props, State> {
+  static defaultProps = {
+    initiallyCollapsed: true,
+    className: "",
+    layoutType: "standard",
+    useBuilderStyles: false,
+  };
+
+  constructor(props: Props) {
+    super(props);
+
+    let initialCollapsed = props.initiallyCollapsed;
+    if (typeof props.collapsed !== "undefined") {
+      initialCollapsed = props.collapsed;
+    }
+
+    this.state = {
+      isCollapsed: initialCollapsed,
+      isDarkMode: false,
+    };
+  }
+
+  componentDidMount() {
+    this.setState({
+      isDarkMode: !!global.document.getElementsByClassName(
+        "ct-character-sheet--dark-mode"
+      ).length,
+    });
+  }
+
+  componentDidUpdate(
+    prevProps: Readonly<Props>,
+    prevState: Readonly<State>,
+    snapshot?: any
+  ): void {
+    const { collapsed, overrideCollapsed } = this.props;
+
+    // Allow for the collapsed prop to set the state if the prop previously set the state
+    if (
+      typeof prevProps.collapsed !== "undefined" &&
+      typeof collapsed !== "undefined" &&
+      collapsed !== prevProps.collapsed
+    ) {
+      this.setState({
+        isCollapsed: collapsed,
+      });
+    }
+
+    // Allow the overrideCollapsed prop to set the state if the component previously set its own state
+    if (
+      typeof overrideCollapsed !== "undefined" &&
+      this.state.isCollapsed === prevState.isCollapsed
+    ) {
+      this.setState({
+        isCollapsed: overrideCollapsed,
+      });
+    }
+  }
+
+  handleClick = (evt: React.MouseEvent): void => {
+    evt.stopPropagation();
+    const { onChangeHandler } = this.props;
+
+    this.setState((prevState, preProps) => {
+      let newIsCollapsed = !prevState.isCollapsed;
+
+      if (onChangeHandler) {
+        onChangeHandler(newIsCollapsed);
+        return {
+          isCollapsed: prevState.isCollapsed,
+        };
+      } else {
+        return {
+          isCollapsed: newIsCollapsed,
+        };
+      }
+    });
+  };
+
+  render() {
+    const { isCollapsed, isDarkMode } = this.state;
+    const {
+      header,
+      className,
+      children,
+      headerFooter,
+      layoutType,
+      useBuilderStyles,
+    } = this.props;
+
+    let headerContentNode: React.ReactNode;
+    if (typeof header === "string") {
+      headerContentNode = <CollapsibleHeaderContent heading={header} />;
+    } else {
+      headerContentNode = header;
+    }
+
+    let classNames: Array<string> = ["ddbc-collapsible", className];
+    classNames.push(
+      isCollapsed ? "ddbc-collapsible--collapsed" : "ddbc-collapsible--opened"
+    );
+
+    switch (layoutType) {
+      case "minimal":
+        classNames.push("ddbc-collapsible--minimal");
+        break;
+
+      default:
+      // not implements
+    }
+
+    let chevronNode: React.ReactNode = <DisabledChevronDownSvg />;
+    if (!isCollapsed) {
+      chevronNode =
+        isDarkMode && !useBuilderStyles ? (
+          <LightChevronUpSvg />
+        ) : (
+          <DarkChevronUpSvg />
+        );
+    }
+
+    return (
+      <div className={classNames.join(" ")}>
+        <div className="ddbc-collapsible__header" onClick={this.handleClick}>
+          {headerContentNode}
+          <div className="ddbc-collapsible__header-status">{chevronNode}</div>
+        </div>
+        {headerFooter && (
+          <div className="ddbc-collapsible__header-footer">{headerFooter}</div>
+        )}
+        {!isCollapsed && (
+          <div className="ddbc-collapsible__content">{children}</div>
+        )}
+      </div>
+    );
+  }
+}
+
+export default Collapsible;

ddb_main/tools/js/smartComponents/Collapsible/CollapsibleHeaderCallout/CollapsibleHeaderCallout.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+
+interface Props {
+  extra: React.ReactNode;
+  value: React.ReactNode;
+}
+
+export default class CollapsibleHeaderCallout extends React.PureComponent<
+  Props,
+  {}
+> {
+  static defaultProps = {
+    extra: null,
+  };
+
+  render() {
+    const { extra, value } = this.props;
+
+    return (
+      <span className="ddbc-collapsible__header-callout">
+        <span className="ddbc-collapsible__header-callout-extra">{extra}</span>
+        <span className="ddbc-collapsible__header-callout-value">{value}</span>
+      </span>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Collapsible/CollapsibleHeaderCallout/index.ts

@@ -0,0 +1,3 @@
+import CollapsibleHeaderCallout from "./CollapsibleHeaderCallout";
+
+export default CollapsibleHeaderCallout;

ddb_main/tools/js/smartComponents/Collapsible/CollapsibleHeaderContent/CollapsibleHeaderContent.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+
+import CollapsibleHeaderCallout from "../CollapsibleHeaderCallout";
+import CollapsibleHeading from "../CollapsibleHeading";
+
+interface Props {
+  heading: React.ReactNode;
+  metaItems?: Array<React.ReactNode>;
+  callout?: React.ReactNode;
+  className: string;
+}
+
+export default class CollapsibleHeaderContent extends React.PureComponent<
+  Props,
+  {}
+> {
+  static defaultProps = {
+    className: "",
+  };
+
+  renderMetaItems(): React.ReactNode {
+    const { metaItems } = this.props;
+
+    if (!metaItems) {
+      return null;
+    }
+
+    return (
+      <div className="ddbc-collapsible__header-meta">
+        {metaItems.map((item, idx) => (
+          <span className="ddbc-collapsible__header-meta-item" key={idx}>
+            {item}
+          </span>
+        ))}
+      </div>
+    );
+  }
+
+  render() {
+    const { className, heading, callout } = this.props;
+
+    let headingNode: React.ReactNode;
+    if (typeof heading === "string") {
+      headingNode = <CollapsibleHeading>{heading}</CollapsibleHeading>;
+    } else {
+      headingNode = heading;
+    }
+
+    let calloutNode: React.ReactNode;
+    if (typeof callout === "string") {
+      calloutNode = <CollapsibleHeaderCallout value={callout} />;
+    } else {
+      calloutNode = callout;
+    }
+
+    let classNames: Array<string> = [
+      "ddbc-collapsible__header-content",
+      className,
+    ];
+
+    return (
+      <div className={classNames.join(" ")}>
+        <div className="ddbc-collapsible__header-content-primary">
+          {headingNode}
+          {this.renderMetaItems()}
+        </div>
+        {calloutNode && (
+          <div className="ddbc-collapsible__header-content-callout">
+            {calloutNode}
+          </div>
+        )}
+      </div>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Collapsible/CollapsibleHeaderContent/index.ts

@@ -0,0 +1,3 @@
+import CollapsibleHeaderContent from "./CollapsibleHeaderContent";
+
+export default CollapsibleHeaderContent;

ddb_main/tools/js/smartComponents/Collapsible/CollapsibleHeading/CollapsibleHeading.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+
+export default class CollapsibleHeading extends React.PureComponent<{}, {}> {
+  render() {
+    return (
+      <div className="ddbc-collapsible__heading">{this.props.children}</div>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/Collapsible/CollapsibleHeading/index.ts

@@ -0,0 +1,3 @@
+import CollapsibleHeading from "./CollapsibleHeading";
+
+export default CollapsibleHeading;

ddb_main/tools/js/smartComponents/Collapsible/index.ts

@@ -0,0 +1,12 @@
+import Collapsible from "./Collapsible";
+import CollapsibleHeaderCallout from "./CollapsibleHeaderCallout";
+import CollapsibleHeaderContent from "./CollapsibleHeaderContent";
+import CollapsibleHeading from "./CollapsibleHeading";
+
+export default Collapsible;
+export {
+  Collapsible,
+  CollapsibleHeading,
+  CollapsibleHeaderContent,
+  CollapsibleHeaderCallout,
+};