Board row moved to common components

src/common/MetaRow/MetaRow.js

@@ -2,12 +2,13 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
-const { Button, MetaItem } = require('stremio/common');
+const Button = require('stremio/common/Button');
+const MetaItem = require('stremio/common/MetaItem');
 const styles = require('./styles');
 
-const BoardRow = ({ className, title, message, items, itemMenuOptions }) => {
+const MetaRow = ({ className, title, message, items, itemMenuOptions }) => {
     return (
-        <div className={classnames(className, styles['board-row-container'])}>
+        <div className={classnames(className, styles['meta-row-container'])}>
             {
                 typeof title === 'string' && title.length > 0 ?
                     <div className={styles['title-container']}>{title}</div>
@@ -56,7 +57,7 @@ const BoardRow = ({ className, title, message, items, itemMenuOptions }) => {
     );
 };
 
-BoardRow.propTypes = {
+MetaRow.propTypes = {
     className: PropTypes.string,
     title: PropTypes.string,
     message: PropTypes.string,
@@ -68,4 +69,4 @@ BoardRow.propTypes = {
     itemMenuOptions: PropTypes.array
 };
 
-module.exports = BoardRow;
+module.exports = MetaRow;

src/common/MetaRow/index.js

@@ -0,0 +1,3 @@
+const MetaRow = require('./MetaRow');
+
+module.exports = MetaRow;

src/common/MetaRow/styles.less

@@ -1,4 +1,4 @@
-.board-row-container {
+.meta-row-container {
     display: grid;
     grid-template-columns: 6fr minmax(12rem, 1fr);
     grid-template-areas:

src/common/MetaRowPlaceholder/MetaRowPlaceholder.js

@@ -3,9 +3,9 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const styles = require('./styles');
 
-const BoardRowPlaceholder = ({ className }) => {
+const MetaRowPlaceholder = ({ className }) => {
     return (
-        <div className={classnames(className, styles['board-row-placeholder-container'])}>
+        <div className={classnames(className, styles['meta-row-placeholder-container'])}>
             <div className={styles['title-container']}>
                 <div className={styles['title-label-container']} />
             </div>
@@ -45,8 +45,8 @@ const BoardRowPlaceholder = ({ className }) => {
     );
 };
 
-BoardRowPlaceholder.propTypes = {
+MetaRowPlaceholder.propTypes = {
     className: PropTypes.string
 };
 
-module.exports = BoardRowPlaceholder;
+module.exports = MetaRowPlaceholder;

src/common/MetaRowPlaceholder/index.js

@@ -0,0 +1,3 @@
+const MetaRowPlaceholder = require('./MetaRowPlaceholder');
+
+module.exports = MetaRowPlaceholder;

src/common/MetaRowPlaceholder/styles.less

@@ -1,4 +1,4 @@
-.board-row-placeholder-container {
+.meta-row-placeholder-container {
     display: grid;
     grid-template-columns: 6fr minmax(12rem, 1fr);
     grid-template-areas:

src/common/index.js

@@ -6,6 +6,8 @@ const MainNavBar = require('./MainNavBar');
 const MetaItem = require('./MetaItem');
 const MetaPreview = require('./MetaPreview');
 const MetaPreviewPlaceholder = require('./MetaPreviewPlaceholder');
+const MetaRow = require('./MetaRow');
+const MetaRowPlaceholder = require('./MetaRowPlaceholder');
 const NavBar = require('./NavBar');
 const PlayIconCircleCentered = require('./PlayIconCircleCentered');
 const Popup = require('./Popup');
@@ -29,6 +31,8 @@ module.exports = {
     MetaItem,
     MetaPreview,
     MetaPreviewPlaceholder,
+    MetaRow,
+    MetaRowPlaceholder,
     NavBar,
     PlayIconCircleCentered,
     Popup,

src/routes/Board/Board.js

@@ -1,8 +1,6 @@
 const React = require('react');
 const classnames = require('classnames');
-const { MainNavBar, placeholderStyles } = require('stremio/common');
-const BoardRow = require('./BoardRow');
-const BoardRowPlaceholder = require('./BoardRowPlaceholder');
+const { MainNavBar, MetaRow, MetaRowPlaceholder, placeholderStyles } = require('stremio/common');
 const useCatalogs = require('./useCatalogs');
 const styles = require('./styles');
 
@@ -27,7 +25,7 @@ const Board = () => {
                     switch (content.type) {
                         case 'Ready':
                             return (
-                                <BoardRow
+                                <MetaRow
                                     key={`${index}${req.base}${content.type}`}
                                     className={styles['board-row']}
                                     title={`${req.path.id} - ${req.path.type_name}`}
@@ -39,7 +37,7 @@ const Board = () => {
                             );
                         case 'Message':
                             return (
-                                <BoardRow
+                                <MetaRow
                                     key={`${index}${req.base}${content.type}`}
                                     className={styles['board-row']}
                                     title={`${req.path.id} - ${req.path.type_name}`}
@@ -48,7 +46,7 @@ const Board = () => {
                             );
                         case 'Loading':
                             return (
-                                <BoardRowPlaceholder
+                                <MetaRowPlaceholder
                                     key={`${index}${req.base}${content.type}`}
                                     className={classnames(styles['board-row-placeholder'], placeholderStyles['placeholder-container'])}
                                 />

src/routes/Board/BoardRow/index.js

@@ -1,3 +0,0 @@
-const BoardRow = require('./BoardRow');
-
-module.exports = BoardRow;

src/routes/Board/BoardRowPlaceholder/index.js

@@ -1,3 +0,0 @@
-const BoardRowPlaceholder = require('./BoardRowPlaceholder');
-
-module.exports = BoardRowPlaceholder;