Merge pull request #52 from penpot/dev

Plugin relaunch, initial setup, features and refactoring

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/calm-eels-reflect.md

@@ -0,0 +1,5 @@
+---
+"penpot-exporter": minor
+---
+
+Initial plugin release

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+end_of_line = lf
+indent_style = space
+charset = utf-8
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_size = 2

.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+ui-src/lib/penpot.js

.eslintrc.cjs

@@ -0,0 +1,25 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  },
+  env: { browser: true, node: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+    'plugin:@figma/figma-plugins/recommended'
+  ],
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  },
+  rules: {
+    '@typescript-eslint/no-unused-vars': ['error', { ignoreRestSiblings: true }]
+  }
+};

.github/workflows/ci.yaml

@@ -0,0 +1,34 @@
+name: CI
+
+on:
+  push:
+    branches: [main, dev]
+  pull_request:
+
+jobs:
+  build:
+    name: Build ${{ matrix.node }}
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: ['20.x']
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+      - uses: bahmutov/npm-install@v1
+      - run: npm run build
+  lint:
+    name: Lint ${{ matrix.node }}
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: ['20.x']
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+      - uses: bahmutov/npm-install@v1
+      - run: npm run lint

.github/workflows/release.yaml

@@ -0,0 +1,31 @@
+name: Publish and release
+
+on:
+  push:
+    branches: [main]
+
+permissions:
+  contents: write
+  issues: write
+  pull-requests: write
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: ['20.x']
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+      - uses: bahmutov/npm-install@v1
+      - uses: changesets/action@v1
+        with:
+          title: Release
+          publish: npx changeset tag
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -1,3 +1,2 @@
 node_modules
-package-lock.json
 dist

.nvmrc

@@ -0,0 +1 @@
+20

.prettierignore

@@ -0,0 +1,5 @@
+.changeset
+node_modules
+dist
+ui-src/lib/penpot.js
+LICENSE

DEV_GUIDE.md

@@ -1,39 +1,40 @@
 # Developer guide
 
-The plugin relies in [penpot.js](https://github.com/penpot/penpot-exporter-figma-plugin/blob/main/src/penpot.js)
-library. It contains a subset of Penpot frontend app, transpiled into
-javascript to be used from js code (this was easy since the frontend is written
-in ClojureScript, that has direct translation to javascript).
+The plugin relies in
+[penpot.js](https://github.com/penpot/penpot-exporter-figma-plugin/blob/main/src/penpot.js) library.
+It contains a subset of Penpot frontend app, transpiled into javascript to be used from js code
+(this was easy since the frontend is written in ClojureScript, that has direct translation to
+javascript).
 
-Basically, it exports the `createFile` function and the `File` data type, that
-represents a Penpot file as it resides in memory inside the frontend app. It
-has function to create pages and their content, and also an `export` function
-that generates and downloads a .zip archive with the Penpot file as svg
-documents in Penpot annotated format, that you can import directly into Penpot.
+Basically, it exports the `createFile` function and the `File` data type, that represents a Penpot
+file as it resides in memory inside the frontend app. It has function to create pages and their
+content, and also an `export` function that generates and downloads a .zip archive with the Penpot
+file as svg documents in Penpot annotated format, that you can import directly into Penpot.
 
-You can see the [source of the library at Penpot repo](https://github.com/penpot/penpot/tree/develop/frontend/src/app/libs).
+You can see the
+[source of the library at Penpot repo](https://github.com/penpot/penpot/tree/develop/frontend/src/app/libs).
 
-To see a general description of the data types used in the functions you can
-see [the data model](https://help.penpot.app/technical-guide/data-model/).
-Their full specifications are in the [common types module](https://github.com/penpot/penpot/tree/develop/common/src/app/common/types).
+To see a general description of the data types used in the functions you can see
+[the data model](https://help.penpot.app/technical-guide/data-model/). Their full specifications are
+in the
+[common types module](https://github.com/penpot/penpot/tree/develop/common/src/app/common/types).
 
-Those types are defined in [Clojure spec](https://clojure.org/guides/spec) format.
-For those unfamiliar with the syntax, here is a small basic guide:
+Those types are defined in [Clojure spec](https://clojure.org/guides/spec) format. For those
+unfamiliar with the syntax, here is a small basic guide:
 
 ```clojure
 (s/def ::name string?)
 (s/def ::id uuid?)
 ```
 
-A parameter or attribute called `name` is of type string, and `id` is an *uuid*
-string (e.g. "000498f3-27fc-8000-8988-ca7d52f46843").
+A parameter or attribute called `name` is of type string, and `id` is an _uuid_ string (e.g.
+"000498f3-27fc-8000-8988-ca7d52f46843").
 
 ```clojure
 (s/def ::stroke-alignment #{:center :inner :outer})
 ```
 
-`stroke-alignment` is of an enumerated type, and the valid values are "center",
-"inner" and "outer".
+`stroke-alignment` is of an enumerated type, and the valid values are "center", "inner" and "outer".
 
 ```clojure
 (ns app.common.types.shape
@@ -44,17 +45,17 @@ string (e.g. "000498f3-27fc-8000-8988-ca7d52f46843").
 (s/def ::line-height ::us/safe-number)
 ```
 
-`line-height` is of the type `safe-number`, defined in `app.common.spec`
-namespace, that here is imported with the name `us` (a *safe number* is a
-integer or floating point number, with a value not too big or small).
+`line-height` is of the type `safe-number`, defined in `app.common.spec` namespace, that here is
+imported with the name `us` (a _safe number_ is a integer or floating point number, with a value not
+too big or small).
 
 ```clojure
 (s/def ::page
   (s/keys :req-un [::id ::name ::objects ::options]))
 ```
 
-`page` is an object with four required arguments: `id`, `name`, `objects` and
-`options`, whose types have to be defined above.
+`page` is an object with four required arguments: `id`, `name`, `objects` and `options`, whose types
+have to be defined above.
 
 ```clojure
 (s/def ::column
@@ -66,8 +67,8 @@ integer or floating point number, with a value not too big or small).
                    ::gutter]))
 ```
 
-`column` has one required attribute `color` and five optional ones `size`,
-`type`, `item-length`, `margin` and `gutter`.
+`column` has one required attribute `color` and five optional ones `size`, `type`, `item-length`,
+`margin` and `gutter`.
 
 ```clojure
 (s/def ::children
@@ -76,8 +77,8 @@ integer or floating point number, with a value not too big or small).
              :min-count 1))
 ```
 
-`children` is a collection (implemented as a vector) of objects of type
-`content`, and must have a minimun lenght of 1.
+`children` is a collection (implemented as a vector) of objects of type `content`, and must have a
+minimun lenght of 1.
 
 ```clojure
 (defmulti animation-spec :animation-type)
@@ -102,11 +103,9 @@ integer or floating point number, with a value not too big or small).
   (s/multi-spec animation-spec ::animation-type))
 ```
 
-This is probably the most complex construct. `animation` is a multi schema
-object. It has an attribute called `animation-type` and the rest of the fields
-depend on its value. For example, if `animation-type` is "dissolve", the object
-must also have a `duration` and an `easing` attribute.
-
-Other constructs should be more or less auto explicative with this guide
-and the clojure.spec manual linked above.
+This is probably the most complex construct. `animation` is a multi schema object. It has an
+attribute called `animation-type` and the rest of the fields depend on its value. For example, if
+`animation-type` is "dissolve", the object must also have a `duration` and an `easing` attribute.
 
+Other constructs should be more or less auto explicative with this guide and the clojure.spec manual
+linked above.