@ribbon-studios/ribbon 1.0.4

package/.codeclimate.yml

@@ -0,0 +1,3 @@
+version: '2'
+exclude_patterns:
+  - '**/__tests__/'

package/.editorconfig

@@ -0,0 +1,13 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

package/.eslintrc

@@ -0,0 +1,15 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "plugins": ["unused-imports", "@typescript-eslint"],
+  "rules": {
+    "@typescript-eslint/no-namespace": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "unused-imports/no-unused-imports-ts": "error"
+  },
+  "ignorePatterns": ["**/node_modules/", "**/dist/", "*.d.ts"]
+}

package/.github/workflows/ci.yml

@@ -0,0 +1,104 @@
+name: Deploy
+
+on:
+  pull_request:
+    branches:
+      - main
+  push:
+    branches:
+      - main
+
+jobs:
+  install:
+    name: Install
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Install Packages
+        run: bun install --frozen-lockfile
+
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    needs: [install]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Install Packages
+        run: bun install --frozen-lockfile
+
+      - name: Lint
+        run: bun lint
+
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    needs: [install]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Install Packages
+        run: bun install --frozen-lockfile
+
+      - name: Coverage
+        run: bun run test:coverage
+
+      - name: Coveralls
+        uses: coverallsapp/github-action@master
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    needs: [install]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Install Packages
+        run: bun install --frozen-lockfile
+
+      - name: Build
+        run: bun run build
+
+      - uses: actions/upload-artifact@v2
+        with:
+          name: build
+          path: dist
+
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    needs: [lint, test, build]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Install Packages
+        run: bun install --frozen-lockfile
+
+      - uses: actions/download-artifact@v3
+        with:
+          name: build
+          path: dist
+
+      - name: Deploy
+        run: bunx semantic-release@^22
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.nvmrc

@@ -0,0 +1 @@
+18

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "semi": true,
+  "singleQuote": true,
+  "editorconfig": true,
+  "printWidth": 120
+}

package/.releaserc.yml

@@ -0,0 +1,2 @@
+branches:
+  - main

package/.vscode/settings.json

@@ -0,0 +1,24 @@
+{
+  "typescript.preferences.quoteStyle": "single",
+  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
+  "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "json.schemas": [
+    {
+      "url": "https://json.schemastore.org/prettierrc.json",
+      "fileMatch": [".prettierrc"]
+    },
+    {
+      "url": "https://json.schemastore.org/web-manifest-combined.json",
+      "fileMatch": ["site.webmanifest"]
+    }
+  ],
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnPaste": false,
+  "editor.formatOnType": false,
+  "editor.formatOnSaveMode": "file",
+  "files.autoSave": "onFocusChange"
+}

package/CONTRIBUTING.md

@@ -0,0 +1,22 @@
+### 🤖 Contributing to Ribbon 💗
+
+See an [issue](/issues) or need that you're able to fulfill?
+Then this is the perfect place for you!
+
+## Prerequisites
+
+- NodeJS 18
+
+## Setting Up Locally
+
+- Install the Dependencies
+
+```sh
+$ bun install
+```
+
+## Run the Tests~
+
+```sh
+$ bun run test
+```

package/README.md

@@ -0,0 +1,54 @@
+[![NPM Version][npm-version-image]][npm-url]
+[![NPM Downloads][npm-downloads-image]][npm-url]
+[![Coveralls][coveralls-image]][coveralls-url]
+
+[![CI Build][github-actions-image]][github-actions-url]
+[![Maintainability][maintainability-image]][maintainability-url]
+[![Semantic Release][semantic-release-image]][semantic-release-url]
+[![Code Style: Prettier][code-style-image]][code-style-url]
+
+# `@ribbon-studios/ribbon`
+
+### Preview
+
+![Example](https://github.com/ribbon-studios/ribbon/assets/9692284/5ee5e4b3-c676-4ee5-9ec4-ae7f52fd4640)
+
+### Usage
+
+```tsx
+import { Ribbon } from '@ribbon-studios/ribbon';
+
+export function MyApp() {
+  return (
+    <div>
+      My super cool content.
+      <Ribbon>Local</Ribbon>
+    </div>
+  );
+}
+```
+
+### Properties
+
+| Name            | Description                   | Optional?                     |
+| --------------- | ----------------------------- | ----------------------------- |
+| children        | The contents of the ribbon    | Yes                           |
+| color           | The font color                | Yes (defaults to `black`)     |
+| backgroundColor | The background color          | Yes (defaults to `white`)     |
+| position        | The positioning of the ribbon | Yes (defaults to `top-right`) |
+
+[_**Want to Contribute?**_](/CONTRIBUTING.md)
+
+[npm-version-image]: https://img.shields.io/npm/v/@ribbon-studios/ribbon.svg
+[npm-downloads-image]: https://img.shields.io/npm/dm/@ribbon-studios/ribbon.svg
+[npm-url]: https://npmjs.org/package/@ribbon-studios/ribbon
+[github-actions-image]: https://img.shields.io/github/actions/workflow/status/ribbon-studios/ribbon/ci.yml?event=push
+[github-actions-url]: https://github.com/ribbon-studios/ribbon/actions/workflows/ci.yml?query=branch%3Amain
+[coveralls-image]: https://img.shields.io/coveralls/ribbon-studios/ribbon.svg
+[coveralls-url]: https://coveralls.io/github/ribbon-studios/ribbon?branch=main
+[code-style-image]: https://img.shields.io/badge/code%20style-prettier-ff69b4.svg
+[code-style-url]: https://prettier.io
+[maintainability-image]: https://img.shields.io/codeclimate/maintainability/ribbon-studios/ribbon
+[maintainability-url]: https://codeclimate.com/github/ribbon-studios/ribbon/maintainability
+[semantic-release-url]: https://github.com/semantic-release/semantic-release
+[semantic-release-image]: https://img.shields.io/badge/%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079

package/__tests__/identity-obj-proxy-esm.ts

@@ -0,0 +1,13 @@
+// identity-obj-proxy has a bug when using scss files with the syntax '* as styles'
+module.exports = new Proxy(
+  {},
+  {
+    get: function getter(target, key) {
+      if (key === '__esModule') {
+        // True instead of false to pretend we're an ES module.
+        return true;
+      }
+      return key;
+    },
+  }
+);

package/demo/App.tsx

@@ -0,0 +1,44 @@
+import { useReadOnlyCachedState } from '@ribbon-studios/react-utils';
+import { Ribbon } from '../src';
+import { useState } from 'react';
+
+type Banner = {
+  label: string;
+  backgroundColor: string;
+  color?: string;
+};
+
+const banners: Banner[] = [
+  {
+    label: 'local',
+    backgroundColor: '#66BB6A',
+  },
+  {
+    label: 'review',
+    backgroundColor: '#7B1FA2',
+    color: 'white',
+  },
+  {
+    label: 'alpha',
+    backgroundColor: '#2196F3',
+  },
+];
+
+export function App() {
+  const [index, setIndex] = useState(0);
+  const banner = useReadOnlyCachedState(() => {
+    return banners[index];
+  }, [index]);
+
+  return (
+    <div>
+      <Ribbon
+        backgroundColor={banner.backgroundColor}
+        color={banner.color}
+        onClick={() => setIndex((index + 1) % banners.length)}
+      >
+        {banner.label}
+      </Ribbon>
+    </div>
+  );
+}

package/demo/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ribbon Demo</title>
+
+    <style>
+      body {
+        background-color: #272727;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

package/demo/index.tsx

@@ -0,0 +1,4 @@
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+
+createRoot(document.getElementById('root') as HTMLElement).render(<App />);

package/dist/index.css

@@ -0,0 +1,55 @@
+.Z10rOW_ribbon {
+  z-index: 9999;
+  pointer-events: none;
+  -webkit-user-select: none;
+  user-select: none;
+  opacity: 1;
+  backface-visibility: hidden;
+  width: 80px;
+  height: 80px;
+  transition: opacity .15s ease-in-out;
+  position: fixed;
+  transform: rotate(45deg);
+}
+
+.Z10rOW_ribbon:hover {
+  opacity: .75;
+}
+
+.Z10rOW_content {
+  text-align: center;
+  pointer-events: all;
+  text-transform: uppercase;
+  color: #333;
+  background-color: #fafafa;
+  width: 150px;
+  padding: 7px 0;
+  font: bold 15px sans-serif;
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 0 3px #0000004d;
+}
+
+.Z10rOW_ribbon.Z10rOW_bottom.Z10rOW_right, .Z10rOW_ribbon.Z10rOW_top.Z10rOW_left {
+  transform: rotate(-45deg);
+}
+
+.Z10rOW_ribbon.Z10rOW_bottom {
+  bottom: -10px;
+}
+
+.Z10rOW_ribbon.Z10rOW_top {
+  top: -10px;
+}
+
+.Z10rOW_ribbon.Z10rOW_left {
+  left: -10px;
+}
+
+.Z10rOW_ribbon.Z10rOW_right {
+  right: -10px;
+}
+
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"mappings":"AAAA;;;;;;;;;;;;;;AAaA;;;;AAIA;;;;;;;;;;;;;;;;AAgBA;;;;AAIA;;;;AAGA;;;;AAGA;;;;AAGA","sources":["src/Ribbon.module.scss"],"sourcesContent":[".ribbon {\n  position: fixed;\n  z-index: 9999;\n  width: 80px;\n  height: 80px;\n  pointer-events: none;\n  user-select: none;\n  opacity: 1;\n  transform: rotate(45deg);\n  transition: opacity 0.15s ease-in-out;\n  backface-visibility: hidden;\n}\n\n.ribbon:hover {\n  opacity: 0.75;\n}\n\n.content {\n  font: bold 15px Sans-Serif;\n  text-align: center;\n  position: relative;\n  padding: 7px 0;\n  width: 150px;\n  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);\n  pointer-events: all;\n  text-transform: uppercase;\n  transform: translate(-50%, -50%);\n  left: 50%;\n  top: 50%;\n  background-color: #fafafa;\n  color: #333;\n}\n\n.ribbon.bottom.right,\n.ribbon.top.left {\n  transform: rotate(-45deg);\n}\n.ribbon.bottom {\n  bottom: -10px;\n}\n.ribbon.top {\n  top: -10px;\n}\n.ribbon.left {\n  left: -10px;\n}\n.ribbon.right {\n  right: -10px;\n}\n"],"names":[],"version":3,"file":"index.css.map"}

package/dist/index.js

@@ -0,0 +1,75 @@
+require("./index.css");
+var $4Xqol$reactjsxruntime = require("react/jsx-runtime");
+
+
+function $parcel$exportWildcard(dest, source) {
+  Object.keys(source).forEach(function(key) {
+    if (key === 'default' || key === '__esModule' || Object.prototype.hasOwnProperty.call(dest, key)) {
+      return;
+    }
+
+    Object.defineProperty(dest, key, {
+      enumerable: true,
+      get: function get() {
+        return source[key];
+      }
+    });
+  });
+
+  return dest;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+var $75b00914025482a3$exports = {};
+
+$parcel$export($75b00914025482a3$exports, "Ribbon", function () { return $75b00914025482a3$export$6acf8bfe08d451ac; });
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../global.d.ts" />
+
+var $e02b4baa154171cc$exports = {};
+
+$parcel$export($e02b4baa154171cc$exports, "bottom", function () { return $e02b4baa154171cc$export$40e543e69a8b3fbb; }, function (v) { return $e02b4baa154171cc$export$40e543e69a8b3fbb = v; });
+$parcel$export($e02b4baa154171cc$exports, "content", function () { return $e02b4baa154171cc$export$a7db06668cad9adb; }, function (v) { return $e02b4baa154171cc$export$a7db06668cad9adb = v; });
+$parcel$export($e02b4baa154171cc$exports, "left", function () { return $e02b4baa154171cc$export$eabcd2c8791e7bf4; }, function (v) { return $e02b4baa154171cc$export$eabcd2c8791e7bf4 = v; });
+$parcel$export($e02b4baa154171cc$exports, "ribbon", function () { return $e02b4baa154171cc$export$b463d277d30b81dc; }, function (v) { return $e02b4baa154171cc$export$b463d277d30b81dc = v; });
+$parcel$export($e02b4baa154171cc$exports, "right", function () { return $e02b4baa154171cc$export$79ffe56a765070d2; }, function (v) { return $e02b4baa154171cc$export$79ffe56a765070d2 = v; });
+$parcel$export($e02b4baa154171cc$exports, "top", function () { return $e02b4baa154171cc$export$1e95b668f3b82d; }, function (v) { return $e02b4baa154171cc$export$1e95b668f3b82d = v; });
+var $e02b4baa154171cc$export$40e543e69a8b3fbb;
+var $e02b4baa154171cc$export$a7db06668cad9adb;
+var $e02b4baa154171cc$export$eabcd2c8791e7bf4;
+var $e02b4baa154171cc$export$b463d277d30b81dc;
+var $e02b4baa154171cc$export$79ffe56a765070d2;
+var $e02b4baa154171cc$export$1e95b668f3b82d;
+$e02b4baa154171cc$export$40e543e69a8b3fbb = `Z10rOW_bottom`;
+$e02b4baa154171cc$export$a7db06668cad9adb = `Z10rOW_content`;
+$e02b4baa154171cc$export$eabcd2c8791e7bf4 = `Z10rOW_left`;
+$e02b4baa154171cc$export$b463d277d30b81dc = `Z10rOW_ribbon`;
+$e02b4baa154171cc$export$79ffe56a765070d2 = `Z10rOW_right`;
+$e02b4baa154171cc$export$1e95b668f3b82d = `Z10rOW_top`;
+
+
+function $75b00914025482a3$export$6acf8bfe08d451ac({ children: children, backgroundColor: backgroundColor = "white", color: color = "black", position: position = "top-right", ...props }) {
+    const [vertical, horizontal] = position.split("-");
+    return /*#__PURE__*/ (0, $4Xqol$reactjsxruntime.jsx)("div", {
+        ...props,
+        className: `${$e02b4baa154171cc$exports.ribbon} ${$e02b4baa154171cc$exports[vertical]} ${$e02b4baa154171cc$exports[horizontal]}`,
+        "data-testid": "ribbon",
+        children: /*#__PURE__*/ (0, $4Xqol$reactjsxruntime.jsx)("div", {
+            className: $e02b4baa154171cc$exports.content,
+            style: {
+                backgroundColor: backgroundColor,
+                color: color
+            },
+            "data-testid": "ribbon-content",
+            children: children
+        })
+    });
+}
+
+
+$parcel$exportWildcard(module.exports, $75b00914025482a3$exports);
+
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;ACAA,qEAAqE;AACrE,uCAAuC;;;;;;;;;;ACDvC,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AALA,4CAA2B,CAAC,aAAa,CAAC;AAC1C,4CAA4B,CAAC,cAAc,CAAC;AAC5C,4CAAyB,CAAC,WAAW,CAAC;AACtC,4CAA2B,CAAC,aAAa,CAAC;AAC1C,4CAA0B,CAAC,YAAY,CAAC;AACxC,0CAAwB,CAAC,UAAU,CAAC;;;AD6B7B,SAAS,0CAAO,YACrB,QAAQ,mBACR,kBAAkB,gBAClB,QAAQ,mBACR,WAAW,aACX,GAAG,OACS;IACZ,MAAM,CAAC,UAAU,WAAW,GAAG,SAAS,KAAK,CAAC;IAE9C,qBACE,gCAAC;QAAK,GAAG,KAAK;QAAE,WAAW,CAAC,EAAE,0BAAO,MAAM,CAAC,CAAC,EAAE,yBAAM,CAAC,SAAS,CAAC,CAAC,EAAE,yBAAM,CAAC,WAAW,CAAC,CAAC;QAAE,eAAY;kBACnG,cAAA,gCAAC;YAAI,WAAW,0BAAO,OAAO;YAAE,OAAO;iCAAE;uBAAiB;YAAM;YAAG,eAAY;sBAC5E;;;AAIT","sources":["src/index.ts","src/Ribbon.tsx","src/Ribbon.module.scss"],"sourcesContent":["export * from './Ribbon';\n","// eslint-disable-next-line @typescript-eslint/triple-slash-reference\n/// <reference path=\"../global.d.ts\" />\n\nimport { ComponentProps, ReactNode } from 'react';\nimport * as styles from './Ribbon.module.scss';\n\nexport type RibbonProps = {\n  /**\n   * The contents of the ribbon\n   */\n  children?: ReactNode;\n\n  /**\n   * The font color\n   *\n   * @default 'black'\n   */\n  color?: string;\n\n  /**\n   * The background color\n   *\n   * @default 'white'\n   */\n  backgroundColor?: string;\n\n  /**\n   * Whether the ribbon should be aligned at the 'top' or 'bottom'\n   *\n   * @default 'top-right'\n   */\n  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';\n} & Pick<ComponentProps<'div'>, 'onClick'>;\n\nexport function Ribbon({\n  children,\n  backgroundColor = 'white',\n  color = 'black',\n  position = 'top-right',\n  ...props\n}: RibbonProps) {\n  const [vertical, horizontal] = position.split('-');\n\n  return (\n    <div {...props} className={`${styles.ribbon} ${styles[vertical]} ${styles[horizontal]}`} data-testid=\"ribbon\">\n      <div className={styles.content} style={{ backgroundColor, color }} data-testid=\"ribbon-content\">\n        {children}\n      </div>\n    </div>\n  );\n}\n",".ribbon {\n  position: fixed;\n  z-index: 9999;\n  width: 80px;\n  height: 80px;\n  pointer-events: none;\n  user-select: none;\n  opacity: 1;\n  transform: rotate(45deg);\n  transition: opacity 0.15s ease-in-out;\n  backface-visibility: hidden;\n}\n\n.ribbon:hover {\n  opacity: 0.75;\n}\n\n.content {\n  font: bold 15px Sans-Serif;\n  text-align: center;\n  position: relative;\n  padding: 7px 0;\n  width: 150px;\n  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);\n  pointer-events: all;\n  text-transform: uppercase;\n  transform: translate(-50%, -50%);\n  left: 50%;\n  top: 50%;\n  background-color: #fafafa;\n  color: #333;\n}\n\n.ribbon.bottom.right,\n.ribbon.top.left {\n  transform: rotate(-45deg);\n}\n.ribbon.bottom {\n  bottom: -10px;\n}\n.ribbon.top {\n  top: -10px;\n}\n.ribbon.left {\n  left: -10px;\n}\n.ribbon.right {\n  right: -10px;\n}\n"],"names":[],"version":3,"file":"index.js.map"}

package/dist/module.js

@@ -0,0 +1,58 @@
+import "./index.css";
+import {jsx as $lkOeU$jsx} from "react/jsx-runtime";
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+var $05af965021a88cfe$exports = {};
+
+$parcel$export($05af965021a88cfe$exports, "Ribbon", function () { return $05af965021a88cfe$export$6acf8bfe08d451ac; });
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../global.d.ts" />
+
+var $ba41f8ebd12a42a2$exports = {};
+
+$parcel$export($ba41f8ebd12a42a2$exports, "bottom", function () { return $ba41f8ebd12a42a2$export$40e543e69a8b3fbb; }, function (v) { return $ba41f8ebd12a42a2$export$40e543e69a8b3fbb = v; });
+$parcel$export($ba41f8ebd12a42a2$exports, "content", function () { return $ba41f8ebd12a42a2$export$a7db06668cad9adb; }, function (v) { return $ba41f8ebd12a42a2$export$a7db06668cad9adb = v; });
+$parcel$export($ba41f8ebd12a42a2$exports, "left", function () { return $ba41f8ebd12a42a2$export$eabcd2c8791e7bf4; }, function (v) { return $ba41f8ebd12a42a2$export$eabcd2c8791e7bf4 = v; });
+$parcel$export($ba41f8ebd12a42a2$exports, "ribbon", function () { return $ba41f8ebd12a42a2$export$b463d277d30b81dc; }, function (v) { return $ba41f8ebd12a42a2$export$b463d277d30b81dc = v; });
+$parcel$export($ba41f8ebd12a42a2$exports, "right", function () { return $ba41f8ebd12a42a2$export$79ffe56a765070d2; }, function (v) { return $ba41f8ebd12a42a2$export$79ffe56a765070d2 = v; });
+$parcel$export($ba41f8ebd12a42a2$exports, "top", function () { return $ba41f8ebd12a42a2$export$1e95b668f3b82d; }, function (v) { return $ba41f8ebd12a42a2$export$1e95b668f3b82d = v; });
+var $ba41f8ebd12a42a2$export$40e543e69a8b3fbb;
+var $ba41f8ebd12a42a2$export$a7db06668cad9adb;
+var $ba41f8ebd12a42a2$export$eabcd2c8791e7bf4;
+var $ba41f8ebd12a42a2$export$b463d277d30b81dc;
+var $ba41f8ebd12a42a2$export$79ffe56a765070d2;
+var $ba41f8ebd12a42a2$export$1e95b668f3b82d;
+$ba41f8ebd12a42a2$export$40e543e69a8b3fbb = `Z10rOW_bottom`;
+$ba41f8ebd12a42a2$export$a7db06668cad9adb = `Z10rOW_content`;
+$ba41f8ebd12a42a2$export$eabcd2c8791e7bf4 = `Z10rOW_left`;
+$ba41f8ebd12a42a2$export$b463d277d30b81dc = `Z10rOW_ribbon`;
+$ba41f8ebd12a42a2$export$79ffe56a765070d2 = `Z10rOW_right`;
+$ba41f8ebd12a42a2$export$1e95b668f3b82d = `Z10rOW_top`;
+
+
+function $05af965021a88cfe$export$6acf8bfe08d451ac({ children: children, backgroundColor: backgroundColor = "white", color: color = "black", position: position = "top-right", ...props }) {
+    const [vertical, horizontal] = position.split("-");
+    return /*#__PURE__*/ (0, $lkOeU$jsx)("div", {
+        ...props,
+        className: `${$ba41f8ebd12a42a2$exports.ribbon} ${$ba41f8ebd12a42a2$exports[vertical]} ${$ba41f8ebd12a42a2$exports[horizontal]}`,
+        "data-testid": "ribbon",
+        children: /*#__PURE__*/ (0, $lkOeU$jsx)("div", {
+            className: $ba41f8ebd12a42a2$exports.content,
+            style: {
+                backgroundColor: backgroundColor,
+                color: color
+            },
+            "data-testid": "ribbon-content",
+            children: children
+        })
+    });
+}
+
+
+
+
+export {$05af965021a88cfe$export$6acf8bfe08d451ac as Ribbon};
+//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;ACAA,qEAAqE;AACrE,uCAAuC;;;;;;;;;;ACDvC,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AALA,4CAA2B,CAAC,aAAa,CAAC;AAC1C,4CAA4B,CAAC,cAAc,CAAC;AAC5C,4CAAyB,CAAC,WAAW,CAAC;AACtC,4CAA2B,CAAC,aAAa,CAAC;AAC1C,4CAA0B,CAAC,YAAY,CAAC;AACxC,0CAAwB,CAAC,UAAU,CAAC;;;AD6B7B,SAAS,0CAAO,YACrB,QAAQ,mBACR,kBAAkB,gBAClB,QAAQ,mBACR,WAAW,aACX,GAAG,OACS;IACZ,MAAM,CAAC,UAAU,WAAW,GAAG,SAAS,KAAK,CAAC;IAE9C,qBACE,gBAAC;QAAK,GAAG,KAAK;QAAE,WAAW,CAAC,EAAE,0BAAO,MAAM,CAAC,CAAC,EAAE,yBAAM,CAAC,SAAS,CAAC,CAAC,EAAE,yBAAM,CAAC,WAAW,CAAC,CAAC;QAAE,eAAY;kBACnG,cAAA,gBAAC;YAAI,WAAW,0BAAO,OAAO;YAAE,OAAO;iCAAE;uBAAiB;YAAM;YAAG,eAAY;sBAC5E;;;AAIT","sources":["src/index.ts","src/Ribbon.tsx","src/Ribbon.module.scss"],"sourcesContent":["export * from './Ribbon';\n","// eslint-disable-next-line @typescript-eslint/triple-slash-reference\n/// <reference path=\"../global.d.ts\" />\n\nimport { ComponentProps, ReactNode } from 'react';\nimport * as styles from './Ribbon.module.scss';\n\nexport type RibbonProps = {\n  /**\n   * The contents of the ribbon\n   */\n  children?: ReactNode;\n\n  /**\n   * The font color\n   *\n   * @default 'black'\n   */\n  color?: string;\n\n  /**\n   * The background color\n   *\n   * @default 'white'\n   */\n  backgroundColor?: string;\n\n  /**\n   * Whether the ribbon should be aligned at the 'top' or 'bottom'\n   *\n   * @default 'top-right'\n   */\n  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';\n} & Pick<ComponentProps<'div'>, 'onClick'>;\n\nexport function Ribbon({\n  children,\n  backgroundColor = 'white',\n  color = 'black',\n  position = 'top-right',\n  ...props\n}: RibbonProps) {\n  const [vertical, horizontal] = position.split('-');\n\n  return (\n    <div {...props} className={`${styles.ribbon} ${styles[vertical]} ${styles[horizontal]}`} data-testid=\"ribbon\">\n      <div className={styles.content} style={{ backgroundColor, color }} data-testid=\"ribbon-content\">\n        {children}\n      </div>\n    </div>\n  );\n}\n",".ribbon {\n  position: fixed;\n  z-index: 9999;\n  width: 80px;\n  height: 80px;\n  pointer-events: none;\n  user-select: none;\n  opacity: 1;\n  transform: rotate(45deg);\n  transition: opacity 0.15s ease-in-out;\n  backface-visibility: hidden;\n}\n\n.ribbon:hover {\n  opacity: 0.75;\n}\n\n.content {\n  font: bold 15px Sans-Serif;\n  text-align: center;\n  position: relative;\n  padding: 7px 0;\n  width: 150px;\n  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);\n  pointer-events: all;\n  text-transform: uppercase;\n  transform: translate(-50%, -50%);\n  left: 50%;\n  top: 50%;\n  background-color: #fafafa;\n  color: #333;\n}\n\n.ribbon.bottom.right,\n.ribbon.top.left {\n  transform: rotate(-45deg);\n}\n.ribbon.bottom {\n  bottom: -10px;\n}\n.ribbon.top {\n  top: -10px;\n}\n.ribbon.left {\n  left: -10px;\n}\n.ribbon.right {\n  right: -10px;\n}\n"],"names":[],"version":3,"file":"module.js.map"}

package/dist/types.d.ts

@@ -0,0 +1,28 @@
+import { ComponentProps, ReactNode } from "react";
+export type RibbonProps = {
+    /**
+     * The contents of the ribbon
+     */
+    children?: ReactNode;
+    /**
+     * The font color
+     *
+     * @default 'black'
+     */
+    color?: string;
+    /**
+     * The background color
+     *
+     * @default 'white'
+     */
+    backgroundColor?: string;
+    /**
+     * Whether the ribbon should be aligned at the 'top' or 'bottom'
+     *
+     * @default 'top-right'
+     */
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+} & Pick<ComponentProps<'div'>, 'onClick'>;
+export function Ribbon({ children, backgroundColor, color, position, ...props }: RibbonProps): import("react/jsx-runtime").JSX.Element;
+
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"mappings":";AAMA,0BAA0B;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;CACtE,GAAG,IAAI,CAAC,eAAe,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC;AAE3C,uBAAuB,EACrB,QAAQ,EACR,eAAyB,EACzB,KAAe,EACf,QAAsB,EACtB,GAAG,KAAK,EACT,EAAE,WAAW,2CAUb","sources":["src/src/Ribbon.tsx","src/src/index.ts","src/index.ts"],"sourcesContent":[null,null,"export * from './Ribbon';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/flake.lock

@@ -0,0 +1,27 @@
+{
+  "nodes": {
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1712608508,
+        "narHash": "sha256-vMZ5603yU0wxgyQeHJryOI+O61yrX2AHwY6LOFyV1gM=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "4cba8b53da471aea2ab2b0c1f30a81e7c451f4b6",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "nixpkgs": "nixpkgs"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

package/flake.nix

@@ -0,0 +1,15 @@
+{
+  description = "Ribbon";
+
+  inputs.nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+
+  outputs = { nixpkgs, ... }: let
+    forAllSystems = nixpkgs.lib.genAttrs nixpkgs.lib.systems.flakeExposed;
+  in {
+    # Devshell for bootstrapping; acessible via 'nix develop' or 'nix-shell' (legacy)
+    devShells = forAllSystems (systems:
+      let pkgs = nixpkgs.legacyPackages.${systems};
+      in import ./shell.nix { inherit pkgs; }
+    );
+  };
+}

package/global.d.ts

@@ -0,0 +1,5 @@
+declare module '*.module.scss' {
+  const content: Record<string, string>;
+  export = content;
+  export default content;
+}

package/jest.config.ts

@@ -0,0 +1,30 @@
+import type { JestConfigWithTsJest } from 'ts-jest';
+
+const jestConfig: JestConfigWithTsJest = {
+  roots: ['<rootDir>/src'],
+  testEnvironment: 'jsdom',
+
+  moduleFileExtensions: ['js', 'mjs', 'cjs', 'jsx', 'ts', 'd.ts', 'tsx', 'json', 'node'],
+
+  transform: {
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+        tsconfig: 'tsconfig.json',
+      },
+    ],
+  },
+
+  coverageProvider: 'v8',
+  collectCoverageFrom: ['<rootDir>/src/**/*'],
+
+  coveragePathIgnorePatterns: ['__tests__'],
+
+  moduleNameMapper: {
+    '\\.(scss)$': '<rootDir>/__tests__/identity-obj-proxy-esm.ts',
+  },
+
+  transformIgnorePatterns: ['^.+\\.js$'],
+};
+
+export default jestConfig;

package/nixpkgs.nix

@@ -0,0 +1,8 @@
+# A nixpkgs instance that is grabbed from the pinned nixpkgs commit in the lock file
+# Useful to avoid using channels when using legacy nix commands
+let lock = (builtins.fromJSON (builtins.readFile ./flake.lock)).nodes.nixpkgs.locked;
+in
+import (fetchTarball {
+  url = "https://github.com/nixos/nixpkgs/archive/${lock.rev}.tar.gz";
+  sha256 = lock.narHash;
+})

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@ribbon-studios/ribbon",
+  "description": "A simple react ribbon~",
+  "version": "1.0.4",
+  "source": "src/index.ts",
+  "main": "dist/index.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "scripts": {
+    "start": "parcel demo/index.html",
+    "build": "parcel build",
+    "lint": "eslint .",
+    "test": "jest --coverage=false",
+    "test:coverage": "jest --coverage"
+  },
+  "peerDependencies": {
+    "react": "*"
+  },
+  "devDependencies": {
+    "@kayahr/jest-electron-runner": "^29.11.0",
+    "@parcel/packager-ts": "2.11.0",
+    "@parcel/transformer-inline-string": "2.11.0",
+    "@parcel/transformer-sass": "2.11.0",
+    "@parcel/transformer-typescript-types": "2.11.0",
+    "@testing-library/react": "^14.1.2",
+    "@types/chance": "^1.1.6",
+    "@types/jest": "^29.5.11",
+    "@types/react": "^18.2.47",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.18.1",
+    "@typescript-eslint/parser": "^6.18.1",
+    "chance": "^1.1.11",
+    "eslint": "^8.56.0",
+    "eslint-plugin-unused-imports": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "parcel": "^2.11.0",
+    "process": "^0.11.10",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "ts-jest": "^29.1.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.3.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ribbon-studios/ribbon.git"
+  },
+  "engines": {
+    "browsers": "last 2 years, > 1%, not dead"
+  }
+}

package/shell.nix

@@ -0,0 +1,16 @@
+# Shell for bootstrapping flake-enabled nix and home-manager
+# Enter it through 'nix develop' or (legacy) 'nix-shell'
+
+{ pkgs ? (import ./nixpkgs.nix) { } }: {
+  default = pkgs.mkShell {
+    # Enable experimental features without having to specify the argument
+    NIX_CONFIG = "experimental-features = nix-command flakes";
+    buildInputs = with pkgs; [
+      gnumake
+      nixpkgs-fmt
+      nixd
+      bun
+      nodejs_20
+    ];
+  };
+}

package/src/Ribbon.module.scss

@@ -0,0 +1,49 @@
+.ribbon {
+  position: fixed;
+  z-index: 9999;
+  width: 80px;
+  height: 80px;
+  pointer-events: none;
+  user-select: none;
+  opacity: 1;
+  transform: rotate(45deg);
+  transition: opacity 0.15s ease-in-out;
+  backface-visibility: hidden;
+}
+
+.ribbon:hover {
+  opacity: 0.75;
+}
+
+.content {
+  font: bold 15px Sans-Serif;
+  text-align: center;
+  position: relative;
+  padding: 7px 0;
+  width: 150px;
+  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
+  pointer-events: all;
+  text-transform: uppercase;
+  transform: translate(-50%, -50%);
+  left: 50%;
+  top: 50%;
+  background-color: #fafafa;
+  color: #333;
+}
+
+.ribbon.bottom.right,
+.ribbon.top.left {
+  transform: rotate(-45deg);
+}
+.ribbon.bottom {
+  bottom: -10px;
+}
+.ribbon.top {
+  top: -10px;
+}
+.ribbon.left {
+  left: -10px;
+}
+.ribbon.right {
+  right: -10px;
+}

package/src/Ribbon.tsx

@@ -0,0 +1,51 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../global.d.ts" />
+
+import { ComponentProps, ReactNode } from 'react';
+import * as styles from './Ribbon.module.scss';
+
+export type RibbonProps = {
+  /**
+   * The contents of the ribbon
+   */
+  children?: ReactNode;
+
+  /**
+   * The font color
+   *
+   * @default 'black'
+   */
+  color?: string;
+
+  /**
+   * The background color
+   *
+   * @default 'white'
+   */
+  backgroundColor?: string;
+
+  /**
+   * Whether the ribbon should be aligned at the 'top' or 'bottom'
+   *
+   * @default 'top-right'
+   */
+  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+} & Pick<ComponentProps<'div'>, 'onClick'>;
+
+export function Ribbon({
+  children,
+  backgroundColor = 'white',
+  color = 'black',
+  position = 'top-right',
+  ...props
+}: RibbonProps) {
+  const [vertical, horizontal] = position.split('-');
+
+  return (
+    <div {...props} className={`${styles.ribbon} ${styles[vertical]} ${styles[horizontal]}`} data-testid="ribbon">
+      <div className={styles.content} style={{ backgroundColor, color }} data-testid="ribbon-content">
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/__tests__/index.spec.tsx

@@ -0,0 +1,75 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../../global.d.ts" />
+
+import { render } from '@testing-library/react';
+import { Chance } from 'chance';
+import { Ribbon, RibbonProps } from '../';
+import * as styles from '../Ribbon.module.scss';
+
+const chance = new Chance();
+
+describe('component(Ribbon)', () => {
+  it('should render the component', () => {
+    const component = render(<Ribbon />);
+
+    expect(component.baseElement).toBeTruthy();
+  });
+
+  describe('prop(children)', () => {
+    it('should support children', () => {
+      const expectedContent = chance.word();
+      const component = render(<Ribbon>{expectedContent}</Ribbon>);
+
+      expect(component.baseElement.innerHTML).toContain(expectedContent);
+    });
+  });
+
+  describe('prop(color)', () => {
+    it('should default to black', () => {
+      const component = render(<Ribbon />);
+
+      expect(component.getByTestId('ribbon-content').style.color).toEqual('black');
+    });
+
+    it('should support other colors', () => {
+      const component = render(<Ribbon color="rebeccapurple" />);
+
+      expect(component.getByTestId('ribbon-content').style.color).toEqual('rebeccapurple');
+    });
+  });
+
+  describe('prop(backgroundColor)', () => {
+    it('should default to white', () => {
+      const component = render(<Ribbon />);
+
+      expect(component.getByTestId('ribbon-content').style.backgroundColor).toEqual('white');
+    });
+
+    it('should support other colors', () => {
+      const component = render(<Ribbon backgroundColor="rebeccapurple" />);
+
+      expect(component.getByTestId('ribbon-content').style.backgroundColor).toEqual('rebeccapurple');
+    });
+  });
+
+  describe('prop(position)', () => {
+    it('should default to top-right', () => {
+      const component = render(<Ribbon />);
+
+      expect(component.getByTestId('ribbon').classList).toContain(styles.top);
+      expect(component.getByTestId('ribbon').classList).toContain(styles.right);
+    });
+
+    const positions: NonNullable<RibbonProps['position']>[] = ['top-left', 'bottom-right', 'bottom-left'];
+    for (const position of positions) {
+      it(`should support '${position}'`, () => {
+        const [v, h] = position.split('-');
+
+        const component = render(<Ribbon position={position} />);
+
+        expect(component.getByTestId('ribbon').classList).toContain(styles[v]);
+        expect(component.getByTestId('ribbon').classList).toContain(styles[h]);
+      });
+    }
+  });
+});

package/src/index.ts

@@ -0,0 +1 @@
+export * from './Ribbon';

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "experimentalDecorators": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}