@cuemath/leap 3.1.0-gg2 → 3.1.1-beta-0.1

package/dist/features/cue-canvas/sidebar/homework/homework-request.js

@@ -0,0 +1,68 @@
+import { jsx as o, jsxs as R } from "react/jsx-runtime";
+import { h as c } from "../../../../node_modules/humanize-plus/dist/humanize.js";
+import { memo as q, useCallback as k } from "react";
+import y from "../../../ui/buttons/clickable/clickable.js";
+import $ from "../../../ui/layout/flex-view.js";
+import d from "../../../ui/text/text.js";
+import { useCueCanvasActions as W } from "../../hooks/use-cue-canvas-actions.js";
+import { getDateInInputFormat as _, getMonthNameforNumber as E } from "./helper.js";
+import { HWImageContainer as T } from "./homework-styled.js";
+import l from "../../../../node_modules/uuid/dist/esm-browser/v4.js";
+const v = (u) => {
+  var a;
+  const { hwRequest: p, onSelect: r, studentName: h } = u, {
+    problem_description: m,
+    problem_image_urls: e,
+    created_on_ts: f,
+    homework_id: s
+  } = p, { setHomeworkId: n, activeInstance: t } = W(), g = k(() => {
+    const x = l();
+    if (e && e.length > 0) {
+      const i = {
+        data: {
+          [x]: [
+            void 0,
+            {
+              name: "text",
+              html: m,
+              x: 500,
+              y: 75,
+              rot: 0
+            }
+          ]
+        }
+      };
+      e.forEach((C) => {
+        const H = l();
+        i.data[H] = [
+          void 0,
+          {
+            name: "image",
+            href: C + "?dummyProp=true",
+            x: 48,
+            y: 72,
+            rot: 0,
+            width: 400
+          }
+        ];
+      }), t == null || t.replaceCanvas(i);
+    }
+    r(), n(s);
+  }, [t, m, s, e, r, n]), { date: I, month: w } = _(f), b = `${c.ordinal(I)} ${c.titleCase((a = E(w)) == null ? void 0 : a.toLowerCase())}`;
+  return /* @__PURE__ */ o(y, { label: "HW Request Item", onClick: g, children: /* @__PURE__ */ R($, { $alignItems: "center", $justifyContent: "center", $borderRadius: 8, $background: "WHITE", children: [
+    /* @__PURE__ */ o(
+      T,
+      {
+        src: e[0] + "?dummyProp=true",
+        alt: "Homework Request",
+        crossOrigin: "anonymous"
+      }
+    ),
+    /* @__PURE__ */ o(d, { $renderAs: "body3", color: "WHITE", children: h }),
+    /* @__PURE__ */ o(d, { $renderAs: "body3", color: "WHITE", children: b })
+  ] }) });
+}, M = q(v);
+export {
+  M as default
+};
+//# sourceMappingURL=homework-request.js.map

package/dist/features/cue-canvas/sidebar/homework/homework-request.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"homework-request.js","sources":["../../../../../src/features/cue-canvas/sidebar/homework/homework-request.tsx"],"sourcesContent":["import type { IReplaceCanvas } from '../../types/cue-canvas';\nimport type { IHomeWorkRequestProps } from './homework-types';\n\nimport { ordinal, titleCase } from 'humanize-plus';\nimport { memo, useCallback } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport { useCueCanvasActions } from '../../hooks/use-cue-canvas-actions';\nimport { getDateInInputFormat, getMonthNameforNumber } from './helper';\nimport * as Styled from './homework-styled';\n\nconst HomeWorkRequest: React.FC<IHomeWorkRequestProps> = props => {\n  const { hwRequest, onSelect, studentName } = props;\n  const {\n    problem_description: hwRequestDesc,\n    problem_image_urls: hwRequestImages,\n    created_on_ts: createdOnTs,\n    homework_id: hwRequestId,\n  } = hwRequest;\n  const { setHomeworkId, activeInstance } = useCueCanvasActions();\n\n  const onSelectHwRequest = useCallback(() => {\n    const textId = uuidv4();\n\n    if (hwRequestImages && hwRequestImages.length > 0) {\n      const actionData: IReplaceCanvas = {\n        data: {\n          [textId]: [\n            undefined,\n            {\n              name: 'text',\n              html: hwRequestDesc,\n              x: 500,\n              y: 75,\n              rot: 0,\n            },\n          ],\n        },\n      };\n\n      hwRequestImages.forEach(image => {\n        const imgId = uuidv4();\n\n        actionData.data[imgId] = [\n          undefined,\n          {\n            name: 'image',\n            href: image + '?dummyProp=true',\n            x: 48,\n            y: 72,\n            rot: 0,\n            width: 400,\n          },\n        ];\n      });\n\n      activeInstance?.replaceCanvas(actionData);\n    }\n    onSelect();\n    setHomeworkId(hwRequestId);\n  }, [activeInstance, hwRequestDesc, hwRequestId, hwRequestImages, onSelect, setHomeworkId]);\n\n  const { date, month } = getDateInInputFormat(createdOnTs);\n\n  const dateString = `${ordinal(date)} ${titleCase(getMonthNameforNumber(month)?.toLowerCase())}`;\n\n  return (\n    <Clickable label=\"HW Request Item\" onClick={onSelectHwRequest}>\n      <FlexView $alignItems=\"center\" $justifyContent=\"center\" $borderRadius={8} $background=\"WHITE\">\n        <Styled.HWImageContainer\n          src={hwRequestImages[0] + '?dummyProp=true'}\n          alt=\"Homework Request\"\n          crossOrigin=\"anonymous\"\n        />\n        <Text $renderAs=\"body3\" color=\"WHITE\">\n          {studentName}\n        </Text>\n        <Text $renderAs=\"body3\" color=\"WHITE\">\n          {dateString}\n        </Text>\n      </FlexView>\n    </Clickable>\n  );\n};\n\nexport default memo(HomeWorkRequest);\n"],"names":["HomeWorkRequest","props","hwRequest","onSelect","studentName","hwRequestDesc","hwRequestImages","createdOnTs","hwRequestId","setHomeworkId","activeInstance","useCueCanvasActions","onSelectHwRequest","useCallback","textId","uuidv4","actionData","image","imgId","date","month","getDateInInputFormat","dateString","ordinal","titleCase","_a","getMonthNameforNumber","jsx","Clickable","jsxs","FlexView","Styled.HWImageContainer","Text","HWRequest","memo"],"mappings":";;;;;;;;;;AAcA,MAAMA,IAAmD,CAASC,MAAA;;AAChE,QAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,aAAAC,EAAA,IAAgBH,GACvC;AAAA,IACJ,qBAAqBI;AAAA,IACrB,oBAAoBC;AAAA,IACpB,eAAeC;AAAA,IACf,aAAaC;AAAA,EACX,IAAAN,GACE,EAAE,eAAAO,GAAe,gBAAAC,EAAe,IAAIC,EAAoB,GAExDC,IAAoBC,EAAY,MAAM;AAC1C,UAAMC,IAASC;AAEX,QAAAT,KAAmBA,EAAgB,SAAS,GAAG;AACjD,YAAMU,IAA6B;AAAA,QACjC,MAAM;AAAA,UACJ,CAACF,CAAM,GAAG;AAAA,YACR;AAAA,YACA;AAAA,cACE,MAAM;AAAA,cACN,MAAMT;AAAA,cACN,GAAG;AAAA,cACH,GAAG;AAAA,cACH,KAAK;AAAA,YACP;AAAA,UACF;AAAA,QACF;AAAA,MAAA;AAGF,MAAAC,EAAgB,QAAQ,CAASW,MAAA;AAC/B,cAAMC,IAAQH;AAEH,QAAAC,EAAA,KAAKE,CAAK,IAAI;AAAA,UACvB;AAAA,UACA;AAAA,YACE,MAAM;AAAA,YACN,MAAMD,IAAQ;AAAA,YACd,GAAG;AAAA,YACH,GAAG;AAAA,YACH,KAAK;AAAA,YACL,OAAO;AAAA,UACT;AAAA,QAAA;AAAA,MACF,CACD,GAEDP,KAAA,QAAAA,EAAgB,cAAcM;AAAA,IAChC;AACS,IAAAb,KACTM,EAAcD,CAAW;AAAA,EAAA,GACxB,CAACE,GAAgBL,GAAeG,GAAaF,GAAiBH,GAAUM,CAAa,CAAC,GAEnF,EAAE,MAAAU,GAAM,OAAAC,EAAM,IAAIC,EAAqBd,CAAW,GAElDe,IAAa,GAAGC,UAAQJ,CAAI,CAAC,IAAIK,aAAUC,IAAAC,EAAsBN,CAAK,MAA3B,gBAAAK,EAA8B,aAAa,CAAC;AAE7F,SACG,gBAAAE,EAAAC,GAAA,EAAU,OAAM,mBAAkB,SAAShB,GAC1C,UAAA,gBAAAiB,EAACC,GAAS,EAAA,aAAY,UAAS,iBAAgB,UAAS,eAAe,GAAG,aAAY,SACpF,UAAA;AAAA,IAAA,gBAAAH;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,KAAKzB,EAAgB,CAAC,IAAI;AAAA,QAC1B,KAAI;AAAA,QACJ,aAAY;AAAA,MAAA;AAAA,IACd;AAAA,sBACC0B,GAAK,EAAA,WAAU,SAAQ,OAAM,SAC3B,UACH5B,GAAA;AAAA,sBACC4B,GAAK,EAAA,WAAU,SAAQ,OAAM,SAC3B,UACHV,GAAA;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,GAEeW,IAAAC,EAAKlC,CAAe;"}

package/dist/features/cue-canvas/sidebar/homework/homework-styled.js

@@ -0,0 +1,25 @@
+import o from "styled-components";
+import t from "../../../ui/layout/flex-view.js";
+const i = o(t)`
+  position: absolute;
+  top: 38px;
+  left: -87px; //32px + 32 px  for icon +8+8(separator) +7 gutter
+  width: 248px;
+  height: 438px;
+  border-radius: 6px;
+  background: #292734;
+  box-shadow: 0px 4px 8px ${({ theme: r }) => r.colors.BLACK_T_20};
+  overflow-y: auto;
+`, a = o.img.attrs({ loading: "lazy" })`
+  width: 184px;
+  height: 128px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+`;
+export {
+  a as HWImageContainer,
+  i as MenuContainer
+};
+//# sourceMappingURL=homework-styled.js.map

package/dist/features/cue-canvas/sidebar/homework/homework-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"homework-styled.js","sources":["../../../../../src/features/cue-canvas/sidebar/homework/homework-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nconst MenuContainer = styled(FlexView)`\n  position: absolute;\n  top: 38px;\n  left: -87px; //32px + 32 px  for icon +8+8(separator) +7 gutter\n  width: 248px;\n  height: 438px;\n  border-radius: 6px;\n  background: #292734;\n  box-shadow: 0px 4px 8px ${({ theme }) => theme.colors.BLACK_T_20};\n  overflow-y: auto;\n`;\nconst HWImageContainer = styled.img.attrs({ loading: 'lazy' })`\n  width: 184px;\n  height: 128px;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n`;\n\nexport { MenuContainer, HWImageContainer };\n"],"names":["MenuContainer","styled","FlexView","theme","HWImageContainer"],"mappings":";;AAIM,MAAAA,IAAgBC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAQT,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA,GAG5DC,IAAmBH,EAAO,IAAI,MAAM,EAAE,SAAS,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/cue-canvas/sidebar/homework/homework.js

@@ -0,0 +1,39 @@
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { memo as u, useRef as d, useCallback as f, useEffect as k } from "react";
+import p from "../../../ui/buttons/clickable/clickable.js";
+import h from "../../../ui/hooks/use-context-menu-click-handler.js";
+import C from "../../../ui/layout/flex-view.js";
+import b from "../../../ui/text/text.js";
+import { StyledWrapper as w, HWWrapper as W } from "../../cue-cavas-styled.js";
+import { useCueCanvasActions as H } from "../../hooks/use-cue-canvas-actions.js";
+import $ from "./homework-menu.js";
+const v = (m) => {
+  const { activeSidebar: e, setActiveSidebar: n, hwRequests: s } = m, { activeInstance: r } = H(), c = d(null), { menuVisible: i, onMenuClick: t } = h(
+    c,
+    void 0,
+    !0,
+    void 0
+  ), l = f(() => {
+    e === "tile" && (r == null || r.toggleTiles(!1)), n(e === "homework" ? void 0 : "homework"), t();
+  }, [e, r, t, n]);
+  return k(() => {
+    (e === "tile" || e === "puzzle") && i && t();
+  }, [e, i, t]), /* @__PURE__ */ a(C, { $position: "relative", children: [
+    /* @__PURE__ */ o(p, { onClick: l, label: "homework help", children: /* @__PURE__ */ o(w, { $active: e === "homework", children: /* @__PURE__ */ o(
+      W,
+      {
+        $background: e === "homework" ? "BLACK" : "WHITE",
+        $borderColor: e === "homework" ? "WHITE" : "BLACK",
+        $borderRadius: 4,
+        $alignItems: "center",
+        $justifyContent: "center",
+        children: /* @__PURE__ */ o(b, { $color: e === "homework" ? "WHITE" : "BLACK", $renderAs: "ub3-bold", children: "HW" })
+      }
+    ) }) }),
+    i && /* @__PURE__ */ o($, { onSelect: l, hwRequests: s })
+  ] });
+}, j = u(v);
+export {
+  j as default
+};
+//# sourceMappingURL=homework.js.map

package/dist/features/cue-canvas/sidebar/homework/homework.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"homework.js","sources":["../../../../../src/features/cue-canvas/sidebar/homework/homework.tsx"],"sourcesContent":["import type { IHomeWorkRequestsContainerProps } from './homework-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useRef } from 'react';\n\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport { StyledWrapper, HWWrapper } from '../../cue-cavas-styled';\nimport { useCueCanvasActions } from '../../hooks/use-cue-canvas-actions';\nimport HomeWorkMenu from './homework-menu';\n\nconst HomeWorkRequestsContainer: FC<IHomeWorkRequestsContainerProps> = props => {\n  const { activeSidebar, setActiveSidebar, hwRequests } = props;\n  const { activeInstance: cueCanvas } = useCueCanvasActions();\n  const homeWorkMenuRef = useRef(null);\n\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    homeWorkMenuRef,\n    undefined,\n    true,\n    undefined,\n  );\n\n  const handleClick = useCallback(() => {\n    if (activeSidebar === 'tile') {\n      cueCanvas?.toggleTiles(false);\n    }\n    setActiveSidebar(activeSidebar === 'homework' ? undefined : 'homework');\n    onMenuClick();\n  }, [activeSidebar, cueCanvas, onMenuClick, setActiveSidebar]);\n\n  useEffect(() => {\n    if ((activeSidebar === 'tile' || activeSidebar === 'puzzle') && menuVisible) {\n      onMenuClick();\n    }\n  }, [activeSidebar, menuVisible, onMenuClick]);\n\n  return (\n    <FlexView $position=\"relative\">\n      <Clickable onClick={handleClick} label=\"homework help\">\n        <StyledWrapper $active={activeSidebar === 'homework'}>\n          <HWWrapper\n            $background={activeSidebar === 'homework' ? 'BLACK' : 'WHITE'}\n            $borderColor={activeSidebar === 'homework' ? 'WHITE' : 'BLACK'}\n            $borderRadius={4}\n            $alignItems=\"center\"\n            $justifyContent=\"center\"\n          >\n            <Text $color={activeSidebar === 'homework' ? 'WHITE' : 'BLACK'} $renderAs=\"ub3-bold\">\n              HW\n            </Text>\n          </HWWrapper>\n        </StyledWrapper>\n      </Clickable>\n      {menuVisible && <HomeWorkMenu onSelect={handleClick} hwRequests={hwRequests} />}\n    </FlexView>\n  );\n};\n\nexport default memo(HomeWorkRequestsContainer);\n"],"names":["HomeWorkRequestsContainer","props","activeSidebar","setActiveSidebar","hwRequests","cueCanvas","useCueCanvasActions","homeWorkMenuRef","useRef","menuVisible","onMenuClick","useContextMenuClickHandler","handleClick","useCallback","useEffect","jsxs","FlexView","jsx","Clickable","StyledWrapper","HWWrapper","Text","HomeWorkMenu","Homework","memo"],"mappings":";;;;;;;;;AAaA,MAAMA,IAAiE,CAASC,MAAA;AAC9E,QAAM,EAAE,eAAAC,GAAe,kBAAAC,GAAkB,YAAAC,EAAA,IAAeH,GAClD,EAAE,gBAAgBI,EAAU,IAAIC,EAAoB,GACpDC,IAAkBC,EAAO,IAAI,GAE7B,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAGIK,IAAcC,EAAY,MAAM;AACpC,IAAIX,MAAkB,WACpBG,KAAA,QAAAA,EAAW,YAAY,MAERF,EAAAD,MAAkB,aAAa,SAAY,UAAU,GAC1DQ;KACX,CAACR,GAAeG,GAAWK,GAAaP,CAAgB,CAAC;AAE5D,SAAAW,EAAU,MAAM;AACd,KAAKZ,MAAkB,UAAUA,MAAkB,aAAaO,KAClDC;EAEb,GAAA,CAACR,GAAeO,GAAaC,CAAW,CAAC,GAG1C,gBAAAK,EAACC,GAAS,EAAA,WAAU,YAClB,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAU,SAASN,GAAa,OAAM,iBACrC,UAAC,gBAAAK,EAAAE,GAAA,EAAc,SAASjB,MAAkB,YACxC,UAAA,gBAAAe;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,aAAalB,MAAkB,aAAa,UAAU;AAAA,QACtD,cAAcA,MAAkB,aAAa,UAAU;AAAA,QACvD,eAAe;AAAA,QACf,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAEhB,UAAA,gBAAAe,EAACI,KAAK,QAAQnB,MAAkB,aAAa,UAAU,SAAS,WAAU,YAAW,UAErF,KAAA,CAAA;AAAA,MAAA;AAAA,OAEJ,EACF,CAAA;AAAA,IACCO,KAAe,gBAAAQ,EAACK,GAAa,EAAA,UAAUV,GAAa,YAAAR,GAAwB;AAAA,EAC/E,EAAA,CAAA;AAEJ,GAEemB,IAAAC,EAAKxB,CAAyB;"}

package/dist/features/cue-canvas/sidebar/puzzles/api/get-puzzles.js

@@ -0,0 +1,13 @@
+import { createGetAPI as e } from "@cuemath/rest-api";
+import { BASE_URL_V3 as r, BASE_URL_V2 as c } from "../../../../../constants/api.js";
+import { stringify as o } from "../../../../../helpers/query-string.js";
+const { get: g } = e({
+  getURL: (t, i) => `${r}/curriculum/cueboard-activities/?${o(i)}`
+}), { useGet: _ } = e({
+  getURL: (t) => `${c}/curriculum/wb-activities/${t}`
+});
+export {
+  g as getPuzzles,
+  _ as useGetActivity
+};
+//# sourceMappingURL=get-puzzles.js.map

package/dist/features/cue-canvas/sidebar/puzzles/api/get-puzzles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-puzzles.js","sources":["../../../../../../src/features/cue-canvas/sidebar/puzzles/api/get-puzzles.ts"],"sourcesContent":["import { createGetAPI } from '@cuemath/rest-api';\n\nimport { BASE_URL_V2, BASE_URL_V3 } from '../../../../../constants/api';\nimport { stringify } from '../../../../../helpers/query-string';\n\nexport interface IFilterOption {\n  applied: boolean;\n  code: string;\n  name: string;\n}\n\nexport interface IFilterData {\n  activity_tiles: IFilterOption[];\n  activity_topics: IFilterOption[];\n  activity_types: IFilterOption[];\n  grades: IFilterOption[];\n  search: string;\n}\n\nexport interface IPuzzlesResultData {\n  activity_tiles: string[];\n  activity_topics: string[];\n  activity_types: string[];\n  activity_url: string;\n  created_on: string;\n  created_on_ts: number;\n  grades: string[];\n  id: string;\n  is_live: boolean;\n  name: string;\n  node_id: string;\n  updated_on: string;\n  updated_on_ts: number;\n}\nexport interface IPuzzlesResponses {\n  filters: IFilterData;\n  results: IPuzzlesResultData[];\n}\nexport interface IGetPuzzles {\n  activity_tiles?: string[];\n  activity_topics?: string[];\n  activity_types?: string[];\n  grades?: string[];\n  search?: string;\n}\n\nexport interface ActivityMetadata {\n  code: string;\n  description: string | null;\n  id: string;\n  is_live: boolean;\n  name: string;\n  priority: number | null;\n  type: 'ACTIVITY_TILE' | 'ACTIVITY_TOPIC' | 'ACTIVITY_TYPE' | string;\n}\n\nexport interface IActivityGrade {\n  code: string;\n  description: string;\n  id: string;\n  is_live: boolean;\n  name: string;\n  priority: number;\n  type: 'GRADE';\n}\n\nexport interface ActivityData {\n  activity_tiles: ActivityMetadata[];\n  activity_topics: ActivityMetadata[];\n  activity_types: ActivityMetadata[];\n  grades: IActivityGrade[];\n  worksheet: Worksheet;\n}\n\ninterface Worksheet {\n  code: string;\n  complete_in: number | null;\n  course_type: string;\n  description: string | null;\n  desmos_calculator_enabled: boolean;\n  id: string;\n  instructions_ref: string | null;\n  is_lesson_v3_enabled: boolean;\n  is_live: boolean;\n  is_subjective: boolean;\n  is_turing: boolean;\n  learnosity_activity_ref: string | null;\n  name: string;\n  points_available: number;\n  project_name: string;\n  sheet_time: number | null;\n  student_instructions_ref: string | null;\n  target_accuracy: number;\n  thumbnail_url: string | null;\n  total_questions: number | null;\n  visible_in_mpr: boolean;\n  worksheet_type: string;\n}\n\nconst { get: getPuzzles } = createGetAPI<IPuzzlesResponses, IGetPuzzles>({\n  getURL: (_, query) => `${BASE_URL_V3}/curriculum/cueboard-activities/?${stringify(query)}`,\n});\n\nconst { useGet: useGetActivity } = createGetAPI<ActivityData>({\n  getURL: nodeId => `${BASE_URL_V2}/curriculum/wb-activities/${nodeId}`,\n});\n\nexport { getPuzzles, useGetActivity };\n"],"names":["getPuzzles","createGetAPI","_","query","BASE_URL_V3","stringify","useGetActivity","nodeId","BASE_URL_V2"],"mappings":";;;AAmGA,MAAM,EAAE,KAAKA,EAAW,IAAIC,EAA6C;AAAA,EACvE,QAAQ,CAACC,GAAGC,MAAU,GAAGC,CAAW,oCAAoCC,EAAUF,CAAK,CAAC;AAC1F,CAAC,GAEK,EAAE,QAAQG,EAAe,IAAIL,EAA2B;AAAA,EAC5D,QAAQ,CAAAM,MAAU,GAAGC,CAAW,6BAA6BD,CAAM;AACrE,CAAC;"}

package/dist/features/cue-canvas/sidebar/puzzles/filter-selection-menu.js

@@ -0,0 +1,60 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { memo as h, useState as u, useCallback as m } from "react";
+import b from "../../../../assets/line-icons/icons/back.js";
+import C from "../../../../assets/line-icons/icons/cross.js";
+import s from "../../../ui/buttons/clickable/clickable.js";
+import x from "../../../ui/buttons/text-button/text-button.js";
+import k from "../../../ui/inputs/checkbox-input-list/checkbox-input-list.js";
+import i from "../../../ui/layout/flex-view.js";
+import d from "../../../ui/text/text.js";
+import { MenuContainer as g, CheckboxWrapper as I } from "./puzzles-styled.js";
+const T = ({
+  closeAllPopups: t,
+  menuItems: c,
+  onFiltersChange: a,
+  type: n
+}) => {
+  const [o, p] = u(
+    c.filter((r) => r.applied).map((r) => r.name)
+  ), f = m((r) => {
+    p(r);
+  }, []), $ = m(() => {
+    a({
+      [n]: o
+    }), t();
+  }, [a, t, o, n]);
+  return /* @__PURE__ */ l(g, { children: [
+    /* @__PURE__ */ l(i, { $justifyContent: "space-between", $flexDirection: "row", $gutterX: 1, $gapX: 0.5, children: [
+      /* @__PURE__ */ l(i, { $flexDirection: "row", $alignItems: "center", $flexColumnGapX: 1, children: [
+        /* @__PURE__ */ e(s, { onClick: t, label: "back", children: /* @__PURE__ */ e(b, { color: "WHITE" }) }),
+        /* @__PURE__ */ l(d, { $color: "WHITE", $renderAs: "eyebrow2", children: [
+          "Select ",
+          n === "grades" ? n : n.split("_")[1],
+          o.length > 0 && /* @__PURE__ */ e("span", { children: ` (${o.length})` })
+        ] })
+      ] }),
+      /* @__PURE__ */ l(i, { $flexDirection: "row", $alignItems: "center", $flexColumnGapX: 1, children: [
+        /* @__PURE__ */ e(x, { color: "WHITE", label: "Apply", onClick: $ }),
+        /* @__PURE__ */ e(s, { onClick: t, label: "close filter menu", children: /* @__PURE__ */ e(C, { color: "WHITE" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ e(I, { $gutterX: 1, $gapX: 1, children: /* @__PURE__ */ e(
+      k,
+      {
+        size: "medium",
+        renderAs: "black-dark",
+        numColumns: 3,
+        options: c.map((r) => ({
+          id: r.name,
+          label: /* @__PURE__ */ e(d, { $renderAs: "ub3-bold", $color: "WHITE", $inline: !0, children: r.name })
+        })),
+        value: o,
+        onChange: f
+      }
+    ) })
+  ] });
+}, A = h(T);
+export {
+  A as default
+};
+//# sourceMappingURL=filter-selection-menu.js.map

package/dist/features/cue-canvas/sidebar/puzzles/filter-selection-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-selection-menu.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/filter-selection-menu.tsx"],"sourcesContent":["import type { IFilterOption } from './api/get-puzzles';\nimport type { FilterSelectionMenuProps } from './puzzles-type';\n\nimport { memo, useCallback, useState } from 'react';\n\nimport BackIcon from '../../../../assets/line-icons/icons/back';\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport CheckboxInputList from '../../../ui/inputs/checkbox-input-list/checkbox-input-list';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport * as Styled from './puzzles-styled';\n\nconst FilterSelectionMenu: React.FC<FilterSelectionMenuProps> = ({\n  closeAllPopups,\n  menuItems,\n  onFiltersChange,\n  type,\n}) => {\n  const [selectedOptions, setSelectedOptions] = useState<string[]>(\n    menuItems.filter((ele: IFilterOption) => ele.applied).map((ele: IFilterOption) => ele.name),\n  );\n\n  const handleFilterChange = useCallback((selectedCodes: string[]) => {\n    setSelectedOptions(selectedCodes);\n  }, []);\n\n  const handleApplyFilters = useCallback(() => {\n    onFiltersChange({\n      [type]: selectedOptions,\n    });\n\n    closeAllPopups();\n  }, [onFiltersChange, closeAllPopups, selectedOptions, type]);\n\n  return (\n    <Styled.MenuContainer>\n      <FlexView $justifyContent=\"space-between\" $flexDirection=\"row\" $gutterX={1} $gapX={0.5}>\n        <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexColumnGapX={1}>\n          <Clickable onClick={closeAllPopups} label=\"back\">\n            <BackIcon color=\"WHITE\" />\n          </Clickable>\n          <Text $color=\"WHITE\" $renderAs=\"eyebrow2\">\n            Select {type === 'grades' ? type : type.split('_')[1]}\n            {selectedOptions.length > 0 && <span>{` (${selectedOptions.length})`}</span>}\n          </Text>\n        </FlexView>\n        <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexColumnGapX={1}>\n          <TextButton color=\"WHITE\" label=\"Apply\" onClick={handleApplyFilters} />\n          <Clickable onClick={closeAllPopups} label=\"close filter menu\">\n            <CrossIcon color=\"WHITE\" />\n          </Clickable>\n        </FlexView>\n      </FlexView>\n      <Styled.CheckboxWrapper $gutterX={1} $gapX={1}>\n        <CheckboxInputList\n          size=\"medium\"\n          renderAs=\"black-dark\"\n          numColumns={3}\n          options={menuItems.map(ele => ({\n            id: ele.name,\n            label: (\n              <Text $renderAs=\"ub3-bold\" $color=\"WHITE\" $inline>\n                {ele.name}\n              </Text>\n            ),\n          }))}\n          value={selectedOptions}\n          onChange={handleFilterChange}\n        />\n      </Styled.CheckboxWrapper>\n    </Styled.MenuContainer>\n  );\n};\n\nexport default memo(FilterSelectionMenu);\n"],"names":["FilterSelectionMenu","closeAllPopups","menuItems","onFiltersChange","type","selectedOptions","setSelectedOptions","useState","ele","handleFilterChange","useCallback","selectedCodes","handleApplyFilters","jsxs","Styled.MenuContainer","FlexView","jsx","Clickable","BackIcon","Text","TextButton","CrossIcon","Styled.CheckboxWrapper","CheckboxInputList","FilterSelectionMenu$1","memo"],"mappings":";;;;;;;;;;AAcA,MAAMA,IAA0D,CAAC;AAAA,EAC/D,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,MAAAC;AACF,MAAM;AACE,QAAA,CAACC,GAAiBC,CAAkB,IAAIC;AAAA,IAC5CL,EAAU,OAAO,CAACM,MAAuBA,EAAI,OAAO,EAAE,IAAI,CAACA,MAAuBA,EAAI,IAAI;AAAA,EAAA,GAGtFC,IAAqBC,EAAY,CAACC,MAA4B;AAClE,IAAAL,EAAmBK,CAAa;AAAA,EAClC,GAAG,CAAE,CAAA,GAECC,IAAqBF,EAAY,MAAM;AAC3B,IAAAP,EAAA;AAAA,MACd,CAACC,CAAI,GAAGC;AAAA,IAAA,CACT,GAEcJ;KACd,CAACE,GAAiBF,GAAgBI,GAAiBD,CAAI,CAAC;AAGzD,SAAA,gBAAAS,EAACC,GAAA,EACC,UAAA;AAAA,IAAC,gBAAAD,EAAAE,GAAA,EAAS,iBAAgB,iBAAgB,gBAAe,OAAM,UAAU,GAAG,OAAO,KACjF,UAAA;AAAA,MAAA,gBAAAF,EAACE,KAAS,gBAAe,OAAM,aAAY,UAAS,iBAAiB,GACnE,UAAA;AAAA,QAAC,gBAAAC,EAAAC,GAAA,EAAU,SAAShB,GAAgB,OAAM,QACxC,UAAC,gBAAAe,EAAAE,GAAA,EAAS,OAAM,QAAA,CAAQ,EAC1B,CAAA;AAAA,QACC,gBAAAL,EAAAM,GAAA,EAAK,QAAO,SAAQ,WAAU,YAAW,UAAA;AAAA,UAAA;AAAA,UAChCf,MAAS,WAAWA,IAAOA,EAAK,MAAM,GAAG,EAAE,CAAC;AAAA,UACnDC,EAAgB,SAAS,KAAK,gBAAAW,EAAC,UAAM,UAAK,KAAAX,EAAgB,MAAM,IAAI,CAAA;AAAA,QAAA,GACvE;AAAA,MAAA,GACF;AAAA,wBACCU,GAAS,EAAA,gBAAe,OAAM,aAAY,UAAS,iBAAiB,GACnE,UAAA;AAAA,QAAA,gBAAAC,EAACI,KAAW,OAAM,SAAQ,OAAM,SAAQ,SAASR,GAAoB;AAAA,QACrE,gBAAAI,EAACC,GAAU,EAAA,SAAShB,GAAgB,OAAM,qBACxC,UAAC,gBAAAe,EAAAK,GAAA,EAAU,OAAM,QAAA,CAAQ,EAC3B,CAAA;AAAA,MAAA,GACF;AAAA,IAAA,GACF;AAAA,sBACCC,GAAA,EAAuB,UAAU,GAAG,OAAO,GAC1C,UAAA,gBAAAN;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAS;AAAA,QACT,YAAY;AAAA,QACZ,SAASrB,EAAU,IAAI,CAAQM,OAAA;AAAA,UAC7B,IAAIA,EAAI;AAAA,UACR,OACG,gBAAAQ,EAAAG,GAAA,EAAK,WAAU,YAAW,QAAO,SAAQ,SAAO,IAC9C,UAAAX,EAAI,KACP,CAAA;AAAA,QAAA,EAEF;AAAA,QACF,OAAOH;AAAA,QACP,UAAUI;AAAA,MAAA;AAAA,IAAA,GAEd;AAAA,EACF,EAAA,CAAA;AAEJ,GAEee,IAAAC,EAAKzB,CAAmB;"}

package/dist/features/cue-canvas/sidebar/puzzles/filters-section.js

@@ -0,0 +1,44 @@
+import { jsxs as l, Fragment as s, jsx as r } from "react/jsx-runtime";
+import { memo as a } from "react";
+import d from "../../../ui/buttons/text-button/text-button.js";
+import p from "../../../ui/inputs/checkbox-input-list/checkbox-input-list.js";
+import u from "../../../ui/layout/flex-view.js";
+import t from "../../../ui/text/text.js";
+const $ = ({
+  title: n,
+  items: e,
+  selectedItems: i,
+  onChange: m,
+  openSelector: c
+}) => /* @__PURE__ */ l(s, { children: [
+  /* @__PURE__ */ r(t, { $renderAs: "eyebrow2", $color: "WHITE", children: n }),
+  /* @__PURE__ */ l(u, { $gutterX: 0.5, $gapX: 0.5, $flexRowGapX: 0.25, children: [
+    e.length > 0 && /* @__PURE__ */ r(
+      p,
+      {
+        size: "medium",
+        renderAs: "black-dark",
+        numColumns: 1,
+        options: e.slice(0, 3).map((o) => ({
+          id: o,
+          label: /* @__PURE__ */ r(t, { $renderAs: "ub3-bold", $color: "WHITE", $inline: !0, children: o })
+        })),
+        value: i,
+        onChange: m
+      }
+    ),
+    e.length > 3 && /* @__PURE__ */ r(
+      d,
+      {
+        size: "small",
+        color: "GREY_2",
+        onClick: c,
+        label: `${e.length - 3}+ more`
+      }
+    )
+  ] })
+] }), F = a($);
+export {
+  F as default
+};
+//# sourceMappingURL=filters-section.js.map

package/dist/features/cue-canvas/sidebar/puzzles/filters-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filters-section.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/filters-section.tsx"],"sourcesContent":["import type { IFilterSectionProps } from './puzzles-type';\n\nimport React, { memo } from 'react';\n\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport CheckboxInputList from '../../../ui/inputs/checkbox-input-list/checkbox-input-list';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\nconst FilterSection: React.FC<IFilterSectionProps> = ({\n  title,\n  items,\n  selectedItems,\n  onChange,\n  openSelector,\n}) => {\n  return (\n    <>\n      <Text $renderAs=\"eyebrow2\" $color=\"WHITE\">\n        {title}\n      </Text>\n      <FlexView $gutterX={0.5} $gapX={0.5} $flexRowGapX={0.25}>\n        {items.length > 0 && (\n          <CheckboxInputList\n            size=\"medium\"\n            renderAs=\"black-dark\"\n            numColumns={1}\n            options={items.slice(0, 3).map(ele => ({\n              id: ele,\n              label: (\n                <Text $renderAs=\"ub3-bold\" $color=\"WHITE\" $inline>\n                  {ele}\n                </Text>\n              ),\n            }))}\n            value={selectedItems}\n            onChange={onChange}\n          />\n        )}\n        {items.length > 3 && (\n          <TextButton\n            size=\"small\"\n            color=\"GREY_2\"\n            onClick={openSelector}\n            label={`${items.length - 3}+ more`}\n          />\n        )}\n      </FlexView>\n    </>\n  );\n};\n\nexport default memo(FilterSection);\n"],"names":["FilterSection","title","items","selectedItems","onChange","openSelector","jsxs","Fragment","jsx","Text","FlexView","CheckboxInputList","ele","TextButton","FilterSection$1","memo"],"mappings":";;;;;;AASA,MAAMA,IAA+C,CAAC;AAAA,EACpD,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AACF,MAGM,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,EAAA,gBAAAC,EAACC,GAAK,EAAA,WAAU,YAAW,QAAO,SAC/B,UACHR,GAAA;AAAA,oBACCS,GAAS,EAAA,UAAU,KAAK,OAAO,KAAK,cAAc,MAChD,UAAA;AAAA,IAAAR,EAAM,SAAS,KACd,gBAAAM;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAS;AAAA,QACT,YAAY;AAAA,QACZ,SAAST,EAAM,MAAM,GAAG,CAAC,EAAE,IAAI,CAAQU,OAAA;AAAA,UACrC,IAAIA;AAAA,UACJ,yBACGH,GAAK,EAAA,WAAU,YAAW,QAAO,SAAQ,SAAO,IAC9C,UACHG,EAAA,CAAA;AAAA,QAAA,EAEF;AAAA,QACF,OAAOT;AAAA,QACP,UAAAC;AAAA,MAAA;AAAA,IACF;AAAA,IAEDF,EAAM,SAAS,KACd,gBAAAM;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAM;AAAA,QACN,SAASR;AAAA,QACT,OAAO,GAAGH,EAAM,SAAS,CAAC;AAAA,MAAA;AAAA,IAC5B;AAAA,EAAA,GAEJ;AACF,EAAA,CAAA,GAIWY,IAAAC,EAAKf,CAAa;"}

package/dist/features/cue-canvas/sidebar/puzzles/filters.js

@@ -0,0 +1,107 @@
+import { jsxs as h, Fragment as B, jsx as o } from "react/jsx-runtime";
+import { memo as L, useState as T, useMemo as u, useCallback as r, useEffect as g } from "react";
+import I from "../../../ui/buttons/text-button/text-button.js";
+import A from "../../../ui/layout/flex-view.js";
+import M from "../../../ui/tab/tab.js";
+import b from "../../../ui/text/text.js";
+import w from "./filters-section.js";
+import { SelectedGrades as R } from "./puzzles-styled.js";
+import { GRADE_DISPLAY_NAMES as Y } from "./utils.js";
+const l = (n) => n.filter((t) => t.applied).map((t) => t.name), $ = (n) => n.map((t) => t.name), q = (n) => {
+  const { handleFiltersChange: t, filterGrades: f, filterTypes: i, filterTiles: c, filterTopics: a, togglePopup: s } = n, [d, x] = T(l(f)), [F, y] = T(l(c)), [G, S] = T(l(a)), [p, E] = T(l(i)), P = u(() => $(i), [i]), W = u(() => $(c), [c]), D = u(() => $(a), [a]), H = r(
+    (e) => {
+      const m = p.includes(e) ? p.filter((X) => X !== e) : [...p, e];
+      E(m), t({
+        activity_types: m
+      });
+    },
+    [t, p]
+  ), _ = r(
+    (e) => {
+      y(e), t({
+        activity_tiles: e
+      });
+    },
+    [t]
+  ), k = r(
+    (e) => {
+      S(e), t({
+        activity_topics: e
+      });
+    },
+    [t]
+  ), C = r(() => {
+    s("grades");
+  }, [s]), j = r(() => {
+    s("tiles");
+  }, [s]), v = r(() => {
+    s("topics");
+  }, [s]);
+  return g(() => {
+    x(l(f));
+  }, [f]), g(() => {
+    y(l(c));
+  }, [c]), g(() => {
+    S(l(a));
+  }, [a]), g(() => {
+    E(l(i));
+  }, [i]), /* @__PURE__ */ h(B, { children: [
+    /* @__PURE__ */ o(b, { $renderAs: "eyebrow2", $color: "WHITE", children: "GRADE" }),
+    /* @__PURE__ */ h(
+      A,
+      {
+        $flexDirection: "row",
+        $justifyContent: "space-between",
+        $alignItems: "center",
+        $gutterX: 0.5,
+        $gapX: 0.25,
+        $marginBottomX: 0.5,
+        children: [
+          d.length ? /* @__PURE__ */ o(R, { $renderAs: "eyebrow2", $color: "WHITE", children: d.map((e, m) => /* @__PURE__ */ h("span", { children: [
+            Y[e],
+            m < d.length - 1 ? ", " : ""
+          ] }, e)) }) : /* @__PURE__ */ o(I, { color: "WHITE", onClick: C, label: "Select Grade" }),
+          d.length > 0 && /* @__PURE__ */ o(I, { color: "WHITE", onClick: C, label: "Edit" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ o(b, { $renderAs: "eyebrow2", $color: "WHITE", children: "TYPE" }),
+    /* @__PURE__ */ o(A, { $flexDirection: "row", $flexWrap: !0, children: P.map((e) => /* @__PURE__ */ o(
+      M,
+      {
+        $width: "fit-content",
+        $renderAs: "secondary",
+        label: e,
+        $selected: p.includes(e),
+        shape: "square",
+        $size: "small",
+        onClick: () => H(e)
+      },
+      e
+    )) }),
+    /* @__PURE__ */ o(
+      w,
+      {
+        title: "TOPIC",
+        items: D,
+        selectedItems: G,
+        onChange: k,
+        openSelector: v
+      }
+    ),
+    /* @__PURE__ */ o(
+      w,
+      {
+        title: "TILE",
+        items: W,
+        onChange: _,
+        selectedItems: F,
+        openSelector: j
+      }
+    )
+  ] });
+}, ee = L(q);
+export {
+  ee as default
+};
+//# sourceMappingURL=filters.js.map

package/dist/features/cue-canvas/sidebar/puzzles/filters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filters.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/filters.tsx"],"sourcesContent":["import type { IFilterOption } from './api/get-puzzles';\nimport type { FiltersProps } from './puzzles-type';\n\nimport React, { memo, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport TabComponent from '../../../ui/tab/tab';\nimport Text from '../../../ui/text/text';\nimport FilterSection from './filters-section';\nimport * as Styled from './puzzles-styled';\nimport { GRADE_DISPLAY_NAMES } from './utils';\n\nconst getAppliedFilters = (filters: IFilterOption[]): string[] => {\n  return filters.filter(item => item.applied).map(item => item.name);\n};\n\nconst getAllFilters = (filters: IFilterOption[]): string[] => {\n  return filters.map(item => item.name);\n};\n\nconst Filters: React.FC<FiltersProps> = props => {\n  const { handleFiltersChange, filterGrades, filterTypes, filterTiles, filterTopics, togglePopup } =\n    props;\n  const [selectedGrades, setSelectedGrade] = useState<string[]>(getAppliedFilters(filterGrades));\n  const [selectedTiles, setSelectedTiles] = useState<string[]>(getAppliedFilters(filterTiles));\n  const [selectedTopics, setSelectedTopics] = useState<string[]>(getAppliedFilters(filterTopics));\n  const [selectedTypes, setSelectedTypes] = useState<string[]>(getAppliedFilters(filterTypes));\n\n  const allTypes = useMemo(() => getAllFilters(filterTypes), [filterTypes]);\n  const allTiles = useMemo(() => getAllFilters(filterTiles), [filterTiles]);\n  const allTopics = useMemo(() => getAllFilters(filterTopics), [filterTopics]);\n\n  const handleTypeChange = useCallback(\n    (ele: string) => {\n      const newSelectedTypes = selectedTypes.includes(ele)\n        ? selectedTypes.filter(type => type !== ele)\n        : [...selectedTypes, ele];\n\n      setSelectedTypes(newSelectedTypes);\n      handleFiltersChange({\n        activity_types: newSelectedTypes,\n      });\n    },\n    [handleFiltersChange, selectedTypes],\n  );\n\n  const handleTileChange = useCallback(\n    (selectedCodes: string[]) => {\n      setSelectedTiles(selectedCodes);\n      handleFiltersChange({\n        activity_tiles: selectedCodes,\n      });\n    },\n    [handleFiltersChange],\n  );\n\n  const handleTopicChange = useCallback(\n    (selectedCodes: string[]) => {\n      setSelectedTopics(selectedCodes);\n      handleFiltersChange({\n        activity_topics: selectedCodes,\n      });\n    },\n    [handleFiltersChange],\n  );\n\n  const toggleGradePopup = useCallback(() => {\n    togglePopup('grades');\n  }, [togglePopup]);\n\n  const toggleTilesPopup = useCallback(() => {\n    togglePopup('tiles');\n  }, [togglePopup]);\n\n  const toggleTopicsPopup = useCallback(() => {\n    togglePopup('topics');\n  }, [togglePopup]);\n\n  useEffect(() => {\n    setSelectedGrade(getAppliedFilters(filterGrades));\n  }, [filterGrades]);\n\n  useEffect(() => {\n    setSelectedTiles(getAppliedFilters(filterTiles));\n  }, [filterTiles]);\n\n  useEffect(() => {\n    setSelectedTopics(getAppliedFilters(filterTopics));\n  }, [filterTopics]);\n\n  useEffect(() => {\n    setSelectedTypes(getAppliedFilters(filterTypes));\n  }, [filterTypes]);\n\n  return (\n    <>\n      <Text $renderAs=\"eyebrow2\" $color=\"WHITE\">\n        GRADE\n      </Text>\n      <FlexView\n        $flexDirection=\"row\"\n        $justifyContent=\"space-between\"\n        $alignItems=\"center\"\n        $gutterX={0.5}\n        $gapX={0.25}\n        $marginBottomX={0.5}\n      >\n        {selectedGrades.length ? (\n          <Styled.SelectedGrades $renderAs=\"eyebrow2\" $color=\"WHITE\">\n            {selectedGrades.map((grade, index) => (\n              <span key={grade}>\n                {GRADE_DISPLAY_NAMES[grade]}\n                {index < selectedGrades.length - 1 ? ', ' : ''}\n              </span>\n            ))}\n          </Styled.SelectedGrades>\n        ) : (\n          <TextButton color=\"WHITE\" onClick={toggleGradePopup} label=\"Select Grade\" />\n        )}\n        {selectedGrades.length > 0 && (\n          <TextButton color=\"WHITE\" onClick={toggleGradePopup} label=\"Edit\" />\n        )}\n      </FlexView>\n      <Text $renderAs=\"eyebrow2\" $color=\"WHITE\">\n        TYPE\n      </Text>\n      <FlexView $flexDirection=\"row\" $flexWrap>\n        {allTypes.map((ele: string) => (\n          <TabComponent\n            key={ele}\n            $width=\"fit-content\"\n            $renderAs=\"secondary\"\n            label={ele}\n            $selected={selectedTypes.includes(ele)}\n            shape=\"square\"\n            $size=\"small\"\n            onClick={() => handleTypeChange(ele)}\n          />\n        ))}\n      </FlexView>\n      <FilterSection\n        title=\"TOPIC\"\n        items={allTopics}\n        selectedItems={selectedTopics}\n        onChange={handleTopicChange}\n        openSelector={toggleTopicsPopup}\n      />\n      <FilterSection\n        title=\"TILE\"\n        items={allTiles}\n        onChange={handleTileChange}\n        selectedItems={selectedTiles}\n        openSelector={toggleTilesPopup}\n      />\n    </>\n  );\n};\n\nexport default memo(Filters);\n"],"names":["getAppliedFilters","filters","item","getAllFilters","Filters","props","handleFiltersChange","filterGrades","filterTypes","filterTiles","filterTopics","togglePopup","selectedGrades","setSelectedGrade","useState","selectedTiles","setSelectedTiles","selectedTopics","setSelectedTopics","selectedTypes","setSelectedTypes","allTypes","useMemo","allTiles","allTopics","handleTypeChange","useCallback","ele","newSelectedTypes","type","handleTileChange","selectedCodes","handleTopicChange","toggleGradePopup","toggleTilesPopup","toggleTopicsPopup","useEffect","jsxs","Fragment","jsx","Text","FlexView","Styled.SelectedGrades","grade","index","GRADE_DISPLAY_NAMES","TextButton","TabComponent","FilterSection","Filters$1","memo"],"mappings":"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"}

package/dist/features/cue-canvas/sidebar/puzzles/hooks/use-fetch-cue-canvas-activity.js

@@ -0,0 +1,42 @@
+import { useState as a, useRef as g, useCallback as C, useEffect as P } from "react";
+import { getPuzzles as m } from "../api/get-puzzles.js";
+const h = (c) => {
+  const [o, i] = a(
+    c ? { grades: [c] } : {}
+  ), [u, e] = a(!1), [f, z] = a(), t = g(null), n = C(async () => {
+    e(!0), t.current && t.current.abort();
+    const b = new AbortController();
+    t.current = b, await m({
+      id: "",
+      query: o,
+      meta: void 0,
+      abortSignal: t.current.signal
+    }).then((s) => {
+      if (s) {
+        const {
+          __CODE__: r
+          // isProcessingFailed
+        } = s;
+        if (!(r >= 400 && r < 500)) {
+          if (r !== 500) {
+            const { data: l } = s || {};
+            l && (z(l), e(!1));
+          }
+        }
+      }
+    }).catch(() => {
+      e(!1);
+    }), e(!1);
+  }, [o]);
+  return P(() => (n(), () => {
+    t.current && t.current.abort();
+  }), [n]), {
+    isPuzzlesProcessing: u,
+    puzzlesData: f,
+    setActivityFilters: i
+  };
+};
+export {
+  h as default
+};
+//# sourceMappingURL=use-fetch-cue-canvas-activity.js.map

package/dist/features/cue-canvas/sidebar/puzzles/hooks/use-fetch-cue-canvas-activity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-fetch-cue-canvas-activity.js","sources":["../../../../../../src/features/cue-canvas/sidebar/puzzles/hooks/use-fetch-cue-canvas-activity.ts"],"sourcesContent":["import type { IGetPuzzles } from '../api/get-puzzles';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { getPuzzles, type IPuzzlesResponses } from '../api/get-puzzles';\n\nconst useFetchCueCanvasActivity = (studentGrade?: string) => {\n  const [activityFilters, setActivityFilters] = useState<IGetPuzzles>(\n    studentGrade ? { grades: [studentGrade] } : {},\n  );\n  const [isPuzzlesProcessing, setIsPuzzlesProcessing] = useState(false);\n  const [puzzlesData, setPuzzlesData] = useState<IPuzzlesResponses | undefined>();\n  const abortControllerRef = useRef<AbortController | null>(null);\n\n  const fetchResource = useCallback(async () => {\n    setIsPuzzlesProcessing(true);\n\n    if (abortControllerRef.current) {\n      abortControllerRef.current.abort();\n    }\n\n    const controller = new AbortController();\n\n    abortControllerRef.current = controller;\n\n    await getPuzzles({\n      id: '',\n      query: activityFilters,\n      meta: undefined,\n      abortSignal: abortControllerRef.current.signal,\n    })\n      .then(res => {\n        if (res) {\n          const {\n            __CODE__,\n            // isProcessingFailed\n          } = res;\n\n          if (__CODE__ >= 400 && __CODE__ < 500) {\n            // onError(__ERROR__?.message ?? 'Error while fetching the resource');\n          } else if (__CODE__ === 500) {\n            // setIsPuzzlesFailed(isProcessingFailed);\n            // setError('Internal server error, Please try again');\n          } else {\n            const { data } = res || {};\n\n            if (data) {\n              setPuzzlesData(data);\n              setIsPuzzlesProcessing(false);\n            }\n          }\n        }\n      })\n      .catch(() => {\n        setIsPuzzlesProcessing(false);\n        // setIsPuzzlesFailed(true);\n      });\n    setIsPuzzlesProcessing(false);\n  }, [activityFilters]);\n\n  useEffect(() => {\n    fetchResource();\n\n    return () => {\n      if (abortControllerRef.current) {\n        abortControllerRef.current.abort();\n      }\n    };\n  }, [fetchResource]);\n\n  return {\n    isPuzzlesProcessing,\n    puzzlesData,\n    setActivityFilters,\n  };\n};\n\nexport default useFetchCueCanvasActivity;\n"],"names":["useFetchCueCanvasActivity","studentGrade","activityFilters","setActivityFilters","useState","isPuzzlesProcessing","setIsPuzzlesProcessing","puzzlesData","setPuzzlesData","abortControllerRef","useRef","fetchResource","useCallback","controller","getPuzzles","res","__CODE__","data","useEffect"],"mappings":";;AAMM,MAAAA,IAA4B,CAACC,MAA0B;AACrD,QAAA,CAACC,GAAiBC,CAAkB,IAAIC;AAAA,IAC5CH,IAAe,EAAE,QAAQ,CAACA,CAAY,MAAM,CAAC;AAAA,EAAA,GAEzC,CAACI,GAAqBC,CAAsB,IAAIF,EAAS,EAAK,GAC9D,CAACG,GAAaC,CAAc,IAAIJ,EAAwC,GACxEK,IAAqBC,EAA+B,IAAI,GAExDC,IAAgBC,EAAY,YAAY;AAC5C,IAAAN,EAAuB,EAAI,GAEvBG,EAAmB,WACrBA,EAAmB,QAAQ;AAGvB,UAAAI,IAAa,IAAI;AAEvB,IAAAJ,EAAmB,UAAUI,GAE7B,MAAMC,EAAW;AAAA,MACf,IAAI;AAAA,MACJ,OAAOZ;AAAA,MACP,MAAM;AAAA,MACN,aAAaO,EAAmB,QAAQ;AAAA,IAAA,CACzC,EACE,KAAK,CAAOM,MAAA;AACX,UAAIA,GAAK;AACD,cAAA;AAAA,UACJ,UAAAC;AAAA;AAAA,QAEE,IAAAD;AAEA,YAAA,EAAAC,KAAY,OAAOA,IAAW;AAElC,cAAWA,MAAa,KAGjB;AACL,kBAAM,EAAE,MAAAC,EAAA,IAASF,KAAO;AAExB,YAAIE,MACFT,EAAeS,CAAI,GACnBX,EAAuB,EAAK;AAAA,UAEhC;AAAA;AAAA,MACF;AAAA,IAAA,CACD,EACA,MAAM,MAAM;AACX,MAAAA,EAAuB,EAAK;AAAA,IAAA,CAE7B,GACHA,EAAuB,EAAK;AAAA,EAAA,GAC3B,CAACJ,CAAe,CAAC;AAEpB,SAAAgB,EAAU,OACMP,KAEP,MAAM;AACX,IAAIF,EAAmB,WACrBA,EAAmB,QAAQ;EAC7B,IAED,CAACE,CAAa,CAAC,GAEX;AAAA,IACL,qBAAAN;AAAA,IACA,aAAAE;AAAA,IACA,oBAAAJ;AAAA,EAAA;AAEJ;"}

package/dist/features/cue-canvas/sidebar/puzzles/launch-puzzle.js

@@ -0,0 +1,84 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { memo as G, useEffect as O, useCallback as R } from "react";
+import W from "styled-components";
+import { ILLUSTRATIONS as H } from "../../../../assets/illustrations/illustrations.js";
+import w from "../../../../assets/line-icons/icons/back.js";
+import S from "../../../../assets/line-icons/icons/cross.js";
+import P from "../../../ui/buttons/button/button.js";
+import { Loader as B } from "../../../ui/buttons/button/button-styled.js";
+import l from "../../../ui/buttons/clickable/clickable.js";
+import t from "../../../ui/layout/flex-view.js";
+import A from "../../../ui/text/text.js";
+import { useCueCanvasActions as J } from "../../hooks/use-cue-canvas-actions.js";
+import { useGetActivity as M } from "./api/get-puzzles.js";
+import { MenuContainer as C } from "./puzzles-styled.js";
+import { serializeData as N, getTags as o } from "./utils.js";
+const V = W.iframe`
+  width: 100%;
+  height: 100%;
+`, se = G((T) => {
+  const { launchPuzzleData: I, onMenuVisibilityChange: c, toggleMenu: m } = T, { node_id: f } = I || {}, { activeInstance: r, setHomeworkId: d, setActiveTool: p } = J(), {
+    get: u,
+    data: g,
+    isProcessed: k
+  } = M();
+  O(() => {
+    u(f);
+  }, [u, f]);
+  const {
+    activity_tiles: $,
+    activity_topics: h,
+    activity_types: y,
+    grades: b,
+    worksheet: x
+  } = g || {}, { instructions_ref: v, learnosity_activity_ref: n } = x || {}, X = R(async () => {
+    const a = n && await (await fetch(n)).json(), E = {
+      ...N(a)
+    };
+    m(), r == null || r.replaceCanvas(E), d(void 0), p("move");
+  }, [r, n, p, d, m]);
+  if (!g || !k)
+    return /* @__PURE__ */ i(C, { children: [
+      /* @__PURE__ */ e(t, { $gutterX: 1.5, $gapX: 1.5, children: /* @__PURE__ */ e(l, { onClick: c, label: "back", children: /* @__PURE__ */ e(w, { color: "WHITE" }) }) }),
+      /* @__PURE__ */ e(t, { $alignItems: "center", $justifyContent: "center", $height: "100%", children: /* @__PURE__ */ e(B, { src: H.LOADER, alt: "Loader", $size: "small" }) })
+    ] });
+  const D = b ? o(b, "grades") : [], _ = h ? o(h) : [], j = y ? o(y) : [], L = $ ? o($) : [], z = [..._, ...D, ...j, ...L];
+  return /* @__PURE__ */ i(C, { children: [
+    /* @__PURE__ */ i(
+      t,
+      {
+        $justifyContent: "space-between",
+        $alignItems: "center",
+        $flexDirection: "row",
+        $gutterX: 1,
+        $gapX: 0.5,
+        children: [
+          /* @__PURE__ */ e(l, { onClick: c, label: "back", children: /* @__PURE__ */ e(w, { color: "WHITE" }) }),
+          /* @__PURE__ */ i(t, { $flexDirection: "row", $alignItems: "center", $flexColumnGapX: 1, children: [
+            /* @__PURE__ */ e(
+              P,
+              {
+                size: "small",
+                renderAs: "primary",
+                widthX: 12,
+                label: "Launch",
+                onClick: X
+              }
+            ),
+            /* @__PURE__ */ e(l, { onClick: c, label: "close filter menu", children: /* @__PURE__ */ e(S, { color: "WHITE" }) })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ i(t, { $flexDirection: "row", $flexColumnGapX: 1, $gapX: 1, $gutterX: 1, children: [
+      /* @__PURE__ */ e(A, { $renderAs: "ab1", $color: "GREY_2", children: "Tags:" }),
+      /* @__PURE__ */ e(t, { $flexDirection: "row", $flexColumnGapX: 1, $flexRowGapX: 0.5, $flexWrap: !0, children: z.map((a, s) => /* @__PURE__ */ e(t, { $background: "WHITE", $borderRadius: 16, $gapX: 0.25, $gutterX: 1, children: /* @__PURE__ */ e(A, { $renderAs: "ub2", children: a }, s) }, s)) })
+    ] }),
+    v && /* @__PURE__ */ e(V, { id: "launch_activity_iframe", src: v })
+  ] });
+});
+export {
+  V as Iframe,
+  se as default
+};
+//# sourceMappingURL=launch-puzzle.js.map

package/dist/features/cue-canvas/sidebar/puzzles/launch-puzzle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"launch-puzzle.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/launch-puzzle.tsx"],"sourcesContent":["import type { IPuzzlesResultData } from './api/get-puzzles';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect } from 'react';\nimport styled from 'styled-components';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport BackIcon from '../../../../assets/line-icons/icons/back';\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport Button from '../../../ui/buttons/button/button';\nimport { Loader } from '../../../ui/buttons/button/button-styled';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport { useCueCanvasActions } from '../../hooks/use-cue-canvas-actions';\nimport { useGetActivity } from './api/get-puzzles';\nimport * as Styled from './puzzles-styled';\nimport { getTags, serializeData } from './utils';\n\nexport const Iframe = styled.iframe`\n  width: 100%;\n  height: 100%;\n`;\n\ninterface ILaunchPuzzleProps {\n  launchPuzzleData: IPuzzlesResultData;\n  onMenuVisibilityChange: () => void;\n  toggleMenu: () => void;\n}\n\nconst LaunchPuzzle: FC<ILaunchPuzzleProps> = memo(props => {\n  const { launchPuzzleData, onMenuVisibilityChange, toggleMenu } = props;\n  const { node_id: nodeId } = launchPuzzleData || {};\n  const { activeInstance: cueCanvas, setHomeworkId, setActiveTool } = useCueCanvasActions();\n\n  const {\n    get: getWbActivity,\n    data: wbActivityData,\n    isProcessed: wbActivityDataProcessed,\n  } = useGetActivity();\n\n  useEffect(() => {\n    getWbActivity(nodeId);\n  }, [getWbActivity, nodeId]);\n  const {\n    activity_tiles: activityTiles,\n    activity_topics: activityTopics,\n    activity_types: activityTypes,\n    grades: grades,\n    worksheet,\n  } = wbActivityData || {};\n  const { instructions_ref: iframeSrc, learnosity_activity_ref: learnnosityActivityRef } =\n    worksheet || {};\n\n  const onLaunchActivityClick = useCallback(async () => {\n    const jsonOBJ = learnnosityActivityRef && (await (await fetch(learnnosityActivityRef)).json());\n\n    const newJSONObj = serializeData(jsonOBJ);\n    const actionData = {\n      ...newJSONObj,\n    };\n\n    toggleMenu();\n\n    cueCanvas?.replaceCanvas(actionData);\n    setHomeworkId(undefined);\n    setActiveTool('move');\n  }, [cueCanvas, learnnosityActivityRef, setActiveTool, setHomeworkId, toggleMenu]);\n\n  if (!wbActivityData || !wbActivityDataProcessed) {\n    return (\n      <Styled.MenuContainer>\n        <FlexView $gutterX={1.5} $gapX={1.5}>\n          <Clickable onClick={onMenuVisibilityChange} label=\"back\">\n            <BackIcon color=\"WHITE\" />\n          </Clickable>\n        </FlexView>\n        <FlexView $alignItems=\"center\" $justifyContent=\"center\" $height=\"100%\">\n          <Loader src={ILLUSTRATIONS.LOADER} alt=\"Loader\" $size=\"small\" />\n        </FlexView>\n      </Styled.MenuContainer>\n    );\n  }\n\n  const getGradesArr = grades ? getTags(grades, 'grades') : [];\n  const getTopicsArr = activityTopics ? getTags(activityTopics) : [];\n  const getTypesArr = activityTypes ? getTags(activityTypes) : [];\n  const getTilesArr = activityTiles ? getTags(activityTiles) : [];\n\n  const tagData: string[] = [...getTopicsArr, ...getGradesArr, ...getTypesArr, ...getTilesArr];\n\n  return (\n    <Styled.MenuContainer>\n      <FlexView\n        $justifyContent=\"space-between\"\n        $alignItems=\"center\"\n        $flexDirection=\"row\"\n        $gutterX={1}\n        $gapX={0.5}\n      >\n        <Clickable onClick={onMenuVisibilityChange} label=\"back\">\n          <BackIcon color=\"WHITE\" />\n        </Clickable>\n        <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexColumnGapX={1}>\n          <Button\n            size=\"small\"\n            renderAs=\"primary\"\n            widthX={12}\n            label=\"Launch\"\n            onClick={onLaunchActivityClick}\n          />\n          <Clickable onClick={onMenuVisibilityChange} label=\"close filter menu\">\n            <CrossIcon color=\"WHITE\" />\n          </Clickable>\n        </FlexView>\n      </FlexView>\n      <FlexView $flexDirection=\"row\" $flexColumnGapX={1} $gapX={1} $gutterX={1}>\n        <Text $renderAs=\"ab1\" $color=\"GREY_2\">\n          Tags:\n        </Text>\n        <FlexView $flexDirection=\"row\" $flexColumnGapX={1} $flexRowGapX={0.5} $flexWrap>\n          {tagData.map((tag, index) => (\n            <FlexView $background=\"WHITE\" $borderRadius={16} $gapX={0.25} $gutterX={1} key={index}>\n              <Text $renderAs=\"ub2\" key={index}>\n                {tag}\n              </Text>\n            </FlexView>\n          ))}\n        </FlexView>\n      </FlexView>\n      {iframeSrc && <Iframe id=\"launch_activity_iframe\" src={iframeSrc} />}\n    </Styled.MenuContainer>\n  );\n});\n\nexport default LaunchPuzzle;\n"],"names":["Iframe","styled","LaunchPuzzle","memo","props","launchPuzzleData","onMenuVisibilityChange","toggleMenu","nodeId","cueCanvas","setHomeworkId","setActiveTool","useCueCanvasActions","getWbActivity","wbActivityData","wbActivityDataProcessed","useGetActivity","useEffect","activityTiles","activityTopics","activityTypes","grades","worksheet","iframeSrc","learnnosityActivityRef","onLaunchActivityClick","useCallback","jsonOBJ","actionData","serializeData","jsxs","Styled.MenuContainer","jsx","FlexView","Clickable","BackIcon","Loader","ILLUSTRATIONS","getGradesArr","getTags","getTopicsArr","getTypesArr","getTilesArr","tagData","Button","CrossIcon","Text","tag","index"],"mappings":"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"}