DEV Community: seya

I've created a graphql-codegen plugin that generates type-safe hooks for GraphQL queries for Flutter!

seya — Sat, 01 Jan 2022 04:24:57 +0000

If you are a Flutter & GraphQL fan, please try it.
(And if you like it, please give it a star ⭐️)
https://github.com/kazuyaseki/graphql-codegen-flutter-artemis-hooks

Motivation

I'm from React, and when building an application with React + Apollo configuration, I really liked the experience of using graphql-codegen to generate hooks like this

export function useFetchUserQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<FetchUserQuery, FetchUserQueryVariables>) {
    return ApolloReactHooks.useQuery<FetchUserQuery, FetchUserQueryVariables>(FetchUserDocument, baseOptions);
}

(This is the code that will be generated when you use this plugin with withHooks set to true.)
https://www.graphql-code-generator.com/plugins/typescript-react-apollo

I want to develop with the same experience in Flutter! So I created this plugin.
https://github.com/kazuyaseki/graphql-codegen-flutter-artemis-hooks

In Flutter, there is a library called artemis that generates the type definitions, so this plugin is based on that.

For example, suppose you define a query like this as a .graphql file

query ExampleQuery {
  objects {
    id
    name
  }
}

mutation TestMutation($variable: String!) {
  testMutation(variable: $variable) {
    result
  }
}

This plugin will generate the following hooks function

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:graphql_flutter/graphql_flutter.dart';
import 'package:gql/ast.dart';
import 'package:your_project/your_artemis_generated/graphql_api.dart';

QueryResult useQuery<DataType>(BuildContext context, DocumentNode query,
    [Map<String, dynamic>? variables]) {
  final client = GraphQLProvider.of(context).value;
  final state =
      useState<QueryResult>(QueryResult(source: QueryResultSource.network));

  useEffect(() {
    late Future<QueryResult> promise;

    if (variables ! = null) {
      promise = client.query(
        QueryOptions(document: query, variables: variables),
      );
    } else {
      promise = client.query(
        QueryOptions(document: query),
      );
    }
    promise.then((result) {
      state.value = result;
    });

    return () {};
  }, []);
  return state.value;
}

class ExampleQuery$QueryReturnType {
  bool isLoading;
  OperationException? exception;
  ExampleQuery$Query? data;

  ExampleQuery$QueryReturnType(this.isLoading, this.exception, this.data);
}

ExampleQuery$QueryReturnType useExampleQueryQuery<DataType>(BuildContext context) {
  final result = useQuery<ExampleQuery$Query>(context, EXAMPLE_QUERY_QUERY_DOCUMENT);
  return ExampleQuery$QueryReturnType(result.isLoading, result.exception, result.data == null ? null : ExampleQuery$Query.fromJson(result.data!));
}

class TestMutation$MutationReturnType {
  bool isLoading;
  OperationException? exception;
  TestMutation$Mutation? data;

  TestMutation$MutationReturnType(this.isLoading, this.exception, this.data);
}

TestMutation$MutationReturnType useTestMutationQuery<DataType>(BuildContext context, TestMutationArguments variables) {
  final result = useQuery<TestMutation$Mutation>(context, TEST_MUTATION_MUTATION_DOCUMENT, variables.toJson());
  return TestMutation$MutationReturnType(result.isLoading, result.exception, result.data == null ? null : TestMutation$Mutation.fromJson(result.data!));
}

Then all that's left to do is import the above file and use the hooks! 🔥

class PageWidget extends HookWidget {
  const PageWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final queryResult = useExampleQueryQuery(context);
    final mutationResult = useTestMutationQuery(context, TestMutationArguments(variable: ""));

    return ...
  }
}

Usage

Installation

npm i --save-dev graphql-codegen-flutter-artemis-hooks

Create a configuration file for graphql-codegen.

Create a configuration file for graphql-codegen, including the schema, the path to the .graphql file, and the path to the artemis-generated file.

schema: your_schema_file.graphql
documents: '. /your_project/**/*.graphql'.
generates:
  your_project/generated_hooks.dart:
    config:
      artemisImportPath: package:your_project/your_artemis_generated/graphql_api.dart
    plugins:
      - graphql-codegen-flutter-artemis-hooks

Run graphql-codegen

If you do not have graphql-codegen itself installed, install the following @graphql-codegen/cli.

npm i --save-dev @graphql-codegen/cli

Then add the following script to package.json and run npm run codegen!

{
  "scripts": {
    "codegen": "graphql-codegen"
  },
}

That's it, I hope you find it useful!

Create your own Figma code generator!

seya — Thu, 22 Apr 2021 10:10:17 +0000

I recently released a plugin that generates React code from Figma.

Figma to React Component

Source code for this plugin is available in the repository below.
If you find it interesting, please Star it! ⭐️

https://github.com/kazuyaseki/figma-to-react

The above repository is for generating React, but I'm sure there are other formats besides React that write View in various ways such as Vue, Flutter or whatever you like.

So, in this article, I will explain how to extend and edit the code in the above repository to make your own Figma code generator.

※ By the way, feel free to publish plugin you create based on the code from above repository to the Figma Community. I will not complain anything!

Introduction

When you want to make your own Figma code generator, I think there are three main patterns that you might want to make.

to generate code in another View format
to add component descriptions
to generate CSS in another format

If you want to implement any of the above, I'll explain in the following order to show you what you'd want to know.

Architecture of the Figma Plugin
- I'll explain what kind of environment the Figma Plugin is running in.
Explanation of intermediate expressions - buildTagTree function
- This plugin generates a tree of Figma nodes as an intermediate representation to make it easier to write the final code strings.
Rewriting the Tree for each component - modifyTreeForComponent
Generate a string for the code part - buildCode
Output CSS string - buildCssString

Figma Plugin Architecture

The Figma Plugin is divided into two execution environments: the Figma sandbox environment and the environment in which the plugin runs.

In the former, you may do things like accessing "figma" objects, getting the location and style information of the actual objects on Figma, and creating new objects.
The latter is used to create the UI of the plugin itself, and can be developed in much the same way as normal web frontend development. It is also possible to send requests to the outside world.

These two environments exchange data through the message function.

For example, in Figma to React, the process is as follows.

Create an object on Figma in the Sandbox environment and generate a code string.
Pass the generated string to the UI thread with the figma.ui.postMessage function.
Display the received message in the plugin.

Figma plugin development is a process of using two environments to develop a plugin. Both environments have their own limitations, which can be a bit troublesome, but basically, the limitations are not that bothering.

If you want to know more about it, please refer to the following document.
https://www.figma.com/plugin-docs/how-plugins-run/

Intermediate Expressions Explained - buildTagTree function

type buildTagTree = (node: SceneNode): Tag | null

https://github.com/kazuyaseki/figma-to-react/blob/main/src/buildTagTree.ts

This function converts the specified Node into a tree object that can be easily formed later.
More properties may be added in the future, but the current type of Tag is as follows.

type Property = {
  name: string
  value: string
  notStringValue?: boolean
}

export type Tag = {
  name: string
  node: SceneNode
  isImg: boolean
  isText: boolean
  textCharacters: string | null
  properties: Property[], css: CSSData
  css: CSSData
  children: Tag[] }
}

In the case of a text node, it contains the name and textCharacters of the text node. children contains child nodes of the Tag type, so it is nested.

In addition, the original node is also included, so you can do anything you want.

Rewrite Tree for each component - modifyTreeForComponent

https://github.com/kazuyaseki/figma-to-react/blob/main/src/modifyTreeForComponent.ts

type modifyTreeForComponent = (tree: Tag, _figma: PluginAPI): Tag

This function recursively looks at the Tag and rewrites it if it matches the configuration of the specified component.

For example, in the codebase, the configuration for the component Spacer is written as follows.

{
    name: 'Spacer',
    matcher: (node: SceneNode) => {
      return node.name === 'Spacer' && (! ('children' in node) || node.children.length === 0)
    },
    modifyFunc: (tag: Tag) => {
      if (tag.node.width > tag.node.height) {
        tag.properties.push({ name: 'height', value: tag.node.height.toString(), notStringValue: true })
      } else {
        tag.properties.push({ name: 'width', value: tag.node.width.toString(), notStringValue: true })
      }

      tag.isComponent = true
      return tag
    }
  }

In the matcher section, you can specify the condition that a node of the tag is a Spacer component if it has any property.

The modifyFunc section specifies how to modify the tag.
For example, in this case, if the width of the node is greater than the height, the width property is passed so that it can be drawn as Props.

If you want to add your own component definition like this, you can add it here.

Generate a string of code parts - buildCode

https://github.com/kazuyaseki/figma-to-react/blob/main/src/buildCode.ts

This is the part that generates the React code.
If you want to create something for other ways of writing View, please try your best to create something similar to this.

function buildJsxString(tag: Tag, cssStyle: CssStyle, level: number) {
  const spaceString = buildSpaces(4, level)
  const hasChildren = tag.children.length > 0

  const tagName = getTagName(tag, cssStyle)
  const className = getClassName(tag, cssStyle)
  const properties = tag.properties.map(buildPropertyString).join('')

  const openingTag = `${spaceString}<${tagName}${className}${properties}${hasChildren || tag.isText ? `` : '/'}>``
  const childTags = buildChildTagsString(tag, cssStyle, level)
  const closingTag = hasChildren || tag.isText ? `${!tag.isText ? '\n' + spaceString : ''}</${tagName}>` : ''

  return openingTag + childTags + closingTag
}

export function buildCode(tag: Tag, css: CssStyle): string {
  return `const ${tag.name.replace(/\s/g, '')}: React.VFC = () => {
  return (
${buildJsxString(tag, css, 0)}
  )
}`
}

Output CSS string - buildCssString

https://github.com/kazuyaseki/figma-to-react/blob/main/src/buildCssString.ts

The last part is to generate CSS.
In this example, it builds an array of CSS by recursively traversing the Tags, then it generates the string.
If you want to support other CSS formats, please try your best to tweak this area.

export function buildCssString(tag: Tag, cssStyle: CssStyle): string {
  const cssArray = buildArray(tag, [])
  let codeStr = ''

  cssArray.forEach((cssData) => {
    const cssStr =
      cssStyle === 'styled-components'
        ? `const ${cssData.className.replace(/\s/g, '')} = styled.div\`
${cssData.properties.map((property) => `  ${property.name}: ${property.value};`).join('\n')}
\`\n`
        : `.${kebabize(cssData.className)} {
${cssData.properties.map((property) => `  ${property.name}: ${property.value};`).join('\n')}
}\n`

    codeStr += cssStr
  })

  return codeStr
}

Conclusion

This is a brief description of the Figma code generator.
I hope the quality of the code is good enough to support you in creating your own Figma code generator.

If you think it looks interesting, please try to make it. Have a great Figma life!

How to style margin with React

seya — Tue, 02 Mar 2021 08:11:45 +0000

TL;DR

grid-gap for grid layout
If it's a flexbox, I want to use flex-gap (but Safari doesn't support it as of today).
Specify the appropriate padding
Stack component for multiple identical margins, Spacer component for the rest.

Child components should not know the "layout style" of the parent component

First of all, child component should not know the "layout style" of its parent component.

For example, let's say there is a component with multiple icons arranged like this.

There are margins between the icons at equal intervals.
Let's say you have defined this margin in the icon component as below.



.icon {
  ...
  ... margin-right: 15px;  
}

Now, let's say you want to use this icon component on another page, and in that page it requires 100px margin on the right side of the icon. How would you style margin?

There are many ways to solve this problem, but no matter what your choice is, you will have to worry about the margin in this icon component. And I think it's easy to imagine that as such solutions pile up, we'll have more and more dirty CSS.

This is why child components should not be styled by their parents in terms of what layout they will be used in.

It's ok to have appropriate "padding"

I think it's okay to have components to have own "padding" as long as the padding is appropriate.
For instance, you may want to make the button component larger than it appears to be in order to increase area to accept click.

As long as you are aware of who owns the margins and make the right decisions, you should be fine.

Who owns margin?

As I mentioned above, as long as you are aware of who owns the margins and can make the right decisions, you should be fine.
So the question is "who owns margin between elements?"

I think it's either "parent" or "nobody".

Parent

The most obvious case is the grid layout, where the parent container describes the layout style. Margins can be specified with grid-gap.



.grid {
    display: grid;
    grid-gap: 1rem;
}

Nobody

If the parent doesn't specify any structure for the layout, the margin can be considered as an independent entity, not belonging to anyone.

This should also be same as the way designers think of margins. When the designer decide a margin between two elements, he/she doesn't think "the margin is tied to this one", but rather "these are the same concept, so the margin should be smaller, and these are completely different, so let's separate them more", and so on.

They decide margin based on the "relationship" between those elements.

Therefore, margin does not belong to either of them, but is only responsible for one thing: having margin.

How to implementation

Let's dive into how to implement it.

Parent - Grid

As I mentioned earlier, for Grid Layout, we'll use grid-gap. (If you don't add grid-, it won't work in Safari).
https://developer.mozilla.org/en/docs/Web/CSS/gap

You can specify the vertical and horizontal direction respectively.

If you want to set different widths in the same row or column, you can nest them together to make it work.

parent - flexbox

I'd like to use gap, but Safari doesn't support it at the time of this writing, so it will be difficult to adopt. I hope they will be implemented it soon!

https://developer.mozilla.org/en/docs/Web/CSS/gap
https://caniuse.com/flexbox-gap

Same margin between child elements

This is the case when using list elements such as ul and ol.

For this, use Stack component.
As an example, let's look at the Stack in Chakra UI.
https://chakra-ui.com/docs/layout/stack

If you set the spacing of the Stack component like this, the value will be applied as the margin between elements.

In Chakra UI, children are mapped and wrapped with a component called StackItem to apply the margin style.

If you happen to have multiple values of the same margin for this Stack, you may want to use this method. (However, since it's not conceptually correct, you may have to break it down if you want to set a different margin for new elements in the future. So in that case, I think it's better to use Spacer.)

Nobody

Lastly, in the case that it doesn't belong to anyone, let's think about making a Spacer component.

If you want to make your own, you can specify the size and axis as follows.
(Referenced from https://www.joshwcomeau.com/react/modern-spacer-gif/)



import React from 'react';

const Spacer = ({
  size,
  axis,
  style = {},
  ... .delegated,
}) => {
  const width = axis === 'vertical' ? 1 : size;
  const height = axis === 'horizontal' ? 1 : size;
  return (
    <span
      style={{
        display: 'block',
        width,
        minWidth: width,
        height,
        minHeight: height,
        ... . style,
      }}
      {... .delegated}
    />
  );
};
export default Spacer;

The only props needed is size.



// It will be 16px x 16px
<Spacer size={16} />

If the width of the Spacer gets in the way in directions other than the one you want, you can specify the axis direction to keep it to a minimum.



// It will be 32px x 1px.

<Spacer axis="horizontal" size={32} />

Conclusion

Spacer may seem weird at first sight, but I personally think it makes a lot of sense, so let's make use of Stack and Spacer to get some nice margin styling💪

Reference

https://www.joshwcomeau.com/react/modern-spacer-gif/
https://mxstbr.com/thoughts/margin/

How to develop Figma plugin with React + TS

seya — Sun, 05 Apr 2020 04:53:38 +0000

TL;DR

git clone https://github.com/kazuyaseki/react-figma-plugin-boilerplate.git <your project name>
yarn or npm install
yarn webpack:watch  or  npm run webpack:watch

Developing Figma plugin is exciting, but when it comes to develop one with some stateful UI, it's a pain to develop in imperative way.

Thus I created a boilerplate to develop with React and here I introduce it.

The content of boilerplate is as follows.
https://github.com/kazuyaseki/react-figma-plugin-boilerplate

How to render Figma plugin UI with React

There is nothing special, you just have to do ReactDOM.render to ui.html which is specified from manifest.json.

<div id="app"></div>

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { App } from './App';

ReactDOM.render(<App />, document.getElementById('app'));

Sample Code

I paste a sample code of plugin made with React below.

My plugin is to enable incremental search for components and create an instance from it.(actually Figma itself has this feature but I thought it would be nice when keyboard shortcut functionality is added to plugin)

It works as the following gif(sorry my tweet is in Japanese)

seya

@sekikazu01

めっちゃ雑だけどReactでプロジェクト内のコンポーネントをインクリメンタルサーチしてコンポーネント作るfigma plugin作れた。keyboard shortcut機能が追加されたら普通に便利になれそう

13:04 PM - 04 Apr 2020

Before you start building your plugin, I recommend you to read How Plugins Run document.

You have to beware that main thread which can reference Figma object is different from plugin UI thread.

So you need to use message object to pass data between the threads, my sample code has codes for both directions, so please refer to it.

import { subscribeOnMessages } from 'react-figma';

figma.showUI(__html__);

const componentNodes = figma.root.findAll((node) => node.type === 'COMPONENT');
const conmponentsData = componentNodes.map((node) => ({
  id: node.id,
  name: node.name,
}));
figma.ui.postMessage(conmponentsData);

figma.ui.onmessage = (message) => {
  subscribeOnMessages(message);

  if (message.type === 'create-instance') {
    const component = figma.root.findOne(
      (node) => node.id === message.id
    ) as ComponentNode;
    component.createInstance();
  }
};

import * as React from 'react';

type ComponentItemType = {
  id: string;
  name: string;
};

export const App = () => {
  const [query, setQuery] = React.useState('');
  const [components, setComponents] = React.useState<ComponentItemType[]>([]);

  React.useEffect(() => {
    onmessage = (event) => {
      setComponents(event.data.pluginMessage as ComponentItemType[]);
    };
  }, []);

  const create = (id: string) => {
    parent.postMessage({ pluginMessage: { type: 'create-instance', id } }, '*');
  };

  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {components
          .filter((component) => {
            if (query.length === 0) {
              return true;
            }
            return component.name.includes(query);
          })
          .map((component) => (
            <button onClick={() => create(component.id)}>
              {component.name}
            </button>
          ))}
      </div>
    </div>
  );
};