@stanlemon/app-template 0.2.2 → 0.2.5

package/app.js

@@ -3,16 +3,28 @@ import {
   asyncJsonHandler as handler,
   SimpleUsersDao,
 } from "@stanlemon/server-with-auth";
-
-const users = new SimpleUsersDao();
+import { Low, JSONFile } from "lowdb";
 
 const app = createAppServer({
   webpack: "http://localhost:8080",
   secure: ["/api/"],
-  ...users,
+  ...new SimpleUsersDao(),
 });
 
+const db = new Low(new JSONFile("./db.json"));
+await db.read();
+db.data.items ||= [];
+
 app.get(
-  "/api/users",
-  handler(() => ({ users: users.users }))
+  "/api/items",
+  handler(() => ({ items: db.data.items }))
+);
+
+app.post(
+  "/api/items",
+  handler(async (item) => {
+    db.data.items.push(item);
+    await db.write();
+    return db.data.items;
+  })
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stanlemon/app-template",
-  "version": "0.2.2",
+  "version": "0.2.5",
   "description": "A template for creating apps using the webdev package.",
   "author": "Stan Lemon <stanlemon@users.noreply.github.com>",
   "license": "MIT",
@@ -8,6 +8,7 @@
   "scripts": {
     "start": "node app.js",
     "build": "npm run webpack:build",
+    "tsc": "tsc",
     "webpack:serve": "webpack serve",
     "webpack:build": "NODE_ENV=production webpack",
     "test": "jest",
@@ -17,7 +18,14 @@
     "lint:format": "eslint --fix --ext js,jsx,ts,tsx ./src/"
   },
   "dependencies": {
+    "@stanlemon/server-with-auth": "0.1.4",
     "@stanlemon/webdev": "*",
-    "@stanlemon/server-with-auth": "*"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^13.1.1",
+    "@types/react": "^18.0.5",
+    "@types/react-dom": "^18.0.1"
   }
 }

package/src/App.test.tsx

@@ -36,7 +36,7 @@ test("<App/>", async () => {
   });
 
   // Type some data into the input
-  userEvent.type(screen.getByLabelText("Item"), "The first item");
+  await userEvent.type(screen.getByLabelText("Item"), "The first item");
 
   // Click the add button
   fireEvent.click(screen.getByText("Add", { selector: "button" }));

package/src/App.tsx

@@ -22,6 +22,7 @@ export type Session = {
   token: string | null;
   user: User | null;
 };
+
 export type User = {
   name: string | null;
   email: string | null;
@@ -78,42 +79,68 @@ export default function App() {
   return (
     <SessionContext.Provider value={contextValue}>
       <Header />
-      <div>
-        {!session && (
-          <>
-            <p>
-              <em>You are not currently logged in.</em>
-            </p>
+      {!session && (
+        <Row>
+          <Column>
+            <h2>Login</h2>
             <Login />
-            <Spacer />
+          </Column>
+          <Column>
+            <h2>Register</h2>
             <Register />
-            <Spacer />
-          </>
-        )}
-        {session?.user && (
+          </Column>
+        </Row>
+      )}
+      {session?.user && (
+        <>
           <p>
             <em>You logged in as {session.user.username}.</em>
           </p>
-        )}
-      </div>
-      <Input
-        label="Item"
-        name="item"
-        value={value}
-        onChange={(value) => setValue(value)}
-        onEnter={addItem}
-      />
-      <button onClick={addItem}>Add</button>
-
-      <ul>
-        {items.map((item, i) => (
-          <li key={i}>{item}</li>
-        ))}
-      </ul>
+          <Input
+            label="Item"
+            name="item"
+            value={value}
+            onChange={(value) => setValue(value)}
+            onEnter={addItem}
+          />
+          <button onClick={addItem}>Add</button>
+          <ul>
+            {items.map((item, i) => (
+              <li key={i}>{item}</li>
+            ))}
+          </ul>
+        </>
+      )}
     </SessionContext.Provider>
   );
 }
 
-function Spacer() {
-  return <div style={{ minHeight: "2em" }} />;
+function Row({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%",
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function Column({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        flexBasis: "100%",
+        flex: 1,
+      }}
+    >
+      {children}
+    </div>
+  );
 }

package/src/Input.tsx

@@ -1,3 +1,16 @@
+export interface Props
+  // Inherit everything from input except onChange which we simplify here
+  extends Omit<React.ComponentPropsWithRef<"input">, "onChange"> {
+  type?: string;
+  name: string;
+  value?: string;
+  label?: string;
+  placeholder?: string;
+  onChange?: (value: string) => void;
+  onEnter?: () => void;
+  error?: string;
+}
+
 export default function Input({
   type = "text",
   name,
@@ -11,16 +24,8 @@ export default function Input({
     /* noop */
   },
   error,
-}: {
-  type?: string;
-  name: string;
-  value?: string;
-  label?: string;
-  placeholder?: string;
-  onChange?: (value: string) => void;
-  onEnter?: () => void;
-  error?: string;
-}) {
+  ...attrs
+}: Props) {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
     onChange(e.currentTarget.value);
   };
@@ -41,6 +46,7 @@ export default function Input({
         onKeyPress={handleKeyPress}
         placeholder={placeholder}
         value={value}
+        {...attrs}
       />
       {error && <div>{error}</div>}
     </>

package/src/Login.tsx

@@ -66,6 +66,7 @@ export default function Login() {
         label="Username"
         value={values.username}
         onChange={(value) => setValues({ ...values, username: value })}
+        autoCapitalize="off"
       />
       <Input
         name="password"

package/src/Register.tsx

@@ -63,6 +63,7 @@ export default function Register() {
         value={values.username}
         onChange={(value) => setValues({ ...values, username: value })}
         error={errors.username}
+        autoCapitalize="off"
       />
       <Input
         name="password"

package/src/index.tsx

@@ -1,4 +1,17 @@
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import App from "./App";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+const root = createRoot(
+  document.body.appendChild(document.createElement("div"))
+);
+root.render(<App />);
+
+const link = document.createElement("link");
+link.setAttribute("rel", "stylesheet");
+link.setAttribute("type", "text/css");
+link.setAttribute(
+  "href",
+  "https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css"
+);
+
+document.getElementsByTagName("head")[0].appendChild(link);

package/index.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css">
-  <title>App</title>
-</head>
-
-<body>
-  <noscript>
-    You need to enable JavaScript to run this app.
-  </noscript>
-  <div id="root"></div>
-</body>
-
-</html>