v2

README.md

@@ -21,6 +21,7 @@ npm install frr-web
 #### Build library
 
 To build the library, run the build script and clean up afterwards
+
 1. Build library with types: `yarn build-types`
 2. (Clean node_modules: `yarn clean`)
 
@@ -33,7 +34,7 @@ In the locale environment you might want to link this library to the consuming a
 2. Remove the (critical) peer dependencies: `yarn clean`
 3. Start the build in watch mode (babel): `yarn build:watch`
 
-*IMPORTANT NOTE* Types are not transpiled by Babel. As a consequence, changes of types require a rebuild of the types with the TypeScript compiler in order for consuming applications to receive them.
+_IMPORTANT NOTE_ Types are not transpiled by Babel. As a consequence, changes of types require a rebuild of the types with the TypeScript compiler in order for consuming applications to receive them.
 As the TypeScript compiler requires all dependencies, we first have to install those as well. Unfortunately libraries like React or Style-Components cannot handle duplicate installations of the same package and will crash in the browser during rendering.
 That is why we have to clean the _node_modules_ from all peerDependencies before using it.
 
@@ -42,13 +43,15 @@ That is why we have to clean the _node_modules_ from all peerDependencies before
 ```ts
 import React, { useEffect } from 'react'
 import { Button } from 'frr-web/lib/components'
+import { AppThemeContext, configureAppTheme } from 'frr-web/lib/theme/theme'
 import { configureLanguage, Language } from 'frr-web/lib/theme/language'
 import {
-  configureTheme,
-  getTheme as getAppTheme,
-} from 'frr-web/lib/theme/theme'
+  TranslationsContext,
+  Translations,
+  LanguageContext,
+} from 'frr-web/lib/theme/language'
 
-const AppThemeContext = configureTheme({
+const appTheme = configureAppTheme({
   button: {
     chromeless: {},
     secondary: {},
@@ -59,7 +62,7 @@ const AppThemeContext = configureTheme({
   },
 })
 
-const Translations = {
+const translations = {
   submit: {
     [Language.EN]: 'Submit',
     [Language.DE]: 'Einreichen',
@@ -68,17 +71,17 @@ const Translations = {
   },
 }
 
-const LanguageContext = configureLanguage(Translations, Language.EN)
-
 const App = () => {
   const language = Language.EN
 
   return (
-    <LanguageContext.Provider value={language}>
-      <AppThemeContext.Provider value={getAppTheme()}>
-        <Button label="submit" />
-      </AppThemeContext.Provider>
-    </LanguageContext.Provider>
+    <TranslationsContext.Provider value={translations}>
+      <LanguageContext.Provider value={language}>
+        <AppThemeContext.Provider value={appTheme}>
+          <Button label="submit" />
+        </AppThemeContext.Provider>
+      </LanguageContext.Provider>
+    </TranslationsContext.Provider>
   )
 }
 ```

package.json

@@ -4,7 +4,7 @@
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "author": "Luke Zirngibl",
-  "version": "1.1.51",
+  "version": "2.0.0",
   "keywords": [],
   "scripts": {
     "build": "tsc",

src/components/Button.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { CSSProperties } from 'styled-components'
 import { useDebouncedCallback } from 'use-debounce/lib'
 import { P } from '../html'
-import { AppTheme, getThemeContext } from '../theme/theme'
+import { AppTheme, useAppTheme } from '../theme/theme'
 import { createStyled, useCSSStyles, useInlineStyle } from '../theme/util'
 import { Icon, IconProps } from './Icon'
 import { Loading } from './Loading'
@@ -38,33 +38,33 @@ export type Props = {
 export const Button = (props: Props) => {
   /* Style hooks */
   const type = props.type || ButtonType.Secondary
-  const theme = React.useContext(getThemeContext())
+  const theme = useAppTheme()
 
   const getStyle = useInlineStyle(theme, 'button')(props.style)
   const getCSSStyle = useCSSStyles(theme, 'button')(props.style)
 
   /* Click handler */
   const [isClicked, setIsClicked] = useState(false)
 
-  // const onClicked = useDebouncedCallback(() => {
-  //   props.onClick()
-  //   setIsClicked(false)
-  // }, 300)
+  const onClicked = useDebouncedCallback(() => {
+    props.onClick()
+    setIsClicked(false)
+  }, 300)
 
-  // const handleClicked =
-  //   props.disabled || props.loading
-  //     ? undefined
-  //     : () => {
-  //         setIsClicked(true)
-  //         // @ts-ignore
-  //         onClicked()
-  //       }
+  const handleClicked =
+    props.disabled || props.loading
+      ? undefined
+      : () => {
+          setIsClicked(true)
+          // @ts-ignore
+          onClicked()
+        }
 
   return (
     <ButtonWrapper
       className={isClicked ? 'animate' : ''}
       data-test-id={props.dataTestId}
-      onClick={props.onClick}
+      onClick={handleClicked}
       disabled={props.disabled}
       {...getCSSStyle(['common', mapTypeToStyleKey[type]], props.override)}
     >

src/components/CodeInput.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled, { StyledComponent } from 'styled-components'
 import { range } from 'fp-ts/lib/Array'
-import { getThemeContext, AppTheme } from '../theme/theme'
+import { AppTheme, useAppTheme } from '../theme/theme'
 import { useInlineStyle } from '../theme/util'
 import { Label, LabelProps } from './Label'
 
@@ -51,7 +51,7 @@ const replaceChar = (str: string, char: string, index: number) => {
 }
 
 export const CodeInput = (props: Props) => {
-  const theme = React.useContext(getThemeContext())
+  const theme = useAppTheme()
   const getStyle = useInlineStyle(theme, 'codeInput')(props.style)
 
   const refs: Array<React.RefObject<typeof Input>> = range(

src/components/CountrySelect.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { COUNTRIES_ALPHA_3 } from '../assets/countries'
-import { getLanguageContext } from '../theme/language'
 import { Select, Props as SelectProps } from './Select'
 
 export type Props = Omit<SelectProps, 'options'>
@@ -9,7 +8,7 @@ export const CountrySelect = (props: Props) => {
   return (
     <Select
       {...props}
-      options={COUNTRIES_ALPHA_3.map(c => ({ label: c, value: c }))}
+      options={COUNTRIES_ALPHA_3.map((c) => ({ label: c, value: c }))}
       alphabetize
     />
   )

src/components/DatePicker.tsx

@@ -7,15 +7,15 @@ import { LabelProps, Label } from './Label'
 import 'react-datepicker/dist/react-datepicker.css'
 import { TextInput } from './TextInput'
 import { format, parse } from 'date-fns'
-import { getThemeContext, AppTheme } from '../theme/theme'
+import { AppTheme, useAppTheme } from '../theme/theme'
 import { useInlineStyle } from '../theme/util'
 import styled from 'styled-components'
 import ClickAwayListener from 'react-click-away-listener'
 import de from 'date-fns/locale/de'
 import en from 'date-fns/locale/en-GB'
 import fr from 'date-fns/locale/fr'
 import it from 'date-fns/locale/it'
-import { getLanguageContext } from '../theme/language'
+import { useLanguage } from '../theme/language'
 import { Language } from '../util'
 import { Icon } from './Icon'
 
@@ -63,9 +63,9 @@ export type Props = {
 export const DatePicker = (props: Props) => {
   const { onChange, value, label } = props
 
-  const theme = React.useContext(getThemeContext())
+  const theme = useAppTheme()
   const getStyle = useInlineStyle(theme, 'datePicker')(props.style)
-  const language = React.useContext(getLanguageContext())
+  const language = useLanguage()
 
   const [open, setOpen] = React.useState(false)
   const dateFormat = props.dateFormat || 'dd.MM.yyyy'

src/components/Label.tsx

@@ -1,13 +1,13 @@
 import styled from 'styled-components'
 import React, { ReactNode } from 'react'
-import { AppTheme, getThemeContext } from '../theme/theme'
+import { AppTheme, useAppTheme } from '../theme/theme'
 import { useInlineStyle, useCSSStyles } from '../theme/util'
-import { getLanguageContext } from '../theme/language'
 import { Icon } from './Icon'
 import ClickAwayListener from 'react-click-away-listener'
 import { P } from '../html'
 import { Language } from '../util'
 import { InfoIcon } from '../assets/Info'
+import { useLanguage } from '../theme/language'
 
 export const LabelWrapper = styled.div``
 
@@ -38,13 +38,13 @@ export type LabelProps = {
 }
 
 export const Label = (props: LabelProps) => {
-  const theme = React.useContext(getThemeContext())
+  const theme = useAppTheme()
   const getCSSStyle = useCSSStyles(theme, 'label')(props.style)
   const getInlineStyle = useInlineStyle(theme, 'label')(props.style)
 
   const [open, setOpen] = React.useState(false)
 
-  const language = React.useContext(getLanguageContext())
+  const language = useLanguage()
 
   return (
     <LabelWrapper {...getInlineStyle('wrapper')}>

src/components/MultiSelect.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
 import { Options } from '../util'
 import Select from 'react-select'
-
 import { Label, LabelProps } from './Label'
-import { getTranslation, getLanguageContext } from '../theme/language'
+import { useLanguage, useTranslate } from '../theme/language'
 
 export type Props = {
   onChange: (value: Array<string>) => void
@@ -15,21 +14,21 @@ export type Props = {
 }
 
 export const MultiSelect = (props: Props) => {
-  const language = React.useContext(getLanguageContext())
-  const translate = getTranslation(language)
+  const language = useLanguage()
+  const translate = useTranslate(language)
 
   return (
     <>
       {props.label && <Label {...props.label} />}
       <Select
-        value={props.options.filter(o => props.value.includes(o.value))}
+        value={props.options.filter((o) => props.value.includes(o.value))}
         isMulti
         name="colors"
         options={props.options}
-        getOptionLabel={o => (o.label ? o.label : o.name)}
+        getOptionLabel={(o) => (o.label ? o.label : o.name)}
         className="basic-multi-select"
         classNamePrefix="select"
-        onChange={v => props.onChange((v || []).map(i => i.value))}
+        onChange={(v) => props.onChange((v || []).map((i) => i.value))}
       />
     </>
   )

src/components/OptionGroup.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { getThemeContext, AppTheme } from '../theme/theme'
+import { AppTheme, useAppTheme } from '../theme/theme'
 import { useInlineStyle, useCSSStyles } from '../theme/util'
 import { Options } from '../util'
 import { Label, LabelProps } from './Label'
@@ -34,7 +34,7 @@ export type Props = {
 }
 
 export const OptionGroup = (props: Props) => {
-  const theme = React.useContext(getThemeContext())
+  const theme = useAppTheme()
 
   const getInlineStyle = useInlineStyle(theme, 'optionGroup')(props.style)
   const getCSSStyles = useCSSStyles(theme, 'optionGroup')(props.style)

src/components/RadioGroup.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { LabelProps, Label } from './Label'
-import { AppTheme, getThemeContext } from '../theme/theme'
+import { AppTheme, useAppTheme } from '../theme/theme'
 import { useInlineStyle, useCSSStyles } from '../theme/util'
 import styled from 'styled-components'
 import { Options } from '../util'
@@ -42,7 +42,7 @@ export type Props = {
 }
 
 export const RadioGroup = (props: Props) => {
-  const theme = React.useContext(getThemeContext())
+  const theme = useAppTheme()
 
   const getInlineStyle = useInlineStyle(theme, 'radioGroup')(props.style)
   const getCSSStyles = useCSSStyles(theme, 'radioGroup')(props.style)

src/components/Select.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import styled from 'styled-components'
 import { Options, Language, replaceUmlaute } from '../util'
-import { getTranslation, getLanguageContext } from '../theme/language'
+import { useTranslate, useLanguage } from '../theme/language'
 import { Label, LabelProps } from './Label'
-import { AppTheme, getThemeContext } from '../theme/theme'
+import { AppTheme, useAppTheme } from '../theme/theme'
 import { useInlineStyle, useCSSStyles } from '../theme/util'
 import { Icon } from './Icon'
 import { Option } from '../html'
@@ -29,9 +29,9 @@ export type Props = {
 export const Select = (props: Props) => {
   const { label } = props
 
-  const theme = React.useContext(getThemeContext())
-  const language = React.useContext(getLanguageContext())
-  const translate = getTranslation(language)
+  const theme = useAppTheme()
+  const language = useLanguage()
+  const translate = useTranslate(language)
 
   const getInlineStyle = useInlineStyle(theme, 'select')(props.style)
   const getCSSStyles = useCSSStyles(theme, 'select')(props.style)

src/components/SingleCheckbox.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { Label, LabelProps } from './Label'
 import styled from 'styled-components'
-import { getThemeContext, AppTheme } from '../theme/theme'
+import { AppTheme, useAppTheme } from '../theme/theme'
 import { useInlineStyle } from '../theme/util'
 
 const Wrapper = styled.div``
@@ -19,7 +19,7 @@ export type Props = {
 export const SingleCheckbox = (props: Props) => {
   const { value } = props
 
-  const theme = React.useContext(getThemeContext())
+  const theme = useAppTheme()
   const getInlineStyle = useInlineStyle(theme, 'singleCheckbox')(props.style)
 
   return (

src/components/Slider.tsx

@@ -3,7 +3,7 @@ import { withStyles } from '@material-ui/styles'
 import React from 'react'
 import { useDebouncedCallback } from 'use-debounce'
 import { P } from '../html'
-import { getThemeContext, MaterialSliderStyles } from '../theme/theme'
+import { MaterialSliderStyles, useAppTheme } from '../theme/theme'
 import { useInlineStyle, useCSSStyles } from '../theme/util'
 import { Label, LabelProps } from './Label'
 
@@ -89,13 +89,14 @@ export type Props = {
   scale?: any
   ariaLabelledby?: any
   marks?: any
+  dataTestId?: string
   reverse?: boolean
   prefix?: string
   isCurrency?: boolean
 }
 
 export const Slider = (props: Props) => {
-  const theme = React.useContext(getThemeContext())
+  const theme = useAppTheme()
 
   const getInlineStyle = useInlineStyle(theme, 'slider')({})
   const getCSSStyles = useCSSStyles(theme, 'slider')({})
@@ -130,6 +131,19 @@ export const Slider = (props: Props) => {
           <p {...getInlineStyle('value')}>
             {props.isCurrency ? Formatter.format(internalValue) : internalValue}
           </p>
+          {/* <input
+            style={{
+              width: 1,
+              height: 1,
+              opacity: 0,
+            }}
+            data-test-id={props.dataTestId}
+            value={`${props.value}`}
+            onChange={(e: any) => {
+              const v = Number(e.target.value)
+              onChange(v)
+            }}
+          /> */}
         </div>
 
         <MaterialSlider