feat: use vite and ts

src/components/App.tsx

@@ -0,0 +1,71 @@
+import Avatar from 'components/Avatar'
+import logo from 'assets/logo.svg'
+
+const randoms = [
+  [1, 2],
+  [3, 4, 5],
+  [6, 7]
+]
+
+function App() {
+  return (
+    <div className="relative overflow-hidden bg-white">
+      <div className="h-screen sm:pb-40 sm:pt-24 lg:pb-48 lg:pt-40">
+        <div className="relative mx-auto max-w-7xl px-4 sm:static sm:px-6 lg:px-8">
+          <div className="sm:max-w-lg">
+            <div className="my-4">
+              <Avatar size="large" src={logo} />
+            </div>
+            <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
+              Welcome!
+            </h1>
+            <p className="mt-4 text-xl text-gray-500">
+              This is a boilerplate build with Vite, React 18, TypeScript,
+              Vitest, Testing Library, TailwindCSS 3, Eslint and Prettier.
+            </p>
+          </div>
+          <div>
+            <div className="my-10">
+              <a
+                href="vscode://"
+                className="inline-block rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-center font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-700 focus:ring-offset-2"
+              >
+                Start building for free
+              </a>
+              <div
+                aria-hidden="true"
+                className="pointer-events-none mt-10 md:mt-0 lg:absolute lg:inset-y-0 lg:mx-auto lg:w-full lg:max-w-7xl"
+              >
+                <div className="absolute sm:left-1/2 sm:top-0 sm:translate-x-8 lg:left-1/2 lg:top-1/2 lg:-translate-y-1/2 lg:translate-x-8">
+                  <div className="flex items-center space-x-6 lg:space-x-8">
+                    {randoms.map((random, number) => (
+                      <div
+                        key={`random-${random[number]}`}
+                        className="grid shrink-0 grid-cols-1 gap-y-6 lg:gap-y-8"
+                      >
+                        {random.map((number) => (
+                          <div
+                            key={`random-${number}`}
+                            className="h-64 w-44 overflow-hidden rounded-lg sm:opacity-0 lg:opacity-100"
+                          >
+                            <img
+                              src={`https://picsum.photos/600?random=${number}`}
+                              alt=""
+                              className="size-full bg-indigo-100 object-cover object-center"
+                            />
+                          </div>
+                        ))}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default App

src/components/Avatar/__snapshots__/test.tsx.snap

@@ -0,0 +1,42 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<Avatar /> > should render the empty Avatar 1`] = `
+<span
+  class="inline-block overflow-hidden bg-gray-100 rounded-full w-12 h-12"
+  data-testid="empty-avatar"
+>
+  <svg
+    class="size-full text-gray-300"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z"
+    />
+  </svg>
+</span>
+`;
+
+exports[`<Avatar /> > should render the large Avatar 1`] = `
+<img
+  alt="Avatar"
+  class="inline-block rounded-full w-14 h-14"
+  src="https://gravatar.com/4405735f6f3129e0286d9d43e7b460d0"
+/>
+`;
+
+exports[`<Avatar /> > should render the medium Avatar as default 1`] = `
+<img
+  alt="Avatar"
+  class="inline-block rounded-full w-12 h-12"
+  src="https://gravatar.com/4405735f6f3129e0286d9d43e7b460d0"
+/>
+`;
+
+exports[`<Avatar /> > should render the small Avatar 1`] = `
+<img
+  alt="Avatar"
+  class="inline-block rounded-full w-10 h-10"
+  src="https://gravatar.com/4405735f6f3129e0286d9d43e7b460d0"
+/>
+`;

src/components/Avatar/index.tsx

@@ -0,0 +1,47 @@
+import { classNames } from 'utils'
+
+type Size = 'small' | 'medium' | 'large'
+
+type AvatarProps = {
+  size?: Size
+  src?: string
+  alt?: string
+}
+
+const sizes: Record<Size, string> = {
+  small: 'w-10 h-10',
+  medium: 'w-12 h-12',
+  large: 'w-14 h-14'
+}
+
+const EmptyAvatar = ({ size = 'medium' }: Pick<AvatarProps, 'size'>) => (
+  <span
+    data-testid="empty-avatar"
+    className={classNames(
+      'inline-block overflow-hidden bg-gray-100 rounded-full',
+      sizes[size]
+    )}
+  >
+    <svg
+      className="size-full text-gray-300"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
+    </svg>
+  </span>
+)
+
+export default function Avatar({ size = 'medium', src, alt }: AvatarProps) {
+  if (!src) {
+    return <EmptyAvatar size={size} />
+  }
+
+  return (
+    <img
+      className={classNames('inline-block rounded-full', sizes[size])}
+      src={src}
+      alt={alt}
+    />
+  )
+}

src/components/Avatar/test.tsx

@@ -0,0 +1,64 @@
+import { render, screen } from '@testing-library/react'
+
+import Avatar from '.'
+
+describe('<Avatar />', () => {
+  const props = {
+    src: 'https://gravatar.com/4405735f6f3129e0286d9d43e7b460d0',
+    alt: 'Avatar'
+  }
+
+  it('should render the medium Avatar as default', () => {
+    const { container } = render(<Avatar {...props} />)
+
+    expect(screen.getByRole('img', { name: /Avatar/i })).toBeInTheDocument()
+
+    expect(container.firstChild).toHaveClass(
+      'inline-block w-12 h-12 rounded-full'
+    )
+
+    expect(container.firstChild).toMatchSnapshot()
+  })
+
+  it('should render the small Avatar', () => {
+    const { container } = render(<Avatar size="small" {...props} />)
+
+    expect(screen.getByRole('img', { name: /Avatar/i })).toBeInTheDocument()
+
+    expect(container.firstChild).toHaveClass(
+      'inline-block w-10 h-10 rounded-full'
+    )
+
+    expect(container.firstChild).toMatchSnapshot()
+  })
+
+  it('should render the medium Avatar', () => {
+    const { container } = render(<Avatar size="medium" {...props} />)
+
+    expect(screen.getByRole('img', { name: /Avatar/i })).toBeInTheDocument()
+
+    expect(container.firstChild).toHaveClass(
+      'inline-block w-12 h-12 rounded-full'
+    )
+  })
+
+  it('should render the large Avatar', () => {
+    const { container } = render(<Avatar size="large" {...props} />)
+
+    expect(screen.getByRole('img', { name: /Avatar/i })).toBeInTheDocument()
+
+    expect(container.firstChild).toHaveClass(
+      'inline-block w-14 h-14 rounded-full'
+    )
+
+    expect(container.firstChild).toMatchSnapshot()
+  })
+
+  it('should render the empty Avatar', () => {
+    const { container } = render(<Avatar />)
+
+    expect(screen.getByTestId('empty-avatar')).toBeInTheDocument()
+
+    expect(container.firstChild).toMatchSnapshot()
+  })
+})

src/components/test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react'
+
+import App from './App'
+
+describe('<App />', () => {
+  it('should render the App', () => {
+    const { container } = render(<App />)
+
+    expect(
+      screen.getByRole('heading', {
+        name: /Welcome!/i,
+        level: 1
+      })
+    ).toBeInTheDocument()
+
+    expect(
+      screen.getByText(
+        /This is a boilerplate build with Vite, React 18, TypeScript, Vitest, Testing Library, TailwindCSS 3, Eslint and Prettier./i
+      )
+    ).toBeInTheDocument()
+
+    expect(
+      screen.getByRole('link', {
+        name: /start building for free/i
+      })
+    ).toBeInTheDocument()
+
+    expect(screen.getByRole('img')).toBeInTheDocument()
+
+    expect(container.firstChild).toBeInTheDocument()
+  })
+})