Merge pull request #89 from XRPL-Labs/develop

v2.6.0

.cosmos/cosmos.app.tsx

@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import { Navigation } from 'react-native-navigation';
+import { NativeFixtureLoader } from 'react-cosmos-native';
+import { rendererConfig, moduleWrappers } from './cosmos.imports';
+
+class CosmosApp extends Component {
+    render() {
+        return (
+            <View
+                style={{
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    paddingHorizontal: 10,
+                    paddingVertical: 10,
+                }}
+            >
+                {NativeFixtureLoader({
+                    rendererConfig,
+                    moduleWrappers,
+                })}
+            </View>
+        );
+    }
+}
+
+Navigation.registerComponent('Cosmos.UI', () => CosmosApp);
+
+Navigation.events().registerAppLaunchedListener(async () => {
+    Navigation.setRoot({
+        root: {
+            stack: {
+                children: [
+                    {
+                        component: {
+                            name: 'Cosmos.UI',
+                            options: {
+                                topBar: {
+                                    visible: false,
+                                },
+                            },
+                        },
+                    },
+                ],
+            },
+        },
+    });
+});
+
+export default CosmosApp;

.cosmos/cosmos.config.json

@@ -0,0 +1,4 @@
+{
+  "fixturesDir": "fixtures",
+  "globalImports": ["./prepare.ts"]
+}

.cosmos/cosmos.imports.ts

@@ -0,0 +1,37 @@
+// This file is automatically generated by Cosmos. Add it to .gitignore and
+// only edit if you know what you're doing.
+
+import { RendererConfig, UserModuleWrappers } from 'react-cosmos-core';
+
+import './prepare';
+
+import * as fixture0 from './fixtures/XAppShortList.fixture';
+import * as fixture1 from './fixtures/SegmentButton.fixture';
+import * as fixture2 from './fixtures/AccountElement.fixture';
+import * as fixture3 from './fixtures/InfoMessage.fixture';
+import * as fixture4 from './fixtures/Badge.fixture';
+import * as fixture5 from './fixtures/Avatar.fixture';
+import * as fixture6 from './fixtures/AmountText.fixture';
+
+export const rendererConfig: RendererConfig = {
+    playgroundUrl: 'http://localhost:5001',
+    rendererUrl: null,
+};
+
+const fixtures = {
+    'fixtures/XAppShortList.fixture.tsx': { module: fixture0 },
+    'fixtures/SegmentButton.fixture.tsx': { module: fixture1 },
+    'fixtures/AccountElement.fixture.tsx': { module: fixture2 },
+    'fixtures/InfoMessage.fixture.tsx': { module: fixture3 },
+    'fixtures/Badge.fixture.tsx': { module: fixture4 },
+    'fixtures/Avatar.fixture.tsx': { module: fixture5 },
+    'fixtures/AmountText.fixture.tsx': { module: fixture6 },
+};
+
+const decorators = {};
+
+export const moduleWrappers: UserModuleWrappers = {
+    lazy: false,
+    fixtures,
+    decorators,
+};

.cosmos/fixtures/AccountElement.fixture.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { AccountElement } from '@components/Modules/AccountElement';
+
+const RECIPIENT_DATA = {
+    id: 'id',
+    address: 'rwiETSee2wMz3SBnAG8hkMsCgvGy9LWbZ1',
+    name: 'Wietse',
+    source: 'contacts',
+};
+
+const onPressMock = () => {
+    console.log('RecipientElement onPress');
+};
+
+export default {
+    Original: <AccountElement address={RECIPIENT_DATA.address} info={RECIPIENT_DATA} onPress={onPressMock} />,
+    WithSource: (
+        <AccountElement
+            address={RECIPIENT_DATA.address}
+            info={{ ...RECIPIENT_DATA, source: 'internal:bithomp.com' }}
+            onPress={onPressMock}
+        />
+    ),
+};

.cosmos/fixtures/AmountText.fixture.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { AmountText } from '@components/General/AmountText';
+
+import withPropsCombinations from '../matrix';
+
+const VALUES = ['0.00000000000001', '2.2222', '99999.123456'];
+
+export default {
+    original: withPropsCombinations(AmountText, {
+        value: VALUES,
+    }),
+    withPrefix: withPropsCombinations(AmountText, {
+        value: VALUES,
+        prefix: ['-'],
+    }),
+
+    withCurrency: withPropsCombinations(AmountText, {
+        value: VALUES,
+        currency: ['USD'],
+    }),
+
+    discreet: <AmountText currency="USD" value="123" discreet />,
+};

.cosmos/fixtures/Avatar.fixture.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Avatar } from '@components/General/Avatar';
+
+const URI = { uri: 'https://xumm.app/_nuxt/team-peter.de2cdd6b.png' };
+
+export default {
+    Original: <Avatar source={URI} />,
+    'With Border': <Avatar source={URI} border />,
+    Big: <Avatar source={URI} size={100} />,
+    'With Badge': <Avatar source={URI} size={100} badge="IconCheckXaman" />,
+    'With Badge Color': <Avatar source={URI} size={100} badge="IconAlertTriangle" badgeColor="red" />,
+};

.cosmos/fixtures/Badge.fixture.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { Badge } from '@components/General/Badge';
+import withPropsCombinations from '../matrix';
+
+const SIZES = ['small', 'medium', 'large'];
+
+export default {
+    Bithomp: withPropsCombinations(Badge, {
+        size: SIZES,
+        type: ['bithomp'],
+    }),
+
+    XRPScan: withPropsCombinations(Badge, {
+        size: SIZES,
+        type: ['xrpscan'],
+    }),
+
+    XRPLNS: withPropsCombinations(Badge, {
+        size: SIZES,
+        type: ['xrplns'],
+    }),
+
+    PayId: withPropsCombinations(Badge, {
+        size: SIZES,
+        type: ['payid'],
+    }),
+
+    Success: withPropsCombinations(Badge, {
+        size: SIZES,
+        type: ['success'],
+    }),
+};

.cosmos/fixtures/InfoMessage.fixture.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { InfoMessage } from '@components/General/InfoMessage';
+import withPropsCombinations from '../matrix';
+
+const TYPES = ['info', 'warning', 'error', 'success', 'neutral'];
+const label = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry';
+
+export default {
+    All: withPropsCombinations(InfoMessage, {
+        type: TYPES,
+        label: [label],
+        icon: ['IconInfo'],
+    }),
+
+    Flat: withPropsCombinations(InfoMessage, {
+        type: TYPES,
+        label: [label],
+        icon: ['IconInfo'],
+        flat: [true],
+    }),
+
+    'With More info': withPropsCombinations(InfoMessage, {
+        type: TYPES,
+        label: [label],
+        icon: ['IconInfo'],
+        onMoreButtonPress: [() => {}],
+    }),
+};

.cosmos/fixtures/SegmentButton.fixture.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { SegmentButton } from '@components/General/SegmentButton';
+
+const BUTTONS = ['All', 'Planned', 'Requests'];
+
+export default (
+    <SegmentButton
+        buttons={BUTTONS}
+        onPress={() => {
+            console.log('Pressed');
+        }}
+    />
+);

src/components/Modules/__stories__/XAppList.stories.tsx → .cosmos/fixtures/XAppShortList.fixture.tsx

@@ -1,10 +1,6 @@
-/* eslint-disable spellcheck/spell-checker */
 import React from 'react';
-import { storiesOf } from '@storybook/react-native';
 
-import { withContainer } from '../../../../storybook/decoration';
-
-import { XAppShortList } from '../XAppShortList';
+import { XAppShortList } from '@components/Modules/XAppShortList';
 
 const apps = [
     {
@@ -33,6 +29,4 @@ const apps = [
     },
 ];
 
-storiesOf('XAppList', module)
-    .addDecorator(withContainer)
-    .add('default', () => <XAppShortList apps={apps} />);
+export default <XAppShortList apps={apps} />;

.cosmos/matrix/index.tsx

@@ -0,0 +1,65 @@
+import React, { ReactNode } from 'react';
+import { View } from 'react-native';
+
+type VariationsByField = {
+    [key: string]: any[];
+};
+
+type CreatedElementProps = {
+    [key: string]: any;
+};
+
+const flatMap = (arr: any[], fn: (item: any) => any[]): any[] => arr.map(fn).reduce((a, b) => a.concat(b), []);
+
+const combinations = (variationsByField: VariationsByField): CreatedElementProps[] => {
+    const fieldNames = Object.keys(variationsByField);
+
+    if (!fieldNames.length) return [{}];
+
+    const _combinations = (fieldNamesList: string[], acc: CreatedElementProps): CreatedElementProps[] => {
+        const fieldName = fieldNamesList[0];
+        const restFieldNames = fieldNamesList.slice(1);
+
+        const variationsForField = variationsByField[fieldName];
+
+        if (!Array.isArray(variationsForField) || !variationsForField.length) {
+            throw new Error(`Please provide a non-empty array of possible values for prop ${fieldName}`);
+        }
+
+        const vs = variationsForField.map((fieldValue) => ({ ...acc, [fieldName]: fieldValue }));
+
+        if (!restFieldNames.length) {
+            return vs;
+        }
+        return flatMap(vs, (newAcc) => _combinations(restFieldNames, newAcc));
+    };
+
+    return _combinations(fieldNames, {});
+};
+
+const createElement = (Component: any, props: CreatedElementProps): ReactNode => {
+    return (
+        <View style={{ marginTop: 10, alignSelf: 'stretch' }} key={Math.random().toString()}>
+            {React.createElement(Component, props)}
+        </View>
+    );
+};
+
+const withPropsCombinations = (component: any, possibleValuesByPropName: VariationsByField) => {
+    const propsCombinations = combinations(possibleValuesByPropName);
+
+    return (
+        <View
+            style={{
+                flex: 1,
+                justifyContent: 'center',
+                alignItems: 'center',
+                alignSelf: 'stretch',
+            }}
+        >
+            {propsCombinations.map((props, i) => createElement(component, { ...props, key: i }))}
+        </View>
+    );
+};
+
+export default withPropsCombinations;

.cosmos/prepare.ts

@@ -0,0 +1,41 @@
+import Locale from '../src/locale';
+
+import NetworkService from '../src/services/NetworkService';
+import { Amendments } from '../src/common/constants';
+
+// set local
+Locale.setLocale('EN');
+
+// set connected network
+// @ts-ignore
+NetworkService.network = {
+    baseReserve: 10,
+    ownerReserve: 2,
+    isFeatureEnabled(amendment: keyof typeof Amendments): boolean {
+        return true;
+    },
+    definitions: {},
+    nativeAsset: {
+        asset: 'XRP',
+        icon: '',
+        iconSquare: '',
+        set: function (element: { [key: string]: unknown }): Realm.DictionaryBase<unknown> {
+            throw new Error('Function not implemented.');
+        },
+        remove: function (key: string | string[]): Realm.DictionaryBase<unknown> {
+            throw new Error('Function not implemented.');
+        },
+        addListener: function (callback: Realm.DictionaryChangeCallback): void {
+            throw new Error('Function not implemented.');
+        },
+        removeListener: function (callback: Realm.DictionaryChangeCallback): void {
+            throw new Error('Function not implemented.');
+        },
+        removeAllListeners: function (): void {
+            throw new Error('Function not implemented.');
+        },
+        toJSON: function (): Record<string, unknown> {
+            throw new Error('Function not implemented.');
+        },
+    },
+};