bettyblocks / cli Goto Github PK

It seems we cannot use an imported library component as the root for a PageBuilder component. The quick fix is to add a wrapper div.

However, when using for instance React-Bootstrap grid components this intermediate div breaks the styling (in bootstrap a row needs to be a direct descendant of a container, the same is true for a column and a row).

Any idea how I can get this working?

edit: related to React Drag and Drop, it seems. Here's a fix someone did, may be a direction for a solution? react-dnd/react-dnd#1003 (comment)

/login page is preserved?

This is how '/login' looks like in the pagebuilder

But it's rendering a different page in runtime

The GetAll component helper is not fetching Number/Price type properties from my data model

Within one of the latest updates it's not possible anymore to leave a name option in a configuration empty. There are situations when you want to select no option and leave for example a dropdown empty (see screenshot).

Please have a look at the process of sending query parameters when you only have an endpointId via the tag

Excerpt From the readme

The publish command requires you to set the following environment variables:
AZURE_BLOB_ACCOUNT
AZURE_BLOB_ACCOUNT_KEY

I have tried to setup the env file with these variables, but on publishing BB generates an
error that variables are not defined.

Please Explain in detail how to setup env variables in the bettyblocks package.json

For other users with same errors, see below an alternative setup. With this you can check out your component with all the avalilable options , that is if you are using the fantastic BettyBlocks platform.

Can it be added by default so when using git it ignores the files you don't want in your git repository?

Right now if you want to create a new component you can either create an empty file and build the entire component and prefab or you can make a copy of an existing component. It would be nice if you can do something like bb component add MyNewComponent which would create a component and a prefab with the given name.

I would like to use a library we wrote in our project as a dependency. I take it that we should bundle it ourselves, as it will often change and depending on the Tech team for that would be a burden for both parties.

1. Can you provide a step by step description on how to use dependencies?

2.. Can you provide the data necessary for bundling our library? Like the expected result, limitations, maybe you have a webpack config we can use as a foundation, etc.

It would be useful to be able to retrieve a property with something like useProperty just like useText.

After working with the betty blocks component set, looking at the new material-ui version and being in the process of building our own based on Bootstrap, I have a concern. This seems like a good place to put it to get feedback from developers and architects involved with the basic architecture:

What is the reasoning behind not giving the component developer the full power of a standard React functional component?
I'm thinking of, for instance, importing external components directly into PageBuilder components instead of using them through the vendor_bundle hack, but also writing our own hooks and helpers and being able to import and use them.

Also, larger components get very messy (see for instance https://github.com/bettyblocks/component-set/blob/master/src/components/dataTable.js) and we are doing a lot of copying and pasting of functionality which could be reused as a hook/helper.

Apart from the specific examples above, I think it would be a much smoother transition for existing React developers if they get complete functionality instead of a restricted version.

How to link to an endpoint with a query/path variable so I can use this to retrieve specific data?

I would like to use global state management for our projects. I thought that useContext would be the solution however it looks like this context object reinitialises after rendering a different page with the link component <Link endpointId="3cc962c6d1ce46519fa428822f28480d">home</Link>

Right now I want to use this in my custom authentication component which will probably soon be obsolete but I think that we can use this for all dynamic global states.

Now it's only possible with B.Children to pass data to only direct child components. It would be great if this is passed to all child components and accessible with const {value} = parent;

So for example I have a parent component that fetches some data.
The parent component has a row with a column als child components. Inside the column component there's a component that's showing the data from the top parent component.

The error does not reveal the root cause and causes confusion.

Hey, as a developer of an official partner of BB, we like to have access to the new advanced options in te pagebuilder so we can preview our components in the pagebuilder. Can you help me please with two questions:

1. What is the best route to ask for permission to have access to the advanced options?
2. In the read.me tou mention the Component Set Url, is that the url in my browser window, when I preview the component local?.

Kind rergards
MarzV

When using options in styling the class will be rendered twice on the component.
for example:

return {
      root: {
        width: ({ options: { width } }) => width,
      },
}

will generate a html element like this:

<div class="root-0-2-9 root-0-0-2-15"></div>

When I hardcode width to a static width the root class is shown once.

I would like fetch project data:

When you build the page, you see this screen:

And then the graphql server goes down:

A div element with class root is inserted on every page below the "

On node 8.9.4, i got some errors:

Cannot destructure property 'readdir' of 'undefined' or 'null'

It might be handy to add the minimum node version somewhere in the requirements or faq.
And maybe detecting incompatible node versions as a nice to have.

When using bb components create to bootstrap a component set; the component set doesn't contain the latest @betty-blocks/cli version. This forces users to update the cli manually. Should be improved.

When creating an anker component the href will be triggered in the builder itself.

Will also be triggered when :
{ B.env === 'dev' ? '#' : options.link }
{ options.link || '#' }
'javascript:void(0)'

:(

Right now it can be hard to figure out which file(s) contain errors. Can we improve error reporting so it at least shows the erroneous file(s)?

I am creating a file upload with live preview. I want to change the background image based on the component state. I want to use my state in styles instead of inline styling.

It would be nice if you can see the options of a prefab and adjust them in the previewer so that you can better develop components with preview before using them in the actual page builder.

(() => ({
  name: 'todoItems',
  icon: 'HeadingIcon',
  category: 'TODOITEMS',
  type: 'TODO_ITEMS',
  allowedTypes: [],
  orientation: 'HORIZONTAL',
  jsx: (() => {
    
    const [todoItems, setTodoItems] = useState([]);
    
    useEffect(() => {
      if (todoItems.length === 0) {
        fetch(options.json_endpoint)
        .then(response => response.json()
        .then(json => setTodoItems(json)))
      }
    }, [todoItems, setTodoItems]);
    
    const removeTodoItem = (index) => {
      setTodoItems((prevTodoItems) => {
        let newtodoitems = [...prevTodoItems];
        newtodoitems.splice(index, 1);
        return newtodoitems;
      });
    }
    
    return (
      <div>
      <ul>
      {todoItems.map((todoItem, index) => (
        <li onClick={() => removeTodoItem(index)}>{todoItem.title}</li>
        ))}
        </ul>
        </div>
        );
      })(),
      styles: B => t => {
        const style = new B.Styling(t);
        return {
          
        };
      },
    }))();

See an example above. In the function removeTodoItem I would like to duplicate the todoitems array to make sure I don't directly mutate the state which is a bad practice of course. But when dragging this component into a column, I get the following console error:
TypeError: Invalid attempt to spread non-iterable instance

Entire error call stack:

TypeError: Invalid attempt to spread non-iterable instance
    at _nonIterableSpread (eval at makeComponent (bundle.esm.js:77890), <anonymous>:5:39)
    at _toConsumableArray (eval at makeComponent (bundle.esm.js:77890), <anonymous>:3:102)
    at ra (react-dom.production.min.js:3547)
    at Ju (react-dom.production.min.js:6485)
    at ml (react-dom.production.min.js:5524)
    at bl (react-dom.production.min.js:5514)
    at ol (react-dom.production.min.js:5244)
    at react-dom.production.min.js:2769
    at t.unstable_runWithPriority (scheduler.production.min.js:255)
    at Uo (react-dom.production.min.js:2733)
    at $o (react-dom.production.min.js:2763)
    at qo (react-dom.production.min.js:2752)
    at el (react-dom.production.min.js:5040)
    at Object.enqueueSetState (react-dom.production.min.js:3026)
    at s._.setState (react.production.min.js:60)
    at s.u.onStateChange (connectAdvanced.js:205)
    at Object.notify (Subscription.js:23)
    at e.t.notifyNestedSubs (Subscription.js:62)
    at s.u.onStateChange (connectAdvanced.js:202)
    at Object.notify (Subscription.js:23)
    at e.t.notifyNestedSubs (Subscription.js:62)
    at s.u.onStateChange (connectAdvanced.js:202)
    at Object.notify (Subscription.js:23)
    at e.t.notifyNestedSubs (Subscription.js:62)
    at s.u.onStateChange (connectAdvanced.js:202)
    at Object.notify (Subscription.js:23)
    at e.t.notifyNestedSubs (Subscription.js:62)
    at s.u.onStateChange (connectAdvanced.js:202)
    at m (redux.js:213)
    at queue.js:33
    at createEpicMiddleware.js:49
    at editModeError.js:27
    at createPrefab (PrefabContainer.js:27)
    at Object.drop (createDropTarget.js:212)
    at t.drop (createTargetFactory.js:59)
    at dragDrop.js:160
    at Array.forEach (<anonymous>)
    at e.drop (dragDrop.js:158)
    at Object.r.<computed> [as drop] (DragDropManagerImpl.js:62)
    at e.handleTopDrop (HTML5Backend.js:599)
    at r (helpers.js:83)

It seems like the array is converted to an object because let newtodoitems = {...prevTodoItems}; does work fine.

For now there are plenty of alternatives but it would be nice to be able to use the best practices for state mutation.

To improve reusability of our components it would be very beneficial to allow all types inside a component.

Perhaps something like this:
allowedTypes: [ '*' ]

Instead of:
allowedTypes: [ 'ACCORDION', 'ALERT', 'BREADCRUMB', 'BUTTON', 'DATALIST', 'DATATABLE', 'DIVIDER', 'FORM', 'IMAGE', 'PARTIAL', 'PANEL', 'PROGRESS', 'TABS', 'TEXT', 'TODO_ITEMS', 'DEPENDENCIES', ],

This is especially handy for container components and would save a lot of time in our projects.

Apparently in one of the latest updates it's not possible anymore to leave the option for value blank again, this was fixed in issue: #79

1. Drag hello-world component onto canvas.
2. Change title1 to title2.

Result: Component on canvas breaks.

1. Refresh

Result: Component is fine, styling successfully applied.

The error occurs when you create a CamelCase model in the backend. Betty converts the datamodel into a snake_case model and will use that in the GraphQL call. GraphQL does not support snake_case modals for now and will generate this error.

This is what the page builder component will give:
Something went wrong: Network error: Response not successful: Received status code 400 :(
And this is what the error looks like in the network tab in chrome:
{"errors":[{"message":"Cannot query field \"random_tables\" on type \"Query\". Did you mean \"randomTables\" or \"randomTable\"?","locations":[{"line":2,"column":3}]}]}

This could happen with the <GetOne> element but I did not test it yet.

I've turned CSRF protection off on the post and tried to disable CORS via my.bb but still it doesn't work.
Console error: Access to fetch at 'https://rva-rfp-development.bettywebblocks.com/login' from origin 'https://idenl3.blob.core.windows.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

This error appeared again with the latest release. See issue: #88

I would like to have the possibility to show/hide prefab options based on another option.

For example I have a Link component and I would like to have the option to:

• select an Endpoint URL
  or
• fill in my own custom URL.

The options appear or disappear based on another option (for example by Radiobutton selection)

When retrieving a value with B.Text, and using this directly as an input value, I get an input with the value of [object Object], instead of the value from B.Text.

<input
type="text"
value={<B.Text value={options.variable} />}
 />

<head> <title>Betty Blocks</title> <meta charset="utf-8"> <meta name="description" content="Made with Betty Blocks"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

These values can't be set in the new page builder yet.

Ans found this.

The CLI build step does not check for incorrect icon values. The Page Builder falls back on a default icon, but this leads to unexpected behaviour.

https://gyazo.com/8a9c773662c94e8452c4c2e8a7ec53f9

The docs mentioned you can use theme like

const { theme } = B

But this is not working in JSX.
When debugging theme does not exist.

Missing is spelled wrong:
The following required properties are misising from your component:

Following your usage chapter for setting-up the project the components preview renders a 404 page. The preview renders a mistake. Can you please check out the correct procedure for running the hello-world component.