Rewrite app in Remix

.editorconfig

@@ -5,7 +5,7 @@ root = true
 charset = utf-8
 end_of_line = lf
 indent_size = 4
-indent_style = space
+indent_style = tab
 insert_final_newline = true
 trim_trailing_whitespace = true
 
@@ -14,3 +14,4 @@ trim_trailing_whitespace = false
 
 [*.{json,yml}]
 indent_size = 2
+indent_style = space

.eslintrc.cjs

@@ -0,0 +1,70 @@
+/** @type {import('eslint').Linter.Config} */
+const config = {
+	extends: [
+		'@zazen',
+		'@remix-run/eslint-config',
+		'@remix-run/eslint-config/node',
+		'prettier',
+	],
+	rules: {
+		'capitalized-comments': 'off',
+
+		'@typescript-eslint/no-unused-vars': 'off',
+
+		'import/extensions': 'off',
+		'import/no-extraneous-dependencies': 'off',
+		'import/order': [
+			'error',
+			{
+				alphabetize: {
+					caseInsensitive: true,
+					order: 'asc',
+				},
+				groups: [
+					'builtin',
+					'external',
+					'internal',
+					'parent',
+					['sibling', 'index'],
+				],
+				'newlines-between': 'always',
+				pathGroups: [
+					{
+						pattern: '{@remix-run/**,react?(-dom|-router-dom)}',
+						group: 'builtin',
+						position: 'after',
+					},
+					{
+						pattern: '~/**',
+						group: 'internal',
+						position: 'after',
+					},
+					{
+						pattern: '*.+(css)',
+						group: 'index',
+						position: 'after',
+						patternOptions: {
+							matchBase: true,
+						},
+					},
+				],
+				pathGroupsExcludedImportTypes: ['builtin'],
+			},
+		],
+
+		'unicorn/prevent-abbreviations': [
+			'error',
+			{
+				replacements: {
+					env: false,
+					props: false,
+					ref: false,
+					vars: false,
+				},
+			},
+		],
+		'unicorn/switch-case-braces': ['error', 'avoid'],
+	},
+}
+
+module.exports = config

.gitignore

@@ -1,16 +1,18 @@
-# dependencies
+## DEPENDENCIES ######################################################
 node_modules
 
-# logs
-npm-debug.log
+## LOGS ##############################################################
+*.log
 
-# Nuxt build
-.nuxt
+## GENERATED #########################################################
+.cache
+.ouput
+/build/
+/public/build
+/api/index.js
+/api/index.js.map
 
-# Nuxt generate
-dist
-
-# Service worker
-sw.*
-
-.vercel
+## SECRETS ###########################################################
+.env
+.env.*
+.vercel

.stylelintrc.js

@@ -1,10 +1,10 @@
 module.exports = {
-    extends: ['@zazen/stylelint-config'],
-    rules: {
-        'at-rule-no-unknown': [
-            true,
-            { ignoreAtRules: ['include', 'mixin', 'screen', 'apply'] },
-        ],
-        'value-list-comma-newline-after': null,
-    },
+	extends: ['@zazen/stylelint-config'],
+	rules: {
+		'at-rule-no-unknown': [
+			true,
+			{ ignoreAtRules: ['include', 'mixin', 'screen', 'apply'] },
+		],
+		'value-list-comma-newline-after': null,
+	},
 }

app/components/box/box.tsx

@@ -0,0 +1,62 @@
+/**
+ * This file is used to convert our custom `sprinkles` function
+ * into a primitive `Box` component so that we don't need to
+ * manually manage the `className` prop when using our own
+ * utility classes, e.g. `<Box padding="small">` rather than
+ * `<Box className={sprinkles({ padding: 'small' })}>`.
+ */
+import {
+	createElement,
+	forwardRef,
+	type AllHTMLAttributes,
+	type ElementType,
+} from 'react'
+
+import clsx, { type ClassValue } from 'clsx'
+
+import { sprinkles, type Sprinkles } from '~/styles/sprinkles.css'
+
+interface ExtendedBoxProps extends Sprinkles {
+	as?: ElementType
+	className?: ClassValue
+}
+
+export type BoxProps = Omit<
+	AllHTMLAttributes<HTMLElement>,
+	keyof ExtendedBoxProps
+> &
+	ExtendedBoxProps
+
+export const Box = forwardRef<HTMLElement, BoxProps>(
+	({ as = 'div', className, ...props }, reference) => {
+		let atomProps: Record<string, unknown> = {}
+		let nativeProps: Record<string, unknown> = {}
+
+		for (let key in props) {
+			// Sprinkles allows us to detect whether a given property
+			// is available as part of our suite of utility classes,
+			// e.g. `sprinkles.properties.has('padding')` is true
+			// while `sprinkles.properties.has('onClick')` is false.
+			// We use this to determine whether to pass the property
+			// to Sprinkles or to the native HTML element.
+			if (sprinkles.properties.has(key as keyof Sprinkles)) {
+				atomProps[key] = props[key as keyof typeof props]
+			} else {
+				nativeProps[key] = props[key as keyof typeof props]
+			}
+		}
+
+		let atomicClasses = sprinkles(atomProps)
+		let customClasses = clsx(className)
+
+		return createElement(as, {
+			className: `${atomicClasses}${
+				customClasses ? ` ${customClasses}` : ''
+			}`,
+			...nativeProps,
+			reference,
+		})
+	}
+)
+
+Box.displayName = 'Box'

app/components/button/button.css.ts

@@ -0,0 +1,19 @@
+import { style } from '@vanilla-extract/css'
+
+import { vars } from '~/styles/theme.css'
+
+export const button = style({
+	fontFamily: 'inherit',
+	color: vars.color['grey-900'],
+	textTransform: 'uppercase',
+	background: vars.color['grey-100'],
+	border: 0,
+	borderRadius: vars.radius.sm,
+	cursor: 'pointer',
+	boxShadow:
+		'0 2px 10px rgba(0, 0, 0, 0.12), 0 20px 50px 0 rgba(0, 0, 0, 0.14)',
+
+	':hover': {
+		background: vars.color.white,
+	},
+})

app/components/button/button.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode, ComponentPropsWithoutRef, ReactElement } from 'react'
+
+import { Box } from '../box/box'
+
+import * as styles from './button.css'
+import { Text } from '../text/text'
+
+interface Props extends Omit<ComponentPropsWithoutRef<'button'>, 'color'> {
+	children: ReactNode
+	icon?: ReactElement
+}
+
+export function Button({ children, icon, ...props }: Props) {
+	return (
+		<Box
+			as="button"
+			className={styles.button}
+			display="flex"
+			alignItems="center"
+			gap={[4, 4, 8]}
+			padding={[8, 8, 16]}
+			{...props}
+		>
+			{icon}
+			<Text size="xs" weight="medium" leading="none" tracking="widest">
+				{children}
+			</Text>
+		</Box>
+	)
+}

app/components/color-picker/color-picker.css.ts

@@ -0,0 +1,13 @@
+import { style } from '@vanilla-extract/css'
+
+import { vars } from '~/styles/theme.css'
+
+export const root = style({})
+
+export const label = style({
+	color: vars.color['grey-600'],
+})
+
+export const value = style({
+	fontVariantNumeric: 'tabular-nums',
+})