feat: introduce sheet

.github/.CONTRIBUTING.md

@@ -0,0 +1,52 @@
+# Contributing Guide
+
+Thank you for your interest in contributing to our project! Before you submit a pull request, we kindly ask you to review this guide thoroughly.
+
+## Development
+
+First, [fork](https://docs.github.com/en/get-started/quickstart/fork-a-repo) and clone the repository onto your local machine. Once you have your local copy of the repository, you can commence with development. This typically involves installing the required dependencies and executing the tests.
+
+### Install Dependencies
+
+After cloning the repository, navigate to its root directory and run the following command to install the necessary dependencies:
+
+```
+npm install
+```
+
+Once you have made your changes and verified they work correctly, you can submit a [pull request from your forked repository](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request-from-a-fork).
+
+## Pull Requests
+
+Before proposing changes, please open an [issue](https://github.com/@sheet-ui/sheet/issues/new) or [discussion](https://github.com/@sheet-ui/sheet/discussions/new/choose) for collaborative decision-making on solutions prior to submitting a pull request. This enhances the effectiveness of your contributions and promotes collective input.
+
+### Workflow
+
+1. **Open an [issue](https://github.com/@sheet-ui/sheet/issues/new)**: Start by opening an issue detailing the problem you want to solve or the feature you want to add.
+1. **Fork and branch:** Fork the repository and create a new branch on your fork to work on the changes.
+1. **Add commits:** Add new commits to your branch. Remember:
+   1. Commits should be [concise, descriptive, and well formatted](https://cbea.ms/git-commit/#seven-rules).
+   1. Commits should follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0) specification and use the [standard headings](https://github.com/googleapis/release-please/blob/cb0f936e598c5bfb8d3e0a9c0eeb57ae59a35140/src/changelog-notes.ts#L43-L54).
+   1. This repository maintains a linear git history, so merge commits are not allowed.
+1. **Open a pull request:** Open a [new pull request](https://github.com/@sheet-ui/sheet/compare) on GitHub, and [link](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue) it to the issue you created in the first step.
+
+### Dependabot
+
+This repository employs [Dependabot 🤖](https://docs.github.com/en/code-security/dependabot) to [secure](https://docs.github.com/en/code-security/dependabot/dependabot-security-updates/configuring-dependabot-security-updates) and [update](https://docs.github.com/en/code-security/dependabot/dependabot-version-updates/configuring-dependabot-version-updates#about-version-updates-for-dependencies) project dependencies by automatically initiating pull requests for package upgrades. The duty of project maintainers is to review, test, approve, and merge these Dependabot-generated pull requests.
+
+## Release
+
+Project maintainers are entrusted with the task of publishing new releases. Releases are automated with Google's [release-please](https://github.com/googleapis/release-please) GitHub action. Simply put, to publish a release, you simply need to merge the release pull request (PR) 🚀.
+
+The release-please GitHub action parses [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0) to help automate the release process. It automatically generates a release PR, which is continuously updated as new commits are merged into the main branch. Once maintainers decide that it's time to publish a new release, they can merge the release PR.
+
+Upon merging the release PR, the GitHub action initiates a series of tasks:
+
+1. Updates the `CHANGELOG.md` and `package.json` files.
+1. Tags the commit associated with the release with the [version](https://semver.org) number.
+1. Creates a new GitHub release based on this tag.
+1. Publishes a new version of [the package](https://www.npmjs.com/package/@sheet-ui/sheet) to npm.
+
+## Versioning
+
+This project follows [Semantic Versioning 2.0](https://semver.org/) and the release tooling automatically parses the semantic version based on the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0).

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,55 @@
+name: Bug Report
+description: File an issue
+title: "[bug] <replace this with a title>"
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report. Please provide thorough context of the issue.
+
+  - type: input
+    attributes:
+      label: Version
+      description: What version of @sheet-ui/sheet are you using?
+      placeholder: 0.0.x
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Unexpected behavior
+      description: A thorough description of the unexpected behavior. You can also attach images, videos, code snippets below.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Expected behavior
+      description: A thorough description of the expected behavior.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Steps to reproduce
+      description: Steps to reproduce the unexpected behavior.
+    validations:
+      required: false
+
+  - type: input
+    attributes:
+      label: Minimal reproducible demo of issue
+      description: |
+        A link to a demo makes investigating the issue easier. Demos can be hosted on CodeSandbox or GitHub.
+      placeholder: https://codesandbox.io
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: Anything else?
+      description: |
+        Anything that will provide more context about the issue. You can also attach images, videos, code snippets below.
+
+    validations:
+      required: false

.github/workflows/release-please.yaml

@@ -0,0 +1,32 @@
+on:
+  push:
+    branches:
+      - main
+name: release-please
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: google-github-actions/release-please-action@v3
+        id: release
+        with:
+          release-type: node
+          package-name: test-release-please
+      # The logic below handles the npm publication:
+      - uses: actions/checkout@v3
+        # these if statements ensure that a publication only occurs when
+        # a new release is created:
+        if: ${{ steps.release.outputs.release_created }}
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          registry-url: "https://registry.npmjs.org"
+        if: ${{ steps.release.outputs.release_created }}
+      - run: npm ci
+        if: ${{ steps.release.outputs.release_created }}
+      - run: npm run build
+        if: ${{ steps.release.outputs.release_created }}
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+        if: ${{ steps.release.outputs.release_created }}

.gitignore

@@ -1 +1,5 @@
-node_modules
+# dependencies
+node_modules
+
+# artifacts
+dist

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [2024] ⟠ henryzhu.eth ⟠
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,43 @@
+# Sheet
+
+A sheet is a modal used to replicate an Apple-like sheet experience on the mobile web. However, avoid using them on desktop platforms; instead, opt for regular modals in desktop applications. While it's beneficial to draw inspiration from Apple's operating system, it's important to remember that the web is a unique platform. Design for the web should respect its distinct nature, rather than trying to mimic native iOS or other operating systems entirely.
+
+<div style="display: flex; justify-content: center;">
+  <img src="https://docs-assets.developer.apple.com/published/1f52d50425bf3c15d9fc7b46e2c99043/[email protected]" width="35%" style="margin-right: 10px;" />
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+  <img src="https://docs-assets.developer.apple.com/published/51b039c96928a882bd7c7c743976b548/[email protected]" width="35%" />
+</div>
+
+https://developer.apple.com/design/human-interface-guidelines/sheets
+
+## API
+
+```tsx
+<Sheet size="lg" isOpen={isModalOpen} onClose={toggleModal}>
+  <button onClick={toggleModal}>Open</button>
+  <SheetContent>
+    <div style={{ display: "flex", margin: "2px 18px", justifyContent: "end" }}>
+      <button onClick={toggleModal}>&#10005;</button>
+    </div>
+  </SheetContent>
+</Sheet>
+```
+
+## Development
+
+To develop your library alongside a local consumer application—such as Create React App (CRA), Next.js, or Remix—you can use npm link to link your library to the app. However, to prevent issues caused by multiple instances of React (like hooks failing due to different React copies), you need to ensure that both the library and the consumer app use the same React dependency.
+
+In the root directory of your library, run the following command to link React from your consumer app:
+
+```sh
+npm link ../my-library-consumer/node_modules/react
+```
+
+Then in the root directory of the consumer app:
+
+```sh
+npm link @sheet-ui/sheet
+```
+
+[ ] ESC doesn't work
+[ ] expose header element?

esbuild.config.mjs

@@ -2,26 +2,28 @@ import { build } from "esbuild";
 
 const isProduction = process.env.NODE_ENV === "production";
 
-// Build for CommonJS
 build({
-	entryPoints: ["src/index.tsx"], // or 'src/index.jsx' if not using TypeScript
-	bundle: true,
-	outfile: "dist/index.cjs.js",
-	platform: "node",
-	target: ["es6"], // Target ECMAScript 6
-	format: "cjs", // CommonJS format
-	external: ["react", "react-dom"], // Don't bundle React and ReactDOM
-	sourcemap: !isProduction,
+  entryPoints: ["src/index.tsx"],
+  bundle: true,
+  outfile: "dist/index.cjs.js",
+  platform: "node",
+  target: ["es6"],
+  format: "cjs",
+  external: ["react", "react-dom", "framer-motion"],
+  sourcemap: !isProduction,
+  minify: isProduction,
+  treeShaking: isProduction,
 }).catch(() => process.exit(1));
 
-// Build for ESModule
 build({
-	entryPoints: ["src/index.tsx"],
-	bundle: true,
-	outfile: "dist/index.esm.js",
-	platform: "neutral",
-	target: ["es6"],
-	format: "esm", // ESModule format
-	external: ["react", "react-dom"],
-	sourcemap: !isProduction,
+  entryPoints: ["src/index.tsx"],
+  bundle: true,
+  outfile: "dist/index.esm.js",
+  platform: "neutral",
+  target: ["es6"],
+  format: "esm",
+  external: ["react", "react-dom", "framer-motion"],
+  sourcemap: !isProduction,
+  minify: isProduction,
+  treeShaking: isProduction,
 }).catch(() => process.exit(1));