{"version":3,"file":"index-CUrV7AYM.js","sources":["../../../app/javascript/components/KitDocs/index.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport {\n  SandpackProvider,\n  SandpackLayout,\n  SandpackPreview,\n  SandpackCodeEditor,\n} from \"@codesandbox/sandpack-react\"\n\nimport { Button, Caption } from \"playbook-ui\"\nimport entryPoint from \"./entryPoint\"\n\ntype KitDocsType = {\n  source: string,\n  exampleTitle: string,\n}\n\nconst FA_JS = \"https://kit.fontawesome.com/098a1cd4d5.js\"\nconst PB_JS = \"https://unpkg.com/playbook-ui@13.17.0/dist/playbook.css\"\n\nconst KitDocs = ({ source, exampleTitle }: KitDocsType) => {\n  const [\n    editorHeight,\n    setEditorHeight\n  ]: [string | number, React.Dispatch<React.SetStateAction<string | number>>] = useState(0)\n\n  const editorHeightAuto = (editorHeight as unknown) === \"auto\"\n\n  const code = source\n    .replace(\n      /import (\\w+) from ('|\")\\.\\.\\/_(\\w+)('|\")/g,\n      'import { $1 } from \"playbook-ui\"'\n    )\n    .replace(\n      /import \\{ (.*) \\} from ('|\")\\.\\.\\/(.*)('|\")/g,\n      'import { $1 } from \"playbook-ui\"'\n    )\n\n  return (\n    <>\n      <SandpackProvider\n        files={{\n          \"/App.js\": {\n            code: code,\n          },\n          \"/index.js\": {\n            code: entryPoint,\n            hidden: true,\n          },\n        }}\n        theme='dark'\n        template='react'\n        customSetup={{\n          entry: \"/src/index.js\",\n          dependencies: {\n            \"playbook-ui\": \"latest\",\n          },\n        }}\n        options={{\n          externalResources: [\n            FA_JS,\n            PB_JS,\n          ],\n        }}\n      >\n        <SandpackLayout\n          style={{\n            backgroundColor: \"white\",\n            border: \"none\",\n            fontFamily: \"Power Centra\",\n          }}\n        >\n          <div style={{ width: \"100%\" }}>\n            <div className='pb--kit-example'>\n              <Caption paddingBottom='md' text={exampleTitle}></Caption>\n\n              <SandpackPreview\n                showOpenInCodeSandbox={false}\n                showRefreshButton={false}\n                style={{ backgroundColor: \"white\" }}\n              />\n            </div>\n\n            {editorHeight === 0 && (\n              <div\n                style={{\n                  width: \"100%\",\n                  display: \"flex\",\n                  justifyContent: \"right\",\n                }}\n              >\n                <Button\n                  icon='code'\n                  marginRight='xl'\n                  onClick={() => setEditorHeight(\"auto\")}\n                  paddingX='none'\n                  tabIndex={0}\n                  text='Show Code'\n                  variant='link'\n                />\n              </div>\n            )}\n\n            {editorHeightAuto && (\n              <div\n                style={{\n                  width: \"100%\",\n                  display: \"flex\",\n                  justifyContent: \"right\",\n                }}\n              >\n                <Button\n                  icon='times'\n                  marginRight='xl'\n                  onClick={() => setEditorHeight(0)}\n                  paddingX='none'\n                  tabIndex={0}\n                  text='Close Code'\n                  variant='link'\n                />\n              </div>\n            )}\n\n            <SandpackCodeEditor\n              style={{ height: editorHeight, maxHeight: \"300px\" }}\n            />\n          </div>\n        </SandpackLayout>\n      </SandpackProvider>\n    </>\n  )\n}\n\nexport default KitDocs\n"],"names":["FA_JS","PB_JS","KitDocs","source","exampleTitle","editorHeight","setEditorHeight","useState","editorHeightAuto","code","jsx","Fragment","SandpackProvider","entryPoint","SandpackLayout","jsxs","Caption","SandpackPreview","Button","SandpackCodeEditor"],"mappings":"wRAgBA,MAAMA,EAAQ,4CACRC,EAAQ,0DAERC,EAAU,CAAC,CAAE,OAAAC,EAAQ,aAAAC,KAAgC,CACnD,KAAA,CACJC,EACAC,CAAA,EAC4EC,EAAAA,SAAS,CAAC,EAElFC,EAAoBH,IAA6B,OAEjDI,EAAON,EACV,QACC,4CACA,kCAAA,EAED,QACC,+CACA,kCAAA,EAGJ,OAEIO,MAAAC,EAAAA,SAAA,CAAA,SAAAD,EAAA,IAACE,EAAA,CACC,MAAO,CACL,UAAW,CACT,KAAAH,CACF,EACA,YAAa,CACX,KAAMI,EACN,OAAQ,EACV,CACF,EACA,MAAM,OACN,SAAS,QACT,YAAa,CACX,MAAO,gBACP,aAAc,CACZ,cAAe,QACjB,CACF,EACA,QAAS,CACP,kBAAmB,CACjBb,EACAC,CACF,CACF,EAEA,SAAAS,EAAA,IAACI,EAAA,CACC,MAAO,CACL,gBAAiB,QACjB,OAAQ,OACR,WAAY,cACd,EAEA,gBAAC,MAAI,CAAA,MAAO,CAAE,MAAO,MACnB,EAAA,SAAA,CAACC,EAAAA,KAAA,MAAA,CAAI,UAAU,kBACb,SAAA,CAAAL,EAAA,IAACM,EAAQ,CAAA,cAAc,KAAK,KAAMZ,EAAc,EAEhDM,EAAA,IAACO,EAAA,CACC,sBAAuB,GACvB,kBAAmB,GACnB,MAAO,CAAE,gBAAiB,OAAQ,CAAA,CACpC,CAAA,EACF,EAECZ,IAAiB,GAChBK,EAAA,IAAC,MAAA,CACC,MAAO,CACL,MAAO,OACP,QAAS,OACT,eAAgB,OAClB,EAEA,SAAAA,EAAA,IAACQ,EAAA,CACC,KAAK,OACL,YAAY,KACZ,QAAS,IAAMZ,EAAgB,MAAM,EACrC,SAAS,OACT,SAAU,EACV,KAAK,YACL,QAAQ,MAAA,CACV,CAAA,CACF,EAGDE,GACCE,EAAA,IAAC,MAAA,CACC,MAAO,CACL,MAAO,OACP,QAAS,OACT,eAAgB,OAClB,EAEA,SAAAA,EAAA,IAACQ,EAAA,CACC,KAAK,QACL,YAAY,KACZ,QAAS,IAAMZ,EAAgB,CAAC,EAChC,SAAS,OACT,SAAU,EACV,KAAK,aACL,QAAQ,MAAA,CACV,CAAA,CACF,EAGFI,EAAA,IAACS,EAAA,CACC,MAAO,CAAE,OAAQd,EAAc,UAAW,OAAQ,CAAA,CACpD,CAAA,EACF,CAAA,CACF,CAAA,CAEJ,CAAA,CAAA,CAEJ"}