Complete rewrite of project in Remix

Author: SimeonGriggs

.dockerignore

@@ -0,0 +1 @@
+node_modules

.eslintrc.js

@@ -0,0 +1,63 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  env: {
+    node: true,
+    browser: true,
+  },
+  ignorePatterns: ['node_modules/', 'dist/', 'build/'],
+  settings: {
+    react: {version: '16.9.0'},
+  },
+  extends: [
+    'sanity',
+    'sanity/react',
+    'sanity/import',
+    'plugin:react-hooks/recommended',
+    'prettier',
+  ],
+  rules: {
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    'import/no-extraneous-dependencies': 'off', // because of parts
+    'import/no-unresolved': ['error', {ignore: ['.*:.*']}], // because of parts
+    'prettier/prettier': [
+      'error',
+      {
+        semi: false,
+        printWidth: 100,
+        bracketSpacing: false,
+        singleQuote: true,
+      },
+    ],
+    'sort-imports': 'off', // prefer import/order
+    'react/jsx-no-bind': [
+      1,
+      {
+        ignoreDOMComponents: true,
+      },
+    ],
+    'react/forbid-prop-types': [0],
+  },
+  plugins: ['prettier', 'react'],
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      rules: {
+        'no-undef': 'off',
+        'react/react-in-jsx-scope': 'off',
+
+        // No more prop-types
+        'react/prop-types': 'off',
+        'react/require-default-props': 'off',
+
+        // Struggles with ~ paths
+        'import/no-unresolved': 'off',
+        'import/extensions': 'off',
+
+        // Rule from Studio
+        'no-process-env': 'off',
+      },
+    },
+  ],
+}

.gitignore

@@ -1,4 +1,10 @@
-node_modules
 .DS_Store
-dist
-*.local
+node_modules
+
+/.cache
+/.mf
+/build
+/public/build
+/app/styles/output.css
+
+worker.js

.npmignore

@@ -0,0 +1,6 @@
+module.exports = {
+    semi: false,
+    printWidth: 100,
+    bracketSpacing: false,
+    singleQuote: true,
+}

.prettierrc.js

@@ -0,0 +1,66 @@
+# base node image
+FROM node:17-bullseye-slim as base
+
+# Install Chromium for puppeteer
+# RUN apt-get update && apt-get install -y chromium
+
+# Tell Puppeteer to skip installing Chrome. We'll be using the installed package.
+# ENV CHROME_BIN=/usr/bin/chromium
+
+# Install openssl for Prisma
+# RUN apt-get update && apt-get install -y openssl
+
+# Install all node_modules, including dev dependencies
+FROM base as deps
+
+RUN mkdir /app -p
+WORKDIR /app
+
+ADD package.json package-lock.json ./
+RUN npm install --production=false
+
+# Setup production node_modules
+FROM base as production-deps
+
+RUN mkdir /app -p
+WORKDIR /app
+
+COPY --from=deps /app/node_modules /app/node_modules
+ADD package.json package-lock.json ./
+# RUN npm prune --production
+
+# Build the app
+FROM base as build
+
+ENV NODE_ENV=production
+
+RUN mkdir /app
+WORKDIR /app
+
+COPY --from=deps /app/node_modules /app/node_modules
+
+# If we're using Prisma, uncomment to cache the prisma schema
+# ADD prisma .
+# RUN npx prisma generate
+
+ADD . .
+RUN npm run build
+
+# Finally, build the production image with minimal footprint
+FROM base
+
+ENV NODE_ENV=production
+
+RUN mkdir /app
+WORKDIR /app
+
+COPY --from=production-deps /app/node_modules /app/node_modules
+
+# Uncomment if using Prisma
+# COPY --from=build /app/node_modules/.prisma /app/node_modules/.prisma
+
+COPY --from=build /app/build /app/build
+COPY --from=build /app/public /app/public
+ADD . .
+
+CMD ["npm", "run", "start"]

Dockerfile

@@ -0,0 +1,11 @@
+# Palette Generator and API for Tailwind CSS
+
+Visit [tailwind.simeongriggs.dev](https://tailwind.simeongriggs.dev) to use the GUI and API.
+
+Read the [2.0.0 launch blog post](https://www.simeongriggs.dev/using-the-tailwind-css-palette-generator-and-api) for details on how it works.
+
+## Credits
+
+Created by [Simeon Griggs](https://simeongriggs.dev/)
+
+Contributions by [kevnk](https://truefrontierapps.com/)

README.md

@@ -0,0 +1,98 @@
+import React, {MouseEventHandler, ReactNode} from 'react'
+import {usePopperTooltip} from 'react-popper-tooltip'
+
+const classNames = `border p-1 transition-colors duration-100 rounded`
+const disabledClassNames = `bg-gray-100 border-gray-200 text-gray-200 cursor-not-allowed pointer-events-none`
+const toneClassNames = {
+  danger: `border-gray-200 text-gray-400 hover:text-red-500 hover:border-red-500 hover:bg-red-100`,
+  success: `border-gray-200 text-gray-400 hover:text-green-500 hover:border-green-500 hover:bg-green-100`,
+}
+const selectedClassNames = {
+  danger: `text-red-500 border-red-500 bg-red-100`,
+  success: `text-green-500 border-green-500 bg-green-100`,
+}
+const toneTooltipClassNames = {
+  danger: `text-red-700`,
+  success: `text-green-700`,
+}
+
+export default function ButtonIcon({
+  title,
+  onClick,
+  icon,
+  href = ``,
+  disabled = false,
+  selected = false,
+  tone = 'success',
+  tabIndex = -1,
+}: {
+  title: string
+  icon: ReactNode
+  href?: string
+  onClick?: MouseEventHandler | undefined
+  disabled?: boolean
+  selected?: boolean
+  tone?: 'danger' | 'success'
+  tabIndex?: number
+}) {
+  const className = [
+    disabled ? disabledClassNames : toneClassNames[tone],
+    selected ? selectedClassNames[tone] : ``,
+    classNames,
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  const {getArrowProps, getTooltipProps, setTooltipRef, setTriggerRef, visible} = usePopperTooltip()
+
+  if (href) {
+    return (
+      <a
+        href={href}
+        className={className}
+        tabIndex={tabIndex}
+        title={title}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <>
+          {icon ? React.createElement(icon, {className: `w-5 h-auto`}) : null}
+          <span className="sr-only">{title}</span>
+        </>
+      </a>
+    )
+  }
+
+  return (
+    <>
+      <button
+        ref={setTriggerRef}
+        type="button"
+        className={className}
+        onClick={onClick}
+        disabled={disabled}
+        tabIndex={tabIndex}
+        // title={title}
+      >
+        {icon ? React.createElement(icon, {className: `w-5 h-auto`}) : null}
+        <span className="sr-only">{title}</span>
+      </button>
+      {visible && (
+        <div
+          ref={setTooltipRef}
+          {...getTooltipProps({
+            className: `w-32 text-center z-50 bg-white p-2 rounded shadow text-xs font-medium ${toneTooltipClassNames[tone]}`,
+          })}
+        >
+          <div
+            {...getArrowProps({
+              className: `absolute bottom-full bg-white h-2 w-4 pointer-events-none`,
+              style: {clipPath: `polygon(50% 0%, 0% 100%, 100% 100%)`},
+            })}
+          />
+          {title}
+        </div>
+      )}
+    </>
+  )
+}

app/components/ButtonIcon.tsx

@@ -0,0 +1,36 @@
+import React, {useEffect, useState} from 'react'
+import {HexColorPicker} from 'react-colorful'
+import {useDebounce} from 'usehooks-ts'
+import {Popover} from '@headlessui/react'
+import {ColorSwatchIcon} from '@heroicons/react/solid'
+
+export default function ColorPicker({
+  color,
+  onChange,
+  ringStyle,
+}: {
+  color: string
+  onChange: Function
+  ringStyle: React.CSSProperties
+}) {
+  const [value, setValue] = useState<string>(color)
+  const debouncedValue = useDebounce<string>(value, 500)
+
+  useEffect(() => (value ? onChange(value.toUpperCase()) : null), [debouncedValue])
+
+  return (
+    <Popover className="relative">
+      <Popover.Button
+        style={ringStyle}
+        className="w-full p-2 border border-gray-200 bg-gray-50 focus:outline-none focus:ring focus:bg-gray-100 focus:border-gray-300 text-gray-500 focus:text-gray-900"
+      >
+        <ColorSwatchIcon className="w-6 h-auto" />
+        <span className="sr-only">Open Color Picker</span>
+      </Popover.Button>
+
+      <Popover.Panel className="absolute right-0 z-10 bg-white shadow p-1 translate-y-1">
+        <HexColorPicker color={value.startsWith(`#`) ? value : `#${value}`} onChange={setValue} />
+      </Popover.Panel>
+    </Popover>
+  )
+}

app/components/ColorPicker.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+
+import {PaletteConfig} from '~/types/palette'
+
+const graphHeight = 40
+
+export default function DistributionGraph({palettes}: {palettes: PaletteConfig[]}) {
+  return (
+    <section className="grid grid-cols-1 gap-2">
+      <div className="text-lg font-medium text-center">
+        <h2>Lightness/Luminance Distribution 0-100</h2>
+      </div>
+
+      <div
+        style={{height: graphHeight * palettes.length}}
+        className="relative rounded bg-gray-800 flex justify-between h-full overflow-hidden"
+      >
+        {palettes.map((palette, index) => (
+          <React.Fragment key={palette.value}>
+            {palette.swatches.map((swatch) => (
+              <div
+                key={swatch.stop}
+                style={{
+                  backgroundColor: swatch.hex,
+                  transitionDelay: `${swatch.stop / 2}ms`,
+                  top: (index + 1) * graphHeight - graphHeight / 2,
+                  left: `${100 - swatch.l}%`,
+                }}
+                className="transition duration-500 absolute z-10 border-2 border-white shadow rounded-full transform -translate-y-1/2 -translate-x-1/2 w-5 h-5"
+              />
+            ))}
+          </React.Fragment>
+        ))}
+        <div className="absolute p-2 leading-none bottom-0 left-0 text-gray-100 text-xs font-bold">
+          100 (White)
+        </div>
+        <div className="absolute p-2 leading-none bottom-0 right-0 text-gray-100 text-xs font-bold">
+          0 (Black)
+        </div>
+        <div
+          className="absolute inset-0 border-t border-gray-700"
+          style={{top: '50%', height: '50%'}}
+        />
+        <div className="border-transparent h-full border-l" />
+        <div className="border-gray-700 h-full border-l border-dashed" />
+        <div className="border-gray-700 h-full border-l border-dashed" />
+        <div className="border-gray-700 h-full border-l border-dashed" />
+        <div className="border-gray-700 h-full border-l border-dashed" />
+        <div className="border-gray-700 h-full border-l" />
+        <div className="border-gray-700 h-full border-l border-dashed" />
+        <div className="border-gray-700 h-full border-l border-dashed" />
+        <div className="border-gray-700 h-full border-l border-dashed" />
+        <div className="border-gray-700 h-full border-l border-dashed" />
+        <div className="border-transparent h-full border-l" />
+      </div>
+    </section>
+  )
+}