@pie-lib/correct-answer-toggle 0.1.0

package/dist/expander.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @synced-from pie-lib/packages/correct-answer-toggle/src/expander.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import PropTypes from 'prop-types';
+declare const Expander: {
+    (props: any): JSX.Element;
+    propTypes: {
+        show: PropTypes.Validator<boolean>;
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
+    };
+};
+export default Expander;
+//# sourceMappingURL=expander.d.ts.map

package/dist/expander.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expander.d.ts","sourceRoot":"","sources":["../src/expander.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAGH,OAAO,SAAS,MAAM,YAAY,CAAC;AA0CnC,QAAA,MAAM,QAAQ;;;;;;;CAuBb,CAAC;AAQF,eAAe,QAAQ,CAAC"}

package/dist/expander.js

@@ -0,0 +1,68 @@
+import { styled as e } from "@mui/material/styles";
+import { CSSTransition as t } from "react-transition-group";
+import { jsx as n } from "react/jsx-runtime";
+import { useRef as r } from "react";
+import i from "prop-types";
+//#region src/expander.tsx
+var a = "height ease-in 300ms, opacity ease-in 300ms", o = e("div")(() => ({
+	position: "relative",
+	height: 0,
+	overflow: "hidden",
+	display: "flex",
+	visibility: "hidden",
+	width: 0,
+	"&.enter": {
+		transition: a,
+		opacity: 1,
+		height: "auto",
+		width: "auto",
+		visibility: "visible",
+		minHeight: "25px"
+	},
+	"&.enter-done": {
+		height: "auto",
+		visibility: "visible",
+		width: "auto",
+		minHeight: "25px"
+	},
+	"&.exit": {
+		transition: a,
+		opacity: 0,
+		height: 0,
+		visibility: "visible",
+		width: 0
+	},
+	"&.exit-done": {
+		opacity: 0,
+		visibility: "hidden",
+		height: 0,
+		width: 0
+	}
+})), s = (e) => {
+	let { show: i, children: a, className: s } = e, c = r(null);
+	return /* @__PURE__ */ n(t, {
+		nodeRef: c,
+		in: i,
+		appear: !0,
+		mountOnEnter: !1,
+		timeout: 300,
+		classNames: {
+			enter: "enter",
+			enterDone: "enter-done",
+			exit: "exit",
+			exitDone: "exit-done"
+		},
+		children: /* @__PURE__ */ n(o, {
+			ref: c,
+			className: s,
+			children: a
+		})
+	});
+};
+s.propTypes = {
+	show: i.bool.isRequired,
+	className: i.string,
+	children: i.oneOfType([i.arrayOf(i.node), i.node]).isRequired
+};
+//#endregion
+export { s as default };

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @synced-from pie-lib/packages/correct-answer-toggle/src/index.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+/**
+ * We export the raw unstyled class for testability. For public use please use the default export.
+ */
+export declare class CorrectAnswerToggle extends React.Component {
+    static propTypes: {
+        onToggle: PropTypes.Requireable<(...args: any[]) => any>;
+        toggled: PropTypes.Requireable<boolean>;
+        show: PropTypes.Requireable<boolean>;
+        hideMessage: PropTypes.Requireable<string>;
+        showMessage: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        language: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        showMessage: string;
+        hideMessage: string;
+        show: boolean;
+        toggled: boolean;
+    };
+    constructor(props: any);
+    onClick(): void;
+    onTouch(event: any): void;
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    render(): JSX.Element;
+}
+export default CorrectAnswerToggle;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAmCH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AA6DnC;;GAEG;AACH,qBAAa,mBAAoB,SAAQ,KAAK,CAAC,SAAS;IACtD,MAAM,CAAC,SAAS;;;;;;;;MAQd;IAEF,MAAM,CAAC,YAAY;;;;;MAKjB;gBAEU,KAAK,KAAA;IAejB,OAAO;IAGP,OAAO,CAAC,KAAK,KAAA;IAKb,gCAAgC,CAAC,SAAS,KAAA;IAc1C,MAAM;CAiDP;AAED,eAAe,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,146 @@
+import e from "./expander.js";
+import { styled as t } from "@mui/material/styles";
+import { CSSTransition as n } from "react-transition-group";
+import { CorrectResponse as r } from "@pie-lib/icons";
+import * as i from "@pie-lib/render-ui";
+import { Readable as a, color as o } from "@pie-lib/render-ui";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import l from "react";
+import u from "prop-types";
+import d from "@pie-lib/translator";
+//#region src/index.tsx
+function f(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function p(e, t) {
+	return !e || f(e) ? e : f(e.default) ? e.default : t && f(e[t]) ? e[t] : t && f(e[t]?.default) ? e[t].default : e;
+}
+var m = p(a, "Readable") || p(_.Readable, "Readable"), h = i, g = h.default, _ = g && typeof g == "object" ? g : h, { translator: v } = d, y = {
+	WebkitTouchCallout: "none",
+	WebkitUserSelect: "none",
+	KhtmlUserSelect: "none",
+	MozUserSelect: "none",
+	msUserSelect: "none",
+	userSelect: "none"
+}, b = t("div")(() => ({
+	width: "100%",
+	cursor: "pointer"
+})), x = t("div")(() => ({
+	margin: "0 auto",
+	textAlign: "center",
+	display: "flex"
+})), S = t("div")(() => ({
+	width: "fit-content",
+	minWidth: "140px",
+	alignSelf: "center",
+	verticalAlign: "middle",
+	color: `var(--correct-answer-toggle-label-color, ${o.text()})`,
+	fontWeight: "normal",
+	...y
+})), C = t("div")(() => ({
+	position: "absolute",
+	width: "25px",
+	"&.enter": { opacity: "0" },
+	"&.enter-active": {
+		opacity: "1",
+		transition: "opacity 0.3s ease-in"
+	},
+	"&.exit": { opacity: "1" },
+	"&.exit-active": {
+		opacity: "0",
+		transition: "opacity 0.3s ease-in"
+	}
+})), w = t("div")(() => ({
+	width: "25px",
+	marginRight: "5px",
+	display: "flex",
+	alignItems: "center"
+})), T = class t extends l.Component {
+	static propTypes = {
+		onToggle: u.func,
+		toggled: u.bool,
+		show: u.bool,
+		hideMessage: u.string,
+		showMessage: u.string,
+		className: u.string,
+		language: u.string
+	};
+	static defaultProps = {
+		showMessage: "Show correct answer",
+		hideMessage: "Hide correct answer",
+		show: !1,
+		toggled: !1
+	};
+	constructor(e) {
+		super(e), this.state = { show: e.show }, this.openIconRef = l.createRef(), this.closedIconRef = l.createRef(), t.defaultProps = {
+			...t.defaultProps,
+			showMessage: v.t("common:showCorrectAnswer", { lng: e.language }),
+			hideMessage: v.t("common:hideCorrectAnswer", { lng: e.language })
+		};
+	}
+	onClick() {
+		this.props.onToggle(!this.props.toggled);
+	}
+	onTouch(e) {
+		e.preventDefault(), this.props.onToggle(!this.props.toggled);
+	}
+	UNSAFE_componentWillReceiveProps(e) {
+		this.setState({ show: e.show }), e.language !== this.props?.language && (t.defaultProps = {
+			...t.defaultProps,
+			showMessage: v.t("common:showCorrectAnswer", { lng: e.language }),
+			hideMessage: v.t("common:hideCorrectAnswer", { lng: e.language })
+		});
+	}
+	render() {
+		let { className: t, toggled: i, hideMessage: a, showMessage: o } = this.props;
+		return /* @__PURE__ */ s(b, {
+			className: t,
+			children: /* @__PURE__ */ s(e, {
+				show: this.state.show,
+				children: /* @__PURE__ */ c(x, {
+					onClick: this.onClick.bind(this),
+					onTouchEnd: this.onTouch.bind(this),
+					children: [/* @__PURE__ */ c(w, { children: [/* @__PURE__ */ s(n, {
+						nodeRef: this.openIconRef,
+						timeout: 400,
+						in: i,
+						exit: !i,
+						classNames: {
+							enter: "enter",
+							enterActive: "enter-active",
+							exit: "exit",
+							exitActive: "exit-active"
+						},
+						children: /* @__PURE__ */ s(C, {
+							ref: this.openIconRef,
+							children: /* @__PURE__ */ s(r, { open: i }, "correct-open")
+						})
+					}), /* @__PURE__ */ s(n, {
+						nodeRef: this.closedIconRef,
+						timeout: 5e3,
+						in: !i,
+						exit: i,
+						classNames: {
+							enter: "enter",
+							enterActive: "enter-active",
+							exit: "exit",
+							exitActive: "exit-active"
+						},
+						children: /* @__PURE__ */ s(C, {
+							ref: this.closedIconRef,
+							children: /* @__PURE__ */ s(r, { open: i }, "correct-closed")
+						})
+					})] }), /* @__PURE__ */ s(m, {
+						false: !0,
+						children: /* @__PURE__ */ s(S, {
+							"aria-hidden": !this.state.show,
+							children: i ? a : o
+						})
+					})]
+				})
+			})
+		});
+	}
+};
+//#endregion
+export { T as CorrectAnswerToggle, T as default };

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@pie-lib/correct-answer-toggle",
+  "version": "0.1.0",
+  "description": "A react based toggle component",
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-lib/icons": "0.1.0",
+    "@pie-lib/render-ui": "0.1.0",
+    "@pie-lib/translator": "0.1.0",
+    "lodash-es": "^4.17.23",
+    "prop-types": "^15.6.2",
+    "react-transition-group": "^4.4.5",
+    "react": "^18.2.0"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "bun x vite build && bun x tsc --emitDeclarationOnly",
+    "dev": "bun x vite",
+    "test": "bun x vitest run"
+  }
+}

package/src/expander.tsx

@@ -0,0 +1,85 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/correct-answer-toggle/src/expander.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { CSSTransition } from 'react-transition-group';
+
+const transition = 'height ease-in 300ms, opacity ease-in 300ms';
+
+const StyledExpander: any = styled('div')(() => ({
+  position: 'relative',
+  height: 0,
+  overflow: 'hidden',
+  display: 'flex',
+  visibility: 'hidden',
+  width: 0,
+  '&.enter': {
+    transition,
+    opacity: 1,
+    height: 'auto',
+    width: 'auto',
+    visibility: 'visible',
+    minHeight: '25px',
+  },
+  '&.enter-done': {
+    height: 'auto',
+    visibility: 'visible',
+    width: 'auto',
+    minHeight: '25px',
+  },
+  '&.exit': {
+    transition,
+    opacity: 0,
+    height: 0,
+    visibility: 'visible',
+    width: 0,
+  },
+  '&.exit-done': {
+    opacity: 0,
+    visibility: 'hidden',
+    height: 0,
+    width: 0,
+  },
+}));
+
+const Expander = (props) => {
+  const { show, children, className } = props;
+  const nodeRef = useRef(null);
+
+  return (
+    <CSSTransition
+      nodeRef={nodeRef}
+      in={show}
+      appear={true}
+      mountOnEnter={false}
+      timeout={300}
+      classNames={{
+        enter: 'enter',
+        enterDone: 'enter-done',
+        exit: 'exit',
+        exitDone: 'exit-done',
+      }}
+    >
+      <StyledExpander ref={nodeRef} className={className}>
+        {children}
+      </StyledExpander>
+    </CSSTransition>
+  );
+};
+
+Expander.propTypes = {
+  show: PropTypes.bool.isRequired,
+  className: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};
+
+export default Expander;

package/src/index.tsx

@@ -0,0 +1,215 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/correct-answer-toggle/src/index.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import { styled } from '@mui/material/styles';
+import { CSSTransition } from 'react-transition-group';
+import { CorrectResponse } from '@pie-lib/icons';
+import { color, Readable as ReadableImport } from '@pie-lib/render-ui';
+
+function isRenderableReactInteropType(value: any) {
+  return (
+    typeof value === 'function' ||
+    (typeof value === 'object' && value !== null && typeof value.$$typeof === 'symbol')
+  );
+}
+
+function unwrapReactInteropSymbol(maybeSymbol: any, namedExport?: string) {
+  if (!maybeSymbol) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol)) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol.default)) return maybeSymbol.default;
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport])) {
+    return maybeSymbol[namedExport];
+  }
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport]?.default)) {
+    return maybeSymbol[namedExport].default;
+  }
+  return maybeSymbol;
+}
+const Readable = unwrapReactInteropSymbol(ReadableImport, 'Readable') || unwrapReactInteropSymbol(renderUi.Readable, 'Readable');
+import * as RenderUiNamespace from '@pie-lib/render-ui';
+const renderUiNamespaceAny = RenderUiNamespace as any;
+const renderUiDefaultMaybe = renderUiNamespaceAny['default'];
+const renderUi =
+  renderUiDefaultMaybe && typeof renderUiDefaultMaybe === 'object'
+    ? renderUiDefaultMaybe
+    : renderUiNamespaceAny;
+import Expander from './expander.js';
+import React from 'react';
+import PropTypes from 'prop-types';
+import Translator from '@pie-lib/translator';
+
+const { translator } = Translator;
+
+const noTouch = {
+  WebkitTouchCallout: 'none',
+  WebkitUserSelect: 'none',
+  KhtmlUserSelect: 'none',
+  MozUserSelect: 'none',
+  msUserSelect: 'none',
+  userSelect: 'none',
+};
+
+const StyledRoot: any = styled('div')(() => ({
+  width: '100%',
+  cursor: 'pointer',
+}));
+
+const StyledContent: any = styled('div')(() => ({
+  margin: '0 auto',
+  textAlign: 'center',
+  display: 'flex',
+}));
+
+const StyledLabel: any = styled('div')(() => ({
+  width: 'fit-content',
+  minWidth: '140px',
+  alignSelf: 'center',
+  verticalAlign: 'middle',
+  color: `var(--correct-answer-toggle-label-color, ${color.text()})`,
+  fontWeight: 'normal',
+  ...noTouch,
+}));
+
+const StyledIcon: any = styled('div')(() => ({
+  position: 'absolute',
+  width: '25px',
+  '&.enter': {
+    opacity: '0',
+  },
+  '&.enter-active': {
+    opacity: '1',
+    transition: 'opacity 0.3s ease-in',
+  },
+  '&.exit': {
+    opacity: '1',
+  },
+  '&.exit-active': {
+    opacity: '0',
+    transition: 'opacity 0.3s ease-in',
+  },
+}));
+
+const StyledIconHolder: any = styled('div')(() => ({
+  width: '25px',
+  marginRight: '5px',
+  display: 'flex',
+  alignItems: 'center',
+}));
+
+/**
+ * We export the raw unstyled class for testability. For public use please use the default export.
+ */
+export class CorrectAnswerToggle extends React.Component {
+  static propTypes = {
+    onToggle: PropTypes.func,
+    toggled: PropTypes.bool,
+    show: PropTypes.bool,
+    hideMessage: PropTypes.string,
+    showMessage: PropTypes.string,
+    className: PropTypes.string,
+    language: PropTypes.string,
+  };
+
+  static defaultProps = {
+    showMessage: 'Show correct answer',
+    hideMessage: 'Hide correct answer',
+    show: false,
+    toggled: false,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      show: props.show,
+    };
+    this.openIconRef = React.createRef();
+    this.closedIconRef = React.createRef();
+
+    CorrectAnswerToggle.defaultProps = {
+      ...CorrectAnswerToggle.defaultProps,
+      showMessage: translator.t('common:showCorrectAnswer', { lng: props.language }),
+      hideMessage: translator.t('common:hideCorrectAnswer', { lng: props.language }),
+    };
+  }
+
+  onClick() {
+    this.props.onToggle(!this.props.toggled);
+  }
+  onTouch(event) {
+    event.preventDefault(); // Prevents the default action (click event)
+    this.props.onToggle(!this.props.toggled);
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      show: nextProps.show,
+    });
+
+    if (nextProps.language !== this.props?.language) {
+      CorrectAnswerToggle.defaultProps = {
+        ...CorrectAnswerToggle.defaultProps,
+        showMessage: translator.t('common:showCorrectAnswer', { lng: nextProps.language }),
+        hideMessage: translator.t('common:hideCorrectAnswer', { lng: nextProps.language }),
+      };
+    }
+  }
+
+  render() {
+    const { className, toggled, hideMessage, showMessage } = this.props;
+
+    return (
+      <StyledRoot className={className}>
+        <Expander show={this.state.show}>
+          <StyledContent onClick={this.onClick.bind(this)} onTouchEnd={this.onTouch.bind(this)}>
+            <StyledIconHolder>
+              <CSSTransition
+                nodeRef={this.openIconRef}
+                timeout={400}
+                in={toggled}
+                exit={!toggled}
+                classNames={{
+                  enter: 'enter',
+                  enterActive: 'enter-active',
+                  exit: 'exit',
+                  exitActive: 'exit-active',
+                }}
+              >
+                <StyledIcon ref={this.openIconRef}>
+                  <CorrectResponse open={toggled} key="correct-open" />
+                </StyledIcon>
+              </CSSTransition>
+              <CSSTransition
+                nodeRef={this.closedIconRef}
+                timeout={5000}
+                in={!toggled}
+                exit={toggled}
+                classNames={{
+                  enter: 'enter',
+                  enterActive: 'enter-active',
+                  exit: 'exit',
+                  exitActive: 'exit-active',
+                }}
+              >
+                <StyledIcon ref={this.closedIconRef}>
+                  <CorrectResponse open={toggled} key="correct-closed" />
+                </StyledIcon>
+              </CSSTransition>
+            </StyledIconHolder>
+            <Readable false>
+              <StyledLabel aria-hidden={!this.state.show}>{toggled ? hideMessage : showMessage}</StyledLabel>
+            </Readable>
+          </StyledContent>
+        </Expander>
+      </StyledRoot>
+    );
+  }
+}
+
+export default CorrectAnswerToggle;