Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Added Unsplash plugin sample #52

Merged
merged 30 commits into from
Feb 11, 2022
Merged
Show file tree
Hide file tree
Changes from 28 commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
246330f
docs: Update README
ashikka Oct 7, 2021
f409970
feat: Added firebase integration sample
ashikka Oct 7, 2021
6e389e0
docs: Updated README
ashikka Oct 7, 2021
1caf0d2
feat: dotenv setup
ashikka Oct 7, 2021
7098576
feat: Setup dotenv-webpack
ashikka Oct 7, 2021
3a12d02
Update firebase-integration-sample/plugin/manifest.json
ashikka Oct 8, 2021
04c6403
Update firebase-integration-sample/README.md
ashikka Oct 8, 2021
7ecaf0c
Update firebase-integration-sample/README.md
ashikka Oct 8, 2021
b30d1e8
feat: Added comments
ashikka Oct 9, 2021
b676440
feat: Initial set up
ashikka Oct 14, 2021
d453751
fix: dotenv-webpack setup
ashikka Oct 14, 2021
b531d16
fix: Removed console logs
ashikka Oct 15, 2021
a72a0cc
feat: Added grid display system
ashikka Oct 15, 2021
112fbcd
feat: Added backend service
ashikka Oct 15, 2021
3062ecf
feat: Get file for saving
ashikka Oct 15, 2021
96dfcc1
feat: Add logic for saving/opening images, clean up UI
ashikka Oct 20, 2021
c5dc509
fix: UI fixes
ashikka Oct 20, 2021
6e63a7d
feat: Update README
ashikka Oct 20, 2021
4ccee69
feat: Update README
ashikka Oct 20, 2021
ccd4095
Delete README.md
ashikka Dec 30, 2021
27480f2
fix: Structuring issues
ashikka Feb 5, 2022
27458da
feat: Change env variable for backend to API_BASE_URL
ashikka Feb 5, 2022
abf30c3
feat: Added sample .env
ashikka Feb 5, 2022
f7396ef
docs: Updated plugin README
ashikka Feb 5, 2022
6af9a17
docs: Updated README
ashikka Feb 5, 2022
0669b58
docs: Updated README
ashikka Feb 5, 2022
b3c4271
fix: Rename variable
ashikka Feb 5, 2022
9d88448
Update README.md
ashikka Feb 5, 2022
fb0a3e5
feat: Updated docs and .env.sample
ashikka Feb 10, 2022
a5bf1c4
feat: merge branches
ashikka Feb 10, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions firebase-integration-sample/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# Dependency directory
node_modules/

#Build directory
dist/

.env
55 changes: 55 additions & 0 deletions firebase-integration-sample/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
# Firebase Integration Plugin

This plugin is an example to integrate the `Firebase` library. This plugin just retrieves the data from the database specified and displays it in the plugin window.

## 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
```

## Firestore Setup

Next, you need to create a `.env` file containing all the variables. Enter all variables from your Firebase project:

```sh
{
echo 'API_KEY='
echo 'AUTH_DOMAIN='
echo 'PROJECT_ID='
echo 'STORAGE_BUCKET='
echo 'MESSAGING_SENDER_ID='
echo 'APP_ID='
echo 'COLLECTION_NAME='

} >> .env

## Build Process

There are two ways to build the plugin for use in 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 panels.



32 changes: 32 additions & 0 deletions firebase-integration-sample/firebase.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { initializeApp } from "firebase/app";
import { getFirestore, collection, getDocs } from "firebase/firestore/lite";

// Configure your Firebase environment
const config = {
apiKey: process.env.API_KEY,
authDomain: process.env.AUTH_DOMAIN,
projectId: process.env.PROJECT_ID,
storageBucket: process.env.STORAGE_BUCKET,
messagingSenderId: process.env.MESSAGING_SENDER_ID,
appId: process.env.APP_ID
}

// Initialize the app
const app = initializeApp(config);

// Get the database for the initialized app
const db = getFirestore(app);

// Make client side requests to get the data and map it accordingly
async function getData() {
try {
const names = collection(db, process.env.COLLECTION_NAME);
const documents = await getDocs(names);
const list = documents.docs.map((doc) => doc.data());
return list;
} catch (e) {
return e;
}
}

export default getData;
Loading