react-kofi-overlay 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import _Donate from './Donate';
+export declare const Donate: typeof _Donate;

package/dist/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Donate = void 0;
+var Donate_1 = __importDefault(require("./Donate"));
+exports.Donate = Donate_1.default;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;AAAA,oDAA8B;AAEjB,QAAA,MAAM,GAAG,gBAAO,CAAA"}

package/dist/main.css

@@ -0,0 +1,84 @@
+@keyframes kF0g9az8fVG6kOqOMufc {
+  from {
+    translate: 0 200%;
+    opacity: 0; }
+  to {
+    translate: 0;
+    opacity: 1; } }
+
+.QSEpZEcKR0JDQr2RBSst {
+  display: inline-block;
+  background-color: #29abe0;
+  color: white;
+  padding: 0.5em 1em;
+  border-radius: 2em;
+  font-weight: bold; }
+  .QSEpZEcKR0JDQr2RBSst:hover {
+    background-color: #3eb3e3; }
+  .QSEpZEcKR0JDQr2RBSst:active {
+    background-color: #259aca; }
+
+.OUfEeoWEwJM1UiF9qYa6 {
+  position: fixed;
+  z-index: 100;
+  width: calc(min(320px, 100%));
+  height: calc(min(580px, 95%));
+  bottom: 0;
+  right: 2em;
+  animation: kF0g9az8fVG6kOqOMufc 1s forwards ease-in-out;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
+  .OUfEeoWEwJM1UiF9qYa6 iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    border-radius: 1em 1em 0 0;
+    background-color: white; }
+  .OUfEeoWEwJM1UiF9qYa6 .IBUCc6fCjyxRl3Ek8DQA {
+    position: absolute;
+    right: 0;
+    top: 0;
+    background-color: white;
+    border-color: #ddd;
+    border-width: 1px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    aspect-ratio: 1;
+    translate: 33% -33%;
+    border-radius: 100%;
+    line-height: 0; }
+    .OUfEeoWEwJM1UiF9qYa6 .IBUCc6fCjyxRl3Ek8DQA:hover {
+      background-color: #e6e6e6; }
+    .OUfEeoWEwJM1UiF9qYa6 .IBUCc6fCjyxRl3Ek8DQA:active {
+      background-color: #cccccc; }
+  .OUfEeoWEwJM1UiF9qYa6 .XH4Q6flr1ggDa4pjIu7O {
+    color: gray;
+    width: 1.5rem;
+    height: 1.5rem; }
+  .OUfEeoWEwJM1UiF9qYa6 .efoQ9WoiKsTaNnaKB03U {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: white;
+    text-align: center;
+    padding: 0.75rem;
+    font-size: 0.9rem;
+    border-top: 1px solid #ddd;
+    font-weight: 600;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }
+    .OUfEeoWEwJM1UiF9qYa6 .efoQ9WoiKsTaNnaKB03U a {
+      color: black;
+      text-shadow: none;
+      text-decoration: none; }
+      .OUfEeoWEwJM1UiF9qYa6 .efoQ9WoiKsTaNnaKB03U a:hover {
+        color: #29abe0; }
+  @media (max-width: 480px) {
+    .OUfEeoWEwJM1UiF9qYa6 {
+      right: 0;
+      width: 100%;
+      height: 100%; }
+      .OUfEeoWEwJM1UiF9qYa6 iframe {
+        border-radius: 0; }
+      .OUfEeoWEwJM1UiF9qYa6 .IBUCc6fCjyxRl3Ek8DQA {
+        translate: initial;
+        margin: 0.5rem; } }
+

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "react-kofi-overlay",
+  "version": "0.1.0",
+  "description": "React component for accepting donations though Ko-fi without leaving your website",
+  "main": "dist/bundle.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack && tsc"
+  },
+  "keywords": [],
+  "author": "Harrison Liddiard",
+  "license": "ISC",
+  "dependencies": {
+    "classnames": "^2.3.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.12.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.6",
+    "@babel/preset-env": "^7.23.6",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@types/react": "^18.2.45",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^6.8.1",
+    "mini-css-extract-plugin": "^2.7.6",
+    "node-sass": "^9.0.0",
+    "sass-loader": "^13.3.2",
+    "typescript": "^5.3.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4"
+  }
+}

package/src/Donate.module.scss

@@ -0,0 +1,120 @@
+$kofi-default-color: #29abe0;
+
+@keyframes open {
+  from {
+    translate: 0 200%;
+    opacity: 0;
+  }
+  to {
+    translate: 0;
+    opacity: 1;
+  }
+}
+
+.donateBtn {
+  display: inline-block;
+  background-color: $kofi-default-color;
+  color: white;
+  padding: 0.5em 1em;
+  border-radius: 2em;
+  font-weight: bold;
+
+  &:hover {
+    background-color: mix($kofi-default-color, white, 90%);
+  }
+
+  &:active {
+    background-color: mix($kofi-default-color, black, 90%);
+  }
+}
+
+.panel {
+  $overlay-shadow: 0 0 5px rgba(0,0,0, 0.1);
+  $border-color: #ddd;
+
+  position: fixed;
+  z-index: 100;
+  // Prevent Sass from using its built-in `min` function
+  // https://github.com/sass/node-sass/issues/2815#issuecomment-575926329
+  width: calc(min(320px, 100%));
+  height: calc(min(580px, 95%));
+  bottom: 0;
+  right: 2em;
+  animation: open 1s forwards ease-in-out;
+  box-shadow: 0 0 10px rgba(0,0,0, 0.5);
+
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    border-radius: 1em 1em 0 0;
+    background-color: white;
+  }
+
+  .closeBtn {
+    position: absolute;
+    right: 0;
+    top: 0;
+    background-color: white;
+    border-color: $border-color;
+    border-width: 1px;
+    box-shadow: $overlay-shadow;
+    aspect-ratio: 1;
+    translate: 33% -33%;
+    border-radius: 100%;
+    line-height: 0;
+    
+    &:hover {
+      background-color: mix(white, black, 90%);
+    }
+
+    &:active {
+      background-color: mix(white, black, 80%);
+    }
+  }
+
+  .closeIcon {
+    color: gray;
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .profileLink {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: white;
+    text-align: center;
+    padding: 0.75rem;
+    font-size: 0.9rem;
+    border-top: 1px solid $border-color;
+    font-weight: 600;
+    box-shadow: $overlay-shadow;
+
+    a {
+      color: black;
+      text-shadow: none;
+      text-decoration: none;
+
+      &:hover {
+        color: $kofi-default-color;
+      }
+    }
+  }
+
+  @media (max-width: 480px) {
+    right: 0;
+    width: 100%;
+    height: 100%;
+
+    iframe {
+      border-radius: 0;
+    }
+
+    .closeBtn {
+      translate: initial;
+      margin: 0.5rem;
+    }
+  }
+}

package/src/Donate.tsx

@@ -0,0 +1,122 @@
+'use client'
+
+import React, { useState, CSSProperties } from 'react'
+import classes from 'classnames'
+
+import s from './Donate.module.scss'
+import { IconContext } from 'react-icons'
+import { BsX as CloseIcon } from 'react-icons/bs'
+
+
+export interface StyleDefs<T> {
+  /**
+   * Donate button – a <button> element.
+   */
+  donateBtn?: T
+  /**
+   * Panel wrapper that popus up when donate button is clicked. By default,
+   * the panel is anchored to the bottom right of the viewport on desktop and
+   * full screen on mobile.
+   */
+  panel?: T
+  /**
+   * Button to close the donate panel.
+   */
+  closeBtn?: T
+  /**
+   * (X) icon within the panel close button.
+   */
+  closeIcon?: T
+  /**
+   * Link to your Ko-fi profile. By default, it's anchored to the bottom of the donate panel.
+   */
+  profileLink?: T
+}
+
+export interface DonateProps {
+  /**
+   * Child nodes of the donate button. E.g., "Support me on Ko-fi"
+   */
+  children: React.ReactNode
+  /**
+   * Your Ko-fi profile name. (ko-fi.com/[username])
+   */
+  username: string
+  /**
+   * Optional custom class names to apply to the component.
+   */
+  classNames?: StyleDefs<string>
+  /**
+   * Optional custom styles to apply to the component.
+   */
+  styles?: StyleDefs<CSSProperties>
+  /** 
+   * Optional function to be called when the donation form is opened or closed.
+   */
+  onToggle?: (open: boolean) => void
+}
+
+/**
+ * Component to display a button that opens a Ko-fi donation panel when clicked.
+ *
+ * @component
+ * @example
+ * <Donate username="liddiard">
+ *   Support My Work
+ * </Donate>
+ */
+export default function Donate({
+  children,
+  username,
+  classNames = {},
+  styles = {},
+  onToggle = () => {}
+}: DonateProps) {
+  const baseUrl = `https://ko-fi.com/${username}`
+  const [open, setOpen] = useState(false)
+
+  const handleOpen = (isOpen: boolean) => {
+    setOpen(isOpen)
+    onToggle(isOpen)
+  }
+
+  return (
+    <>
+      <button 
+        className={classes(s.donateBtn, classNames.donateBtn)}
+        style={styles.donateBtn}
+        onClick={() => handleOpen(true)}
+      >
+        {children}
+      </button>
+      {open ? 
+        <div 
+          className={classes(s.panel, classNames.panel)}
+          style={styles.panel}
+        >
+          <button
+            className={classes(s.closeBtn, classNames.closeBtn)}
+            style={styles.closeBtn}
+            onClick={() => handleOpen(false)}
+          >
+            <IconContext.Provider value={{
+              className: classes(s.closeIcon, classNames.closeIcon),
+              style: styles.closeIcon
+            }}>
+              <CloseIcon title="Close" />
+            </IconContext.Provider>
+          </button>
+          <iframe src={`${baseUrl}?hidefeed=true&widget=true&embed=true`} />
+          <div
+            className={classes(s.profileLink, classNames.profileLink)}
+            style={styles.profileLink}
+          >
+            <a href={baseUrl} target="_blank" rel="noreferrer">
+              ko-fi.com/{username}
+            </a>
+          </div>
+        </div>
+      : null}
+    </>
+  )
+}

package/src/declarations.d.ts

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

package/src/index.tsx

@@ -0,0 +1,3 @@
+import _Donate from './Donate'
+
+export const Donate = _Donate

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "commonjs",
+    "target": "es5",
+    "jsx": "react",
+    "esModuleInterop": true,
+    "declaration": true,
+  },
+  "include": [
+    "./src/**/*",
+    "src/declarations.d.ts"
+  ]
+}

package/webpack.config.js

@@ -0,0 +1,43 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+module.exports = {
+  entry: './src/index.tsx',
+  mode: 'none',
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              '@babel/preset-env',
+              '@babel/preset-react',
+              '@babel/preset-typescript',
+            ],
+          },
+        },
+      },
+      {
+        test: /\.scss$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  output: {
+    filename: 'bundle.js',
+    path: __dirname + '/dist',
+    libraryTarget: 'umd',
+    library: 'KofiDonate',
+    umdNamedDefine: true,
+  },
+  plugins: [new MiniCssExtractPlugin()],
+  externals: {
+    react: 'react',
+    'react-dom': 'react-dom',
+  },
+};