b9391697fix: Cannot import the modules with Node.js ESM resolution
<https://github.com/pocka/figspec-react/issues/1>
When the bundler uses Node.js' ESM module resolution, errors occur
during an import phase. Considering today's module ecosystem and this
library targeting ES2019 environment, I believe this change is safe and
reasonable to introduce. If not, I need to re-enable CJS build...
Shota FUJI
authored at
Shota FUJI
comitted at
54bf94f4feat: Make spacing configurable
Using spacing size tokens brings consistency and prevents future patches
from breaking aesthetics (also less review cost).
Shota FUJI
authored at
Shota FUJI
comitted at
62622f99chore: Support only ESM-ES2019
The reason `target` set to `ES2015` was I thought "if it's 5yrs old,
it's safe". For the same reason, I tried to set to ES2018 but decided to
increase because:
* Even the Safari 12 mostly supports ES2019.
* Library code uses ES2019 API (`Object.fromEntries` and
`Array.prototype.flat`).
* There was no differences in built files, between `target=es2018` and
`target=es2019`.
The reason for dropping CJS is it's obsolescence. It was still used
for front-end code in 3 years ago (when I initially wrote this lib).
However, given the support status of bundlers and Node.js, I believe
dropping CJS output provides better user experience thanks to halved
package size and more maintainability.
Shota FUJI
authored at
Shota FUJI
comitted at
9ce0f16echore: Forbid unused locals
...to make code quality better.
Shota FUJI
authored at
Shota FUJI
comitted at
aae86f70feat: Feedback UI for copy operation
Previously there was no feedback for copy (CSS code, text contents)
therefore a user was not able to know whether the copy operation is
succeeded or not. This commit adds common UI (snackbar) as a feedback UI
for the copy operation.
Shota FUJI
authored at
Shota FUJI
comitted at
43f53b8fMerge pull request #46 from pocka/feature/v2-wip
v2Shota FUJI
authored at
GitHub
comitted at
f240007bdocs: Add many nodes example
In order to tackle https://github.com/pocka/figspec/issues/30
Twemoji is ideal for this purpose: a lot of nodes, complex shapes,
uniqueness among nodes.
Shota FUJI
authored at
Shota FUJI
comitted at
7956a99ffix: Do not use overflowing small <svg>
During rewriting FigspecViewer from Lit to DOM (without libraries),
I noticed not using overflowing small <svg> fixes long-standing and
thought-to-be-hard-to-fix issues at once. Since the fix is easily
appliable to the current code base, here it is.
The <svg> element works as a layer for guidelines, has had viewBox
size of `0 0 5 5` and most of the paint is rendered as overflowing
content. The problem is, this is the cause of Safari does not trigger
pointer-related actions and Blink renders guidelines at incorrect
positions (slightly shifted).
* https://github.com/pocka/figspec/issues/37
* https://github.com/pocka/figspec/issues/31
The code is there from the start[^0] and I don't remember why it being
this... my guess is limitation of being a nested custom-element and
forgot to change on the refactor[^1]. After searching for noticeable
differences using `git stash`, the only changes are those bugs fixed.
I expected overflow/scroll related issues but no noticeable regression
found.
[^0]: https://github.com/pocka/figspec/blob/2a57a99908d62f050675d365da74ad9249c281e5/packages/components/src/FigmaViewerGuide/index.ts#L152-L153
[^1]: https://github.com/pocka/figspec/commit/d8991c590cb831a443f2bf97489e4f1142eab81b#diff-a21bd58f460ace3ded3e7274f284ecb4a2e988db51fab687cc64c2dcdccc5093R345-R346
Fix confirmed on macOS Safari 16.5.2, Firefox 115.0.2 (Linux) and
Chromium 115.0.5790.110 (Linux).
Shota FUJI
authored at
Shota FUJI
comitted at
aa51b230chore: Fix ignore rule for packaged tarball
Forgot to change when ditched monorepo.
4b677892bcfe36b967e292cf8431521eb47104ae
Shota FUJI
authored at
Shota FUJI
comitted at
aeb1a82cchore: Remove Storybook
00a896342ae384ec4a450467a500da462bb77959 introduced a docs site,
which includes Storybook equivalent working examples.
Shota FUJI
authored at
Shota FUJI
comitted at
00a89634docs: Add docs site
When I upgraded Storybook to v7, Docs Addon stopped reading JSDoc
comments. The feature, along with UX for the Docs Page (as an end-user)
have not been great from the start. So I decided to write a document
site from scratch, as the complexity of this project is not high.
Upon writing the docs, I realized I no longer need Storybook anymore
thanks to simple playground section.
* Figspec elements are Custom Element: no need for style isolation
and it just works with `<iframe>`.
* Minimum HTML+JS+class-less CSS is very lightweight, simple and
robust. Goodbye monstrously huge dependencies.
* Because how Custom Elements work, HMR is not a thing. Reload is always
required and this simple docs site is way faster at the page startup
speed.
* I'm dubious about web-component-analyzer's future and current quality.
Years passed but it's still "for experimental and demo purposes".
In the end, burden of duplicated documentation because of Mixins and
lack of stability outweighed the merit.
Simple `<iframe>` and HTML/JS per stories solved my problem.
It does not allow me to change parameter (Args, in Storybook) but I've
never used the feature in this project. For Viewport Addon
functionality, just open the frame in new tab then use browsers'
built-in device emulation. Many devs knowing how to use Storybook
but it can't beat the benefit comes from the reduction of the number
of project's dependencies by removing SB packages.
So I copied stories to "Examples". (technically it's test cases?)
Removal of Storybook and its files are not included in this commit in
order to keep commits' atomicity.
Shota FUJI
authored at
Shota FUJI
comitted at
0a028f9fchore: Upgrade Storybook to v7
I removed Docs Addon related things because:
* it doesn't read components' JSDoc
* with `parameters.docs`, it crashes with error message like
"import_ts_dedent is not a function" (I don't remember exact message)
* hand-written document is far superior, obviously
Shota FUJI
authored at
Shota FUJI
comitted at
9f572c1fchore: Helper script no longer generate filename with colon
https://github.com/pocka/figspec/issues/27
fix #27
Shota Fuji
authored at
Shota Fuji
comitted at
3436642echore: Re-configure husky
Yarn v3 does not have a lifecycle hook equal to or similar to
`postinstall` hook. So I installed this plugin.
https://github.com/sachinraja/yarn-plugin-postinstall-dev
Shota Fuji
authored at
Shota Fuji
comitted at
4b677892chore: Switch to multirepo
https://github.com/pocka/figspec-react/commit/f8308400ffcfa0cfba1c0e0bcc87167407b08957
> * Each package don't recieve frequent updates.
> * Uses independent versioning.
> * Create tags and releases has been hard.
> * It's far easier to manage devDependencies in single repo than in
> monorepo. No need to worry about mixing Storybook versions.
> * User friendly.
Shota Fuji
authored at
Shota Fuji
comitted at
fd11a1d2Merge pull request #43 from brettdewoody/41-support-react-18
Add React 18 as peer dependency.Shota FUJI
authored at
GitHub
comitted at
bbe9ce67feat(components): Basic touch gestures
https://github.com/pocka/figspec/issues/3
Added a dead simple touch gestures.
Shota Fuji
authored at
Shota Fuji
comitted at
d0e35457docs(components): Update TODO comment
To reflect the current state correctly.
Shota Fuji
authored at
Shota Fuji
comitted at
311b1aaddocs: Update README
Simplified. Remove bloated feature goals.
Shota Fuji
authored at
Shota Fuji
comitted at
404f5196chore(components): Declare lit-html as a regular dependency
https://github.com/pocka/figspec/issues/29
Removed the use of transitive dependency in the package. Now works
on PnP-ed projects without any configuration.
Shota Fuji
authored at
Shota Fuji
comitted at
9547cdf2fix(components): Use Figma's default background colour
https://github.com/pocka/figspec/issues/24
Shota Fuji
authored at
Shota Fuji
comitted at
fc0c6894Merge pull request #25 from yannbf/feat/add-link-figspect-react
Feat(@figspec/react): add link propShota Fuji
authored at
GitHub
comitted at
9330dbdeMerge pull request #26 from yannbf/fix/footer-position
fix: apply correct zindex and border to footer and sidebarShota Fuji
authored at
GitHub
comitted at
15584f99Merge pull request #23 from yannbf/fix/component-variants
fix: add check for component variant node typeShota Fuji
authored at
GitHub
comitted at
e24510cfMerge pull request #21 from yannbf/feature/figma-footer
Feat: add Figma metadata footerShota Fuji
authored at
GitHub
comitted at
bd44a995deps: Mark copy-to-clipboard as direct dependency
https://github.com/pocka/figspec/issues/19
Added "copy-to-clipboard" package to "dependencies" section. It's
added locally by @storybook/ui so builds passed.
Shota Fuji
authored at
Shota Fuji
comitted at
02758bb8feat: Support for MacOS Safari pinch gesture
This commit adds support for MacOS Safari's non-standard GestureEvent.
See more for GestureEvent at: https://developer.apple.com/documentation/webkitjs/gestureevent
NOTE: The gesture does not perform zoom-at-point due to lack of offset
point in the events
https://github.com/pocka/figspec/issues/2
close #2
Shota Fuji
authored at
Shota Fuji
comitted at
d12f56b2fix: "Fix" ugly error UI
https://github.com/pocka/figspec/issues/10
Previous error UI is not clearly different than normal views.
This commit "fixes" the UI and improve readability.
Added a new CSS variable: --figspec-viewer-error-color
close #10
Shota Fuji
authored at
Shota Fuji
comitted at
061f2204fix(components): Specify z-index on page selector
Prevent canvas contents overlapping control UI, which visible for
<figspec-file-viewer/>.
Shota Fuji
authored at
Shota Fuji
comitted at
669eb592fix(components): Disable canvas interaction on inspector
https://github.com/pocka/figspec/pull/12#issuecomment-754766352
Since event handlers listens at a root of the CustomElement, gestures
working even on the inspector panel. This commit prevents these gestures
from working on the inspector panel by adding `stopPropagation`.
The "space+drag" functionallity, on the other hand, can't be prevented
because it's registered via `onmouse~` but I don't think it's critical
for UX.
I also fixed some elements' sizing so they could scroll and be sized
properly.
Shota Fuji
authored at
Shota Fuji
comitted at
dfd433ccMerge pull request #12 from yannbf/feature/inspector-view
Feature/inspector viewShota Fuji
authored at
GitHub
comitted at
bdca799cMerge pull request #18 from pocka/fix/react-jsx-transform
Do not use new JSX transformShota Fuji
authored at
GitHub
comitted at
593c1f69chore: Explicitly specify typing files
Even though TypeScript catches typing files, npmjs.com cannot detect
whether the package has TypeScript typings.
Shota Fuji
authored at
Shota Fuji
comitted at
dfe5a51aMerge pull request #13 from pocka/feature/react-binding
React bindingsShota Fuji
authored at
GitHub
comitted at
3524be23Merge pull request #11 from pocka/feature/initial-zoom-level
Initial zoom levelShota Fuji
authored at
GitHub
comitted at
1f3fdd1fchore: Do not flag src/index.ts as pure
Without specifying the file in package.json#sideEffects, webpack used by
build-storybook marks the file as side-effect free and omits it!
Shota Fuji
authored at
Shota Fuji
comitted at
569c3f80Merge pull request #9 from yannbf/feature/add-drag
Feature: add drag functionality like figmaShota Fuji
authored at
GitHub
comitted at
d8991c59refactor: Use single customElement for preview
Use only <figspec-viewer> instead of with <figma-viewer-guide>.
This reduces maintenance costs and makes modifying the codebase more
easy.
I also changed the DOM structure to rendering guides and tooltips
inside one single <svg> container for simplicity (and for performance,
hopefully).
Shota Fuji
authored at
Shota Fuji
comitted at
2a57a999refactor: figma-viewer -> figspec-viewer
To match the package name. Also avoids conflict with future (possible)
official custom elements.
Shota Fuji
authored at
Shota Fuji
comitted at
f06f1246feature: add drag like figma
Figma provides drag functionality when holding space, so does other tools.
Functionality is added to match that.
Yann Braga
authored at
Yann Braga
comitted at
c53ff5femisc: Mark non-public properties as private
Almost every public accesible properties are caught by
web-component-analyzer and appears on Docs table. Some getters and
inherited public properties are not intended to be used by users.
Shota Fuji
authored at
Shota Fuji
comitted at
b6d4e733feat: Initial zoom level
https://github.com/pocka/figspec/issues/1
Sets initial zoom level based on element's size. This might not be same
as Figma's behavior, but it's convenient.
Shota Fuji
authored at
Shota Fuji
comitted at
4184ab6efeat(react): React bindings
You can use WebComponents (custom elements) in React, but the experience
is not great. No props binding (React uses setAttribute), Poor type
definition (JSX does great job though), Imperative event handling,
etc...
This bindings aim to solve these inconveniencies.
Shota Fuji
authored at
Shota Fuji
comitted at
af9a7942perf: Does not compute node related stuff each render
https://github.com/pocka/figspec/issues/7
Only performe flattening the node tree, determining outermost
bounding rect and construct distance-lines when related values have
updated. From what I saw, this change stabilizes an average FPS and
makes a memory usage more mild (less GC sweep).
Shota Fuji
authored at
Shota Fuji
comitted at
1f79281arefactor(components): Delegate viewer functionalitty into mixin
Shota Fuji
authored at
Shota Fuji
comitted at
cc281367refactor(components): Slim down figspec-viewer
In order to add file viewer feature, I needed to split non-nodes related
codes out from <figspec-viewer>. This commit does:
1. Make error UI as component (View function)
2. Move pan/scale related things out as a mixin
With a little more cleanup, I can add file viewer feature without a
bunch of duplicated code :)
Shota Fuji
authored at
Shota Fuji
comitted at
50c3e78bfeat: add figma footer
- Present a footer with metadata of the figma file such as
title, timestamp and a link to open on Figma
Yann Braga
authored at
Yann Braga
comitted at
d9025cc3fix: apply correct zindex and border to footer and sidebar
- The footer should be above the design, but below the sidebar
Yann Braga
authored at
Yann Braga
comitted at
3a4ddeb7feat: add link property
- Figspect will now present a footer with component meta in case link is passed
Yann Braga
authored at
Yann Braga
comitted at
b5180d5brefactor(react): Use @lit-labs/react
https://github.com/pocka/figspec/issues/34
The existing glue code was working okay. However, adding property or
attribute to the element is daunting and easy to misconfigure.
I replaced the code with new integration package provided by official
lit maintainers for maintanability reasons.
I kept type signatures to make sure this change does not break users'
type checking accidentally.
close #34
Shota Fuji
authored at
Shota Fuji
comitted at
c237cd12feat: v2 rewrite
The goals of this rewrite are:
* Improve performance, especially on many nodes.
* Get rid of Lit.
* Make zero-dependencies.
* Make UI useable and ok-ish.
The current quality is not personally satisfiable. Not able to controll
with touch input, still no feedback for copy actions, many missed
opportunity for CSS codegen, etc...
However, I believe this state achieves the above goals, so decided to
create a release instead of perfecting.
Shota FUJI
authored at
Shota FUJI
comitted at