DEV Community

Cover image for Our open-source in Hacktoberfest 2020
 brainhub profile image Ilya Lesik
Ilya Lesik for  brainhub

Posted on

Our open-source in Hacktoberfest 2020

#hacktoberfest #opensource #react

Our team actively supports open-source movement, but unfortunately, sometimes we don't have enough time for implementing new features in our OSS. So, initiatives like Hacktoberfest could be really helpful for us. In this article, I will show up the most notable issues.

React Figma

react-figma is our flagship open-source project, this is a React renderer into Figma. The project has already participated in Hacktoberfest last year and got new contributors. There is a contribution guide that could be helpful for newcomers.

Text, Colors etc. Styles supporting

Figma Styles feature is a really helpful. We actively use in our projects:

https://dev-to-uploads.s3.amazonaws.com/i/wig93m9o7zcxsr2ik5fv.png

Test Styles select

Figma has API for creating styles, but React Figma hasn’t support it. Of course, it’s possible to write something like this:

const style = figma.createTextStyle();
style.fontName = "Roboto";
style.fontSize = 16;
...
<Text textStyleId={style.id} />
...
Enter fullscreen mode Exit fullscreen mode

but this code is not compatible with react-native API and text styles will be re-created if the plugin relaunches.

How to access figma.getLocaleXStyles() #345

tooppaaa avatar
tooppaaa posted on

Hello,

Thanks for this library.

I'm currently investigating how to use and build Locale Styles image

I manage to access the figma API from code.ts and create all my styles.

I am now hoping to reuse them from my component without success. Am I missing something in the docs ?

const Palettes: React.FC<PalettesProps> = ({ ...props }) => {
  const theme = useTheme();
  const styles = figma.getLocalPaintStyles(); // throw figma is not defined at runtime
  return ...
}
Enter fullscreen mode Exit fullscreen mode

If it's not available yet, happy to help through a PR with your guidance ;)

View on GitHub

Implement TextStyle support #344

ilyalesik avatar
ilyalesik posted on

Figma react-sketchapp

View on GitHub

React Native APIs supporting

React Native compatibility is the one of the most useful features of react-figma. But we haven't implemented all RN APIs yet.
E.g

There are issues about it:

Create stubs/dummy api for all React Native APIs #322

ilyalesik avatar
ilyalesik posted on
View on GitHub

Implement Dimensions API #321

ilyalesik avatar
ilyalesik posted on

React Native Dimensions

View on GitHub

Implementing Error Boundaries or RedBox

React supporst Error Boundaries components to allow debugging purposes. But React Figma doesn't have this out-of-the-box support:

Implementing Error Boundaries or RedBox. #83

zqwitt avatar
zqwitt posted on

Should introduce react Error Boundaries components to allow for debugging purposes.

Error Boundaries can have a back up render function that renders a Rectangle and Text component with the error and stack.

Reference: react-sketchapp RedBox component

View on GitHub

react-fetch-hook

react-fetch-hook is a React hook to use Fetch AP convenientlyI. There are some unclosed issues:

Abort fetch #25

slevy85 avatar
slevy85 posted on

Hi thank you for this great react fetch hook, Is there a way to make the fetch abortable and abort it when component is unmount ?

Thank you

View on GitHub

isLoading = false with rapid requests #24

braco avatar
braco posted on

If rapid requests are issued, like in an autocomplete scenario, isLoading will be false even when hanging requests are still open.

In other words:

  1. Setup a series of fetches quickly as the user is typing
  2. When a new fetch is issued, cancel the previous fetches
  3. isLoading will === false even though current fetch is still open
  4. results will still correctly return
View on GitHub

Rerender triggered three times when dependencies change #29

dharkness avatar
dharkness posted on

This may be related to #24. Whenever I change the dependencies, I get three rerenders where I only expect to see two.

Expected:

  1. Change dependencies.
  2. Render with isLoading === true, data === null
  3. Render with isLoading === false, data === <new-result>

Actual:

  1. Change dependencies.
  2. Render with isLoading === false, data === <previous-result>
  3. Render with isLoading === true, data === <previous-result>
  4. Render with isLoading === false, data === <new-result>

I don't care so much about data containing the previous result, and changing just that to null with no additional changes would be bad. But why am I getting that first rerender which is a copy of the previous call result? I would expect calling the hook with changed dependencies to immediately return with isLoading === true.

To be clear, everything works okay. The downside is the additional no-op render due to the first result being identical to the previous result. I assume the fetch call has been made by that point, and yet the hook tells me it's not loading. Is there any way to avoid that (step 2 above)?

View on GitHub

react-media-hook

react-media-hook is a React Hook for Media Queries.

Helpers for creating queries

Helpers for creating queries could be a very useful feature. E.g. instead of

const isDark = useMediaPredicate("(prefers-color-scheme: dark)");
Enter fullscreen mode Exit fullscreen mode

will be much better something like this:

const isDark = useDark();
Enter fullscreen mode Exit fullscreen mode

Helpers for creating queries #13

ilyalesik avatar
ilyalesik posted on

Example:

useMediaPredicate("(prefers-color-scheme: dark)"

Options:

  • useDark
  • useMediaPredicate({prefersColorScheme: "dark"})
View on GitHub

Others

Many other repos are looking for your contributions:

GitHub logo ilyalesik / touch-emoji

😀 Touch Emoji — emoji picker for MacBook Pro Touch Bar

Touch Emoji

Emoji picker for MacBook Pro Touch Bar.

GitHub release license minimal system requirements

Launching an application adds the icon to Control Strip: Icon at control strip

Clicking on the icon opens a swipeable panel with emojis: Recent emoji

Touching a particular emoji inserts it into the currently open window.

Demo

Installation

  • Download latest release from GitHub
  • Unpack archive
  • Move Touch Emoji to Applications folder

Troubleshooting

Emoji touch doesn't work:

Re-tick or check a tick for access  → System Preferences → Security and Privacy → tab Privacy → Accessibility → TouchEmoji

Accessibility window

Author

Ilya Lesik (https://github.com/ilyalesik)

This app is based on touch-bar-emojis by Gabriel Lorin (https://github.com/gabriellorin).

Sponsored

Sponsored by Lessmess

View on GitHub


GitHub logo ilyalesik / gen-flow-files

Script for transform javascript files to flowtype definition files

gen-flow-files

npm version npm downloads

This is a script which finds .js files with @flow annotation, extract flow definitions and save to specific folder.

As example, <inputDir>/example.js

// @flow

extract function foo(arg1: number, arg2: string): string {
    // some code here
}
Enter fullscreen mode Exit fullscreen mode

will be transformed to <outputDir>/example.js.flow:

// @flow

declare extract function foo(arg1: number, arg2: string): string;
Enter fullscreen mode Exit fullscreen mode

Installation

Install it with yarn:

yarn add gen-flow-files

Or with npm:

npm i gen-flow-files --save

Usage

As part of build process

scripts": {
    ...
    "flow": "flow",
    "build:flow": "gen-flow-files src --out-dir dist",
    ...
  },
Enter fullscreen mode Exit fullscreen mode

transfrom all .js files from src to .js.flow files and save them at dist.

As command

npx gen-flow-files <inputDir> --out-dir <outputDir>

transfrom all .js files from <inputDir> to .js.flow files and save them at <outputDir>.


View on GitHub


GitHub logo effector / awesome

A curated list of delightful ☄️Effector resources

View on GitHub

GitHub logo react-figma / awesome-figma

💡 A curated list of delightful Figma resources

View on GitHub

Conclusion

We think Hactoberfest is a great initiative, but it doesn't support spam PRs for t-short. Do you know awesome repositories that looking for contributors? Propose them in the comments! 🙌

Happy coding!

Thanks

Links

Top comments (0)