Merge pull request #39 from MLH-Fellowship/jszip-sample

Added a sample using JSZip

Author: kerrishotts

jszip-sample/README.md

@@ -0,0 +1,40 @@
+# JSZip Sample
+
+This plugin is a good place to get started when building a Adobe Photoshop plugin using JSZip. It comes defined with all the dependencies that you'll need to get started. As this is a Webpack project, you'll need to do some initial configuration before this will be usable in Adobe Photoshop.
+
+## Install dependencies
+
+First ensure that your terminal is in the root of this project. Then:
+
+For `yarn` users, install all dependencies using:
+
+```
+yarn install
+```
+
+For `npm` users, install all dependencies using:
+
+```
+npm install
+```
+
+## Build Process
+
+There are two ways to build the plugin for use in Adobe Photoshop:
+
+- `yarn watch` or `npm run watch` will build a development version of the plugin, and recompile everytime you make a change to the source files. The result is placed in `dist`.
+- `yarn build` or `npm run build` will build a production version of the plugin and place it in `dist`. It will not update every time you make a change to the source files.
+
+> You **must** run either `watch` or `build` prior to trying to use within Photoshop!
+
+## Launching in Photoshop
+
+You can use the UXP Developer Tools to load the plugin into Photoshop.
+
+If the plugin hasn't already been added to your workspace in the UXP Developer Tools, you can add it by clicking "Add Plugin..." and selecting `dist/manifest.json`. **DO NOT** select the `manifest.json` file inside the `plugin` folder.
+
+Once added, you can load it into Photoshop by clicking the ••• button on the corresponding row, and clicking "Load". Switch to Photoshop and you should see the starter panel.
+
+## What this plugin does
+
+This plugin shows how to use JSZip alongside Photoshop and includes a few useful demos of this functionality. The first one, `IMPORT ZIP FILE`, allows you to simply import a `zip` file containing images and automatically open them. The second demo, `EXPORT ARTBOARDS AS ZIP`, allows you to easily export all artboards in a Photoshop project as a single `zip` file. The last demo, `SAVE FILES TO ZIP`, allows you to select any number of files and export them to a `zip` file.

jszip-sample/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "com.adobe.jszip-sample",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "watch": "webpack -w --mode development",
+    "build": "webpack --mode development"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.6",
+    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@babel/preset-env": "^7.14.7",
+    "babel-loader": "^8.2.2",
+    "copy-webpack-plugin": "^9.0.1",
+    "css-loader": "^5.2.6",
+    "html-webpack-plugin": "^5.3.2",
+    "style-loader": "^3.0.0",
+    "webpack": "^5.44.0",
+    "webpack-cli": "^4.7.2"
+  },
+  "dependencies": {
+    "jszip": "^3.7.0"
+  }
+}

jszip-sample/plugin/icons/[email protected]

@@ -0,0 +1,62 @@
+{
+  "id": "com.adobe.jszip-sample",
+  "name": "JSZip Sample",
+  "version": "1.0.0",
+  "host": {
+    "app": "PS",
+    "minVersion": "22.0.0"
+  },
+  "main": "index.html",
+  "manifestVersion": 4,
+  "entrypoints": [
+    {
+      "type": "panel",
+      "id": "plugin",
+      "label": {
+        "default": "JSZip Sample"
+      },
+      "minimumSize": {
+        "width": 150,
+        "height": 200
+      },
+      "maximumSize": {
+        "width": 350,
+        "height": 2000
+      },
+      "preferredDockedSize": {
+        "width": 200,
+        "height": 425
+      },
+      "preferredFloatingSize": {
+        "width": 200,
+        "height": 425
+      },
+      "icons": [
+        {
+          "width": 23,
+          "height": 23,
+          "path": "icons/dark.png",
+          "scale": [1, 2],
+          "theme": ["darkest", "dark", "medium"]
+        },
+        {
+          "width": 23,
+          "height": 23,
+          "path": "icons/light.png",
+          "scale": [1, 2],
+          "theme": ["lightest", "light"]
+        }
+      ]
+    }
+  ],
+  "icons": [
+    {
+      "width": 48,
+      "height": 48,
+      "path": "icons/plugin.png",
+      "scale": [1, 2],
+      "theme": ["dark", "darkest", "medium", "lightest", "light", "all"],
+      "species": ["pluginList"]
+    }
+  ]
+}

jszip-sample/plugin/icons/[email protected]

@@ -0,0 +1,52 @@
+html, body {
+  margin: 0;
+  height: 100%;
+  width: 100%;
+  background-color: var(--uxp-host-background-color);
+  color: var(--uxp-host-text-color);
+  overflow: auto;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+}
+
+.titleDivider {
+  margin: .5em 0;
+}
+
+.fieldDivider {
+  margin: 2em auto 1em auto;
+  max-width: 75%;
+}
+
+.error {
+  margin: 0;
+  color: #C95359;
+}
+
+.heading {
+  margin-top: 0;
+}
+
+.fields {
+  padding: 0;
+}
+
+.fields .field {
+  margin-top: 1em;
+}
+
+.fields .field:not(:first-child) {
+  margin-top: 3em;
+}
+
+.field .button {
+  margin-top: .5em;
+}
+
+.button {
+  width: 100%;
+}