Release 1.2.0 (#122)

* refactor PBParam to PBVariable * Downgraded build_runner to 1.10.0 * Fixed UUID generation and json serialization (#95) (#96) (cherry picked from commit cc8e01f) # Conflicts: # pubspec.yaml Co-authored-by: Ivan <[email protected]> * Split up _generateScreen method (interpret.dart) * (fix:58) Split up _generateScreen method in interpret.dart (#103) * refactor PBParam to PBVariable * Downgraded build_runner to 1.10.0 * Split up _generateScreen method (interpret.dart) Co-authored-by: Ivan <[email protected]> * Fixed Json serialization, conflicts and interpretation errors. (#104) * Hot fix miscellaneous item crash (#106) * Added handlers for empty TempGroupLayouts * Added name enforcement to layout nodes * Enforced name property on visual nodes & sketch entities * Fixed ContainerConstraintRule with name enforcment update * Repaired temp group layout node for enforcing name property * Using Dart's ArgParser to parse arguments (#85) * Using Dart's ArgParser to parse arguments * Using Dart's ArgParser to parse arguments * arg parsing using args package; code cleanup * fixed review errors * fixed review errors * reverted to default value * Merged `stable` into `dev` * Updated json serializable generated classes * Detecting the OS that Parabeac is running on and extracting the current dir. * Await main.dart flush after write before close (#112) * Feat figma integration (#116) * Integrate API calls and added Figma case * Corrected API method * Added FigmaController and ParentController * Started Figma integration and abstract common classes * Hot fixes * Added FigmaNodeFactory * Added few classes for FigmaNode to use * Added rest of the needed classes * Integrating new classes * Corrected clases and added support files * TEMPORAL FIX, REMOVE BEFORE RELEASE * Fixed factory * Added FigmaPage * Fix relationship with node trees * Added missing interpret * Remove print * Made originalRef for both classes * Added http2 to do API call for Figma * Made API calls more dynamic * Made API call dynamic and added exceptions * Added exceptions too * Modified API method and added checker in groups to create assets * Connected figma controller to interpret and project builder. Set default value of isVisible to true. * Changed do_objectID to UUID. Fixed isVisible values. Fixed children showing up as null. Changed layers to children in sketch nodes. * Added parameters to makeAPICall() to download specific images. Added PBColorMixin to convert Color to hex strings. * Set up PBDL for style * Set up Figma for style * Added json serializable to figma classes and populated classes with skeleton code. * Added style to classes and abstracted inherited text to support PBDL * Abstract Sketch Classes to use on Figma * Modified sketch classes to abstract * Abstract class instance * Added interpret methods * Added case when all children are Vector * Added children case * Fixed issue with colors and null fields for Style * Fixed issue with instance * Allow for generation for images concurrently. Fixed serialization issues. * Fixed incorrect if statement that was preventing images from generating * Added png extencion to images and images directory * Text now generates properly * removed colon from image names and allow rectangles to become images * Added context to InheritedBitmap comming from Figma * Added case for bitmap having not currentContext * Added case where scaffold only come after canvas * Added new color case, isVisible * Frame can also be Groups * Text should not be considered Vector on images * Added field isBackgroundVisible * Fixed group not generating as image inside Tab. Added mixin to add images to uuidQueue. * Added generation of color for containers * Added fills to figma nodes * Added missing border information * Fixed image generation in sketch * Fixed issue with empty text on Sketch * Removed unnecessary comments * Removed unnecessary method * Fixed pngs folder generating in the wrong path Co-authored-by: Bryan Figueroa <[email protected]> * Added args and removed sentry. (#118) * Removed the Sentry code; its going to cause runtime exceptions because users do not have the configuration necessary. Added the figma args to the parabeac.dart file. * Update pb_flexible_gen.dart * Add windows setup guide (#117) * Started windows setup guide * Added more windows installation info * Finished Windows setup * Fixed small spelling mistakes Co-authored-by: Eddie <[email protected]> * Fixed Figma crashing when no output path is given. Removed unnecessary print statements. (#120) * Update README.md (#121) Added Figma Support Notes Co-authored-by: Haardik Dharma <[email protected]> Co-authored-by: Ivan <[email protected]> Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com> Co-authored-by: Ivan Huerta <[email protected]> Co-authored-by: Somtochukwu Nwagbata <[email protected]> Co-authored-by: Ivan Vigliante <[email protected]> Co-authored-by: Roel de Vries <[email protected]> Co-authored-by: Bryan Figueroa <[email protected]> Co-authored-by: Ian Hudson <[email protected]>
Parabeac · Oct 17, 2020 · 569e346 · 569e346
1 parent 97eeff0
commit 569e346
Show file tree

Hide file tree

Showing 196 changed files with 38,982 additions and 779 deletions.
diff --git a/README.md b/README.md
@@ -30,8 +30,9 @@ Parabeac-Core is an open-source repository that converts design files into Flutt
 
 If you have any trouble with getting Parabeac-Core running, check out this video! [![Parabeac-Core Getting Started](https://img.youtube.com/vi/e4CJgPMNCyo/0.jpg)](https://www.youtube.com/watch?v=e4CJgPMNCyo&feature=youtu.be)
 
+Development on Windows is possible, too. However, [this requires some setup](WINDOWS_SETUP.md).
 
-Parabeac currently supports conversions from [Sketch](https://www.sketch.com) but is designed to support more platforms in the future.
+Parabeac-Core now supports both [Figma](https://www.figma.com/) and [Sketch](https://www.sketch.com)! We have plans to expand in the future as Parabeac-Core is built to support more platforms by design. 
 
 ### Dependencies
 
@@ -40,7 +41,9 @@ Parabeac currently supports conversions from [Sketch](https://www.sketch.com) bu
  - [node.js](https://nodejs.org/en/download/)
  - MacOS + Xcode or Android Studio
 
-To test out a Sketch file feel free to download [this Sketch file](https://drive.google.com/file/d/10ZdTTUCFLrGJ-1oVmapWoH5HCe87Sz4e/view?usp=sharing)!
+Need a file to test with? Feel free to download one of our sample design files below (Make sure to duplicate the Design to your account if you're using Figma):
+* [Sketch](https://drive.google.com/file/d/10ZdTTUCFLrGJ-1oVmapWoH5HCe87Sz4e/view?usp=sharing)
+* [Figma](https://www.figma.com/file/zXXWPWb5wJXd0ImGUjEU1X/parabeac_demo_alt?node-id=0%3A156) 
 
 ## Cloning the Repo
 Because parabeac-core contains the Sketch-Asset-Converter submodule, it is easier to clone the repo using the following command:
@@ -63,6 +66,9 @@ For more information about git submodules, click [here](https://git-scm.com/book
 
 ## Running the conversion
 
+We currently support both Sketch and Figma. See below for running the conversion for both Sketch and Figma.
+
+### Sketch
 Follow these steps in order to run Parabeac Core on your local environment:
 1. Clone PBCore repo in order to get the code on your machine
 2. If you have any plugins make sure to put the plugins in the plugin folder
@@ -72,6 +78,28 @@ Follow these steps in order to run Parabeac Core on your local environment:
  $ pub install
  $ dart parabeac.dart -p <Absolute Path To Design File> -n <ProjectName> 
 ```
+### Figma
+1. Clone PBCore repo in order to get the code on your machine
+2. If you have any plugins make sure to put the plugins in the plugin folder
+3. In your terminal change directory to the root PBCore directory and run:
+
+``` bash
+ $ pub install
+ $ dart parabeac.dart -f <Figma File ID> -k <Figma API Key> -o <Absolute Path To Output Directory> 
+```
+If you're wondering about where to find your Figma File ID or Figma API Key Please Read Below:
+#### Figma File ID and API Key
+Since Figma operates from a cloud native approach we use the Figma File ID and a Figma User API Key in order to pull down your figma designs and run the conversion. Your Figma File ID is a unique ID used to identify your specific Figma File amoungst all other Figma Design Files. Your Figma API Key is a custom key assigned to your figma account that you generate in order to give Parabeac Core the ability to pull down your Figma File.
+**In order to find your Figma File ID do the following:**
+1. Go to your Figma Homepage at www.Figma.com
+2. Select your Design File
+3. Within your design File's URL is your Figma File ID. Simply take the value after Figma.com/file/<FigmaFileID>. So in the URL ```https://www.figma.com/file/zXXWPWb5wJXd0ImGUjEU1X/parabeac_demo_alt?node-id=0%3A156``` the Figma File ID is ```zXXWPWb5wJXd0ImGUjEU1X```
+
+**In order to create a Figma API Token do the following:**
+1. Go to your Figma Homepage at www.Figma.com
+2. Navigate to your user Profile
+3. Scroll Down to the "Create a new Personal Access Token"
+4. Create a new Personal Access Token with the name Parabeac, you should then be prompted with your new API Key. Make sure to copy this as you wont be able to access it again after you click confirm. (It should look something like this: ```64522-a0e5509a-d5ce-47a8-880b-c295f9cb27ed```
 
 ## Metrics
 Parabeac-core keeps track of how many times it is run. Although we do not collect any personal information, you can turn off metrics at any time by creating the environment variable `PB_METRICS = "false"`.

diff --git a/WINDOWS_SETUP.md b/WINDOWS_SETUP.md
@@ -0,0 +1,181 @@
+# Parabeac-Core setup for Windows
+To get starting with using or developing the source code on Windows some configuration is required. This document is meant to help users with that.
+
+## Setup using WSL 2
+One of the ways we can get starting with Parabeac-Core on Windows is by utilizing the Windows Subset for Linux version 2. This allows Windows 10 users to utilize the most of linux and to combine this with the Windows workflow. This prevents overhead that comes with solutions like a VM or dualboot. To learn more about WSL 2 you can visit [this page](https://docs.microsoft.com/en-us/windows/wsl/about).
+
+## Index
+- [Requirements](#Requirements)
+- [Installing WSL 2](#Installing-WSL-2)
+- [Ubunutu setup](#Ubunutu-setup)
+- [Flutter install](#Flutter-install)
+- [Cloning Parabeac-core](#Cloning-Parabeac-core)
+- [(Optional) Fix NPM](#(Optional)-Fix-NPM)
+- [(Optional) Install VS-Code and WSL 2 extension](#(Optional)-Install-VS-Code-and-WSL-2-extension)
+- [(Optional) Android emulation](#(Optional)-Android-emulation)
+
+### Requirements
+Although WSL is supported on most Windows installations, there are still some requirements that need to be met before we can continue:
+-   For x64:
+    - At least Windows version 1903 with at least build 18362
+
+Although WSL 2 is supported on ARM64 we'll only focus on x64.
+
+### Installing WSL 2
+To summarize the first step, we first need to activate WSL 1 and then update it to version 2. Follow these steps:
+1.  First we need to enable WSL. Open up an elevated PowerShell instance and execute the following command: `dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart`
+
+2.  Next we need to enable the virtual machine platform. Execute this PowerShell command: `dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart`
+
+3. **Now, restart your device!** This is required to finish the installation of WSL.
+
+4. After restarting, download and install the [WSL2 linux kernel update](https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi).
+
+5. Execute this PowerShell command: `wsl --set-default-version 2` This makes WSL 2 the default version for further usage. This may take some minutes.
+
+6. WSL 2 is now enabled. Next we need a linux distro. You could choose some of your choice from the Windows Store, but for this guide we'll use the Ubuntu, [download this distro](https://www.microsoft.com/nl-nl/p/ubuntu/9nblggh4msv6).
+
+
+### Ubunutu setup
+Next, ubunutu requires some setup.
+1. Boot up Ubuntu. It will install some things, let it finish
+2. Next choose an username, password and reconfirm your password.
+3. Lastly let's update our distro. Execute the following commands: `sudo apt-get upgrade` and `sudo apt-get update`
+
+### Flutter install
+Parabeac-core is built in Dart and generates Flutter apps, which make use of Dart and the Android SDK. The Android SDK itself requires the Java JDK. Let's install all of this.
+1. First let's make a download folder: `mkdir downloads` and move into it: `cd downloads`. 
+
+2. Then download the OpenJDK 8. Recommended is visiting [AdoptOpenJDK.net](https://adoptopenjdk.net/releases.html?variant=openjdk8&jvmVariant=hotspot) and copying the download url by right clicking the **JDK** `.tar.gz` download button and then copy. Then type `sudo wget [url]`. You can past the url you copied by right clicking in the console and execute it.
+
+3. Extract the JDK: `sudo tar -xvzf [downloadedJdk.tar.gz]` By typing `O` and then pressing tab you can autocomplete the name of the downloaded file.
+
+4. Next, lets move the JDK to a more permanent place: `sudo mv [extractionName] /opt/openJDK`. extractionName is the folder name to where the downloaded file is extracted. You can find this with the `ls` command.
+
+5. Next up: the Android SDK. Google provides a command line tool to download android development software, so we'll make use of that. The download url can be found on the [Android Developers site](https://developer.android.com/studio). Scroll to the bottom to "Command line tools only", click the link of Linux, read and accept the terms and copy the url by right clicking the download button and copy. Then back in Ubuntu execute the following: `sudo wget [downloadUrl]`.
+
+6. We got another zip, but this time a `.zip` file. For this, we need a new package: `sudo apt-get install unzip`.
+
+7. Then extract the download: `sudo unzip [downloadedFile.zip]`
+
+8. And move it to a permanent place: `sudo mkdir --parents ~/Android/Sdk/cmdline-tools; sudo mv tools ~/Android/Sdk/cmdline-tools/tools`
+
+9. To make the JDK and android command line tools available throughout the distro we'll need to make it findable. We can do this by adding a few lines to the `.bashrc` file. Open the file: `sudo nano ~/.bashrc`
+
+10. Add the following lines to the file:
+```bashrc
+export DART=/home/roel/snap/flutter/common/flutter/bin
+export ANDROID_SDK_ROOT=/home/[your selected ubuntu username]/Android/Sdk
+export JAVA_HOME=/opt/openJDK
+export PATH=$PATH:$ANDROID_SDK_ROOT/build-tools
+export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
+export PATH=$PATH:$ANDROID_SDK_ROOT/emulators
+export PATH=$PATH:$ANDROID_SDK_ROOT/cmdline-tools/tools/bin
+export PATH=$PATH:$DART
+```
+
+Exit out of nano with `CTRL-x & CTRL-y`.
+
+11. At this point we'd be required to restart our Ubuntu machine. But since we're use WSL 2 we can just restart our distro instance. Close the app, and re-open it.
+
+If everything went correctly we now can use the command line tools.
+Next, we need the build tools. The choice we make here will determine the Android version the Parabeac-core Flutter app will target. If you choose to debug using the emulator we'll install later on, you can follow the following instructions. But if you want to do this on your own device you'll need to select an API level that supports your device. You can do that on [this page](https://developer.android.com/studio/releases/platforms). You'll need to replace the API version numbers we'll use in the following commands with the one your device supports. You can look up the versions with `sdkmanager --list`
+
+13. For our commands to succeed we need to give write access to the folder, execute `sudo chmod -R a+w ~/Android/Sdk`
+
+14. Now install the SDK and build-tools: `sdkmanager "platforms;android-30" "build-tools;30.0.2"` Optionally replace the version number with your API level.
+
+15. And for debugging later on, we need the platform tools: `sdkmanager "platform-tools"`
+
+Now, time for Flutter. Flutter uses the snap package manager, sadly this doesn't work in WSL 2 out of the box because of an issue with systemd at time of writing. So, let's fix it first!
+
+16. Move back to your home: `cd ~/` and make a repos folder `mkdir repos`
+
+17. Clone our fix: `git clone https://github.com/DamionGans/ubuntu-wsl2-systemd-script.git` and move into it `cd ubuntu-wsl2-systemd-script/`
+
+18. Run the script: `sudo bash ubuntu-wsl2-systemd-script.sh`
+
+19. Lastly, run these scripts `cmd.exe /C setx WSLENV BASH_ENV/u` and `cmd.exe /C setx BASH_ENV /etc/bash.bashrc`
+
+20. Now we need to restart Ubuntu by closing and re-opening the app.
+
+21. Finally, test if snap works: `snap --version` This should return the version numbers of the snap components. If it hangs it means snap isn't yet working correctly.
+
+22. Now, install Flutter: `sudo snap install flutter --classic` This could take some time!
+
+23. Now initialize Flutter: `flutter doctor` This, again, could take some time!
+
+24. If this went correctly Flutter should state that you need to accept the Android licenses, so, do that: `flutter doctor --android-licenses` Read the terms and accept each of them by entering `y`
+
+### Cloning Parabeac-core
+With all of this done, we can now get started with Parabeac-core.
+Let's get started:
+
+1. Move back into your repo folder: `cd ~/repos`
+
+2. Clone Parabeac-core: `git clone --recurse-submodules https://github.com/Parabeac/Parabeac-Core.git`
+
+3. Move into Parabeac-core: `cd Parabeac-core` and restore packages `flutter pub get`
+
+4. Parabeac makes use of Node.js to restore NPM packages during a project build. So let's install Node: `curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -` and then `sudo apt-get install -y nodejs`
+
+And there we have it! Congratulations, we've installed:
+- Ubuntu
+- WSL 2
+- Java OpenJDK 8
+- Android command line tools
+- Android build tools
+- Android platform SDK
+- Android platform tools
+- Flutter
+- Dart
+- Node.js
+
+And now have a Parabeac-core repo ready for usage/development!
+
+### (Optional) Fix NPM
+When you run parabeac to generate a project it tries to restore NPM packages. However, an error could occur. This probably because you have Node installed both on Windows and WSL 2. A solution: remove the ocation of the Windows installation from your Windows path.
+
+1. Open Windows search and open "Edit the system environment variables"
+
+2. Click on "Environment variables".
+
+3. Select the "Path" variable under user variables.
+
+4. Check if there's a reference to node or npm. Try temporarily removing this.
+
+5. Repeat from step 3, but then under system variables.
+
+6. Restart the Ubuntu distro
+
+
+### (Optional) Install VS-Code and WSL 2 extension
+A recommended code editor is Visual Studio Code. This program provides an extension to link the Windows VSCode installation with code from WSL 2.
+
+1. [Download and install VSCode.](https://code.visualstudio.com/)
+
+2. Next, download and install the [Remote - WSL](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl) extension.
+
+3. After this is done, go back to Ubuntu. Move into your repo `cd ~/repos/Parabeac-core` and open VSCode by executing: `code .` This opens VSCode in Windows, with a link to WSL 2. You can now program in Windows, and commit in WSL.
+
+### (Optional) Android emulation
+Parabeac generates a Flutter project for Android. Now, we could build this project to an APK and push it to a device. Or we could emulate it.
+By installing Android Studio with the emulator component and some ADB tricks we can emulate our generated project which resides in WSL 2 in an Android Studio emulator which runs on Windows!
+
+1. Let's first download and install [Android Studio](https://developer.android.com/studio) for Windows. Make sure you select the emulator component during installation!
+
+2. Start Android studio, but stop at the project selection screen. Here we go into `Configure -> AVD Manager`.
+
+3. There should be a default emulator already present, named `Pixel_3a_API_30_x86`. This could differ slightly in device name and API level. Start this emulator.
+
+4. Move with a Windows command line into the Android platform-tools folder which was installed by Android Studio: `cd %LocalAppData%/Android/Sdk/platform-tools`
+
+5. Next, kill any running adb instances: `adb kill-server` and then start it again `adb -a nodaemon server start` It will ask to define the firewall rule. Make sure to select **Public** here, since the network adapter to WSL 2 belongs in the public profile!
+
+6. Go back to the Ubuntu terminal, we need to set some env variables: `export WSL_HOST=$(tail -1 /etc/resolv.conf | cut -d' ' -f2)` and `export ADB_SERVER_SOCKET=tcp:$WSL_HOST:5037`
+
+7. Install socat: `sudo apt-get install socat` and then use socat to relay WSL2 adb requests to Windows: `socat -d -d TCP-LISTEN:5037,reuseaddr,fork TCP:$(cat /etc/resolv.conf | tail -n1 | cut -d " " -f 2):5037`
+
+8. Open up a new instance of the Ubuntu terminal. Now, if you search for adb devices, the emulator should pop up there `adb devices`.
+
+With this, you can now push the Flutter project to your emulator. This should be confirmed by the doctor tool: `flutter doctor`
diff --git a/lib/APICaller/api_call_service.dart b/lib/APICaller/api_call_service.dart
@@ -0,0 +1,92 @@
+import 'dart:convert';
+import 'dart:async';
+import 'dart:io';
+import 'package:http2/http2.dart';
+import 'package:quick_log/quick_log.dart';
+
+import 'api_exceptions.dart';
+
+class APICallService {
+  APICallService();
+  static var log = Logger('API Call Service');
+
+  /// Makes a GET call to figma using `url` and `token`
+  static Future<dynamic> makeAPICall(String url, String token) async {
+    var response;
+    var uri = Uri.parse(url);
+
+    /// The following request must be done using http2. The reason is
+    /// that the Figma API enforces http2, so using regular http will
+    /// not work.
+    try {
+      var transport = ClientTransportConnection.viaSocket(
+        await SecureSocket.connect(
+          uri.host,
+          uri.port,
+          supportedProtocols: ['h2'],
+        ),
+      );
+
+      var stream = transport.makeRequest(
+        [
+          Header.ascii(':method', 'GET'),
+          Header.ascii(
+              ':path', uri.path + (uri.query.isEmpty ? '' : '?${uri.query}')),
+          Header.ascii(':scheme', uri.scheme),
+          Header.ascii(':authority', uri.host),
+          Header.ascii('x-figma-token', token),
+        ],
+        endStream: true,
+      );
+
+      final buffer = StringBuffer();
+      await for (var message in stream.incomingMessages) {
+        if (message is HeadersStreamMessage) {
+          for (var header in message.headers) {
+            var name = utf8.decode(header.name);
+            var value = utf8.decode(header.value);
+            // print('Header: $name: $value');
+            if (name == ':status') {
+              _returnResponse(int.parse(value));
+              break;
+            }
+          }
+        } else if (message is DataStreamMessage) {
+          // Use [message.bytes] (but respect 'content-encoding' header)
+          buffer.write(utf8.decode(message.bytes));
+        }
+      }
+      await transport.finish();
+      var map = buffer.toString();
+      response = json.decode(map);
+      return response;
+    } catch (e) {
+      print(e);
+    }
+  }
+
+  static dynamic _returnResponse(int status) {
+    switch (status) {
+      case 200:
+        // TODO: Only print when verbose flag is active
+        // log.debug('API call went successfully : ${status}');
+        break;
+      case 400:
+        log.error('BadRequestException : ${status}');
+        throw BadRequestException();
+        break;
+      case 401:
+      case 403:
+        log.error('UnauthorizedException : ${status}');
+        throw UnauthorisedException();
+        break;
+      case 500:
+      default:
+        log.error(
+            'Error occured while Communication with Server with StatusCode : ${status}');
+        throw FetchDataException(
+            'Error occured while Communication with Server with StatusCode : ${status}');
+        break;
+    }
+  }
+}
diff --git a/lib/APICaller/api_exceptions.dart b/lib/APICaller/api_exceptions.dart
@@ -0,0 +1,25 @@
+class APIException implements Exception {
+  final _message;
+  final _prefix;
+  APIException([this._message, this._prefix]);
+  String toString() {
+    return "$_prefix$_message";
+  }
+}
+
+class FetchDataException extends APIException {
+  FetchDataException([String message])
+      : super(message, "Error During Communication: ");
+}
+
+class BadRequestException extends APIException {
+  BadRequestException([message]) : super(message, "Invalid Request: ");
+}
+
+class UnauthorisedException extends APIException {
+  UnauthorisedException([message]) : super(message, "Unauthorised: ");
+}
+
+class InvalidInputException extends APIException {
+  InvalidInputException([String message]) : super(message, "Invalid Input: ");
+}