Repository: skeletonlabs/floating-ui-svelte (ts)

Issue:
Add CONTRIBUTING.md and GitHub Issue and PR templates
We need a few additions to help contributors:

1. Add contribution information. Link it in the set repo `.md` file
2. Setup GitHub Issue templates (feature requests, docs, bug tickets, etc)
3. Setup GitHub PR templates (link, description, checklist)

Pull request:
Add Contribution assets
Closes #25

Adds:

- Contribution markdown file
- GitHub
  - PR template
  - Multiple Issue templates
  - Funding metadata

Patch:
diff --git a/.changeset/beige-flies-mate.md b/.changeset/beige-flies-mate.md
deleted file mode 100644
index 3806497..0000000
--- a/.changeset/beige-flies-mate.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@skeletonlabs/floating-ui-svelte": minor
----
-
-Added `useRole` hook
diff --git a/.changeset/config.json b/.changeset/config.json
index e7aa985..f9654a0 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -1,10 +1,10 @@
 {
 	"$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
-	"changelog": "@changesets/cli/changelog",
+	"changelog": ["@changesets/cli/changelog", { "repo": "skeletonlabs/floating-ui-svelte" }],
 	"commit": false,
 	"fixed": [],
 	"linked": [],
-	"access": "restricted",
+	"access": "public",
 	"baseBranch": "dev",
 	"updateInternalDependencies": "patch",
 	"ignore": []
diff --git a/.changeset/curvy-snakes-tickle.md b/.changeset/curvy-snakes-tickle.md
deleted file mode 100644
index da03943..0000000
--- a/.changeset/curvy-snakes-tickle.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@skeletonlabs/floating-ui-svelte": minor
----
-
-Added the `useHover` hook
diff --git a/.changeset/nine-hounds-flow.md b/.changeset/nine-hounds-flow.md
deleted file mode 100644
index 6d8b8b8..0000000
--- a/.changeset/nine-hounds-flow.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@skeletonlabs/floating-ui-svelte": minor
----
-
-feature: added the FloatingArrow component
diff --git a/.changeset/red-cobras-unite.md b/.changeset/red-cobras-unite.md
deleted file mode 100644
index 2eb6aad..0000000
--- a/.changeset/red-cobras-unite.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@skeletonlabs/floating-ui-svelte": minor
----
-
-Added the `useInteractions` hook
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 0000000..295485d
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+github: [skeletonlabs]
+patreon: 'user?u=83786276' # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: skeletonlabs # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
new file mode 100644
index 0000000..9668c81
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -0,0 +1,38 @@
+name: 🐞 Bug
+description: Report an issue or bug
+labels: [bug]
+body:
+  - type: textarea
+    attributes:
+      label: Current Behavior
+      description: A description of what you're experiencing.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Expected Behavior
+      description: A description of what you're experiencing.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Steps To Reproduce
+      description: Describe how to reproduce the issue.
+      placeholder: |
+        1. Using this component...
+        2. With these properties...
+        3. Click '...'
+        4. See error...
+    validations:
+      required: false
+  - type: input
+    id: reproduction
+    attributes:
+      label: Link to Reproduction / Stackblitz
+  - type: textarea
+    attributes:
+      label: More Information
+      description: |
+        Provide relevant links or additionl information.
+    validations:
+      required: false
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 0000000..26aba2e
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,8 @@
+blank_issues_enabled: true
+contact_links:
+  - name: Get support on Discord
+    url: https://discord.com/channels/1003691521280856084/1003691521721245792
+    about: Reach out on Discord in the floating-ui-svelte channel
+  - name: Ask a question, give feedback, share your project
+    url: https://github.com/skeletonlabs/floating-ui-svelte/discussions
+    about: Connect with other community members with GitHub discussions
diff --git a/.github/ISSUE_TEMPLATE/docs_issue.yml b/.github/ISSUE_TEMPLATE/docs_issue.yml
new file mode 100644
index 0000000..0425522
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/docs_issue.yml
@@ -0,0 +1,12 @@
+name: 📗 Report Docs Issue
+description: Use this to report a typo or incorrect information.
+labels: [documentation]
+body:
+  - type: input
+    id: link
+    attributes:
+      label: Link to the Page
+  - type: textarea
+    id: quote
+    attributes:
+      label: Describe the Issue (screenshots encouraged!)
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
new file mode 100644
index 0000000..50682f8
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -0,0 +1,12 @@
+name: 🛠️ Request New Feature
+description: Let us know what you would like to see added.
+labels: ['feature request']
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the feature in detail (code, mocks, or screenshots encouraged)
+  - type: textarea
+    id: references
+    attributes:
+      label: Provide relevant links or additional information.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
new file mode 100644
index 0000000..1ac6cb3
--- /dev/null
+++ b/.github/pull_request_template.md
@@ -0,0 +1,30 @@
+## Linked Issue
+
+Closes #{issueNumber}
+
+## Description
+
+{description}
+
+## Changsets
+
+We use [Changesets](https://github.com/changesets/changesets) to automatically create our changelog per each release. Any changes or additions to the Library assets in `/lib` must be documented with a new Changeset. This can be done as follows:
+
+2. Navigate to the root of the project on your feature branch.
+3. Run `pnpm changeset` to trigger the Changeset CLI.
+4. Follow the instructions when prompted.
+    - Changesets should be either `minor` or `patch`. Never `major`.
+    - Prefix your Changeset description using: `docs:`, `feature:`, `chore:` or `bugfix:`.
+5. Changeset `.md` files are added to the `/.changeset` directory.
+6. Commit and push the the new changeset file.
+
+## Checklist
+
+Please read and apply all [contribution requirements](https://github.com/skeletonlabs/floating-ui-svelte/blob/chore/main/CONTRIBUTING.md).
+
+- [ ] PR targets the `dev` branch (NEVER `master`)
+- [ ] All website documentation is current with your changes
+- [ ] Ensure Prettier formatting is current - run `pnpm format`
+- [ ] Ensure Prettier linting is current - run `pnpm format`
+- [ ] All test cases are passing - run `pnpm vitest`
+- [ ] Includes a changeset (if relevant; see above)
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index f6996eb..5ba91e6 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -37,3 +37,10 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Merge main into dev after publish
+        if: steps.changesets.outputs.published == 'true'
+        run: |
+          git checkout dev
+          git merge main
+          git push
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..deb7067
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,10 @@
+# @skeletonlabs/floating-ui-svelte
+
+## 0.1.0
+
+### Minor Changes
+
+- 3ae279e: Added `useRole` hook
+- 8159907: Added the `useHover` hook
+- 5cd74c9: feature: added the FloatingArrow component
+- 08a58ab: Added the `useInteractions` hook
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..ec80562
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,113 @@
+# Contributing
+
+This project is created using [SvelteKit](https://kit.svelte.dev/), [Tailwind](https://tailwindcss.com/) for styling, and [pnpm](https://pnpm.io/) for package management.
+
+## How to Contribute
+
+Take care to read all contributions guidelines before you begin!
+
+1. Learn how to [contribute to open source](https://opensource.guide/how-to-contribute/).
+2. Follow a [step-by-step guide](https://github.com/firstcontributions/first-contributions) to practice your first contribution.
+3. Locate an [open issue on GitHub](https://github.com/skeletonlabs/floating-ui-svelte/issues). Let us know you would like to volunteer.
+4. Optionally, you may coordinate efforts on the `#contributors` channel within [Discord](https://discord.gg/EXqV7W8MtY).
+5. If the maintainers approves your request, you'll be assigned to the issue.
+6. Complete the work and submit a pull request and we'll review the changes.
+
+> NOTE: non-trivial PRs submitted without our prior consent will be denied. Repeat offenders will be banned.
+
+## Using PNPM
+
+Floating UI Sveltes makes use of [PNPM](https://pnpm.io/).
+
+1. [Install PNPM](https://pnpm.io/installation) on your local computer.
+2. [Fork the repository](https://github.com/skeletonlabs/floating-ui-svelte) via your preferred option.
+3. Use Git to clone the forked project to your local machine.
+4. Point your terminal at the project.
+5. Run `pnpm i` to install the required depedencies.
+6. Run `pnpm dev` to start a local dev server.
+
+## Project Structure
+
+The floating UI Svelte project is built using SvelteKit to handle both the documentation and library assets.
+
+| Path | Description |
+| --- | --- |
+| Documentation | Found in the `/src/routes` directory. |
+| Library | Found in the `/src/lib` directory. |
+
+## Branch
+
+Floating UI Svelte uses two primary branches. All pull requests should be created again the `dev` branch.
+
+| Branch | Description | Pull Requests |
+| --- | --- | --- |
+| `dev` | The developement branch. | Allowed |
+| `main` | The release branch. | Never |
+
+### PR Branch Conventions
+
+Please use the following naming convention when creating your pull request.
+
+| Branch | Role |
+| --- | --- |
+| `docs/*` | Updates for the documentation site. |
+| `feature/*` | When implementing a new feature. |
+| `chore/*` | When implementing small changes. |
+| `bugfix/*` | When implementing feature bugfixes. |
+
+Keep branch names short and semantic, using dashes to seperate words.
+
+```
+docs/getting-started-typo-fix
+bugfix/fixed-use-floating-bug
+```
+
+## Changesets
+
+[Changesets](https://github.com/changesets/changesets) are used to automatically generate the changelog for each release. Any contributions made to projects that live within the `/lib` directory must contain a Changeset. Use the following instructions to generate a changeset.
+
+1. Make sure you're within local pull request feature branch.
+2. Navigate to the root of the project.
+3. Run `pnpm changeset` to trigger the Changeset CLI.
+4. Follow the instructions when prompted.
+5. Changeset are added to the `/.changeset` directory.
+6. Commit and push the the new changeset file.
+
+Changesets use semantic version. We recommend the following convention.
+
+| Version | Role |
+| --- | --- |
+| `major` | Do not use. Reserved for maintainers. |
+| `minor` | For notable changes, such as a new features. |
+| `patch` | For small changes, such as a chore or typo. |
+
+Changeset descriptions will appear verbatim on the [Changelog](https://github.com/skeletonlabs/skeleton/blob/dev/packages/skeleton/CHANGELOG.md). Keep it short, semantic, and prefix this like branch names.
+
+```mdx
+---
+'@skeletonlabs/floating-ui-svelte': minor
+---
+
+feat: Added a new useFoo hook.
+```
+
+## Tooling
+
+Floating UI Svelte makes use of the following technology for improving the developer experience.
+
+### Prettier
+
+We use [Prettier](https://prettier.io/) for code formatting and linting.
+
+```console
+pnpm format
+pnpm lint
+```
+
+### Test Suite
+
+Unit tests are handled via [Vitest](https://vitest.dev/).
+
+```console
+pnpm vitest
+```
diff --git a/package.json b/package.json
index af5dad0..ecf2641 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@skeletonlabs/floating-ui-svelte",
-	"version": "0.0.0",
+	"version": "0.1.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
@@ -9,7 +9,6 @@
 		"build:docs": "svelte-kit sync && vite build",
 		"build:package": "svelte-kit sync && svelte-package && publint",
 		"ci:publish": "pnpm build:package && changeset publish",
-		"publish": "pnpm build:package && changeset publish",
 		"test": "vitest run --coverage",
 		"test:watch": "vitest run --coverage --watch",
 		"format": "prettier --write .",
diff --git a/src/lib/components/FloatingArrow/FloatingArrow.svelte b/src/lib/components/FloatingArrow/FloatingArrow.svelte
index 11d2b2a..02c9cf6 100644
--- a/src/lib/components/FloatingArrow/FloatingArrow.svelte
+++ b/src/lib/components/FloatingArrow/FloatingArrow.svelte
@@ -87,6 +87,7 @@
 </script>
 
 <!-- FIXME: extend styleObjectToString type to accept `rest.styles` -->
+
 <svg
 	bind:this={ref}
 	width={isCustomShape ? width : width + computedStrokeWidth}
@@ -100,6 +101,7 @@
 		[yOffsetProp]: `${arrowY}`,
 		[side]: isVerticalSide || isCustomShape ? '100%' : `calc(100% - ${computedStrokeWidth / 2}px)`,
 		transform: `${rotation} ${transform ?? ''}`,
+		fill,
 	})}
 	data-testid="floating-arrow"
 	{...rest}


Test patch:
diff --git a/src/lib/components/FloatingArrow/FloatingArrow.test.svelte.ts b/src/lib/components/FloatingArrow/FloatingArrow.test.svelte.ts
index ae875e9..cc284d9 100644
--- a/src/lib/components/FloatingArrow/FloatingArrow.test.svelte.ts
+++ b/src/lib/components/FloatingArrow/FloatingArrow.test.svelte.ts
@@ -1,20 +1,77 @@
-import { describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it } from 'vitest';
+import { screen, cleanup, render } from '@testing-library/svelte';
 import { withEffect } from '$lib/utils/test.svelte.js';
-import { render } from '@testing-library/svelte';
+
 import FloatingArrow from './FloatingArrow.svelte';
 import { useFloating } from '$lib/hooks/useFloating/index.svelte.js';
 
 describe('FloatingArrow', () => {
+	afterEach(() => cleanup());
+
 	it(
 		'renders the component to default props',
 		withEffect(() => {
 			const arrowRef = document.createElement('div');
 			const floating = useFloating();
-			const { getByTestId } = render(FloatingArrow, {
+			render(FloatingArrow, {
 				props: { ref: arrowRef, context: floating.context },
 			});
-			const component = getByTestId('floating-arrow');
+			const component = screen.getByTestId('floating-arrow');
 			expect(component).toBeInTheDocument();
 		}),
 	);
+
+	it(
+		'renders position based on context placement',
+		withEffect(() => {
+			const arrowRef = document.createElement('div');
+			const floating = useFloating({ placement: 'left' });
+			render(FloatingArrow, {
+				props: { ref: arrowRef, context: floating.context, width: 20, height: 20 },
+			});
+			const component = screen.getByTestId('floating-arrow');
+			expect(component.style.left).toBe('calc(100% - 0px)');
+		}),
+	);
+
+	it(
+		'renders with a custom width and height',
+		withEffect(() => {
+			const arrowRef = document.createElement('div');
+			const floating = useFloating();
+			render(FloatingArrow, {
+				props: { ref: arrowRef, context: floating.context, width: 20, height: 20 },
+			});
+			const component = screen.getByTestId('floating-arrow');
+			expect(component.getAttribute('width')).equals('20');
+			expect(component.getAttribute('height')).equals('20');
+		}),
+	);
+
+	it(
+		'renders with a custom transform',
+		withEffect(() => {
+			const arrowRef = document.createElement('div');
+			const floating = useFloating();
+			render(FloatingArrow, {
+				props: { ref: arrowRef, context: floating.context, transform: '123px' },
+			});
+			const component = screen.getByTestId('floating-arrow');
+			expect(component.style.transform).toContain('123px');
+		}),
+	);
+
+	it(
+		'renders with a custom fill',
+		withEffect(() => {
+			const arrowRef = document.createElement('div');
+			const floating = useFloating();
+			const testFillColor = 'green';
+			render(FloatingArrow, {
+				props: { ref: arrowRef, context: floating.context, fill: testFillColor },
+			});
+			const component = screen.getByTestId('floating-arrow');
+			expect(component.style.fill).toContain(testFillColor);
+		}),
+	);
 });