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