@apparts/web-components

#+TITLE: @apparts/web-components #+DATE: [2021-03-11 Thu] #+AUTHOR: Philipp Uhl

@apparts/web-components gives you some standard web components for forms, inputs and in general. They are lightweight, some are for making the use of Formik easier and more standardized.

• Components

• General purpose:

  • Button
  • Input
  • ErrorMessage
  • FadeIn

• Formik specific:

  • If
  • IfElse
  • Row
  • GlobalError
  • IfDirty
  • FormikInput

** Button

The button component has all usual button props and these:

• submit: <?boolean> :: Type should be "submit"
• loading: <?boolean> :: The button should be disabled and show a loading animation
• disabled: <?boolean> :: The button should be disabled

** Input

The input component has all usual input props and these:

• label: :: The inputs label text
• name: :: The inputs name and id
• error: <?string> :: An error text that should be shown

** ErrorMessage

A styled error message that only renders if the message prop is given. Props:

• message: <?string> :: The message that should be rendered

** FadeIn

A component that fades it's content in, on render. Props:

• shown: <?bool> :: The content should be visible
• children: :: The content
• min: <?number> = 0 :: The opacity when invisible
• max: <?number> = 1 :: The opacity when visible
• duration: <?number> = 1 :: The duration of the fade in in seconds
• style: <?object> :: A style for the wrapper

** If

Formik specific component. Render children, if some condition is true in the Formik input values. Props:

• children: :: The children to be rendered
• test: :: The test function, it will be given the values from the formik context as parameter. If it returns true, the content will be rendered.

** IfElse

Formik specific component. Render children, if some condition is true in the Formik input values. Props:

• then: :: The children to be rendered if condition met
• elze: :: The children to be rendered if condition not met
• test: :: The test function, it will be given the values from the formik context as parameter. If it returns true, the then part will be rendered, if returns false, the elze part will be rendered.

** Row

Formik specific component. Renders inputs in a row that wraps at a specifiable width. Props:

• children: :: The content to be rendered in a row
• minWidth: <?number> = 200 :: The minium width of the items
• margin: <?number> = 5 :: The margin between the children
• containerStyle: <?object> :: Style of the container
• rowStyle: <?object> :: Style for each element

** GlobalError

Formik specific component. Renders an error if any field of the form has an error. Useful, e.g. to display a warning near the submit button that explains, that there is an issue present. Props:

• message: :: The message to be rendered.

** IfDirty

Formik specific component. Renders it's content, only if the formik form is dirty. Useful, e.g., to display a react-routes prompt when leaving a page, but only if the user has unsaved input. Takes no props.

To prevent the form to be dirty after submitting, you can use this line in your =onSubmit= handler function:

#+BEGIN_SRC js const onSubmit = (fields, actions) => { // do the saving, etc. Then, on success: actions.resetForm({ values: fields }); }; #+END_SRC

** FormikInput

Formik specific component. An input field with an error field and a label.

The FormikInput component has all usual (formik) input props and these:

• label: :: The inputs label text
• name: :: The inputs name and id

• Usage

Import the default style, or create your own style based on the default one.

#+BEGIN_SRC js // The default style: import "@apparts/web-components/style.css"; #+END_SRC

To keep the given style sheet but alter the color scheme, just redefine these CSS variables with your color scheme:

#+BEGIN_SRC css :root { --dark-0: #0c0e0e; --dark-1: #23292a; --dark-2: #394546; --dark-3: #516062; --dark-4: #677b7e;

--bright-0: #d8dedf; --bright-1: #e1e6e6; --bright-2: #eaedee; --bright-3: #f3f5f5; --bright-4: #fcfdfd;

--primary-0: #144a52; --primary-1: #1b636d; --primary-2: #227c88; --primary-3: #2995a3; --primary-4: #30aebe; --primary-5: #41bfcf; --primary-6: #5cc8d6; --primary-7: #77d1dd; --primary-8: #92dae4; --primary-9: #ade3eb;

--secondary-0: #521c14; --secondary-1: #6d251b; --secondary-2: #882e22; --secondary-3: #a33729; --secondary-4: #be4030; --secondary-5: #cf5141; --secondary-6: #d66a5c; --secondary-7: #dd8377; --secondary-8: #e49c92; --secondary-9: #ebb5ad;

--green-0: #145214; --green-1: #248f24; --green-2: #33cc33; --green-3: #70db70; --green-4: #adebad;

--yellow-0: #525214; --yellow-1: #8f8f24; --yellow-2: #cccc33; --yellow-3: #dbdb70; --yellow-4: #ebebad;

--red-0: #521414; --red-1: #8f2424; --red-2: #cc3333; --red-3: #db7070; --red-4: #ebadad; } #+END_SRC