From e03baa828e3bd3b097a0368e531838be9165bc4f Mon Sep 17 00:00:00 2001 From: Luiz Baldi Date: Wed, 11 Nov 2020 10:24:06 -0300 Subject: [PATCH] feat: create Cutout and Window components --- CONTRIBUTING.md | 4 +++ example/src/examples/CutoutExample.tsx | 35 ++++++++++++++++++ example/src/util/examples.tsx | 4 ++- src/Cutout/Cutout.spec.tsx | 29 +++++++++++++++ src/Cutout/Cutout.tsx | 49 ++++++++++++++++++++++++++ src/Cutout/index.ts | 1 + src/Window/Window.tsx | 23 ++++++++++++ src/Window/index.ts | 1 + src/common/styles.ts | 7 ++++ src/index.ts | 2 ++ 10 files changed, 154 insertions(+), 1 deletion(-) create mode 100644 example/src/examples/CutoutExample.tsx create mode 100644 src/Cutout/Cutout.spec.tsx create mode 100644 src/Cutout/Cutout.tsx create mode 100644 src/Cutout/index.ts create mode 100644 src/Window/Window.tsx create mode 100644 src/Window/index.ts diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 0919355..2232cba 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -197,3 +197,7 @@ https://www.contributor-covenant.org/faq. Translations are available at https:// #### TextInput - [ ] Implement the TextInput component + +#### Cutout + +- [ ] Implement shadow diff --git a/example/src/examples/CutoutExample.tsx b/example/src/examples/CutoutExample.tsx new file mode 100644 index 0000000..2e2d26e --- /dev/null +++ b/example/src/examples/CutoutExample.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { Cutout, Text, Window } from 'react95-native'; + +import Container from '../util/Container'; + +const CutoutExample = () => { + return ( + + + + + + React95 React95 React95 React95 React95 React95 React95 React95 + React95 React95 + + + React95 React95 React95 React95 React95 React95 React95 React95 + React95 React95 + + + React95 React95 React95 React95 React95 React95 React95 React95 + React95 React95 + + + React95 React95 React95 React95 React95 React95 React95 React95 + React95 React95 + + + + + + ); +}; + +export default CutoutExample; diff --git a/example/src/util/examples.tsx b/example/src/util/examples.tsx index 097ccb6..9e0c3ff 100644 --- a/example/src/util/examples.tsx +++ b/example/src/util/examples.tsx @@ -2,10 +2,12 @@ import ButtonExample from '../examples/ButtonExample'; import TextInputExample from '../examples/TextInputExample'; import PanelExample from '../examples/PanelExample'; import AppBarExample from '../examples/AppBarExample'; +import CutoutExample from '../examples/CutoutExample'; export default [ { name: 'ButtonExample', component: ButtonExample, title: 'Button' }, { name: 'TextInputExample', component: TextInputExample, title: 'TextInput' }, { name: 'PanelExample', component: PanelExample, title: 'Panel' }, - { name: 'AppBarExample', component: AppBarExample, title: 'AppBar' } + { name: 'AppBarExample', component: AppBarExample, title: 'AppBar' }, + { name: 'CutoutExample', component: CutoutExample, title: 'Cutout' } ]; diff --git a/src/Cutout/Cutout.spec.tsx b/src/Cutout/Cutout.spec.tsx new file mode 100644 index 0000000..bb544ce --- /dev/null +++ b/src/Cutout/Cutout.spec.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { render } from '@testing-library/react-native'; + +import { testId } from './Cutout'; +import { Cutout, Text } from '..'; + +describe('', () => { + it('should render children', () => { + const { getByTestId } = render( + + This is a Cutout + + ); + + expect(getByTestId(testId)).toHaveTextContent('This is a Cutout'); + }); + + it('should render custom styles', () => { + const style = { padding: 12 }; + + const { getByTestId } = render( + + Potatoe + + ); + + expect(getByTestId(testId)).toHaveStyle(style); + }); +}); diff --git a/src/Cutout/Cutout.tsx b/src/Cutout/Cutout.tsx new file mode 100644 index 0000000..882762c --- /dev/null +++ b/src/Cutout/Cutout.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { StyleSheet, View, ScrollView } from 'react-native'; + +import { border } from '../common/styles'; +import { original as theme } from '../common/themes'; + +export const testId = 'cutout'; + +type Props = { + children: React.ReactNode; + // shadow?: boolean; + style?: Object; +}; + +const Cutout = ({ children, style = {} }: Props) => { + return ( + + + {children} + + + ); +}; + +const styles = StyleSheet.create({ + container: { + ...border.wellInverted, + backgroundColor: theme.material, + padding: 2, + borderStyle: 'solid', + lineHeight: 1.5 + }, + beforeContainer: { + borderStyle: 'solid', + borderWidth: 2, + margin: -2, + borderLeftColor: theme.borderDarkest, + borderTopColor: theme.borderDarkest, + borderRightColor: theme.borderLight, + borderBottomColor: theme.borderLight + // ${props => props.shadow && `box-shadow:${insetShadow};`} + }, + content: { + width: '100%', + padding: 4 + } +}); + +export default Cutout; diff --git a/src/Cutout/index.ts b/src/Cutout/index.ts new file mode 100644 index 0000000..2a7e106 --- /dev/null +++ b/src/Cutout/index.ts @@ -0,0 +1 @@ +export { default } from './Cutout'; diff --git a/src/Window/Window.tsx b/src/Window/Window.tsx new file mode 100644 index 0000000..022584f --- /dev/null +++ b/src/Window/Window.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { StyleSheet, View } from 'react-native'; + +import { border, box } from '../common/styles'; + +type Props = { + children: React.ReactNode; + style?: Object; +}; + +const Window = ({ children, style = {} }: Props) => { + return {children}; +}; + +const styles = StyleSheet.create({ + container: { + padding: 4, + ...border.windowBorders, + ...box.default + } +}); + +export default Window; diff --git a/src/Window/index.ts b/src/Window/index.ts new file mode 100644 index 0000000..64ce6f2 --- /dev/null +++ b/src/Window/index.ts @@ -0,0 +1 @@ +export { default } from './Window'; diff --git a/src/common/styles.ts b/src/common/styles.ts index 83e4beb..7532ddc 100644 --- a/src/common/styles.ts +++ b/src/common/styles.ts @@ -48,6 +48,13 @@ export const border = StyleSheet.create({ }); export const box = StyleSheet.create({ + /* createBoxStyles() */ + default: { + flexDirection: 'row', + backgroundColor: theme.material, + color: theme.materialText + }, + /* createFlatBoxStyles() */ flat: { position: 'relative', flexDirection: 'row', diff --git a/src/index.ts b/src/index.ts index c454d5b..9637324 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,5 +3,7 @@ export { default as TextInput } from './TextInput'; export { default as Panel } from './Panel'; export { default as Text } from './Text'; export { default as AppBar } from './AppBar'; +export { default as Cutout } from './Cutout'; +export { default as Window } from './Window'; export * from './common/themes';