feat(dialog): setup dialog template

packages/components/dialog/.npmignore

@@ -0,0 +1,2 @@
+src
+**/*.stories.*

packages/components/dialog/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@spark-ui/dialog",
+  "version": "1.0.0",
+  "description": "A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "vite build"
+  },
+  "peerDependencies": {
+    "react": "^16.8 || ^17.0 || ^18.0",
+    "react-dom": "^16.8 || ^17.0 || ^18.0",
+    "tailwindcss": "^3.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:adevinta/spark.git",
+    "directory": "packages/components/dialog"
+  },
+  "bugs": {
+    "url": "https://github.com/adevinta/spark/issues"
+  },
+  "homepage": "https://sparkui.vercel.app",
+  "license": "MIT"
+}

packages/components/dialog/src/Dialog.doc.mdx

@@ -0,0 +1,31 @@
+import { Meta, Canvas } from '@storybook/addon-docs'
+import { ArgTypes } from '@storybook/blocks';
+
+import { Dialog } from '.'
+
+import * as stories from './Dialog.stories'
+
+<Meta of={stories} />
+
+# Dialog
+
+A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
+
+## Install
+
+```sh
+npm install @spark-ui/dialog
+```
+
+## Import
+
+```tsx
+import { Dialog } from "@spark-ui/dialog"
+```
+
+## Props
+
+<ArgTypes of={Dialog} />
+
+## Variants
+<Canvas of={stories.Default} />

packages/components/dialog/src/Dialog.stories.tsx

@@ -0,0 +1,12 @@
+import { Meta, StoryFn } from '@storybook/react'
+
+import { Dialog } from '.'
+
+const meta: Meta<typeof Dialog> = {
+  title: 'Components/Dialog',
+  component: Dialog,
+}
+
+export default meta
+
+export const Default: StoryFn = _args => <Dialog>Hello World!</Dialog>

packages/components/dialog/src/Dialog.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import { Dialog } from './Dialog'
+
+describe('Dialog', () => {
+  it('should render', () => {
+    render(<Dialog>Hello World!</Dialog>)
+
+    expect(screen.getByText('Hello World!')).toBeInTheDocument()
+  })
+
+  it('should trigger click event', async () => {
+    const user = userEvent.setup()
+    const clickEvent = vi.fn()
+
+    // Given
+    render(<div onClick={clickEvent}>Hello World!</div>)
+
+    // When
+    await user.click(screen.getByText('Hello World!'))
+
+    // Then
+    expect(clickEvent).toHaveBeenCalledTimes(1)
+  })
+})

packages/components/dialog/src/Dialog.tsx

@@ -0,0 +1,7 @@
+import { ComponentPropsWithoutRef, forwardRef, PropsWithChildren } from 'react'
+
+export type DialogProps = ComponentPropsWithoutRef<'div'>
+
+export const Dialog = forwardRef<HTMLDivElement, PropsWithChildren<DialogProps>>((props, ref) => {
+  return <div ref={ref} {...props} />
+})

packages/components/dialog/src/index.ts

@@ -0,0 +1 @@
+export { Dialog } from './Dialog'

packages/components/dialog/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["src/**/*", "../../../global.d.ts"]
+}

packages/components/dialog/vite.config.ts

@@ -0,0 +1,6 @@
+import path from 'path'
+import { getComponentConfiguration } from '../../../config/index'
+
+const { name } = require(path.resolve(__dirname, 'package.json'))
+
+export default getComponentConfiguration(process.cwd(), name)