feat(progress): add progress component

example/src/examples/ProgressExample.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Panel, Progress, Fieldset } from 'react95-native';
+
+const DividerExample = () => {
+  return (
+    <Panel style={{ flex: 1, padding: 20 }}>
+      <Fieldset label='Default' style={[{ padding: 20 }]}>
+        <Progress percent={50} />
+      </Fieldset>
+      <Fieldset label='Tile' style={[{ padding: 20 }]}>
+        <Progress variant='tile' percent={50} />
+      </Fieldset>
+    </Panel>
+  );
+};
+
+export default DividerExample;

example/src/examples/index.tsx

@@ -9,6 +9,7 @@ import CheckboxExample from './CheckboxExample';
 import WindowExample from './WindowExample';
 import FieldsetExample from './FieldsetExample';
 import MenuExample from './MenuExample';
+import ProgressExample from './ProgressExample';
 
 export default [
   { name: 'ButtonExample', component: ButtonExample, title: 'Button' },
@@ -22,6 +23,7 @@ export default [
   { name: 'WindowExample', component: WindowExample, title: 'Window' },
   { name: 'FieldsetExample', component: FieldsetExample, title: 'Fieldset' },
   { name: 'MenuExample', component: MenuExample, title: 'Menu' },
+  { name: 'ProgressExample', component: ProgressExample, title: 'Progress' },
 ].sort((a, b) => {
   /* Sort screens alphabetically */
   if (a.title < b.title) return -1;

src/Progress/Progress.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+  LayoutChangeEvent,
+} from 'react-native';
+
+import { original as theme } from '../common/themes';
+import { blockSizes } from '../common/styles';
+import { Border } from '../common/styleElements';
+
+type Props = {
+  style?: StyleProp<ViewStyle>;
+  // come up with a better name than 'raised'
+  variant?: 'default' | 'tile' | 'indeterminate';
+  percent: number;
+};
+
+const tileWidth = 17;
+
+// TODO: accessibility
+const Progress = ({ variant = 'default', percent = 0, style = {} }: Props) => {
+  const [tilesNumber, setTilesNumber] = useState(0);
+
+  function updateTilesNumber(e: LayoutChangeEvent) {
+    const { width } = e.nativeEvent.layout;
+    setTilesNumber(Math.round((percent / 100) * (width / tileWidth)));
+  }
+
+  return (
+    <View
+      style={[
+        styles.wrapper,
+        {
+          height: blockSizes.md,
+        },
+        style,
+      ]}
+    >
+      <View style={[styles.progressWrapper]}>
+        {variant === 'tile' ? (
+          <View style={[styles.tilesWrapper]} onLayout={updateTilesNumber}>
+            {Array(tilesNumber)
+              .fill(null)
+              .map((_, index) => (
+                <View style={[styles.tile, styles.progress]} key={index} />
+              ))}
+          </View>
+        ) : (
+          <View style={[styles.progress, { width: `${percent}%` }]} />
+        )}
+      </View>
+      <Border variant='cutout' />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'relative',
+    padding: 4,
+  },
+  progressWrapper: {
+    width: '100%',
+    height: '100%',
+  },
+  progress: {
+    height: '100%',
+    backgroundColor: theme.progress,
+  },
+  tilesWrapper: {
+    flexDirection: 'row',
+    flex: 1,
+    borderWidth: 1,
+    borderColor: theme.material,
+  },
+  tile: {
+    width: tileWidth,
+    borderWidth: 1,
+    borderColor: theme.material,
+  },
+});
+
+export default Progress;

src/Progress/index.tsx

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

src/index.ts

@@ -8,6 +8,7 @@ export { default as Window } from './Window';
 export { default as Divider } from './Divider';
 export { default as Checkbox } from './Checkbox';
 export { default as Fieldset } from './Fieldset';
+export { default as Progress } from './Progress';
 export { MenuItem, default as Menu } from './Menu';
 
 export * from './common/themes';