adamplesnik · adamplesnik · Apr 16, 2024 · Mar 24, 2024 · Mar 24, 2024 · Mar 25, 2024
diff --git a/docs/.eslintrc.cjs b/docs/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/docs/.gitignore b/docs/.gitignore
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+package-lock.json
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en" class="scroll-smooth bg-zinc-50 text-zinc-700 dark:bg-zinc-900 dark:text-zinc-400">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tailwind Labs Job Application, Adam Plesník</title>
+  </head>
+  <body>
+    <div id="root" class=""></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/docs/package.json b/docs/package.json
@@ -0,0 +1,51 @@
+{
+  "name": "tailwindcss-scroll-driven-animations-docu",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "prettier": {
+    "printWidth": 100,
+    "semi": false,
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "plugins": [
+      "prettier-plugin-tailwindcss"
+    ]
+  },
+  "dependencies": {
+    "@vercel/analytics": "^1.2.2",
+    "framer-motion": "^11.0.24",
+    "lucide-react": "^0.363.0",
+    "prismjs": "^1.29.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3"
+  },
+  "devDependencies": {
+    "@adam.plesnik/tailwindcss-scroll-driven-animations": "^0.2.5",
+    "@types/node": "^20.11.30",
+    "@types/prismjs": "^1.26.3",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "postcss": "^8.4.38",
+    "postcss-import": "^16.1.0",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.12",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
+  }
+}
diff --git a/docs/postcss.config.js b/docs/postcss.config.js
@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    'postcss-import': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/docs/src/components/ActionButton.tsx b/docs/src/components/ActionButton.tsx
@@ -0,0 +1,57 @@
+import { LucideIcon } from 'lucide-react'
+import { MouseEvent, MouseEventHandler, useState } from 'react'
+
+const ActionButton = ({
+  clickAction,
+  Icon,
+  IconOnClick = undefined,
+  tooltip = '',
+}: ReplayButtonProps) => {
+  const [clicked, setClicked] = useState(false)
+  function handleClick(e: MouseEvent) {
+    clickAction(e)
+    setClicked(true)
+    setTimeout(() => setClicked(false), 2000)
+  }
+  return (
+    <div
+      onClick={(e) => {
+        handleClick(e)
+      }}
+      title={tooltip}
+      className="group cursor-pointer p-1"
+    >
+      <div
+        className={
+          'ease-custom relative flex size-6 items-center justify-center rounded-full bg-gradient-to-tr from-slate-400 to-indigo-500 text-zinc-100 opacity-80 ' +
+          'overflow-hidden transition-[transform,opacity] duration-300 group-hover:scale-125 group-hover:opacity-100 ' +
+          (clicked ? 'scale-125' : 'group-hover:scale-125')
+        }
+      >
+        <Icon
+          className={
+            'ease-custom absolute size-3 transition-[opacity,transform] duration-500 group-hover:rotate-180 ' +
+            (clicked ? 'translate-y-24 rotate-180 delay-300' : 'translate-y-0 delay-75')
+          }
+        />
+        {IconOnClick && (
+          <IconOnClick
+            className={
+              'ease-custom size-3 transition-[opacity,transform] duration-[1s] ' +
+              (clicked ? 'translate-y-0' : '-translate-y-24')
+            }
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export interface ReplayButtonProps {
+  clickAction: MouseEventHandler
+  Icon: LucideIcon
+  IconOnClick?: LucideIcon | undefined
+  tooltip: string
+}
+
+export default ActionButton
diff --git a/docs/src/components/Code.tsx b/docs/src/components/Code.tsx
@@ -0,0 +1,17 @@
+import { PropsWithChildren } from 'react'
+
+const Code = ({ children }: PropsWithChildren<InlineCodeProps>) => (
+  <code
+    className={
+      'whitespace-nowrap bg-fuchsia-200/40 p-1 px-1 py-0.5 font-mono text-sm text-zinc-900 dark:bg-indigo-200/20 dark:text-zinc-300'
+    }
+  >
+    {children}
+  </code>
+)
+
+export interface InlineCodeProps {
+  children: PropsWithChildren
+}
+
+export default Code
diff --git a/docs/src/components/CodeBlock.tsx b/docs/src/components/CodeBlock.tsx
@@ -0,0 +1,52 @@
+import { LucideIcon } from 'lucide-react'
+import Prism from 'prismjs'
+import { PropsWithChildren, useEffect } from 'react'
+import Link from './Link.tsx'
+
+const CodeBlock = ({
+  children,
+  Icon = undefined,
+  language = 'javascript',
+  linkHref = '',
+  linkText = '',
+}: PropsWithChildren<CodeProps>) => {
+  useEffect(() => {
+    Prism.highlightAll()
+  }, [])
+
+  return (
+    <div
+      className={
+        'mb-4 rounded-lg border border-zinc-300 bg-zinc-100 text-zinc-900 dark:border-zinc-700 dark:bg-slate-800 dark:text-zinc-300'
+      }
+    >
+      <code
+        className={`language-${language} block overflow-y-auto whitespace-pre rounded-lg bg-transparent p-4 text-sm dark:text-zinc-300`}
+      >
+        {children}
+      </code>
+      {linkHref && (
+        <div
+          className={
+            'flex items-center gap-1 border-t border-t-zinc-300 bg-zinc-200/10 px-4 py-2 text-xs dark:border-t-slate-700 dark:bg-zinc-800/10 '
+          }
+        >
+          {Icon && <Icon size={14} strokeWidth={2} />}
+          <Link href={linkHref} target={'_blank'} borderWidth={'narrow'}>
+            {linkText ? linkText : linkHref}
+          </Link>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export interface CodeProps {
+  children: PropsWithChildren
+  Icon?: LucideIcon | undefined
+  language?: 'javascript' | 'css' | 'html'
+  linkHref?: string | undefined
+  linkText?: string | undefined
+}
+
+export default CodeBlock
diff --git a/docs/src/components/DarkModeSwitch.tsx b/docs/src/components/DarkModeSwitch.tsx
@@ -0,0 +1,40 @@
+import { motion } from 'framer-motion'
+import { Moon, Sun } from 'lucide-react'
+import { MouseEventHandler, useState } from 'react'
+
+const DarkModeSwitch = () => {
+  const systemDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
+  const storageModeDark = localStorage.getItem('mode') === 'dark'
+  const [darkMode, setDarkMode] = useState(storageModeDark || systemDarkMode ? true : false)
+  const classList = document.documentElement.classList
+  darkMode ? classList.add('dark') : classList.remove('dark')
+
+  const switchMode = () => {
+    localStorage.setItem('mode', darkMode ? 'light' : 'dark')
+    setDarkMode(!darkMode)
+  }
+
+  return (
+    <div
+      className="flex size-8 cursor-pointer flex-col overflow-hidden rounded-full transition-colors hover:bg-white/40 dark:hover:bg-slate-500/60"
+      onClick={switchMode}
+    >
+      <motion.div
+        initial={{ y: !darkMode ? 0 : '-2rem' }}
+        animate={{ y: !darkMode ? 0 : '-2rem' }}
+        transition={{ ease: [0.65, 0.05, 0.17, 0.99], duration: 0.5, delay: 0.2 }}
+        className="group flex flex-col"
+      >
+        <Sun className="size-8 p-1 transition-transform duration-700 ease-line group-hover:rotate-[22deg]" />
+        <Moon className="size-8 p-1 transition-transform duration-700 ease-line group-hover:-rotate-[22deg]" />
+      </motion.div>
+    </div>
+  )
+}
+
+export interface ModeSwitchProps {
+  mode: string
+  onClick: MouseEventHandler
+}
+
+export default DarkModeSwitch
diff --git a/docs/src/components/DemoAnimationExampleRow.tsx b/docs/src/components/DemoAnimationExampleRow.tsx
@@ -0,0 +1,34 @@
+import { addWithSpace } from '../utils/addWithSpace'
+import Code from './Code'
+
+const DemoAnimationExampleRow = ({ animations, timeline }: DemoAnimationExampleRowProps) => {
+  const animationClasses = animations.split(' ')
+  return (
+    <div className="flex items-center gap-2 sm:flex-col sm:items-start">
+      <div className="w-36 flex-shrink-0">
+        {animationClasses.map((animation) => (
+          <Code key={animation}>{animation}</Code>
+        ))}
+      </div>
+      <div className="relative w-full flex-1 rounded-full bg-slate-300/40 text-sm sm:flex-none dark:bg-slate-300/20">
+        <span className="absolute left-1 font-mono text-xs opacity-50">0%</span>
+        <span className="absolute left-1/2 top-1.5 size-1 -translate-x-1/2 rotate-90 rounded-full bg-current font-mono text-xs opacity-30 sm:opacity-50"></span>
+        <span className="absolute right-1 font-mono text-xs opacity-50">100%</span>
+        <div
+          className={
+            'h-4 w-0 animate-scale-to-right rounded-full bg-sky-500/70 dark:bg-fuchsia-500/60' +
+            addWithSpace(animations) +
+            addWithSpace(timeline)
+          }
+        ></div>
+      </div>
+    </div>
+  )
+}
+
+export interface DemoAnimationExampleRowProps {
+  animations: string
+  timeline: string
+}
+
+export default DemoAnimationExampleRow
diff --git a/docs/src/components/HeaderNavAnchor.tsx b/docs/src/components/HeaderNavAnchor.tsx
@@ -0,0 +1,32 @@
+import { PropsWithChildren } from 'react'
+import { NavLink } from 'react-router-dom'
+
+const HeaderNavAnchor = ({
+  children,
+  to: href,
+  className = '',
+  external = false,
+}: PropsWithChildren<HeaderNavAnchorProps>) => {
+  return (
+    <NavLink
+      to={href}
+      className={({ isActive }) =>
+        'flex items-center justify-center rounded-full px-2 text-sm font-medium transition-colors duration-200 md:min-w-12 ' +
+        'hover:bg-fuchsia-400/40 dark:hover:bg-slate-500/60 ' +
+        (isActive ? 'bg-fuchsia-400/30 dark:bg-slate-500/50 ' : '') +
+        (className != '' ? ` ${className}` : '')
+      }
+      target={external ? '_blank' : ''}
+    >
+      {children}
+    </NavLink>
+  )
+}
+
+export interface HeaderNavAnchorProps {
+  children: PropsWithChildren
+  to: string
+  className?: string | undefined
+  external?: boolean
+}
+export default HeaderNavAnchor