Merge pull request #6774 from StoDevX/hawken/remove-glamorous

modules/markdown/code.tsx

@@ -1,5 +1,15 @@
-import glamorous from 'glamorous-native'
+import React from 'react'
+import {Text, StyleSheet, TextProps} from 'react-native'
 
-export const Code = glamorous.text({})
+const styles = StyleSheet.create({
+	code: {},
+	codeBlock: {},
+})
 
-export const CodeBlock = glamorous.text({})
+export const Code = (props: TextProps): JSX.Element => (
+	<Text {...props} style={[styles.code, props.style]} />
+)
+
+export const CodeBlock = (props: TextProps): JSX.Element => (
+	<Text {...props} style={[styles.codeBlock, props.style]} />
+)

modules/markdown/formatting.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import {Platform, Text, StyleSheet, TextProps} from 'react-native'
+import {SelectableText} from './selectable'
+import {iOSUIKit, material} from 'react-native-typography'
+
+const styles = StyleSheet.create({
+	text: {
+		...Platform.select({
+			ios: iOSUIKit.bodyObject,
+			android: material.body1Object,
+		}),
+	},
+	strong: {
+		fontWeight: 'bold',
+	},
+	emph: {
+		fontStyle: 'italic',
+	},
+	paragraph: {
+		marginVertical: 3,
+		paddingRight: 4,
+		...Platform.select({
+			ios: iOSUIKit.bodyObject,
+			android: material.body1Object,
+		}),
+	},
+	blockQuote: {
+		marginHorizontal: 8,
+		marginVertical: 5,
+		fontStyle: 'italic',
+		...Platform.select({
+			ios: iOSUIKit.calloutObject,
+			android: material.captionObject,
+		}),
+	},
+})
+
+export const BaseText = (props: TextProps): JSX.Element => (
+	<Text {...props} style={[styles.text, props.style]} />
+)
+
+export const Paragraph = (
+	props: Parameters<typeof SelectableText>[0],
+): JSX.Element => (
+	<SelectableText {...props} style={[styles.paragraph, props.style]} />
+)
+
+export const BlockQuote = (
+	props: Parameters<typeof Paragraph>[0],
+): JSX.Element => (
+	<Paragraph {...props} style={[styles.blockQuote, props.style]} />
+)
+
+export const Strong = (props: TextProps): JSX.Element => (
+	<Text {...props} style={[styles.strong, props.style]} />
+)
+
+export const Emph = (props: TextProps): JSX.Element => (
+	<Text {...props} style={[styles.emph, props.style]} />
+)

modules/markdown/heading.tsx

@@ -1,56 +1,60 @@
 import * as React from 'react'
-import {Platform, StyleProp, TextStyle} from 'react-native'
-import glamorous from 'glamorous-native'
+import {Platform, StyleSheet} from 'react-native'
 import {SelectableText} from './selectable'
 import {iOSUIKit, material} from 'react-native-typography'
 
-export const Header = glamorous(SelectableText)({
-	marginTop: 8,
-	marginBottom: 4,
+const styles = StyleSheet.create({
+	header: {
+		marginTop: 8,
+		marginBottom: 4,
+	},
+	h1: {
+		...Platform.select({
+			ios: iOSUIKit.title3EmphasizedObject,
+			android: material.headlineObject,
+		}),
+	},
+	h2: {
+		...Platform.select({
+			ios: iOSUIKit.title3Object,
+			android: material.titleObject,
+		}),
+	},
+	h3: {
+		...Platform.select({
+			ios: iOSUIKit.subheadEmphasizedObject,
+			android: material.subheadingObject,
+		}),
+	},
+	h4: {
+		...Platform.select({
+			ios: iOSUIKit.subheadObject,
+			android: material.buttonObject,
+		}),
+	},
 })
 
-const h1 = {
-	...Platform.select({
-		ios: iOSUIKit.title3EmphasizedObject,
-		android: material.headlineObject,
-	}),
-}
-
-const h2 = {
-	...Platform.select({
-		ios: iOSUIKit.title3Object,
-		android: material.titleObject,
-	}),
-}
-
-const h3 = {
-	...Platform.select({
-		ios: iOSUIKit.subheadEmphasizedObject,
-		android: material.subheadingObject,
-	}),
-}
-
-const h4 = {
-	...Platform.select({
-		ios: iOSUIKit.subheadObject,
-		android: material.buttonObject,
-	}),
-}
+export const Header = (
+	props: Parameters<typeof SelectableText>[0],
+): JSX.Element => (
+	<SelectableText {...props} style={[styles.header, props.style]} />
+)
 
-export const Heading = (
-	props: React.PropsWithChildren<{level: number; style: StyleProp<TextStyle>}>,
-): JSX.Element => {
-	switch (props.level) {
+export const Heading = ({
+	level,
+	...props
+}: Parameters<typeof Header>[0] & {level: number}): JSX.Element => {
+	switch (level) {
 		case 1:
-			return <Header style={[h1, props.style]}>{props.children}</Header>
+			return <Header {...props} style={[styles.h1, props.style]} />
 		case 2:
-			return <Header style={[h2, props.style]}>{props.children}</Header>
+			return <Header {...props} style={[styles.h2, props.style]} />
 		case 3:
-			return <Header style={[h3, props.style]}>{props.children}</Header>
+			return <Header {...props} style={[styles.h3, props.style]} />
 		case 4:
 		case 5:
 		case 6:
 		default:
-			return <Header style={[h4, props.style]}>{props.children}</Header>
+			return <Header {...props} style={[styles.h4, props.style]} />
 	}
 }

modules/markdown/image.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import {Image as RNImage, ImageProps, StyleSheet} from 'react-native'
+
+const styles = StyleSheet.create({
+	image: {},
+})
+
+export const Image = (props: ImageProps): JSX.Element => (
+	<RNImage {...props} style={[styles.image, props.style]} />
+)

modules/markdown/link.tsx

@@ -1,18 +1,23 @@
 import * as React from 'react'
 import Clipboard from '@react-native-community/clipboard'
-import glamorous from 'glamorous-native'
 import {openUrl} from '@frogpond/open-url'
 import {useActionSheet} from '@expo/react-native-action-sheet'
 import * as c from '@frogpond/colors'
-import {TextProps} from 'react-native'
+import {TextProps, StyleSheet, Text} from 'react-native'
 
-export const LinkText = glamorous.text({
-	textDecorationLine: 'underline',
-	textDecorationStyle: 'solid',
-	color: c.infoBlue,
+const styles = StyleSheet.create({
+	linkText: {
+		textDecorationLine: 'underline',
+		textDecorationStyle: 'solid',
+		color: c.infoBlue,
+	},
 })
 
-type Props = TextProps & {
+export const LinkText = (props: TextProps): JSX.Element => (
+	<Text {...props} style={[styles.linkText, props.style]} />
+)
+
+type Props = Parameters<typeof LinkText>[0] & {
 	href: string
 	title?: string
 }

modules/markdown/list.tsx

@@ -1,26 +1,39 @@
 import * as React from 'react'
-import glamorous from 'glamorous-native'
 import {BaseText, Paragraph} from './formatting'
-import {StyleProp, TextStyle} from 'react-native'
+import {ViewProps, StyleProp, View, StyleSheet, ViewStyle} from 'react-native'
+
+const styles = StyleSheet.create({
+	list: {},
+	listText: {
+		flex: 1,
+	},
+	listItem: {
+		alignItems: 'center',
+		flexDirection: 'row',
+	},
+})
 
 // the list itself
-export const List = glamorous.view({})
+export const List = (props: ViewProps): JSX.Element => (
+	<View {...props} style={[styles.list, props.style]} />
+)
 
 // the list item's text
-export const ListText = glamorous(Paragraph)({
-	flex: 1,
-})
+export const ListText = (
+	props: Parameters<typeof Paragraph>[0],
+): JSX.Element => (
+	<Paragraph {...props} style={[styles.listText, props.style]} />
+)
 
 // the list item's container box thing
-type Props = React.PropsWithChildren<{style: StyleProp<TextStyle>}>
-
-export class ListItem extends React.PureComponent<Props> {
-	render(): JSX.Element {
-		return (
-			<glamorous.View alignItems="center" flexDirection="row">
-				<BaseText>• </BaseText>
-				<ListText {...this.props} />
-			</glamorous.View>
-		)
-	}
-}
+export const ListItem = ({
+	style,
+	...props
+}: Parameters<typeof ListText>[0] & {
+	style: StyleProp<ViewStyle>
+}): JSX.Element => (
+	<View style={[styles.listItem, style]}>
+		<BaseText>• </BaseText>
+		<ListText {...props} />
+	</View>
+)