ludekarts / base-ui

Basic UI Components for React

Basic UI Components for React projects

---

Basic Components

GlobalStyles

Wrapper component that provides all base-ui utility classes.

  import { GlobalStyles } from "@ludekarts/base-ui";

  const App = props => <GlobalStyles><App/></GlobalStyles>;

Props

Prop name	Type	Default	Description
fullCover	boolean	false	Expands page body to cover entire screen

Available classes

---

CSS variables

Variable name	value
--bui-focus-color	rgba(66, 153, 225, 0.6)
--bui-box-shadow	0px 9px 9px -11px rgba(0, 0, 0, 0.5)
--bui-lift-shadow	0px 23px 18px -21px rgba(0, 0, 0, 0.7)
--bui-space	0.5rem
--bui-space-2x	1rem
--bui-space-3x	1.5rem
--bui-space-4x	2rem

Flex modifiers

Class name	Description
--flex-column	Changes flex display to column
--flex-row-reverse	Reverse elements oreder in flex row

Block modifiers

Class name	Description
--stretch	Set element width to 100%
--stretch-v	Set element height to 100%
--stretch-block	Diplay as block element and set width to 100%
--expand-content	Set width of element children to 100%
--text-center	Center text
--text-right	Align text right
--text-left	Align text left
--text-bold	Display bold text
--text-italic	Display italic text
--text-no-wrap	Do not wrap text
--first-letter-caps	Capitalize first letter

Spacing outside (margin)

Class name	Description
--space	Set margin to 0.5rem
--space-2x	Set margin to 1rem
--space-3x	Set margin to 1.5rem
--space-4x	Set margin to 2rem
--space-t	Set margin top to 0.5rem
--space-t-2x	Set margin top to 1rem
--space-t-3x	Set margin top to 1.5rem
--space-t-4x	Set margin top to 2rem
--space-r	Set margin right to 0.5rem
--space-r-2x	Set margin right to 1rem
--space-r-3x	Set margin right to 1.5rem
--space-r-4x	Set margin right to 2rem
--space-b	Set margin bottom to 0.5rem
--space-b-2x	Set margin bottom to 1rem
--space-b-3x	Set margin bottom to 1.5rem
--space-b-4x	Set margin bottom to 2rem
--space-l	Set margin left to 0.5rem
--space-l-2x	Set margin left to 1rem
--space-l-3x	Set margin left to 1.5rem
--space-l-4x	Set margin left to 2rem

Spacing inset (padding)

Class name	Description
--space-i	Set padding of 0.5rem
--space-2x-i	Set padding of 1rem
--space-3x-i	Set padding of 1.5rem
--space-4x-i	Set padding of 2rem
--space-t-i	Set padding top of 0.5rem
--space-t-2x-i	Set padding top of 1rem
--space-t-3x-i	Set padding top of 1.5rem
--space-t-4x-i	Set padding top of 2rem
--space-r-i	Set padding right of 0.5rem
--space-r-2x-i	Set padding right of 1rem
--space-r-3x-i	Set padding right of 1.5rem
--space-r-4x-i	Set padding right of 2rem
--space-b-i	Set padding bottom of 0.5rem
--space-b-2x-i	Set padding bottom of 1rem
--space-b-3x-i	Set padding bottom of 1.5rem
--space-b-4x-i	Set padding bottom of 2rem
--space-l-i	Set padding left of 0.5rem
--space-l-2x-i	Set padding left of 1rem
--space-l-3x-i	Set padding left of 1.5rem
--space-l-4x-i	Set padding left of 2rem

Spacing vertical & horizontal

Class name	Description
--space-v-i	Set padding top & bottom of 0.5rem
--space-v-2x-i	Set padding top & bottom of 1rem
--space-v-3x-i	Set padding top & bottom of 1.5rem
--space-v-4x-i	Set padding top & bottom of 2rem
--space-h-i	Set padding left & ritgh of 0.5rem
--space-h-2x-i	Set padding left & ritgh of 1rem
--space-h-3x-i	Set padding left & ritgh of 1.5rem
--space-h-4x-i	Set padding left & ritgh of 2rem
--space-v	Set margin top & bottom of 0.5rem
--space-v-2x	Set margin top & bottom of 1rem
--space-v-3x	Set margin top & bottom of 1.5rem
--space-v-4x	Set margin top & bottom of 2rem
--space-h	Set margin left & ritgh of 0.5rem
--space-h-2x	Set margin left & ritgh of 1rem
--space-h-3x	Set margin left & ritgh of 1.5rem
--space-h-4x	Set margin left & ritgh of 2rem

Push content in flex containers (margin)

Class name	Description
--push-top	Set margin bottom to auto
--push-left	Set margin right to auto
--push-right	Set margin left to auto
--push-bottom	Set margin top to auto

Verical flex alignment

Class name	Alias	Description
--v-start	--stack-start	Align content to the TOP of the element
--v-end	--stack-end	Align content to the BOTTOM of the element
--v-stretch	--stack-stretch	Stretch content vertically
--v-center	--stack-center	Align content to the CENTER of the element

Horizontal flex alignment

Class name	Alias	Description
--h-start	--rail-start	Align content to the SATRT of the element
--h-end	--rail-end	Align content to the END of the element
--h-center	--rail-center	Align content to the CENTER of the element
--h-spread	--rail-spread	Spread content to the sides of the element
--h-evenly	--rail-evenly	Spread content to evenly across the element
--h-around	--rail-around	Spread content with wcen space between inside the element

|

Default focus

Class name	Description
--focusable	Add default focus behaviour to the element

Cover Link

Class name	Description
--cover-link > a.--link	Sets element postion to relative and changes interlan <a/> tag with --link class into "cover glass"

Text

Component for convinient text formatting.

  import { Text } from "@ludekarts/base-ui";

  . . .

  <Text as="h1" color="red" size="1.4em">This is h1 tag</Text>

Props

Prop name	Type	Default	Description
as	string	span	Display as given element
lh	string	undefined	Line height
font	string	undefined	Font family
size	string	undefined	Font size
weight	string	undefined	Font weight
color	string	undefined	Text color
spacing	string	undefined	Margin
padding	string	0	Padding
transform	string	false	Text transform
ellipsis	boolean	false	Crop text with ellipsis
block	boolean	false	Display as block

Form

Regular form with customized onSubmit handler with utilities for handling form data.

  import { Form } from "@ludekarts/base-ui";

  . . .

  const handleSubmit = data => {
    // data: object with all input fields names and their values e.g: { inputName: inputValue }.
  };

  <Form onSubmit={handleSubmit}>...</Form>

Props

Prop name	Type	Default	Description
children	node	null	Component children
onSubmit	function	undefined	Callback fn called when user submits data
includeCheckStatus	boolean	false	By default only selected checkboxes will appear in onSubmit handlers data. If set to true all checkboxes will report their current check-status.

Static helpers

Helper name	Description
Form.formInputsToObject( formRef, { includeCheckStatus: fasle } )	Internaly used to transform form's data into object
Form.hardFormReset( formRef, { resetValue: false } )	Allows to imperatively set all checkbox values to given resetValue

Badge

Rounded badge.

  import { Badge } from "@ludekarts/base-ui";

  . . .

  <Badge>20</Badge>

Props

Prop name	Type	Default	Description
mnw	string	3rem	Minimal badge width
color	string	#CCCCCC	Background color
justify	string	center	Content justify (flex)

---

Interactive

Collapse

Animated container that can expand on it's content.

  import { Collapse } from "@ludekarts/base-ui/interactive";

  . . .

  const [showCollapse, toggleCollapse] = useState(false);

  <Collapse open={showCollapse} mnh={36}>Lorem ipsum dolor sit ammet...</Collapse>

Props

Prop name	Type	Default	Description
open	boolean	false	Current state of collapse container. Is external.
mxh	number	undefined	Maximal height of the container
mnh	number	undefined	Minimal height of the container

Slider

Container that slides its content horizontally or vertically.

  import { Slider } from "@ludekarts/base-ui/interactive";

  . . .

  const [activeSlide, setActiveSlide] = useState(0);

  <Wrapper styles={{width: "200px", height: "200px", position: "relative"}}>
    <Slider activeIndex={activeSlide} variant="vertical" loop>
      <div>SLIDE 1</div>
      <div>SLIDE 2</div>
      <div>SLIDE 3</div>
      <div>SLIDE 4</div>
      <div>SLIDE 5</div>
    </Slider>
  </Wrapper>

Props

Prop name	Type	Default	Description
activeIndex	number	0	Currently displayed slide
variant	string	horizontal	Animation: horizontal or vertical
loop	boolean	false	Make slides loops form last to first an back
fitHeight	boolean	false	Fit Slider height to its content

NOTE:

By default Slider expands to fill its container. You need to define the dimensions for the container.

BreakpointClass

Switches classes base on given brakpoint.

  import { BreakpointClass } from "@ludekarts/base-ui/interactive";

  . . .
  
  <BreakpointClass breakpoint="(max-width: 980px)" beforeClass="class-a" afterClass="class-b">
    <div>Element 1</div>
    <div>Element 2</div>
  </BreakpointClass>

Props

Prop name	Type	Default	Description
breakpoint	string	REQUIRED	Media brekpoint which changes the clsses
beforeClass	string		List of classes before applying breakpoint
afterClass	string		List of classes after applying breakpoint

---

Buttons

Basic

Simple, regular button.

  import { Button } from "@ludekarts/base-ui/buttons";

  . . .

  <Button>Hello</Button>

Props

Prop name	Type	Default	Description
size	string	md	Button size, one of: [lg, md, sm]
text	string	inherit	Text color
color	string	#DDDDDD	Background color
radius	string	0.2em	Button rounded corner
type	string	button	Button type. To use thie component as a Submin button we need to specify submit type
disabled	bool	false	Disable state
inverse	bool/number	undefined	Inverse colors

NOTE:

All buttons have their boolean attributes defined as bool/number type. This allows to convert a button into Link tag from react-router-dom. When used as Link set boolean attribute (e.g. inverse) should ne set to numeric value: 1/0.

Underline

Button with animated underline .

  import { Underline } from "@ludekarts/base-ui/buttons";

  . . .

  <Underline>Hello</Underline>

Props

Prop name	Type	Default	Description
size	string	md	Button size, one of: [lg, md, sm]
text	string	#000000	Text color
color	string	#999999	Background color
type	string	button	Button type. To use thie component as a Submin button we need to specify submit type
disabled	bool	false	Disable state
active	bool/number	undefined	Active state
inverse	bool/number	undefined	Inverse colors
outlineFocus	bool/number	undefined	Apply outline focus
.active	className		Same as active prop
.active-inverse	className		Inverse colors of active state

Ghost

Button with thick border empty inside.

  import { Ghost } from "@ludekarts/base-ui/buttons";

  . . .

  <Ghost>Hello</Ghost>

Props

Prop name	Type	Default	Description
size	string	md	Button size, one of: [lg, md, sm]
text	string	inherit	Text color
color	string	#999999	Background color
type	string	button	Button type. To use thie component as a Submin button we need to specify submit type
disabled	bool	false	Disable state
active	bool/number	undefined	Active state
inverse	bool/number	undefined	Inverse colors
uppercase	bool/number	undefined	Uppercase text
rounded	bool/number	undefined	Set rounded corners
.no-text-bg	className		Disables text color background

Highlight

Button for highlight icons or glyphs.

  import { Highlight } from "@ludekarts/base-ui/buttons";

  . . .

  <Highlight>+</Highlight>

Props

Prop name	Type	Default	Description
size	string	md	Button size, one of: [lg, md, sm]
color	string	rgba(0, 0, 0, 0.15)	Background color
activeText	string	false	Text color
square	bool/number	undefined	Do not use rounded corners
outline	bool/number	undefined	Show outline
active	bool/number	undefined	Active state

Switch

Checkbox/Radio component with visual appearance of dot slider.

  import { Switch } from "@ludekarts/base-ui/buttons";

  . . .

  <Switch name="mySwitch" size="lg" color="red" offColor="gray" />

Props

Prop name	Type	Default	Description
name	string	REQUIRED	Input name
id	string	same as name	Input ID
type	checkbox/radio	checkbox	Input type
size	string	md	Button size, one of: [lg, md, sm]
squared	bool	false	Use square corners
color	string	false	Background color
offColor	string	false	Background color for OFF state

Checkbox

Checkbox/Radio component with visual appearance of checkbox with a checkmark inside.

  import { Checkbox } from "@ludekarts/base-ui/buttons";

  . . .

  <Checkbox name="c3" color="red" defaultChecked />

Props

Prop name	Type	Default	Description
name	string	REQUIRED	Input name
id	string	same as name	Input ID
type	checkbox/radio	checkbox	Input type
bg	bool	false	Background color
color	bool	false	Checkmark color
rounded	bool	false	Use rounded corners

Close

Internally used close button for panels.

  import { Close } from "@ludekarts/base-ui/buttons";

  . . .

  <Close onClick={() => {}} size="2em" />

Props

Prop name	Type	Default	Description
text	string	inherit	Icon color
color	string	#EEEEEE	Background color
size	string	1.5em	Icon size
type	string	button	Button type
spacing	string	3px	Margin around icon
focusColor	string	rgba(66, 153, 225, 0.6)	Focus outline color

---

Layout

Container

Description

  import { Container } from "@ludekarts/base-ui/layout";

  . . .

  <Container mxw="1200px">
    Content
  </Container>

Props

Prop name	Type	Default	Description
mxw	string	78rem	Maximal container width
offsetTop	string	2rem	Offset from the top (margin-top)
spacing	string	0 1.5em"	Inside spacing (padding)

Stack

Arranges content items one under another.

  import { Stack } from "@ludekarts/base-ui/layout";

  . . .

  <Stack breakpoint="14rem">
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    ...
  </Stack>

Props

Prop name	Type	Default	Description
gap	string	1em	Space between items
mxw	bool/number	undefined	Sets max-width range for media query. By default Stack breaks at min-width
breakpoint	string	undefined	Min-width to break into rail layout

Rail

Arranges content items one next to another.

  import { Rail } from "@ludekarts/base-ui/layout";

  . . .

  <Rail gap="0.5em">
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    ...
  </Rail>

Props

Prop name	Type	Default	Description
gap	string	1em	Space between items
mnw	bool/number	undefined	Sets min-width range for media query. By default Stack breaks at max-width
breakpoint	string	undefined	Max-width to break into stack layout
wrapContent	bool/number	undefined	Allows overflow item to wrap inside container

NOTE:

Most effective usage of this component can be achieved with accompaniment of Vertical & Horizontal Alignment from <Global Styles/> component.

Grid

Organize content in dynamic grid.

  import { Grid } from "@ludekarts/base-ui/layout";

  . . .

  <Grid>
    <div>Cell</div>
    <div>Cell</div>
    <div>Cell</div>
    <div>Cell</div>
    ...
  </Grid>

Props

Prop name	Type	Default	Description
gap	string	1em	Space between cells
size	string	16rem	Minimal cell size
align	string	center	Cell's content alignment

Columns

Displays children in columns.

  import { Columns } from "@ludekarts/base-ui/layout";

  . . .

  <Columns>
    <div>1 column</div>
    <div>2 column</div>
    ...
  </Columns>

Props

Prop name	Type	Default	Description
gap	string	1em	Space between columns
minSize	string	14rem	Minimal one column size

Cover

Covers parent container.

  import { Cover, Space } from "@ludekarts/base-ui/layout";

  . . .

  <Cover className="--v-center --h-center">
    <Space space="0 0 0 auto">Top right corner</Space>
    <Space space="auto">Center content</Space>
    <Space space="0 auto 0 0">Bottom left corner</Space>
  </Cover>

Sidebar

Displays children (only 2) as a sidebar and main content.

  import { Sidebar } from "@ludekarts/base-ui/layout";

  . . .

  <Sidebar>
    <aside>Sidebar content</aside>
    <main>Main content</main>
  </Sidebar>

Props

Prop name	Type	Default	Description
gap	string	1em	Space between sidebar nad content
breakAt	string	50%	Minial content width
sideWidth	string	15em	Sidebar width
right	boolean	false	Places sidebar on the right side

Space

Manipulates negative space.

  import { Space } from "@ludekarts/base-ui/layout";

  . . .

  <Space />

  <Space>
    Content
  </Space>

Props

Prop name	Type	Default	Description
space	string	1em 0 0	Amount of negative space (margin/padding) in given units. By default uses margin
inset	boolean	false	If set to true negative space is calculated as padding
minmax	string	min	Media query "direction" min-width or max-width
breakpoint	string	undefined	Media query breakpoint
spaceBefore	string	undefined	Space before applying breakpoint. Takes precedence of space prop
spaceAfter	string	undefined	Space after applying breakpoint. Takes precedence of space prop

---

Media

Image

Displats image with additional fallback error to image placeholder.

  import { Image } from "@ludekarts/base-ui/media";

  . . .

  <Image src="https://url/to/image.jpg" alt="This is image description" />

Props

Prop name	Type	Default	Description
src	string	false	Image source
alt	string	false	Accessible image description
size	string	false	Image width & height
width	string	100%	Image width
height	string	auto	Image height

Avatar

Image with same width and height.

  import { Avatar } from "@ludekarts/base-ui/media";

  . . .

  <Avatar src="https://url/to/image.jpg" size="2em" />

Props

Prop name	Type	Default	Description
size	string	3rem	Avatar width & height
rounded	string	50%	Amount of corners rounding

AspectRatio

Renders container size with given ratio

  import { AspectRatio } from "@ludekarts/base-ui/media";

  . . .

  <AspectRatio>
    Content
  </AspectRatio>

Props

Prop name	Type	Default	Description
ratio	string	video	One of the value form table below
turnOffAt	string	undefined	Max-width to turn off scaling

Ratios

Prop value
video
16:9
8:5
3:2
4:3
1:1
square

---

Panels

Overlay

Black animated panel that covers entire screen.

  import { Overlay } from "@ludekarts/base-ui/panels";

  . . .

  <Overlay>
    Content
  </Overlay>

Props

Prop name	Type	Default	Description
open	bool	false	Overlay open state
top	number	0	Top offset
tint	number	0.9	Transparency
zIndex	number	1500	Z-index
delayIn	number	0	Delay for in-animation
delayOut	number	0	Delay for out-animation
duration	number	0.3	Animation duration

Drawer

Animated panels that slides-in from right side of the screen.

  import { Drawer } from "@ludekarts/base-ui/panels";

  . . .

  const [showDrawer, toggleDrawer] = useState(false);

  <Drawer open={showDrawer} onClose={() => toggleDrawer(false)}>
    Content
  </Drawer>

Props

Prop name	Type	Default	Description
open	bool	false	Drawer open state
nested	bool	false	Set to true if drawer is nested in another drawer
noOverlay	bool	false	Toggles background Overlay component
top	string	0	Top offset
width	string	18rem	Deawer width
onClose	function	undefined	On close callback. If defined Close button will appear in the drawer

Modal

Description

  import { Modal } from "@ludekarts/base-ui/panels";

  . . .

    const [showModal, togglwModal] = useState(false);

  <Modal open={showModal} onClose={() => togglwModal(false)}>
    Content
  </Modal>

Props

Prop name	Type	Default	Description
open	bool	false	Modal open state
onClose	function	undefined	On close callback. If defined Close button will appear in the modal
mxw	string	45rem	Max modal width
mxh	string	95%	Max modal height

Dropdown

Animated dropdown panel that can be triggered by adding data-bui-dropdown-target attribute with a dropdownName to any element.

  import { Dropdown } from "@ludekarts/base-ui/panels";

  . . .

  <button data-bui-dropdown-target="dropdownName">Toggle my dropdown</button>

  <Dropdown name="dropdownName" onToggle={ toggleState => {} } autoHide>
    Content
  </Dropdown>

Props

Prop name	Type	Default	Description
name	string	REQUIRED	Unique name that allow to identify target dropdown
onToggle	function	undefined	Callback fn called with current toggleState
autoHide	boolean	fasle	If set to true dropdown will automatically close after user click

---

Progress

In progress ...