@cuemath/leap 3.1.0-gg2 → 3.1.1-aa0

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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"}

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

@@ -0,0 +1,36 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { memo as i } from "react";
+import n from "../../../../assets/line-icons/icons/cross.js";
+import c from "../../../../assets/line-icons/icons/puzzle-icon.js";
+import m from "../../../ui/buttons/clickable/clickable.js";
+import s from "../../../ui/buttons/text-button/text-button.js";
+import r from "../../../ui/layout/flex-view.js";
+import a from "../../../ui/text/text.js";
+const f = ({
+  toggleMenu: t,
+  onReset: l
+}) => /* @__PURE__ */ o(
+  r,
+  {
+    $flexDirection: "row",
+    $justifyContent: "space-between",
+    $alignItems: "center",
+    $gutterX: 1,
+    $gapX: 0.5,
+    $heightX: 3,
+    children: [
+      /* @__PURE__ */ o(r, { $flexDirection: "row", $alignItems: "center", $flexColumnGapX: 0.5, children: [
+        /* @__PURE__ */ e(c, { color: "WHITE" }),
+        /* @__PURE__ */ e(a, { $color: "WHITE", $renderAs: "body2", children: "ACTIVITIES" })
+      ] }),
+      /* @__PURE__ */ o(r, { $flexDirection: "row", $alignItems: "center", $flexColumnGapX: 1, children: [
+        /* @__PURE__ */ e(s, { color: "WHITE", label: "Reset", onClick: l }),
+        /* @__PURE__ */ e(m, { onClick: t, label: "close activities menu", children: /* @__PURE__ */ e(n, { color: "WHITE" }) })
+      ] })
+    ]
+  }
+), h = i(f);
+export {
+  h as default
+};
+//# sourceMappingURL=puzzle-menu-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"puzzle-menu-header.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/puzzle-menu-header.tsx"],"sourcesContent":["import { memo } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport PuzzleIcon from '../../../../assets/line-icons/icons/puzzle-icon';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\nconst MenuHeader: React.FC<{ toggleMenu: () => void; onReset?: () => void }> = ({\n  toggleMenu,\n  onReset,\n}) => (\n  <FlexView\n    $flexDirection=\"row\"\n    $justifyContent=\"space-between\"\n    $alignItems=\"center\"\n    $gutterX={1}\n    $gapX={0.5}\n    $heightX={3}\n  >\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexColumnGapX={0.5}>\n      <PuzzleIcon color=\"WHITE\" />\n      <Text $color=\"WHITE\" $renderAs=\"body2\">\n        ACTIVITIES\n      </Text>\n    </FlexView>\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexColumnGapX={1}>\n      <TextButton color=\"WHITE\" label=\"Reset\" onClick={onReset} />\n      <Clickable onClick={toggleMenu} label=\"close activities menu\">\n        <CrossIcon color=\"WHITE\" />\n      </Clickable>\n    </FlexView>\n  </FlexView>\n);\n\nexport default memo(MenuHeader);\n"],"names":["MenuHeader","toggleMenu","onReset","jsxs","FlexView","jsx","PuzzleIcon","Text","TextButton","Clickable","CrossIcon","PuzzleMenuHeader","memo"],"mappings":";;;;;;;;AASA,MAAMA,IAAyE,CAAC;AAAA,EAC9E,YAAAC;AAAA,EACA,SAAAC;AACF,MACE,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,gBAAe;AAAA,IACf,iBAAgB;AAAA,IAChB,aAAY;AAAA,IACZ,UAAU;AAAA,IACV,OAAO;AAAA,IACP,UAAU;AAAA,IAEV,UAAA;AAAA,MAAA,gBAAAD,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,iBAAiB,KACnE,UAAA;AAAA,QAAC,gBAAAC,EAAAC,GAAA,EAAW,OAAM,QAAQ,CAAA;AAAA,0BACzBC,GAAK,EAAA,QAAO,SAAQ,WAAU,SAAQ,UAEvC,cAAA;AAAA,MAAA,GACF;AAAA,wBACCH,GAAS,EAAA,gBAAe,OAAM,aAAY,UAAS,iBAAiB,GACnE,UAAA;AAAA,QAAA,gBAAAC,EAACG,KAAW,OAAM,SAAQ,OAAM,SAAQ,SAASN,GAAS;AAAA,QAC1D,gBAAAG,EAACI,GAAU,EAAA,SAASR,GAAY,OAAM,yBACpC,UAAC,gBAAAI,EAAAK,GAAA,EAAU,OAAM,QAAA,CAAQ,EAC3B,CAAA;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AACF,GAGaC,IAAAC,EAAKZ,CAAU;"}

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

@@ -0,0 +1,133 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { memo as j, useState as f, useCallback as c } from "react";
+import { ILLUSTRATIONS as O } from "../../../../assets/illustrations/illustrations.js";
+import V from "../../../hooks/use-debounce.js";
+import { Loader as Y } from "../../../ui/buttons/button/button-styled.js";
+import G from "../../../ui/buttons/clickable/clickable.js";
+import X from "../../../ui/inputs/searchable-input/searchable-input.js";
+import h from "../../../ui/layout/flex-view.js";
+import H from "../../../ui/text/text.js";
+import N from "./filter-selection-menu.js";
+import U from "./filters.js";
+import W from "./hooks/use-fetch-cue-canvas-activity.js";
+import K from "./launch-puzzle.js";
+import q from "./puzzle-menu-header.js";
+import { MenuContainer as x, FilterSidebar as B, SearchHeaderWrapper as J, ActivitiesList as Q, ActivityImage as Z, ActivityTitle as ee, EmptyStateContainer as te } from "./puzzles-styled.js";
+import { FILTER_KEYS as p } from "./utils.js";
+const re = ({ toggleMenu: y, studentGrade: F }) => {
+  const { isPuzzlesProcessing: P, setActivityFilters: a, puzzlesData: _ } = W(F), { filters: L, results: i } = _ || {}, {
+    activity_tiles: n,
+    activity_topics: l,
+    activity_types: g,
+    grades: m,
+    search: z
+  } = L || {}, [$, C] = f(), [S, T] = f(
+    null
+  ), [I, b] = f(z || ""), v = V((e) => {
+    e !== z && d({ search: e });
+  }, 300), D = c(
+    (e) => {
+      b(e), v(e);
+    },
+    [v]
+  ), k = c((e) => {
+    T((r) => r === e ? null : e);
+  }, []), w = c(() => {
+    T(null);
+  }, []), d = c(
+    (e) => {
+      const r = Object.keys(e)[0], s = r && e[r];
+      a((u) => ({
+        ...u,
+        [r]: s
+      }));
+    },
+    [a]
+  ), E = c(() => {
+    a({}), b("");
+  }, [a]), M = c(() => {
+    C(void 0);
+  }, []);
+  if (P && (!n || (n == null ? void 0 : n.length) === 0) && (!l || (l == null ? void 0 : l.length) === 0))
+    return /* @__PURE__ */ o(x, { $justifyContent: "center", $alignItems: "center", children: [
+      /* @__PURE__ */ t(Y, { src: O.LOADER, alt: "Loader", $size: "small" }),
+      ";"
+    ] });
+  if ($)
+    return /* @__PURE__ */ t(
+      K,
+      {
+        launchPuzzleData: $,
+        onMenuVisibilityChange: M,
+        toggleMenu: y
+      }
+    );
+  if (S) {
+    let e, r;
+    switch (S) {
+      case "grades":
+        e = m, r = p.ACTIVITY_GRADES;
+        break;
+      case "topics":
+        e = l, r = p.ACTIVITY_TOPICS;
+        break;
+      case "tiles":
+        e = n, r = p.ACTIVITY_TILES;
+        break;
+      default:
+        return null;
+    }
+    return e ? /* @__PURE__ */ t(
+      N,
+      {
+        closeAllPopups: w,
+        menuItems: e,
+        onFiltersChange: d,
+        type: r
+      }
+    ) : null;
+  }
+  return /* @__PURE__ */ o(x, { children: [
+    /* @__PURE__ */ t(q, { toggleMenu: y, onReset: E }),
+    /* @__PURE__ */ o(h, { $flexDirection: "row", $alignItems: "flex-start", children: [
+      /* @__PURE__ */ t(B, { $width: "35%", $gutterX: 1, children: m && n && l && g && /* @__PURE__ */ t(
+        U,
+        {
+          handleFiltersChange: d,
+          filterGrades: m,
+          filterTiles: n,
+          filterTypes: g,
+          filterTopics: l,
+          togglePopup: k
+        }
+      ) }),
+      /* @__PURE__ */ o(h, { $width: "65%", children: [
+        /* @__PURE__ */ t(J, { $heightX: 4, $alignItems: "center", $justifyContent: "center", children: /* @__PURE__ */ t(
+          X,
+          {
+            value: I,
+            onSearchTextChange: D,
+            renderAs: "secondary",
+            width: "99%",
+            size: "regular",
+            label: "Type topic name...",
+            searchOnClear: !0
+          }
+        ) }),
+        /* @__PURE__ */ t(h, { $gutterX: 1, children: /* @__PURE__ */ t(H, { $renderAs: "body3", $color: "GREY_2", children: i && i.length > 0 ? `${i.length} activities found` : I ? "No activities found" : null }) }),
+        /* @__PURE__ */ t(Q, { $flexDirection: "row", $flexWrap: !0, $justifyContent: "space-evenly", children: i && (i == null ? void 0 : i.length) > 0 ? i.map((e) => {
+          var A;
+          const { activity_url: r, name: s, id: u } = e, R = (A = r.split("_")[0]) == null ? void 0 : A.concat("_thumbnail.png");
+          return r ? /* @__PURE__ */ t(G, { onClick: () => C(e), label: "puzzle", children: /* @__PURE__ */ o(h, { $alignItems: "center", children: [
+            /* @__PURE__ */ t(Z, { title: s, id: u, src: R }),
+            s && /* @__PURE__ */ t(ee, { children: s })
+          ] }) }, u) : null;
+        }) : /* @__PURE__ */ t(te, { children: "Use Filters or Search to find activities" }) })
+      ] })
+    ] })
+  ] });
+}, $e = j(re);
+export {
+  $e as default
+};
+//# sourceMappingURL=puzzle-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"puzzle-menu.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/puzzle-menu.tsx"],"sourcesContent":["import type { IGetPuzzles, IPuzzlesResultData } from './api/get-puzzles';\nimport type { FilterType, PuzzleMenuProps, TActiveFilterMenuType } from './puzzles-type';\n\nimport { memo, useCallback, useState } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport useDebounce from '../../../hooks/use-debounce';\nimport { Loader } from '../../../ui/buttons/button/button-styled';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport SearchableInput from '../../../ui/inputs/searchable-input/searchable-input';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport FilterSelectionMenu from './filter-selection-menu';\nimport Filters from './filters';\nimport useFetchCueCanvasActivity from './hooks/use-fetch-cue-canvas-activity';\nimport LaunchPuzzle from './launch-puzzle';\nimport PuzzleMenuHeader from './puzzle-menu-header';\nimport * as Styled from './puzzles-styled';\nimport { FILTER_KEYS } from './utils';\n\nconst PuzzleMenu: React.FC<PuzzleMenuProps> = ({ toggleMenu, studentGrade }) => {\n  const { isPuzzlesProcessing, setActivityFilters, puzzlesData } =\n    useFetchCueCanvasActivity(studentGrade);\n\n  const { filters, results: puzzles } = puzzlesData || {};\n  const {\n    activity_tiles: filterTiles,\n    activity_topics: filterTopics,\n    activity_types: filterTypes,\n    grades: filterGrades,\n    search: filterSearch,\n  } = filters || {};\n\n  const [launchPuzzleData, setLaunchPuzzlesData] = useState<IPuzzlesResultData | undefined>();\n  const [activeFilterMenuType, setActiveFilterMenuType] = useState<TActiveFilterMenuType | null>(\n    null,\n  );\n  const [searchText, setSearchText] = useState(filterSearch || '');\n\n  const debouncedSearch = useDebounce((value: string) => {\n    if (value !== filterSearch) {\n      handleFiltersChange({ search: value });\n    }\n  }, 300);\n\n  const handleSearchChange = useCallback(\n    (value: string) => {\n      setSearchText(value);\n      debouncedSearch(value);\n    },\n    [debouncedSearch],\n  );\n\n  const togglePopup = useCallback((popupType: TActiveFilterMenuType) => {\n    setActiveFilterMenuType(prev => (prev === popupType ? null : popupType));\n  }, []);\n\n  const closeAllPopups = useCallback(() => {\n    setActiveFilterMenuType(null);\n  }, []);\n\n  const handleFiltersChange = useCallback(\n    (filterChange: IGetPuzzles) => {\n      const filterType = Object.keys(filterChange)[0] as FilterType;\n      const value = filterType && filterChange[filterType];\n\n      setActivityFilters(prevFilters => ({\n        ...prevFilters,\n        [filterType]: value,\n      }));\n    },\n    [setActivityFilters],\n  );\n\n  const handleReset = useCallback(() => {\n    setActivityFilters({});\n    setSearchText('');\n  }, [setActivityFilters]);\n\n  const clearPuzzleData = useCallback(() => {\n    setLaunchPuzzlesData(undefined);\n  }, []);\n\n  if (\n    isPuzzlesProcessing &&\n    (!filterTiles || filterTiles?.length === 0) &&\n    (!filterTopics || filterTopics?.length === 0)\n  ) {\n    return (\n      <Styled.MenuContainer $justifyContent=\"center\" $alignItems=\"center\">\n        <Loader src={ILLUSTRATIONS.LOADER} alt=\"Loader\" $size=\"small\" />;\n      </Styled.MenuContainer>\n    );\n  }\n\n  if (launchPuzzleData) {\n    return (\n      <LaunchPuzzle\n        launchPuzzleData={launchPuzzleData}\n        onMenuVisibilityChange={clearPuzzleData}\n        toggleMenu={toggleMenu}\n      />\n    );\n  }\n\n  if (activeFilterMenuType) {\n    let menuItems;\n    let filterType: FilterType;\n\n    switch (activeFilterMenuType) {\n      case 'grades':\n        menuItems = filterGrades;\n        filterType = FILTER_KEYS.ACTIVITY_GRADES as FilterType;\n        break;\n      case 'topics':\n        menuItems = filterTopics;\n        filterType = FILTER_KEYS.ACTIVITY_TOPICS as FilterType;\n        break;\n      case 'tiles':\n        menuItems = filterTiles;\n        filterType = FILTER_KEYS.ACTIVITY_TILES as FilterType;\n        break;\n      default:\n        return null;\n    }\n\n    if (!menuItems) return null;\n\n    return (\n      <FilterSelectionMenu\n        closeAllPopups={closeAllPopups}\n        menuItems={menuItems}\n        onFiltersChange={handleFiltersChange}\n        type={filterType}\n      />\n    );\n  }\n\n  return (\n    <Styled.MenuContainer>\n      <PuzzleMenuHeader toggleMenu={toggleMenu} onReset={handleReset} />\n      <FlexView $flexDirection=\"row\" $alignItems=\"flex-start\">\n        <Styled.FilterSidebar $width=\"35%\" $gutterX={1}>\n          {filterGrades && filterTiles && filterTopics && filterTypes && (\n            <Filters\n              handleFiltersChange={handleFiltersChange}\n              filterGrades={filterGrades}\n              filterTiles={filterTiles}\n              filterTypes={filterTypes}\n              filterTopics={filterTopics}\n              togglePopup={togglePopup}\n            />\n          )}\n        </Styled.FilterSidebar>\n        <FlexView $width=\"65%\">\n          <Styled.SearchHeaderWrapper $heightX={4} $alignItems=\"center\" $justifyContent=\"center\">\n            <SearchableInput\n              value={searchText}\n              onSearchTextChange={handleSearchChange}\n              renderAs=\"secondary\"\n              width=\"99%\"\n              size=\"regular\"\n              label=\"Type topic name...\"\n              searchOnClear\n            />\n          </Styled.SearchHeaderWrapper>\n          <FlexView $gutterX={1}>\n            <Text $renderAs=\"body3\" $color=\"GREY_2\">\n              {puzzles && puzzles.length > 0\n                ? `${puzzles.length} activities found`\n                : searchText\n                  ? 'No activities found'\n                  : null}\n            </Text>\n          </FlexView>\n          <Styled.ActivitiesList $flexDirection=\"row\" $flexWrap $justifyContent=\"space-evenly\">\n            {puzzles && puzzles?.length > 0 ? (\n              puzzles.map(activity => {\n                const { activity_url: reference, name, id } = activity;\n                const thumbnailSrc = reference.split('_')[0]?.concat('_thumbnail.png');\n\n                if (!reference) return null;\n\n                return (\n                  <Clickable onClick={() => setLaunchPuzzlesData(activity)} key={id} label=\"puzzle\">\n                    <FlexView $alignItems=\"center\">\n                      <Styled.ActivityImage title={name} id={id} src={thumbnailSrc} />\n                      {name && <Styled.ActivityTitle>{name}</Styled.ActivityTitle>}\n                    </FlexView>\n                  </Clickable>\n                );\n              })\n            ) : (\n              <Styled.EmptyStateContainer>\n                Use Filters or Search to find activities\n              </Styled.EmptyStateContainer>\n            )}\n          </Styled.ActivitiesList>\n        </FlexView>\n      </FlexView>\n    </Styled.MenuContainer>\n  );\n};\n\nexport default memo(PuzzleMenu);\n"],"names":["PuzzleMenu","toggleMenu","studentGrade","isPuzzlesProcessing","setActivityFilters","puzzlesData","useFetchCueCanvasActivity","filters","puzzles","filterTiles","filterTopics","filterTypes","filterGrades","filterSearch","launchPuzzleData","setLaunchPuzzlesData","useState","activeFilterMenuType","setActiveFilterMenuType","searchText","setSearchText","debouncedSearch","useDebounce","value","handleFiltersChange","handleSearchChange","useCallback","togglePopup","popupType","prev","closeAllPopups","filterChange","filterType","prevFilters","handleReset","clearPuzzleData","Styled.MenuContainer","jsx","Loader","ILLUSTRATIONS","LaunchPuzzle","menuItems","FILTER_KEYS","FilterSelectionMenu","jsxs","PuzzleMenuHeader","FlexView","Styled.FilterSidebar","Filters","Styled.SearchHeaderWrapper","SearchableInput","Text","Styled.ActivitiesList","activity","reference","name","id","thumbnailSrc","_a","Clickable","Styled.ActivityImage","Styled.ActivityTitle","Styled.EmptyStateContainer","PuzzleMenu$1","memo"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAMA,KAAwC,CAAC,EAAE,YAAAC,GAAY,cAAAC,QAAmB;AAC9E,QAAM,EAAE,qBAAAC,GAAqB,oBAAAC,GAAoB,aAAAC,EAAY,IAC3DC,EAA0BJ,CAAY,GAElC,EAAE,SAAAK,GAAS,SAASC,EAAQ,IAAIH,KAAe,CAAA,GAC/C;AAAA,IACJ,gBAAgBI;AAAA,IAChB,iBAAiBC;AAAA,IACjB,gBAAgBC;AAAA,IAChB,QAAQC;AAAA,IACR,QAAQC;AAAA,EAAA,IACNN,KAAW,CAAA,GAET,CAACO,GAAkBC,CAAoB,IAAIC,EAAyC,GACpF,CAACC,GAAsBC,CAAuB,IAAIF;AAAA,IACtD;AAAA,EAAA,GAEI,CAACG,GAAYC,CAAa,IAAIJ,EAASH,KAAgB,EAAE,GAEzDQ,IAAkBC,EAAY,CAACC,MAAkB;AACrD,IAAIA,MAAUV,KACQW,EAAA,EAAE,QAAQD,EAAA,CAAO;AAAA,KAEtC,GAAG,GAEAE,IAAqBC;AAAA,IACzB,CAACH,MAAkB;AACjB,MAAAH,EAAcG,CAAK,GACnBF,EAAgBE,CAAK;AAAA,IACvB;AAAA,IACA,CAACF,CAAe;AAAA,EAAA,GAGZM,IAAcD,EAAY,CAACE,MAAqC;AACpE,IAAAV,EAAwB,CAASW,MAAAA,MAASD,IAAY,OAAOA,CAAU;AAAA,EACzE,GAAG,CAAE,CAAA,GAECE,IAAiBJ,EAAY,MAAM;AACvC,IAAAR,EAAwB,IAAI;AAAA,EAC9B,GAAG,CAAE,CAAA,GAECM,IAAsBE;AAAA,IAC1B,CAACK,MAA8B;AAC7B,YAAMC,IAAa,OAAO,KAAKD,CAAY,EAAE,CAAC,GACxCR,IAAQS,KAAcD,EAAaC,CAAU;AAEnD,MAAA5B,EAAmB,CAAgB6B,OAAA;AAAA,QACjC,GAAGA;AAAA,QACH,CAACD,CAAU,GAAGT;AAAA,MACd,EAAA;AAAA,IACJ;AAAA,IACA,CAACnB,CAAkB;AAAA,EAAA,GAGf8B,IAAcR,EAAY,MAAM;AACpC,IAAAtB,EAAmB,CAAE,CAAA,GACrBgB,EAAc,EAAE;AAAA,EAAA,GACf,CAAChB,CAAkB,CAAC,GAEjB+B,IAAkBT,EAAY,MAAM;AACxC,IAAAX,EAAqB,MAAS;AAAA,EAChC,GAAG,CAAE,CAAA;AAGH,MAAAZ,MACC,CAACM,MAAeA,KAAA,gBAAAA,EAAa,YAAW,OACxC,CAACC,MAAgBA,KAAA,gBAAAA,EAAc,YAAW;AAE3C,6BACG0B,GAAA,EAAqB,iBAAgB,UAAS,aAAY,UACzD,UAAA;AAAA,MAAA,gBAAAC,EAACC,KAAO,KAAKC,EAAc,QAAQ,KAAI,UAAS,OAAM,SAAQ;AAAA,MAAE;AAAA,IAClE,EAAA,CAAA;AAIJ,MAAIzB;AAEA,WAAA,gBAAAuB;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,kBAAA1B;AAAA,QACA,wBAAwBqB;AAAA,QACxB,YAAAlC;AAAA,MAAA;AAAA,IAAA;AAKN,MAAIgB,GAAsB;AACpB,QAAAwB,GACAT;AAEJ,YAAQf,GAAsB;AAAA,MAC5B,KAAK;AACS,QAAAwB,IAAA7B,GACZoB,IAAaU,EAAY;AACzB;AAAA,MACF,KAAK;AACS,QAAAD,IAAA/B,GACZsB,IAAaU,EAAY;AACzB;AAAA,MACF,KAAK;AACS,QAAAD,IAAAhC,GACZuB,IAAaU,EAAY;AACzB;AAAA,MACF;AACS,eAAA;AAAA,IACX;AAEI,WAACD,IAGH,gBAAAJ;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,gBAAAb;AAAA,QACA,WAAAW;AAAA,QACA,iBAAiBjB;AAAA,QACjB,MAAMQ;AAAA,MAAA;AAAA,IAAA,IAPa;AAAA,EAUzB;AAGE,SAAA,gBAAAY,EAACR,GAAA,EACC,UAAA;AAAA,IAAC,gBAAAC,EAAAQ,GAAA,EAAiB,YAAA5C,GAAwB,SAASiC,EAAa,CAAA;AAAA,IAC/D,gBAAAU,EAAAE,GAAA,EAAS,gBAAe,OAAM,aAAY,cACzC,UAAA;AAAA,MAAC,gBAAAT,EAAAU,GAAA,EAAqB,QAAO,OAAM,UAAU,GAC1C,UAAAnC,KAAgBH,KAAeC,KAAgBC,KAC9C,gBAAA0B;AAAA,QAACW;AAAA,QAAA;AAAA,UACC,qBAAAxB;AAAA,UACA,cAAAZ;AAAA,UACA,aAAAH;AAAA,UACA,aAAAE;AAAA,UACA,cAAAD;AAAA,UACA,aAAAiB;AAAA,QAAA;AAAA,MAAA,GAGN;AAAA,MACA,gBAAAiB,EAACE,GAAS,EAAA,QAAO,OACf,UAAA;AAAA,QAAC,gBAAAT,EAAAY,GAAA,EAA2B,UAAU,GAAG,aAAY,UAAS,iBAAgB,UAC5E,UAAA,gBAAAZ;AAAA,UAACa;AAAA,UAAA;AAAA,YACC,OAAO/B;AAAA,YACP,oBAAoBM;AAAA,YACpB,UAAS;AAAA,YACT,OAAM;AAAA,YACN,MAAK;AAAA,YACL,OAAM;AAAA,YACN,eAAa;AAAA,UAAA;AAAA,QAAA,GAEjB;AAAA,QACA,gBAAAY,EAACS,KAAS,UAAU,GAClB,4BAACK,GAAK,EAAA,WAAU,SAAQ,QAAO,UAC5B,eAAW3C,EAAQ,SAAS,IACzB,GAAGA,EAAQ,MAAM,sBACjBW,IACE,wBACA,KAAA,CACR,EACF,CAAA;AAAA,0BACCiC,GAAA,EAAsB,gBAAe,OAAM,WAAS,IAAC,iBAAgB,gBACnE,gBAAW5C,KAAA,gBAAAA,EAAS,UAAS,IAC5BA,EAAQ,IAAI,CAAY6C,MAAA;;AACtB,gBAAM,EAAE,cAAcC,GAAW,MAAAC,GAAM,IAAAC,MAAOH,GACxCI,KAAeC,IAAAJ,EAAU,MAAM,GAAG,EAAE,CAAC,MAAtB,gBAAAI,EAAyB,OAAO;AAEjD,iBAACJ,IAGF,gBAAAjB,EAAAsB,GAAA,EAAU,SAAS,MAAM5C,EAAqBsC,CAAQ,GAAY,OAAM,UACvE,UAAA,gBAAAT,EAACE,GAAS,EAAA,aAAY,UACpB,UAAA;AAAA,YAAA,gBAAAT,EAACuB,GAAA,EAAqB,OAAOL,GAAM,IAAAC,GAAQ,KAAKC,GAAc;AAAA,YAC7DF,KAAQ,gBAAAlB,EAACwB,IAAA,EAAsB,UAAKN,EAAA,CAAA;AAAA,UAAA,GACvC,KAJ6DC,CAK/D,IARqB;AAAA,QAQrB,CAEH,IAED,gBAAAnB,EAACyB,IAAA,EAA2B,qDAE5B,CAAA,GAEJ;AAAA,MAAA,GACF;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ,GAEeC,KAAAC,EAAKhE,EAAU;"}

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

@@ -0,0 +1,96 @@
+import r from "styled-components";
+import e from "../../../ui/layout/flex-view.js";
+import t from "../../../ui/text/text.js";
+const l = r(e)`
+  position: absolute;
+  top: 38px;
+  left: -47px; //32px for icon + 8 sep+ 7 padding
+  width: 650px;
+  height: 438px;
+  border-radius: 6px;
+  background: #292734;
+  box-shadow: 0px 4px 8px ${({ theme: o }) => o.colors.BLACK_T_20};
+`, d = r.img`
+  position: relative;
+  width: 160px;
+  height: 120px;
+  border: 1px solid white;
+  border-radius: 8px;
+  margin: 16px;
+  background-color: black;
+  cursor: pointer;
+`, p = r.div`
+  color: white;
+  cursor: pointer;
+  width: 150px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`, a = r.div`
+  width: 336px;
+  height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${({ theme: o }) => o.colors.GREY_4};
+`, b = r(e)`
+  max-height: 300px;
+  width: 100%;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    border-radius: 6px;
+    background-color: ${({ theme: o }) => o.colors.WHITE};
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    background: ${({ theme: o }) => o.colors.REAL_BLACK_60};
+  }
+`, n = r(e)`
+  background: #292734;
+
+  & > div {
+    width: calc(100% - 32px);
+  }
+`, x = r(e)`
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    border-radius: 6px;
+    background-color: ${({ theme: o }) => o.colors.WHITE};
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    background: ${({ theme: o }) => o.colors.REAL_BLACK_60};
+  }
+`, h = r(e)`
+  border-right: 1px solid ${({ theme: o }) => o.colors.GREY_4};
+  height: 385px;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    border-radius: 6px;
+    background-color: ${({ theme: o }) => o.colors.WHITE};
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    background: ${({ theme: o }) => o.colors.REAL_BLACK_60};
+  }
+`, u = r(t)`
+  width: 130px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+export {
+  b as ActivitiesList,
+  d as ActivityImage,
+  p as ActivityTitle,
+  x as CheckboxWrapper,
+  a as EmptyStateContainer,
+  h as FilterSidebar,
+  l as MenuContainer,
+  n as SearchHeaderWrapper,
+  u as SelectedGrades
+};
+//# sourceMappingURL=puzzles-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"puzzles-styled.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/puzzles-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\nconst MenuContainer = styled(FlexView)`\n  position: absolute;\n  top: 38px;\n  left: -47px; //32px for icon + 8 sep+ 7 padding\n  width: 650px;\n  height: 438px;\n  border-radius: 6px;\n  background: #292734;\n  box-shadow: 0px 4px 8px ${({ theme }) => theme.colors.BLACK_T_20};\n`;\n\nconst ActivityImage = styled.img`\n  position: relative;\n  width: 160px;\n  height: 120px;\n  border: 1px solid white;\n  border-radius: 8px;\n  margin: 16px;\n  background-color: black;\n  cursor: pointer;\n`;\n\nconst ActivityTitle = styled.div`\n  color: white;\n  cursor: pointer;\n  width: 150px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`;\n\nconst EmptyStateContainer = styled.div`\n  width: 336px;\n  height: 300px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: ${({ theme }) => theme.colors.GREY_4};\n`;\n\nconst ActivitiesList = styled(FlexView)`\n  max-height: 300px;\n  width: 100%;\n  overflow-y: auto;\n  &::-webkit-scrollbar {\n    border-radius: 6px;\n    background-color: ${({ theme }) => theme.colors.WHITE};\n  }\n\n  &::-webkit-scrollbar-thumb {\n    border-radius: 6px;\n    background: ${({ theme }) => theme.colors.REAL_BLACK_60};\n  }\n`;\n\nconst SearchHeaderWrapper = styled(FlexView)<{ $noBorder?: boolean }>`\n  background: #292734;\n\n  & > div {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst CheckboxWrapper = styled(FlexView)`\n  overflow-y: auto;\n  &::-webkit-scrollbar {\n    border-radius: 6px;\n    background-color: ${({ theme }) => theme.colors.WHITE};\n  }\n\n  &::-webkit-scrollbar-thumb {\n    border-radius: 6px;\n    background: ${({ theme }) => theme.colors.REAL_BLACK_60};\n  }\n`;\n\nconst FilterSidebar = styled(FlexView)`\n  border-right: 1px solid ${({ theme }) => theme.colors.GREY_4};\n  height: 385px;\n  overflow-y: auto;\n  &::-webkit-scrollbar {\n    border-radius: 6px;\n    background-color: ${({ theme }) => theme.colors.WHITE};\n  }\n\n  &::-webkit-scrollbar-thumb {\n    border-radius: 6px;\n    background: ${({ theme }) => theme.colors.REAL_BLACK_60};\n  }\n`;\n\nconst SelectedGrades = styled(Text)`\n  width: 130px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n`;\n\nexport {\n  MenuContainer,\n  ActivityImage,\n  ActivityTitle,\n  EmptyStateContainer,\n  ActivitiesList,\n  SearchHeaderWrapper,\n  CheckboxWrapper,\n  FilterSidebar,\n  SelectedGrades,\n};\n"],"names":["MenuContainer","styled","FlexView","theme","ActivityImage","ActivityTitle","EmptyStateContainer","ActivitiesList","SearchHeaderWrapper","CheckboxWrapper","FilterSidebar","SelectedGrades","Text"],"mappings":";;;AAKM,MAAAA,IAAgBC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAQT,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA,GAG5DC,IAAgBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWvBI,IAAgBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASvBK,IAAsBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMxB,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,MAAM;AAAA,GAGvCI,IAAiBN,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMd,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKvC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,aAAa;AAAA;AAAA,GAIrDK,IAAsBP,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQrCO,IAAkBR,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,wBAIf,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKvC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,aAAa;AAAA;AAAA,GAIrDO,IAAgBT,EAAOC,CAAQ;AAAA,4BACT,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKtC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKvC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,aAAa;AAAA;AAAA,GAIrDQ,IAAiBV,EAAOW,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -0,0 +1,29 @@
+import { jsxs as m, jsx as i } from "react/jsx-runtime";
+import { memo as a, useRef as p, useCallback as z, useEffect as f } from "react";
+import d from "../../../../assets/line-icons/icons/puzzle-icon.js";
+import C from "../../../ui/buttons/clickable/clickable.js";
+import v from "../../../ui/hooks/use-context-menu-click-handler.js";
+import h from "../../../ui/layout/flex-view.js";
+import { StyledWrapper as k } from "../../cue-cavas-styled.js";
+import { useCueCanvasActions as b } from "../../hooks/use-cue-canvas-actions.js";
+import g from "./puzzle-menu.js";
+const x = (s) => {
+  const { activeSidebar: e, setActiveSidebar: r, grade: u } = s, { activeInstance: o } = b(), c = p(null), { menuVisible: l, onMenuClick: t } = v(
+    c,
+    void 0,
+    !0,
+    void 0
+  ), n = z(() => {
+    e === "tile" && (o == null || o.toggleTiles(!1)), r(e === "puzzle" ? void 0 : "puzzle"), t();
+  }, [e, o, t, r]);
+  return f(() => {
+    (e === "tile" || e === "homework") && l && t();
+  }, [e, l, t]), /* @__PURE__ */ m(h, { $position: "relative", $height: "100%", children: [
+    /* @__PURE__ */ i(C, { onClick: n, label: "puzzles", children: /* @__PURE__ */ i(k, { $active: e === "puzzle", children: /* @__PURE__ */ i(d, {}) }) }),
+    l && /* @__PURE__ */ i(g, { toggleMenu: n, studentGrade: u })
+  ] });
+}, V = a(x);
+export {
+  V as default
+};
+//# sourceMappingURL=puzzles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"puzzles.js","sources":["../../../../../src/features/cue-canvas/sidebar/puzzles/puzzles.tsx"],"sourcesContent":["import type { IPuzzlesContainer } from './puzzles-type';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useRef } from 'react';\n\nimport PuzzleIcon from '../../../../assets/line-icons/icons/puzzle-icon';\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 { StyledWrapper } from '../../cue-cavas-styled';\nimport { useCueCanvasActions } from '../../hooks/use-cue-canvas-actions';\nimport PuzzleMenu from './puzzle-menu';\n\nconst PuzzlesContainer: FC<IPuzzlesContainer> = props => {\n  const { activeSidebar, setActiveSidebar, grade } = props;\n  const { activeInstance: cueCanvas } = useCueCanvasActions();\n  const puzzleMenuRef = useRef(null);\n\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    puzzleMenuRef,\n    undefined,\n    true,\n    undefined,\n  );\n\n  const handleClick = useCallback(() => {\n    if (activeSidebar === 'tile') {\n      cueCanvas?.toggleTiles(false);\n    }\n    setActiveSidebar(activeSidebar === 'puzzle' ? undefined : 'puzzle');\n    onMenuClick();\n  }, [activeSidebar, cueCanvas, onMenuClick, setActiveSidebar]);\n\n  useEffect(() => {\n    if ((activeSidebar === 'tile' || activeSidebar === 'homework') && menuVisible) {\n      onMenuClick();\n    }\n  }, [activeSidebar, menuVisible, onMenuClick]);\n\n  return (\n    <FlexView $position=\"relative\" $height=\"100%\">\n      <Clickable onClick={handleClick} label=\"puzzles\">\n        <StyledWrapper $active={activeSidebar === 'puzzle'}>\n          <PuzzleIcon />\n        </StyledWrapper>\n      </Clickable>\n      {menuVisible && <PuzzleMenu toggleMenu={handleClick} studentGrade={grade} />}\n    </FlexView>\n  );\n};\n\nexport default memo(PuzzlesContainer);\n"],"names":["PuzzlesContainer","props","activeSidebar","setActiveSidebar","grade","cueCanvas","useCueCanvasActions","puzzleMenuRef","useRef","menuVisible","onMenuClick","useContextMenuClickHandler","handleClick","useCallback","useEffect","jsxs","FlexView","jsx","Clickable","StyledWrapper","PuzzleIcon","PuzzleMenu","Puzzles","memo"],"mappings":";;;;;;;;;AAaA,MAAMA,IAA0C,CAASC,MAAA;AACvD,QAAM,EAAE,eAAAC,GAAe,kBAAAC,GAAkB,OAAAC,EAAA,IAAUH,GAC7C,EAAE,gBAAgBI,EAAU,IAAIC,EAAoB,GACpDC,IAAgBC,EAAO,IAAI,GAE3B,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,WAAW,SAAY,QAAQ,GACtDQ;KACX,CAACR,GAAeG,GAAWK,GAAaP,CAAgB,CAAC;AAE5D,SAAAW,EAAU,MAAM;AACd,KAAKZ,MAAkB,UAAUA,MAAkB,eAAeO,KACpDC;EAEb,GAAA,CAACR,GAAeO,GAAaC,CAAW,CAAC,GAGzC,gBAAAK,EAAAC,GAAA,EAAS,WAAU,YAAW,SAAQ,QACrC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAU,EAAA,SAASN,GAAa,OAAM,WACrC,UAAA,gBAAAK,EAACE,GAAc,EAAA,SAASjB,MAAkB,UACxC,UAAC,gBAAAe,EAAAG,GAAA,CAAA,CAAW,EACd,CAAA,GACF;AAAA,IACCX,KAAgB,gBAAAQ,EAAAI,GAAA,EAAW,YAAYT,GAAa,cAAcR,GAAO;AAAA,EAC5E,EAAA,CAAA;AAEJ,GAEekB,IAAAC,EAAKvB,CAAgB;"}