From ef3166f8d50e143a80650a71aec52e717d146906 Mon Sep 17 00:00:00 2001 From: Kinga Date: Fri, 13 Sep 2024 22:59:05 +0200 Subject: [PATCH] Initial commit --- .env | 2 + .github/workflows/build.yml | 48 + .gitignore | 25 + .vscode/settings.json | 6 + README.md | 41 + package.json | 43 + public/index.html | 20 + src/ShinyRow.js | 28 + src/index.js | 42 + src/plugin-helpers.js | 27 + src/plugin-manifest.json | 8 + src/setupTests.js | 5 + yarn.lock | 10902 ++++++++++++++++++++++++++++++++++ 13 files changed, 11197 insertions(+) create mode 100644 .env create mode 100644 .github/workflows/build.yml create mode 100644 .gitignore create mode 100644 .vscode/settings.json create mode 100644 README.md create mode 100644 package.json create mode 100644 public/index.html create mode 100644 src/ShinyRow.js create mode 100644 src/index.js create mode 100644 src/plugin-helpers.js create mode 100644 src/plugin-manifest.json create mode 100644 src/setupTests.js create mode 100644 yarn.lock diff --git a/.env b/.env new file mode 100644 index 0000000..440844f --- /dev/null +++ b/.env @@ -0,0 +1,2 @@ +HTTPS=true +PORT=3050 \ No newline at end of file diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml new file mode 100644 index 0000000..170fcda --- /dev/null +++ b/.github/workflows/build.yml @@ -0,0 +1,48 @@ +name: Build & Release + +permissions: + contents: write + +on: + push: + branches: [ main ] + workflow_dispatch: + pull_request: + +jobs: + build-release: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - name: Use Node.js 18.x + uses: actions/setup-node@v4 + with: + node-version: 18.x + - run: yarn + - run: yarn build + - name: Create tar from built plugin + run: | + BUILDFOLDER="build" + MANIFEST=$(find ./$BUILDFOLDER -name plugin-manifest.json) + [ -z $MANIFEST ] && cp plugin-manifest $BUILDFOLDER + MANIFEST="$BUILDFOLDER/plugin-manifest.json" + VERSION=$(jq '.version' $MANIFEST -r) + echo "version=$VERSION" + mkdir -p output + tar -C $BUILDFOLDER -czf output/$VERSION.tar.gz . + ls -la output + echo "version=$VERSION" >> $GITHUB_ENV + - name: Create artifact + uses: actions/upload-artifact@v4 + with: + name: plugin-package + path: output + - name: Release built plugin + uses: svenstaro/upload-release-action@v2 + with: + repo_token: ${{ secrets.GITHUB_TOKEN }} + file: output/* + tag: ${{ env.version }} + overwrite: true + file_glob: true + if: github.ref == 'refs/heads/main' \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2445f5f --- /dev/null +++ b/.gitignore @@ -0,0 +1,25 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +/public/plugin-manifest.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..77d612e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,6 @@ +{ + "[css][scss][javascript][typescript][javascriptreact][typescriptreact][json][mdx][html]": { + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..ea24555 --- /dev/null +++ b/README.md @@ -0,0 +1,41 @@ +# Example Flotiq Plugin in React + +## Quickstart: + +1. `yarn` +2. `yarn start` +3. work work work +4. update your `src/plugin-manifest.json` file to contain the production URL and other plugin information +5. `yarn build` +6. paste js code from `./build/static/js/main.xxxxxxxx.js` to Flotiq console +7. navigate to affected Flotiq pages + + +## Deployment + + + +## Loading the plugin + +### URL + +1. Open Flotiq editor +2. Open Chrome Dev console +3. Execute the following script + ```javascript + FlotiqPlugins.loadPlugin('plugin-id', '') + ``` +4. Navigate to the view that is modified by the plugin + +### Directly + +1. Open Flotiq editor +2. Open Chrome Dev console +3. Paste the content of `static/js/main.xxxxxxxx.js` +4. Navigate to the view that is modified by the plugin + +### Deployment + +1. Open Flotiq editor +2. Add a new plugin and paste the URL to the hosted `plugin-manifest.json` file (you can use `https://localhost:3050/plugin-manifest.json` as long as you have accepted self-signed certificate for this url) +3. Navigate to the view that is modified by the plugin diff --git a/package.json b/package.json new file mode 100644 index 0000000..d899013 --- /dev/null +++ b/package.json @@ -0,0 +1,43 @@ +{ + "name": "flotiq-plugin-unejected", + "version": "0.1.0", + "private": true, + "dependencies": { + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "^13.4.0", + "@testing-library/user-event": "^13.5.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "5.0.1", + "web-vitals": "^2.1.4" + }, + "scripts": { + "start": "concurrently \"yarn start:manifest-watch\" \"yarn react-scripts start\"", + "start:manifest-watch": "cpx -v ./src/plugin-manifest.json ./public/ --watch", + "build": "cpx -v ./src/plugin-manifest.json ./public/ && react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, + "devDependencies": { + "concurrently": "^8.2.2", + "cpx": "^1.5.0" + } +} diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..c31dd14 --- /dev/null +++ b/public/index.html @@ -0,0 +1,20 @@ + + + + + + + + + Plugin preview + + + +
+ + diff --git a/src/ShinyRow.js b/src/ShinyRow.js new file mode 100644 index 0000000..c6a6a37 --- /dev/null +++ b/src/ShinyRow.js @@ -0,0 +1,28 @@ +import { useCallback, useMemo, useState } from "react"; + +function ShinyRow({ data }) { + const [toggle, setToggle] = useState(false); + const click = useCallback(() => { + setToggle((t) => !t); + }, []); + + const style = useMemo( + () => ({ + color: "rgb(0, 131, 252)", + cursor: "pointer", + fontStyle: toggle ? "italic" : "normal", + fontWeight: toggle ? "bold" : "normal", + }), + [toggle] + ); + + return ( +