UNPKG

@gdquest/gd-school-mdx-components

Version:

Components specially made to work with GDSchool MDX lesson files.

134 lines (129 loc) 18.2 kB
"use strict";var Ze=Object.create;var H=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var _e=Object.getOwnPropertyNames;var Be=Object.getPrototypeOf,Ye=Object.prototype.hasOwnProperty;var Je=(e,t)=>{for(var n in t)H(e,n,{get:t[n],enumerable:!0})},ve=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of _e(t))!Ye.call(e,o)&&o!==n&&H(e,o,{get:()=>t[o],enumerable:!(r=ze(t,o))||r.enumerable});return e};var f=(e,t,n)=>(n=e!=null?Ze(Be(e)):{},ve(t||!e||!e.__esModule?H(n,"default",{value:e,enumerable:!0}):n,e)),Qe=e=>ve(H({},"__esModule",{value:!0}),e);var nt={};Je(nt,{Callout:()=>be,Description:()=>ge,Explanation:()=>he,GdExercise:()=>we,GdLearnToCode:()=>Ie,GdSnippet:()=>Re,Glossary:()=>We,Goal:()=>Te,Hints:()=>ke,Item:()=>Le,Option:()=>Ce,Question:()=>Ve,Small:()=>Ge,Title:()=>Pe,WithPoints:()=>je});module.exports=Qe(nt);var q=require("react"),E=f(require("prop-types"),1);function ye(e){var t,n,r="";if(typeof e=="string"||typeof e=="number")r+=e;else if(typeof e=="object")if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(n=ye(e[t]))&&(r&&(r+=" "),r+=n);else for(t in e)e[t]&&(r&&(r+=" "),r+=t);return r}function G(){for(var e,t,n=0,r="";n<arguments.length;)(e=arguments[n++])&&(t=ye(e))&&(r&&(r+=" "),r+=t);return r}var A=require("@emotion/react"),C=require("@fortawesome/react-fontawesome");var x=require("@emotion/react/jsx-runtime");function be({type:e,hidden:t,title:n,description:r}){let[o,l]=(0,q.useState)({isReady:!1});return(0,q.useEffect)(()=>{let s={...o};s.isReady=!0,l(s)},[]),(0,x.jsxs)("div",{className:G(["gd-school-mdx-component-callout",{"gd-school-mdx-component-callout--note":e==="note","gd-school-mdx-component-callout--info":e==="info","gd-school-mdx-component-callout--error":e==="error","gd-school-mdx-component-callout--question":e==="question","gd-school-mdx-component-callout--see-also":e==="see-also"}]),css:A.css` & { display: grid; grid-template-areas: "icon title" "icon description"; grid-template-columns: 50px minmax(0, 1fr); margin: var(--size-8) 0; padding: var(--size-4); border-radius: var(--radius-lg); background: linear-gradient( 0.123turn, var(--callout-background-color-start), var(--callout-background-color-end) ); gap: var(--size-4); color: var(--callout-content-color); box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05); } &[hidden] { display: none; } `,hidden:t===!0,children:[(0,x.jsx)("div",{css:A.css` & { grid-area: icon; display: flex; align-items: start; justify-content: center; color: var(--callout-background-color); } `,children:o.isReady&&(e==="info"?(0,x.jsx)(C.FontAwesomeIcon,{icon:["fas","lightbulb"],size:"2x"}):e==="question"?(0,x.jsx)(C.FontAwesomeIcon,{icon:["fas","question"],size:"2x"}):e==="error"?(0,x.jsx)(C.FontAwesomeIcon,{icon:["fas","bug"],size:"2x"}):e==="see-also"?(0,x.jsx)(C.FontAwesomeIcon,{icon:["fas","eye"],size:"2x"}):(0,x.jsx)(C.FontAwesomeIcon,{icon:["fas","note-sticky"],size:"2x"}))}),(0,x.jsx)("p",{css:A.css` && { grid-area: title; display: flex; align-items: center; justify-content: start; font-weight: bold; font-size: var(--size-4); margin: 0; } && code { display: inline-block; } `,children:(0,x.jsx)("span",{children:n??"NO TITLE GIVEN"})}),r!==""&&(0,x.jsx)("div",{css:A.css` & { grid-area: description; } & p:first-of-type { margin-top: 0; } `,children:r})]})}be.propTypes={children:E.default.oneOfType([E.default.node,E.default.arrayOf(E.default.node)]),type:E.default.string,hidden:E.default.bool,title:E.default.node,description:E.default.node};var P=f(require("prop-types"),1),$=require("@emotion/react/jsx-runtime");function ge({children:e}){return(0,$.jsx)($.Fragment,{children:e})}ge.propTypes={children:P.default.oneOfType([P.default.node,P.default.arrayOf(P.default.node)])};var j=f(require("prop-types"),1),K=require("@emotion/react/jsx-runtime");function he({children:e}){return(0,K.jsx)(K.Fragment,{children:e})}he.propTypes={children:j.default.oneOfType([j.default.node,j.default.arrayOf(j.default.node)])};var Z=f(require("prop-types"),1),ee=require("@emotion/react/jsx-runtime");function we({children:e}){return(0,ee.jsx)(ee.Fragment,{children:e})}we.propTypes={children:Z.default.oneOfType([Z.default.node,Z.default.arrayOf(Z.default.node)])};var O=f(require("prop-types"),1),xe=require("@emotion/react"),b=require("@emotion/react/jsx-runtime");function Ie({children:e,scene:t,type:n,title:r,description:o,goal:l,hints:s}){return(0,b.jsxs)("section",{css:xe.css` background-color: yellow; padding: 1em; `,children:[(0,b.jsx)("p",{children:r}),(0,b.jsx)("div",{children:o}),l!=null&&(0,b.jsx)("div",{children:l}),(0,b.jsx)("div",{children:e}),(0,b.jsxs)("div",{children:["TODO: show the gdExercise here with the scene ",t," and the type"," ",n]}),s!=null&&(0,b.jsx)("div",{children:s.map(p=>(0,b.jsx)(b.Fragment,{children:(0,b.jsx)("div",{children:p})}))})]})}Ie.propTypes={children:O.default.node,scene:O.default.string.isRequired,type:O.default.string,title:O.default.node.isRequired,description:O.default.node.isRequired,goal:O.default.node,hints:O.default.arrayOf(O.default.node)};var oe=require("react"),ne=f(require("prop-types"),1),Ne=require("@emotion/react");var W=require("react"),Ee={exports:{}},te={};var Se;function Me(){if(Se)return te;Se=1;var e=Symbol.for("react.fragment");return te.Fragment=e,te.jsxDEV=void 0,te}Ee.exports=Me();var re=Ee.exports;globalThis&&globalThis.__awaiter;globalThis&&globalThis.__awaiter;function De(e,{threshold:t=0,root:n=null,rootMargin:r="0%",freezeOnceVisible:o=!1}){let[l,s]=(0,W.useState)(),p=l?.isIntersecting&&o,T=([h])=>{s(h)};return(0,W.useEffect)(()=>{let h=e?.current;if(!window.IntersectionObserver||p||!h)return;let S={threshold:t,root:n,rootMargin:r},w=new IntersectionObserver(T,S);return w.observe(h),()=>w.disconnect()},[e?.current,JSON.stringify(t),n,r,p]),l}var Ue="/loader.html";function Oe(e){let{loader:t=new URL(Ue,window.location.origin).href,dataPath:n,mainScene:r,openFiles:o=[],height:l,hideCode:s=!1,hideConsole:p=!1,hidePlayer:T=!1,hideTest:h=!1,snippet:S=""}=e,w=(0,W.useRef)(null),i=(0,W.useRef)(null),R=De(i,{}),v=R?.isIntersecting===!0,a=new URL(t);a.searchParams.append("dataPath",n),a.searchParams.append("mainScene",r);for(let y of o){let u=()=>y.focus===!0?"focus":"nofocus";a.searchParams.append("open",[y.path,u(),y.override].filter(d=>d!=null).join(":"))}return s&&a.searchParams.append("hide","code"),p&&a.searchParams.append("hide","console"),T&&a.searchParams.append("hide","player"),h&&a.searchParams.append("hide","test"),S.length>0&&a.searchParams.append("snippet",S),(0,W.useEffect)(()=>{var y;w.current!=null&&((y=w.current.contentWindow)==null||y.postMessage({from:"gd-exercise",type:"low-processor-usage-mode",value:!v}))},[v,w.current]),re.jsxDEV(re.Fragment,{children:re.jsxDEV("div",{className:"gdexercise-wrapper",ref:i,children:re.jsxDEV("iframe",{allow:"fullscreen",src:a.href,style:{height:l},ref:w},void 0,!1,{fileName:"/home/adamscott/dev/builds/gd-web/packages/gd-exercise-wrapper/src/components/GdExerciseWrapper.tsx",lineNumber:97,columnNumber:9},this)},void 0,!1,{fileName:"/home/adamscott/dev/builds/gd-web/packages/gd-exercise-wrapper/src/components/GdExerciseWrapper.tsx",lineNumber:96,columnNumber:7},this)},void 0,!1,{fileName:"/home/adamscott/dev/builds/gd-web/packages/gd-exercise-wrapper/src/components/GdExerciseWrapper.tsx",lineNumber:95,columnNumber:5},this)}var k=require("@emotion/react/jsx-runtime");function Re({title:e,code:t,hidePlayer:n=!0}){let[r,o]=(0,oe.useState)({hasSharedArrayBufferSupport:!1});return(0,oe.useEffect)(()=>{let l={...r};l.hasSharedArrayBufferSupport=typeof window.SharedArrayBuffer<"u",o(l)},[]),(0,k.jsxs)("div",{css:Ne.css` & { margin: var(--size-8) 0; } `,children:[e!=null&&(0,k.jsx)("h3",{children:e}),r.hasSharedArrayBufferSupport?(0,k.jsx)(Oe,{loader:(()=>new URL("/gdexercise/loader.html",window.location.href).href)(),dataPath:(()=>new URL("/gdexercise/projects/snippet.zip",window.location.href).href)(),mainScene:"main.tscn",height:"500px",hidePlayer:n??!1,snippet:t}):(0,k.jsx)("pre",{children:(0,k.jsx)("code",{children:t})})]})}Re.propTypes={title:ne.default.string,code:ne.default.string.isRequired,hidePlayer:ne.default.bool};var z=f(require("prop-types"),1),se=require("@emotion/react/jsx-runtime");function We({children:e}){return(0,se.jsx)(se.Fragment,{children:e})}We.propTypes={children:z.default.oneOfType([z.default.node,z.default.arrayOf(z.default.node)])};var _=f(require("prop-types"),1),ie=require("@emotion/react/jsx-runtime");function Te({children:e}){return(0,ie.jsx)(ie.Fragment,{children:e})}Te.propTypes={children:_.default.oneOfType([_.default.node,_.default.arrayOf(_.default.node)])};var B=f(require("prop-types"),1),ae=require("@emotion/react/jsx-runtime");function ke({children:e}){return(0,ae.jsx)(ae.Fragment,{children:e})}ke.propTypes={children:B.default.oneOfType([B.default.node,B.default.arrayOf(B.default.node)])};var Y=f(require("prop-types"),1),ce=require("@emotion/react/jsx-runtime");function Le({children:e}){return(0,ce.jsx)(ce.Fragment,{children:e})}Le.propTypes={children:Y.default.oneOfType([Y.default.node,Y.default.arrayOf(Y.default.node)])};var X=f(require("prop-types"),1),le=require("@emotion/react/jsx-runtime");function Ce({children:e,correct:t=!1}){return(0,le.jsx)(le.Fragment,{children:e})}Ce.propTypes={children:X.default.oneOfType([X.default.node,X.default.arrayOf(X.default.node)]),correct:X.default.bool};var F=require("react"),m=f(require("prop-types"),1);var I=require("@emotion/react");var N=require("react");var ue=typeof window<"u",He=e=>e!==null&&typeof e=="object"&&Object.prototype.hasOwnProperty.call(e,"current");var qe=e=>typeof e=="string",$e=()=>{};function Ke(e){return He(e)?e.current:e}var et=ue?window:void 0,Rt=ue?window.document:void 0,Wt=ue?window.navigator:void 0;function Xe(...e){let t=et,n,r,o;qe(e[0])?[n,r,o]=e:[t,n,r,o]=e;let l=(0,N.useRef)(r),s=(0,N.useRef)($e);return(0,N.useEffect)(()=>{l.current=r},[r]),(0,N.useEffect)(()=>{let p=Ke(t);if(!(!ue||!p))return p.addEventListener(n,l.current,o),s.current=()=>{p.removeEventListener(n,l.current,o)},s.current},[n,t,o]),s.current}var de=f(require("prop-types"),1);var J=require("@emotion/react/jsx-runtime");function fe({children:e,onClick:t,disabled:n}){return(0,J.jsx)(J.Fragment,{children:(0,J.jsx)("button",{className:"gd-school-mdx-component-button",onClick:r=>t?.(r),disabled:n??!1,children:e})})}fe.propTypes={children:de.default.node,onClick:de.default.func,disabled:de.default.bool};var c=require("@emotion/react/jsx-runtime"),Fe=0;function tt(){let e=Fe;return Fe+=1,e}function Ve({hidden:e,randomize:t,multipleChoice:n,skip:r,onSubmit:o,title:l,explanation:s,options:p,onRightAnswer:T,onWrongAnswer:h}){t=t??!1,r=r??!1;let S=(0,F.useRef)(null),w=`gd-school-mdx-component-question-options-${tt().toString()}`,[i,R]=(0,F.useState)({title:l??"NO TITLE GIVEN",explanation:s??"NO EXPLANATION GIVEN",options:(p??[]).map((u,d)=>({index:u.index??d,label:u.label,correct:u.correct??!1})),correctAnswer:null,submitted:!1,skip:r??!1,isReady:!1});Xe(S,"questionupdate",()=>{}),(0,F.useEffect)(()=>{if(S.current==null)return;let u={...i};t===!0&&(u.options=u.options.map(d=>({option:d,sort:Math.random()})).sort((d,L)=>d.sort-L.sort).map(({option:d})=>d)),u.isReady=!0,R(u)},[]);let v=u=>{let d={...i};if(d.submitted)return;let L=d.options?.find(U=>U?.correct===!0);L!=null&&(n===!0?a(d):d.correctAnswer=u.target.value===L.index.toString(),R(d))},a=u=>{let d=!1,L=document.getElementsByName(w);for(let U of Array.from(L)){for(let me of u.options)if(me.index?.toString()===U.value&&U.checked&&me.correct===!0){d=!0;break}if(d)break}u.correctAnswer=!d},y=()=>{S.current!=null&&(R({...i,submitted:!0}),o?.(i.correctAnswer),i.correctAnswer===!0?T?.():i.correctAnswer===!1&&h?.())};return(0,c.jsx)(c.Fragment,{children:(0,c.jsxs)("div",{className:G("gd-school-mdx-component-question"),css:I.css` & { border: 1px solid var(--border); border-radius: var(--radius); margin: var(--size-16) 0; padding: var(--size-4); } &[hidden] { display: none; } `,ref:S,hidden:e??!1,children:[(0,c.jsx)("p",{css:I.css` && { font-size: var(--font-size-2); line-height: var(--font-lineheight-4); margin-top: 0; } `,children:(0,c.jsx)("span",{children:"Question"})}),(0,c.jsx)("p",{css:I.css``,children:i.title}),(0,c.jsxs)("fieldset",{css:I.css` display: grid; grid-template-areas: "entries" "submit"; grid-template-columns: auto; `,onChangeCapture:v,children:[(0,c.jsx)("div",{css:I.css` grid-area: entries; `,children:i.isReady&&i.options.map(u=>u==null?(0,c.jsx)(c.Fragment,{}):(0,c.jsxs)("label",{css:I.css` display: grid; grid-template-areas: "input content"; grid-template-columns: 50px 1fr; `,children:[(0,c.jsx)("div",{css:I.css` grid-area: "input"; `,children:(0,c.jsx)("input",{type:n===!0?"checkbox":"radio",name:w,value:u.index,disabled:i.submitted||i.skip})}),(0,c.jsx)("span",{css:I.css` grid-area: content; `,children:(0,c.jsx)("span",{children:u.label})})]},u.index))}),(0,c.jsx)("div",{css:I.css` grid-area: submit; display: flex; align-items: center; justify-content: center; margin-top: var(--size-4); `,children:!i.submitted&&!i.skip&&i.isReady&&(0,c.jsx)(fe,{onClick:y,disabled:i.correctAnswer===null,children:(0,c.jsx)("span",{children:"Submit"})})})]}),(i.submitted||i.skip)&&(0,c.jsxs)("div",{className:G(["gd-school-mdx-component-question-answer",{"gd-school-mdx-component-question-answer--correct":i.correctAnswer===!0,"gd-school-mdx-component-question-answer--incorrect":i.correctAnswer===!1}]),css:I.css` border-radius: var(--radius-lg); padding: var(--size-4); margin-top: var(--size-2); background: linear-gradient( 0.123turn, var(--question-answer-background-color-start), var(--question-answer-background-color-end) ); `,children:[!i.skip&&(0,c.jsx)("p",{css:I.css` && { margin: 0; font-weight: bold; } `,children:i.correctAnswer===!0?"Correct":"Incorrect"}),(0,c.jsx)("p",{children:i.explanation})]})]})})}Ve.propTypes={children:m.default.node,randomize:m.default.bool,multipleChoice:m.default.bool,skip:m.default.bool,hidden:m.default.bool,title:m.default.node,options:m.default.arrayOf(m.default.shape({index:m.default.number,label:m.default.node.isRequired,correct:m.default.bool})),explanation:m.default.node,onSubmit:m.default.func,onRightAnswer:m.default.func,onWrongAnswer:m.default.func};var Q=f(require("prop-types"),1),Ae=require("@emotion/react/jsx-runtime");function Ge({children:e}){return(0,Ae.jsx)("small",{children:e})}Ge.propTypes={children:Q.default.oneOfType([Q.default.node,Q.default.arrayOf(Q.default.node)])};var M=f(require("prop-types"),1),pe=require("@emotion/react/jsx-runtime");function Pe({children:e}){return(0,pe.jsx)(pe.Fragment,{children:e})}Pe.propTypes={children:M.default.oneOfType([M.default.node,M.default.arrayOf(M.default.node)])};var g=require("react"),V=f(require("prop-types"),1),D=require("@emotion/react/jsx-runtime"),rt=1;function je({children:e,id:t,points:n,hidden:r,usePoints:o}){if(t==null||t.length===0)throw new Error("WithPoints id is null or empty");if(t.match(/^\s$/g)!=null)throw new Error("WithPoints id has whitespace in it");let l=n??rt,s=(0,g.useRef)(null),[p,T]=(0,g.useState)({submitted:!1}),h=null;o!=null&&({registerAnswer:h}=o()),(0,g.useEffect)(()=>{if(s.current==null)return;let v=!1,a=s.current.previousElementSibling;for(;a!=null;){if(a instanceof HTMLElement&&a.dataset.exercise!=null){v=!0;break}a=a.previousElementSibling}if(!v){let y=s.current.nextElementSibling;for(;y!=null;)y instanceof HTMLElement&&(y.hidden=!0),y=y.nextElementSibling}},[]),(0,g.useEffect)(()=>{s.current!=null&&(s.current.dataset.exercise="",p.submitted?s.current.dataset.exerciseSubmitted="":delete s.current.dataset.exerciseSubmitted)},[p,s.current]);let S=()=>{let v={...p};if(v.submitted=!0,T(v),s.current==null)return;let a=s.current.nextElementSibling;for(;a!=null;){if(a instanceof HTMLElement&&(a.hidden=!1,a.dataset.exercise!=null)){a.dispatchEvent(new CustomEvent("exerciseupdate"));break}a=a.nextElementSibling}},w=()=>{h?.(t,l)},i=()=>{h?.(t,0)},R=g.Children.map(e,v=>(0,g.isValidElement)(v)?(0,g.cloneElement)(v,{onSubmit:S,onRightAnswer:w,onWrongAnswer:i}):v);return(0,D.jsx)("div",{ref:s,"data-exercise-id":t,hidden:r??!1,children:(0,D.jsx)(D.Fragment,{children:R})})}je.propTypes={children:V.default.node.isRequired,id:V.default.string.isRequired,points:V.default.number,hidden:V.default.bool,usePoints:V.default.func}; /** * @license React * react-jsx-dev-runtime.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ /** * @license React * react-jsx-dev-runtime.development.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ //# sourceMappingURL=index.min.cjs.map