Forem: brainhub

Using Figma Variants with react-figma

Ilya Lesik — Thu, 29 Oct 2020 20:31:36 +0000

TL;DR Give me a code!

Variants is an amazing new feature of Figma, which lets you combine variations of the same component — simplifying the asset panel and mapping components more closely to code.

We were waiting for their launch since the announcement and started the implementation of Variants support in react-figma right after the Figma API Version 1, Update 18 release. Figma API got several new APIs:

Type ComponentSetNode — A component set contains the variants of a component.
combineAsVariants method — Creates a new ComponentSetNode by combining all the nodes in nodes, which should all have type ComponentNode.
importComponentSetByKeyAsync method.

`ComponentSet` component

We added a new component for Figma Variants support: the ComponentSet. It’s accepts a set of Component nodes as the children prop. We created an example with a button that has three variants: primary, dangerous, and secondary:

<ComponentSet name="Button">
    <Component name="variant=Primary">
        <PrimaryButton text="Primary" />
    </Component>
    <Component name="variant=Dangerous">
        <DangerousButton text="Dangerous" />
    </Component>
    <Component name="variant=Secondary">
        <SecondaryButton text="Secondary" />
    </Component>
</ComponentSet>

(see complete code here)

You can try the result of the rendering here or watch a demo gif:

Conclusion

Variants are a really useful feature, especially for design systems creation. So, enjoy it with react-figma too!

Happy coding! 🙌

Thanks

Yaroslav Losev @losyear - fact checking, editing
Lera Lesik @Lera_Lesik - cover image

Our open-source in Hacktoberfest 2020

Ilya Lesik — Mon, 05 Oct 2020 15:19:19 +0000

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:

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} />
...

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 posted on Aug 24, 2020

Hello,

Thanks for this library.

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

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 ...
}

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

View on GitHub

Implement TextStyle support #344

ilyalesik posted on Aug 23, 2020

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 posted on Jun 30, 2020

View on GitHub

Implement Dimensions API #321

ilyalesik posted on Jun 30, 2020

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 posted on Oct 25, 2019

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 posted on Mar 11, 2020

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 posted on Feb 21, 2020

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

In other words:

Setup a series of fetches quickly as the user is typing
When a new fetch is issued, cancel the previous fetches
isLoading will === false even though current fetch is still open
results will still correctly return

View on GitHub

Rerender triggered three times when dependencies change #29

dharkness posted on Apr 27, 2020

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

Expected:

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

Actual:

Change dependencies.
Render with isLoading === false, data === <previous-result>
Render with isLoading === true, data === <previous-result>
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)");

will be much better something like this:

const isDark = useDark();

Helpers for creating queries #13

ilyalesik posted on Aug 06, 2020

Example:

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

Options:

useDark
useMediaPredicate({prefersColorScheme: "dark"})

View on GitHub

Others

Many other repos are looking for your contributions:

ilyalesik / touch-emoji

😀 Touch Emoji — emoji picker for MacBook Pro Touch Bar

Touch Emoji

Emoji picker for MacBook Pro Touch Bar.

Launching an application adds the icon to Control Strip:

Clicking on the icon opens a swipeable panel with emojis:

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

Author

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

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

View on GitHub

ilyalesik / gen-flow-files

Script for transform javascript files to flowtype definition files

gen-flow-files

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
}

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

// @flow

declare extract function foo(arg1: number, arg2: string): string;

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",
    ...
  },

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

effector / awesome

A curated list of delightful ☄️Effector resources

Awesome Effector

Effector is the reactive data flow management library.

A curated list of awesome effector videos, articles, packages. Russian articles, videos, and podcasts here.

Found something cool? Please, contribute!

Articles

Community

View on GitHub

react-figma / awesome-figma

💡 A curated list of delightful Figma resources

Awesome Figma

Figma is the first interface design tool with real-time collaboration.

A curated list of awesome Figma stuff that focused on integration Figma and development, e.g. Figma Plugins, Figma Rest API.

Found something cool? Please, contribute!

Videos

Articles

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

Anna Egorova - editing

React Renderers: an Overview

Ilya Lesik — Mon, 28 Sep 2020 14:47:50 +0000

React Renderers: an Overview

One of the most advanced features of React is the ability to write renderers for different environments. You can be surprised, but it’s possible to create CLI or Hardware apps using React! In this article, I will look over the most interesting React renderers.

Ink

Ink is a React for CLIs. It allows you to build and test your CLI output using components:

The code of the demo:

const Counter = () => {
  const [i, setI] = useState(0);

  useEffect(() => {
    setInterval(() => {
      setI(prev => prev + 1);
    }, 100);
  }, []);

  return <Color>
    {i} tests passed
  </Color>;
}

Ink used by popular libraries such a Gatsby, Parcel, Yarn 2, etc. Also, there are similar libraries such a react-blessed.

React Hardware

React Hardware allows to operate some hardware devices (such as Arduino) through React components:

The code of the demo:

const App = () => {
  const [ledState, setLedState] = useState(false);

  useEffect(() => {
    setInterval(() => {
      setLedState(prev => !prev);
    }, 1000);
  }, []);

  return <Led pin={13} value={ledState ? 255 : 0} />
}
const PORT = 'dev/tty.usbmodem1411';
ReactHardware.render(<App />, PORT);

React Figma

React Figma is a React renderer into Figma. It allows you to use React components as a source for your designs.

React Figma can be useful for describing design systems, creating automations or integrations between some APIs and Figma. E.g. OpenAI and react-jsx-parser allows to create amazing concepts like this. There is sample code written on react-figma:

import * as React from 'react';
import { Page, View, Text } from 'react-figma';

export const App = () => {
    return (
        <Page name="New page" isCurrent>
            <View>
                <View style={{ width: 200, height: 100, backgroundColor: '#dd55aa' }} />
                <Text style={{ color: '#ffffff' }}>text</Text>
            </View>
        </Page>
    );
};

Figma is the most popular design tool for now, but other editors have similar renderers: react-sketchapp for Sketch, react-xd for Adobe XD.

react-three-fiber

react-three-fiber is a React renderer for threejs on the web and react-native.

There is a sample code:

import ReactDOM from 'react-dom'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from 'react-three-fiber'

function Box(props) {
  // This reference will give us direct access to the mesh
  const mesh = useRef()

  // Set up state for the hovered and active state
  const [hovered, setHover] = useState(false)
  const [active, setActive] = useState(false)

  // Rotate mesh every frame, this is outside of React without overhead
  useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01))

  return (
    <mesh
      {...props}
      ref={mesh}
      scale={active ? [1.5, 1.5, 1.5] : [1, 1, 1]}
      onClick={(e) => setActive(!active)}
      onPointerOver={(e) => setHover(true)}
      onPointerOut={(e) => setHover(false)}>
      <boxBufferGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  )
}

ReactDOM.render(
  <Canvas>
    <ambientLight />
    <pointLight position={[10, 10, 10]} />
    <Box position={[-1.2, 0, 0]} />
    <Box position={[1.2, 0, 0]} />
  </Canvas>,
  document.getElementById('root')
)

Building dynamic scene graphs declaratively with re-usable components makes dealing with threejs easier and brings order and sanity to your codebase. These components react to state changes, are interactive out of the box, and can tap into React’s infinite ecosystem.

The library has an amazing ecosystem with packages such as react-three-flex - it’s a flexbox implementation, react-xr, react-postprocessing and many others.

react-nil

react-nil is a custom react renderer that renders nothing.

import React, { useState, useEffect } from "react"
import { render } from "react-nil"

function Foo() {
  const [active, set] = useState(false)
  useEffect(() => void setInterval(() => set((a) => !a), 1000), [])
  console.log(active)

  // This is a logical component without a view, it renders nothing,
  // but it has a real lifecycle and is managed by React regardless.
  return null
}

render(<Foo />)

This package allows you to bring Reacts high-level component abstraction to Node, or wherever you need it. Why not manage your REST endpoints like routes on the client, users as components with mount/unmount lifecycles, self-contained separation of concern, and clean side-effects. Suspense for requests, etc.

react-docx

react-docx is a brand new React reconciler for DOCX.js. A sample code:

renderAsyncDocument(
  <section>
    <paragraph heading={Docx.HeadingLevel.HEADING_1}>
      You can pass props as if you are passing them to constructor
    </paragraph>
    <p>There are some helpful shortcuts for often used tags, like this</p>
    <p>
      <t>this one is for TextRun</t>
    </p>
    <p>
      <img
        src="base64 string or buffer object works"
        width={200}
        height={200}
      />
      <href
        src="http://localhost:8080"
        label={"For images and links shortcuts object are provided"}
      />
      This allows for removal of boilerplate for often used objects. In future
      more such object will be implemented.
    </p>
    <Component text="You can use componets of course, just like in react!">
      <t>A child</t>
    </Component>
  </section>
).then((document) => console.log("This is rendered docx document", document));

Also, react-pdf and redocx can be used for equal needs.

Conclusion

Hope you get inspired for creating your own React renderer, it’s possible due to React Reconciler package. I didn’t mention the most popular renderers such as react-dom or react-native, but I tried to collect the most unusual of them. Are you have any additions? Propose them on the comments! 🙌

Thanks

Yaroslav Losev @losyear - fact checking, editing

Why do I choose Effector instead of Redux or MobX?

Ilya Lesik — Mon, 08 Jul 2019 08:31:34 +0000

Effector is a brand new reactive state manager. Its ambitious team aims to solve all the problems that existing solutions have. Writing the core of the library from scratch took several attempts across six months, and recently the team released the first stable release.

In this article, I will show why I prefer using Effector for my new projects instead of other state managers. Let's get started with the Effector API.

Basics

Effector uses two concepts you might already be familiar with: store and event.

A store is an object that holds some value. We can create stores with the createStore helper:

import {createStore} from 'effector'

const counter = createStore(0) // create store with zero as default value

counter.watch(console.log) // watch store changes

Stores are lightweight, so whenever you need to introduce some state to your app, you simply create a new store.

So how do we update our store? Events! You create events with the createEvent helper and have your store updated by reacting on them:

import {createStore, createEvent} from 'effector'

const increment = createEvent('increment')
const decrement = createEvent('decrement')
const resetCounter = createEvent('reset counter')

const counter = createStore(0)
  .on(increment, state => state + 1) // subscribe to the event and return new store value
  .on(decrement, state => state - 1)  
  .reset(resetCounter)

counter.watch(console.log)

Event is like an "action" in Redux terms, and store.on(trigger, handler) is somewhat like createStore(reducer). Events are just functions that can be called from any place in your code.

Effector implements the Reactive Programming paradigm. Events and stores are considered as reactive entities (streams, in other words), they have a watch method which allows subscribing to events and store changes.

Integration with React

A component can connect to the store by calling the useStore hook from effector-react package. Effector events can be passed to child React elements as event handlers (onClick, etc.)

import React from 'react'
import ReactDOM from 'react-dom'
import {createStore, createEvent} from 'effector'
import {useStore} from 'effector-react'

const increment = createEvent('increment')
const decrement = createEvent('decrement')
const resetCounter = createEvent('reset counter')

const counter = createStore(0)
  .on(increment, state => state + 1)
  .on(decrement, state => state - 1)
  .reset(resetCounter)

counter.watch(console.log)

const Counter = () => {
  const value = useStore(counter) // subscribe to store changes

  return (
    <>
      <div>Count: {value}</div>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={resetCounter}>reset</button>
    </>
  )
}

const App = () => <Counter />
const div = document.createElement('div')
document.body.appendChild(div)
ReactDOM.render(
  <App/>,
  div
)

Integration with other frameworks

Vue

There is effector-vue package.

Svelte

Effector stores are Observable, so you don't need any additional packages to use them in Svelte. Simply prepend $ to the store's name in your template:

// Counter.svelte
<script context="module">
  import effector from 'effector/effector.umd.js';

  export const increment = createEvent('increment')
  export const decrement = createEvent('decrement')
  export const resetCounter = createEvent('reset counter')
  export const counter = effector.createStore(0)
    .on(increment, (n) => n + 1)
    .on(decrement, state => state - 1)
    .reset(resetCounter)
</script>

// App.svelte
<script>
  import { counter, increment, decrement, resetCounter } from './Counter.svelte'
</script>

<div>Count: {$counter}</div>
<button on:click={increment}>+</button>
<button on:click={decrement}>-</button>
<button on:click={resetCounter}>reset</button>

Side effects

With Effector you don't need thunks or sagas to handle side effects. Effector has a convenient helper called createEffect that wraps an async function and creates three events that your store can subscribe to: an initializer (the effect itself) and two resolvers called done and fail.

const getUser = createEffect('get user');
getUser.use(params => {
  return fetch(`https://example.com/get-user/${params.id}`)
    .then(res => res.json())
})

// OR

const getUser = createEffect('get user', {
  handler: params => fetch(`https://example.com/get-user/${params.id}`)
    .then(res => res.json())
})

const users = createStore([]) // <-- Default state
  // getUser.done is the event that fires whenever a promise returned by the effect is resolved
  .on(getUser.done, (state, {result, params}) => [...state, result])

Advanced usage: `combine`, `map`

One of the awesome features of Effector is computed stores. Computed stores can be created using either the combine helper or .map method of the store. This allows subscribing only to changes that matter to the particular component. In React apps, performance may be heavily impacted by unnecessary state updates, so Effector helps eliminate them.

combine creates a new store that calculates its state from several existing stores:

const balance = createStore(0)
const username = createStore('zerobias')

const greeting = combine(balance, username, (balance, username) => {
  return `Hello, ${username}. Your balance is ${balance}`
})

greeting.watch(data => console.log(data)) // Hello, zerobias. Your balance is 0

map allows creating derived stores:

const title = createStore("")
const changed = createEvent()

const length = title.map((title) => title.length)

title.on(changed, (oldTitle, newTitle) => newTitle)

length.watch((length) => console.log("new length is ", length)) // new length is 0

changed("hello") // new length is 5
changed("world")
changed("hello world") // new length is 11

Comparison with other state managers

Redux

Most projects that use Redux implement the whole application state in a single store. Having multiple stores isn't forbidden, but doing this right is kind of tricky. Effector is built to work with lots of different stores simultaneously.
Redux is very explicit but very verbose as well. Effector requires less boilerplate code, but all state dependencies are still explicit.
Redux was originally written in pure JS and without static typing in mind. Effector has much wider typing support out of the box, including type inference for most helpers and methods.
Redux has great dev tools. Effector somewhat lags right now, but the team already has plans for dev tools that visually represent your application as a graph of connected stores and events.

MobX

When minified and gzipped, MobX is almost 20kb (14.9kb + 4.6kb for React bindings), while Effector is less than 8 kb (5.8 kb + 1.7 kb for React).
MobX has a lot of magic inside: implicit subscriptions to observable data changes, "mutable" state objects that use Proxies under the hood to distribute updates, etc. Effector uses immutable state, explicitly combines stores' state and only allows changing it through events.
MobX encourages keeping your data model close to the view. With Effector, you can completely isolate the data model and keep your UI components' API clean & simple.
May be difficult to use with custom data-structures.

RxJS

Strictly speaking, although RxJS solves many tasks, it's a reactive extensions library, not a state management tool. Effector, on the other hand, is designed specifically for managing application state and has a small API that is easy to learn.
RxJS is not 'glitch-free'. In particular, synchronous streams for computed data do not produce consistent updates by default: see an example on how different reactive state management tools handle this task.

Why did I choose Effector

Here's a list of things I consider to be Effector's advantages over most similar tools:

Expressive and laconic API.
Reactive programming paradigm at its core.
Stable, production-ready.
Great performance, also I don't see any memory leaks.
Motivated team, great community.

Conclusion

Effector is not a silver bullet, but it's certainly a fresh take on state management. Do not be afraid to try something new and diverge from the most popular solutions. Interested? Try Effector now!

Thanks

Andrey Sitnik @ai - article promotion
Alexander Kladkov @A1992 - fact checking
Artyom Arutyunyan @artalar - fact checking
Alexander Chudesnov - proofreading, editing

Forem: brainhub

Using Figma Variants with react-figma

ComponentSet component

Conclusion

Thanks

Links

Our open-source in Hacktoberfest 2020

React Figma

Text, Colors etc. Styles supporting

React Native APIs supporting

Implementing Error Boundaries or RedBox

react-fetch-hook

react-media-hook

Helpers for creating queries

Others

ilyalesik / touch-emoji

😀 Touch Emoji — emoji picker for MacBook Pro Touch Bar

Touch Emoji

Installation

Troubleshooting

Emoji touch doesn't work:

Author

Sponsored

ilyalesik / gen-flow-files

Script for transform javascript files to flowtype definition files

gen-flow-files

Installation

Usage

As part of build process

As command

effector / awesome

A curated list of delightful ☄️Effector resources

Awesome Effector

Contents

Articles

Community

react-figma / awesome-figma

💡 A curated list of delightful Figma resources

Awesome Figma

Contents

Videos

Articles

Conclusion

Thanks

Links

React Renderers: an Overview

React Renderers: an Overview

Ink

React Hardware

React Figma

react-three-fiber

react-nil

react-docx

Conclusion

Thanks

Links

Rendrers:

Renderers writing:

Why do I choose Effector instead of Redux or MobX?

Basics

Integration with React

Integration with other frameworks

Vue

Svelte

Side effects

Advanced usage: combine, map

Comparison with other state managers

Redux

MobX

RxJS

Why did I choose Effector

Conclusion

Thanks

Links

`ComponentSet` component

Advanced usage: `combine`, `map`