V2 (#1)

packages/lib/src/components/DevTool/Storage/index.js

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import styled from 'styled-components/native';
+import useStorage from '../../data/storage';
+import Toolbar, {
+  Button,
+  Seperator,
+} from '../../base/Toolbar';
+import Keys from './Keys';
+import Value from './Value';
+
+const Wrapper = styled.View`
+  flex: 1;
+`;
+
+const StorageView = ({
+  provider,
+}) => {
+  const [selected, setSelected] = useState();
+  const {
+    data,
+    update,
+    removeItem,
+    clear,
+  } = useStorage(provider);
+  return (
+    <Wrapper>
+      <Toolbar>
+        <Seperator />
+        <Button
+          name="Refresh"
+          icon="reload"
+          onPress={update}
+        />
+        <Button
+          name="Clear"
+          icon="trash"
+          onPress={clear}
+        />
+        <Button
+          name="Delete"
+          icon="remove"
+          disabled={!selected}
+          onPress={() => removeItem(selected)}
+        />
+      </Toolbar>
+      <Keys
+        selected={selected}
+        onSelect={(key) => {
+          setSelected(key);
+        }}
+        keys={Object.keys(data)}
+      />
+      {selected && data[selected] && (
+        <Value value={data[selected]} />
+      )}
+    </Wrapper>
+  );
+};
+
+export default StorageView;