@tactics/toddle-styleguide 5.0.0 → 5.0.2

package/src/components/atoms/split-container/split-container.component.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import {useContext} from 'react';
-
-import {ThemeCtx} from '../../../context/theme.context';
-import {View} from 'react-native';
-import {Stylesheet} from './split-container.styles';
-
-type splitContainerProps = {
-  element1: React.ReactNode;
-  element2?: React.ReactNode;
-};
-
-const SplitContainer = ({element1, element2}: splitContainerProps) => {
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context);
-
-  return (
-    <View style={styles.element}>
-      <View style={[styles.inner, element2 ? styles.twoElements : {}]}>
-        {element1}
-        {element2 ? element2 : null}
-      </View>
-    </View>
-  );
-};
-
-export {SplitContainer as SplitContainer};

package/src/components/atoms/split-container/split-container.preview.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const SplitContainerPreview: ({}: {}) => React.JSX.Element;

package/src/components/atoms/split-container/split-container.preview.tsx

@@ -1,62 +0,0 @@
-import React, {useContext} from 'react';
-import {Button} from '../../molecules/button/button.component';
-import {CancelLink} from '../../molecules/cancel-link/cancel-link.component';
-import {View} from 'react-native';
-import {SplitContainer} from './split-container.component';
-import {QrcodeIcon} from '../../../icons/outline/qrcode/qrcode.icon';
-import {ThemeCtx} from '../../../context/theme.context';
-import {SelectLink} from '../../molecules/select-link/select-link.component';
-
-export const SplitContainerPreview = ({}: {}) => {
-  const context = useContext(ThemeCtx);
-
-  return (
-    <View
-      style={{
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <SplitContainer
-        element1={
-          <Button
-            label="Toepassen"
-            onPress={() => console.log('element 1 pressed')}
-          />
-        }
-      />
-
-      <SplitContainer
-        element1={
-          <CancelLink
-            label="Filter Wissen"
-            onPress={() => console.log('canceled')}
-          />
-        }
-        element2={
-          <Button
-            label="Toepassen"
-            onPress={() => console.log('element 2 pressed')}
-          />
-        }
-      />
-      <SplitContainer element1={<QrcodeIcon color={'#515F6C'} />} />
-
-      <SplitContainer
-        element1={
-          <SelectLink
-            label={'Selecteer alle'}
-            onPress={() => console.log('selecteer alle')}
-          />
-        }
-        element2={
-          <Button
-            label="Kies actie"
-            onPress={() => console.log('element 2 pressed')}
-          />
-        }
-      />
-    </View>
-  );
-};

package/src/components/atoms/split-container/split-container.styles.d.ts

@@ -1,14 +0,0 @@
-export function Stylesheet(context: any): {
-  element: {
-    width: '100%';
-    paddingRight: number;
-    paddingLeft: number;
-  };
-  inner: {
-    flexDirection: 'row';
-    justifyContent: 'center';
-  };
-  twoElements: {
-    justifyContent: 'space-between';
-  };
-};

package/src/components/atoms/split-container/split-container.styles.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import {StyleSheet} from 'react-native';
-import {Scale} from '../../../theme/scale';
-
-export const Stylesheet = (context) =>
-  StyleSheet.create({
-    element: {
-      width: '100%',
-      paddingRight: Scale.xs,
-      paddingLeft: Scale.xs,
-    },
-    inner: {
-      flexDirection: 'row',
-      justifyContent: 'center',
-    },
-    twoElements: {
-      justifyContent: 'space-between',
-    },
-  });

package/src/components/atoms/split-container/split-container.test.js

@@ -1,45 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import {SplitContainer} from './split-container.component';
-import {Button} from '../../molecules/button/button.component';
-import {QrcodeIcon} from '../../../icons/outline/qrcode/qrcode.icon';
-import {SelectLink} from '../../molecules/select-link/select-link.component';
-
-describe('test split-container', () => {
-  it('renders correctly when TWO ELEMENTS are provided', () => {
-    const tree = renderer
-      .create(
-        <SplitContainer
-          element1={
-            <SelectLink
-              label={'Selecteer alle'}
-              onPress={() => console.log('selecteer alle')}
-            />
-          }
-          element2={
-            <Button
-              label={'Kies actie'}
-              onPress={() => console.log('Kies actie')}
-            />
-          }
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly when ONE ELEMENT is provided ', () => {
-    const tree = renderer
-      .create(<SplitContainer element1={<Button label={'Toepassen'} />} />)
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('renders correctly when A COLORED ICON is provided ', () => {
-    const tree = renderer
-      .create(<SplitContainer element1={<QrcodeIcon color={'#515F6C'} />} />)
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-});

package/src/components/atoms/static-wave/static-wave.component.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { ViewStyle } from 'react-native';
-export type WaveProps = {
-    customStyle?: ViewStyle;
-    customWavePath?: string;
-    heightSvgContainer?: number;
-    positionTop?: number;
-};
-export declare const StaticWave: ({ customStyle, customWavePath, heightSvgContainer, positionTop, }: WaveProps) => React.JSX.Element;

package/src/components/atoms/static-wave/static-wave.component.tsx

@@ -1,46 +0,0 @@
-import React, {useContext} from 'react';
-import {Dimensions, View, ViewStyle} from 'react-native';
-import Svg, {Path} from 'react-native-svg';
-import {ThemeCtx} from '../../../context/theme.context';
-import {Stylesheet} from './static-wave.styles';
-
-// https://getwaves.io/ -> create custom waves
-
-export type WaveProps = {
-  customStyle?: ViewStyle;
-  customWavePath?: string;
-  heightSvgContainer?: number;
-  positionTop?: number;
-};
-
-export const StaticWave = ({
-  customStyle,
-  customWavePath,
-  heightSvgContainer,
-  positionTop,
-}: WaveProps) => {
-  const {width} = Dimensions.get('window');
-  const Context = useContext(ThemeCtx);
-  const styles = Stylesheet(Context, heightSvgContainer, width);
-  return (
-    <View style={!customStyle ? styles.rootContainer : customStyle}>
-      <View style={styles.svgContainer}>
-        <Svg
-          height="60%"
-          width="100%"
-          viewBox="0 0 1440 320"
-          style={{position: 'absolute', top: !positionTop ? 210 : positionTop}}
-        >
-          <Path
-            fill={Context.colors.main['5']}
-            d={
-              !customWavePath
-                ? 'M0,160L60,133.3C120,107,240,53,360,58.7C480,64,600,128,720,181.3C840,235,960,277,1080,282.7C1200,288,1320,256,1380,240L1440,224L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z'
-                : customWavePath
-            }
-          />
-        </Svg>
-      </View>
-    </View>
-  );
-};

package/src/components/atoms/static-wave/static-wave.styles.d.ts

@@ -1,14 +0,0 @@
-export function Stylesheet(
-  Context: any,
-  height: any,
-  width: any
-): {
-  rootContainer: {
-    position: 'absolute';
-    width: any;
-  };
-  svgContainer: {
-    backgroundColor: any;
-    height: any;
-  };
-};

package/src/components/atoms/static-wave/static-wave.styles.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import {StyleSheet} from 'react-native';
-
-export const Stylesheet = (Context, height, width) =>
-  StyleSheet.create({
-    rootContainer: {
-      position: 'absolute',
-      width: width,
-    },
-    svgContainer: {
-      backgroundColor: Context.colors.main['5'],
-      height: !height ? 250 : height,
-    },
-  });

package/src/components/atoms/text-input/__snapshots__/text-input.test.js.snap

@@ -1,123 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test input texts show an input field with a border and placeholder text 1`] = `
-<TextInput
-  keyboardType="email-address"
-  onChangeText={[Function]}
-  placeholder="Text input field with a border"
-  placeholderTextColor="#9AA5B1"
-  style={
-    [
-      {
-        "backgroundColor": "#FFFFFF",
-        "borderRadius": 8,
-        "color": "#1F2933",
-        "fontFamily": "SourceSansPro",
-        "fontSize": 16,
-        "height": 44,
-        "justifyContent": "center",
-        "lineHeight": 20,
-        "paddingBottom": 8,
-        "paddingLeft": 16,
-        "paddingRight": 16,
-        "paddingTop": 8,
-        "width": "100%",
-      },
-      {
-        "borderColor": "#E5E8EB",
-        "borderStyle": "solid",
-        "borderWidth": 1,
-      },
-    ]
-  }
-/>
-`;
-
-exports[`test input texts show an input field with a border and without placeholder text 1`] = `
-<TextInput
-  keyboardType="email-address"
-  onChangeText={[Function]}
-  placeholderTextColor="#9AA5B1"
-  style={
-    [
-      {
-        "backgroundColor": "#FFFFFF",
-        "borderRadius": 8,
-        "color": "#1F2933",
-        "fontFamily": "SourceSansPro",
-        "fontSize": 16,
-        "height": 44,
-        "justifyContent": "center",
-        "lineHeight": 20,
-        "paddingBottom": 8,
-        "paddingLeft": 16,
-        "paddingRight": 16,
-        "paddingTop": 8,
-        "width": "100%",
-      },
-      {
-        "borderColor": "#E5E8EB",
-        "borderStyle": "solid",
-        "borderWidth": 1,
-      },
-    ]
-  }
-/>
-`;
-
-exports[`test input texts shows placeholder when provided 1`] = `
-<TextInput
-  keyboardType="default"
-  onChangeText={[Function]}
-  placeholder="dummy placeholder"
-  placeholderTextColor="#9AA5B1"
-  style={
-    [
-      {
-        "backgroundColor": "#FFFFFF",
-        "borderRadius": 8,
-        "color": "#1F2933",
-        "fontFamily": "SourceSansPro",
-        "fontSize": 16,
-        "height": 44,
-        "justifyContent": "center",
-        "lineHeight": 20,
-        "paddingBottom": 8,
-        "paddingLeft": 16,
-        "paddingRight": 16,
-        "paddingTop": 8,
-        "width": "100%",
-      },
-      undefined,
-    ]
-  }
-/>
-`;
-
-exports[`test input texts text input field without placeholder text 1`] = `
-<TextInput
-  keyboardType="email-address"
-  onChangeText={[Function]}
-  placeholderTextColor="#9AA5B1"
-  style={
-    [
-      {
-        "backgroundColor": "#FFFFFF",
-        "borderRadius": 8,
-        "color": "#1F2933",
-        "fontFamily": "SourceSansPro",
-        "fontSize": 16,
-        "height": 44,
-        "justifyContent": "center",
-        "lineHeight": 20,
-        "paddingBottom": 8,
-        "paddingLeft": 16,
-        "paddingRight": 16,
-        "paddingTop": 8,
-        "width": "100%",
-      },
-      undefined,
-    ]
-  }
-/>
-`;

package/src/components/atoms/text-input/text-input.component.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-import { TextInputProps as NativeTextInputProps } from 'react-native';
-import { KeyBoardTypes } from '../../../types/keyboard-types.enum';
-interface TextInputProps extends NativeTextInputProps {
-    keyboardType: KeyBoardTypes;
-    border?: boolean;
-}
-declare const TextInput: ({ keyboardType, border, ...props }: TextInputProps) => React.JSX.Element;
-export { TextInput as TextInput };

package/src/components/atoms/text-input/text-input.component.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import {useContext} from 'react';
-
-import {
-  TextInput as NativeTextInput,
-  TextInputProps as NativeTextInputProps,
-} from 'react-native';
-import {ThemeCtx} from '../../../context/theme.context';
-import {Stylesheet} from './text-input.styles';
-import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
-
-interface TextInputProps extends NativeTextInputProps {
-  keyboardType: KeyBoardTypes;
-  border?: boolean;
-}
-
-const TextInput = ({keyboardType, border, ...props}: TextInputProps) => {
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context, border);
-
-  return (
-    <NativeTextInput
-      placeholderTextColor={context.colors.ui.grey}
-      style={styles.input}
-      keyboardType={keyboardType}
-      {...props}
-    />
-  );
-};
-export {TextInput as TextInput};

package/src/components/atoms/text-input/text-input.preview.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const TextInputPreview: ({}?: {}) => React.JSX.Element;

package/src/components/atoms/text-input/text-input.preview.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import {TextInput} from './text-input.component';
-import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
-import {View} from 'react-native';
-
-export const TextInputPreview = ({} = {}) => {
-  return (
-    <View style={{flex: 1, justifyContent: 'space-around', padding: 32}}>
-      <TextInput
-        onChangeText={(text: string) =>
-          console.log('text is changed to: ' + text)
-        }
-        keyboardType={KeyBoardTypes.DECIMAL_PAD}
-      />
-      <TextInput
-        placeholder={'placeholder text'}
-        onChangeText={(text: string) =>
-          console.log('text is changed to: ' + text)
-        }
-        keyboardType={KeyBoardTypes.DEFAULT}
-      />
-      <TextInput
-        onChangeText={(text: string) =>
-          console.log('text is changed to: ' + text)
-        }
-        keyboardType={KeyBoardTypes.EMAIL_ADDRESS}
-      />
-      <TextInput
-        keyboardType={KeyBoardTypes.DEFAULT}
-        onChangeText={(text: string) => console.log('text: ' + text)}
-        placeholder={'with border'}
-        border={true}
-      />
-      <TextInput
-        keyboardType={KeyBoardTypes.DEFAULT}
-        onChangeText={(text: string) => console.log('text: ' + text)}
-        border={true}
-      />
-    </View>
-  );
-};

package/src/components/atoms/text-input/text-input.styles.d.ts

@@ -1,33 +0,0 @@
-export function Stylesheet(
-  context: any,
-  border: any
-):
-  | StyleSheet.NamedStyles<any>
-  | StyleSheet.NamedStyles<{
-      input: (
-        | {
-            lineHeight: number;
-            color: any;
-            paddingLeft: number;
-            paddingTop: number;
-            paddingRight: number;
-            paddingBottom: number;
-            backgroundColor: any;
-            borderRadius: number;
-            fontFamily: string;
-            fontSize: number;
-            height: number;
-            width: string;
-            justifyContent: string;
-            borderStyle?: undefined;
-            borderWidth?: undefined;
-            borderColor?: undefined;
-          }
-        | {
-            borderStyle: string;
-            borderWidth: number;
-            borderColor: any;
-          }
-      )[];
-    }>;
-import {StyleSheet} from 'react-native/Libraries/StyleSheet/StyleSheet';

package/src/components/atoms/text-input/text-input.styles.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import {StyleSheet} from 'react-native';
-import {Scale} from '../../../theme/scale';
-import {Font} from '../../../theme/font';
-
-export const Stylesheet = (context, border) =>
-  StyleSheet.create({
-    input: [
-      {
-        height: Scale.m * 2.75,
-        width: '100%',
-        justifyContent: 'center',
-        ...Font.medium,
-        lineHeight: 20,
-        color: context.colors.ui.black,
-        paddingLeft: Scale.m,
-        paddingTop: Scale.xs,
-        paddingRight: Scale.m,
-        paddingBottom: Scale.xs,
-        backgroundColor: context.colors.ui.white,
-        borderRadius: Scale.xs,
-      },
-      border && {
-        borderStyle: 'solid',
-        borderWidth: 1,
-        borderColor: context.colors.ui.lightgrey,
-      },
-    ],
-  });

package/src/components/atoms/text-input/text-input.test.js

@@ -1,59 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import {TextInput} from './text-input.component';
-import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
-
-describe('test input texts', () => {
-  it('shows placeholder when provided', () => {
-    const tree = renderer
-      .create(
-        <TextInput
-          keyboardType={KeyBoardTypes.DEFAULT}
-          placeholder="dummy placeholder"
-          onChangeText={() => console.log('text changed')}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('text input field without placeholder text', () => {
-    const tree = renderer
-      .create(
-        <TextInput
-          keyboardType={KeyBoardTypes.EMAIL_ADDRESS}
-          onChangeText={() => console.log('text changed')}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('show an input field with a border and without placeholder text', () => {
-    const tree = renderer
-      .create(
-        <TextInput
-          keyboardType={KeyBoardTypes.EMAIL_ADDRESS}
-          onChangeText={() => console.log('text changed')}
-          border={true}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('show an input field with a border and placeholder text', () => {
-    const tree = renderer
-      .create(
-        <TextInput
-          keyboardType={KeyBoardTypes.EMAIL_ADDRESS}
-          onChangeText={() => console.log('text changed')}
-          border={true}
-          placeholder={'Text input field with a border'}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-});

package/src/components/molecules/amount/amount.component.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { ImageSourcePropType } from 'react-native';
-interface AmountProps {
-    initialAmount: number;
-    image?: ImageSourcePropType;
-    label: string;
-    description?: string;
-    onSave: (num: number) => void;
-    readonly: boolean;
-}
-export declare const Amount: ({ initialAmount, image, label, description, onSave, readonly, }: AmountProps) => React.JSX.Element;
-export {};