Docs update

movieofthenight · Nov 2, 2024 · 46d4014 · 46d4014
1 parent 168593a
commit 46d4014
Show file tree

Hide file tree

Showing 58 changed files with 493 additions and 180 deletions.
diff --git a/README.md b/README.md
@@ -51,7 +51,7 @@ npm install react-streaming-availability
 The `Row` component displays a row of movies or TV shows.
 
 ```tsx
-import { Row } from 'react-streaming-availability';
+import { Row, newTopShowsSource } from 'react-streaming-availability';
 
 export default function MyComponent() {
   return (
@@ -73,7 +73,7 @@ export default function MyComponent() {
 The `Grid` component displays a grid of movies or TV shows.
 
 ```tsx
-import { Grid } from 'react-streaming-availability';
+import { Grid, newFilteredSearchSource } from 'react-streaming-availability';
 
 export default function MyComponent() {
 	return (

diff --git a/demo/nextjs/.eslintrc.json b/demo/nextjs/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}
diff --git a/demo/nextjs/.gitignore b/demo/nextjs/.gitignore
@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for commiting if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/demo/nextjs/README.md b/demo/nextjs/README.md
@@ -0,0 +1,44 @@
+This is a [Next.js](https://nextjs.org) app
+demonstrating how to use
+Streaming Availability React Components.
+
+## Getting Started
+
+First, you need an API key to use the Streaming Availability React Components.
+It's free to get it without any credit card information.
+To get one, please follow the instructions in the
+[Authorization Guide](https://docs.movieofthenight.com/guide/authorization).
+
+Once you have an API key,
+create a `.env` file in the root of the project
+and add your API key as follows
+(replace `<your-api-key>` with your actual API key):
+
+```
+STREAMING_AVAILABILITY_API_KEY=<your-api-key>
+```
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+Then, you can run the development server:
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+## Learn More
+
+To learn more about Streaming Availability API, take a look at the following resources:
+
+- [Streaming Availability API Documentation](https://docs.movieofthenight.com/) - learn about Streaming Availability API.
+- [Streaming Availability API Landing Page](https://nextjs.org/learn) - discover the features supported.
+
+You can check out [the Streaming Availability React Components repository](https://github.com/movieofthenight/react-streaming-availability) - your feedback and contributions are welcome!
diff --git a/demo/nextjs/app/favicon.ico b/demo/nextjs/app/favicon.ico
diff --git a/demo/nextjs/app/globals.css b/demo/nextjs/app/globals.css
@@ -0,0 +1,25 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+	color: #ededed;
+	background: #0a0a0a;
+	padding-bottom: 4rem;
+}
+
+h1 {
+    font-size: 2rem;
+    font-weight: bold;
+	margin: 4rem;
+}
+
+h2 {
+	font-size: 1.5rem;
+	font-weight: bold;
+	margin: 1rem 4rem;
+}
+
+p {
+	margin: 1rem 4rem;
+}
diff --git a/demo/nextjs/app/layout.tsx b/demo/nextjs/app/layout.tsx
@@ -0,0 +1,29 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import { Open_Sans } from 'next/font/google'
+
+export const metadata: Metadata = {
+  title: "Streaming Availability React Components Demo",
+  description: "Streaming Availability React Components Demo",
+};
+
+const openSans = Open_Sans({
+    subsets: ['latin'],
+    display: 'swap',
+})
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+      <html lang="en">
+      <body
+          className={`${openSans.className} antialiased`}
+      >
+      {children}
+      </body>
+      </html>
+  );
+}
diff --git a/demo/nextjs/app/page.tsx b/demo/nextjs/app/page.tsx
@@ -0,0 +1,42 @@
+import {Grid, newChangesSource, newFilteredSearchSource, newTopShowsSource, Row} from "react-streaming-availability";
+
+export default function Home() {
+	return (
+		<main>
+			<h1>Streaming Availability React Components Demo</h1>
+			<p>Click on the posters or logos to follow the deep links into streaming service apps.</p>
+			<Row
+				title="Apple TV+ Germany Top Shows Row with Vertical Posters"
+				posterType="horizontal"
+				source={newTopShowsSource({
+					country: "de",
+					service: "apple",
+				})} />
+			<Row
+				title="Netflix US Top 10 Series Row with Vertical Posters"
+				posterType="vertical"
+				source={newTopShowsSource({
+				country: "us",
+				showType: "series",
+				service: "netflix",
+			})} />
+			<Row
+				title="Expiring Movies & Series in US"
+				posterType="horizontal"
+				source={newChangesSource({
+					country: "us",
+					changeType: "expiring",
+					itemType: "show",
+				})} />
+			<h2>Popular Movies & Series in US</h2>
+			<Grid source={
+				newFilteredSearchSource({
+					country: "us",
+					orderBy: "popularity_1month",
+					orderDirection: "desc",
+					limit: 100,
+				})
+			} />
+		</main>
+	);
+}
diff --git a/demo/nextjs/next.config.ts b/demo/nextjs/next.config.ts
@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
diff --git a/demo/nextjs/package.json b/demo/nextjs/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "react-streaming-availability-demo",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "react": "19.0.0-rc-02c0e824-20241028",
+    "react-dom": "19.0.0-rc-02c0e824-20241028",
+    "next": "15.0.2",
+    "react-streaming-availability": "^0.1.0"
+  },
+  "devDependencies": {
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.2"
+  }
+}
diff --git a/demo/nextjs/postcss.config.mjs b/demo/nextjs/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
diff --git a/demo/nextjs/tailwind.config.ts b/demo/nextjs/tailwind.config.ts
@@ -0,0 +1,19 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;
diff --git a/demo/nextjs/tsconfig.json b/demo/nextjs/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}