knotty (v2)

This is a style guide and directory of reusable components for Enwoven.

Swap between different branches here:

Here are some handy resources:

Elements

Autocomplete

src/components/Elements/Autocomplete/Autocomplete.jsx

Prop name	Type	Default	Description
`inputProps`	object	Shape

Avatar

src/components/Elements/Avatar/Avatar.jsx

src/components/Elements/Breadcrumb/Breadcrumb.jsx

Prop name	Type	Default
`children`	node	Required
`label`	string
`maxItems`	number	`5`
`separator`	string	`>`

Prop name	Type	Default	Description
`color`	string	`primary`
`isFlex`	bool	`false`
`isFullWidth`	bool	`false`
`isLoading`	bool	`false`
`outlined`	bool	`false`
`textAlign`	enum	`center`	One of: `center`, `left`, `right`

Prop name	Type	Default	Description
`label`	string

Dialog

src/components/Elements/Dialog/Dialog.jsx

Prop name	Type	Default
`onRequestClose`	func	Required
`children`	object	`null`
`isOpen`	bool	`false`
`options`	array	`[]`
`subtitle`	string
`title`	string

Optional CTA's in top right title portion.

Adding some prefix text before CTA options.

LinearProgress

src/components/Elements/LinearProgress/LinearProgress.jsx

src/components/Elements/Menu/Menu.jsx

Prop name	Type	Default	Description
`onClick`	func	Required
`onRequestClose`	func	Required
`anchorElement`	Element	`null`
`closeOnClick`	bool	`true`
`disableScrollLock`	bool	`true`
`fillWidthOfAnchor`	bool	`false`
`items`	shape[]	`[]`	`icon`: string `label`: node `value`: string
`maxItems`	number	`0`
`menuItemStyles`	shape	Shape
`minWidth`	string	`null`
`selectedValue`	string	`null`
`size`	enum	`medium`	One of: `small`, `medium`

By setting fillWidthOfAnchor, it matches the width of the passed in anchorElement;

Add some padding to menu items.

Menu items can also be a touch smaller with the size attribute. Combined with maxItems, it can simulate a dropdown or select box.

Prop name	Type	Default
`action`	node	`null`
`closeTiming`		`null`
`customTime`	number	`3000`
`inline`	bool	`false`
`isOpen`	bool	`false`
`message`	string
`onRequestClose`	func	Function

Pagination

src/components/Elements/Pagination/Pagination.jsx

Prop name	Type	Default	Description
`count`	number	Required	The total number of pages.
`boundaryCount`	number	`1`	Number of always visible pages at the beginning and end.
`className`	string		Override or extend the styles applied to the component.
`color`	enum	`standard`	The active color. One of: `primary`, `secondary`, `standard`
`hideNextButton`	bool	`false`	If true, hide the next-page button.
`hidePrevButton`	bool	`false`	If true, hide the previous-page button.
`onChange`	func	Function	Callback fired when the page is changed. Signature: function(event: React.ChangeEvent, page: number) => void event: The event source of the callback. page: The page selected.
`page`	number	`1`	The current page.
`shape`	enum	`circular`	The shape of the pagination items. One of: `circular`, `rounded`
`showFirstButton`	bool	`false`	If true, show the first-page button.
`showLastButton`	bool	`false`	If true, show the last-page button.
`siblingCount`	number	`1`	Number of always visible pages before and after the current page.
`size`	enum	`medium`	The size of the component. One of: `small`, `medium`, `large`
`variant`	enum	`text`	The variant to use. One of: `outlined`, `text`

Prop name	Type	Default	Description
`label`	string

SuggestionsWrapper

src/components/Elements/SuggestionsWrapper/SuggestionsWrapper.jsx

Prop name	Type	Default	Description
`onSelect`	func	Required
`options`	shape[]	Required	`label`: string `value`: string
`addOptionPrefix`	string	`Add`
`freeSolo`	bool	`false`
`inputComponent`	object	`null`
`inputComponentProps`	object	Shape
`listboxComponent`	elementType	`ul`
`onAddOption`	func	Function
`onInputChange`	func	Function
`selectedOption`	shape	`null`	`label`: string `value`: string
`showAddOption`	bool	`false`

A wrapper for text inputs to provide autocomplete suggestions.

Created specifically for the Event selection input on Enwoven.

Use the updated text field.

Explore virtualization

Prop name	Type	Default	Description
`label`	string

Tabs

src/components/Elements/Tabs/Tabs.jsx

Prop name	Type	Default	Description
`onChange`	func	`null`
`options`	shape[]	`[]`	`label`: string `value`: custom
`orientation`	enum	`default`	One of: `default`, `vertical`
`value`	number	`null`

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porta lacus quis eros interdum, in feugiat tortor luctus. Ut congue felis enim, a consectetur sapien ullamcorper ac. Vivamus interdum dui vitae nisl posuere, vel tempor urna bibendum. Donec at ullamcorper mauris. Donec ornare sit amet turpis in malesuada. Sed egestas enim eu nunc congue, et aliquet ipsum vulputate. Cras purus turpis, ullamcorper ac porttitor et, semper sit amet ligula. Suspendisse in dui arcu. Praesent quis ligula non elit fringilla varius id quis odio. Integer quis dolor rutrum, placerat dolor nec, fermentum odio. Maecenas sagittis ornare egestas. Maecenas libero quam, feugiat non placerat ut, cursus eget elit.

Same as the first, vertical orientation:

Tabs can also be controlled by specifying both value and onChange props.

TextInput

src/components/Elements/TextInput/TextInput.jsx

Prop name	Type	Default	Description
`className`	string
`isLoading`	bool	`false`
`items`	shape[]	`[]`	`label`: node `value`: string
`showCheckboxes`	bool	`false`

Enter something here

putting something here would help, thanks

Enter something here

No, I don't like this

Disabled and Loading

I am loading, thanks

Some selectable items

Select something.

TextInput as multi-select.

src/components/Elements/Tooltip/Tooltip.jsx

Prop name	Type	Default	Description
`title`	string	Required

TreeView

src/components/Elements/TreeView/TreeView.jsx

Trees are nice, you should try them some time!

A Sensible Parent
Your Collections
Favorites
Archive

Components

ActionBar

src/components/Components/ActionBar/ActionBar.jsx

Prop name	Type	Default	Description
`items`	shape[]	`[]`	`icon`: string `label`: node `value`: string
`maxItems`	number	`3`
`moreIcon`	union	`fa-ellipsis-h`	One of type: string, object
`moreText`	string	`More`
`moreTextOnLeft`	bool	`false`
`onClick`	func	Function
`textAlign`	enum	`center`	One of: `left`, `right`, `center`

View

DataTable

src/components/Components/DataTable/DataTable.jsx

A forever work in progress.

First name

Age

Jon

Cersei

Jaime

Arya

Daenerys

This is a really long field

150

Ferrara

Rossini

Harvey

Total Rows: 9

DateInput

src/components/Components/DateInput/DateInput.jsx

Prop name	Type	Default
`defaultAutoText`	string
`defaultAutoValue`	string
`initialValue`	string
`onChange`	func	Function
`textFieldProps`	object	Shape

The same DateInput, except with clickable link for default value

Enter today: 1982/07/03

... with label:

Cheese

Enter today: 1982/07/03

Drawer

src/components/Components/Drawer/Drawer.jsx

Prop name	Type	Default	Description
`isOpen`	bool	Required
`onRequestClose`	func	Required

Check your Drawers. Currently:

This doesn't work inline. The Drawer wants to take over the entire window height.
this is despite placing it iniside an element with position: relative set.

DropdownFilter

src/components/Components/DropdownFilter.jsx

Prop name	Type	Default	Description
`onChange`	func	Required
`focusIcon`	string	`fa-search`
`initialIcon`	string	`fa-ellipsis-h`
`initialTitle`	string	`More options`
`options`	shape[]	`[]`	`name`: string `value`: string `group`: string `icon`: node

src/components/Components/NavBar/NavBar.jsx

Prop name	Type	Default	Description
`backgroundColor`	string	`white`
`children`	object	`null`
`compactOnScroll`	bool	`false`
`elevation`	number	`4`
`leftChildren`	object	`null`
`logoIcon`	string
`logoImageUrl`	string
`logoName`	string
`menuItems`	shape[]	`[]`	`icon`: string `label`: node `value`: string
`onClickLogo`	func	`null`
`onClickMenuItem`	func	Function
`onClickNotificationsIcon`	func	`null`
`onClickSearchIcon`	func	`null`
`onScrollProps`		`{}`
`position`	enum	`fixed`	One of: `absolute`, `fixed`, `relative`, `static`, `sticky`
`profileImageUrl`	string
`profileName`	string
`rightChildren`	object	`null`
`searchItems`	shape[]	`[]`	`icon`: string `label`: node `value`: string
`showBottomBorder`	bool	`false`
`showNotificationBadge`	bool	`false`
`size`	enum	`default`	One of: `default`, `compact`
`transparentBackground`		`false`

Default, logged in

Jerry Sayaphet

Logo as Icon

Jerry Sayaphet

Compact

Enwoven

Jerry Sayaphet

Sticky

Customized

leftChildren and rightChildren props allow left and right side to have custom contents.

Background color option.

Cool beans

RichTextInput

src/components/Components/RichTextInput/RichTextInput.jsx

Prop name	Type	Default	Description
`allowClearText`	bool	`true`
`allowLinkNewWindow`	bool	`false`
`allowMentions`	bool	`false`
`buttonList`	enum[]	`[ 'bold', 'italic', 'underline', 'hyperlink', 'headline', 'blockquote', 'unordered-list', 'ordered-list', ]`
`disabled`	bool	`false`
`error`	bool	`false`
`height`	union	`100%`	One of type: number, string
`helpText`	string
`initialValue`	union		Changing initialValue will reset the state, useful for reuse One of type: object, string
`initialValueRaw`	object	`null`
`isLoading`	bool	`false`
`label`	string
`limit`	number	`0`
`mentionOnAdd`	func	Function
`mentionOnClick`	func	`null`
`mentionSearchChange`	func	Function
`mentionSuggestions`	array	`[]`
`onChange`	func	Function
`onSave`	func	Function
`placeholder`	string	`Click here to enter text`
`statusText`	string
`transparent`	bool	`false`
`width`	union	`100%`	One of type: number, string

Label, HelpText, and Placeholder Text:

This is the label text

Here is some text

This is the help text

Size

... and some other stuff. The underlining and html tags are to test xss issues with input text parsing.

Large

Thanks a lot!

example link



underline me please, thanks
<u>hello there</u><script>alert('wat');</script>"
list one
list two

three
four

This is another paragraph. Thanks!
Thanks a lot!
one
two
three

Space me out, thanks!

block this, yass.

and this two
one more for good luck

yeah.

ok

More Examples

Saving text:

Saving text example

Click here to enter text

Help me, I'm stuck

Circular progress spinner

Look at me, I'm busy loading

Click here to enter text

Option to have links open in new window:

Click on me, go ahead

Markdown Example:

This is the label text

Markdown as provided as initialValue and rendered in text editor!!!!!

This is the help text

Transparent

Setting transparent will make the text input transparent with white text.

Transparent

Transparent

Transparent

Transparent

Transparent

Disabled

You can include a label

This text cannot be changed

You can include helpText

Error

You can include a label

Click here to enter text

You can include helpText

Raw input

Raw data input from the text editor itself can be provied to a new instance of the editor via initialValueRaw

Thanks a lot! 

example link



underline me please, thanks
<u>hello there</u><script>alert('wat');</script>"
list one
list two

three
four

This is another paragraph. Thanks!
Thanks a lot!
one
two
three

Space me out, thanks!

block this, yass.

and this two
one more for good luck

yeah.

ok

Mentions

Use @ symbol to mention someone.

Click here to enter text

Table

src/components/Components/Table/Table.jsx

Prop name	Type	Default
`columns`	array	`[]`
`label`	string
`rows`	array	`[]`

ID	First name	Age
1	Jon	35
2	Cersei	42
3	Jaime	45
4	Arya	16
5	Daenerys	44
6	This is a really long field	150
7	Ferrara	44
8	Rossini	36
9	Harvey	65

TagInput

src/components/Components/TagInput/TagInput.jsx

Prop name	Type	Default	Description
`disabled`	bool	`false`
`isLoading`	bool	`false`
`label`	string
`onChange`	func	Function
`onInputChange`	func	Function
`options`	shape[]	`[]`	`label`: string `value`: any
`placeholder`	string	`Tag input...`
`preferInlineLabel`	bool	`false`
`tags`	shape[]	`[]`	`label`: string `value`: any
`variant`	enum	`outlined`	One of: `outlined`, `standard`, `filled`

Tags

futzing that label

Another tag input, with inline label.

disabled states

Layouts

Grid

src/components/Layouts/Grid/Grid.jsx

Prop name	Type	Default	Description
`children`	any
`forceColumnCount`	number	`null`

this is a grid, thank you.

0 views

0 views

0 views

Images and titles only

0 views

images only.

GridItem

src/components/Layouts/GridItem/GridItem.jsx

Prop name	Type	Default	Description
`actionBarProps`	shape	Shape	`moreIcon`: string `moreText`: string
`children`	any	`null`
`cols`	number	`4`
`hasLayer`	bool	`false`
`icon`	string
`imageHref`	string	`null`
`imageUrl`	string
`items`	shape[]	`[]`	`icon`: string `label`: node `value`: string
`maxItems`	number	`3`
`mediaChildren`	any	`null`
`mediaProps`	object	`null`
`onImageClick`	func	Function	Callback function when someone clicks on the grid item image.
`onItemClick`	func	Function	Callback function when someone clicks on an item in the bottom of the grid item
`onTitleClick`	func	Function
`overlayText`	string
`postFix`	any	`null`
`selected`	bool	`false`
`showActionBar`	bool	`true`
`showTitleText`	bool	`true`
`titleText`	string
`xs`	number	`12`

What the cheese hole

Edit

postFix elements

postFix prop allows adding additional bits after each grid item.

knotty (v2)

Collapsed Breadcrumb

Variants

Outlined variants

Sizes

loaders (and other icons)

Default, logged in

Logo as Icon

Compact

Sticky

Customized

Cool beans

Label, HelpText, and Placeholder Text:

Size

More Examples

Markdown Example:

Transparent

Disabled

Error

Raw input

Mentions

futzing that label

disabled states

Images and titles only

images only.

postFix elements