bricks-cloud / bricks Goto Github PK

Is your feature request related to a problem? Please describe.
Currently, Bricks do not support line nodes

Describe the bug
Live preview crashes when React and CSS are selected in output settings. This is due the extra line import "./style.css" being generated when there's no CSS files being generated.

To Reproduce
Steps to reproduce the behavior:

1. Select React and CSS in user settings
2. Click generate code
3. Live preview crashes because there's an import "./style.css" line, but we don't create any CSS files:

Expected behavior
The import "./style.css" line should not exist when we don't generate any CSS files.

In the settings menu, add:

1. a checkbox to enable ML feature, and
2. a text input for putting in the API key for the ML backend.

Is your feature request related to a problem? Please describe.
These two nodes should be exported as divs.

Describe the solution you'd like
Export individual ellipse and rectangle nodes as divs instead of vectors

Is your feature request related to a problem? Please describe.
Right now, algin-items and justifying-content often center elements unexpectedly.

Log errors in Amplitude so we can better track user issues:

// ui.tsx line 82
      socket.emit(
        "code-generation",
        { files: pluginMessage.files },
        withTimeout(
          (response) => {
            if (response.error) {
              console.error("There is an error from VS Code.");
              // TODO: log response.error to amplitude
              setCurrentPage(PAGES.ERROR);
            }
          },

// code.ts line 29
    } catch (e) {
      console.error(e); // TODO: log e.stack to amplitude
      figma.ui.postMessage({
        type: "generated-files",
        files: [],
        error: true,
      });

In order to translate Bricks nodes to code, we need to have Text and Vector node types

Is your feature request related to a problem? Please describe.
Sometimes inner components overflow outer components and overflow-hidden needs to be added

Is your feature request related to a problem? Please describe.
Not good if people push code that breaks existing features.

Describe the solution you'd like
Set up Github Action to run all tests on every push.

Describe alternatives you've considered
n/a

Additional context
n/a

Current we only support a max of 3 fonts.

Is your feature request related to a problem? Please describe.
Currently, the Google Fonts Import URL in the CSS do not support multiple variants such as Regular, 500, italic. Right now the URL can only be like https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold, we want to add support so it can also be like https://fonts.googleapis.com/css?family=Cantarell:italic,regular,500

Describe the solution you'd like
Integrate fonts with new Bricks node and add support for multi variants in the Google fonts URL.

Is your feature request related to a problem? Please describe.
These options still use the previous version of Bricks engine

Describe the bug
Sometimes images don't get exported. For example (link to Figma file):

Design file:

Generated code:

Vectors do not always stack correctly especially when there is a vector overflows its parent
Design:

Rendered:

Describe the solution you'd like
Currently, Bricks computes positioning attributes through Figma's auto layout. Without auto layout, Bricks cannot generate code with accurate positioning. The solution is to segment the the design components and group them based on its locations within the parent component.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Let's say there's an error when generating code:

// figma/src/code.ts line 5
figma.ui.onmessage = async (msg) => {
  if (msg.type === "styled-bricks-nodes") {

    throw new Error("some random error"); // <- add to simulate error

    figma.ui.postMessage({
      type: "styled-bricks-nodes",
      files: await convertToCode(figma.currentPage.selection, {
        language: msg.options.language,
        cssFramework: msg.options.cssFramework,
        uiFramework: msg.options.uiFramework,
      }),
    });
  }

Or when there's an error on VS Code side:

// figma/src/ui.tsx line 77
    if (pluginMessage.type === "styled-bricks-nodes") {
      socket.emit(
        "code-generation",
        { files: pluginMessage.files },
        (response) => {

          throw new Error("some error from VS Code") // <- add to simulate error

          if (response.status === "ok") {
            setIsGeneratingCode(false);
          }
        }
      );
    }

3. The Figma plugin will be stuck at the loading screen
   

Expected behavior
We should handle error gracefully and let users know what went wrong.

Is your feature request related to a problem? Please describe.
The steps to publish a vs code extension is the same everytime:

1. vsce publish
2. bump version

So it's ideal if we could automate these steps to avoid mistakes.

Describe the solution you'd like
Whenever we create a release on Github, we could set up an action to do the above two steps.

Describe alternatives you've considered
n/a

Additional context
n/a

Describe the bug
When generating HTML code, the output is a string in a single line.

To Reproduce
Steps to reproduce the behavior:

1. Select any component in Figma.
2. Choose "HTML" as UI Framework in Figma plugin's settings.
3. Hit "Generate code"
4. HTML code in VS Code is not formatted.

Expected behavior
HTML code should be prettified.

Screenshots
n/a

Additional context
n/a

Thank the user and invites them to join our slack channel.

Describe the bug
When generating code for a Figma node of type "INSTANCE", the code does not have any styles.

To Reproduce
Steps to reproduce the behavior:

1. Go to this Figma file. There are two visually identical nodes, but one is a node of type "instance" and one is a node of type "frame".
2. Generate code for the instance node.
3. Live preview in VS Code will look like this:

Whereas if you generate code for the frame node, the live preview will look good:

Expected behavior
Styles to be generated for Figma nodes of type "instance".

Software Versions (please fill if applicable):

• OS: [e.g. macOS 12.2.1]
• Bricks Figma Plugin: Version 10
• Bricks VS Code: 0.0.9

Describe the bug
Getting TypeError: Cannot read properties of null (reading 'width') when trying to generate this frame:

To Reproduce
Steps to reproduce the behavior:

1. Select this frame.
2. Click on Generate Code
3. Open console and see the error.

Expected behavior
Should generate code properly.

Is your feature request related to a problem? Please describe.
To deal with overlapping components, Bricks needs to add support for absolute positioning

Is your feature request related to a problem? Please describe.
Lines are often used as dividers in designs. We should also convert it to code. For example:

Describe the solution you'd like
There are two cases to consider:

1. If a line separates two pieces of content (i.e. it acts as a thematic break), generate a <hr> element. This is the semantically correct way to implement a divider. MUI also does it this way (reference).
2. If a line is just by itself (i.e. it acts as decoration), generate a <div> element with a border-width of 1px.

Parent component does not always need width and height because its children can expand to the desired width and height

Describe the bug
Unable to package VS code extension with vsce package

To Reproduce
Run vsce package in vscode directory

Getting this error:

 ERROR  invalid relative path: extension/../.git/COMMIT_EDITMSG

Expected behavior
vsce package should run without error and create a .vsix file.

Screenshots
n/a

Desktop (please complete the following information):

• OS: macOS 12.2.1

Additional context
n/a

Is your feature request related to a problem? Please describe.
Exporting and rendering images are not supported in the newest version

Design:

Rendered Component:

Currently we only support google fonts

Is your feature request related to a problem? Please describe.
Even though Designers do not always use Figma's auto layout feature. We should use auto layout whenever we can to improve the positioning accuracy of outputted code in Bricks

Art works are usually a collection of shapes and vectors that should be exported as a whole

Is your feature request related to a problem? Please describe.
Currently, Bricks can only support a uniform styling of text within a TextNode. However in Figma, you can apply different styles to different sections of the TextNodes. Therefore, we should add support for having multiple styles within a single Figma TextNode

Styles to support:

• CSS:
  • fontSize
  • fontName
  • fontWeight
  • textDecoration
  • textCase
  • lineHeight
  • letterSpacing
  • fills
  • textStyleId
  • fillStyleId
  • listOptions
  • indentation
  • hyperlink
• Tailwind CSS
  • fontSize
  • fontName
  • fontWeight
  • textDecoration
  • textCase
  • lineHeight
  • letterSpacing
  • fills
  • textStyleId
  • fillStyleId
  • listOptions
  • indentation
  • hyperlink

Default styles map

If there are multiple text styles within a text node, here are the default styles to use for the outermost <div>:

• fontSize: font-size: <the font size with the longest length>;
• fontName: font-family: <the font with the longest length>;
• fontWeight: font-weight: "normal"; (i.e. Regular font)
• textDecoration: font-style: "normal";
• textCase: text-transform: "none";
• lineHeight: line-height: normal;
• letterSpacing: letter-spacing: normal;
• fills: most common blended solid color
• textStyleId: ?
• fillStyleId: ?
• listOptions: ?
• indentation: ?
• hyperlink: ?

Inside the <div>, for each different segment of text style, we wrap it in a <span> with the overriding styles.

Todos

1. Modify getCssAttributes() in core/src/design/adapter/figma/adapter.ts so that it generates default styles if style === figma.mixed. For example:

// font size
if (figmaNode.fontSize !== figma.mixed) {
  attributes["font-size"] = `${figmaNode.fontSize}px`;
} else {
  // add default font size here according to the default styles map above
}

2. Modify getTextProp() in core/src/code/generator/html/generator.ts so that we generate nested <span>s for each overriding style.

Is your feature request related to a problem? Please describe.
Design:

Rendered Component:

Describe the bug

Figma design (Link to Figma component):

Rendered component:

Generated code:

import React from "react";
import "./style.css";

const GeneratedComponent = () => (
  <div className="flex flex-row justify-center  pt-4 pr-2.5 pb-4 pl-2.5 rounded w-80 h-14 bg-blue-600">
    <p className="font-body text-xl whitespace-nowrap w-[197px] text-white text-opacity-100 leading-6 font-semibold">
      Request to Book
    </p>
  </div>
);

export default GeneratedComponent;

Design:

Rendered:

Design:

Rendered:

Is your feature request related to a problem? Please describe.
Currently there is a lot of back and forth when trying to debug an issue with users. I have to ask the user to open the dev console, and to click on VS Code menu to check the extension version.

Describe the solution you'd like
I haven't thought this out thoroughly yet, but whenever there's an error, we could create a log file that contains:

• Source of error (Figma plugin or VS Code plugin)
• Stack trace
• OS version
• Figma plugin version
• VS Code plugin version

And we could just ask the user to copy & paste the whole thing and send it to us.

Is your feature request related to a problem? Please describe.
Currently, textNodes in Figma have a property called vertical alignment. When the height of the text container is about the size of the font, vertical alignment such as TOP and BOTTOM is essentially the same as CENTER. However, when Bricks applies the same vertical alignment CSS property, text looks slightly different from the design.

Design:

Rendered Component:

Is your feature request related to a problem? Please describe.
Currently the new Bricks nodes do not have CSS attributes attached to them. These attributes are required for generating code using the new Bricks nodes.

Is your feature request related to a problem? Please describe.
Right now the positional CSS attributes in the new Bricks nodes do not support margins and padding.

Rendered

Is your feature request related to a problem? Please describe.
Sometimes, grouped Figma vectors cannot be exported as SVG. In this kinda of situation, export them as images instead

Allow users to send us feedback on the code quality. Feedback page should include:

1. Numeric rating (1-5)
2. Text input
3. Option to also send us the generated code or not

Currently the component name is hardcoded. A quick and easy way to use GPT might be to give it the generated code, then ask it to come up with a name?

// CSS and TW generator
const mainComponentName = "GeneratedComponent";

Is your feature request related to a problem? Please describe.
The newer version of Bricks node do not support Vector/Ellipsis Figma nodes in the code generation process.

Describe the solution you'd like
Integrate the new Bricks node with Vector/Ellipsis grouping logic that exists in the previous version of Bricks nodes.

Designers do not always put their elements perfectly inside its parent. Our tool needs to account for the scenario when 2 percent of their element overflows the parent

We don't support masks at the moment

Is your feature request related to a problem? Please describe.
Group Figma node applies styling to all of its children

Describe the bug

To Reproduce
When the text is {Text}, Bricks will generate code like this:

<p>{Text}</p>

which will result in s blank live preview.

Expected behavior
Text should be escaped and rendered exactly like Figma.

Screenshots
Example of component that will break right now:

Is your feature request related to a problem? Please describe.
Transparent Figma frames is being rendered with white backgrounds in generated code.

Desired Design:

Rendered Components:

Is your feature request related to a problem? Please describe.
This problem is most obvious when the Figma component has drop shadow

Design:

Rendered Code: