(null);
-
- // This form works without JavaScript, but when we have JavaScript we can make
- // the experience better by selecting the input on wrong answers! Go ahead, disable
- // JavaScript in your browser and see what happens.
- useEffect(() => {
- if (actionMessage && answerRef.current) {
- answerRef.current.select();
- }
- }, [actionMessage]);
-
- return (
-
-
- Actions!
-
- This form submission will send a post request that we handle in our
- `action` export. Any route can export an action to handle data
- mutations.
-
-
-
-
-
- Additional Resources
-
-
-
You got it right! ;
-}
diff --git a/app/routes/demos/params.tsx b/app/routes/demos/params.tsx
deleted file mode 100644
index e491c34de..000000000
--- a/app/routes/demos/params.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useCatch, Link, json, useLoaderData, Outlet } from "remix";
-
-export function meta() {
- return { title: "Boundaries Demo" };
-}
-
-export default function Boundaries() {
- return (
-
-
-
-
-
- Click these Links
-
-
-
-
- one
-
-
-
- two
-
-
-
-
-
-
-
-
-
-
-
- The param is {data.param}
-
- );
-}
-
-// https://remix.run/api/conventions#catchboundary
-// https://remix.run/api/remix#usecatch
-// https://remix.run/api/guides/not-found
-export function CatchBoundary() {
- let caught = useCatch();
-
- let message: React.ReactNode;
- switch (caught.status) {
- case 401:
- message = (
-
- Looks like you tried to visit a page that you do not have access to.
- Maybe ask the webmaster ({caught.data.webmasterEmail}) for access.
-
- );
- case 404:
- message = (
- Looks like you tried to visit a page that does not exist.
- );
- default:
- message = (
-
- There was a problem with your request!
-
- );
- }
-
- return (
- <>
- Oops!
- {message}
-
- (Isn't it cool that the user gets to stay in context and try a different
- link in the parts of the UI that didn't blow up?)
-
-
- );
-}
-
-// https://remix.run/api/conventions#errorboundary
-// https://remix.run/api/guides/not-found
-export function ErrorBoundary({ error }: { error: Error }) {
- console.error(error);
- return (
- <>
- Error!
- {error.message}
-
- (Isn't it cool that the user gets to stay in context and try a different
- link in the parts of the UI that didn't blow up?)
-
-
- );
-}
-
-export let meta: MetaFunction = ({ data }) => {
- return {
- title: data ? `Param: ${data.param}` : "Oops...",
- };
-};
diff --git a/app/routes/demos/params/index.tsx b/app/routes/demos/params/index.tsx
deleted file mode 100644
index c59e28a1a..000000000
--- a/app/routes/demos/params/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useCatch, Link, json, useLoaderData, Outlet } from "remix";
-import type { LoaderFunction } from "remix";
-
-export default function Boundaries() {
- return (
- <>
- Params
-
- When you name a route segment with $ like{" "}
- routes/users/$userId.js, the $ segment will be parsed from
- the URL and sent to your loaders and actions by the same name.
-
- Errors
-
- When a route throws and error in it's action, loader, or component,
- Remix automatically catches it, won't even try to render the component,
- but it will render the route's ErrorBoundary instead. If the route
- doesn't have one, it will bubble up to the routes above it until it hits
- the root.
-
- So be as granular as you want with your error handling.
- Not Found
-
- (and other{" "}
-
- client errors
-
- )
-
-
- Loaders and Actions can throw a Response instead of an
- error and Remix will render the CatchBoundary instead of the component.
- This is great when loading data from a database isn't found. As soon as
- you know you can't render the component normally, throw a 404 response
- and send your app into the catch boundary. Just like error boundaries,
- catch boundaries bubble, too.
-
-
- );
-}
diff --git a/app/routes/index.tsx b/app/routes/index.tsx
deleted file mode 100644
index 75b4ace7d..000000000
--- a/app/routes/index.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import type { MetaFunction, LoaderFunction } from "remix";
-import { useLoaderData, json, Link } from "remix";
-
-type IndexData = {
- resources: Array<{ name: string; url: string }>;
- demos: Array<{ name: string; to: string }>;
-};
-
-// Loaders provide data to components and are only ever called on the server, so
-// you can connect to a database or run any server side code you want right next
-// to the component that renders it.
-// https://remix.run/api/conventions#loader
-export let loader: LoaderFunction = () => {
- let data: IndexData = {
- resources: [
- {
- name: "Remix Docs",
- url: "https://remix.run/docs"
- },
- {
- name: "React Router Docs",
- url: "https://reactrouter.com/docs"
- },
- {
- name: "Remix Discord",
- url: "https://discord.gg/VBePs6d"
- }
- ],
- demos: [
- {
- to: "demos/actions",
- name: "Actions"
- },
- {
- to: "demos/about",
- name: "Nested Routes, CSS loading/unloading"
- },
- {
- to: "demos/params",
- name: "URL Params and Error Boundaries"
- }
- ]
- };
-
- // https://remix.run/api/remix#json
- return json(data);
-};
-
-// https://remix.run/api/conventions#meta
-export let meta: MetaFunction = () => {
- return {
- title: "Remix Starter",
- description: "Welcome to remix!"
- };
-};
-
-// https://remix.run/guides/routing#index-routes
-export default function Index() {
- let data = useLoaderData();
-
- return (
-
-
- Welcome to Remix!
- We're stoked that you're here. 🥳
-
- Feel free to take a look around the code to see how Remix does things,
- it might be a bit different than what you’re used to. When you're
- ready to dive deeper, we've got plenty of resources to get you
- up-and-running quickly.
-
-
- Check out all the demos in this starter, and then just delete the{" "}
- app/routes/demos and app/styles/demos{" "}
- folders when you're ready to turn this into your next project.
-
-
-
- Demos In This App
-
- {data.demos.map(demo => (
-
-
- ))}
-
- Resources
-
-
-
/jest.setup.js'],
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig);
diff --git a/next-env.d.ts b/next-env.d.ts
new file mode 100644
index 000000000..4f11a03dc
--- /dev/null
+++ b/next-env.d.ts
@@ -0,0 +1,5 @@
+///
+) {
+ res.status(200).json({ name: 'John Doe' })
+}
diff --git a/pages/index.tsx b/pages/index.tsx
new file mode 100644
index 000000000..72a4a5905
--- /dev/null
+++ b/pages/index.tsx
@@ -0,0 +1,72 @@
+import type { NextPage } from 'next'
+import Head from 'next/head'
+import Image from 'next/image'
+import styles from '../styles/Home.module.css'
+
+const Home: NextPage = () => {
+ return (
+
+
+
Create Next App
+
+
+
+
+
+
+
+
+ Get started by editing{' '}
+ pages/index.tsx
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/remix.config.js b/remix.config.js
deleted file mode 100644
index 2d1bd8c47..000000000
--- a/remix.config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * @type {import('@remix-run/dev/config').AppConfig}
- */
-module.exports = {
- appDirectory: "app",
- browserBuildDirectory: "public/build",
- publicPath: "/build/",
- serverBuildDirectory: "api/build"
-};
diff --git a/remix.env.d.ts b/remix.env.d.ts
deleted file mode 100644
index 72e2affe3..000000000
--- a/remix.env.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-/// ;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory = (args) =>
+ {label}
+
+ );
+};
diff --git a/stories/Header.stories.tsx b/stories/Header.stories.tsx
new file mode 100644
index 000000000..4b11b3459
--- /dev/null
+++ b/stories/Header.stories.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Header } from './Header';
+
+export default {
+ title: 'Example/Header',
+ component: Header,
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) => ;
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+ user: {},
+};
+
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {};
diff --git a/stories/Header.tsx b/stories/Header.tsx
new file mode 100644
index 000000000..96250c598
--- /dev/null
+++ b/stories/Header.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { Button } from './Button';
+import './header.css';
+
+interface HeaderProps {
+ user?: {};
+ onLogin: () => void;
+ onLogout: () => void;
+ onCreateAccount: () => void;
+}
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
+
+);
diff --git a/stories/Introduction.stories.mdx b/stories/Introduction.stories.mdx
new file mode 100644
index 000000000..42c4a8714
--- /dev/null
+++ b/stories/Introduction.stories.mdx
@@ -0,0 +1,211 @@
+import { Meta } from '@storybook/addon-docs';
+import Code from './assets/code-brackets.svg';
+import Colors from './assets/colors.svg';
+import Comments from './assets/comments.svg';
+import Direction from './assets/direction.svg';
+import Flow from './assets/flow.svg';
+import Plugin from './assets/plugin.svg';
+import Repo from './assets/repo.svg';
+import StackAlt from './assets/stackalt.svg';
+
+Configure
+
+
+
+Learn
+
+
+
+
+ Tip Edit the Markdown in{' '}
+ src/stories/Introduction.stories.mdx
+
diff --git a/stories/Page.stories.tsx b/stories/Page.stories.tsx
new file mode 100644
index 000000000..8c8cab278
--- /dev/null
+++ b/stories/Page.stories.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Page } from './Page';
+import * as HeaderStories from './Header.stories';
+
+export default {
+ title: 'Example/Page',
+ component: Page,
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) =>
+
+
+
+ Pages in Storybook
+
+ We recommend building UIs with a{' '}
+
+ component-driven
+ {' '}
+ process starting with atomic components and ending with pages.
+
+
+ Render pages with mock data. This makes it easy to build and review page states without
+ needing to navigate to them in your app. Here are some handy patterns for managing page data
+ in Storybook:
+
+
+
+ Use a higher-level connected component. Storybook helps you compose such data from the
+ "args" of child component stories
+
+
+ Assemble data in the page component from your services. You can mock these services out
+ using Storybook.
+
+
+
+ Get a guided tutorial on component-driven development at{' '}
+
+ Storybook tutorials
+
+ . Read more in the{' '}
+
+ docs
+
+ .
+
+
+
Tip Adjust the width of the canvas with the{' '}
+
+
+
+
+ Viewports addon in the toolbar
+
+
+);
diff --git a/stories/assets/code-brackets.svg b/stories/assets/code-brackets.svg
new file mode 100644
index 000000000..73de94776
--- /dev/null
+++ b/stories/assets/code-brackets.svg
@@ -0,0 +1 @@
+illustration/code-brackets illustration/colors illustration/comments illustration/direction illustration/flow illustration/plugin illustration/repo illustration/stackalt