1import { css } from '@emotion/react';
2import { theme, typography } from '@expo/styleguide';
3import * as React from 'react';
4
5import { usePageMetadata } from '~/providers/page-metadata';
6import { Terminal } from '~/ui/components/Snippet';
7
8const STYLES_P = css`
9  line-height: 1.8rem;
10  margin-top: 1.4rem;
11  margin-bottom: 1.4rem;
12  color: ${theme.text.default};
13`;
14
15const STYLES_BOLD = css`
16  font-family: ${typography.fontFaces.medium};
17  font-weight: 400;
18  text-decoration: none;
19  color: ${theme.link.default};
20  :hover {
21    text-decoration: underline;
22  }
23`;
24const STYLES_LINK = css`
25  text-decoration: none;
26  color: ${theme.link.default};
27  :hover {
28    text-decoration: underline;
29  }
30`;
31
32type Props = {
33  packageName: string;
34  hideBareInstructions?: boolean;
35  cmd?: string[];
36  href?: string;
37};
38
39const getPackageLink = (packageNames: string) =>
40  `https://github.com/expo/expo/tree/main/packages/${packageNames.split(' ')[0]}`;
41
42const InstallSection: React.FC<Props> = ({
43  packageName,
44  hideBareInstructions = false,
45  cmd = [`$ expo install ${packageName}`],
46  href = getPackageLink(packageName),
47}) => {
48  const { sourceCodeUrl } = usePageMetadata();
49
50  return (
51    <>
52      <Terminal cmd={cmd} />
53      {hideBareInstructions ? null : (
54        <p css={STYLES_P}>
55          If you're installing this in a{' '}
56          <a css={STYLES_LINK} href="/introduction/managed-vs-bare/#bare-workflow">
57            bare React Native app
58          </a>
59          , you should also follow{' '}
60          <a css={STYLES_BOLD} href={sourceCodeUrl ?? href}>
61            these additional installation instructions
62          </a>
63          .
64        </p>
65      )}
66    </>
67  );
68};
69
70export default InstallSection;
71
72export const APIInstallSection: React.FC<Props> = props => {
73  const { packageName } = usePageMetadata();
74  return <InstallSection {...props} packageName={props.packageName ?? packageName} />;
75};
76