feat: add Twilio Paste example (#20587)

* feat: add Twilio Paste example * Updated readme Co-authored-by: Luis Alvarez <luis@vercel.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
vercel · Jan 6, 2021 · 66a4972 · 66a4972
1 parent 54102b0
commit 66a4972
Show file tree

Hide file tree

Showing 8 changed files with 190 additions and 0 deletions.
diff --git a/examples/with-paste-typescript/.gitignore b/examples/with-paste-typescript/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
diff --git a/examples/with-paste-typescript/README.md b/examples/with-paste-typescript/README.md
@@ -0,0 +1,25 @@
+# Example app with Paste and TypeScript
+
+This example features how to use [Paste](https://paste.twilio.design) as the component library within a Next.js app with [TypeScript](https://www.typescriptlang.org/).
+
+Next.js and Paste have built-in TypeScript declarations, so you'll get autocompletion for their modules straight away.
+
+[`pages/_app.tsx`](pages/_app.tsx) is used to connect `Paste`'s Theme Provider so the pages can have app-wide styles.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-paste-typescript)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-paste-typescript with-paste-typescript-app
+# or
+yarn create next-app --example with-paste-typescript with-paste-typescript-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/with-paste-typescript/next-env.d.ts b/examples/with-paste-typescript/next-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
diff --git a/examples/with-paste-typescript/package.json b/examples/with-paste-typescript/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "with-paste-typescript",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@twilio-paste/core": "^4.2.4",
+    "@twilio-paste/icons": "^3.10.5",
+    "next": "10.0.4",
+    "prop-types": "^15.7.2",
+    "react": "16.14.0",
+    "react-dom": "16.14.0"
+  },
+  "devDependencies": {
+    "@types/node": "^14.14.16",
+    "typescript": "^4.1.3"
+  },
+  "license": "MIT"
+}
diff --git a/examples/with-paste-typescript/pages/_app.tsx b/examples/with-paste-typescript/pages/_app.tsx
@@ -0,0 +1,11 @@
+import { Theme } from '@twilio-paste/core/theme'
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <Theme.Provider theme="default">
+      <Component {...pageProps} />
+    </Theme.Provider>
+  )
+}
+
+export default MyApp
diff --git a/examples/with-paste-typescript/pages/index.tsx b/examples/with-paste-typescript/pages/index.tsx
@@ -0,0 +1,77 @@
+import Head from 'next/head'
+import { Anchor } from '@twilio-paste/core/anchor'
+import { Heading } from '@twilio-paste/core/heading'
+import { Box } from '@twilio-paste/core/box'
+import { Paragraph } from '@twilio-paste/core/paragraph'
+import { ListItem, UnorderedList } from '@twilio-paste/core/list'
+import { ArrowForwardIcon } from '@twilio-paste/icons/cjs/ArrowForwardIcon'
+import { Separator } from '@twilio-paste/core/separator'
+
+export default function Home() {
+  return (
+    <Box as="main" padding="space70">
+      <Head>
+        <title>Paste NextJS App</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <Heading as="h1" variant="heading10">
+        Welcome to the{' '}
+        <Anchor href="https://paste.twilio.design">Paste Next.js App!</Anchor>
+      </Heading>
+
+      <Paragraph>
+        Everything you need to get started using Paste in a Production app.
+        Start by editing <code>pages/index.tsx</code>
+      </Paragraph>
+
+      <Separator orientation="horizontal" verticalSpacing="space120" />
+
+      <Heading as="h2" variant="heading20">
+        Useful links
+      </Heading>
+
+      <UnorderedList>
+        <ListItem>
+          <Heading as="h3" variant="heading30">
+            <Anchor href="https://paste.twilio.design">
+              <Box as="span" display="flex" alignItems="center">
+                Paste Documentation{' '}
+                <ArrowForwardIcon decorative size="sizeIcon60" />
+              </Box>
+            </Anchor>
+          </Heading>
+          <Paragraph>
+            Start here. Find in-depth information about using the Paste Design
+            System to build your Next app.
+          </Paragraph>
+        </ListItem>
+        <ListItem>
+          <Heading as="h3" variant="heading30">
+            <Anchor href="https://nextjs.org/docs">
+              <Box as="span" display="flex" alignItems="center">
+                NextJS Documentation{' '}
+                <ArrowForwardIcon decorative size="sizeIcon60" />
+              </Box>
+            </Anchor>
+          </Heading>
+          <Paragraph>
+            Find in-depth information about Next.js features and API.
+          </Paragraph>
+        </ListItem>
+        <ListItem>
+          <Heading as="h3" variant="heading30">
+            <Anchor href="https://vercel.com/import?filter=next.js">
+              <Box as="span" display="flex" alignItems="center">
+                Deploy <ArrowForwardIcon decorative size="sizeIcon60" />
+              </Box>
+            </Anchor>
+          </Heading>
+          <Paragraph>
+            Instantly deploy your Next.js site to a public URL with Vercel.
+          </Paragraph>
+        </ListItem>
+      </UnorderedList>
+    </Box>
+  )
+}
diff --git a/examples/with-paste-typescript/public/favicon.ico b/examples/with-paste-typescript/public/favicon.ico
diff --git a/examples/with-paste-typescript/tsconfig.json b/examples/with-paste-typescript/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}