@stanlemon/app-template 0.2.3 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stanlemon/app-template",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "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",

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"