docs(demo): Use @/ in nextjs demo

reactive · Sep 29, 2024 · 3bbe2fd · 3bbe2fd
1 parent 47a458e
commit 3bbe2fd
Show file tree

Hide file tree

Showing 14 changed files with 79 additions and 52 deletions.
diff --git a/examples/nextjs/app/[userId]/layout.tsx b/examples/nextjs/app/[userId]/layout.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
-import UserSelection from 'components/todo/UserSelection';
+
+import UserSelection from '@/components/todo/UserSelection';
 
 export default function TodoLayout({
   children,
@@ -26,8 +27,12 @@ export default function TodoLayout({
       </p>
 
       <p>
-        This is because Reactive Data Client's store is initialized and{' '}
-        <a href="https://dataclient.io/docs/concepts/normalization?utm_source=demos&utm_medium=default-template&utm_campaign=demos" target="_blank">
+        This is because Reactive Data Client&apos;s store is initialized and{' '}
+        <a
+          href="https://dataclient.io/docs/concepts/normalization?utm_source=demos&utm_medium=default-template&utm_campaign=demos"
+          target="_blank"
+          rel="noreferrer"
+        >
           normalized
         </a>
       </p>

diff --git a/examples/nextjs/app/[userId]/page.tsx b/examples/nextjs/app/[userId]/page.tsx
@@ -1,7 +1,5 @@
-import TodoList from 'components/todo/TodoList';
+import TodoList from '@/components/todo/TodoList';
 
 export default function TodoPage({ params }: { params: { userId: number } }) {
-  return (
-    <TodoList {...params} />
-  );
+  return <TodoList {...params} />;
 }
diff --git a/examples/nextjs/app/crypto/layout.tsx b/examples/nextjs/app/crypto/layout.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
-import styles from 'styles/Home.module.css';
+
+import styles from '@/styles/Home.module.css';
 
 export default function CryptoLayout({
   children,

diff --git a/examples/nextjs/app/crypto/page.tsx b/examples/nextjs/app/crypto/page.tsx
@@ -1,7 +1,7 @@
-import styles from 'styles/Home.module.css';
-import AssetPrice from 'components/AssetPrice';
+import AssetPrice from '@/components/AssetPrice';
+import styles from '@/styles/Home.module.css';
 
-export const dynamic = 'force-dynamic'
+export const dynamic = 'force-dynamic';
 
 export default function Crypto() {
   return (

diff --git a/examples/nextjs/app/layout.tsx b/examples/nextjs/app/layout.tsx
@@ -1,9 +1,9 @@
 import { AsyncBoundary } from '@data-client/react';
 import { DataProvider } from '@data-client/react/nextjs';
 import Image from 'next/image';
-import 'styles/globals.css';
 
-import styles from 'styles/Home.module.css';
+import '@/styles/globals.css';
+import styles from '@/styles/Home.module.css';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -14,8 +14,15 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <body>
         <DataProvider>
           <h1 className={styles.title}>
-            Welcome to <a href="https://nextjs.org" target="_blank">Next.js</a> with{' '}
-            <a href="https://dataclient.io" target="_blank">Reactive Data Client</a>!
+            Welcome to{' '}
+            <a href="https://nextjs.org" target="_blank" rel="noreferrer">
+              Next.js
+            </a>{' '}
+            with{' '}
+            <a href="https://dataclient.io" target="_blank" rel="noreferrer">
+              Reactive Data Client
+            </a>
+            !
           </h1>
           <div>
             <main className={styles.main}>
@@ -33,7 +40,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
                   <Image
                     src="/data_client.svg"
                     alt="Reactive Data Client Logo"
-                    width={72*2}
+                    width={72 * 2}
                     height={32}
                   />
                 </span>

diff --git a/examples/nextjs/components/AssetPrice.tsx b/examples/nextjs/components/AssetPrice.tsx
@@ -1,10 +1,12 @@
 'use client';
 import { useLive } from '@data-client/react';
+
+import { getTicker } from '@/resources/Ticker';
+
 import { Formatted } from './Formatted';
-import { getTicker } from 'resources/Ticker';
 
 export default function AssetPrice({ symbol }: Props) {
-  const product_id = `${symbol}-USD`
+  const product_id = `${symbol}-USD`;
   // Learn more about Reactive Data Client: https://dataclient.io/docs
   const ticker = useLive(getTicker, { product_id });
   return (

diff --git a/examples/nextjs/components/Formatted.tsx b/examples/nextjs/components/Formatted.tsx
@@ -1,12 +1,12 @@
 'use client';
-import clsx from "clsx";
-import React from "react";
+import clsx from 'clsx';
+import React from 'react';
 
-import { formatters, Formatter } from "./formatters";
+import { formatters, Formatter } from './formatters';
 
 export enum FlashDirection {
-  Down = "down",
-  Up = "up",
+  Down = 'down',
+  Up = 'up',
 }
 
 export interface Props {
@@ -17,7 +17,7 @@ export interface Props {
   /**
    * One of the built in formatters.
    */
-  formatter?: "currency" | "percentage" | "number";
+  formatter?: 'currency' | 'percentage' | 'number';
   /**
    * Pass your own formatter function.
    */
@@ -71,24 +71,24 @@ export interface Props {
  * add your own unique styles.
  */
 export const Formatted = ({
-  downColor = "#d43215",
+  downColor = '#d43215',
   formatter,
   formatterFn,
   timeout = 300,
   transition,
   transitionLength = 300,
-  upColor = "#00d865",
+  upColor = '#00d865',
   value,
-  stylePrefix = "rvf_Flash",
+  stylePrefix = 'rvf_Flash',
 }: Props) => {
   const ref = React.useRef<number>(value);
   const [flash, setFlash] = React.useState<FlashDirection | null>(null);
   const style = {
     transition:
       transition || `background-color ${transitionLength}ms ease-in-out`,
-    ...(flash
-      ? { backgroundColor: flash === FlashDirection.Up ? upColor : downColor }
-      : null),
+    ...(flash ?
+      { backgroundColor: flash === FlashDirection.Up ? upColor : downColor }
+    : null),
   };
   const cls = clsx(stylePrefix, {
     [`${stylePrefix}--flashing`]: flash != null,
@@ -130,4 +130,4 @@ export const Formatted = ({
       <span className={`${stylePrefix}__value`}>{valueFormatter(value)}</span>
     </span>
   );
-};
+};
diff --git a/examples/nextjs/components/LoadingBar.tsx b/examples/nextjs/components/LoadingBar.tsx
@@ -1,5 +1,6 @@
 'use client';
 import { useRef, useEffect } from 'react';
+
 import styles from './LoadingBar.module.css';
 
 const LoadingBar = ({

diff --git a/examples/nextjs/components/formatters/index.ts b/examples/nextjs/components/formatters/index.ts
@@ -1,9 +1,9 @@
-import type { Props } from "../Formatted";
+import type { Props } from '../Formatted';
 
-export type Formatter = (value: Props["value"]) => string;
+export type Formatter = (value: Props['value']) => string;
 
 type Formatters = {
-  [K in Extract<Props["formatter"], string>]: (value: Props["value"]) => string;
+  [K in Extract<Props['formatter'], string>]: (value: Props['value']) => string;
 } & {
   default: Formatter;
 };
@@ -22,17 +22,16 @@ export const formatLargePrice = new Intl.NumberFormat('en-US', {
 });
 
 const numberFormatter = (value: number) =>
-  Intl.NumberFormat("en").format(value);
+  Intl.NumberFormat('en').format(value);
 
-const currencyFormatter = (value: number) =>
-  formatPrice.format(value);
+const currencyFormatter = (value: number) => formatPrice.format(value);
 
 const percentageFormatter = (value: number) =>
-  Intl.NumberFormat("en", {
-    style: "percent",
+  Intl.NumberFormat('en', {
+    style: 'percent',
     // See: https://github.com/microsoft/TypeScript/issues/36533
     // @ts-ignore
-    signDisplay: "exceptZero",
+    signDisplay: 'exceptZero',
   }).format(value);
 
 const defaultFormatter = (value: number) => `${value}`;
@@ -43,4 +42,3 @@ export const formatters: Formatters = {
   currency: currencyFormatter,
   percentage: percentageFormatter,
 };
-
diff --git a/examples/nextjs/components/todo/NewTodo.tsx b/examples/nextjs/components/todo/NewTodo.tsx
@@ -1,7 +1,9 @@
 import { useController } from '@data-client/react';
 import { memo, useCallback } from 'react';
-import { TodoResource } from 'resources/TodoResource';
-import styles from './NewTodo.module.css'
+
+import { TodoResource } from '@/resources/TodoResource';
+
+import styles from './NewTodo.module.css';
 
 function NewTodo({ userId }: { userId?: number }) {
   const ctrl = useController();
@@ -22,7 +24,11 @@ function NewTodo({ userId }: { userId?: number }) {
   return (
     <div className={styles.todoBox}>
       <input type="checkbox" name="new" checked={false} disabled />{' '}
-      <input className={styles.titleInput} type="text" onKeyDown={handlePress} />
+      <input
+        className={styles.titleInput}
+        type="text"
+        onKeyDown={handlePress}
+      />
     </div>
   );
 }

diff --git a/examples/nextjs/components/todo/TodoList.tsx b/examples/nextjs/components/todo/TodoList.tsx
@@ -1,6 +1,7 @@
 'use client';
 import { useSuspense } from '@data-client/react';
-import { TodoResource } from 'resources/TodoResource';
+
+import { TodoResource } from '@/resources/TodoResource';
 
 import NewTodo from './NewTodo';
 import TodoListItem from './TodoListItem';
@@ -9,8 +10,8 @@ export default function TodoList({ userId }: { userId?: number }) {
   const todos = useSuspense(TodoResource.getList, { userId });
 
   return (
-    <div style={{marginTop:'15px'}}>
-      {todos.map((todo) => (
+    <div style={{ marginTop: '15px' }}>
+      {todos.map(todo => (
         <TodoListItem key={todo.pk()} todo={todo} />
       ))}
       <NewTodo userId={userId} />

diff --git a/examples/nextjs/components/todo/TodoListItem.tsx b/examples/nextjs/components/todo/TodoListItem.tsx
@@ -1,6 +1,7 @@
 import { useController } from '@data-client/react';
 import { memo } from 'react';
-import { TodoResource, Todo } from 'resources/TodoResource';
+
+import { TodoResource, Todo } from '@/resources/TodoResource';
 
 function TodoListItem({ todo }: { todo: Todo }) {
   const ctrl = useController();
@@ -17,14 +18,16 @@ function TodoListItem({ todo }: { todo: Todo }) {
     });
 
   return (
-    <div style={{textAlign:'left'}}>
+    <div style={{ textAlign: 'left' }}>
       <label>
         <input
           type="checkbox"
           checked={todo.completed}
           onChange={handleToggle}
         />
-        {todo.completed ? <s>{todo.title}</s> : todo.title}
+        {todo.completed ?
+          <s>{todo.title}</s>
+        : todo.title}
       </label>
       <span
         style={{ cursor: 'pointer', marginLeft: '.5em' }}

diff --git a/examples/nextjs/components/todo/UserSelection.tsx b/examples/nextjs/components/todo/UserSelection.tsx
@@ -1,9 +1,11 @@
 'use client';
 import { useSuspense } from '@data-client/react';
-import { UserResource } from 'resources/UserResource';
+import clsx from 'clsx';
 import Link from 'next/link';
+
+import { UserResource } from '@/resources/UserResource';
+
 import styles from './UserSelect.module.css';
-import clsx from 'clsx';
 
 export default function UserSelection({ userId }: { userId?: number }) {
   const users = useSuspense(UserResource.getList).slice(0, 7);

diff --git a/examples/nextjs/tsconfig.json b/examples/nextjs/tsconfig.json
@@ -19,6 +19,9 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "paths": {
+      "@/*": ["./*"],
+    },
     "plugins": [
       {
         "name": "next"