@ur-solutions/react-components

Guidelines

I, your God, command you to follow these guidelines religiously.

Events

Interactive element change events

All change events on interactive shall provide the most relevant value of the component as the first argument. The change event object shall be provided as the second argument. This is only required for the most relevant change event (usually React.ChangeEvent), it is not required for React.InputEvent, for example.

Event propagation

Normal JavaScript events shall always be propagated. For example, if you're using onBlur within a component, this event must also be propagated with a prop. Example:

const Dropdown: React.FC<DropdownProps> = ({ ..., onBlur }) => {
  function handleBlur(evt: React.FocusEvent<HTMLInputElement>) {
    // Do something
    onBlur(evt) // This is required
  }

  return (
    <Wrapper>
      <Input ... onBlur={handleBlur} />
      ...
    </Wrapper>
  )
}

Component props

Prop order

Prop interfaces and destrucutred props in component function definitions should be ordered and divided reasonably by category. Event callbacks should come last in the prop order. You should use the same order in the interface and the destructuring. Example:

interface DropdownProps<ValueType> {
  value: ValueType
  items: DropdownItem<ValueType>

  color?: string
  background?: string

  onChange: (value: ValueType) => void
}
const Dropdown: React.FC<DropdownProps>({
  value,
  items,

  color = 'black',
  background = 'white',

  onChange
}) => { ... }

className prop

The className prop shall be available on all components, and injected at the most reasonable location. This is usually the top-most wrapper in the component.

Prop naming

You should strive to use a uniform naming convetion across components. For example, it's bad practice to name a prop color in one component and foreColor in another, of the purpose of both props is to set the color if the component text.

Inner text of components

Whereever a component might have some hard coded inner text, this text should be configurable by prop. The default value of this prop should be in english. Example:

const Error: React.FC<ErrorProps> = ({ ..., message = 'An error occured' }) => {
  return <ErrorWrapper>{message}</ErrorWrapper>
}

Component style

Theme

All components shall strive to use theme variables wherever prudent.

Subelements

All subelements shall have class names prefixed with --, for easier overriding of styles. These should be documented. Example:

<Wrapper className="{className}">
  <ErrorMessage className="--error-message"> ... </ErrorMessage>
</Wrapper>

Typing

Union literal types

Union litaral types are preferred wherever relevant. Example:

interface Props {
  placement: string // No!
}
interface Props {
  placement: 'above' | 'below' | 'left' | 'right' // Yes!
}
export type Placement = 'above' | 'below' | 'left' | 'right'
interface Props {
  placement: Placement // Premium pornography
}

Values of interactive components

In interactive components with values, normally form inputs, generic props whould be used when reasonable. Example

interface DropdownProps {
  value: number
  onChange: (value: number) => void
}
interface DropdownProps<ValueType> {
  value: ValueType
  onChange: (value: ValueType) => void
}

This will not be the case for every form input of course, for example the <input /> component will probably always use a string as a value.

Changelog

v 1.5.0

• Package
  • Change package name to @ur-solutions/react-components

v 1.4.8

• Card
  • Add ref to Card component

v 1.4.7

• NumberInput
  • Fix .020 error

v 1.4.6

• NumberInput
  • Fix bug when writing negative numbers
  • Remove errant unicode symbol

v 1.4.5

• Select
  • Add --select-curtain-option-selected class for selected option

v 1.4.4

• DropdownMenu
  • Add side prop
    • Choose which side of the trigger the menu should be placed

v 1.4.2

• Select
  • Add className --select-curtain-option-active to active select option

v 1.4.1

• Input
  • Ensure displayed input value is always up to date with value

v 1.4.0

• VippsLoginButton
  • Add VippsLoginButton component

v 1.3.2

• NumberInput
  • Add clearable prop, which allows clearing the input
  • Add onCleared event, which is fired when input is cleared if clearable is true

v 1.3.1

• NumberInput
  • Fix dumb bug where you couldn't write a lone zero immediately after a decimal point

v 1.3.0

• DatePicker & TimePicker
  • Applies v0.16.2-patch1 changes

v 1.2.0

• Input
  • Add property 'rightLabel'

v 1.1.0

• Loader
  • Add Spinner type wheel

v 1.0.0

• Stable release
• Switch from react-spring and react-use-gestureto framer-motion
• Remove FilePicker and FilePickerButton components
• ImageViewer
  • Add showDownloadButton prop
  • Deprecate noShadow and padding props
• Icon
  • Upgrade to FontAwesome v6
  • Export FontAwesome types

v 0.19.0

• Upgrade to React 18

v 0.18.1

• Select and SelectMultiple
  • Forward refs to components, with toggleOpen function
  • Add clickOutsideExclude prop
    • If an element in this array is clicked, curtain is not closed even though element is outside of curtain

v 0.18.0

• PrivateRoute
  • Add PrivateRoute component
    • With PrivateRouteProvider
    • Supports checking if user is authenticated and authorized to access route
    • Requires react-router-dom

v 0.17.7

• Input
  • Add runAutoCompleteOnFocus prop
    • Runs autocomplete function/shows list on focus
  • Add runAutoCompleteWithNoInput prop
    • Runs autocomplete function/shows list also when there's no text in input

v 0.17.3

• ImageViewer
  • Improve styling of navigation arrows

v 0.17.1

• TextArea
  • Add submitConfig.hint prop
    • Displays hint text in lower left corner

v 0.17.0

• TextArea
  • Add onSubmit event
    • Adds a submit icon to lower right of TextArea
  • Add onCtrlEnter event

v 0.16.8

• Input
  • Fix bug where onEnter event did not fire

v 0.16.7

• Prompt
  • Fix bug where prompt config was inherited from previous prompts

v 0.16.5

• ActionButton
  • Add prop to
    • Define a path/location description to act as link
  • Add prop role
  • Make onClick optional
• Input
  • Add event onEnter
    • Fired when Enter key is pressed

v 0.16.3

• ActionButton
  • Add ref

v 0.16.2-patch1

• DatePicker
  • Added onCleared explicit API prop to DatePickerProps and component.
• TimePicker
  • Added disabled prop to TimePickerProps and component.

v 0.16.2

• Prompt
  • Fix typing issue in addPrompt return

v 0.16.1

• Toast
  • Make it possible to set progressBarColor per toast type

v 0.16.0

• Prompt (BREAKING)
  • Add closeOnResolve prompt option
    • Set to false to not close prompt on resolve. Default true
  • Add close return func to addPrompt
    • Use to close prompt manually
  • Add update return func to addPrompt
    • Use to update state of prompt from the outside. Required that the id variable, given in third addPrompt callback parameter, is added as prop to custom prompt
  • Add usePromptState hook
    • Gets local state for current prompt. Is passed the id prop from previous point

v 0.15.12

• Toast (potentially breaking)
  • Set icons or specific icons within to null to not show an icon in the Toast
  • contentAlignVertical set to default center

v 0.15.10

• RadioGroup
  • Add className prop
  • Add className to radio wrapper

v 0.15.8

• Prompt
  • Add closeOnClickOutside and closeOnEscape to prompt options modalProps
    • If enabled, click outside/escape will reject promise with reason arg set to -1

v 0.15.7

• Input
  • Add loading prop
    • Displays a loader in the Input

v 0.15.5

• Checkbox
  • Bugfix: correctly handle disabled

v 0.15.4

• Toast
  • Add option color per toast type
  • Add option box-shadow

v 0.15.2

• FilePicker & FilePickerButton
  • accept property now accepts file extensions matched against filename (.png, .csv, .mp3 etc)

v 0.15.1

• Input
  • type property now supports all listed types from MDN's <input> types

v 0.15.0

• react-spring upgraded to 9.1.1
  • This may be breaking if project uses older version/realease candidate
• storybook fixed

v 0.14.15

• Input
  • Add onAutoCompleteItemSelect event

v 0.14.14

• Select and SelectMultiple
  • Add onCurtainScroll event

v 0.14.13

• Breadcrumbs
  • Add ref to Breadcrumbs and RouteBreadcrumbs

v 0.14.12

• DatePicker and DateRangePicker
  • Add height prop

v 0.14.10

• DatePicker and DateRangePicker
  • Add noAnimation prop
    • Disables curtain animation

v 0.14.9

• Input
  • Add selectOnFocus-prop
    • Selects text in input when focused
    • Also available in NumberInput

v 0.14.8

• Modal
  • Add props shouldFocusAfterRender and shouldReturnFocusAfterClose from react-modal

v 0.14.6

• Checkbox
  • Fix Checkbox tabIndex
  • Add onKeyDown checkbox event and toggle on Enter and Space keys

v 0.14.3

• RouteBreadCrumbs
  • Add inserts prop
    • Allows for inserting custom crumbs in RouteBreadcrumbs

v 0.14.2

• Input
  • Add name and autoCompelete props

v 0.14.0

• Upgrade to React 17

v 0.13.1

• Checkbox
  • Add boxSize prop
    • Set both width and height at once

v 0.13.0

• Tooltip
  • Add Tooltip component

v 0.12.3

• Modal
  • Add noShade prop to modal

v 0.12.2

• NumberInput
  • Bugfix: disable mouse wheel when input is disabled

v 0.12.1

• NumberInput
  • Fix bug where an extra decimal place was added when removing a decimal number

v 0.12.0

• NumberInput
  • Adds NumberInput component
    • Input which only accepts numbers (duh)

v 0.11.1

• Prompt
  • Add modalProps to prompt options

v 0.11.0

• Prompt
  • Adds Prompt component
    • Comes with PromptProvider, which must be added somewhere in project root (within theme provider)
    • Works through usePrompt hook
    • usePrompt hooks returns addPrompt function, which again will return a promise of boolean or custom-defined type
    • Let's you define custom prompt, or use built-in "Cancel"/"Confirm" prompt

v 0.10.8

• TimePicker
  • Add props width, maxWidth and minWidth

v 0.10.7

• TimePicker
  • Fix error in background color
  • And add classNames to sub-comps

v 0.10.6

• Select & SelectMultiple
  • Add custom filtering to Select
    • Set searchable to custom and use new event onFilterChange to handle searching

v 0.10.5

• DatePicker
  • Make DatePicker clearable
    • Add props clearable and initCleared, which makes it possible to clear DatePicker content
    • Second argument of onChange is now cleared, which will be true if clearable is true and input text is empty. First argument will still be currently selected date.
    • Also adds a ref, which contains a clear-method

v 0.10.4

• Breadcrumbs & RouteBreadcrumbs
  • Add ability to hide crumbs

v 0.10.2

• Input
  • Add email and url types

v 0.10.1

• ImageViewer
  • Add prop noShadow

v 0.10.0

• ImageViewer
  • Add prop popup and related props
    • Display image viewer as a popup

v 0.9.0

• Switch to relative imports

v 0.8.0

• Loader
  • Add Dots loader
    • Type ellipsis

v 0.7.3

• RuoteBreadcrumbs
  • Fix bug where crumbs didn't update on route change

v 0.7.1

• Breadcrumbs
  • Add props color and className to Crumb
  • RouteBreadcrumbs: Add prop overrideCrumb
    • Let's you override individual crumbs

v 0.7.0

• Dependencies
  • Upgrade react-use-gesture to 8.0.0, and update peerDependencies

v 0.6.3

• Input
  • Add errorOffsetX and errorOffsetY props
    • Set an offset for the error message position
  • Add className to input error wrapper
    • --input-error

v 0.6.2

• Select
  • Change behavior of arrow keys
    • If curtain not open, cycle options

v 0.6.1

• Icon
  • Add duotone type
  • Add swapOpacity prop

v 0.6.0

• Badge
  • Add props className and id
  • Add props translateTextX and translateTextY
  • Add prop border
  • Add props boxShadow and noShadow
  • Add prop enablePointerEvents
  • Remove default from prop minWidth

v 0.5.6

• TextArea
  • Add autoFocus property

v 0.5.5

• DatePicker
  • Bugfix: display was not updated when value was updated externally

v 0.5.3

• DatePicker
  • Add closeOnDateChange prop
    • Close curtain on date change, default false

v 0.5.0

• Select & SelectMultiple
  • Add error props to Selects
  • Same functionality as on Input component

v 0.4.8

• Input
  • Add hideErrorMessage prop

v 0.4.7

• Input
  • Add textAlign prop

v 0.4.6

• Select & SelectMultiple
  • Add minWidth and maxWidth props

v 0.4.5

• Input
  • Make disabled prop actually work
• TextArea
  • Add disabled prop

v 0.4.3

• Select and SelectMultiple
  • Add option as argument to Select and SelectMultiple onChange event

v 0.4.2

• DateRangePicker
  • Implement better range handling and styling

v 0.4.1

• DatePicker and DateRangePicker
  • Add keepOpen prop
    • Keeps DatePicker always open.
  • Add focusBorderColor prop
• Input
  • Add focusBorderColor prop

v 0.4.0

• DateRangePicker
  • Add component DateRangePicker
    • Very unfinished, but I need it now

v 0.3.8

• Toggle
  • Add disabled prop to Toggle
  • Add disabledBackground prop to Toggle
  • Add onKeyDown prop to Toggle
    • Also listen for arrow keys and enter/space

v 0.3.7

• Select
  • Bugfix in arrow/enter key open

v 0.3.6

• Select
  • Add disabled prop to Select and MultiSelect

v 0.3.5

• ThumbnailList
  • Add altRender prop
    • Altarnate render function in case an image doesn't load

v 0.3.4

• Package upgrades

v 0.3.2

• Select
  • Add nullable prop to Select
    • Makes it possible to clear selected value
  • Some UX fixes
    • Scroll into view on arrow key navigation
    • Open select on enter/down arrow

v 0.3.1

• Select
  • className fixes

v 0.3.0

• Thumbnail
  • Add border props
• ThumbnailList
  • Add component
• Select
  • Make it possible to define a custom function for searchable prop

v 0.2.2

• Error fixes

v 0.2.0

• Modal
  • Add react-modal
  • Add onClose prop
    • If onShadeClick is undefined, onClose is used in its placement
  • Add closeOnEscape prop

v 0.1.7

• Error fixes

v 0.1.4

• RadioGroup
  • Fix key prop in radio item list
• Input
  • Add maxLength prop
• Select
  • Add iconProps prop for arrow icon styling
  • Set Select and SelectMultiple inline prop to default false
• DatePicker
  • Set z-index: 1 on curtain

v 0.1.3

• Button
  • Add autoFocus property
  • Add centerContent property (centers content if width is not auto)

v 0.1.2

• Add UrThemeProvider

v 0.1.1

• Export typings

v 0.1.0

• Initial release