feat(logs): add Logs component

e2e/__tests__/logs.test.js

@@ -0,0 +1,15 @@
+import { baisy } from '../setup/TestSuiter';
+
+
+const SUITES = [
+  baisy.suite('Components/Logs', 'with dialog')
+    .setRoot(async (iframe) => {
+      return await iframe.waitForXPath('//*[@data-e2e-id="logs-dialog"]');
+    }),
+];
+
+
+SUITES.map(suite => {
+  it(suite.getTestName(), suite.testStory, 20000);
+});
+

src/components/Logs/Logs.js

@@ -0,0 +1,25 @@
+// @flow
+import React from 'react';
+import { LogsContainerTag, LogMessageTag } from './Logs.theme';
+
+type LogsProps = {
+  messages: string[],
+};
+
+const Logs = ({ messages }: LogsProps) => {
+  return (
+    <LogsContainerTag>
+      { React.Children.toArray(messages.map(message => (
+        <LogMessageTag>{ message }</LogMessageTag> // eslint-disable-line
+      ))) }
+    </LogsContainerTag>
+  );
+};
+
+Logs.defaultProps = {
+  messages: [],
+};
+
+export {
+  Logs,
+};

src/components/Logs/Logs.stories.js

@@ -0,0 +1,57 @@
+import React from 'react';
+
+const MESSAGES = [
+  `START RequestId: 9ddb9717-1570-433e-bb06-9e0c3c4fefac Version: $LATEST
+,2019-03-12T15:08:49.840Z    9ddb9717-1570-433e-bb06-9e0c3c4fefac    {"errorMessage":"Cannot find module 'nodemailer'","errorType":"Error","stackTrace":["Function.Module._resolveFilename (module.js:547:15)","Function.Module._load (module.js:474:25)","Module.require (module.js:596:17)","require (internal/module.js:11:18)","Object.<anonymous> (/var/task/src/mailer/index.js:37:18)","Module._compile (module.js:652:30)","Object.Module._extensions..js (module.js:663:10)","Module.load (module.js:565:32)","tryModuleLoad (module.js:505:12)","Function.Module._load (module.js:497:3)"]}
+,END RequestId: 9ddb9717-1570-433e-bb06-9e0c3c4fefac
+,REPORT RequestId: 9ddb9717-1570-433e-bb06-9e0c3c4fefac    Duration: 1.23 ms    Billed Duration: 100 ms     Memory Size: 1536 MB    Max Memory Used: 77 MB    
+,START RequestId: 60594137-ec13-4470-a85d-61e29cc184e2 Version: $LATEST
+,2019-03-12T15:09:39.835Z    60594137-ec13-4470-a85d-61e29cc184e2    entered function
+,END RequestId: 60594137-ec13-4470-a85d-61e29cc184e2
+,REPORT RequestId: 60594137-ec13-4470-a85d-61e29cc184e2    Duration: 21.12 ms    Billed Duration: 100 ms     Memory Size: 1536 MB    Max Memory Used: 77 MB    
+,START RequestId: ff316ab5-4c16-47b4-be44-079ce5968761 Version: $LATEST
+,2019-03-12T15:09:45.644Z    ff316ab5-4c16-47b4-be44-079ce5968761    entered function
+,END RequestId: ff316ab5-4c16-47b4-be44-079ce5968761
+,REPORT RequestId: ff316ab5-4c16-47b4-be44-079ce5968761    Duration: 0.64 ms    Billed Duration: 100 ms     Memory Size: 1536 MB    Max Memory Used: 77 MB    
+,START RequestId: 5c65450e-1558-4550-ba12-d8f1d879f0cb Version: $LATEST
+,2019-03-12T15:09:46.068Z    5c65450e-1558-4550-ba12-d8f1d879f0cb    entered function
+,END RequestId: 5c65450e-1558-4550-ba12-d8f1d879f0cb
+,REPORT RequestId: 5c65450e-1558-4550-ba12-d8f1d879f0cb    Duration: 0.50 ms    Billed Duration: 100 ms     Memory Size: 1536 MB    Max Memory Used: 77 MB    
+,START RequestId: 9ddb9717-1570-433e-bb06-9e0c3c4fefac Version: $LATEST
+`,
+  `START RequestId: 9ddb9717-1570-433e-bb06-9e0c3c4fefac Version: $LATEST
+,2019-03-12T15:08:49.840Z    9ddb9717-1570-433e-bb06-9e0c3c4fefac    {"errorMessage":"Cannot find module 'nodemailer'","errorType":"Error","stackTrace":["Function.Module._resolveFilename (module.js:547:15)","Function.Module._load (module.js:474:25)","Module.require (module.js:596:17)","require (internal/module.js:11:18)","Object.<anonymous> (/var/task/src/mailer/index.js:37:18)","Module._compile (module.js:652:30)","Object.Module._extensions..js (module.js:663:10)","Module.load (module.js:565:32)","tryModuleLoad (module.js:505:12)","Function.Module._load (module.js:497:3)"]}
+,END RequestId: 9ddb9717-1570-433e-bb06-9e0c3c4fefac
+,REPORT RequestId: 9ddb9717-1570-433e-bb06-9e0c3c4fefac    Duration: 1.23 ms    Billed Duration: 100 ms     Memory Size: 1536 MB    Max Memory Used: 77 MB    
+,START RequestId: 60594137-ec13-4470-a85d-61e29cc184e2 Version: $LATEST
+,2019-03-12T15:09:39.835Z    60594137-ec13-4470-a85d-61e29cc184e2    entered function
+,END RequestId: 60594137-ec13-4470-a85d-61e29cc184e2
+,REPORT RequestId: 60594137-ec13-4470-a85d-61e29cc184e2    Duration: 21.12 ms    Billed Duration: 100 ms     Memory Size: 1536 MB    Max Memory Used: 77 MB    
+,START RequestId: ff316ab5-4c16-47b4-be44-079ce5968761 Version: $LATEST
+,2019-03-12T15:09:45.644Z    ff316ab5-4c16-47b4-be44-079ce5968761    entered function
+,END RequestId: ff316ab5-4c16-47b4-be44-079ce5968761
+,REPORT RequestId: ff316ab5-4c16-47b4-be44-079ce5968761    Duration: 0.64 ms    Billed Duration: 100 ms     Memory Size: 1536 MB    Max Memory Used: 77 MB    
+,START RequestId: 5c65450e-1558-4550-ba12-d8f1d879f0cb Version: $LATEST
+,2019-03-12T15:09:46.068Z    5c65450e-1558-4550-ba12-d8f1d879f0cb    entered function
+,END RequestId: 5c65450e-1558-4550-ba12-d8f1d879f0cb
+,REPORT RequestId: 5c65450e-1558-4550-ba12-d8f1d879f0cb    Duration: 0.50 ms    Billed Duration: 100 ms     Memory Size: 1536 MB    Max Memory Used: 77 MB    
+,START RequestId: 9ddb9717-1570-433e-bb06-9e0c3c4fefac Version: $LATEST
+`];
+
+export default (asStory) => {
+  asStory('Components/Logs', module, (story, { Logs, Dialog }) => {
+    story
+      .add('common', () => (
+        <Logs messages={ MESSAGES } />
+      ))
+      .add('with dialog', () => (
+        <Dialog isOpen size="xxl" data-e2e-id="logs-dialog">
+          <Dialog.Header title="Logs" />
+          <Dialog.Body scrollable padding="none">
+            <Logs messages={ [...MESSAGES, ...MESSAGES] } />
+          </Dialog.Body>
+        </Dialog>
+      ));
+  });
+};
+

src/components/Logs/Logs.theme.js

@@ -0,0 +1,42 @@
+import { createThemeTag } from '../../theme/createThemeTag';
+
+
+const name = 'logs';
+
+const [LogsContainerTag, themeLogsContainer] = createThemeTag(name, {
+  root: {
+    overflowX: 'auto',
+  },
+});
+
+const [LogMessageTag, themeLogMessage] = createThemeTag(`${name}Wrapper`, ({ COLORS }) => ({
+  root: {
+    fontFamily: 'Courier',
+    color: COLORS.WHITE,
+    fontSize: '1.4rem',
+    lineHeight: 2,
+    backgroundColor: '#1C252E',
+    padding: '0 24px',
+    cursor: 'default',
+
+    '&:first-child': {
+      paddingTop: '24px',
+    },
+
+    '&:last-child': {
+      paddingBottom: '24px',
+    },
+
+    '&:hover': {
+      backgroundColor: '#202D3B',
+    },
+  },
+}));
+
+const theme = {
+  ...themeLogsContainer,
+  ...themeLogMessage,
+};
+
+export { LogsContainerTag, LogMessageTag, theme };
+

src/components/Logs/index.js

@@ -0,0 +1,4 @@
+// @flow
+
+export { Logs } from './Logs';
+export { theme } from './Logs.theme';

src/components/Paper/Paper.theme.js

@@ -13,6 +13,7 @@ const [PaperTag, theme] = createThemeTag(name, ({ COLORS, SIZES }: *) => ({
     color: COLORS.BLACK,
     boxShadow: '0 1px 3px 0 rgba(50,50,93,.14), 0 4px 6px 0 rgba(112,157,199,.08)',
     position: 'relative',
+    overflow: 'hidden',
   },
 
   modifiers: {

src/components/components.js

@@ -24,6 +24,7 @@ export { InputField } from './InputField';
 export { Label } from './Label';
 export { Link } from './Link';
 export { Loader } from './Loader';
+export { Logs } from './Logs';
 export { Menu } from './Menu';
 export { Modal } from './Modal';
 export { Navigation } from './Navigation';

src/components/theme.js

@@ -3,24 +3,30 @@
 import { theme as avatarTheme } from './Avatar';
 import { theme as avatarsTheme } from './Avatars';
 import { theme as breadcrumbsTheme } from './Breadcrumbs';
-import { theme as buttonTheme } from './Button';
 import { theme as buttonGroupTheme } from './ButtonGroup';
+import { theme as buttonTheme } from './Button';
 import { theme as cardTheme } from './Card';
 import { theme as checkboxTheme } from './Checkbox';
 import { theme as codeTheme } from './Code';
+import { theme as dateInputTheme } from './DateInput';
 import { theme as dialogTheme } from './Dialog';
 import { theme as dropdownTheme } from './Dropdown';
 import { theme as flexLayoutTheme } from './FlexLayout';
 import { theme as formTheme } from './Form';
 import { theme as gridTheme } from './Grid';
 import { theme as headingTheme } from './Heading';
 import { theme as iconTheme } from './Icon';
+import { theme as indicatorTheme } from './Indicator';
 import { theme as inputTheme } from './Input';
 import { theme as labelTheme } from './Label';
 import { theme as linkTheme } from './Link';
 import { theme as loaderTheme } from './Loader';
+import { theme as logsTheme } from './Logs';
+import { theme as menuTheme } from './Menu';
 import { theme as modalTheme } from './Modal';
 import { theme as navigationTheme } from './Navigation';
+import { theme as noDataTheme } from './NoData';
+import { theme as paginationTheme } from './Pagination';
 import { theme as paperTheme } from './Paper';
 import { theme as paragraphTheme } from './Paragraph';
 import { theme as progressTheme } from './Progress';
@@ -36,35 +42,36 @@ import { theme as textTheme } from './Text';
 import { theme as tooltipTheme } from './Tooltip';
 import { theme as topBarTheme } from './TopBar';
 import { theme as treeSelectTheme } from './TreeSelect';
-import { theme as menuTheme } from './Menu';
-import { theme as dateInputTheme } from './DateInput';
-import { theme as noDataTheme } from './NoData';
-import { theme as paginationTheme } from './Pagination';
-import { theme as indicatorTheme } from './Indicator';
 
 
 export const theme = {
   ...avatarTheme,
   ...avatarsTheme,
   ...breadcrumbsTheme,
-  ...buttonTheme,
   ...buttonGroupTheme,
+  ...buttonTheme,
   ...cardTheme,
   ...checkboxTheme,
   ...codeTheme,
+  ...dateInputTheme,
   ...dialogTheme,
   ...dropdownTheme,
   ...flexLayoutTheme,
   ...formTheme,
   ...gridTheme,
   ...headingTheme,
   ...iconTheme,
+  ...indicatorTheme,
   ...inputTheme,
   ...labelTheme,
   ...linkTheme,
   ...loaderTheme,
+  ...logsTheme,
+  ...menuTheme,
   ...modalTheme,
   ...navigationTheme,
+  ...noDataTheme,
+  ...paginationTheme,
   ...paperTheme,
   ...paragraphTheme,
   ...progressTheme,
@@ -80,9 +87,4 @@ export const theme = {
   ...tooltipTheme,
   ...topBarTheme,
   ...treeSelectTheme,
-  ...menuTheme,
-  ...dateInputTheme,
-  ...noDataTheme,
-  ...paginationTheme,
-  ...indicatorTheme,
 };