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,72 @@
+# Sheet
+
+A mobile web sheet that replicates the Apple-style [sheet experience](https://developer.apple.com/design/human-interface-guidelines/sheets), designed to be accessible to all users.
+
+<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>
+
+## Usage
+
+To use Sheet in your project follow these instructions.
+
+### Step 1: Install peer dependency
+
+First, make sure you have the required peer dependency [framer-motion](https://github.com/framer/motion) installed. If you haven't installed it yet, you can do so with the following command:
+
+```
+npm install framer-motion
+```
+
+### Step 2: Install the library
+
+After installing the peer dependency, proceed to install the [@sheet-ui/sheet](https://www.npmjs.com/package/@sheet-ui/sheet) package:
+
+```
+npm install @sheet-ui/sheet
+```
+
+### Step 3: Use the component
+
+The component API provides consumers with a high level of rendering control through a simple interface.
+
+```tsx
+function Example() {
+  const [isOpen, setOpen] = useState(false);
+  const toggle = () => setOpen(!isOpen);
+
+  return (
+    <Sheet size="sm" isOpen={isOpen} onDismiss={toggle}>
+      <button onClick={toggle}>Open</button>
+      <SheetContent>
+        <SheetHeader>Title</SheetHeader>
+        <div>Some content goes here</div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+```
+
+## Development
+
+To develop `@sheet-ui/sheet`, link the local library to a local test application created with [Next.js](https://nextjs.org) or [Remix](https://remix.run). You can achieve this using `npm link` to connect your library with the test app.
+
+To avoid issues caused by multiple React instances (such as hooks failing due to different React copies), ensure that both the library and the consumer app share 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
+```
+
+## Disclaimer
+
+Avoid using sheets on desktop platforms; instead, opt for regular [modals](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal) in desktop applications. While drawing inspiration from Apple's operating system can be beneficial, it's important to remember that the web is a unique platform. Web design should respect its distinct nature, rather than always attempting to mimic native iOS or other operating systems entirely. Ensure you are following [web specifications](https://html.spec.whatwg.org) and [accessible web standards](https://www.w3.org/TR/wai-aria/).

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));