diff options
Diffstat (limited to 'app/components')
49 files changed, 955 insertions, 702 deletions
diff --git a/app/components/auto-image/auto-image.story.tsx b/app/components/auto-image/auto-image.story.tsx index f7ecc86..76e9dab 100644 --- a/app/components/auto-image/auto-image.story.tsx +++ b/app/components/auto-image/auto-image.story.tsx @@ -1,31 +1,37 @@ /* eslint-disable */ -import * as React from "react" -import { storiesOf } from "@storybook/react-native" -import { StoryScreen, Story, UseCase } from "../../../storybook/views" -import { AutoImage } from "./auto-image" +import * as React from 'react' +import { storiesOf } from '@storybook/react-native' +import { StoryScreen, Story, UseCase } from '../../../storybook/views' +import { AutoImage } from './auto-image' declare let module -const bowser = require("../../screens/welcome/bowser.png") -const morty = { uri: "https://rickandmortyapi.com/api/character/avatar/2.jpeg" } +const bowser = require('../../screens/welcome/bowser.png') +const morty = { uri: 'https://rickandmortyapi.com/api/character/avatar/2.jpeg' } -storiesOf("AutoImage", module) +storiesOf('AutoImage', module) .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add("Style Presets", () => ( + .add('Style Presets', () => ( <Story> <UseCase text="With require()"> <AutoImage source={bowser} /> <AutoImage source={bowser} style={{ width: 150 }} /> <AutoImage source={bowser} style={{ width: 150, height: 150 }} /> <AutoImage source={bowser} style={{ height: 150 }} /> - <AutoImage source={bowser} style={{ height: 150, resizeMode: "contain" }} /> + <AutoImage + source={bowser} + style={{ height: 150, resizeMode: 'contain' }} + /> </UseCase> <UseCase text="With URL"> <AutoImage source={morty} /> <AutoImage source={morty} style={{ width: 150 }} /> <AutoImage source={morty} style={{ width: 150, height: 150 }} /> <AutoImage source={morty} style={{ height: 150 }} /> - <AutoImage source={morty} style={{ height: 150, resizeMode: "contain" }} /> + <AutoImage + source={morty} + style={{ height: 150, resizeMode: 'contain' }} + /> </UseCase> </Story> )) diff --git a/app/components/auto-image/auto-image.tsx b/app/components/auto-image/auto-image.tsx index 39d71ca..a8bfe37 100644 --- a/app/components/auto-image/auto-image.tsx +++ b/app/components/auto-image/auto-image.tsx @@ -1,10 +1,10 @@ -import React, { useLayoutEffect, useState } from "react" +import React, { useLayoutEffect, useState } from 'react' import { Image as RNImage, ImageProps as DefaultImageProps, ImageURISource, Platform, -} from "react-native" +} from 'react-native' type ImageProps = DefaultImageProps & { source: ImageURISource @@ -31,7 +31,7 @@ export function AutoImage(props: ImageProps) { RNImage.getSize(props.source.uri as any, (width, height) => { setImageSize({ width, height }) }) - } else if (Platform.OS === "web") { + } else if (Platform.OS === 'web') { // web requires a different method to get it's size RNImage.getSize(props.source as any, (width, height) => { setImageSize({ width, height }) diff --git a/app/components/bullet-item/bullet-item.tsx b/app/components/bullet-item/bullet-item.tsx index d999e10..f6b2f17 100644 --- a/app/components/bullet-item/bullet-item.tsx +++ b/app/components/bullet-item/bullet-item.tsx @@ -1,15 +1,15 @@ -import * as React from "react" -import { View, ViewStyle, ImageStyle, TextStyle } from "react-native" -import { Text } from "../text/text" -import { Icon } from "../icon/icon" -import { spacing, typography } from "../../theme" +import * as React from 'react' +import { View, ViewStyle, ImageStyle, TextStyle } from 'react-native' +import { Text } from '../text/text' +import { Icon } from '../icon/icon' +import { spacing, typography } from '../../theme' const BULLET_ITEM: ViewStyle = { - flexDirection: "row", + flexDirection: 'row', marginTop: spacing[4], paddingBottom: spacing[4], borderBottomWidth: 1, - borderBottomColor: "#3A3048", + borderBottomColor: '#3A3048', } const BULLET_CONTAINER: ViewStyle = { marginRight: spacing[4] - 1, @@ -22,7 +22,7 @@ const BULLET: ImageStyle = { const BULLET_TEXT: TextStyle = { flex: 1, fontFamily: typography.primary, - color: "#BAB6C8", + color: '#BAB6C8', fontSize: 15, lineHeight: 22, } diff --git a/app/components/button/button.presets.ts b/app/components/button/button.presets.ts index b140fd2..bc0ad3f 100644 --- a/app/components/button/button.presets.ts +++ b/app/components/button/button.presets.ts @@ -1,5 +1,5 @@ -import { ViewStyle, TextStyle } from "react-native" -import { color, spacing } from "../../theme" +import { ViewStyle, TextStyle } from 'react-native' +import { color, spacing } from '../../theme' /** * All text will start off looking like this. @@ -8,8 +8,8 @@ const BASE_VIEW: ViewStyle = { paddingVertical: spacing[2], paddingHorizontal: spacing[2], borderRadius: 4, - justifyContent: "center", - alignItems: "center", + justifyContent: 'center', + alignItems: 'center', } const BASE_TEXT: TextStyle = { @@ -34,12 +34,16 @@ export const viewPresets: Record<string, ViewStyle> = { ...BASE_VIEW, paddingHorizontal: 0, paddingVertical: 0, - alignItems: "flex-start", + alignItems: 'flex-start', } as ViewStyle, } export const textPresets: Record<ButtonPresetNames, TextStyle> = { - primary: { ...BASE_TEXT, fontSize: 9, color: color.palette.white } as TextStyle, + primary: { + ...BASE_TEXT, + fontSize: 9, + color: color.palette.white, + } as TextStyle, link: { ...BASE_TEXT, color: color.text, diff --git a/app/components/button/button.props.ts b/app/components/button/button.props.ts index 1377a7e..5f26136 100644 --- a/app/components/button/button.props.ts +++ b/app/components/button/button.props.ts @@ -1,6 +1,11 @@ -import { StyleProp, TextStyle, TouchableOpacityProps, ViewStyle } from "react-native" -import { ButtonPresetNames } from "./button.presets" -import { TxKeyPath } from "../../i18n" +import { + StyleProp, + TextStyle, + TouchableOpacityProps, + ViewStyle, +} from 'react-native' +import { ButtonPresetNames } from './button.presets' +import { TxKeyPath } from '../../i18n' export interface ButtonProps extends TouchableOpacityProps { /** diff --git a/app/components/button/button.story.tsx b/app/components/button/button.story.tsx index 4861772..5dc21c1 100644 --- a/app/components/button/button.story.tsx +++ b/app/components/button/button.story.tsx @@ -1,30 +1,48 @@ -import * as React from "react" -import { ViewStyle, TextStyle, Alert } from "react-native" -import { storiesOf } from "@storybook/react-native" -import { StoryScreen, Story, UseCase } from "../../../storybook/views" -import { Button } from "./button" +import * as React from 'react' +import { ViewStyle, TextStyle, Alert } from 'react-native' +import { storiesOf } from '@storybook/react-native' +import { StoryScreen, Story, UseCase } from '../../../storybook/views' +import { Button } from './button' declare let module -const buttonStyleArray: ViewStyle[] = [{ paddingVertical: 100 }, { borderRadius: 0 }] +const buttonStyleArray: ViewStyle[] = [ + { paddingVertical: 100 }, + { borderRadius: 0 }, +] -const buttonTextStyleArray: TextStyle[] = [{ fontSize: 20 }, { color: "#a511dc" }] +const buttonTextStyleArray: TextStyle[] = [ + { fontSize: 20 }, + { color: '#a511dc' }, +] -storiesOf("Button", module) +storiesOf('Button', module) .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add("Style Presets", () => ( + .add('Style Presets', () => ( <Story> <UseCase text="Primary" usage="The primary button."> - <Button text="Click It" preset="primary" onPress={() => Alert.alert("pressed")} /> + <Button + text="Click It" + preset="primary" + onPress={() => Alert.alert('pressed')} + /> </UseCase> - <UseCase text="Disabled" usage="The disabled behaviour of the primary button."> - <Button text="Click It" preset="primary" onPress={() => Alert.alert("pressed")} disabled /> + <UseCase + text="Disabled" + usage="The disabled behaviour of the primary button." + > + <Button + text="Click It" + preset="primary" + onPress={() => Alert.alert('pressed')} + disabled + /> </UseCase> <UseCase text="Array Style" usage="Button with array style"> <Button text="Click It" preset="primary" - onPress={() => Alert.alert("pressed")} + onPress={() => Alert.alert('pressed')} style={buttonStyleArray} textStyle={buttonTextStyleArray} /> diff --git a/app/components/button/button.tsx b/app/components/button/button.tsx index a5662ff..03b8f85 100644 --- a/app/components/button/button.tsx +++ b/app/components/button/button.tsx @@ -1,8 +1,8 @@ -import * as React from "react" -import { TouchableOpacity } from "react-native" -import { Text } from "../text/text" -import { viewPresets, textPresets } from "./button.presets" -import { ButtonProps } from "./button.props" +import * as React from 'react' +import { TouchableOpacity } from 'react-native' +import { Text } from '../text/text' +import { viewPresets, textPresets } from './button.presets' +import { ButtonProps } from './button.props' /** * For your text displaying needs. @@ -12,7 +12,7 @@ import { ButtonProps } from "./button.props" export function Button(props: ButtonProps) { // grab the props const { - preset = "primary", + preset = 'primary', tx, text, style: styleOverride, diff --git a/app/components/checkbox/checkbox.props.ts b/app/components/checkbox/checkbox.props.ts index 01a13d0..4a212e3 100644 --- a/app/components/checkbox/checkbox.props.ts +++ b/app/components/checkbox/checkbox.props.ts @@ -1,5 +1,5 @@ -import { StyleProp, ViewStyle } from "react-native" -import { TxKeyPath } from "../../i18n" +import { StyleProp, ViewStyle } from 'react-native' +import { TxKeyPath } from '../../i18n' export interface CheckboxProps { /** diff --git a/app/components/checkbox/checkbox.story.tsx b/app/components/checkbox/checkbox.story.tsx index f8d80d8..9d1429a 100644 --- a/app/components/checkbox/checkbox.story.tsx +++ b/app/components/checkbox/checkbox.story.tsx @@ -1,26 +1,37 @@ /* eslint-disable react-native/no-inline-styles */ /* eslint-disable react-native/no-color-literals */ -import * as React from "react" -import { View, ViewStyle } from "react-native" -import { storiesOf } from "@storybook/react-native" -import { StoryScreen, Story, UseCase } from "../../../storybook/views" -import { Checkbox } from "./checkbox" -import { Toggle } from "react-powerplug" +import * as React from 'react' +import { View, ViewStyle } from 'react-native' +import { storiesOf } from '@storybook/react-native' +import { StoryScreen, Story, UseCase } from '../../../storybook/views' +import { Checkbox } from './checkbox' +import { Toggle } from 'react-powerplug' declare let module -const arrayStyle: ViewStyle[] = [{ paddingVertical: 40 }, { alignSelf: "flex-end" }] -const arrayOutlineStyle: ViewStyle[] = [{ borderColor: "#b443c9" }, { borderWidth: 25 }] -const arrayFillStyle: ViewStyle[] = [{ backgroundColor: "#55e0ff" }] +const arrayStyle: ViewStyle[] = [ + { paddingVertical: 40 }, + { alignSelf: 'flex-end' }, +] +const arrayOutlineStyle: ViewStyle[] = [ + { borderColor: '#b443c9' }, + { borderWidth: 25 }, +] +const arrayFillStyle: ViewStyle[] = [{ backgroundColor: '#55e0ff' }] -storiesOf("Checkbox", module) +storiesOf('Checkbox', module) .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add("Behaviour", () => ( + .add('Behaviour', () => ( <Story> - <UseCase text="The Checkbox" usage="Use the checkbox to represent on/off states."> + <UseCase + text="The Checkbox" + usage="Use the checkbox to represent on/off states." + > <Toggle initial={false}> - {({ on, toggle }) => <Checkbox value={on} onToggle={toggle} text="Toggle me" />} + {({ on, toggle }) => ( + <Checkbox value={on} onToggle={toggle} text="Toggle me" /> + )} </Toggle> </UseCase> <UseCase text="value = true" usage="This is permanently on."> @@ -31,7 +42,7 @@ storiesOf("Checkbox", module) </UseCase> </Story> )) - .add("Styling", () => ( + .add('Styling', () => ( <Story> <UseCase text="multiline = true" usage="For really really long text"> <Toggle initial={false}> @@ -55,7 +66,7 @@ storiesOf("Checkbox", module) text="Hello there!" value={on} style={{ - backgroundColor: "purple", + backgroundColor: 'purple', marginLeft: 40, paddingVertical: 30, paddingLeft: 60, @@ -74,7 +85,7 @@ storiesOf("Checkbox", module) text="Outline is the box frame" value={on} outlineStyle={{ - borderColor: "green", + borderColor: 'green', borderRadius: 10, borderWidth: 4, width: 60, @@ -93,7 +104,7 @@ storiesOf("Checkbox", module) <Checkbox text="Fill er up" value={on} - fillStyle={{ backgroundColor: "red", borderRadius: 8 }} + fillStyle={{ backgroundColor: 'red', borderRadius: 8 }} onToggle={toggle} /> </View> diff --git a/app/components/checkbox/checkbox.tsx b/app/components/checkbox/checkbox.tsx index fc3992a..d788114 100644 --- a/app/components/checkbox/checkbox.tsx +++ b/app/components/checkbox/checkbox.tsx @@ -1,13 +1,13 @@ -import * as React from "react" -import { TextStyle, TouchableOpacity, View, ViewStyle } from "react-native" -import { Text } from "../text/text" -import { color, spacing } from "../../theme" -import { CheckboxProps } from "./checkbox.props" +import * as React from 'react' +import { TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native' +import { Text } from '../text/text' +import { color, spacing } from '../../theme' +import { CheckboxProps } from './checkbox.props' const ROOT: ViewStyle = { - flexDirection: "row", + flexDirection: 'row', paddingVertical: spacing[1], - alignSelf: "flex-start", + alignSelf: 'flex-start', } const DIMENSIONS = { width: 16, height: 16 } @@ -15,8 +15,8 @@ const DIMENSIONS = { width: 16, height: 16 } const OUTLINE: ViewStyle = { ...DIMENSIONS, marginTop: 2, // finicky and will depend on font/line-height/baseline/weather - justifyContent: "center", - alignItems: "center", + justifyContent: 'center', + alignItems: 'center', borderWidth: 1, borderColor: color.primaryDarker, borderRadius: 1, @@ -37,7 +37,9 @@ export function Checkbox(props: CheckboxProps) { const outlineStyle = [OUTLINE, props.outlineStyle] const fillStyle = [FILL, props.fillStyle] - const onPress = props.onToggle ? () => props.onToggle && props.onToggle(!props.value) : null + const onPress = props.onToggle + ? () => props.onToggle && props.onToggle(!props.value) + : null return ( <TouchableOpacity @@ -46,8 +48,15 @@ export function Checkbox(props: CheckboxProps) { onPress={onPress} style={rootStyle} > - <View style={outlineStyle}>{props.value && <View style={fillStyle} />}</View> - <Text text={props.text} tx={props.tx} numberOfLines={numberOfLines} style={LABEL} /> + <View style={outlineStyle}> + {props.value && <View style={fillStyle} />} + </View> + <Text + text={props.text} + tx={props.tx} + numberOfLines={numberOfLines} + style={LABEL} + /> </TouchableOpacity> ) } diff --git a/app/components/form-row/form-row.presets.ts b/app/components/form-row/form-row.presets.ts index 7c10294..0c796c2 100644 --- a/app/components/form-row/form-row.presets.ts +++ b/app/components/form-row/form-row.presets.ts @@ -1,5 +1,5 @@ -import { ViewStyle } from "react-native" -import { color, spacing } from "../../theme" +import { ViewStyle } from 'react-native' +import { color, spacing } from '../../theme' /** * The size of the border radius. diff --git a/app/components/form-row/form-row.props.tsx b/app/components/form-row/form-row.props.tsx index f010206..55b632e 100644 --- a/app/components/form-row/form-row.props.tsx +++ b/app/components/form-row/form-row.props.tsx @@ -1,6 +1,6 @@ -import * as React from "react" -import { StyleProp, ViewStyle } from "react-native" -import { FormRowPresets } from "./form-row.presets" +import * as React from 'react' +import { StyleProp, ViewStyle } from 'react-native' +import { FormRowPresets } from './form-row.presets' /** * The properties you can pass to FormRow. diff --git a/app/components/form-row/form-row.story.tsx b/app/components/form-row/form-row.story.tsx index 509afbb..97e43a2 100644 --- a/app/components/form-row/form-row.story.tsx +++ b/app/components/form-row/form-row.story.tsx @@ -1,23 +1,23 @@ /* eslint-disable react-native/no-inline-styles */ /* eslint-disable react-native/no-color-literals */ -import * as React from "react" -import { storiesOf } from "@storybook/react-native" -import { StoryScreen, Story, UseCase } from "../../../storybook/views" -import { Text, FormRow } from "../" -import { color } from "../../theme/color" -import { ViewStyle } from "react-native" +import * as React from 'react' +import { storiesOf } from '@storybook/react-native' +import { StoryScreen, Story, UseCase } from '../../../storybook/views' +import { Text, FormRow } from '../' +import { color } from '../../theme/color' +import { ViewStyle } from 'react-native' declare let module const TEXT_STYLE_OVERRIDE = { color: color.storybookTextColor, } -const arrayStyle: ViewStyle[] = [{ borderWidth: 5 }, { borderColor: "#32cd32" }] +const arrayStyle: ViewStyle[] = [{ borderWidth: 5 }, { borderColor: '#32cd32' }] -storiesOf("FormRow", module) +storiesOf('FormRow', module) .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add("Assembled", () => ( + .add('Assembled', () => ( <Story> <UseCase text="Fully Assembled" @@ -30,9 +30,10 @@ storiesOf("FormRow", module) </FormRow> <FormRow preset="middle"> <Text style={TEXT_STYLE_OVERRIDE}> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi officia quo rerum - impedit asperiores hic ex quae, quam dolores vel odit doloribus, tempore atque deserunt - possimus incidunt, obcaecati numquam officiis. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi + officia quo rerum impedit asperiores hic ex quae, quam dolores vel + odit doloribus, tempore atque deserunt possimus incidunt, obcaecati + numquam officiis. </Text> </FormRow> <FormRow preset="middle"> @@ -47,20 +48,25 @@ storiesOf("FormRow", module) <UseCase text="Alternatives" usage="Less commonly used presets."> <FormRow preset="clear"> <Text style={TEXT_STYLE_OVERRIDE}> - My borders are still there, but they are clear. This causes the text to still align - properly due to the box model of flexbox. + My borders are still there, but they are clear. This causes the text + to still align properly due to the box model of flexbox. </Text> </FormRow> <FormRow preset="soloRound"> <Text style={TEXT_STYLE_OVERRIDE}>I'm round</Text> </FormRow> - <FormRow preset="soloStraight" style={{ marginTop: 10, backgroundColor: "#ffe" }}> - <Text style={TEXT_STYLE_OVERRIDE}>I'm square and have a custom style.</Text> + <FormRow + preset="soloStraight" + style={{ marginTop: 10, backgroundColor: '#ffe' }} + > + <Text style={TEXT_STYLE_OVERRIDE}> + I'm square and have a custom style. + </Text> </FormRow> </UseCase> </Story> )) - .add("Presets", () => ( + .add('Presets', () => ( <Story> <UseCase text="top" usage="The top of a form."> <FormRow preset="top"> @@ -70,7 +76,9 @@ storiesOf("FormRow", module) </UseCase> <UseCase text="middle" usage="A row in the middle of a form."> <FormRow preset="middle"> - <Text style={TEXT_STYLE_OVERRIDE}>No curves and empty at the bottom.</Text> + <Text style={TEXT_STYLE_OVERRIDE}> + No curves and empty at the bottom. + </Text> </FormRow> </UseCase> <UseCase text="bottom" usage="The bottom of a form."> @@ -96,7 +104,7 @@ storiesOf("FormRow", module) </UseCase> </Story> )) - .add("Styling", () => ( + .add('Styling', () => ( <Story> <UseCase text="Style array" usage="Form row with an array of styles"> <FormRow preset="soloStraight" style={arrayStyle}> diff --git a/app/components/form-row/form-row.tsx b/app/components/form-row/form-row.tsx index 2045336..c6453bc 100644 --- a/app/components/form-row/form-row.tsx +++ b/app/components/form-row/form-row.tsx @@ -1,7 +1,7 @@ -import * as React from "react" -import { View } from "react-native" -import { PRESETS } from "./form-row.presets" -import { FormRowProps } from "./form-row.props" +import * as React from 'react' +import { View } from 'react-native' +import { PRESETS } from './form-row.presets' +import { FormRowProps } from './form-row.props' /** * A horizontal container component used to hold a row of a form. diff --git a/app/components/graph-ui/graph-ui.story.tsx b/app/components/graph-ui/graph-ui.story.tsx index 71151c8..7564c93 100644 --- a/app/components/graph-ui/graph-ui.story.tsx +++ b/app/components/graph-ui/graph-ui.story.tsx @@ -1,12 +1,12 @@ -import * as React from "react" -import { storiesOf } from "@storybook/react-native" -import { StoryScreen, Story, UseCase } from "../../../storybook/views" -import { color } from "../../theme" -import { GraphUi } from "./graph-ui" +import * as React from 'react' +import { storiesOf } from '@storybook/react-native' +import { StoryScreen, Story, UseCase } from '../../../storybook/views' +import { color } from '../../theme' +import { GraphUi } from './graph-ui' -storiesOf("GraphUi", module) +storiesOf('GraphUi', module) .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add("Style Presets", () => ( + .add('Style Presets', () => ( <Story> <UseCase text="Primary" usage="The primary."> <GraphUi style={{ backgroundColor: color.error }} /> diff --git a/app/components/graph-ui/graph-ui.tsx b/app/components/graph-ui/graph-ui.tsx index 9ea792a..36a675a 100644 --- a/app/components/graph-ui/graph-ui.tsx +++ b/app/components/graph-ui/graph-ui.tsx @@ -1,12 +1,12 @@ -import * as React from "react" -import { StyleProp, TextStyle, View, ViewStyle } from "react-native" -import { observer } from "mobx-react-lite" -import { color, typography } from "../../theme" -import { LocalButton, Text, Tweaks } from "../" -import { flatten } from "ramda" +import * as React from 'react' +import { StyleProp, TextStyle, View, ViewStyle } from 'react-native' +import { observer } from 'mobx-react-lite' +import { color, typography } from '../../theme' +import { LocalButton, Text, Tweaks } from '../' +import { flatten } from 'ramda' const CONTAINER: ViewStyle = { - justifyContent: "center", + justifyContent: 'center', } const TEXT: TextStyle = { @@ -20,8 +20,8 @@ export interface GraphUiProps { * An optional style override useful for padding & margin. */ style?: StyleProp<ViewStyle> - physics - setPhysics + physics + setPhysics } /** @@ -32,9 +32,17 @@ export const GraphUi = observer(function GraphUi(props: GraphUiProps) { const styles = flatten([CONTAINER, style]) return ( - <View style={{height: "100%", width: "100%", borderStyle: "solid", borderWidth: 5,position:"relative"}}> - <Tweaks physics={physics} setPhysics={setPhysics} /> - <LocalButton physics={physics} setPhysics={setPhysics}/> + <View + style={{ + height: '100%', + width: '100%', + borderStyle: 'solid', + borderWidth: 5, + position: 'relative', + }} + > + <Tweaks physics={physics} setPhysics={setPhysics} /> + <LocalButton physics={physics} setPhysics={setPhysics} /> </View> ) }) diff --git a/app/components/graph/graph.story.tsx b/app/components/graph/graph.story.tsx index e5385e6..3b094d9 100644 --- a/app/components/graph/graph.story.tsx +++ b/app/components/graph/graph.story.tsx @@ -1,12 +1,12 @@ -import * as React from "react" -import { storiesOf } from "@storybook/react-native" -import { StoryScreen, Story, UseCase } from "../../../storybook/views" -import { color } from "../../theme" -import { Graph } from "./graph" +import * as React from 'react' +import { storiesOf } from '@storybook/react-native' +import { StoryScreen, Story, UseCase } from '../../../storybook/views' +import { color } from '../../theme' +import { Graph } from './graph' -storiesOf("Graph", module) +storiesOf('Graph', module) .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add("Style Presets", () => ( + .add('Style Presets', () => ( <Story> <UseCase text="Primary" usage="The primary."> <Graph style={{ backgroundColor: color.error }} /> diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx index 5e68c3f..7b175a1 100644 --- a/app/components/graph/graph.tsx +++ b/app/components/graph/graph.tsx @@ -1,22 +1,27 @@ -import * as React from "react" -import { useState, useEffect, useRef, useMemo, useCallback } from "react" -import { StyleProp, TextStyle, View, ViewStyle } from "react-native" -import { observer } from "mobx-react-lite" -import { color, typography } from "../../theme" -import { Text } from "../" -import { flatten } from "ramda" +import * as React from 'react' +import { useState, useEffect, useRef, useMemo, useCallback } from 'react' +import { StyleProp, TextStyle, View, ViewStyle } from 'react-native' +import { observer } from 'mobx-react-lite' +import { color, typography } from '../../theme' +import { Text } from '../' +import { flatten } from 'ramda' //import data from "../../data/miserables.json" //import genRandomTree from "../../data/randomdata"; //import gData from "../../data/rando.json" -import { ForceGraph2D, ForceGraph3D, ForceGraphVR, ForceGraphAR } from "react-force-graph" -import * as d3 from "d3-force-3d" +import { + ForceGraph2D, + ForceGraph3D, + ForceGraphVR, + ForceGraphAR, +} from 'react-force-graph' +import * as d3 from 'd3-force-3d' //import * as three from "three" -import SpriteText from "three-spritetext" +import SpriteText from 'three-spritetext' const CONTAINER: ViewStyle = { - justifyContent: "center", + justifyContent: 'center', } const TEXT: TextStyle = { @@ -35,16 +40,25 @@ export interface GraphProps { setPhysics nodeIds: string[] threeDim - setThreeDim - local - setLocal + setThreeDim + local + setLocal } /** * Describe your component here */ export const Graph = observer(function Graph(props: GraphProps): JSX.Element { - const { style, physics, setPhysics, gData, threeDim, setThreeDim, local, setLocal } = props + const { + style, + physics, + setPhysics, + gData, + threeDim, + setThreeDim, + local, + setLocal, + } = props const styles = flatten([CONTAINER, style]) const fgRef = useRef() @@ -60,30 +74,30 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element { const fg = fgRef.current //fg.d3Force('center').strength(0.05); if (physics.gravityOn) { - fg.d3Force("x", d3.forceX().strength(physics.gravity)) - fg.d3Force("y", d3.forceY().strength(physics.gravity)) + fg.d3Force('x', d3.forceX().strength(physics.gravity)) + fg.d3Force('y', d3.forceY().strength(physics.gravity)) if (threeDim) { if (physics.galaxy) { - fg.d3Force("x", d3.forceX().strength(physics.gravity / 5)) - fg.d3Force("z", d3.forceZ().strength(physics.gravity / 5)) + fg.d3Force('x', d3.forceX().strength(physics.gravity / 5)) + fg.d3Force('z', d3.forceZ().strength(physics.gravity / 5)) } else { - fg.d3Force("x", d3.forceX().strength(physics.gravity)) - fg.d3Force("z", d3.forceZ().strength(physics.gravity)) + fg.d3Force('x', d3.forceX().strength(physics.gravity)) + fg.d3Force('z', d3.forceZ().strength(physics.gravity)) } } else { - fg.d3Force("z", null) + fg.d3Force('z', null) } } else { - fg.d3Force("x", null) - fg.d3Force("y", null) - threeDim ? fg.d3Force("z", null) : null + fg.d3Force('x', null) + fg.d3Force('y', null) + threeDim ? fg.d3Force('z', null) : null } - fg.d3Force("link").strength(physics.linkStrength) - fg.d3Force("link").iterations(physics.linkIts) + fg.d3Force('link').strength(physics.linkStrength) + fg.d3Force('link').iterations(physics.linkIts) physics.collision - ? fg.d3Force("collide", d3.forceCollide().radius(20)) - : fg.d3Force("collide", null) - fg.d3Force("charge").strength(physics.charge) + ? fg.d3Force('collide', d3.forceCollide().radius(20)) + : fg.d3Force('collide', null) + fg.d3Force('charge').strength(physics.charge) }) // For the expandable version of the graph @@ -143,7 +157,7 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element { } const handleNodeHover = (node) => { - console.log("hover") + console.log('hover') if (!selectedNode) { highlightNodes.clear() highlightLinks.clear() @@ -211,19 +225,21 @@ onLinkHover={handleLinkHover} const getLocalGraphData = (node) => { console.log(localGraphData) - localGraphData.nodes.length ? setLocalGraphData({ nodes: [], links: [] }) : null + localGraphData.nodes.length + ? setLocalGraphData({ nodes: [], links: [] }) + : null let g = localGraphData console.log(g.nodes) if (!node.local) { g = { nodes: [], links: [] } - console.log("length is 0") + console.log('length is 0') node.local = true //keep track of these boys g.nodes.push(node) //only add the clicked node if its the first } node.links.length && node.links.forEach((neighborLink) => { if (!neighborLink.local) { - console.log("0") + console.log('0') neighborLink.local = true g.links.push(neighborLink) console.log(neighborLink) @@ -231,23 +247,23 @@ onLinkHover={handleLinkHover} const sourceNode = gData.nodes[neighborLink.sourceIndex] if (targetNode.id !== sourceNode.id) { if (targetNode.id === node.id) { - console.log("1. I am the target, the source is ") + console.log('1. I am the target, the source is ') console.log(sourceNode) if (!sourceNode.local) { - console.log("2. The source is not local") + console.log('2. The source is not local') sourceNode.local = true g.nodes.push(sourceNode) } else { - console.log("2.5 The source is already local") + console.log('2.5 The source is already local') } } else { - console.log("3. I am the source") + console.log('3. I am the source') if (!targetNode.local) { - console.log("4. The target is not local.") + console.log('4. The target is not local.') targetNode.local = true g.nodes.push(targetNode) } else { - console.log("The target is already local") + console.log('The target is already local') } } } @@ -257,7 +273,7 @@ onLinkHover={handleLinkHover} } const selectClick = (node, event) => { - window.open('org-protocol://roam-node?node=' + node.id, '_self'); + window.open('org-protocol://roam-node?node=' + node.id, '_self') highlightNodes.clear() highlightLinks.clear() console.log(localGraphData) @@ -275,11 +291,11 @@ onLinkHover={handleLinkHover} setDoubleClick(event.timeStamp) } - useEffect(()=>{ - if(local && selectedNode) { - getLocalGraphData(selectedNode) - } - }, [local]) + useEffect(() => { + if (local && selectedNode) { + getLocalGraphData(selectedNode) + } + }, [local]) return ( <View style={style}> {!threeDim ? ( @@ -293,39 +309,44 @@ onLinkHover={handleLinkHover} !physics.colorful ? (node) => { if (highlightNodes.size === 0) { - return "rgb(100, 100, 100, 1)" + return 'rgb(100, 100, 100, 1)' } else { - return highlightNodes.has(node) ? "#a991f1" : "rgb(50, 50, 50, 0.5)" + return highlightNodes.has(node) + ? '#a991f1' + : 'rgb(50, 50, 50, 0.5)' } } : (node) => { - if (node.neighbors.length === 1 || node.neighbors.length === 2) { + if ( + node.neighbors.length === 1 || + node.neighbors.length === 2 + ) { return [ - "#ff665c", - "#e69055", - "#7bc275", - "#4db5bd", - "#FCCE7B", - "#51afef", - "#1f5582", - "#C57BDB", - "#a991f1", - "#5cEfFF", - "#6A8FBF", + '#ff665c', + '#e69055', + '#7bc275', + '#4db5bd', + '#FCCE7B', + '#51afef', + '#1f5582', + '#C57BDB', + '#a991f1', + '#5cEfFF', + '#6A8FBF', ][node.neighbors[0].index % 11] } else { return [ - "#ff665c", - "#e69055", - "#7bc275", - "#4db5bd", - "#FCCE7B", - "#51afef", - "#1f5582", - "#C57BDB", - "#a991f1", - "#5cEfFF", - "#6A8FBF", + '#ff665c', + '#e69055', + '#7bc275', + '#4db5bd', + '#FCCE7B', + '#51afef', + '#1f5582', + '#C57BDB', + '#a991f1', + '#5cEfFF', + '#6A8FBF', ][node.index % 11] } } @@ -335,24 +356,26 @@ onLinkHover={handleLinkHover} !physics.colorful ? (link) => { if (highlightLinks.size === 0) { - return "rgb(50, 50, 50, 0.8)" + return 'rgb(50, 50, 50, 0.8)' } else { - return highlightLinks.has(link) ? "#a991f1" : "rgb(50, 50, 50, 0.2)" + return highlightLinks.has(link) + ? '#a991f1' + : 'rgb(50, 50, 50, 0.2)' } } : (link) => [ - "#ff665c", - "#e69055", - "#7bc275", - "#4db5bd", - "#FCCE7B", - "#51afef", - "#1f5582", - "#C57BDB", - "#a991f1", - "#5cEfFF", - "#6A8FBF", + '#ff665c', + '#e69055', + '#7bc275', + '#4db5bd', + '#FCCE7B', + '#51afef', + '#1f5582', + '#C57BDB', + '#a991f1', + '#5cEfFF', + '#6A8FBF', ][gData.nodes[link.sourceIndex].index % 11] } linkDirectionalParticles={physics.particles} @@ -364,60 +387,70 @@ onLinkHover={handleLinkHover} linkOpacity={physics.linkOpacity} nodeRelSize={physics.nodeRel} nodeVal={(node) => { - return highlightNodes.has(node) ? node.neighbors.length + 5 : node.neighbors.length + 3 + return highlightNodes.has(node) + ? node.neighbors.length + 5 + : node.neighbors.length + 3 }} linkDirectionalParticleWidth={physics.particleWidth} nodeCanvasObject={(node, ctx, globalScale) => { if (physics.labels) { - if (globalScale > physics.labelScale || highlightNodes.has(node)) { - const label = node.title.substring(0, Math.min(node.title.length, 30)) + if ( + globalScale > physics.labelScale || + highlightNodes.has(node) + ) { + const label = node.title.substring( + 0, + Math.min(node.title.length, 30), + ) const fontSize = 12 / globalScale ctx.font = `${fontSize}px Sans-Serif` const textWidth = ctx.measureText(label).width - const bckgDimensions = [textWidth * 1.1, fontSize].map((n) => n + fontSize * 0.5) // some padding + const bckgDimensions = [textWidth * 1.1, fontSize].map( + (n) => n + fontSize * 0.5, + ) // some padding const fadeFactor = Math.min( (3 * (globalScale - physics.labelScale)) / physics.labelScale, 1, ) ctx.fillStyle = - "rgba(20, 20, 20, " + + 'rgba(20, 20, 20, ' + (highlightNodes.size === 0 ? 0.5 * fadeFactor : highlightNodes.has(node) ? 0.5 : 0.15 * fadeFactor) + - ")" + ')' ctx.fillRect( node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions, ) - ctx.textAlign = "center" - ctx.textBaseline = "middle" + ctx.textAlign = 'center' + ctx.textBaseline = 'middle' ctx.fillStyle = - "rgb(255, 255, 255, " + + 'rgb(255, 255, 255, ' + (highlightNodes.size === 0 ? fadeFactor : highlightNodes.has(node) ? 1 : 0.3 * fadeFactor) + - ")" + ')' ctx.fillText(label, node.x, node.y) node.__bckgDimensions = bckgDimensions // to re-use in nodePointerAreaPaint } } }} - nodeCanvasObjectMode={() => "after"} + nodeCanvasObjectMode={() => 'after'} onNodeHover={physics.hover ? handleNodeHover : null} //onLinkHover={physics.hover ? handleLinkHover : null} d3AlphaDecay={physics.alphaDecay} d3AlphaMin={physics.alphaTarget} d3VelocityDecay={physics.velocityDecay} onBackgroundClick={handleBackgroundClick} - backgroundColor={"#242730"} + backgroundColor={'#242730'} /> ) : ( <ForceGraph3D @@ -428,39 +461,44 @@ onLinkHover={handleLinkHover} !physics.colorful ? (node) => { if (highlightNodes.size === 0) { - return "rgb(100, 100, 100, 1)" + return 'rgb(100, 100, 100, 1)' } else { - return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)" + return highlightNodes.has(node) + ? 'purple' + : 'rgb(50, 50, 50, 0.5)' } } : (node) => { - if (node.neighbors.length === 1 || node.neighbors.length === 2) { + if ( + node.neighbors.length === 1 || + node.neighbors.length === 2 + ) { return [ - "#ff665c", - "#e69055", - "#7bc275", - "#4db5bd", - "#FCCE7B", - "#51afef", - "#1f5582", - "#C57BDB", - "#a991f1", - "#5cEfFF", - "#6A8FBF", + '#ff665c', + '#e69055', + '#7bc275', + '#4db5bd', + '#FCCE7B', + '#51afef', + '#1f5582', + '#C57BDB', + '#a991f1', + '#5cEfFF', + '#6A8FBF', ][node.neighbors[0].index % 11] } else { return [ - "#ff665c", - "#e69055", - "#7bc275", - "#4db5bd", - "#FCCE7B", - "#51afef", - "#1f5582", - "#C57BDB", - "#a991f1", - "#5cEfFF", - "#6A8FBF", + '#ff665c', + '#e69055', + '#7bc275', + '#4db5bd', + '#FCCE7B', + '#51afef', + '#1f5582', + '#C57BDB', + '#a991f1', + '#5cEfFF', + '#6A8FBF', ][node.index % 11] } } @@ -470,24 +508,26 @@ onLinkHover={handleLinkHover} !physics.colorful ? (link) => { if (highlightLinks.size === 0) { - return "rgb(50, 50, 50, 0.8)" + return 'rgb(50, 50, 50, 0.8)' } else { - return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)" + return highlightLinks.has(link) + ? 'purple' + : 'rgb(50, 50, 50, 0.2)' } } : (link) => [ - "#ff665c", - "#e69055", - "#7bc275", - "#4db5bd", - "#FCCE7B", - "#51afef", - "#1f5582", - "#C57BDB", - "#a991f1", - "#5cEfFF", - "#6A8FBF", + '#ff665c', + '#e69055', + '#7bc275', + '#4db5bd', + '#FCCE7B', + '#51afef', + '#1f5582', + '#C57BDB', + '#a991f1', + '#5cEfFF', + '#6A8FBF', ][gData.nodes[link.sourceIndex].index % 11] } linkDirectionalParticles={physics.particles} @@ -498,7 +538,9 @@ onLinkHover={handleLinkHover} linkOpacity={physics.linkOpacity} nodeRelSize={physics.nodeRel} nodeVal={(node) => - highlightNodes.has(node) ? node.neighbors.length * 3 : node.neighbors.length * 2 + highlightNodes.has(node) + ? node.neighbors.length * 3 + : node.neighbors.length * 2 } linkDirectionalParticleWidth={physics.particleWidth} onNodeHover={physics.hover ? handleNodeHover : null} @@ -512,8 +554,8 @@ onLinkHover={handleLinkHover} if (highlightNodes.has(node)) { console.log(node.title) const sprite = new SpriteText(node.title.substring(0, 30)) - console.log("didnt crash here 2") - sprite.color = "#ffffff" + console.log('didnt crash here 2') + sprite.color = '#ffffff' sprite.textHeight = 8 return sprite } else { @@ -524,7 +566,7 @@ onLinkHover={handleLinkHover} nodeThreeObjectExtend={true} onNodeClick={selectClick} onBackgroundClick={handleBackgroundClick} - backgroundColor={"#242730"} + backgroundColor={'#242730'} /> )} </View> diff --git a/app/components/graph/graphgood.tsx b/app/components/graph/graphgood.tsx index f273a66..b204176 100644 --- a/app/components/graph/graphgood.tsx +++ b/app/components/graph/graphgood.tsx @@ -1,22 +1,27 @@ -import * as React from "react" -import { useState, useEffect, useRef, useMemo, useCallback } from "react" -import { StyleProp, TextStyle, View, ViewStyle } from "react-native" -import { observer } from "mobx-react-lite" -import { color, typography } from "../../theme" -import { Text } from "../" -import { flatten } from "ramda" +import * as React from 'react' +import { useState, useEffect, useRef, useMemo, useCallback } from 'react' +import { StyleProp, TextStyle, View, ViewStyle } from 'react-native' +import { observer } from 'mobx-react-lite' +import { color, typography } from '../../theme' +import { Text } from '../' +import { flatten } from 'ramda' //import data from "../../data/miserables.json" //import genRandomTree from "../../data/randomdata"; //import rando from "../../data/rando.json" -import { ForceGraph2D, ForceGraph3D, ForceGraphVR, ForceGraphAR } from "react-force-graph" -import * as d3 from "d3-force-3d" -import * as three from "three" -import SpriteText from "three-spritetext" +import { + ForceGraph2D, + ForceGraph3D, + ForceGraphVR, + ForceGraphAR, +} from 'react-force-graph' +import * as d3 from 'd3-force-3d' +import * as three from 'three' +import SpriteText from 'three-spritetext' const CONTAINER: ViewStyle = { - justifyContent: "center", + justifyContent: 'center', } const TEXT: TextStyle = { @@ -56,45 +61,49 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element { const fg = fgRef.current //fg.d3Force('center').strength(0.05); if (physics.gravityOn) { - fg.d3Force("x", d3.forceX().strength(physics.gravity)) - fg.d3Force("y", d3.forceY().strength(physics.gravity)) + fg.d3Force('x', d3.forceX().strength(physics.gravity)) + fg.d3Force('y', d3.forceY().strength(physics.gravity)) if (physics.threedim) { if (physics.galaxy) { - fg.d3Force("y", d3.forceY().strength(physics.gravity / 5)) - fg.d3Force("z", d3.forceZ().strength(physics.gravity / 5)) + fg.d3Force('y', d3.forceY().strength(physics.gravity / 5)) + fg.d3Force('z', d3.forceZ().strength(physics.gravity / 5)) } else { - fg.d3Force("y", d3.forceY().strength(physics.gravity)) - fg.d3Force("z", d3.forceZ().strength(physics.gravity)) + fg.d3Force('y', d3.forceY().strength(physics.gravity)) + fg.d3Force('z', d3.forceZ().strength(physics.gravity)) } } else { - fg.d3Force("z", null) + fg.d3Force('z', null) } } else { - fg.d3Force("x", null) - fg.d3Force("y", null) - physics.threedim ? fg.d3Force("z", null) : null + fg.d3Force('x', null) + fg.d3Force('y', null) + physics.threedim ? fg.d3Force('z', null) : null } - fg.d3Force("link").strength(physics.linkStrength) - fg.d3Force("link").iterations(physics.linkIts) + fg.d3Force('link').strength(physics.linkStrength) + fg.d3Force('link').iterations(physics.linkIts) physics.collision - ? fg.d3Force("collide", d3.forceCollide().radius(20)) - : fg.d3Force("collide", null) - fg.d3Force("charge").strength(physics.charge) + ? fg.d3Force('collide', d3.forceCollide().radius(20)) + : fg.d3Force('collide', null) + fg.d3Force('charge').strength(physics.charge) }) // For the expandable version of the graph const nodesById = useMemo(() => { - const nodesById = Object.fromEntries(gData.nodes.map((node) => [node.index, node])) + const nodesById = Object.fromEntries( + gData.nodes.map((node) => [node.index, node]), + ) console.log(nodesById) // link parent/children gData.nodes.forEach((node) => { - typeof physics.rootId === "number" + typeof physics.rootId === 'number' ? (node.collapsed = node.index !== physics.rootId) : (node.collapsed = node.id !== physics.rootId) node.childLinks = [] }) - gData.links.forEach((link) => nodesById[link.sourceIndex].childLinks.push(link)) + gData.links.forEach((link) => + nodesById[link.sourceIndex].childLinks.push(link), + ) return nodesById }, [gData]) const getPrunedTree = useCallback(() => { @@ -106,7 +115,9 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element { visibleLinks.push(...node.childLinks) node.childLinks .map((link) => - typeof link.targetIndex === "object" ? link.targetIndex : nodesById[link.targetIndex], + typeof link.targetIndex === 'object' + ? link.targetIndex + : nodesById[link.targetIndex], ) // get child node .forEach(traverseTree) })() @@ -140,7 +151,7 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element { } const handleNodeHover = (node) => { - console.log("hover") + console.log('hover') if (!selectedNode) { highlightNodes.clear() highlightLinks.clear() @@ -264,29 +275,39 @@ onLinkHover={handleLinkHover} ref={fgRef} autoPauseRedraw={false} //graphData={gData} - graphData={physics.local ? localGraphData : physics.collapse ? prunedTree : gData} - nodeAutoColorBy={physics.colorful ? "id" : undefined} + graphData={ + physics.local + ? localGraphData + : physics.collapse + ? prunedTree + : gData + } + nodeAutoColorBy={physics.colorful ? 'id' : undefined} nodeColor={ !physics.colorful ? (node) => { if (highlightNodes.size === 0) { - return "rgb(100, 100, 100, 1)" + return 'rgb(100, 100, 100, 1)' } else { - return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)" + return highlightNodes.has(node) + ? 'purple' + : 'rgb(50, 50, 50, 0.5)' } // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" } : undefined } - linkAutoColorBy={physics.colorful ? "target" : undefined} + linkAutoColorBy={physics.colorful ? 'target' : undefined} //linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS} linkColor={ !physics.colorful ? (link) => { if (highlightLinks.size === 0) { - return "rgb(50, 50, 50, 0.8)" + return 'rgb(50, 50, 50, 0.8)' } else { - return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)" + return highlightLinks.has(link) + ? 'purple' + : 'rgb(50, 50, 50, 0.2)' } // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" } @@ -305,53 +326,63 @@ onLinkHover={handleLinkHover} linkOpacity={physics.linkOpacity} nodeRelSize={physics.nodeRel} nodeVal={(node) => - highlightNodes.has(node) ? node.neighbors.length + 5 : node.neighbors.length + 3 + highlightNodes.has(node) + ? node.neighbors.length + 5 + : node.neighbors.length + 3 } linkDirectionalParticleWidth={physics.particleWidth} nodeCanvasObject={(node, ctx, globalScale) => { if (physics.labels) { - if (globalScale > physics.labelScale || highlightNodes.has(node)) { - const label = node.title.substring(0, Math.min(node.title.length, 30)) + if ( + globalScale > physics.labelScale || + highlightNodes.has(node) + ) { + const label = node.title.substring( + 0, + Math.min(node.title.length, 30), + ) const fontSize = 12 / globalScale ctx.font = `${fontSize}px Sans-Serif` const textWidth = ctx.measureText(label).width - const bckgDimensions = [textWidth * 1.1, fontSize].map((n) => n + fontSize * 0.5) // some padding + const bckgDimensions = [textWidth * 1.1, fontSize].map( + (n) => n + fontSize * 0.5, + ) // some padding const fadeFactor = Math.min( (3 * (globalScale - physics.labelScale)) / physics.labelScale, 1, ) ctx.fillStyle = - "rgba(20, 20, 20, " + + 'rgba(20, 20, 20, ' + (highlightNodes.size === 0 ? 0.5 * fadeFactor : highlightNodes.has(node) ? 0.5 : 0.15 * fadeFactor) + - ")" + ')' ctx.fillRect( node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions, ) - ctx.textAlign = "center" - ctx.textBaseline = "middle" + ctx.textAlign = 'center' + ctx.textBaseline = 'middle' ctx.fillStyle = - "rgb(255, 255, 255, " + + 'rgb(255, 255, 255, ' + (highlightNodes.size === 0 ? fadeFactor : highlightNodes.has(node) ? 1 : 0.3 * fadeFactor) + - ")" + ')' ctx.fillText(label, node.x, node.y) node.__bckgDimensions = bckgDimensions // to re-use in nodePointerAreaPaint } } }} - nodeCanvasObjectMode={() => "after"} + nodeCanvasObjectMode={() => 'after'} onNodeHover={physics.hover ? handleNodeHover : null} //onLinkHover={physics.hover ? handleLinkHover : null} d3AlphaDecay={physics.alphaDecay} @@ -365,28 +396,32 @@ onLinkHover={handleLinkHover} autoPauseRedraw={false} graphData={gData} //graphData={physics.collapse ? prunedTree : gData} - nodeAutoColorBy={physics.colorful ? "id" : undefined} + nodeAutoColorBy={physics.colorful ? 'id' : undefined} nodeColor={ !physics.colorful ? (node) => { if (highlightNodes.size === 0) { - return "rgb(100, 100, 100, 1)" + return 'rgb(100, 100, 100, 1)' } else { - return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)" + return highlightNodes.has(node) + ? 'purple' + : 'rgb(50, 50, 50, 0.5)' } // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" } : undefined } - linkAutoColorBy={physics.colorful ? "target" : undefined} + linkAutoColorBy={physics.colorful ? 'target' : undefined} //linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS} linkColor={ !physics.colorful ? (link) => { if (highlightLinks.size === 0) { - return "rgb(50, 50, 50, 0.8)" + return 'rgb(50, 50, 50, 0.8)' } else { - return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)" + return highlightLinks.has(link) + ? 'purple' + : 'rgb(50, 50, 50, 0.2)' } // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" } @@ -405,7 +440,9 @@ onLinkHover={handleLinkHover} linkOpacity={physics.linkOpacity} nodeRelSize={physics.nodeRel} nodeVal={(node) => - highlightNodes.has(node) ? node.neighbors.length + 5 : node.neighbors.length + 3 + highlightNodes.has(node) + ? node.neighbors.length + 5 + : node.neighbors.length + 3 } linkDirectionalParticleWidth={physics.particleWidth} onNodeHover={physics.hover ? handleNodeHover : null} @@ -420,8 +457,8 @@ onLinkHover={handleLinkHover} if (highlightNodes.has(node)) { console.log(node.title) const sprite = new SpriteText(node.title.substring(0, 30)) - console.log("didnt crash here 2") - sprite.color = "#ffffff" + console.log('didnt crash here 2') + sprite.color = '#ffffff' sprite.textHeight = 8 return sprite } else { diff --git a/app/components/header/header.props.ts b/app/components/header/header.props.ts index 07f2c4d..f142656 100644 --- a/app/components/header/header.props.ts +++ b/app/components/header/header.props.ts @@ -1,6 +1,6 @@ -import { StyleProp, TextStyle, ViewStyle } from "react-native" -import { IconTypes } from "../icon/icons" -import { TxKeyPath } from "../../i18n" +import { StyleProp, TextStyle, ViewStyle } from 'react-native' +import { IconTypes } from '../icon/icons' +import { TxKeyPath } from '../../i18n' export interface HeaderProps { /** diff --git a/app/components/header/header.story.tsx b/app/components/header/header.story.tsx index 05093b3..db87b89 100644 --- a/app/components/header/header.story.tsx +++ b/app/components/header/header.story.tsx @@ -1,9 +1,9 @@ -import * as React from "react" -import { View, Alert } from "react-native" -import { storiesOf } from "@storybook/react-native" -import { StoryScreen, Story, UseCase } from "../../../storybook/views" -import { Header } from "./header" -import { color } from "../../theme" +import * as React from 'react' +import { View, Alert } from 'react-native' +import { storiesOf } from '@storybook/react-native' +import { StoryScreen, Story, UseCase } from '../../../storybook/views' +import { Header } from './header' +import { color } from '../../theme' declare let module @@ -12,9 +12,9 @@ const VIEWSTYLE = { backgroundColor: color.storybookDarkBg, } -storiesOf("Header", module) +storiesOf('Header', module) .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add("Behavior", () => ( + .add('Behavior', () => ( <Story> <UseCase noPad text="default" usage="The default usage"> <View style={VIEWSTYLE}> @@ -26,7 +26,7 @@ storiesOf("Header", module) <Header headerTx="demoScreen.howTo" leftIcon="back" - onLeftPress={() => Alert.alert("left nav")} + onLeftPress={() => Alert.alert('left nav')} /> </View> </UseCase> @@ -35,7 +35,7 @@ storiesOf("Header", module) <Header headerTx="demoScreen.howTo" rightIcon="bullet" - onRightPress={() => Alert.alert("right nav")} + onRightPress={() => Alert.alert('right nav')} /> </View> </UseCase> diff --git a/app/components/header/header.tsx b/app/components/header/header.tsx index b4a6634..25e0914 100644 --- a/app/components/header/header.tsx +++ b/app/components/header/header.tsx @@ -1,23 +1,23 @@ -import React from "react" -import { View, ViewStyle, TextStyle } from "react-native" -import { HeaderProps } from "./header.props" -import { Button } from "../button/button" -import { Text } from "../text/text" -import { Icon } from "../icon/icon" -import { spacing } from "../../theme" -import { translate } from "../../i18n/" +import React from 'react' +import { View, ViewStyle, TextStyle } from 'react-native' +import { HeaderProps } from './header.props' +import { Button } from '../button/button' +import { Text } from '../text/text' +import { Icon } from '../icon/icon' +import { spacing } from '../../theme' +import { translate } from '../../i18n/' // static styles const ROOT: ViewStyle = { - flexDirection: "row", + flexDirection: 'row', paddingHorizontal: spacing[4], - alignItems: "center", + alignItems: 'center', paddingTop: spacing[5], paddingBottom: spacing[5], - justifyContent: "flex-start", + justifyContent: 'flex-start', } -const TITLE: TextStyle = { textAlign: "center" } -const TITLE_MIDDLE: ViewStyle = { flex: 1, justifyContent: "center" } +const TITLE: TextStyle = { textAlign: 'center' } +const TITLE_MIDDLE: ViewStyle = { flex: 1, justifyContent: 'center' } const LEFT: ViewStyle = { width: 32 } const RIGHT: ViewStyle = { width: 32 } @@ -35,7 +35,7 @@ export function Header(props: HeaderProps) { style, titleStyle, } = props - const header = headerText || (headerTx && translate(headerTx)) || "" + const header = headerText || (headerTx && translate(headerTx)) || '' return ( <View style={[ROOT, style]}> diff --git a/app/components/icon/icon.props.ts b/app/components/icon/icon.props.ts index 71ce0b7..1f3ed2e 100644 --- a/app/components/icon/icon.props.ts +++ b/app/components/icon/icon.props.ts @@ -1,5 +1,5 @@ -import { ImageStyle, StyleProp, ViewStyle } from "react-native" -import { IconTypes } from "./icons" +import { ImageStyle, StyleProp, ViewStyle } from 'react-native' +import { IconTypes } from './icons' export interface IconProps { /** diff --git a/app/components/icon/icon.story.tsx b/app/components/icon/icon.story.tsx index d119ed4..31c8499 100644 --- a/app/components/icon/icon.story.tsx +++ b/app/components/icon/icon.story.tsx @@ -1,13 +1,13 @@ -import * as React from "react" -import { storiesOf } from "@storybook/react-native" -import { StoryScreen, Story, UseCase } from "../../../storybook/views" -import { Icon } from "./icon" +import * as React from 'react' +import { storiesOf } from '@storybook/react-native' +import { StoryScreen, Story, UseCase } from '../../../storybook/views' +import { Icon } from './icon' declare let module -storiesOf("Icon", module) +storiesOf('Icon', module) .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add("Names", () => ( + .add('Names', () => ( <Story> <UseCase text="back" usage="The icon for going back"> <Icon icon="back" /> diff --git a/app/components/icon/icon.tsx b/app/components/icon/icon.tsx index 4735e13..f596bb2 100644 --- a/app/components/icon/icon.tsx +++ b/app/components/icon/icon.tsx @@ -1,11 +1,11 @@ -import * as React from "react" -import { View, ImageStyle } from "react-native" -import { AutoImage as Image } from "../auto-image/auto-image" -import { IconProps } from "./icon.props" -import { icons } from "./icons" +import * as React from 'react' +import { View, ImageStyle } from 'react-native' +import { AutoImage as Image } from '../auto-image/auto-image' +import { IconProps } from './icon.props' +import { icons } from './icons' const ROOT: ImageStyle = { - resizeMode: "contain", + resizeMode: 'contain', } export function Icon(props: IconProps) { diff --git a/app/components/icon/icons/index.ts b/app/components/icon/icons/index.ts index 00e8a59..792e408 100644 --- a/app/components/icon/icons/index.ts +++ b/app/components/icon/icons/index.ts @@ -1,6 +1,6 @@ export const icons = { - back: require("./arrow-left.png"), - bullet: require("./bullet.png"), + back: require('./arrow-left.png'), + bullet: require('./bullet.png'), } export type IconTypes = keyof typeof icons diff --git a/app/components/index.ts b/app/components/index.ts index 8858b2f..d93e972 100644 --- a/app/components/index.ts +++ b/app/components/index.ts @@ -1,16 +1,16 @@ -export * from "./bullet-item/bullet-item" -export * from "./button/button" -export * from "./checkbox/checkbox" -export * from "./form-row/form-row" -export * from "./header/header" -export * from "./icon/icon" -export * from "./screen/screen" -export * from "./switch/switch" -export * from "./text/text" -export * from "./text-field/text-field" -export * from "./wallpaper/wallpaper" -export * from "./auto-image/auto-image" -export * from "./graph/graph" -export * from "./tweaks/tweaks" -export * from "./local-button/local-button" -export * from "./graph-ui/graph-ui" +export * from './bullet-item/bullet-item' +export * from './button/button' +export * from './checkbox/checkbox' +export * from './form-row/form-row' +export * from './header/header' +export * from './icon/icon' +export * from './screen/screen' +export * from './switch/switch' +export * from './text/text' +export * from './text-field/text-field' +export * from './wallpaper/wallpaper' +export * from './auto-image/auto-image' +export * from './graph/graph' +export * from './tweaks/tweaks' +export * from './local-button/local-button' +export * from './graph-ui/graph-ui' diff --git a/app/components/local-button/local-button.story.tsx b/app/components/local-button/local-button.story.tsx index 22b2f0e..0d35ab2 100644 --- a/app/components/local-button/local-button.story.tsx +++ b/app/components/local-button/local-button.story.tsx @@ -1,12 +1,12 @@ -import * as React from "react" -import { storiesOf } from "@storybook/react-native" -import { StoryScreen, Story, UseCase } from "../../../storybook/views" -import { color } from "../../theme" -import { LocalButton } from "./local-button" +import * as React from 'react' +import { storiesOf } from '@storybook/react-native' +import { StoryScreen, Story, UseCase } from '../../../storybook/views' +import { color } from '../../theme' +import { LocalButton } from './local-button' -storiesOf("LocalButton", module) +storiesOf('LocalButton', module) .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add("Style Presets", () => ( + .add('Style Presets', () => ( <Story> <UseCase text="Primary" usage="The primary."> <LocalButton style={{ backgroundColor: color.error }} /> diff --git a/app/components/local-button/local-button.tsx b/app/components/local-button/local-button.tsx index 6507b76..27b514b 100644 --- a/app/components/local-button/local-button.tsx +++ b/app/components/local-button/local-button.tsx @@ -1,13 +1,13 @@ -import * as React from "react" -import { StyleProp, TextStyle, View, ViewStyle } from "react-native" -import { observer } from "mobx-react-lite" -import { color, typography } from "../../theme" -import { Text } from "../" -import { flatten } from "ramda" -import Icon from "react-native-vector-icons/MaterialCommunityIcons" +import * as React from 'react' +import { StyleProp, TextStyle, View, ViewStyle } from 'react-native' +import { observer } from 'mobx-react-lite' +import { color, typography } from '../../theme' +import { Text } from '../' +import { flatten } from 'ramda' +import Icon from 'react-native-vector-icons/MaterialCommunityIcons' const CONTAINER: ViewStyle = { - justifyContent: "center", + justifyContent: 'center', } const TEXT: TextStyle = { @@ -21,25 +21,32 @@ export interface LocalButtonProps { * An optional style override useful for padding & margin. */ style?: StyleProp<ViewStyle> - local - setLocal + local + setLocal } /** * Describe your component here */ -export const LocalButton = observer(function LocalButton(props: LocalButtonProps) { +export const LocalButton = observer(function LocalButton( + props: LocalButtonProps, +) { const { style, local, setLocal } = props const styles = flatten([CONTAINER, style]) return ( - <View style={[style, { height: 50, width: 150}]}> - <Icon.Button name={!local ? "graph-outline": "graph"} backgroundColor="#a991f1" - onPress={()=>{setLocal(!local)}} - size={30} - style={{textAlign: 'center'}}> - {!local ? "Global Graph" : "Local Graph"} - </Icon.Button> + <View style={[style, { height: 50, width: 150 }]}> + <Icon.Button + name={!local ? 'graph-outline' : 'graph'} + backgroundColor="#a991f1" + onPress={() => { + setLocal(!local) + }} + size={30} + style={{ textAlign: 'center' }} + > + {!local ? 'Global Graph' : 'Local Graph'} + </Icon.Button> </View> ) }) diff --git a/app/components/local/local.story.tsx b/app/components/local/local.story.tsx index b161f0e..2bfa065 100644 --- a/app/components/local/local.story.tsx +++ b/app/components/local/local.story.tsx @@ -1,12 +1,12 @@ -import * as React from "react" -import { storiesOf } from "@storybook/react-native" -import { StoryScreen, Story, UseCase } from "../../../storybook/views" -import { color } from "../../theme" -import { Local } from "./local" +import * as React from 'react' +import { storiesOf } from '@storybook/react-native' +import { StoryScreen, Story, UseCase } from '../../../storybook/views' +import { color } from '../../theme' +import { Local } from './local' -storiesOf("Local", module) +storiesOf('Local', module) .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add("Style Presets", () => ( + .add('Style Presets', () => ( <Story> <UseCase text="Primary" usage="The primary."> <Local style={{ backgroundColor: color.error }} /> diff --git a/app/components/local/local.tsx b/app/components/local/local.tsx index e6984fc..200ec01 100644 --- a/app/components/local/local.tsx +++ b/app/components/local/local.tsx @@ -1,13 +1,19 @@ -import * as React from "react" -import { StyleProp, TextStyle, TouchableOpacity, View, ViewStyle } from "react-native" -import { observer } from "mobx-react-lite" -import { color, typography } from "../../theme" -import { Text } from "../" -import { flatten } from "ramda" -import Icon from "react-native-vector-icons/MaterialCommunityIcons" +import * as React from 'react' +import { + StyleProp, + TextStyle, + TouchableOpacity, + View, + ViewStyle, +} from 'react-native' +import { observer } from 'mobx-react-lite' +import { color, typography } from '../../theme' +import { Text } from '../' +import { flatten } from 'ramda' +import Icon from 'react-native-vector-icons/MaterialCommunityIcons' const CONTAINER: ViewStyle = { - justifyContent: "center", + justifyContent: 'center', } const TEXT: TextStyle = { @@ -26,13 +32,17 @@ export interface LocalProps { /** * Describe your component here */ -export const LocalButton = observer(function LocalButton(props: LocalProps): boolean { +export const LocalButton = observer(function LocalButton( + props: LocalProps, +): boolean { const { style } = props const styles = flatten([CONTAINER, style]) return ( - <Icon color="#a99f1f" name="graph" - style={{position:"absolute", zIndex: 100, width: 500}} - /> + <Icon + color="#a99f1f" + name="graph" + style={{ position: 'absolute', zIndex: 100, width: 500 }} + /> ) }) diff --git a/app/components/screen/screen.presets.ts b/app/components/screen/screen.presets.ts index a016b77..aa8d8cf 100644 --- a/app/components/screen/screen.presets.ts +++ b/app/components/screen/screen.presets.ts @@ -1,5 +1,5 @@ -import { ViewStyle } from "react-native" -import { color } from "../../theme" +import { ViewStyle } from 'react-native' +import { color } from '../../theme' /** * All screen keyboard offsets. @@ -25,13 +25,13 @@ export const presets = { outer: { backgroundColor: color.background, flex: 1, - height: "100%", + height: '100%', } as ViewStyle, inner: { - justifyContent: "flex-start", - alignItems: "stretch", - height: "100%", - width: "100%", + justifyContent: 'flex-start', + alignItems: 'stretch', + height: '100%', + width: '100%', } as ViewStyle, }, @@ -44,9 +44,9 @@ export const presets = { outer: { backgroundColor: color.background, flex: 1, - height: "100%", + height: '100%', } as ViewStyle, - inner: { justifyContent: "flex-start", alignItems: "stretch" } as ViewStyle, + inner: { justifyContent: 'flex-start', alignItems: 'stretch' } as ViewStyle, }, } @@ -62,5 +62,5 @@ export type ScreenPresets = keyof typeof presets */ export function isNonScrolling(preset?: ScreenPresets) { // any of these things will make you scroll - return !preset || !presets[preset] || preset === "fixed" + return !preset || !presets[preset] || preset === 'fixed' } diff --git a/app/components/screen/screen.props.ts b/app/components/screen/screen.props.ts index 0326fd7..1371c64 100644 --- a/app/components/screen/screen.props.ts +++ b/app/components/screen/screen.props.ts @@ -1,6 +1,6 @@ -import React from "react" -import { StyleProp, ViewStyle } from "react-native" -import { KeyboardOffsets, ScreenPresets } from "./screen.presets" +import React from 'react' +import { StyleProp, ViewStyle } from 'react-native' +import { KeyboardOffsets, ScreenPresets } from './screen.presets' export interface ScreenProps { /** @@ -26,7 +26,7 @@ export interface ScreenProps { /** * An optional status bar setting. Defaults to light-content. */ - statusBar?: "light-content" | "dark-content" + statusBar?: 'light-content' | 'dark-content' /** * Should we not wrap in SafeAreaView? Defaults to false. @@ -42,5 +42,5 @@ export interface ScreenProps { * Should keyboard persist on screen tap. Defaults to handled. * Only applies to scroll preset. */ - keyboardShouldPersistTaps?: "handled" | "always" | "never" + keyboardShouldPersistTaps?: 'handled' | 'always' | 'never' } diff --git a/app/components/screen/screen.tsx b/app/components/screen/screen.tsx index ba84547..e593dde 100644 --- a/app/components/screen/screen.tsx +++ b/app/components/screen/screen.tsx @@ -1,25 +1,33 @@ -import * as React from "react" -import { KeyboardAvoidingView, Platform, ScrollView, StatusBar, View } from "react-native" -import { useSafeAreaInsets } from "react-native-safe-area-context" -import { ScreenProps } from "./screen.props" -import { isNonScrolling, offsets, presets } from "./screen.presets" +import * as React from 'react' +import { + KeyboardAvoidingView, + Platform, + ScrollView, + StatusBar, + View, +} from 'react-native' +import { useSafeAreaInsets } from 'react-native-safe-area-context' +import { ScreenProps } from './screen.props' +import { isNonScrolling, offsets, presets } from './screen.presets' -const isIos = Platform.OS === "ios" +const isIos = Platform.OS === 'ios' function ScreenWithoutScrolling(props: ScreenProps) { const insets = useSafeAreaInsets() const preset = presets.fixed const style = props.style || {} - const backgroundStyle = props.backgroundColor ? { backgroundColor: props.backgroundColor } : {} + const backgroundStyle = props.backgroundColor + ? { backgroundColor: props.backgroundColor } + : {} const insetStyle = { paddingTop: props.unsafe ? 0 : insets.top } return ( <KeyboardAvoidingView style={[preset.outer, backgroundStyle]} - behavior={isIos ? "padding" : undefined} - keyboardVerticalOffset={offsets[props.keyboardOffset || "none"]} + behavior={isIos ? 'padding' : undefined} + keyboardVerticalOffset={offsets[props.keyboardOffset || 'none']} > - <StatusBar barStyle={props.statusBar || "light-content"} /> + <StatusBar barStyle={props.statusBar || 'light-content'} /> <View style={[preset.inner, style, insetStyle]}>{props.children}</View> </KeyboardAvoidingView> ) @@ -29,21 +37,25 @@ function ScreenWithScrolling(props: ScreenProps) { const insets = useSafeAreaInsets() const preset = presets.scroll const style = props.style || {} - const backgroundStyle = props.backgroundColor ? { backgroundColor: props.backgroundColor } : {} + const backgroundStyle = props.backgroundColor + ? { backgroundColor: props.backgroundColor } + : {} const insetStyle = { paddingTop: props.unsafe ? 0 : insets.top } return ( <KeyboardAvoidingView style={[preset.outer, backgroundStyle]} - behavior={isIos ? "padding" : undefined} - keyboardVerticalOffset={offsets[props.keyboardOffset || "none"]} + behavior={isIos ? 'padding' : undefined} + keyboardVerticalOffset={offsets[props.keyboardOffset || 'none']} > - <StatusBar barStyle={props.statusBar || "light-content"} /> + <StatusBar barStyle={props.statusBar || 'light-content'} /> <View style={[preset.outer, backgroundStyle, insetStyle]}> <ScrollView style={[preset.outer, backgroundStyle]} contentContainerStyle={[preset.inner, style]} - keyboardShouldPersistTaps={props.keyboardShouldPersistTaps || "handled"} + keyboardShouldPersistTaps={ + props.keyboardShouldPersistTaps || 'handled' + } > {props.children} </ScrollView> diff --git a/app/components/switch/switch.props.ts b/app/components/switch/switch.props.ts index 8235457..2549a95 100644 --- a/app/components/switch/switch.props.ts +++ b/app/components/switch/switch.props.ts @@ -1,4 +1,4 @@ -import { StyleProp, ViewStyle } from "react-native" +import { StyleProp, ViewStyle } from 'react-native' export interface SwitchProps { /** diff --git a/app/components/switch/switch.story.tsx b/app/components/switch/switch.story.tsx index 998d1df..bbd29ee 100644 --- a/app/components/switch/switch.story.tsx +++ b/app/components/switch/switch.story.tsx @@ -1,19 +1,19 @@ /* eslint-disable react-native/no-inline-styles */ /* eslint-disable react-native/no-color-literals */ -import * as React from "react" -import { View, ViewStyle } from "react-native" -import { storiesOf } from "@storybook/react-native" -import { StoryScreen, Story, UseCase } from "../../../storybook/views" -import { Toggle } from "react-powerplug" -import { Switch } from "./switch" +import * as React from 'react' +import { View, ViewStyle } from 'react-native' +import { storiesOf } from '@storybook/react-native' +import { StoryScreen, Story, UseCase } from '../../../storybook/views' +import { Toggle } from 'react-powerplug' +import { Switch } from './switch' declare let module -const styleArray: ViewStyle[] = [{ borderColor: "#686868" }] +const styleArray: ViewStyle[] = [{ borderColor: '#686868' }] const trackOffStyle: ViewStyle[] = [ - { backgroundColor: "#686868" }, + { backgroundColor: '#686868' }, { height: 80, borderRadius: 0, @@ -21,8 +21,8 @@ const trackOffStyle: ViewStyle[] = [ ] const trackOnStyle: ViewStyle[] = [ { - backgroundColor: "#b1008e", - borderColor: "#686868", + backgroundColor: '#b1008e', + borderColor: '#686868', }, { height: 80, @@ -31,8 +31,8 @@ const trackOnStyle: ViewStyle[] = [ ] const thumbOffStyle: ViewStyle[] = [ { - backgroundColor: "#b1008e", - borderColor: "#686868", + backgroundColor: '#b1008e', + borderColor: '#686868', }, { height: 80, @@ -40,19 +40,22 @@ const thumbOffStyle: ViewStyle[] = [ }, ] const thumbOnStyle: ViewStyle[] = [ - { backgroundColor: "#f0c" }, + { backgroundColor: '#f0c' }, { height: 80, borderRadius: 0, - borderColor: "#686868", + borderColor: '#686868', }, ] -storiesOf("Switch", module) +storiesOf('Switch', module) .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add("Behaviour", () => ( + .add('Behaviour', () => ( <Story> - <UseCase text="The Toggle Switch" usage="Use the switch to represent on/off states."> + <UseCase + text="The Toggle Switch" + usage="Use the switch to represent on/off states." + > <Toggle initial={false}> {({ on, toggle }) => <Switch value={on} onToggle={toggle} />} </Toggle> @@ -65,17 +68,23 @@ storiesOf("Switch", module) </UseCase> </Story> )) - .add("Styling", () => ( + .add('Styling', () => ( <Story> <UseCase text="Custom Styling" usage="Promise me this won't happen."> <Toggle initial={false}> {({ on, toggle }) => ( <View> <Switch - trackOnStyle={{ backgroundColor: "green", borderColor: "black" }} - trackOffStyle={{ backgroundColor: "red", borderColor: "maroon" }} - thumbOnStyle={{ backgroundColor: "cyan" }} - thumbOffStyle={{ backgroundColor: "pink" }} + trackOnStyle={{ + backgroundColor: 'green', + borderColor: 'black', + }} + trackOffStyle={{ + backgroundColor: 'red', + borderColor: 'maroon', + }} + thumbOnStyle={{ backgroundColor: 'cyan' }} + thumbOffStyle={{ backgroundColor: 'pink' }} value={on} onToggle={toggle} /> diff --git a/app/components/switch/switch.tsx b/app/components/switch/switch.tsx index 0813747..bad81fc 100644 --- a/app/components/switch/switch.tsx +++ b/app/components/switch/switch.tsx @@ -1,7 +1,12 @@ -import React from "react" -import { ViewStyle, Animated, Easing, TouchableWithoutFeedback } from "react-native" -import { color } from "../../theme" -import { SwitchProps } from "./switch.props" +import React from 'react' +import { + ViewStyle, + Animated, + Easing, + TouchableWithoutFeedback, +} from 'react-native' +import { color } from '../../theme' +import { SwitchProps } from './switch.props' // dimensions const THUMB_SIZE = 30 @@ -15,7 +20,7 @@ const BORDER_RADIUS = (THUMB_SIZE * 3) / 4 const ON_COLOR = color.primary const OFF_COLOR = color.palette.offWhite const BORDER_ON_COLOR = ON_COLOR -const BORDER_OFF_COLOR = "rgba(0, 0, 0, 0.1)" +const BORDER_OFF_COLOR = 'rgba(0, 0, 0, 0.1)' // animation const DURATION = 250 @@ -31,7 +36,7 @@ const TRACK = { // the thumb always has these props const THUMB: ViewStyle = { - position: "absolute", + position: 'absolute', width: THUMB_SIZE, height: THUMB_SIZE, borderColor: BORDER_OFF_COLOR, @@ -71,10 +76,10 @@ export function Switch(props: SwitchProps) { } }, [props.value]) - const handlePress = React.useMemo(() => () => props.onToggle && props.onToggle(!props.value), [ - props.onToggle, - props.value, - ]) + const handlePress = React.useMemo( + () => () => props.onToggle && props.onToggle(!props.value), + [props.onToggle, props.value], + ) if (!timer) { return null diff --git a/app/components/text-field/text-field.story.tsx b/app/components/text-field/text-field.story.tsx index 74a4da0..20c73a4 100644 --- a/app/components/text-field/text-field.story.tsx +++ b/app/components/text-field/text-field.story.tsx @@ -1,12 +1,12 @@ /* eslint-disable react-native/no-inline-styles */ /* eslint-disable react-native/no-color-literals */ -import * as React from "react" -import { storiesOf } from "@storybook/react-native" -import { StoryScreen, Story, UseCase } from "../../../storybook/views" -import { Text, TextField } from "../" -import { State } from "react-powerplug" -import { ViewStyle, TextStyle, Alert } from "react-native" +import * as React from 'react' +import { storiesOf } from '@storybook/react-native' +import { StoryScreen, Story, UseCase } from '../../../storybook/views' +import { Text, TextField } from '../' +import { State } from 'react-powerplug' +import { ViewStyle, TextStyle, Alert } from 'react-native' declare let module @@ -14,24 +14,27 @@ const styleArray: ViewStyle[] = [{ paddingHorizontal: 30 }, { borderWidth: 30 }] const inputStyleArray: TextStyle[] = [ { - backgroundColor: "rebeccapurple", - color: "white", + backgroundColor: 'rebeccapurple', + color: 'white', padding: 40, }, { borderWidth: 10, borderRadius: 4, - borderColor: "#7fff00", + borderColor: '#7fff00', }, ] let alertWhenFocused = true -storiesOf("TextField", module) +storiesOf('TextField', module) .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add("Labelling", () => ( + .add('Labelling', () => ( <Story> - <UseCase text="Normal text" usage="Use placeholder and label to set the text."> - <State initial={{ value: "" }}> + <UseCase + text="Normal text" + usage="Use placeholder and label to set the text." + > + <State initial={{ value: '' }}> {({ state, setState }) => ( <TextField onChangeText={(value) => setState({ value })} @@ -43,8 +46,11 @@ storiesOf("TextField", module) </State> </UseCase> - <UseCase text="i18n text" usage="Use placeholderTx and labelTx for i18n lookups"> - <State initial={{ value: "" }}> + <UseCase + text="i18n text" + usage="Use placeholderTx and labelTx for i18n lookups" + > + <State initial={{ value: '' }}> {({ state, setState }) => ( <TextField onChangeText={(value) => setState({ value })} @@ -57,14 +63,14 @@ storiesOf("TextField", module) </UseCase> </Story> )) - .add("Style Overrides", () => ( + .add('Style Overrides', () => ( <Story> <UseCase noPad text="Container Styles" usage="Useful for applying margins when laying out a form to remove padding if the form brings its own." > - <State initial={{ value: "Inigo" }}> + <State initial={{ value: 'Inigo' }}> {({ state, setState }) => ( <TextField onChangeText={(value) => setState({ value })} @@ -74,7 +80,7 @@ storiesOf("TextField", module) /> )} </State> - <State initial={{ value: "Montoya" }}> + <State initial={{ value: 'Montoya' }}> {({ state, setState }) => ( <TextField onChangeText={(value) => setState({ value })} @@ -89,19 +95,19 @@ storiesOf("TextField", module) text="Input Styles" usage="Useful for 1-off exceptions. Try to steer towards presets for this kind of thing." > - <State initial={{ value: "fancy colour" }}> + <State initial={{ value: 'fancy colour' }}> {({ state, setState }) => ( <TextField onChangeText={(value) => setState({ value })} value={state.value} label="Name" inputStyle={{ - backgroundColor: "rebeccapurple", - color: "white", + backgroundColor: 'rebeccapurple', + color: 'white', padding: 40, borderWidth: 10, borderRadius: 4, - borderColor: "hotpink", + borderColor: 'hotpink', }} /> )} @@ -109,8 +115,11 @@ storiesOf("TextField", module) <Text text="* attention designers: i am so sorry" preset="secondary" /> </UseCase> - <UseCase text="Style array" usage="Useful for 1-off exceptions, but using style arrays."> - <State initial={{ value: "fancy colour" }}> + <UseCase + text="Style array" + usage="Useful for 1-off exceptions, but using style arrays." + > + <State initial={{ value: 'fancy colour' }}> {({ state, setState }) => ( <TextField onChangeText={(value) => setState({ value })} @@ -125,29 +134,29 @@ storiesOf("TextField", module) </UseCase> </Story> )) - .add("Ref Forwarding", () => ( + .add('Ref Forwarding', () => ( <Story> <UseCase text="Ref Forwarding" usage=""> - <State initial={{ value: "fancy colour" }}> + <State initial={{ value: 'fancy colour' }}> {({ state, setState }) => ( <TextField onChangeText={(value) => setState({ value })} value={state.value} label="Name" inputStyle={{ - backgroundColor: "rebeccapurple", - color: "white", + backgroundColor: 'rebeccapurple', + color: 'white', padding: 40, borderWidth: 10, borderRadius: 4, - borderColor: "hotpink", + borderColor: 'hotpink', }} forwardedRef={(ref) => ref} onFocus={() => { if (alertWhenFocused) { // Prevent text field focus from being repeatedly triggering alert alertWhenFocused = false - Alert.alert("Text field focuesed with forwarded ref!") + Alert.alert('Text field focuesed with forwarded ref!') } }} /> diff --git a/app/components/text-field/text-field.tsx b/app/components/text-field/text-field.tsx index eea1a70..4da1591 100644 --- a/app/components/text-field/text-field.tsx +++ b/app/components/text-field/text-field.tsx @@ -1,8 +1,15 @@ -import React from "react" -import { StyleProp, TextInput, TextInputProps, TextStyle, View, ViewStyle } from "react-native" -import { color, spacing, typography } from "../../theme" -import { translate, TxKeyPath } from "../../i18n" -import { Text } from "../text/text" +import React from 'react' +import { + StyleProp, + TextInput, + TextInputProps, + TextStyle, + View, + ViewStyle, +} from 'react-native' +import { color, spacing, typography } from '../../theme' +import { translate, TxKeyPath } from '../../i18n' +import { Text } from '../text/text' // the base styling for the container const CONTAINER: ViewStyle = { @@ -71,7 +78,7 @@ export function TextField(props: TextFieldProps) { placeholder, labelTx, label, - preset = "default", + preset = 'default', style: styleOverride, inputStyle: inputStyleOverride, forwardedRef, @@ -80,7 +87,9 @@ export function TextField(props: TextFieldProps) { const containerStyles = [CONTAINER, PRESETS[preset], styleOverride] const inputStyles = [INPUT, inputStyleOverride] - const actualPlaceholder = placeholderTx ? translate(placeholderTx) : placeholder + const actualPlaceholder = placeholderTx + ? translate(placeholderTx) + : placeholder return ( <View style={containerStyles}> diff --git a/app/components/text/text.presets.ts b/app/components/text/text.presets.ts index 9622268..4693417 100644 --- a/app/components/text/text.presets.ts +++ b/app/components/text/text.presets.ts @@ -1,5 +1,5 @@ -import { TextStyle } from "react-native" -import { color, typography } from "../../theme" +import { TextStyle } from 'react-native' +import { color, typography } from '../../theme' /** * All text will start off looking like this. @@ -24,12 +24,12 @@ export const presets = { /** * A bold version of the default text. */ - bold: { ...BASE, fontWeight: "bold" } as TextStyle, + bold: { ...BASE, fontWeight: 'bold' } as TextStyle, /** * Large headers. */ - header: { ...BASE, fontSize: 24, fontWeight: "bold" } as TextStyle, + header: { ...BASE, fontSize: 24, fontWeight: 'bold' } as TextStyle, /** * Field labels that appear on forms above the inputs. diff --git a/app/components/text/text.props.ts b/app/components/text/text.props.ts index d2c55dc..79ee12c 100644 --- a/app/components/text/text.props.ts +++ b/app/components/text/text.props.ts @@ -1,7 +1,7 @@ -import { StyleProp, TextProps as TextProperties, TextStyle } from "react-native" -import i18n from "i18n-js" -import { TextPresets } from "./text.presets" -import { TxKeyPath } from "../../i18n" +import { StyleProp, TextProps as TextProperties, TextStyle } from 'react-native' +import i18n from 'i18n-js' +import { TextPresets } from './text.presets' +import { TxKeyPath } from '../../i18n' export interface TextProps extends TextProperties { /** diff --git a/app/components/text/text.story.tsx b/app/components/text/text.story.tsx index 5582c1b..4535194 100644 --- a/app/components/text/text.story.tsx +++ b/app/components/text/text.story.tsx @@ -1,12 +1,12 @@ /* eslint-disable react-native/no-inline-styles */ /* eslint-disable react-native/no-color-literals */ -import * as React from "react" -import { View, ViewStyle } from "react-native" -import { storiesOf } from "@storybook/react-native" -import { StoryScreen, Story, UseCase } from "../../../storybook/views" -import { color } from "../../theme" -import { Text } from "./text" +import * as React from 'react' +import { View, ViewStyle } from 'react-native' +import { storiesOf } from '@storybook/react-native' +import { StoryScreen, Story, UseCase } from '../../../storybook/views' +import { color } from '../../theme' +import { Text } from './text' declare let module @@ -14,21 +14,23 @@ const VIEWSTYLE = { flex: 1, backgroundColor: color.storybookDarkBg, } -const viewStyleArray: ViewStyle[] = [VIEWSTYLE, { backgroundColor: "#7fff00" }] +const viewStyleArray: ViewStyle[] = [VIEWSTYLE, { backgroundColor: '#7fff00' }] -storiesOf("Text", module) +storiesOf('Text', module) .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add("Style Presets", () => ( + .add('Style Presets', () => ( <Story> <UseCase text="default" usage="Used for normal body text."> <View style={VIEWSTYLE}> <Text>Hello!</Text> <Text style={{ paddingTop: 10 }}> - Check out{"\n"} - my{"\n"} + Check out{'\n'} + my{'\n'} line height </Text> - <Text style={{ paddingTop: 10 }}>The quick brown fox jumped over the slow lazy dog.</Text> + <Text style={{ paddingTop: 10 }}> + The quick brown fox jumped over the slow lazy dog. + </Text> <Text>$123,456,789.00</Text> </View> </UseCase> @@ -44,7 +46,7 @@ storiesOf("Text", module) </UseCase> </Story> )) - .add("Passing Content", () => ( + .add('Passing Content', () => ( <Story> <UseCase text="text" @@ -68,22 +70,25 @@ storiesOf("Text", module) <Text>Passing strings as children.</Text> </View> </UseCase> - <UseCase text="nested children" usage="You can embed them and change styles too."> + <UseCase + text="nested children" + usage="You can embed them and change styles too." + > <View style={VIEWSTYLE}> <Text> - {" "} + {' '} Hello <Text preset="bold">bolded</Text> World. </Text> </View> </UseCase> </Story> )) - .add("Styling", () => ( + .add('Styling', () => ( <Story> <UseCase text="Style array" usage="Text with style array"> <View style={viewStyleArray}> <Text> - {" "} + {' '} Hello <Text preset="bold">bolded</Text> World. </Text> </View> diff --git a/app/components/text/text.tsx b/app/components/text/text.tsx index 3ea613b..b04b654 100644 --- a/app/components/text/text.tsx +++ b/app/components/text/text.tsx @@ -1,8 +1,8 @@ -import * as React from "react" -import { Text as ReactNativeText } from "react-native" -import { presets } from "./text.presets" -import { TextProps } from "./text.props" -import { translate } from "../../i18n" +import * as React from 'react' +import { Text as ReactNativeText } from 'react-native' +import { presets } from './text.presets' +import { TextProps } from './text.props' +import { translate } from '../../i18n' /** * For your text displaying needs. @@ -11,7 +11,15 @@ import { translate } from "../../i18n" */ export function Text(props: TextProps) { // grab the props - const { preset = "default", tx, txOptions, text, children, style: styleOverride, ...rest } = props + const { + preset = 'default', + tx, + txOptions, + text, + children, + style: styleOverride, + ...rest + } = props // figure out which content to use const i18nText = tx && translate(tx, txOptions) diff --git a/app/components/tweaks/tweaks.story.tsx b/app/components/tweaks/tweaks.story.tsx index 7ff70d6..770d50f 100644 --- a/app/components/tweaks/tweaks.story.tsx +++ b/app/components/tweaks/tweaks.story.tsx @@ -1,12 +1,12 @@ -import * as React from "react" -import { storiesOf } from "@storybook/react-native" -import { StoryScreen, Story, UseCase } from "../../../storybook/views" -import { color } from "../../theme" -import { Tweaks } from "./tweaks" +import * as React from 'react' +import { storiesOf } from '@storybook/react-native' +import { StoryScreen, Story, UseCase } from '../../../storybook/views' +import { color } from '../../theme' +import { Tweaks } from './tweaks' -storiesOf("Tweaks", module) +storiesOf('Tweaks', module) .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add("Style Presets", () => ( + .add('Style Presets', () => ( <Story> <UseCase text="Primary" usage="The primary."> <Tweaks style={{ backgroundColor: color.error }} /> diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx index d6f4d8c..1985174 100644 --- a/app/components/tweaks/tweaks.tsx +++ b/app/components/tweaks/tweaks.tsx @@ -1,4 +1,4 @@ -import * as React from "react" +import * as React from 'react' import { ScrollView, StyleProp, @@ -8,20 +8,20 @@ import { ViewStyle, StyleSheet, Button, -} from "react-native" -import { observer } from "mobx-react-lite" -import { color, typography } from "../../theme" -import { Text } from "../" -import { flatten } from "ramda" -import Slider from "@react-native-community/slider" -import { useState } from "react" -import Accordion from "react-native-collapsible/Accordion" -import * as Animatable from "react-native-animatable" -import Icon from "react-native-vector-icons/MaterialCommunityIcons" -import {Switch} from "react-native-elements" +} from 'react-native' +import { observer } from 'mobx-react-lite' +import { color, typography } from '../../theme' +import { Text } from '../' +import { flatten } from 'ramda' +import Slider from '@react-native-community/slider' +import { useState } from 'react' +import Accordion from 'react-native-collapsible/Accordion' +import * as Animatable from 'react-native-animatable' +import Icon from 'react-native-vector-icons/MaterialCommunityIcons' +import { Switch } from 'react-native-elements' const CONTAINER: ViewStyle = { - justifyContent: "center", + justifyContent: 'center', } const TEXT: TextStyle = { @@ -42,21 +42,23 @@ export interface TweaksProps { /** * Describe your component here */ -export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element { +export const Tweaks = observer(function Tweaks( + props: TweaksProps, +): JSX.Element { const { style, physics, setPhysics } = props // const styles = flatten([CONTAINER, style]) const content = [ { - title: "Physics", + title: 'Physics', content: ( <View> <Text preset="fieldLabel" text="Gravity" /> <Switch color="#a991f1" trackColor={{ - false: "#62686E", - true: "#a991f1" + false: '#62686E', + true: '#a991f1', }} style={styles.switch} value={physics.gravityOn} @@ -64,7 +66,7 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element setPhysics({ ...physics, gravityOn: !physics.gravityOn }) }} /> - <Text preset="fieldLabel" text={"Gravity: " + physics.gravity} /> + <Text preset="fieldLabel" text={'Gravity: ' + physics.gravity} /> <Slider minimumTrackTintColor="#a991f1" maximumTrackTintColor="#242730" @@ -78,7 +80,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element value={physics.gravity} step={0.01} /> - <Text preset="fieldLabel" text={"Repulsive force: " + physics.charge} /> + <Text + preset="fieldLabel" + text={'Repulsive force: ' + physics.charge} + /> <Slider minimumTrackTintColor="#a991f1" maximumTrackTintColor="#242730" @@ -92,7 +97,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element value={physics.charge} step={1} /> - <Text preset="fieldLabel" text={"Link Force: " + physics.linkStrength} /> + <Text + preset="fieldLabel" + text={'Link Force: ' + physics.linkStrength} + /> <Slider minimumTrackTintColor="#a991f1" maximumTrackTintColor="#242730" @@ -106,7 +114,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element value={physics.linkStrength} step={0.01} /> - <Text preset="fieldLabel" text={"'Link Iterations': " + physics.linkIts} /> + <Text + preset="fieldLabel" + text={"'Link Iterations': " + physics.linkIts} + /> <Slider minimumTrackTintColor="#a991f1" maximumTrackTintColor="#242730" @@ -121,11 +132,11 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element step={1} /> <Text preset="fieldLabel" text="Collision" /> - <Switch + <Switch color="#a991f1" trackColor={{ - false: "#62686E", - true: "#a991f1" + false: '#62686E', + true: '#a991f1', }} style={styles.switch} value={physics.collision} @@ -133,7 +144,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element setPhysics({ ...physics, collision: !physics.collision }) }} /> - <Text preset="fieldLabel" text={"Alpha Decay: " + physics.alphaDecay} /> + <Text + preset="fieldLabel" + text={'Alpha Decay: ' + physics.alphaDecay} + /> <Slider style={styles.slider} minimumTrackTintColor="#a991f1" @@ -147,7 +161,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element value={physics.alphaDecay} step={0.01} /> - <Text preset="fieldLabel" text={"Alhpa Target: " + physics.alphaTarget} /> + <Text + preset="fieldLabel" + text={'Alhpa Target: ' + physics.alphaTarget} + /> <Slider minimumTrackTintColor="#a991f1" maximumTrackTintColor="#242730" @@ -161,7 +178,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element value={physics.alphaTarget} step={0.1} /> - <Text preset="fieldLabel" text={"Viscosity: " + physics.velocityDecay} /> + <Text + preset="fieldLabel" + text={'Viscosity: ' + physics.velocityDecay} + /> <Slider minimumTrackTintColor="#a991f1" maximumTrackTintColor="#242730" @@ -175,12 +195,12 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element value={physics.velocityDecay} step={0.01} /> - <Text preset="fieldLabel" text={"Galaxy Mode (3D-only)"} /> - <Switch + <Text preset="fieldLabel" text={'Galaxy Mode (3D-only)'} /> + <Switch color="#a991f1" trackColor={{ - false: "#62686E", - true: "#a991f1" + false: '#62686E', + true: '#a991f1', }} style={styles.switch} value={physics.galaxy} @@ -192,15 +212,15 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element ), }, { - title: "Visual", + title: 'Visual', content: ( <View> <Text preset="fieldLabel" text="Colorful" /> - <Switch + <Switch color="#a991f1" trackColor={{ - false: "#62686E", - true: "#a991f1" + false: '#62686E', + true: '#a991f1', }} style={styles.switch} value={physics.colorful} @@ -209,11 +229,11 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element }} /> <Text preset="fieldLabel" text="Hover highlight" /> - <Switch + <Switch color="#a991f1" trackColor={{ - false: "#62686E", - true: "#a991f1" + false: '#62686E', + true: '#a991f1', }} style={styles.switch} value={physics.hover} @@ -221,7 +241,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element setPhysics({ ...physics, hover: !physics.hover }) }} /> - <Text preset="fieldLabel" text={"Line Opacity: " + physics.linkOpacity} /> + <Text + preset="fieldLabel" + text={'Line Opacity: ' + physics.linkOpacity} + /> <Slider minimumTrackTintColor="#a991f1" maximumTrackTintColor="#242730" @@ -235,7 +258,7 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element value={physics.linkOpacity} step={0.01} /> - <Text preset="fieldLabel" text={"Line width: " + physics.linkWidth} /> + <Text preset="fieldLabel" text={'Line width: ' + physics.linkWidth} /> <Slider minimumTrackTintColor="#a991f1" maximumTrackTintColor="#242730" @@ -249,7 +272,7 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element value={physics.linkWidth} step={0.1} /> - <Text preset="fieldLabel" text={"Node size: " + physics.nodeRel} /> + <Text preset="fieldLabel" text={'Node size: ' + physics.nodeRel} /> <Slider minimumTrackTintColor="#a991f1" maximumTrackTintColor="#242730" @@ -263,7 +286,7 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element value={physics.nodeRel} step={0.01} /> - <Text preset="fieldLabel" text={"Particles: " + physics.particles} /> + <Text preset="fieldLabel" text={'Particles: ' + physics.particles} /> <Slider minimumTrackTintColor="#a991f1" maximumTrackTintColor="#242730" @@ -277,7 +300,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element value={physics.particles} step={1} /> - <Text preset="fieldLabel" text={"Particle Size: " + physics.particleWidth} /> + <Text + preset="fieldLabel" + text={'Particle Size: ' + physics.particleWidth} + /> <Slider minimumTrackTintColor="#a991f1" maximumTrackTintColor="#242730" @@ -292,11 +318,11 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element step={0.1} /> <Text preset="fieldLabel" text="Labels" /> - <Switch + <Switch color="#a991f1" trackColor={{ - false: "#62686E", - true: "#a991f1" + false: '#62686E', + true: '#a991f1', }} style={styles.switch} value={physics.labels} @@ -306,7 +332,7 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element /> <Text preset="fieldLabel" - text={"Scale when labels become visible: " + physics.labelScale} + text={'Scale when labels become visible: ' + physics.labelScale} /> <Slider minimumTrackTintColor="#a991f1" @@ -325,11 +351,8 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element ), }, { - title: "Modes", - content: ( - <View> - </View> - ), + title: 'Modes', + content: <View></View>, }, ] @@ -367,13 +390,15 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element if (tweaks) { return ( <View style={styles.container}> - <View style={{ height: 30, width: "100%", backgroundColor: "#2a2e38" }}> + <View + style={{ height: 30, width: '100%', backgroundColor: '#2a2e38' }} + > <TouchableOpacity style={{ width: 30, - color: "#a991f1", - textAlign: "center", - marginLeft: "auto", + color: '#a991f1', + textAlign: 'center', + marginLeft: 'auto', padding: 5, }} onPress={() => { @@ -405,11 +430,11 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element setTweaks(true) }} style={{ - position: "absolute", + position: 'absolute', top: 50, left: 50, width: 30, - color: "#ffffff", + color: '#ffffff', zIndex: 100, }} > @@ -421,17 +446,17 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element return ( <View style={{ - position: "absolute", - top: "5%", - left: "5%", + position: 'absolute', + top: '5%', + left: '5%', zIndex: 100, width: 300, - backgroundColor: "#000000", + backgroundColor: '#000000', padding: 20, }} > <Text preset="bold" text="Physics" /> - <Text preset="fieldLabel" text={"Repulsive force: " + physics.charge} /> + <Text preset="fieldLabel" text={'Repulsive force: ' + physics.charge} /> <Slider minimumTrackTintColor="#a991f1" maximumTrackTintColor="#242730" @@ -445,7 +470,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element value={physics.charge} step={1} /> - <Text preset="fieldLabel" text={"Link Force: " + physics.linkStrength} /> + <Text + preset="fieldLabel" + text={'Link Force: ' + physics.linkStrength} + /> <Slider minimumTrackTintColor="#a991f1" maximumTrackTintColor="#242730" @@ -459,7 +487,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element value={physics.linkStrength} step={0.1} /> - <Text preset="fieldLabel" text={"'Link Iterations': " + physics.linkIts} /> + <Text + preset="fieldLabel" + text={"'Link Iterations': " + physics.linkIts} + /> <Slider minimumTrackTintColor="#a991f1" maximumTrackTintColor="#242730" @@ -474,12 +505,12 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element step={1} /> <Text preset="fieldLabel" text="Collision" /> - <Switch - color="#a991f1" - trackColor={{ - false: "#62686E", - true: "#a991f1" - }} + <Switch + color="#a991f1" + trackColor={{ + false: '#62686E', + true: '#a991f1', + }} style={styles.switch} value={physics.collision} onValueChange={() => { @@ -487,7 +518,7 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element }} /> <Text preset="bold" text="Visual" /> - <Text preset="fieldLabel" text={"Particles: " + physics.particles} /> + <Text preset="fieldLabel" text={'Particles: ' + physics.particles} /> <Slider minimumTrackTintColor="#a991f1" maximumTrackTintColor="#242730" @@ -503,12 +534,12 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element /> <Text preset="bold" text="Modes" /> <Text preset="fieldLabel" text="Expandable Graph" /> - <Switch - color="#a991f1" - trackColor={{ - false: "#62686E", - true: "#a991f1" - }} + <Switch + color="#a991f1" + trackColor={{ + false: '#62686E', + true: '#a991f1', + }} style={styles.switch} value={physics.collapse} onValueChange={() => { @@ -516,12 +547,12 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element }} /> <Text preset="fieldLabel" text="3D" /> - <Switch - color="#a991f1" - trackColor={{ - false: "#62686E", - true: "#a991f1" - }} + <Switch + color="#a991f1" + trackColor={{ + false: '#62686E', + true: '#a991f1', + }} style={styles.switch} value={physics.threedim} onValueChange={() => { @@ -535,85 +566,85 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element const styles = StyleSheet.create({ container: { - display: "flex", - backgroundColor: "#2a2e38", - position: "absolute", + display: 'flex', + backgroundColor: '#2a2e38', + position: 'absolute', zIndex: 5, - marginLeft: "2%", - marginTop: "2%", + marginLeft: '2%', + marginTop: '2%', maxWidth: 275, borderRadius: 10, - borderStyle: "solid", + borderStyle: 'solid', borderWidth: 10, - borderColor: "#2a2e38", - maxHeight: "80%", + borderColor: '#2a2e38', + maxHeight: '80%', paddingBottom: 20, }, title: { - textAlign: "left", + textAlign: 'left', fontSize: 22, - fontWeight: "300", + fontWeight: '300', marginBottom: 20, paddingLeft: 10, }, header: { - backgroundColor: "#2a2e38", + backgroundColor: '#2a2e38', padding: 10, paddingBottom: 20, - textAlign: "left", + textAlign: 'left', }, headerText: { - textAlign: "left", + textAlign: 'left', paddingLeft: 30, fontSize: 16, - fontWeight: "500", + fontWeight: '500', }, content: { padding: 20, paddingLeft: 60, - backgroundColor: "#000000", + backgroundColor: '#000000', }, active: { - backgroundColor: "#2a2e38", + backgroundColor: '#2a2e38', }, inactive: { - backgroundColor: "#2a2e38", + backgroundColor: '#2a2e38', }, selectors: { marginBottom: 10, - flexDirection: "row", - justifyContent: "center", + flexDirection: 'row', + justifyContent: 'center', }, selector: { - backgroundColor: "#2a2e38", + backgroundColor: '#2a2e38', padding: 10, }, activeSelector: { - fontWeight: "bold", + fontWeight: 'bold', }, selectTitle: { fontSize: 14, - fontWeight: "500", + fontWeight: '500', padding: 10, }, multipleToggle: { - flexDirection: "row", - justifyContent: "center", + flexDirection: 'row', + justifyContent: 'center', marginVertical: 30, - alignItems: "center", + alignItems: 'center', }, multipleToggle__title: { fontSize: 16, marginRight: 8, }, slider: { - minimumTrackTintColor: "#a991f1", - thumbTintColor: "#a991f1", + minimumTrackTintColor: '#a991f1', + thumbTintColor: '#a991f1', height: 40, - width: "90%", + width: '90%', }, switch: { - width: "5", + width: '5', height: 20, marginVertical: 10, }, diff --git a/app/components/wallpaper/wallpaper.presets.ts b/app/components/wallpaper/wallpaper.presets.ts index 3885b8f..148ad5c 100644 --- a/app/components/wallpaper/wallpaper.presets.ts +++ b/app/components/wallpaper/wallpaper.presets.ts @@ -1,10 +1,10 @@ -import { ImageStyle } from "react-native" +import { ImageStyle } from 'react-native' /** * All wallpaper will start off looking like this. */ const BASE: ImageStyle = { - position: "absolute", + position: 'absolute', top: 0, left: 0, bottom: 0, @@ -22,7 +22,7 @@ export const presets = { */ stretch: { ...BASE, - resizeMode: "stretch", + resizeMode: 'stretch', width: null, // Have to set these to null because android ¯\_(ツ)_/¯ height: null, } as ImageStyle, diff --git a/app/components/wallpaper/wallpaper.props.ts b/app/components/wallpaper/wallpaper.props.ts index 592bac9..9d97f12 100644 --- a/app/components/wallpaper/wallpaper.props.ts +++ b/app/components/wallpaper/wallpaper.props.ts @@ -1,5 +1,5 @@ -import { ImageStyle, StyleProp } from "react-native" -import { WallpaperPresets } from "./wallpaper.presets" +import { ImageStyle, StyleProp } from 'react-native' +import { WallpaperPresets } from './wallpaper.presets' export interface WallpaperProps { /** diff --git a/app/components/wallpaper/wallpaper.story.tsx b/app/components/wallpaper/wallpaper.story.tsx index 8f5488a..14a5f62 100644 --- a/app/components/wallpaper/wallpaper.story.tsx +++ b/app/components/wallpaper/wallpaper.story.tsx @@ -1,13 +1,13 @@ -import * as React from "react" -import { storiesOf } from "@storybook/react-native" -import { StoryScreen, Story, UseCase } from "../../../storybook/views" -import { Wallpaper } from "./wallpaper" +import * as React from 'react' +import { storiesOf } from '@storybook/react-native' +import { StoryScreen, Story, UseCase } from '../../../storybook/views' +import { Wallpaper } from './wallpaper' declare let module -storiesOf("Wallpaper", module) +storiesOf('Wallpaper', module) .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add("Style Presets", () => ( + .add('Style Presets', () => ( <Story> <UseCase text="default/stretch" usage="Full screen wallpaper image."> <Wallpaper /> diff --git a/app/components/wallpaper/wallpaper.tsx b/app/components/wallpaper/wallpaper.tsx index 7aaad37..f5e24f1 100644 --- a/app/components/wallpaper/wallpaper.tsx +++ b/app/components/wallpaper/wallpaper.tsx @@ -1,7 +1,7 @@ -import React from "react" -import { AutoImage as Image } from "../auto-image/auto-image" -import { presets } from "./wallpaper.presets" -import { WallpaperProps } from "./wallpaper.props" +import React from 'react' +import { AutoImage as Image } from '../auto-image/auto-image' +import { presets } from './wallpaper.presets' +import { WallpaperProps } from './wallpaper.props' //const defaultImage = require("./bg.png") @@ -12,7 +12,7 @@ import { WallpaperProps } from "./wallpaper.props" */ export function Wallpaper(props: WallpaperProps) { // grab the props - const { preset = "stretch", style: styleOverride, backgroundImage } = props + const { preset = 'stretch', style: styleOverride, backgroundImage } = props // assemble the style const presetToUse = presets[preset] || presets.stretch @@ -21,5 +21,5 @@ export function Wallpaper(props: WallpaperProps) { // figure out which image to use //const source = backgroundImage || defaultImage - return null//<Image source={source} style={styles} /> + return null //<Image source={source} style={styles} /> } |