jimmy-guzman · jimmy-guzman · Nov 19, 2023 · Nov 19, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -4,6 +4,7 @@
     "daisyui",
     "degit",
     "gitzy",
+    "iconify",
     "noreferrer",
     "Parens",
     "pnpm",
@@ -13,9 +14,10 @@
     "vitest",
     "zustand"
   ],
-  "editor.formatOnSave": true,
   "css.lint.unknownAtRules": "ignore",
   "tailwindCSS.experimental.classRegex": [
     ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
-  ]
+  ],
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }
diff --git a/README.md b/README.md
@@ -16,15 +16,15 @@
 [![pnpm](https://img.shields.io/badge/pnpm-%234a4a4a.svg?style=for-the-badge&logo=pnpm&logoColor=f69220)][pnpm]
 [![GitHub Actions](https://img.shields.io/badge/GitHub_Actions-2088FF?style=for-the-badge&logo=github-actions&logoColor=white)][GitHub Actions]
 
-- ⚡️ [vite][vite] for fast server start and HMR
-- 🏷️ [TypeScript][TypeScript] for a less frustrating & consistent experience
-- 💄 [tailwindcss][tailwindcss] for utility-first CSS
-- 🧪 [vitest][vitest] for fast testing
-- 🧪 [Playwright][Playwright] for fast and reliable e2e testing
-- 🩺 [eslint][eslint] for static analysis
-- 🎨 [prettier][prettier] for formatting
-- ⚡️ [pnpm][pnpm] for fast and consistent installs
-- 👷 [GitHub Actions][GitHub Actions] for easy workflow automation
+- ⚡️ [vite][vite] for instant server start and lighting fast HMR.
+- 🏷️ [TypeScript][TypeScript] for a less frustrating & consistent experience.
+- 💄 [tailwindcss][tailwindcss] for utility-first CSS.
+- 🧪 [vitest][vitest] for fast testing.
+- 🧪 [Playwright][Playwright] for fast and reliable e2e testing.
+- 🩺 [eslint][eslint] for static analysis.
+- 🎨 [prettier][prettier] for formatting.
+- ⚡️ [pnpm][pnpm] for fast and consistent installs.
+- 👷 [GitHub Actions][GitHub Actions] for easy workflow automation.
 
 ## Usage
 

diff --git a/e2e/app.spec.ts b/e2e/app.spec.ts
@@ -14,7 +14,7 @@ test.describe('external links', () => {
   test('opened vite docs', async ({ page, context }) => {
     const pagePromise = context.waitForEvent('page')
 
-    await page.getByRole('link', { name: /vite logo/i }).click()
+    await page.getByRole('link', { name: /vite/i }).click()
 
     const newPage = await pagePromise
 
@@ -26,7 +26,7 @@ test.describe('external links', () => {
   test('opened React docs', async ({ page, context }) => {
     const pagePromise = context.waitForEvent('page')
 
-    await page.getByRole('link', { name: /react logo/i }).click()
+    await page.getByRole('link', { name: /react/i }).click()
 
     const newPage = await pagePromise
 
@@ -38,7 +38,7 @@ test.describe('external links', () => {
   test('opened TypeScript docs', async ({ page, context }) => {
     const pagePromise = context.waitForEvent('page')
 
-    await page.getByRole('link', { name: /TypeScript logo/i }).click()
+    await page.getByRole('link', { name: /TypeScript/i }).click()
 
     const newPage = await pagePromise
 
@@ -50,7 +50,7 @@ test.describe('external links', () => {
   test('opened tailwindcss docs', async ({ page, context }) => {
     const pagePromise = context.waitForEvent('page')
 
-    await page.getByRole('link', { name: /tailwindcss logo/i }).click()
+    await page.getByRole('link', { name: /tailwindcss/i }).click()
 
     const newPage = await pagePromise
 
@@ -62,7 +62,7 @@ test.describe('external links', () => {
   test('opened repo', async ({ page, context }) => {
     const pagePromise = context.waitForEvent('page')
 
-    await page.getByRole('link', { name: /repo/i }).click()
+    await page.getByRole('link', { name: /get started/i }).click()
 
     const newPage = await pagePromise
 

diff --git a/index.html b/index.html
@@ -4,6 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Another opinionated React Starter using Vite, TypeScript and tailwindcss."
+    />
     <title>React Starter</title>
   </head>
   <body class="grid min-h-screen place-items-center">

diff --git a/package.json b/package.json
@@ -23,6 +23,8 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
+    "@iconify-json/logos": "1.1.38",
+    "@iconify/tailwind": "0.1.3",
     "@playwright/test": "1.40.0",
     "@tailwindcss/typography": "0.5.10",
     "@testing-library/dom": "9.3.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.spec.tsx b/src/App.spec.tsx
@@ -7,8 +7,8 @@ describe('app', () => {
 
     await user.click(screen.getByRole('button', { name: /count is 0/i }))
 
-    await expect(
-      screen.findByRole('button', { name: /count is 1/i })
-    ).resolves.toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: /count is 1/i })
+    ).toBeInTheDocument()
   })
 })
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,53 +1,54 @@
 import { useState } from 'react'
 
-import reactLogo from './assets/react.svg'
-import tailwindcssLogo from './assets/tailwindcss.svg'
-import typeScriptLogo from './assets/typescript.svg'
-import viteLogo from './assets/vite.svg'
-import { Logo } from './components/Logo'
+import { XLink } from './components/XLink'
 
 export default function App() {
   const [count, setCount] = useState(0)
 
   return (
-    <div className='container prose dsy-prose mx-auto p-4 text-center'>
-      <div className='mb-8 flex items-center justify-center gap-8'>
-        <Logo name='Vite' link='https://vitejs.dev' imgSrc={viteLogo} />
-        <Logo name='React' link='https://react.dev' imgSrc={reactLogo} />
-        <Logo
-          name='TypeScript'
-          link='https://www.typescriptlang.org'
-          imgSrc={typeScriptLogo}
-        />
-        <Logo
-          name='tailwindcss'
-          link='https://tailwindcss.com'
-          imgSrc={tailwindcssLogo}
-        />
-      </div>
-      <h1>Vite + React + TypeScript + tailwindcss</h1>
-      <div>
-        <button
-          className='dsy-btn'
-          onClick={() => {
-            setCount((prevCount) => prevCount + 1)
-          }}
-        >
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-        <p>
-          Click on logos to learn more or visit the{' '}
-          <a
-            href='https://github.com/jimmy-guzman/react-starter#readme'
-            target='_blank'
-            rel='noreferrer'
-          >
-            repo
-          </a>
-        </p>
+    <div className='container mx-auto p-4'>
+      <div className='dsy-hero min-h-screen'>
+        <div className='dsy-hero-content flex-col gap-8 lg:flex-row-reverse'>
+          <div className='flex gap-4 lg:grid'>
+            <div className='text-center'>
+              <span className='icon-[logos--vitejs] text-center text-8xl' />
+            </div>
+            <div className='text-center'>
+              <span className='icon-[logos--react] animate-[spin_20s_linear_infinite] text-8xl transition duration-300' />
+            </div>
+            <div className='text-center'>
+              <span className='icon-[logos--typescript-icon] text-center text-8xl' />
+            </div>
+            <div>
+              <span className='icon-[logos--tailwindcss-icon] text-8xl' />
+            </div>
+          </div>
+          <div className='flex flex-col gap-4'>
+            <h1 className='inline bg-gradient-to-r from-primary to-secondary bg-clip-text text-8xl font-bold text-transparent'>
+              React Starter
+            </h1>
+            <p className='py-6'>
+              🍱 Another opinionated <XLink to='React'>React</XLink> Starter
+              using <XLink to='Vite'>Vite</XLink>,{' '}
+              <XLink to='TypeScript'>TypeScript</XLink> and{' '}
+              <XLink to='tailwindcss'>tailwindcss</XLink>.
+            </p>
+            <div className='flex justify-end gap-2'>
+              <button
+                className='dsy-btn dsy-btn-neutral'
+                onClick={() => {
+                  setCount((prevCount) => prevCount + 1)
+                }}
+              >
+                Count is {count}
+              </button>
+              <XLink to='repo' className='dsy-btn dsy-btn-primary'>
+                Get Started{' '}
+                <span className='icon-[logos--github-icon] text-base' />
+              </XLink>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   )

diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/assets/tailwindcss.svg b/src/assets/tailwindcss.svg
diff --git a/src/assets/typescript.svg b/src/assets/typescript.svg
diff --git a/src/assets/vite.svg b/src/assets/vite.svg
diff --git a/src/components/Logo.spec.tsx b/src/components/Logo.spec.tsx
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
diff --git a/src/components/XLink.spec.tsx b/src/components/XLink.spec.tsx
@@ -0,0 +1,11 @@
+import { render, screen } from '@/test/utils'
+
+import { XLink } from './XLink'
+
+describe('logo', () => {
+  it('should render link and image', () => {
+    render(<XLink to='Vite'>Vite</XLink>)
+
+    expect(screen.getByRole('link', { name: /vite/i })).toBeInTheDocument()
+  })
+})
diff --git a/src/components/XLink.tsx b/src/components/XLink.tsx
@@ -0,0 +1,34 @@
+import { clsx } from 'clsx'
+import { type ReactNode } from 'react'
+
+const links = {
+  Vite: 'https://vitejs.dev',
+  React: 'https://react.dev',
+  TypeScript: 'https://www.typescriptlang.org',
+  tailwindcss: 'https://tailwindcss.com',
+  repo: 'https://github.com/jimmy-guzman/react-starter#readme',
+}
+
+interface LogoProps {
+  children: ReactNode
+  className?: string
+  to: keyof typeof links
+}
+
+/**
+ * Pre-configured Type Safe External Link
+ * @example
+ * <XLink to='tailwindcss'>tailwindcss</XLink> // https://tailwindcss.com
+ */
+export const XLink = ({ to, className = 'dsy-link', children }: LogoProps) => {
+  return (
+    <a
+      href={links[to]}
+      target='_blank'
+      rel='noreferrer'
+      className={clsx(className)}
+    >
+      {children}
+    </a>
+  )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,3 +1,4 @@
+import { addDynamicIconSelectors } from '@iconify/tailwind'
 import typography from '@tailwindcss/typography'
 import daisyui from 'daisyui'
 
@@ -13,5 +14,5 @@ export default {
     prefix: 'dsy-',
     logs: false,
   },
-  plugins: [typography, daisyui],
+  plugins: [typography, daisyui, addDynamicIconSelectors()],
 }