first commit

Author: davidwoolf

.gitignore

@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env

README.md

@@ -0,0 +1,53 @@
+# Welcome to Remix!
+
+- [Remix Docs](https://remix.run/docs)
+
+## Development
+
+From your terminal:
+
+```sh
+npm run dev
+```
+
+This starts your app in development mode, rebuilding assets on file changes.
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+npm run build
+```
+
+Then run the app in production mode:
+
+```sh
+npm start
+```
+
+Now you'll need to pick a host to deploy it to.
+
+### DIY
+
+If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
+
+Make sure to deploy the output of `remix build`
+
+- `build/`
+- `public/build/`
+
+### Using a Template
+
+When you ran `npx create-remix@latest` there were a few choices for hosting. You can run that again to create a new project, then copy over your `app/` folder to the new project that's pre-configured for your target server.
+
+```sh
+cd ..
+# create a new project, and pick a pre-configured host
+npx create-remix@latest
+cd my-new-remix-app
+# remove the new project's app (not the old one!)
+rm -rf app
+# copy your app over
+cp -R ../my-old-remix-app/app app
+```

app/components/Button/Button.tsx

@@ -0,0 +1,48 @@
+interface Button extends React.ComponentPropsWithoutRef<"button"> {
+    className? : string,
+    icon?: any,
+    label: string;
+    size?: 'normal' | 'small',
+    variant?: 'normal' | 'simple' | 'highlight',
+}
+export const Button = (props: Button) => {
+    const {
+        className = '',
+        icon = undefined,
+        label,
+        type = 'button',
+        size = 'normal',
+        variant = 'normal',
+        ...otherProps
+    } = props
+    
+    return(
+        <button
+        className={`
+            appearance-none
+            flex
+            items-center
+            justify-center
+            relative
+            text-center
+            transition-all
+            
+            ${size === 'small' ? 'text-sm' : 'text-md'}
+            ${variant === 'normal' ? 'bg-blue-400 font-medium h-9 rounded-md text-white hover:bg-blue-600' : ''}
+            ${variant === 'simple' ? 'text-black-300 hover:text-black' : ''}
+            ${variant === 'highlight' ? 'text-blue-400 hover:text-blue-600' : ''}
+
+            ${className}
+        `}
+        type={type}
+        {...otherProps}>
+            {icon && 
+                <div 
+                className="mr-2">
+                    {icon}
+                </div> 
+            }
+            {label}
+        </button>
+    )
+}

app/components/Fields/Button/Button.tsx

@@ -0,0 +1,11 @@
+import {Button} from '~/components/Button/Button'
+
+export const FieldButton = ({
+    className,
+    label,
+}: {className?: string, label: string}) => (
+    <Button
+    className={className}
+    type="submit"
+    label={label} />
+)

app/components/Fields/Input/Input.tsx

@@ -0,0 +1,52 @@
+interface Input {
+    label: string;
+    type?: string;
+    placeholder?: string | undefined;
+    description?: string | undefined;
+}
+
+export const Input = ({
+    label,
+    type = 'text',
+    placeholder = undefined,
+    description = undefined,
+}: Input) => (
+    <label
+    className="
+        block
+        w-full
+    ">
+        <span
+        className="
+            font-medium
+            text-md
+            text-black-300
+        ">
+            {label}
+        </span>
+        
+        <input
+        className="
+            block
+            border
+            border-black-200
+            rounded-md
+            h-9
+            px-3
+            mt-1.5
+            text-md
+            text-black-900
+            w-full
+
+            focus:ring-1
+            focus:ring-black-200
+            focus:outline-none
+        "
+        placeholder={placeholder}
+        type={type} />
+
+        {description && 
+            <span
+            className="text-sm text-black-300">{description}</span>}
+    </label>
+)

app/components/Fields/Select/Select.tsx

@@ -0,0 +1,75 @@
+interface Select {
+    label: string;
+    children: any;
+    placeholder?: string | undefined;
+    description?: string | undefined;
+}
+
+export const Select = ({
+    label,
+    children,
+    placeholder = undefined,
+    description = undefined,
+}: Select) => (
+    <label
+    className="
+        block
+        w-full
+    ">
+        <span
+        className="
+            font-medium
+            text-md
+            text-black-300
+        ">
+            {label}
+        </span>
+        
+        <div className="relative">
+            <select
+            className="
+                appearance-none
+                block
+                border
+                border-black-200
+                rounded-md
+                h-9
+                px-3
+                pr-10
+                mt-1.5
+                text-md
+                text-black-900
+                w-full
+
+                focus:ring-1
+                focus:ring-black-200
+                focus:outline-none
+            "
+            placeholder={placeholder}>
+                {children}
+            </select>
+
+            <svg
+            className="
+                absolute
+                right-4
+                top-1/2
+                -translate-y-1/2
+            "
+            width="11"
+            height="7"
+            viewBox="0 0 11 7">
+                <path 
+                fillRule="evenodd" 
+                clipRule="evenodd" 
+                d="M0.292969 1.17683L1.00008 0.469727L5.64652 5.11617L10.293 0.469727L11.0001 1.17683L5.64652 6.53039L0.292969 1.17683Z" 
+                fill="#151928" />
+            </svg>
+
+        </div>
+
+        {description && 
+            <span
+            className="text-sm text-black-300">{description}</span>}
+    </label>
+)

app/components/Fields/index.ts

@@ -0,0 +1,11 @@
+import {Input} from './Input/Input'
+import {FieldButton} from './Button/Button'
+import {Select} from './Select/Select'
+
+const Fields = {
+    Button: FieldButton,
+    Input,
+    Select,
+}
+
+export default Fields

app/components/GuideStep/GuideStep.tsx

@@ -0,0 +1,48 @@
+interface GuideStep {
+    step: string;
+    title: string;
+    description: string;
+}
+
+export const GuideStep = ({
+    step,
+    title,
+    description,
+}: GuideStep) => (
+    <div>
+        <h2
+        className="
+            font-semibold
+            text-lg
+        ">
+            Step {step}:&nbsp;
+            
+            <em
+            className="
+                
+                not-italic
+                relative
+
+                after:absolute
+                after:border-b
+                after:border-blue-400
+                after:-bottom-1
+                after:left-0
+                after:w-full
+            ">
+                {title}
+            </em>
+        </h2>
+
+        <p
+        className="
+            leading-tight
+            pt-3
+            max-w-xs
+            text-body
+            text-black-300
+        ">
+            {description}
+        </p>
+    </div>
+)

app/entry.client.tsx

@@ -0,0 +1,4 @@
+import { hydrate } from "react-dom";
+import { RemixBrowser } from "remix";
+
+hydrate(<RemixBrowser />, document);

app/entry.server.tsx

@@ -0,0 +1,21 @@
+import { renderToString } from "react-dom/server";
+import { RemixServer } from "remix";
+import type { EntryContext } from "remix";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  const markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders
+  });
+}