feat: add theme ui. Remove tailwindcss

ttoss · Sep 3, 2020 · 7a1c5a2 · 7a1c5a2
1 parent abcb6da
commit 7a1c5a2
Show file tree

Hide file tree

Showing 20 changed files with 890 additions and 335 deletions.
diff --git a/config/eslintrc.react.js b/config/eslintrc.react.js
@@ -11,10 +11,11 @@ module.exports = {
       {
         extensions: ['.jsx', '.tsx'],
       },
-    ], // also want to use with ".tsx"
+    ], // also want to use with ".tsx".
+    'react/jsx-wrap-multilines': 'off', // This rule conflicts with prettier/prettier.
     'react/prop-types': 'off', // Is this incompatible with TS props type?
-    'react/jsx-wrap-multilines': 'off', // This rule conflicts with prettier/prettier
-    'react/require-default-props': 'off', // Problems with function components
+    'react/react-in-jsx-scope': 'off', // Do not required by TypeScript 4.
+    'react/require-default-props': 'off', // Problems with function components.
     'react-hooks/rules-of-hooks': 'error',
     'relay/graphql-syntax': 'error',
     'relay/compat-uses-vars': 'warn',

diff --git a/packages/cli/src/deploy/staticApp/staticApp.template.ts b/packages/cli/src/deploy/staticApp/staticApp.template.ts
@@ -90,12 +90,19 @@ exports.handler = (event, context, callback) => {
       value: 'max-age=63072000; includeSubdomains; preload'
     }
   ];
-  headers['content-security-policy'] = [
-    {
-      key: 'Content-Security-Policy',
-      value: "default-src 'self'; img-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; object-src 'none'"
-    }
-  ];
+  // headers['content-security-policy'] = [
+  //   {
+  //     key: 'Content-Security-Policy',
+  //     value: [
+  //       "default-src 'self'",
+  //       "img-src 'self'",
+  //       "script-src 'self'",
+  //       "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
+  //       "font-src 'self' https://fonts.gstatic.com",
+  //       "object-src 'none'",
+  //     ].join('; '),
+  //   },
+  // ];
   headers['x-content-type-options'] = [{key: 'X-Content-Type-Options', value: 'nosniff'}];
   headers['x-frame-options'] = [{key: 'X-Frame-Options', value: 'DENY'}];
   headers['x-xss-protection'] = [{key: 'X-XSS-Protection', value: '1; mode=block'}];

diff --git a/packages/cli/src/deploy/staticApp/staticApp.ts b/packages/cli/src/deploy/staticApp/staticApp.ts
@@ -89,6 +89,17 @@ export const invalidateCloudFront = async ({
   }
 };
 
+/**
+ * # Deploy static app performs these steps:
+ *
+ * 1. Get the stack name that will be passed to CloudFormation.
+ * 2. Create a CloudFormation template based on the type of the deployment,
+ *    for instance, only S3, SPA...
+ * 3. Create AWS resources using the templated created.
+ * 4. Upload static files to the host bucket S3.
+ * 5. If is a SPA and has CloudFront, an CloudFront invalidation will be
+ *    created.
+ */
 export const deployStaticApp = async ({
   acmArn,
   acmArnExportedName,

diff --git a/packages/cli/src/monorepo/templates/eslintrc.base.js.ts b/packages/cli/src/monorepo/templates/eslintrc.base.js.ts
@@ -1,4 +1,4 @@
-export const templateName = '.eslintrc.base.js';
+export const templateName = 'eslintrc.base.js';
 
 export const dir = 'config';
 

diff --git a/packages/cli/src/monorepo/templates/eslintrc.react.js.ts b/packages/cli/src/monorepo/templates/eslintrc.react.js.ts
@@ -1,4 +1,4 @@
-export const templateName = '.eslintrc.react.js';
+export const templateName = 'eslintrc.react.js';
 
 export const dir = 'config';
 

diff --git a/packages/website/api/getMethodComment.ts b/packages/website/api/getMethodComment.ts
@@ -0,0 +1,17 @@
+import jsdoc from 'jsdoc-api';
+import path from 'path';
+
+export const getMethodComment = ({
+  pathFromDist,
+  method,
+}: {
+  pathFromDist: string;
+  method: string;
+}): string => {
+  const res = jsdoc.explainSync({
+    files: path.resolve(process.cwd(), '../cli/dist', pathFromDist),
+  });
+  const { description } =
+    res.find(({ name, kind }) => name === method && kind === 'function') || {};
+  return description;
+};
diff --git a/packages/website/components/CodeBlock.tsx b/packages/website/components/CodeBlock.tsx
@@ -1,37 +1,15 @@
-/* eslint-disable react/no-array-index-key */
-import * as React from 'react';
-
-import Highlight, { defaultProps } from 'prism-react-renderer';
-import dracula from 'prism-react-renderer/themes/dracula';
-
-const CodeBlock = ({ children, className = 'sh' }: any) => {
-  const language = (className || 'sh').replace(/language-/, '');
+/** @jsx jsx */
+import Prism from '@theme-ui/prism';
+import { jsx } from 'theme-ui';
 
+const CodeBlock: React.FC<{ className?: string }> = ({
+  children,
+  className = 'sh',
+}) => {
   return (
-    <Highlight
-      {...defaultProps}
-      theme={dracula}
-      code={children.trim()}
-      language={language}
-    >
-      {({
-        className: highlightClassName,
-        style,
-        tokens,
-        getLineProps,
-        getTokenProps,
-      }) => (
-        <pre className={highlightClassName} style={style}>
-          {tokens.map((line, i) => (
-            <div key={i} {...getLineProps({ line, key: i })}>
-              {line.map((token, key) => (
-                <span key={key} {...getTokenProps({ token, key })} />
-              ))}
-            </div>
-          ))}
-        </pre>
-      )}
-    </Highlight>
+    <Prism sx={{ overflowX: 'auto' }} className={className}>
+      {children}
+    </Prism>
   );
 };
 

diff --git a/packages/website/components/Layout.tsx b/packages/website/components/Layout.tsx
@@ -1,22 +1,35 @@
-import * as React from 'react';
-
+/** @jsx jsx */
 import Link from 'next/link';
+import { Container, Styled, jsx } from 'theme-ui';
 
 import { commands } from '../api/commands';
 
 const Layout: React.FC = ({ children }) => {
   return (
     <>
-      <header className="bg-blue-500 p-5">Carlin</header>
-      <div className="flex bg-gray-200">
-        <aside className="flex flex-col content-center w-2/12">
+      <header sx={{ padding: 2 }}>Carlin</header>
+      <div sx={{ display: 'flex', padding: 4 }}>
+        <aside
+          sx={{
+            paddingX: 3,
+            display: 'flex',
+            flexDirection: 'column',
+            alignContent: 'center',
+            minWidth: ['fit-content'],
+            width: ['fit-content'],
+          }}
+        >
+          <span>
+            <strong>Getting Started</strong>
+          </span>
+          <Link href="/docs/getting-started">
+            <Styled.a>Getting Stated</Styled.a>
+          </Link>
           <span>
             <strong>Usage</strong>
           </span>
           <Link href="/docs/usage/deploy-static-app">
-            <span className="text-blue-500 hover:text-blue-800 cursor-pointer">
-              deploy static-app
-            </span>
+            <Styled.a>deploy static-app</Styled.a>
           </Link>
           <span>
             <strong>API</strong>
@@ -33,7 +46,9 @@ const Layout: React.FC = ({ children }) => {
             </Link>
           ))}
         </aside>
-        <main className="prose w-full max-w-none">{children}</main>
+        <Container as="main" sx={{ maxWidth: '48em' }}>
+          {children}
+        </Container>
       </div>
     </>
   );

diff --git a/packages/website/main.css b/packages/website/main.css
diff --git a/packages/website/next-env.d.ts b/packages/website/next-env.d.ts
@@ -1,42 +1,9 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 
-declare module '@mdx-js/react' {
-  import * as React from 'react';
+declare module '@theme-ui/prism';
+declare module '@theme-ui/typography';
 
-  type ComponentType =
-    | 'a'
-    | 'blockquote'
-    | 'code'
-    | 'delete'
-    | 'em'
-    | 'h1'
-    | 'h2'
-    | 'h3'
-    | 'h4'
-    | 'h5'
-    | 'h6'
-    | 'hr'
-    | 'img'
-    | 'inlineCode'
-    | 'li'
-    | 'ol'
-    | 'p'
-    | 'pre'
-    | 'strong'
-    | 'sup'
-    | 'table'
-    | 'td'
-    | 'thematicBreak'
-    | 'tr'
-    | 'ul';
-  export type Components = {
-    [key in ComponentType]?: React.ComponentType<{ children: React.ReactNode }>;
-  };
-  export interface MDXProviderProps {
-    children: React.ReactNode;
-    components: Components;
-  }
-  // eslint-disable-next-line react/prefer-stateless-function
-  export class MDXProvider extends React.Component<MDXProviderProps> {}
+declare module 'jsdoc-api' {
+  export function explainSync(params: any): any[];
 }
diff --git a/packages/website/package.json b/packages/website/package.json
@@ -10,19 +10,26 @@
   },
   "dependencies": {
     "@mdx-js/loader": "^1.6.16",
-    "@mdx-js/react": "^1.6.16",
     "@next/mdx": "^9.5.2",
     "@tailwindcss/typography": "^0.2.0",
+    "@theme-ui/prism": "^0.3.0",
+    "@theme-ui/typography": "^0.3.0",
+    "jsdoc-api": "^6.0.0",
     "next": "9.5.2",
     "prism-react-renderer": "^1.1.1",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "remark-emoji": "^2.1.0",
     "remark-images": "^2.0.0",
-    "tailwindcss": "^1.7.3"
+    "theme-ui": "^0.3.1",
+    "typeface-asap": "^1.1.3",
+    "typeface-overpass": "^0.0.72",
+    "typeface-overpass-mono": "^0.0.71"
   },
   "devDependencies": {
     "@types/react": "^16.9.46",
-    "@types/react-dom": "^16.9.8"
+    "@types/react-dom": "^16.9.8",
+    "@types/theme-ui": "^0.3.6",
+    "@types/typography": "^0.16.3"
   }
 }
diff --git a/packages/website/pages/_app.tsx b/packages/website/pages/_app.tsx
@@ -1,27 +1,32 @@
-import * as React from 'react';
-
-import { MDXProvider, Components } from '@mdx-js/react';
 import type { AppProps } from 'next/app';
+import { ThemeProvider } from 'theme-ui';
 
 import CodeBlock from '../components/CodeBlock';
 import Layout from '../components/Layout';
 
-import '../main.css';
+import 'typeface-asap';
+import 'typeface-overpass';
+import 'typeface-overpass-mono';
+
+import theme from '../theme';
 
-const components: Components = {
-  pre: (props) => <div {...props} />,
-  code: (props) => <CodeBlock {...props} />,
+const components = {
+  pre: ({ children }: any) => <>{children}</>,
+  code: CodeBlock,
 };
 
+/**
+ * ThemeProvides does not recognize "components" as props.
+ */
+const ThemeProviderAny = ThemeProvider as any;
+
 const App = ({ Component, pageProps }: AppProps) => {
   return (
-    <>
+    <ThemeProviderAny theme={theme} components={components}>
       <Layout>
-        <MDXProvider components={components}>
-          <Component {...pageProps} />
-        </MDXProvider>
+        <Component {...pageProps} />
       </Layout>
-    </>
+    </ThemeProviderAny>
   );
 };
 

diff --git a/packages/website/pages/docs/api/[command].tsx b/packages/website/pages/docs/api/[command].tsx
@@ -8,7 +8,10 @@ import CodeBlock from '../../../components/CodeBlock';
 
 export const getStaticPaths: GetStaticPaths = async () => {
   return {
-    paths: commands.map((command) => ({ params: { command } })),
+    paths: [
+      ...commands,
+      ...commands.map((command) => command.replace(/ /g, '%20')),
+    ].map((command) => ({ params: { command } })),
     fallback: false,
   };
 };
@@ -18,7 +21,7 @@ type Props = {
 };
 
 export const getStaticProps: GetStaticProps<Props> = async ({ params }) => {
-  const command = (params?.command as string) || '';
+  const command = (params?.command as string).replace(/%20/g, ' ') || '';
   const helpText = await getHelpText(command);
   return { props: { helpText } };
 };

diff --git a/packages/website/pages/docs/getting-started/index.md b/packages/website/pages/docs/getting-started/index.md
@@ -1,12 +1,12 @@
 To install carlin globally:
 
-```sh
+```
 npm i -g carlin
 ```
 
 All options can be written in the form of kebab or pascal case. For instance, these two commands are equivalents.
 
-```sh
+```
 carlin deploy --stack-name SomeName
 carlin deploy --stackName SomeName
 ```