feat(desktop): add desktop component

example/src/examples/DesktopExample.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Desktop, Panel, Fieldset } from 'react95-native';
+
+const DesktopExample = () => {
+  return (
+    <Panel style={styles.container}>
+      <Fieldset label='Default:' style={[{ paddingVertical: 20 }]}>
+        <Desktop style={[{ backgroundColor: 'teal' }]} />
+      </Fieldset>
+      <Fieldset label='With children:' style={[{ paddingVertical: 20 }]}>
+        <Desktop>
+          <View style={[styles.child]} />
+        </Desktop>
+      </Fieldset>
+    </Panel>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+  },
+  child: {
+    backgroundColor: 'pink',
+    flex: 1,
+  },
+});
+
+export default DesktopExample;

example/src/examples/index.tsx

@@ -12,6 +12,7 @@ import FieldsetExample from './FieldsetExample';
 import MenuExample from './MenuExample';
 import ProgressExample from './ProgressExample';
 import SelectExample from './SelectExample';
+import DesktopExample from './DesktopExample';
 
 export default [
   { name: 'ButtonExample', component: ButtonExample, title: 'Button' },
@@ -28,6 +29,7 @@ export default [
   { name: 'MenuExample', component: MenuExample, title: 'Menu' },
   { name: 'ProgressExample', component: ProgressExample, title: 'Progress' },
   { name: 'SelectExample', component: SelectExample, title: 'Select' },
+  { name: 'DesktopExample', component: DesktopExample, title: 'Desktop' },
 ].sort((a, b) => {
   /* Sort screens alphabetically */
   if (a.title < b.title) return -1;

src/Desktop/Desktop.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { Border } from '../common/styleElements';
+import { original as theme } from '../common/themes';
+
+type Props = {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+const Desktop = ({ children, style }: Props) => {
+  return (
+    <View style={[styles.wrapper]}>
+      <View style={[styles.monitor]}>
+        <Border variant='outside'>
+          <View style={[styles.monitorShadowBorder]}>
+            <View style={[styles.monitorShadowBorder]} />
+          </View>
+        </Border>
+        <View style={[styles.screen, style]}>
+          <Border variant='cutout' />
+          {children}
+        </View>
+        <View style={[styles.light]} />
+      </View>
+      <View style={[styles.stand]}>
+        <View style={[styles.standSegmentOne]}>
+          <Border variant='outside' />
+        </View>
+        <View style={[styles.standSegmentTwo]}>
+          <Border variant='default' />
+        </View>
+        <View style={[styles.standSegmentThree]}>
+          <Border variant='outside' />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'relative',
+    width: 'auto',
+    alignSelf: 'center',
+  },
+  monitor: {
+    position: 'relative',
+    zIndex: 1,
+    width: 195,
+    height: 155,
+    padding: 18,
+  },
+  monitorShadowBorder: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    borderWidth: 1,
+    borderStyle: 'dotted',
+    borderColor: theme.borderDark,
+    // TODO: left and top dotted border shoulg be of light color
+    // borderTopColor: theme.borderLightest,
+    // borderLeftColor: theme.borderLightest,
+    // borderBottomColor: theme.borderDark,
+    // borderRightColor: theme.borderDark,
+  },
+  screen: {
+    flex: 1,
+    padding: 4,
+  },
+  light: {
+    position: 'absolute',
+    right: 20,
+    top: 140,
+    width: 10,
+    borderWidth: 2,
+    borderTopColor: '#4d9046',
+    borderBottomColor: '#07ff00',
+    borderLeftColor: '#4d9046',
+    borderRightColor: '#07ff00',
+  },
+  stand: {
+    display: 'flex',
+    position: 'relative',
+    alignItems: 'center',
+  },
+  standSegmentOne: {
+    width: '50%',
+    height: 14,
+    borderWidth: 2,
+    borderColor: 'transparent',
+    borderTopColor: theme.borderDark,
+    zIndex: 1,
+  },
+  standSegmentTwo: {
+    width: '40%',
+    height: 12,
+    position: 'relative',
+    top: -4,
+  },
+  standSegmentThree: {
+    width: '75%',
+    height: 8,
+    position: 'relative',
+    top: -6,
+  },
+});
+
+export default Desktop;

src/Desktop/index.tsx

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

src/common/styleElements.tsx

@@ -10,13 +10,15 @@ type BorderProps = {
   variant?: 'default' | 'well' | 'outside' | 'cutout';
   style?: object;
   radius?: number;
+  children?: React.ReactNode;
 };
 
 export const Border = ({
   invert = false,
   variant = 'default',
   style = {},
   radius,
+  children,
 }: BorderProps) => {
   const wrapper: StyleProp<ViewStyle> = [];
   let outer;
@@ -51,10 +53,16 @@ export const Border = ({
         style,
       ]}
     >
-      {outer && (
+      {outer ? (
         <View style={[sharedStyles, ...outer]}>
-          {inner && <View style={[sharedStyles, ...inner]} />}
+          {inner ? (
+            <View style={[sharedStyles, ...inner]}>{children}</View>
+          ) : (
+            children
+          )}
         </View>
+      ) : (
+        children
       )}
     </View>
   );

src/index.ts

@@ -11,6 +11,7 @@ export { default as Radio } from './Radio';
 export { default as Fieldset } from './Fieldset';
 export { default as Progress } from './Progress';
 export { default as Select } from './Select';
+export { default as Desktop } from './Desktop';
 export { MenuItem, default as Menu } from './Menu';
 
 export * from './common/themes';