Merge branch 'master' into develop
This commit is contained in:
Juan Di Toro
commit
51f212c7b4
|
|
@ -0,0 +1,83 @@
|
||||||
|
/**
|
||||||
|
* This is intended to be a basic starting point for linting in your app.
|
||||||
|
* It relies on recommended configs out of the box for simplicity, but you can
|
||||||
|
* and should modify this configuration to best suit your team's needs.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** @type {import('eslint').Linter.Config} */
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: "latest",
|
||||||
|
sourceType: "module",
|
||||||
|
ecmaFeatures: {
|
||||||
|
jsx: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
env: {
|
||||||
|
browser: true,
|
||||||
|
commonjs: true,
|
||||||
|
es6: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
// Base config
|
||||||
|
extends: ["eslint:recommended"],
|
||||||
|
|
||||||
|
overrides: [
|
||||||
|
// React
|
||||||
|
{
|
||||||
|
files: ["**/*.{js,jsx,ts,tsx}"],
|
||||||
|
plugins: ["react", "jsx-a11y"],
|
||||||
|
extends: [
|
||||||
|
"plugin:react/recommended",
|
||||||
|
"plugin:react/jsx-runtime",
|
||||||
|
"plugin:react-hooks/recommended",
|
||||||
|
"plugin:jsx-a11y/recommended",
|
||||||
|
],
|
||||||
|
settings: {
|
||||||
|
react: {
|
||||||
|
version: "detect",
|
||||||
|
},
|
||||||
|
formComponents: ["Form"],
|
||||||
|
linkComponents: [
|
||||||
|
{ name: "Link", linkAttribute: "to" },
|
||||||
|
{ name: "NavLink", linkAttribute: "to" },
|
||||||
|
],
|
||||||
|
"import/resolver": {
|
||||||
|
typescript: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// Typescript
|
||||||
|
{
|
||||||
|
files: ["**/*.{ts,tsx}"],
|
||||||
|
plugins: ["@typescript-eslint", "import"],
|
||||||
|
parser: "@typescript-eslint/parser",
|
||||||
|
settings: {
|
||||||
|
"import/internal-regex": "^~/",
|
||||||
|
"import/resolver": {
|
||||||
|
node: {
|
||||||
|
extensions: [".ts", ".tsx"],
|
||||||
|
},
|
||||||
|
typescript: {
|
||||||
|
alwaysTryTypes: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
"plugin:@typescript-eslint/recommended",
|
||||||
|
"plugin:import/recommended",
|
||||||
|
"plugin:import/typescript",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Node
|
||||||
|
{
|
||||||
|
files: [".eslintrc.cjs"],
|
||||||
|
env: {
|
||||||
|
node: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
/.cache
|
||||||
|
/build
|
||||||
|
/public/build
|
||||||
|
.env
|
||||||
47
README.md
47
README.md
|
|
@ -1,2 +1,47 @@
|
||||||
# portal-dashboard
|
# templates/spa
|
||||||
|
|
||||||
|
This template leverages [Remix SPA Mode](https://remix.run/docs/en/main/future/spa-mode) and the [Remix Vite Plugin](https://remix.run/docs/en/main/future/vite) to build your app as a Single-Page Application using [Client Data](https://remix.run/docs/en/main/guides/client-data) for all of your data loads and mutations.
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
|
```shellscript
|
||||||
|
npx create-remix@latest --template remix-run/remix/templates/spa
|
||||||
|
```
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
You can develop your SPA app just like you would a normal Remix app, via:
|
||||||
|
|
||||||
|
```shellscript
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## Production
|
||||||
|
|
||||||
|
When you are ready to build a production version of your app, `npm run build` will generate your assets and an `index.html` for the SPA.
|
||||||
|
|
||||||
|
```shellscript
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Preview
|
||||||
|
|
||||||
|
You can preview the build locally with [vite preview](https://vitejs.dev/guide/cli#vite-preview) to serve all routes via the single `index.html` file:
|
||||||
|
|
||||||
|
```shellscript
|
||||||
|
npm run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
> [!IMPORTANT]
|
||||||
|
>
|
||||||
|
> `vite preview` is not designed for use as a production server
|
||||||
|
|
||||||
|
### Deployment
|
||||||
|
|
||||||
|
You can then serve your app from any HTTP server of your choosing. The server should be configured to serve multiple paths from a single root `/index.html` file (commonly called "SPA fallback"). Other steps may be required if the server doesn't directly support this functionality.
|
||||||
|
|
||||||
|
For a simple example, you could use [sirv-cli](https://www.npmjs.com/package/sirv-cli):
|
||||||
|
|
||||||
|
```shellscript
|
||||||
|
npx sirv-cli build/client/ --single
|
||||||
|
```
|
||||||
|
|
|
||||||
Binary file not shown.
|
|
@ -0,0 +1,117 @@
|
||||||
|
import { Label } from "@radix-ui/react-label"
|
||||||
|
import { Input } from "./ui/input"
|
||||||
|
import { FieldName, useInputControl } from "@conform-to/react"
|
||||||
|
import { useId } from "react"
|
||||||
|
import { cn } from "~/utils"
|
||||||
|
import { Checkbox } from "~/components/ui/checkbox"
|
||||||
|
|
||||||
|
export const Field = ({
|
||||||
|
inputProps,
|
||||||
|
labelProps,
|
||||||
|
errors,
|
||||||
|
className
|
||||||
|
}: {
|
||||||
|
inputProps: {
|
||||||
|
name: FieldName<string>
|
||||||
|
} & React.HTMLProps<HTMLInputElement>
|
||||||
|
labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
|
||||||
|
errors?: ListOfErrors
|
||||||
|
className?: string
|
||||||
|
}) => {
|
||||||
|
const fallbackId = useId()
|
||||||
|
const id = inputProps.id ?? fallbackId
|
||||||
|
const errorId = errors?.length ? `${id}-error` : undefined
|
||||||
|
return (
|
||||||
|
<div className={className}>
|
||||||
|
<Label {...labelProps} htmlFor={id} />
|
||||||
|
<Input
|
||||||
|
{...inputProps}
|
||||||
|
id={id}
|
||||||
|
aria-invalid={errorId ? true : undefined}
|
||||||
|
aria-describedby={errorId}
|
||||||
|
/>
|
||||||
|
<div className="min-h-[32px] px-4 pb-3 pt-1">
|
||||||
|
{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const FieldCheckbox = ({
|
||||||
|
inputProps,
|
||||||
|
labelProps,
|
||||||
|
errors,
|
||||||
|
className
|
||||||
|
}: {
|
||||||
|
inputProps: {
|
||||||
|
name: string
|
||||||
|
form: string
|
||||||
|
value?: string
|
||||||
|
} & React.ComponentPropsWithoutRef<typeof Checkbox>
|
||||||
|
labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
|
||||||
|
errors?: ListOfErrors
|
||||||
|
className?: string
|
||||||
|
}) => {
|
||||||
|
const { key, defaultChecked, ...checkboxProps } = inputProps
|
||||||
|
const checkedValue = inputProps.value ?? "on"
|
||||||
|
const input = useInputControl({
|
||||||
|
key,
|
||||||
|
name: inputProps.name,
|
||||||
|
formId: inputProps.form,
|
||||||
|
initialValue: defaultChecked ? checkedValue : undefined
|
||||||
|
})
|
||||||
|
const fallbackId = useId()
|
||||||
|
const id = inputProps.id ?? fallbackId
|
||||||
|
const errorId = errors?.length ? `${id}-error` : undefined
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn("space-x-2 flex items-center text-primary-2", className)}
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
{...checkboxProps}
|
||||||
|
id={id}
|
||||||
|
aria-invalid={errorId ? true : undefined}
|
||||||
|
aria-describedby={errorId}
|
||||||
|
checked={input.value === checkedValue}
|
||||||
|
onCheckedChange={(state) => {
|
||||||
|
input.change(state.valueOf() ? checkedValue : "")
|
||||||
|
inputProps.onCheckedChange?.(state)
|
||||||
|
}}
|
||||||
|
onFocus={(event) => {
|
||||||
|
input.focus()
|
||||||
|
inputProps.onFocus?.(event)
|
||||||
|
}}
|
||||||
|
onBlur={(event) => {
|
||||||
|
input.blur()
|
||||||
|
inputProps.onBlur?.(event)
|
||||||
|
}}
|
||||||
|
type="button"
|
||||||
|
/>
|
||||||
|
<Label {...labelProps} htmlFor={id} />
|
||||||
|
<div className="min-h-[32px] px-4 pb-3 pt-1">
|
||||||
|
{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ListOfErrors = Array<string | null | undefined> | null | undefined
|
||||||
|
export function ErrorList({
|
||||||
|
id,
|
||||||
|
errors
|
||||||
|
}: {
|
||||||
|
errors?: ListOfErrors
|
||||||
|
id?: string
|
||||||
|
}) {
|
||||||
|
const errorsToRender = errors?.filter(Boolean)
|
||||||
|
if (!errorsToRender?.length) return null
|
||||||
|
return (
|
||||||
|
<ul id={id} className="flex flex-col gap-1">
|
||||||
|
{errorsToRender.map((e) => (
|
||||||
|
<li key={e} className="text-[10px] text-foreground-destructive">
|
||||||
|
{e}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "~/utils"
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"bg-primary text-primary-foreground hover:bg-primary/50",
|
||||||
|
destructive:
|
||||||
|
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
||||||
|
outline:
|
||||||
|
"border border-input bg-background shadow-sm hover:bg-primary-2/5",
|
||||||
|
secondary:
|
||||||
|
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
||||||
|
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||||
|
link: "text-primary-1 underline-offset-4 hover:underline",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-9 px-4 py-2",
|
||||||
|
sm: "h-8 rounded-md px-3 text-xs",
|
||||||
|
lg: "h-10 rounded-md px-8",
|
||||||
|
icon: "h-9 w-9",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
export interface ButtonProps
|
||||||
|
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||||
|
VariantProps<typeof buttonVariants> {
|
||||||
|
asChild?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
|
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||||
|
const Comp = asChild ? Slot : "button"
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
Button.displayName = "Button"
|
||||||
|
|
||||||
|
export { Button, buttonVariants }
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
||||||
|
import { CheckIcon } from "@radix-ui/react-icons"
|
||||||
|
|
||||||
|
import { cn } from "~/utils"
|
||||||
|
|
||||||
|
const Checkbox = React.forwardRef<
|
||||||
|
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
|
||||||
|
className?: string
|
||||||
|
}
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<CheckboxPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<CheckboxPrimitive.Indicator
|
||||||
|
className={cn("flex items-center justify-center text-current")}
|
||||||
|
>
|
||||||
|
<CheckIcon className="h-4 w-4" />
|
||||||
|
</CheckboxPrimitive.Indicator>
|
||||||
|
</CheckboxPrimitive.Root>
|
||||||
|
))
|
||||||
|
Checkbox.displayName = CheckboxPrimitive.Root.displayName
|
||||||
|
|
||||||
|
export { Checkbox }
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "~/utils"
|
||||||
|
import { EyeOpenIcon, EyeNoneIcon } from "@radix-ui/react-icons"
|
||||||
|
|
||||||
|
export interface InputProps
|
||||||
|
extends React.InputHTMLAttributes<HTMLInputElement> {}
|
||||||
|
|
||||||
|
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||||
|
({ className, type, ...props }, ref) => {
|
||||||
|
const [showPassword, setShowPassword] = React.useState<boolean>(false)
|
||||||
|
const [mask, setMask] = React.useState<boolean>(false)
|
||||||
|
const toggleShowPassword = () => {
|
||||||
|
setShowPassword((show) => !show)
|
||||||
|
setMask((mask) => !mask)
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
type={type && !mask ? type : "text"}
|
||||||
|
className={cn(
|
||||||
|
"flex h-14 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-input-placeholder focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
{type === "password" ? <button
|
||||||
|
type="button"
|
||||||
|
className="absolute right-4 top-5 text-input"
|
||||||
|
onClick={toggleShowPassword}
|
||||||
|
onKeyDown={toggleShowPassword}
|
||||||
|
>
|
||||||
|
{showPassword ? <EyeOpenIcon /> : <EyeNoneIcon />}
|
||||||
|
</button> : null}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
Input.displayName = "Input"
|
||||||
|
|
||||||
|
export { Input }
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "~/utils"
|
||||||
|
|
||||||
|
const labelVariants = cva(
|
||||||
|
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
|
)
|
||||||
|
|
||||||
|
const Label = React.forwardRef<
|
||||||
|
React.ElementRef<typeof LabelPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
|
||||||
|
VariantProps<typeof labelVariants>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<LabelPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(labelVariants(), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
Label.displayName = LabelPrimitive.Root.displayName
|
||||||
|
|
||||||
|
export { Label }
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { RemixBrowser } from "@remix-run/react";
|
||||||
|
import { startTransition, StrictMode } from "react";
|
||||||
|
import { hydrateRoot } from "react-dom/client";
|
||||||
|
|
||||||
|
startTransition(() => {
|
||||||
|
hydrateRoot(
|
||||||
|
document,
|
||||||
|
<StrictMode>
|
||||||
|
<RemixBrowser />
|
||||||
|
</StrictMode>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
import type { EntryContext } from "@remix-run/node";
|
||||||
|
import { RemixServer } from "@remix-run/react";
|
||||||
|
import { renderToString } from "react-dom/server";
|
||||||
|
|
||||||
|
export default function handleRequest(
|
||||||
|
request: Request,
|
||||||
|
responseStatusCode: number,
|
||||||
|
responseHeaders: Headers,
|
||||||
|
remixContext: EntryContext
|
||||||
|
) {
|
||||||
|
let html = renderToString(
|
||||||
|
<RemixServer context={remixContext} url={request.url} />
|
||||||
|
);
|
||||||
|
html = "<!DOCTYPE html>\n" + html;
|
||||||
|
return new Response(html, {
|
||||||
|
headers: { "Content-Type": "text/html" },
|
||||||
|
status: responseStatusCode,
|
||||||
|
});
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 950 B |
Binary file not shown.
|
After Width: | Height: | Size: 254 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,44 @@
|
||||||
|
import {
|
||||||
|
Links,
|
||||||
|
Meta,
|
||||||
|
Outlet,
|
||||||
|
Scripts,
|
||||||
|
ScrollRestoration,
|
||||||
|
} from "@remix-run/react";
|
||||||
|
|
||||||
|
import stylesheet from "./tailwind.css?url";
|
||||||
|
import { LinksFunction } from "@remix-run/node";
|
||||||
|
|
||||||
|
// Supports weights 200-800
|
||||||
|
import '@fontsource-variable/manrope';
|
||||||
|
|
||||||
|
export const links: LinksFunction = () => [
|
||||||
|
{ rel: "stylesheet", href: stylesheet },
|
||||||
|
// { rel: "stylesheet", href: manropeStylesheet },
|
||||||
|
];
|
||||||
|
|
||||||
|
export function Layout({ children }: { children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charSet="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<Meta />
|
||||||
|
<Links />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
{children}
|
||||||
|
<ScrollRestoration />
|
||||||
|
<Scripts />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return <Outlet />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function HydrateFallback() {
|
||||||
|
return <p>Loading...</p>;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
import type { MetaFunction } from "@remix-run/node"
|
||||||
|
import { Link } from "@remix-run/react"
|
||||||
|
import { Button } from "~/components/ui/button"
|
||||||
|
import logoPng from "~/images/lume-logo.png?url"
|
||||||
|
import lumeColorLogoPng from "~/images/lume-color-logo.png?url"
|
||||||
|
import discordLogoPng from "~/images/discord-logo.png?url"
|
||||||
|
import lumeBgPng from "~/images/lume-bg-image.png?url"
|
||||||
|
import { Field, FieldCheckbox } from "~/components/forms"
|
||||||
|
import { useForm } from "@conform-to/react"
|
||||||
|
|
||||||
|
export const meta: MetaFunction = () => {
|
||||||
|
return [
|
||||||
|
{ title: "New Remix SPA" },
|
||||||
|
{ name: "description", content: "Welcome to Remix (SPA Mode)!" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Index() {
|
||||||
|
const [form, fields] = useForm({
|
||||||
|
id: "login"
|
||||||
|
})
|
||||||
|
return (
|
||||||
|
<div className="p-10 h-screen relative overflow-clip">
|
||||||
|
<header>
|
||||||
|
<img src={logoPng} alt="Lume logo" className="h-10"></img>
|
||||||
|
</header>
|
||||||
|
<form className="w-full p-2 max-w-md space-y-4 mt-12 bg-background">
|
||||||
|
<h2 className="text-3xl font-bold !mb-12">Welcome back! 🎉</h2>
|
||||||
|
<Field
|
||||||
|
inputProps={{ name: fields.email.name }}
|
||||||
|
labelProps={{ children: "Email" }}
|
||||||
|
errors={fields.email.errors}
|
||||||
|
/>
|
||||||
|
<Field
|
||||||
|
inputProps={{ name: fields.password.name, type: "password" }}
|
||||||
|
labelProps={{ children: "Password" }}
|
||||||
|
errors={fields.password.errors}
|
||||||
|
/>
|
||||||
|
<FieldCheckbox
|
||||||
|
inputProps={{ name: fields.rememberMe.name, form: form.id }}
|
||||||
|
labelProps={{ children: "Remember Me" }}
|
||||||
|
errors={fields.rememberMe.errors}
|
||||||
|
/>
|
||||||
|
<Button className="w-full h-14">Login</Button>
|
||||||
|
<p className="text-input-placeholder">
|
||||||
|
Forgot your password?{" "}
|
||||||
|
<Link
|
||||||
|
to="/sign-up"
|
||||||
|
className="text-primary-1 text-md hover:underline hover:underline-offset-4"
|
||||||
|
>
|
||||||
|
Reset Password
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
<Button className="w-full h-14" variant={"outline"}>
|
||||||
|
Create an Account
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
<img src={lumeBgPng} alt="Lume background" className="absolute top-0 right-0 md:w-2/3 object-cover z-[-1]"></img>
|
||||||
|
<footer className="absolute bottom-5">
|
||||||
|
<ul className="flex flex-row">
|
||||||
|
<li>
|
||||||
|
<Link to="https://discord.lumeweb.com">
|
||||||
|
<Button
|
||||||
|
variant={"link"}
|
||||||
|
className="flex flex-row gap-x-2 text-input-placeholder"
|
||||||
|
>
|
||||||
|
<img className="h-5" src={discordLogoPng} alt="Discord Logo" />
|
||||||
|
Connect with us
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="https://lumeweb.com">
|
||||||
|
<Button
|
||||||
|
variant={"link"}
|
||||||
|
className="flex flex-row gap-x-2 text-input-placeholder"
|
||||||
|
>
|
||||||
|
<img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
|
||||||
|
Connect with us
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
:root {
|
||||||
|
--background: 240, 33%, 3%;
|
||||||
|
--foreground: 0, 0%, 88%;
|
||||||
|
|
||||||
|
--card: 0 0% 0%;
|
||||||
|
--card-foreground: 0 0% 3.9%;
|
||||||
|
|
||||||
|
--popover: 0 0% 100%;
|
||||||
|
--popover-foreground: 0 0% 3.9%;
|
||||||
|
|
||||||
|
--primary: 242 51% 14%;
|
||||||
|
--primary-1: 241 90% 82%;
|
||||||
|
--primary-2: 241 21% 42%;
|
||||||
|
--primary-foreground: 0 0% 88%;
|
||||||
|
--primary-1-foreground: 240 50% 9%;
|
||||||
|
|
||||||
|
--secondary: 0 0% 96.1%;
|
||||||
|
--secondary-foreground: 0 0% 9%;
|
||||||
|
|
||||||
|
--muted: 0 0% 96.1%;
|
||||||
|
--muted-foreground: 0 0% 45.1%;
|
||||||
|
|
||||||
|
--accent: 0 0% 96.1%;
|
||||||
|
--accent-foreground: 0 0% 9%;
|
||||||
|
|
||||||
|
--destructive: 0 84.2% 60.2%;
|
||||||
|
--destructive-foreground: 0 0% 98%;
|
||||||
|
|
||||||
|
--border: 240 50% 17%;
|
||||||
|
--input: 240 50% 17%;
|
||||||
|
--input-placeholder: 241 21% 42%;
|
||||||
|
--ring: 0 0% 3.9%;
|
||||||
|
|
||||||
|
--radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: 0 0% 3.9%;
|
||||||
|
--foreground: 0 0% 98%;
|
||||||
|
|
||||||
|
--card: 0 0% 3.9%;
|
||||||
|
--card-foreground: 0 0% 98%;
|
||||||
|
|
||||||
|
--popover: 0 0% 3.9%;
|
||||||
|
--popover-foreground: 0 0% 98%;
|
||||||
|
|
||||||
|
--primary: 0 0% 98%;
|
||||||
|
--primary-foreground: 0 0% 9%;
|
||||||
|
|
||||||
|
--secondary: 0 0% 14.9%;
|
||||||
|
--secondary-foreground: 0 0% 98%;
|
||||||
|
|
||||||
|
--muted: 0 0% 14.9%;
|
||||||
|
--muted-foreground: 0 0% 63.9%;
|
||||||
|
|
||||||
|
--accent: 0 0% 14.9%;
|
||||||
|
--accent-foreground: 0 0% 98%;
|
||||||
|
|
||||||
|
--destructive: 0 62.8% 30.6%;
|
||||||
|
--destructive-foreground: 0 0% 98%;
|
||||||
|
|
||||||
|
--border: 0 0% 14.9%;
|
||||||
|
--input: 0 0% 14.9%;
|
||||||
|
--ring: 0 0% 83.1%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground font-sans;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { type ClassValue, clsx } from "clsx"
|
||||||
|
import { twMerge } from "tailwind-merge"
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs))
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
|
"style": "new-york",
|
||||||
|
"rsc": false,
|
||||||
|
"tsx": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "./tailwind.config.ts",
|
||||||
|
"css": "./app/tailwind.css",
|
||||||
|
"baseColor": "neutral",
|
||||||
|
"cssVariables": true
|
||||||
|
},
|
||||||
|
"aliases": {
|
||||||
|
"components": "~/components",
|
||||||
|
"utils": "~/utils",
|
||||||
|
"ui": "~/components/ui"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
/// <reference types="@remix-run/node" />
|
||||||
|
/// <reference types="vite/client" />
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,52 @@
|
||||||
|
{
|
||||||
|
"name": "",
|
||||||
|
"private": true,
|
||||||
|
"sideEffects": false,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"build": "remix vite:build",
|
||||||
|
"dev": "remix vite:dev",
|
||||||
|
"lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"typecheck": "tsc"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@conform-to/react": "^1.0.2",
|
||||||
|
"@conform-to/zod": "^1.0.2",
|
||||||
|
"@fontsource-variable/manrope": "^5.0.19",
|
||||||
|
"@radix-ui/react-checkbox": "^1.0.4",
|
||||||
|
"@radix-ui/react-icons": "^1.3.0",
|
||||||
|
"@radix-ui/react-label": "^2.0.2",
|
||||||
|
"@radix-ui/react-slot": "^1.0.2",
|
||||||
|
"@remix-run/node": "^2.8.0",
|
||||||
|
"@remix-run/react": "^2.8.0",
|
||||||
|
"class-variance-authority": "^0.7.0",
|
||||||
|
"clsx": "^2.1.0",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"tailwind-merge": "^2.2.1",
|
||||||
|
"tailwindcss-animate": "^1.0.7"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@remix-run/dev": "^2.8.0",
|
||||||
|
"@types/react": "^18.2.20",
|
||||||
|
"@types/react-dom": "^18.2.7",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^6.7.4",
|
||||||
|
"@typescript-eslint/parser": "^6.7.4",
|
||||||
|
"autoprefixer": "^10.4.18",
|
||||||
|
"eslint": "^8.38.0",
|
||||||
|
"eslint-import-resolver-typescript": "^3.6.1",
|
||||||
|
"eslint-plugin-import": "^2.28.1",
|
||||||
|
"eslint-plugin-jsx-a11y": "^6.7.1",
|
||||||
|
"eslint-plugin-react": "^7.33.2",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"tailwindcss": "^3.4.1",
|
||||||
|
"typescript": "^5.1.6",
|
||||||
|
"vite": "^5.1.0",
|
||||||
|
"vite-tsconfig-paths": "^4.2.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18.0.0"
|
||||||
|
},
|
||||||
|
"packageManager": "npm"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -0,0 +1,88 @@
|
||||||
|
import type { Config } from "tailwindcss"
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
darkMode: ["class"],
|
||||||
|
content: ["./app/**/*.{ts,tsx}"],
|
||||||
|
prefix: "",
|
||||||
|
theme: {
|
||||||
|
container: {
|
||||||
|
center: true,
|
||||||
|
padding: "2rem",
|
||||||
|
screens: {
|
||||||
|
"2xl": "1400px"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
sans: ["Manrope Variable", "sans-serif"]
|
||||||
|
},
|
||||||
|
colors: {
|
||||||
|
border: "hsl(var(--border))",
|
||||||
|
input: {
|
||||||
|
DEFAULT: "hsl(var(--input))",
|
||||||
|
placeholder: "hsl(var(--input-placeholder))",
|
||||||
|
},
|
||||||
|
ring: "hsl(var(--ring))",
|
||||||
|
background: "hsl(var(--background))",
|
||||||
|
foreground: "hsl(var(--foreground))",
|
||||||
|
primary: {
|
||||||
|
DEFAULT: "hsl(var(--primary))",
|
||||||
|
foreground: "hsl(var(--primary-foreground))"
|
||||||
|
},
|
||||||
|
"primary-1": {
|
||||||
|
DEFAULT: "hsl(var(--primary-1))",
|
||||||
|
foreground: "hsl(var(--primary-1-foreground))"
|
||||||
|
},
|
||||||
|
"primary-2": {
|
||||||
|
DEFAULT: "hsl(var(--primary-2))",
|
||||||
|
},
|
||||||
|
secondary: {
|
||||||
|
DEFAULT: "hsl(var(--secondary))",
|
||||||
|
foreground: "hsl(var(--secondary-foreground))"
|
||||||
|
},
|
||||||
|
destructive: {
|
||||||
|
DEFAULT: "hsl(var(--destructive))",
|
||||||
|
foreground: "hsl(var(--destructive-foreground))"
|
||||||
|
},
|
||||||
|
muted: {
|
||||||
|
DEFAULT: "hsl(var(--muted))",
|
||||||
|
foreground: "hsl(var(--muted-foreground))"
|
||||||
|
},
|
||||||
|
accent: {
|
||||||
|
DEFAULT: "hsl(var(--accent))",
|
||||||
|
foreground: "hsl(var(--accent-foreground))"
|
||||||
|
},
|
||||||
|
popover: {
|
||||||
|
DEFAULT: "hsl(var(--popover))",
|
||||||
|
foreground: "hsl(var(--popover-foreground))"
|
||||||
|
},
|
||||||
|
card: {
|
||||||
|
DEFAULT: "hsl(var(--card))",
|
||||||
|
foreground: "hsl(var(--card-foreground))"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
borderRadius: {
|
||||||
|
lg: "var(--radius)",
|
||||||
|
md: "calc(var(--radius) - 2px)",
|
||||||
|
sm: "calc(var(--radius) - 4px)"
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
"accordion-down": {
|
||||||
|
from: { height: "0" },
|
||||||
|
to: { height: "var(--radix-accordion-content-height)" }
|
||||||
|
},
|
||||||
|
"accordion-up": {
|
||||||
|
from: { height: "var(--radix-accordion-content-height)" },
|
||||||
|
to: { height: "0" }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
"accordion-down": "accordion-down 0.2s ease-out",
|
||||||
|
"accordion-up": "accordion-up 0.2s ease-out"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plugins: [require("tailwindcss-animate")]
|
||||||
|
} satisfies Config
|
||||||
|
|
||||||
|
export default config
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"lib": ["DOM", "DOM.Iterable", "ES2022"],
|
||||||
|
"isolatedModules": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"target": "ES2022",
|
||||||
|
"strict": true,
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"~/*": ["./app/*"],
|
||||||
|
"~/components/*": ["./app/components/*"],
|
||||||
|
"~/utils/*": ["./app/utils/*"],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Remix takes care of building everything in `remix build`.
|
||||||
|
"noEmit": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { vitePlugin as remix } from "@remix-run/dev";
|
||||||
|
import { defineConfig } from "vite";
|
||||||
|
import tsconfigPaths from "vite-tsconfig-paths";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
remix({
|
||||||
|
ssr: false,
|
||||||
|
ignoredRouteFiles: ["**/*.css"],
|
||||||
|
|
||||||
|
}),
|
||||||
|
tsconfigPaths(),
|
||||||
|
],
|
||||||
|
server: {
|
||||||
|
fs: {
|
||||||
|
// Restrict files that could be served by Vite's dev server. Accessing
|
||||||
|
// files outside this directory list that aren't imported from an allowed
|
||||||
|
// file will result in a 403. Both directories and files can be provided.
|
||||||
|
// If you're comfortable with Vite's dev server making any file within the
|
||||||
|
// project root available, you can remove this option. See more:
|
||||||
|
// https://vitejs.dev/config/server-options.html#server-fs-allow
|
||||||
|
allow: ["app", "node_modules/@fontsource-variable/manrope"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue