initial commit

.github/workflows/release.yml

@@ -0,0 +1,30 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - master
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 16
+      - name: Make the production plugin bundle
+        run: |
+          release_version=$(cat package.json | jq -r '.version')
+          echo "RELEASE_VERSION=$release_version" >> $GITHUB_ENV
+          yarn
+          yarn build
+      - name: Perform Github Release
+        uses: softprops/action-gh-release@v1
+        with:
+          name: v${{ env.RELEASE_VERSION }}
+          tag_name: v${{ env.RELEASE_VERSION }}
+          generate_release_notes: true
+          files: |
+            dist/*.tar.gz

.gitignore

@@ -0,0 +1,106 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+.idea/

.npmignore

@@ -0,0 +1,3 @@
+node_modules
+.github
+rollup.config.js

README.md

@@ -0,0 +1,7 @@
+# Budibase Hex Colour Picker
+
+## Description
+
+This plugin allows you to have a colour field in your Budibase form. The value is stored as a hex colour code. The picker displays the current colour and expands when clicked to allow you pick another one. You can also type your hex colour into the picker instead of clicking on the swatch.
+
+Find out more about [Budibase](https://github.com/Budibase/budibase).

index.js

@@ -0,0 +1,18 @@
+import Wrapper from "./lib/Wrapper.svelte"
+import schema from "./schema.json"
+import pkg from "./package.json"
+
+if (window) {
+    const plugin = { Component: Wrapper, schema, version: pkg.version }
+    if (!window["##BUDIBASE_CUSTOM_COMPONENTS##"]) {
+        window["##BUDIBASE_CUSTOM_COMPONENTS##"] = []
+    }
+    window["##BUDIBASE_CUSTOM_COMPONENTS##"].push(plugin)
+    if (window.registerCustomComponent) {
+        window.registerCustomComponent(plugin)
+    }
+}
+
+export const Component = Wrapper
+export const version = pkg.version
+export { schema }

lib/Boundary.js

@@ -0,0 +1,4 @@
+import Boundary from "./Boundary.svelte"
+import { createBoundary } from "@crownframework/svelte-error-boundary"
+
+export default createBoundary(Boundary);

lib/Boundary.svelte

@@ -0,0 +1,51 @@
+
+<script>
+    import pkg from "../package.json"
+    import { getContext } from "svelte"
+
+    export let error = null
+
+    const { styleable } = getContext("sdk")
+    const component = getContext("component")
+
+    $: styles = {
+      normal: {},
+      id: $component.id,
+      interactive: true
+    }
+</script>
+
+{#if $error}
+  <div class="error" use:styleable={styles}>
+    <b>There was an error running the "{pkg.name}" plugin:</b>
+    <div class="detail">
+      {$error}
+    </div>
+  </div>
+{:else}
+  <slot />
+{/if}
+
+<style>
+  .error {
+    background: var(--spectrum-global-color-red-400);
+    color: white;
+    border-radius: 4px;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 8px;
+    min-width: 400px;
+  }
+  .detail {
+    font-family: monospace;
+    font-size: 10px;
+    padding: 8px;
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    max-height: 100px;
+    overflow: auto;
+  }
+</style>

lib/Wrapper.svelte

@@ -0,0 +1,10 @@
+<script>
+    import Component from "../src/Component.svelte"
+    import Boundary from "./Boundary.js"
+</script>
+
+<Boundary>
+  <Component {...$$props}>
+    <slot/>
+  </Component>
+</Boundary>

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "colour-picker",
+  "version": "2.0.2",
+  "description": "A colour picker component",
+  "author": "andz-bb",
+  "license": "MIT",
+  "svelte": "index.js",
+  "module": "dist/plugin.min.js",
+  "scripts": {
+    "build": "rollup -c",
+    "watch": "rollup -cw"
+  },
+  "dependencies": {
+    "@crownframework/svelte-error-boundary": "^1.0.3",
+    "svelte": "^3.49.0",
+    "svelte-colorpick": "^0.1.7"
+  },
+  "devDependencies": {
+    "@budibase/backend-core": "^2.0.13",
+    "@rollup/plugin-commonjs": "^18.0.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.2.10",
+    "rollup": "^2.44.0",
+    "rollup-plugin-copy2": "^0.3.1",
+    "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-polyfill-node": "^0.8.0",
+    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-svelte": "^7.1.0",
+    "rollup-plugin-svg": "^2.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "tar": "^6.1.11"
+  }
+}

rollup.config.js

@@ -0,0 +1,122 @@
+import commonjs from "@rollup/plugin-commonjs"
+import resolve from "@rollup/plugin-node-resolve"
+import svelte from "rollup-plugin-svelte"
+import { terser } from "rollup-plugin-terser"
+import postcss from "rollup-plugin-postcss"
+import svg from "rollup-plugin-svg"
+import json from "rollup-plugin-json"
+import nodePolyfills from "rollup-plugin-polyfill-node"
+import copy from "rollup-plugin-copy2"
+import tar from "tar"
+import fs from "fs"
+import pkg from "./package.json"
+import crypto from "crypto"
+import { validate } from "@budibase/backend-core/plugins"
+
+const ignoredWarnings = [
+  "unused-export-let",
+  "css-unused-selector",
+  "module-script-reactive-declaration",
+  "a11y-no-onchange",
+]
+
+// Custom plugin to clean the dist folder before building
+const clean = () => ({
+  buildStart() {
+    const dist = "./dist/"
+    if (fs.existsSync(dist)) {
+      fs.readdirSync(dist).forEach(path => {
+        if (path.endsWith(".tar.gz")) {
+          fs.unlinkSync(dist + path)
+        }
+      })
+    }
+  },
+})
+
+// Custom plugin to hash the JS bundle and write it in the schema
+const hash = () => ({
+  writeBundle() {
+    // Generate JS hash
+    const fileBuffer = fs.readFileSync("dist/plugin.min.js")
+    const hashSum = crypto.createHash("sha1")
+    hashSum.update(fileBuffer)
+    const hex = hashSum.digest("hex")
+
+    // Read and parse existing schema from dist folder
+    const schema = JSON.parse(fs.readFileSync("./dist/schema.json", "utf8"))
+
+    // Write updated schema to dist folder, pretty printed as JSON again
+    const newSchema = {
+      ...schema,
+      hash: hex,
+      version: pkg.version,
+    }
+    fs.writeFileSync("./dist/schema.json", JSON.stringify(newSchema, null, 2))
+  },
+})
+
+// Custom plugin to bundle up our files after building
+const bundle = () => ({
+  async writeBundle() {
+    const bundleName = `${pkg.name}-${pkg.version}.tar.gz`
+    return tar
+        .c({ gzip: true, cwd: "dist" }, [
+          "plugin.min.js",
+          "schema.json",
+          "package.json",
+        ])
+        .pipe(fs.createWriteStream(`dist/${bundleName}`))
+  },
+})
+
+const validateSchema = () => ({
+  buildStart() {
+    const schema = fs.readFileSync("schema.json", "utf8")
+    validate(JSON.parse(schema))
+  }
+})
+
+export default {
+  input: "index.js",
+  output: {
+    sourcemap: process.env.ROLLUP_WATCH ? "inline" : false,
+    format: "iife",
+    file: "dist/plugin.min.js",
+    name: "plugin",
+    globals: {
+      svelte: "svelte",
+      "svelte/internal": "svelte_internal",
+    },
+  },
+  external: ["svelte", "svelte/internal"],
+  plugins: [
+    validateSchema(),
+    clean(),
+    svelte({
+      emitCss: true,
+      onwarn: (warning, handler) => {
+        // Ignore some warnings
+        if (!ignoredWarnings.includes(warning.code)) {
+          handler(warning)
+        }
+      },
+    }),
+    postcss(),
+    commonjs(),
+    nodePolyfills(),
+    resolve({
+      preferBuiltins: true,
+      browser: true,
+      skip: ["svelte", "svelte/internal"],
+    }),
+    svg(),
+    json(),
+    terser(),
+    copy({
+      assets: ["schema.json", "package.json"],
+    }),
+    hash(),
+    bundle(),
+  ],
+}