Design system improvements

apps/storybook-react/.storybook/preview.js

@@ -1,6 +1,5 @@
 import '../styles/globals.css'
 
-import React from 'react'
 import * as NextImage from 'next/image'
 import { DripsyProvider } from 'dripsy'
 

apps/storybook-react/pages/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import type { NextPage } from 'next'
 import Head from 'next/head'
 import Image from 'next/image'

apps/storybook-react/stories/pages/home.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import Home from '../../pages/index'
 
 export default {

packages/app/navigation/universal-tab-navigator/index.tsx

@@ -1,6 +1,5 @@
 // https://reactnavigation.org/docs/custom-navigators/#type-checking-navigators
 
-import React from 'react'
 import {
 	createNavigatorFactory,
 	DefaultNavigatorOptions,

packages/app/screens/login.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Modal } from 'design-system'
 import { Login } from 'app/components/login'
 

packages/design-system/pressable-scale/pressable-scale.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Meta } from '@storybook/react'
 
 import { Pressable } from './index'

packages/design-system/skeleton/skeleton.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Meta } from '@storybook/react'
 
 import { Skeleton } from './index'

packages/design-system/text/index.tsx

@@ -1,17 +1,34 @@
-import React, { ComponentProps } from 'react'
-import { Text as DripsyText, Theme } from 'dripsy'
+import { Theme, Text as DripsyText } from 'dripsy'
+import { ComponentProps, createContext, forwardRef, useContext } from 'react'
+import type { Text as TextType } from 'react-native'
 
 import { tw as tailwind } from 'design-system/tailwind'
 
 type Variant = keyof Theme['text']
 
-type TextProps = { tw?: string; variant?: Variant } & Omit<ComponentProps<typeof DripsyText>, 'variant'>
+type TextProps = ComponentProps<typeof DripsyText>
 
-// Note: You can wrap <DripsyText> in a <View> with a background color
-// to verify if the text is rendered correctly and if Capsize is working well.
+type Props = { tw?: string; variant?: Variant } & Pick<TextProps, 'onLayout' | 'children' | 'selectable' | 'sx'>
 
-function Text({ tw, sx, variant, ...props }: TextProps) {
-	return <DripsyText sx={{ ...sx, ...tailwind.style(tw) }} variant={variant} {...props} />
-}
+/**
+ * Text should inherit styles from parent text nodes.
+ */
+const ParentContext = createContext<{} | undefined>(undefined)
 
-export { Text }
+/**
+ * Note: You can wrap <DripsyText> in a <View> with a background color
+ * to verify if the text is rendered correctly and if Capsize is working well.
+ */
+export const Text = forwardRef<TextType, Props>(({ variant, onLayout, children, selectable, tw, sx }, ref) => {
+	const parentTw = useContext(ParentContext)
+
+	const compoundSx = { ...tailwind.style(parentTw), ...sx, ...tailwind.style(tw) }
+
+	return (
+		<DripsyText ref={ref} variant={variant} selectable={selectable} onLayout={onLayout} sx={compoundSx}>
+			<ParentContext.Provider value={compoundSx}>{children}</ParentContext.Provider>
+		</DripsyText>
+	)
+})
+
+Text.displayName = 'Text'

packages/design-system/text/text.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Meta } from '@storybook/react'
 
 import { Text } from './index'
@@ -10,6 +9,15 @@ export default {
 
 export const TextXS: React.VFC<{}> = () => <Text variant="text-xs">Hello World</Text>
 
+export const TextXSBoldAndPurple: React.VFC<{}> = () => (
+	<Text variant="text-xs" tw="font-bold">
+		Hello{' '}
+		<Text variant="text-xs" tw="text-stpurple">
+			World
+		</Text>
+	</Text>
+)
+
 export const TextSM: React.VFC<{}> = () => <Text variant="text-sm">Hello World</Text>
 
 export const TextBase: React.VFC<{}> = () => <Text variant="text-base">Hello World</Text>