1. Top
  2. figspec
  3. Commits
figspec

Unofficial static Figma frame/file viewer available as HTML CustomElement

Commits at 7956a99f86560a8ec8730fa9f2028dd7f4a1b7f3

  1. 7956a99f fix: 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
  2. aa51b230 chore: Fix ignore rule for packaged tarball Forgot to change when ditched monorepo. 4b677892bcfe36b967e292cf8431521eb47104ae Shota FUJI authored at Shota FUJI comitted at
  3. aeb1a82c chore: Remove Storybook 00a896342ae384ec4a450467a500da462bb77959 introduced a docs site, which includes Storybook equivalent working examples. Shota FUJI authored at Shota FUJI comitted at
  4. 00a89634 docs: 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
  5. 0a028f9f chore: 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
  6. 53197c04 fix: Remove unnecessary double quotes Shota Fuji authored at Shota Fuji comitted at
  7. 9f572c1f chore: 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
  8. d393b4a0 chore: Add automated release workflow Shota Fuji authored at Shota Fuji comitted at
  9. 6db7070e chore: Upgrade Node.js version for development to v16 Shota Fuji authored at Shota Fuji comitted at
  10. 8e7c8ce9 chore: Update test/lint action file Shota Fuji authored at Shota Fuji comitted at
  11. d2539660 chore: Upgrade TypeScript Shota Fuji authored at Shota Fuji comitted at
  12. 3436642e chore: 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
  13. 4dfc0c86 chore: Use Yarn v3 Yarn v1 is deprecated. Shota Fuji authored at Shota Fuji comitted at
  14. 8f28e1a1 docs: Update README.md Shota Fuji authored at Shota Fuji comitted at
  15. 4b677892 chore: 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
  16. fd11a1d2 Merge pull request #43 from brettdewoody/41-support-react-18 Add React 18 as peer dependency. Shota FUJI authored at GitHub comitted at
  17. 459b423e react/v1.0.1 Shota Fuji authored at Shota Fuji comitted at
  18. 967c346d components/v1.0.1 Shota Fuji authored at Shota Fuji comitted at
  19. 4d901a9a Merge pull request #36 from e111077/remove-clipboard remove copy-to-clipboard Shota FUJI authored at GitHub comitted at
  20. e88d2e3f Merge pull request #35 from pocka/feature/lit-labs-react Use @lit-labs/react Shota FUJI authored at GitHub comitted at
  21. 887d2e74 Merge pull request #33 from e111077/lit-2 Upgrade to lit 2 Shota FUJI authored at GitHub comitted at
  22. 99f482a3 react/v1.0.0 Shota Fuji authored at Shota Fuji comitted at
  23. 64dac51c components/v1.0.0 Shota Fuji authored at Shota Fuji comitted at
  24. bbe9ce67 feat(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
  25. d0e35457 docs(components): Update TODO comment To reflect the current state correctly. Shota Fuji authored at Shota Fuji comitted at
  26. 37e79762 components/v0.1.10 Shota Fuji authored at Shota Fuji comitted at
  27. 311b1aad docs: Update README Simplified. Remove bloated feature goals. Shota Fuji authored at Shota Fuji comitted at
  28. 404f5196 chore(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
  29. ed1245dc style(components): Format with Prettier Shota Fuji authored at Shota Fuji comitted at
  30. 6f276c53 components/v0.1.9 Shota Fuji authored at Shota Fuji comitted at
  31. 9547cdf2 fix(components): Use Figma's default background colour https://github.com/pocka/figspec/issues/24 Shota Fuji authored at Shota Fuji comitted at
  32. 6c520ea4 react/v0.1.6 Shota Fuji authored at Shota Fuji comitted at
  33. f130d0b8 react/v0.1.5 Shota Fuji authored at Shota Fuji comitted at
  34. ff275f40 components/v0.1.8 Shota Fuji authored at Shota Fuji comitted at
  35. fc0c6894 Merge pull request #25 from yannbf/feat/add-link-figspect-react Feat(@figspec/react): add link prop Shota Fuji authored at GitHub comitted at
  36. 9330dbde Merge pull request #26 from yannbf/fix/footer-position fix: apply correct zindex and border to footer and sidebar Shota Fuji authored at GitHub comitted at
  37. 46ed6677 components/v0.1.7 Shota Fuji authored at Shota Fuji comitted at
  38. cb642645 chore: Run tests and lint on PR as well Shota Fuji authored at Shota Fuji comitted at
  39. 82051efe style(components): Format with Prettier Shota Fuji authored at Shota Fuji comitted at
  40. 34a8ee8a misc(components): Add link for PR in TODO comment Shota Fuji authored at Shota Fuji comitted at
  41. 15584f99 Merge pull request #23 from yannbf/fix/component-variants fix: add check for component variant node type Shota Fuji authored at GitHub comitted at
  42. e24510cf Merge pull request #21 from yannbf/feature/figma-footer Feat: add Figma metadata footer Shota Fuji authored at GitHub comitted at
  43. dc7defad components/v0.1.6 Shota Fuji authored at Shota Fuji comitted at
  44. bd44a995 deps: 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
  45. 8d453f8d components/v0.1.5 Shota Fuji authored at Shota Fuji comitted at
  46. 02758bb8 feat: 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
  47. d12f56b2 fix: "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
  48. 0b8cf9f2 components/v0.1.4 Shota Fuji authored at Shota Fuji comitted at
  49. 061f2204 fix(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
  50. 669eb592 fix(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
  51. dfd433cc Merge pull request #12 from yannbf/feature/inspector-view Feature/inspector view Shota Fuji authored at GitHub comitted at
  52. bdca799c Merge pull request #18 from pocka/fix/react-jsx-transform Do not use new JSX transform Shota Fuji authored at GitHub comitted at
  53. 0d60d5f2 components/v0.1.3 Shota Fuji authored at Shota Fuji comitted at
  54. a17b8bd8 react/v0.1.4 Shota Fuji authored at Shota Fuji comitted at
  55. 7389f4ba chore: Fix cjs distribution Shota Fuji authored at Shota Fuji comitted at
  56. 5fdfd745 react/v0.1.3 Shota Fuji authored at Shota Fuji comitted at
  57. bd000198 fix(react): Mark optional properties optional Shota Fuji authored at Shota Fuji comitted at
  58. bf64254e react/v0.1.2 Shota Fuji authored at Shota Fuji comitted at
  59. 66e1651b components/v0.1.2 Shota Fuji authored at Shota Fuji comitted at
  60. fe98003d chore: Fix distribution Shota Fuji authored at Shota Fuji comitted at
  61. 593c1f69 chore: 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
  62. 61c8c7be chore: Fix version commit message Shota Fuji authored at Shota Fuji comitted at
  63. 4ba2027a components/v0.1.1 Shota Fuji authored at Shota Fuji comitted at
  64. 2082d618 components/v0.1.1 Shota Fuji authored at Shota Fuji comitted at
  65. c8702d95 chore: Add prepublishOnly hooks Shota Fuji authored at Shota Fuji comitted at
  66. 126d01e5 chore: Include package name in version commit message Shota Fuji authored at Shota Fuji comitted at
  67. 9c57e527 v0.1.0 Shota Fuji authored at Shota Fuji comitted at
  68. 8b7b6f14 v0.1.0 Shota Fuji authored at Shota Fuji comitted at
  69. 4dd6427e chore: Add .yarnrc Shota Fuji authored at Shota Fuji comitted at
  70. 68ca1f28 Merge pull request #16 from pocka/feature/figma-file Figma file support Shota Fuji authored at GitHub comitted at
  71. 4c6e54c3 Merge pull request #15 from pocka/feature/events Custom Events Shota Fuji authored at GitHub comitted at
  72. def2c3a6 Merge pull request #14 from pocka/feature/cache-heavy-computation Cache tree node related things Shota Fuji authored at GitHub comitted at
  73. 9882ccad docs: Add CONTRIBUTING.md Shota Fuji authored at GitHub comitted at
  74. 1e1fa1e7 docs: Add CODE_OF_CONDUCT.md Shota Fuji authored at GitHub comitted at
  75. 82fa4961 chore: Lint files on push Shota Fuji authored at Shota Fuji comitted at
  76. 497e5f77 docs: README for an internal script Shota Fuji authored at Shota Fuji comitted at
  77. 30934c6d docs: Update README Wrote at-least-meaningful things. Shota Fuji authored at Shota Fuji comitted at
  78. dfe5a51a Merge pull request #13 from pocka/feature/react-binding React bindings Shota Fuji authored at GitHub comitted at
  79. 3524be23 Merge pull request #11 from pocka/feature/initial-zoom-level Initial zoom level Shota Fuji authored at GitHub comitted at
  80. 1f3fdd1f chore: 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
  81. 569c3f80 Merge pull request #9 from yannbf/feature/add-drag Feature: add drag functionality like figma Shota Fuji authored at GitHub comitted at
  82. d8991c59 refactor: 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
  83. 2a57a999 refactor: 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
  84. 063bdb78 Initial commit Shota Fuji authored at Shota Fuji comitted at
  85. 0182f0c6 chore(storybook): set stories to use fullscreen Yann Braga authored at Yann Braga comitted at
  86. f06f1246 feature: 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
  87. 8901f50d misc: Remove unnecessary default value from story Shota Fuji authored at Shota Fuji comitted at
  88. 55c50936 chore: Fix preview height on Docs page Shota Fuji authored at Shota Fuji comitted at
  89. c53ff5fe misc: 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
  90. b6d4e733 feat: 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
  91. 4184ab6e feat(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
  92. af9a7942 perf: 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
  93. 825ba0bc feat(react): Add event bindings Shota Fuji authored at Shota Fuji comitted at
  94. a6428c1f feat(components): Add custom events https://github.com/pocka/figspec/issues/5 Added `scalechange`, `positionchange` and `nodeselect` events. Shota Fuji authored at Shota Fuji comitted at
  95. 704cd1a8 docs(react): Update README Shota Fuji authored at Shota Fuji comitted at
  96. 5124aaa1 docs(components): Update README Shota Fuji authored at Shota Fuji comitted at
  97. d3024f17 feat(react): Figma file support Shota Fuji authored at Shota Fuji comitted at
  98. 4439e63f feat(components): Figma File support Shota Fuji authored at Shota Fuji comitted at
  99. 1f79281a refactor(components): Delegate viewer functionalitty into mixin Shota Fuji authored at Shota Fuji comitted at
  100. cc281367 refactor(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
  101. dfa1d215 chore(scripts): Save images as well Shota Fuji authored at Shota Fuji comitted at
  102. 22478c88 chore(scripts): Support file fetching https://github.com/pocka/figspec/issues/8 Shota Fuji authored at Shota Fuji comitted at
  103. 90a93012 fix(react): Do not use new JSX transform https://github.com/pocka/figspec/issues/17 Shota Fuji authored at Shota Fuji comitted at
  104. 4996f1cb fix(components): stop click propagation on inspector view Yann Braga authored at Yann Braga comitted at
  105. d8378333 feat(components): deselect node when clicking outside of canvas Yann Braga authored at Yann Braga comitted at
  106. 551276fc feat(components): improve color calculation and property extraction Yann Braga authored at Yann Braga comitted at
  107. 24013dd3 feat(components): add inspector view to main viewer Yann Braga authored at Yann Braga comitted at
  108. f22f68dc feat(components): extract more properties in inspector view Yann Braga authored at Yann Braga comitted at
  109. 4ba33817 feat: add inspector view Yann Braga authored at Yann Braga comitted at
  110. db85e596 chore(deps): upgrade storybook to 6.2 Yann Braga authored at Yann Braga comitted at
  111. 50c3e78b feat: 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
  112. be5a37be fix: add check for component variant node type Yann Braga authored at Yann Braga comitted at
  113. d9025cc3 fix: 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
  114. 3a4ddeb7 feat: 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
  115. 44c6eda7 run prettier e111077 authored at e111077 comitted at
  116. 63b8aa12 run linter e111077 authored at e111077 comitted at
  117. f1566812 upgrade to lit 2 e111077 authored at e111077 comitted at
  118. b5180d5b refactor(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
  119. f702b258 clean up implementation e111077 authored at e111077 comitted at
  120. 681c8ad1 run prettier e111077 authored at e111077 comitted at
  121. a6603128 run linter e111077 authored at e111077 comitted at
  122. 7ab21cd6 remove copy-to-clipboard e111077 authored at e111077 comitted at
  123. 593b7e6b Add React 18 as peer dependency. Brett DeWoody authored at Brett DeWoody comitted at