theme-ui#Link TypeScript Examples

PapercupsBranding = () => {
  return (
    <Flex m={2} sx={{justifyContent: 'center', alignItems: 'center'}}>
      <Link
        href="https://papercups.io?utm_source=papercups&utm_medium=chat&utm_campaign=chat-widget-link"
        target="_blank"
        rel="noopener noreferrer"
        sx={{
          color: 'gray',
          opacity: 0.8,
          transition: '0.2s',
          '&:hover': {opacity: 1},
        }}
      >
        Powered by Papercups
      </Link>
    </Flex>
  );
}

StorybookSection: React.FC<{
  linkToStorybookDocs: string;
}> = ({ linkToStorybookDocs }) => (
  <Section heading="Already using Storybook">
    Want to still use Storybook for your project? You can check the{" "}
    <Link target={"_blank"} href={linkToStorybookDocs}>
      documentation
    </Link>{" "}
    for more info to update your configuration.
  </Section>
)

UpdateNuxtConfig: React.FunctionComponent<DefaultStepCompProps> = (
  props
) => {
  return (
    <StepSection
      title="Update your Nuxt config"
      status={props.setupStatus.iframe}
      {...props}
    >
      <Flex sx={{ flexDirection: "column" }}>
        {props.setupStatus.iframe === "ko" && (
          <WarningSection
            title={"We can’t connect to the simulator page"}
            sx={{ mb: 3 }}
          >
            We cannot connect to {props.simulatorUrl || "simulator URL"}. <br />{" "}
            Struggling to fix this issue? See our{" "}
            <Link target={"_blank"} href={props.linkToTroubleshootingDocs}>
              troubleshooting page
            </Link>
            .
          </WarningSection>
        )}
        <Text variant={"xs"} sx={{ mb: 3 }}>
          In your <Text variant={"pre"}>nuxt.config.js</Text> file, you need to
          add at the beginning the following line:
        </Text>
        <CodeBlock>import smConfig from "./sm.json"</CodeBlock>
        <Text variant={"xs"} sx={{ my: 3 }}>
          Inside of the export statement, add these two properties
        </Text>
        <CodeBlock>{NuxtConfigInstructions}</CodeBlock>
      </Flex>
    </StepSection>
  );
}

UpdateNuxtConfig: React.FunctionComponent<DefaultStepCompProps> = (
  props
) => {
  return (
    <StepSection
      title="Update your Nuxt config"
      status={props.setupStatus.iframe}
      {...props}
    >
      <Flex sx={{ flexDirection: "column" }}>
        {props.setupStatus.iframe === "ko" && (
          <WarningSection
            title={"We can’t connect to the simulator page"}
            sx={{ mb: 3 }}
          >
            We cannot connect to {props.simulatorUrl || "simulator URL"}. <br />{" "}
            Struggling to fix this issue? See our{" "}
            <Link target={"_blank"} href={props.linkToTroubleshootingDocs}>
              troubleshooting page
            </Link>
            .
          </WarningSection>
        )}
        <Text variant={"xs"} sx={{ mb: 3 }}>
          In your <Text variant={"pre"}>nuxt.config.js</Text> file, you need to
          add at the beginning the following line:
        </Text>
        <CodeBlock>import smConfig from "./sm.json"</CodeBlock>
        <Text variant={"xs"} sx={{ my: 3 }}>
          Inside of the export statement, add these two properties
        </Text>
        <CodeBlock>{NuxtConfigInstructions}</CodeBlock>
      </Flex>
    </StepSection>
  );
}

Error = () => {
  return (
    <Flex>
      <Image sx={{ width: 100, height: 100 }} src="/icons/icon-512x512.png" />
      <Box mt={4} ml={4}>
        <Heading as="h2">Metamask not installed</Heading>
        <Text mt={2}>
          Go to{' '}
          <Link href="https://metamask.io" target="_blank">
            https://metamask.io
          </Link>{' '}
          to install it.
        </Text>
      </Box>
    </Flex>
  )
}

UnreadMessages = ({
  messages,
  newMessagesNotificationText,
  isMobile,
  onOpen,
}: Props) => {
  if (messages.length === 0) {
    return null;
  }

  // If the total number of characters in the previewed messages is more
  // than one hundred (100), only show the first message (rather than two)
  const chars = messages.reduce((acc, msg) => acc + msg.body.length, 0);
  const displayed = chars > 100 ? messages.slice(0, 1) : messages;

  return (
    <Flex
      className={isMobile ? 'Mobile' : ''}
      sx={{
        bg: 'transparent',
        flexDirection: 'column',
        justifyContent: 'flex-end',
        height: '100%',
        width: '100%',
        flex: 1,
      }}
    >
      {displayed.map((msg, key) => {
        return (
          <motion.div
            key={key}
            initial={{opacity: 0, x: -2}}
            animate={{opacity: 1, x: 0}}
            transition={{duration: 0.2, ease: 'easeIn'}}
          >
            <PopupChatMessage key={key} message={msg} />
          </motion.div>
        );
      })}

      <Flex mt={2} pr={2} sx={{justifyContent: 'flex-end'}}>
        <Link onClick={onOpen}>{newMessagesNotificationText}</Link>
      </Flex>
    </Flex>
  );
}

CreatePage =
  ({
    title = "Create a page for Slice Simulator",
    code,
    instructions,
  }: CreatePageProps): React.FunctionComponent<DefaultStepCompProps> =>
  ({
    isOpen,
    onOpenStep,
    stepNumber,
    setupStatus,
    simulatorUrl,
    linkToTroubleshootingDocs,
  }) => {
    return (
      <StepSection
        stepNumber={stepNumber}
        title={title}
        isOpen={isOpen}
        onOpenStep={onOpenStep}
        status={setupStatus.iframe}
      >
        <Flex sx={{ flexDirection: "column" }}>
          {setupStatus.iframe === "ko" && (
            <WarningSection
              title={"We can’t connect to the simulator page"}
              sx={{ mb: 3 }}
            >
              We cannot connect to {simulatorUrl || "simulator URL"}. <br />{" "}
              Struggling to fix this issue? See our{" "}
              <Link target={"_blank"} href={linkToTroubleshootingDocs}>
                troubleshooting page
              </Link>
              .
            </WarningSection>
          )}
          <Text variant={"xs"} sx={{ mb: 3 }}>
            {instructions}
          </Text>
          <CodeBlock>{code}</CodeBlock>
        </Flex>
      </StepSection>
    );
  }

Header = (props: ComponentProps<'header'>) => {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <header
      sx={{
        display: 'flex',
        variant: 'styles.header',
        px: [3, 3, 3],
        pb: 2,
        fontSize: '14px',
        alignItems: 'center',
        color: 'text',
        width: t => t.sizes.container + 2 * t.space['3'],
        maxWidth: '100%',
        a: {
          color: 'text',
          mr: 3,
          ':first-of-type': {
            mr: [3, 5],
          },
          borderBottom: 'none',
        },
      }}
      {...props}
    >
      <HamburgerMenu
        isOpen={menuOpen}
        menuClicked={() => setMenuOpen(prev => !prev)}
        width={18}
        height={12}
        strokeWidth={2}
        rotate={0}
        borderRadius={5}
        animationDuration={0.3}
        color="currentColor"
        sx={{
          display: ['unset', 'none'],
          zIndex: '200',
          ...(menuOpen && ({ position: 'fixed !important' } as any)),
        }}
      />
      <div
        sx={{
          display: ['flex', 'none'],
          transform: menuOpen ? 'translateX(0)' : 'translateX(-120%)',
          transition: 'transform 300ms ease',
          width: '50%',
          height: '100%',
          zIndex: '100',
          bg: 'background',
          position: 'fixed',
          top: '0',
          flexDirection: 'column',
          marginLeft: '-16px',
          paddingLeft: '16px',
          paddingTop: '60px',
          boxShadow: menuOpen
            ? theme => `0 6px 50px ${theme.colors.shadow}`
            : 'none',
        }}
      >
        <GatsbyLink
          onClick={() => setMenuOpen(false)}
          to="/"
          sx={{
            pt: 2,
            borderRadius: '4px',
          }}
        >
          Home
        </GatsbyLink>
        <GatsbyLink
          onClick={() => setMenuOpen(false)}
          to="/#getting-started"
          sx={{
            fontWeight: 'bold',
            py: 2,
            borderRadius: '4px',
          }}
        >
          Getting Started
        </GatsbyLink>
        <GatsbyLink
          onClick={() => setMenuOpen(false)}
          sx={{ variant: 'links.navLink' }}
          to="/api"
        >
          API Reference
        </GatsbyLink>
        <GatsbyLink
          onClick={() => setMenuOpen(false)}
          sx={{ pt: 2, variant: 'links.navLink' }}
          to="/recipes"
        >
          Recipes
        </GatsbyLink>
      </div>
      <GatsbyLink
        to="/"
        sx={{ display: ['none', 'unset'], variant: 'links.navLink' }}
      >
        useComments
      </GatsbyLink>
      <GatsbyLink
        to="/#getting-started"
        sx={{
          variant: 'links.navLink',
          fontWeight: 'bold',
          bg: 'muted',
          px: 2,
          py: 1,
          borderRadius: '4px',
          display: ['none', 'unset'],
        }}
      >
        Getting Started
      </GatsbyLink>
      <GatsbyLink
        to="/api"
        sx={{ display: ['none', 'unset'], variant: 'links.navLink' }}
      >
        API Reference
      </GatsbyLink>
      <GatsbyLink
        to="/recipes"
        sx={{ display: ['none', 'unset'], variant: 'links.navLink' }}
      >
        Recipes
      </GatsbyLink>
      <div sx={{ mx: 'auto' }} />
      <Link
        href="https://github.com/beerose/use-comments"
        sx={{ display: 'flex', variant: 'links.navLink' }}
      >
        <GitHub />
      </Link>
      <ToggleMode />
    </header>
  );
}

function IslandLayoutSelector() {
  const [layoutType, setLayoutType] = useState<LayoutType>(LayoutType.none);
  const [layout, setLayout] = useState<number>(-1);
  const [help, setHelp] = useState<boolean>(false);

  useEffect(() => {
    if (layout != -1)
    {
      const layoutData = getLayouts(layoutType)[layout];
      loadMapFromJSONString(layoutData.data);
      CloseMapSelectModal();
    }
  }, [layoutType, layout]);

  function getLayouts(type: LayoutType) {
    switch (type) {
      case LayoutType.west:
        return Layouts.west;
      case LayoutType.south:
        return Layouts.south;
      case LayoutType.east:
        return Layouts.east;
      case LayoutType.blank:
        return Layouts.blank;
    }
    return [];
  }

  if (help) {
    return (
      <Flex p={[0, 3]} sx={{flexDirection: 'column', alignItems: 'center', position: 'relative'}}>
        <Box sx={{position: 'absolute', left: 0, top: [1, 30]}}>
          <Button variant='icon' onClick={() => setHelp(false)}>
            <Image sx={{width: 'auto'}} src='static/img/back.png' />
          </Button>
        </Box>
        <Image sx={{width: 100, margin: 'auto'}} src={'static/img/blathers.png'}/>
        <Heading m={3} sx={{px: layoutType ? 4 : 0, textAlign: 'center'}}>{'Please help contribute!'}</Heading>
        <Text my={2}>{'Sorry, we don\'t have all the map templates yet (there are almost 100 river layouts in the game!). Each option you see here has been hand-made by a member of the community.'}</Text>
        <Text my={2}>{'You can use the \'Upload Screenshot\' tool to trace an image of your island. When you\'re done please consider contributing your island map in either the '}<Link href={'https://github.com/eugeneration/HappyIslandDesigner/issues/59'}>Github</Link>{' or '}<Link href={'https://discord.gg/EtaqD5H'}>Discord</Link>!</Text>
        <Text my={2}>{'Please note that your island may have different shaped rock formations, beaches, and building positions than another island with the same river layout.'}</Text>
      </Flex>
    )
  }

  let content;
  if (layoutType != LayoutType.none) {
    var layouts: Array<Layout> = getLayouts(layoutType);
    content = (
      <Grid
        gap={0}
        columns={[2, 3, 4]}
        sx={{justifyItems: 'center' }}>
        {
          layouts.map((layout, index) => (
            <Card
              key={index}
              onClick={() => {
                confirmDestructiveAction(
                  'Clear your map? You will lose all unsaved changes.',
                  () => {
                    setLayout(index);
                  });
              }}>
              <Image variant='card' src={`static/img/layouts/${layoutType}-${layout.name}.png`}/>
            </Card>
          )).concat(
            <Card key={'help'} onClick={()=>{setHelp(true)}}>
              <Image sx={{width: 24}} src={'static/img/menu-help.png'} />
              <Text sx={{fontFamily: 'body'}}>{'Why isn\'t my map here?'}</Text>
            </Card>
          )
        }
      </Grid>
    );
  }
  else {
    content = (
      <Flex sx={{flexDirection: ['column', 'row'], alignItems: 'center'}}>
        <Card onClick={() => setLayoutType(LayoutType.west)}><Image variant='card' src={'static/img/island-type-west.png'}/></Card>
        <Card onClick={() => setLayoutType(LayoutType.south)}><Image variant='card' src={'static/img/island-type-south.png'}/></Card>
        <Card onClick={() => setLayoutType(LayoutType.east)}><Image variant='card' src={'static/img/island-type-east.png'}/></Card>
        <Card onClick={() => {
          setLayoutType(LayoutType.blank);
          confirmDestructiveAction(
            'Clear your map? You will lose all unsaved changes.',
            () => {
              setLayout(0);
            });
        }}><Image variant='card' src={'static/img/island-type-blank.png'}/></Card>      </Flex>
    );
  }
  return (
    <Box p={[0, 3]} sx={{position: 'relative'}}>
      {layoutType && <Box sx={{position: 'absolute', top: [1, 3]}}>
        <Button variant='icon' onClick={() => setLayoutType(LayoutType.none)}>
          <Image src='static/img/back.png' />
        </Button>
      </Box>}
      <Heading m={2} sx={{px: layoutType ? 4 : 0, textAlign: 'center'}}>{layoutType ? 'Choose your Island!' : 'Choose your Layout!'}</Heading>
      {layoutType && <Text m={2} sx={{textAlign: 'center'}}>{'You probably won\'t find an exact match, but pick one that roughly resembles your island.'}</Text>}
      {content}
    </Box>
  );
}

LoginModal: React.FunctionComponent = () => {
  Modal.setAppElement("#__next");

  const { env, isOpen, isLoginLoading } = useSelector(
    (store: SliceMachineStoreType) => ({
      isOpen: isModalOpen(store, ModalKeysEnum.LOGIN),
      isLoginLoading: isLoading(store, LoadingKeysEnum.LOGIN),
      env: getEnvironment(store),
    })
  );

  const { closeLoginModal, startLoadingLogin, stopLoadingLogin, openToaster } =
    useSliceMachineActions();

  const prismicBase = preferWroomBase(env.manifest.apiEndpoint);
  const loginRedirectUrl = `${
    buildEndpoints(prismicBase).Dashboard.cliLogin
  }&port=${new URL(env.sliceMachineAPIUrl).port}&path=/api/auth`;
  const onClick = async () => {
    if (!loginRedirectUrl) {
      return;
    }

    try {
      startLoadingLogin();
      await startAuth();
      window.open(loginRedirectUrl, "_blank");
      const { shortId, intercomHash } = await startPolling<
        CheckAuthStatusResponse,
        ValidAuthStatus
      >(
        checkAuthStatus,
        (status: CheckAuthStatusResponse): status is ValidAuthStatus =>
          status.status === "ok" &&
          Boolean(status.shortId) &&
          Boolean(status.intercomHash),
        3000,
        60
      );

      void Tracker.get().identifyUser(shortId, intercomHash);

      openToaster("Logged in", ToasterType.SUCCESS);
      stopLoadingLogin();
      closeLoginModal();
    } catch (e) {
      stopLoadingLogin();
      openToaster("Logging fail", ToasterType.ERROR);
    }
  };

  return (
    <SliceMachineModal
      isOpen={isOpen}
      shouldCloseOnOverlayClick
      onRequestClose={closeLoginModal}
      contentLabel={"login_modal"}
      style={{
        content: {
          position: "static",
          display: "flex",
          margin: "auto",
          minHeight: "initial",
        },
        overlay: {
          display: "flex",
        },
      }}
    >
      <Card>
        <Flex
          sx={{
            p: "16px",
            bg: "headSection",
            alignItems: "center",
            justifyContent: "space-between",
            borderRadius: "8px 8px 0px 0px",
            borderBottom: (t) => `1px solid ${String(t.colors?.borders)}`,
          }}
        >
          <Heading sx={{ fontSize: "16px" }}>You're not connected</Heading>
          <Close sx={{ p: 0 }} type="button" onClick={closeLoginModal} />
        </Flex>
        <Flex
          sx={{
            flexDirection: "column",
            p: 3,
            justifyContent: "center",
            alignItems: "stretch",
          }}
        >
          <Text
            variant={"xs"}
            sx={{
              mb: 3,
              maxWidth: 280,
              textAlign: "center",
            }}
          >
            {isLoginLoading ? (
              <>
                Not seeing the browser tab? <br />
                <Link target={"_blank"} href={loginRedirectUrl}>
                  Click here
                </Link>
              </>
            ) : (
              <>
                Your session has expired.
                <br />
                Please log in again.
              </>
            )}
          </Text>
          <Button
            sx={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              width: 240,
              mb: 3,
            }}
            onClick={() => void onClick()}
          >
            {isLoginLoading ? (
              <Spinner color="#FFF" size={16} />
            ) : (
              <>Signin to Prismic</>
            )}
          </Button>
        </Flex>
      </Card>
    </SliceMachineModal>
  );
}

SlicesIndex: React.FunctionComponent = () => {
  const libraries = useContext(LibrariesContext);
  const { openCreateSliceModal, closeCreateSliceModal, createSlice } =
    useSliceMachineActions();

  const { isCreateSliceModalOpen, isCreatingSlice, localLibs, remoteLibs } =
    useSelector((store: SliceMachineStoreType) => ({
      isCreateSliceModalOpen: isModalOpen(store, ModalKeysEnum.CREATE_SLICE),
      isCreatingSlice: isLoading(store, LoadingKeysEnum.CREATE_SLICE),
      localLibs: getLibraries(store),
      remoteLibs: getRemoteSlices(store),
    }));

  const _onCreate = ({
    sliceName,
    from,
  }: {
    sliceName: string;
    from: string;
  }) => {
    createSlice(sliceName, from);
  };

  const localLibraries: LibraryState[] | undefined = libraries?.filter(
    (l) => l.isLocal
  );

  const sliceCount = (libraries || []).reduce((count, lib) => {
    if (!lib) {
      return count;
    }

    return count + lib.components.length;
  }, 0);

  return (
    <>
      <Container
        sx={{
          display: "flex",
          flex: 1,
        }}
      >
        <Box
          as={"main"}
          sx={{
            flex: 1,
            display: "flex",
            flexDirection: "column",
          }}
        >
          <Header
            ActionButton={
              localLibraries?.length != 0 && sliceCount != 0 ? (
                <CreateSliceButton
                  onClick={openCreateSliceModal}
                  loading={isCreatingSlice}
                />
              ) : undefined
            }
            MainBreadcrumb={
              <>
                <MdHorizontalSplit /> <Text ml={2}>Slices</Text>
              </>
            }
            breadrumbHref="/slices"
          />
          {libraries && (
            <Flex
              sx={{
                flex: 1,
                flexDirection: "column",
              }}
            >
              {sliceCount === 0 ? (
                <Flex
                  sx={{
                    flex: 1,
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                >
                  <EmptyState
                    title={"What are Slices?"}
                    onCreateNew={openCreateSliceModal}
                    isLoading={isCreatingSlice}
                    buttonText={"Create one"}
                    documentationComponent={
                      <>
                        Slices are sections of your website. Prismic documents
                        contain a dynamic "Slice Zone" that allows content
                        creators to add, edit, and rearrange Slices to compose
                        dynamic layouts for any page design.{" "}
                        <Link
                          target={"_blank"}
                          href={"https://prismic.io/docs/core-concepts/slices"}
                          sx={(theme) => ({ color: theme?.colors?.primary })}
                        >
                          Learn more
                        </Link>
                        .
                      </>
                    }
                  />
                </Flex>
              ) : (
                libraries.map((lib: LibraryState) => {
                  const { name, isLocal, components } = lib;
                  return (
                    <Flex
                      key={name}
                      sx={{
                        flexDirection: "column",
                        "&:not(last-of-type)": {
                          mb: 4,
                        },
                      }}
                    >
                      <Flex
                        sx={{
                          alignItems: "center",
                          justifyContent: "space-between",
                        }}
                      >
                        <Flex
                          sx={{
                            alignItems: "center",
                            fontSize: 3,
                            lineHeight: "48px",
                            fontWeight: "heading",
                            mb: 1,
                          }}
                        >
                          <Text>{name}</Text>
                        </Flex>
                        {!isLocal && <p>⚠️ External libraries are read-only</p>}
                      </Flex>
                      <Grid
                        elems={components.map(([e]) => e)}
                        defineElementKey={(slice: SliceState) =>
                          slice.model.name
                        }
                        renderElem={(slice: SliceState) => {
                          return SharedSlice.render({
                            displayStatus: true,
                            slice,
                          });
                        }}
                      />
                    </Flex>
                  );
                })
              )}
            </Flex>
          )}
        </Box>
      </Container>
      {localLibraries && localLibraries.length > 0 && (
        <CreateSliceModal
          isCreatingSlice={isCreatingSlice}
          isOpen={isCreateSliceModalOpen}
          close={closeCreateSliceModal}
          libraries={localLibs}
          remoteSlices={remoteLibs}
          onSubmit={({ sliceName, from }) => _onCreate({ sliceName, from })}
        />
      )}
    </>
  );
}