feat: create Cutout and Window components

Author: luizbaldi

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

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 (
+    <Container>
+      <Container.Section title='Usage:'>
+        <Window style={{ padding: 12 }}>
+          <Cutout style={{ height: 120 }}>
+            <Text>
+              React95 React95 React95 React95 React95 React95 React95 React95
+              React95 React95
+            </Text>
+            <Text>
+              React95 React95 React95 React95 React95 React95 React95 React95
+              React95 React95
+            </Text>
+            <Text>
+              React95 React95 React95 React95 React95 React95 React95 React95
+              React95 React95
+            </Text>
+            <Text>
+              React95 React95 React95 React95 React95 React95 React95 React95
+              React95 React95
+            </Text>
+          </Cutout>
+        </Window>
+      </Container.Section>
+    </Container>
+  );
+};
+
+export default CutoutExample;

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' }
 ];

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('<Cutout />', () => {
+  it('should render children', () => {
+    const { getByTestId } = render(
+      <Cutout>
+        <Text>This is a Cutout</Text>
+      </Cutout>
+    );
+
+    expect(getByTestId(testId)).toHaveTextContent('This is a Cutout');
+  });
+
+  it('should render custom styles', () => {
+    const style = { padding: 12 };
+
+    const { getByTestId } = render(
+      <Cutout style={style}>
+        <Text>Potatoe</Text>
+      </Cutout>
+    );
+
+    expect(getByTestId(testId)).toHaveStyle(style);
+  });
+});

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 (
+    <ScrollView style={[styles.container, style]} testID={testId}>
+      <View style={styles.beforeContainer}>
+        <View style={styles.content}>{children}</View>
+      </View>
+    </ScrollView>
+  );
+};
+
+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;

src/Cutout/index.ts

@@ -0,0 +1 @@
+export { default } from './Cutout';

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 <View style={[styles.container, style]}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 4,
+    ...border.windowBorders,
+    ...box.default
+  }
+});
+
+export default Window;

src/Window/index.ts

@@ -0,0 +1 @@
+export { default } from './Window';

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',

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';