Text() number() boolean() select() functions missing from monday-ui-react-core component

[iateadonut (Donal)]

Taking the code from here:

Vibe Design System

    <TextField
      placeholder={text("Placeholder", "default placeholder")}
      debounceRate={number("Debounce Rate (see console log)", 0)}
      iconsNames={{ primary: "Primary Icon - could be any icon" }}
      iconName={text("Primary Icon Name", "fa-circle")}
      secondaryIconName={text("Secondary Icon Name", "")}
      validation={select(
        "Validation State",
        {
          None: null,
          Error: { status: "error", text: "error" },
          Success: { status: "success", text: "success" },
          Assist: { status: "", text: "assist text" }
        },
        { status: "", text: "assist text" }
      )}
      id="Knobs"
      disabled={boolean("Disabled", false)}
      readonly={boolean("Readonly", true)}
      size={select(
        "Size",
        { Small: TextField.sizes.SMALL, Medium: TextField.sizes.MEDIUM, Large: TextField.sizes.LARGE },
        TextField.sizes.MEDIUM
      )}
      clearOnIconClick={boolean("clear data in icon click", true)}
      labelIconName={text("FieldLabel Icon Name", "fa-envelope")}
      title={text("Text filed label", "FieldLabel")}
      showCharCount={boolean("show hide char count", true)}
      required={boolean("Filed is required", false)}
    />

I’ve also imported TextField:

import TextField from "monday-ui-react-core/dist/TextField.js"

When I run the app, none of the above functions are defined:

./src/App.js
Line 22:20: ‘text’ is not defined no-undef
Line 23:21: ‘number’ is not defined no-undef
Line 25:17: ‘text’ is not defined no-undef
Line 26:26: ‘text’ is not defined no-undef
Line 27:19: ‘select’ is not defined no-undef
Line 38:17: ‘boolean’ is not defined no-undef
Line 39:17: ‘boolean’ is not defined no-undef
Line 40:13: ‘select’ is not defined no-undef
Line 45:25: ‘boolean’ is not defined no-undef
Line 46:22: ‘text’ is not defined no-undef
Line 47:14: ‘text’ is not defined no-undef
Line 48:22: ‘boolean’ is not defined no-undef
Line 49:17: ‘boolean’ is not defined no-undef

[Helen]

Hi @iateadonut!

All of our design components come directly from our monday-ui-react-core repo. You can find the link to it here: GitHub - mondaycom/monday-ui-react-core: Official monday.com UI resources for application development in React.js.

I think the above link will provide a bit more clarity on how to import these features!

[iateadonut (Donal)]

I’m sorry, I don’t get it.

The function I’m referring to is like the text() function from this line:

placeholder={text("Placeholder", "default placeholder")}

I have the following imports:

import TextField from "monday-ui-react-core/dist/TextField.js"
import "monday-ui-react-core/dist/main.css"

[Helen]

Hi @iateadonut,

No worries! Okay, so actually I see that the issue you’re running into is that you’re actually including the constructors for each of the Text fields.

Instead, it should be something along the lines of

placeholder="This is my placeholder text"
debounceRate=0
iconNames="primary"
....

So on and so forth. So you don’t need the prompts for each field type (i.e. you don’t need to include “text” or “number” etc. etc.)

Give this a try and let me know if it helps!