@vidispine/cra-template-vdt 0.15.0-pre.7 → 21.4.0-pre.1

package/README.md

@@ -7,7 +7,7 @@ See [Custom Templates](https://create-react-app.dev/docs/custom-templates/) for
 ## Quick Start
 
 ```
-npx create-react-app my-vdt-app --template @vidispine/vdt
+npx create-react-app my-vdt-app --template @vidispine/vdt@latest
 cd my-vdt-app
 REACT_APP_VIDISPINE_URL=https://example.myvidispine.com npm start
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vidispine/cra-template-vdt",
-  "version": "0.15.0-pre.7",
+  "version": "21.4.0-pre.1",
   "homepage": "https://github.com/vidispine/vdt#readme",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -18,8 +18,8 @@
     "template.json"
   ],
   "devDependencies": {
-    "@vidispine/eslint-config": "^0.15.0-pre.7",
-    "@vidispine/prettier-config": "^0.15.0-pre.7"
+    "@vidispine/eslint-config": "^21.4.0-pre.1",
+    "@vidispine/prettier-config": "^21.4.0-pre.1"
   },
   "eslintConfig": {
     "extends": [

package/template/README.md

@@ -5,7 +5,7 @@ See [Create React App](https://create-react-app.dev/docs/getting-started) for mo
 ## Quick Start
 
 ```
-npx create-react-app my-vdt-app --template @vidispine/vdt
+npx create-react-app my-vdt-app --template @vidispine/vdt@latest
 cd my-vdt-app
 REACT_APP_VIDISPINE_URL=https://example.myvidispine.com npm start
 ```

package/template/src/pages/Root/Root.js

@@ -1,25 +1,16 @@
 import React from 'react';
 import { Route, Redirect, Switch } from 'react-router-dom';
-import { withStyles } from '@material-ui/core';
 import { AuthProvider } from '@vidispine/vdt-react';
 
 import { LOGIN_EXPIRES_SECONDS, APP_BASENAME, VIDISPINE_URL } from '../../const';
-import Search from '../Search';
+import SearchItem, { path as SearchItemPath } from '../SearchItem';
+import SearchCollection, { path as SearchCollectionPath } from '../SearchCollection';
 import Login from '../Login';
 import NotFound from '../NotFound';
-import Header from './components/Header';
+import Layout from './components/Layout';
+import RootPath from './path';
 
-const styles = (theme) => ({
-  container: {
-    height: '100vh',
-    overflow: 'auto',
-    paddingTop: theme.mixins.toolbar.minHeight,
-    marginRight: theme.spacing(1),
-    marginLeft: theme.spacing(1),
-  },
-});
-
-function Root({ classes }) {
+function Root() {
   const [loginError, setLoginError] = React.useState(!VIDISPINE_URL && 'VIDISPINE_URL is unset');
   const handleLoginError = ({ message }) => {
     setLoginError(message);
@@ -36,20 +27,22 @@ function Root({ classes }) {
       LoginProps={{ error: loginError }}
       serverUrl="/"
     >
-      <Header />
-      <div className={classes.container}>
+      <Layout>
         <Switch>
-          <Route exact path="/search/">
-            <Search />
+          <Route exact path={SearchItemPath()}>
+            <SearchItem />
+          </Route>
+          <Route exact path={SearchCollectionPath()}>
+            <SearchCollection />
           </Route>
-          <Redirect exact from="/" push to="/search/" />
+          <Redirect exact from={RootPath()} push to={SearchItemPath()} />
           <Route path="*">
             <NotFound />
           </Route>
         </Switch>
-      </div>
+      </Layout>
     </AuthProvider>
   );
 }
 
-export default withStyles(styles)(Root);
+export default Root;

package/template/src/pages/Root/components/Drawer.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import clsx from 'clsx';
+import { NavLink } from 'react-router-dom';
+import {
+  withStyles,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Drawer as MUIDrawer,
+} from '@material-ui/core';
+import WebAssetIcon from '@material-ui/icons/WebAsset';
+import CollectionsIcon from '@material-ui/icons/Collections';
+
+import { path as SearchItemPath } from '../../SearchItem';
+import { path as SearchCollectionPath } from '../../SearchCollection';
+
+const styles = (theme) => ({
+  drawerPaper: {
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    width: theme.spacing(20),
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  },
+  drawerPaperClose: {
+    overflowX: 'hidden',
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    width: theme.spacing(7),
+    [theme.breakpoints.up('sm')]: {
+      width: theme.spacing(9),
+    },
+  },
+  appBarSpacer: theme.mixins.toolbar,
+});
+
+function Drawer({ classes, open }) {
+  return (
+    <MUIDrawer
+      classes={{
+        paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose),
+      }}
+      variant="permanent"
+      open={open}
+    >
+      <div className={classes.appBarSpacer} />
+      <List>
+        <ListItem button component={NavLink} activeClassName="Mui-selected" to={SearchItemPath()}>
+          <ListItemIcon>
+            <WebAssetIcon />
+          </ListItemIcon>
+          <ListItemText primary="Items" />
+        </ListItem>
+        <ListItem
+          button
+          component={NavLink}
+          activeClassName="Mui-selected"
+          to={SearchCollectionPath()}
+        >
+          <ListItemIcon>
+            <CollectionsIcon />
+          </ListItemIcon>
+          <ListItemText primary="Collections" />
+        </ListItem>
+      </List>
+    </MUIDrawer>
+  );
+}
+
+export default withStyles(styles)(Drawer);

package/template/src/pages/Root/components/Header.js

@@ -1,27 +1,52 @@
 import React from 'react';
-import { UserAvatarButton } from '@vidispine/vdt-materialui';
-import { withStyles, AppBar, Toolbar } from '@material-ui/core';
+import { withStyles, IconButton, Typography, Toolbar, AppBar } from '@material-ui/core';
+import MenuIcon from '@material-ui/icons/Menu';
 import { useAuthContext } from '@vidispine/vdt-react';
+import { UserAvatarButton } from '@vidispine/vdt-materialui';
 
 import { APP_TITLE, HEADER_LOGO } from '../../../const';
 
 const styles = (theme) => ({
-  logo: {
-    height: `calc(${theme.mixins.toolbar.minHeight}px - ${theme.spacing(4)}px)`,
-    marginRight: theme.spacing(4),
+  toolbar: {
+    paddingRight: 24, // keep right padding when drawer closed
+  },
+  appBar: {
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(['width', 'margin'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  },
+  menuButton: {
+    marginRight: 36,
   },
   title: {
     flexGrow: 1,
   },
+  logo: {
+    height: `calc(${theme.mixins.toolbar.minHeight}px - ${theme.spacing(4)}px)`,
+    marginRight: theme.spacing(4),
+  },
 });
 
-function Header({ classes }) {
+function Header({ classes, toggleDrawer }) {
   const { userName, onLogout } = useAuthContext();
+
   return (
-    <AppBar elevation={0}>
-      <Toolbar variant="dense">
+    <AppBar position="absolute" className={classes.appBar} elevation={0}>
+      <Toolbar className={classes.toolbar}>
+        <IconButton
+          edge="start"
+          color="inherit"
+          onClick={toggleDrawer}
+          className={classes.menuButton}
+        >
+          <MenuIcon />
+        </IconButton>
         <img className={classes.logo} src={HEADER_LOGO} alt={APP_TITLE} />
-        <div className={classes.title}>{APP_TITLE}</div>
+        <Typography component="h1" variant="h6" color="inherit" noWrap className={classes.title}>
+          {APP_TITLE}
+        </Typography>
         <UserAvatarButton userName={userName} onLogout={onLogout} />
       </Toolbar>
     </AppBar>

package/template/src/pages/Root/components/Layout.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { withStyles, Container } from '@material-ui/core';
+
+import Header from './Header';
+import Drawer from './Drawer';
+
+const styles = (theme) => ({
+  root: {
+    display: 'flex',
+  },
+  appBarSpacer: theme.mixins.toolbar,
+  content: {
+    flexGrow: 1,
+    height: '100vh',
+    overflow: 'auto',
+  },
+  container: {
+    paddingTop: theme.spacing(4),
+    paddingBottom: theme.spacing(4),
+  },
+});
+
+function Layout({ classes, children }) {
+  const [open, setOpen] = React.useState(true);
+  const toggleDrawer = () => setOpen((prevState) => !prevState);
+  return (
+    <div className={classes.root}>
+      <Header toggleDrawer={toggleDrawer} open={open} />
+      <Drawer open={open} />
+      <main className={classes.content}>
+        <div className={classes.appBarSpacer} />
+        <Container maxWidth="lg" className={classes.container}>
+          {children}
+        </Container>
+      </main>
+    </div>
+  );
+}
+
+export default withStyles(styles)(Layout);

package/template/src/pages/Root/index.js

@@ -1 +1,2 @@
+export { default as path } from './path';
 export { default } from './Root';

package/template/src/pages/Root/path.js

@@ -0,0 +1,5 @@
+import { generatePath } from 'react-router-dom';
+
+const path = () => generatePath('/');
+
+export default path;

package/template/src/pages/SearchCollection/SearchCollection.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { withStyles, Card, CardHeader, CardContent } from '@material-ui/core';
+import { SearchInput, CollectionList } from '@vidispine/vdt-materialui';
+
+import useSearchCollection from './hooks/useSearchCollection';
+
+const styles = (theme) => ({
+  root: {
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(2),
+    paddingLeft: theme.spacing(4),
+    paddingRight: theme.spacing(4),
+  },
+  ItemList: {},
+  SearchInput: {},
+});
+
+function SearchCollection({ classes }) {
+  const { onSearchCollection, collectionListType, isLoading } = useSearchCollection();
+  return (
+    <div className={classes.root}>
+      <Card variant="outlined">
+        <CardHeader title="Search For Collections" />
+        <CardContent>
+          <SearchInput
+            className={classes.SearchInput}
+            onSubmit={onSearchCollection}
+            submitting={isLoading}
+          />
+          <CollectionList
+            className={classes.ItemList}
+            collectionListType={collectionListType}
+            CollectionListItemProps={{ primary: 'title', secondary: 'collectionId' }}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default withStyles(styles)(SearchCollection);

package/template/src/pages/SearchCollection/hooks/useSearchCollection.js

@@ -0,0 +1,26 @@
+import { collection as CollectionApi } from '@vidispine/vdt-api';
+import { useApi } from '@vidispine/vdt-react';
+
+const useSearchCollection = () => {
+  const {
+    data: collectionListType,
+    request: searchCollection,
+    isLoading,
+  } = useApi(CollectionApi.searchCollection, { isLoading: false });
+  const onSearchCollection = (value) =>
+    searchCollection({
+      itemSearchDocument: { text: [{ value }] },
+      queryParams: {
+        number: 10,
+        content: 'metadata',
+        field: ['title', 'collectionId'],
+      },
+    });
+  return {
+    onSearchCollection,
+    collectionListType,
+    isLoading,
+  };
+};
+
+export default useSearchCollection;

package/template/src/pages/SearchCollection/index.js

@@ -0,0 +1,2 @@
+export { default as path } from './path';
+export { default } from './SearchCollection';

package/template/src/pages/SearchCollection/path.js

@@ -0,0 +1,5 @@
+import { generatePath } from 'react-router-dom';
+
+const path = () => generatePath('/collection/');
+
+export default path;

package/template/src/pages/{Search/Search.js → SearchItem/SearchItem.js}

@@ -15,8 +15,8 @@ const styles = (theme) => ({
   SearchInput: {},
 });
 
-function Search({ classes }) {
-  const { onSearch, itemListType, hasLoaded, isLoading } = useSearchItem();
+function SearchItem({ classes }) {
+  const { onSearchItem, itemListType, isLoading } = useSearchItem();
   return (
     <div className={classes.root}>
       <Card variant="outlined">
@@ -24,8 +24,8 @@ function Search({ classes }) {
         <CardContent>
           <SearchInput
             className={classes.SearchInput}
-            onSubmit={onSearch}
-            submitting={hasLoaded && isLoading}
+            onSubmit={onSearchItem}
+            submitting={isLoading}
           />
           <ItemList
             className={classes.ItemList}
@@ -38,4 +38,4 @@ function Search({ classes }) {
   );
 }
 
-export default withStyles(styles)(Search);
+export default withStyles(styles)(SearchItem);

package/template/src/pages/{Search → SearchItem}/hooks/useSearchItem.js

@@ -2,10 +2,10 @@ import { item as ItemApi } from '@vidispine/vdt-api';
 import { useApi } from '@vidispine/vdt-react';
 
 const useSearchItem = () => {
-  const { data: itemListType, request: searchItem, isLoading, hasLoaded } = useApi(
-    ItemApi.searchItem,
-  );
-  const onSearch = (value) =>
+  const { data: itemListType, request: searchItem, isLoading } = useApi(ItemApi.searchItem, {
+    isLoading: false,
+  });
+  const onSearchItem = (value) =>
     searchItem({
       itemSearchDocument: { text: [{ value }] },
       queryParams: {
@@ -15,10 +15,9 @@ const useSearchItem = () => {
       },
     });
   return {
-    onSearch,
+    onSearchItem,
     itemListType,
     isLoading,
-    hasLoaded,
   };
 };
 

package/template/src/pages/SearchItem/index.js

@@ -0,0 +1,2 @@
+export { default as path } from './path';
+export { default } from './SearchItem';

package/template/src/pages/SearchItem/path.js

@@ -0,0 +1,5 @@
+import { generatePath } from 'react-router-dom';
+
+const path = () => generatePath('/item/');
+
+export default path;

package/template/src/themes/LightTheme.js

@@ -1,14 +1,19 @@
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 import indigo from '@material-ui/core/colors/indigo';
 
 import 'typeface-roboto';
 import '@vidispine/vdt-materialui/dist/index.css';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   typography: {
     useNextVariants: true,
     fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
   },
+  mixins: {
+    toolbar: {
+      minHeight: 48,
+    },
+  },
   palette: {
     type: 'light',
     primary: {

package/template.json

@@ -4,18 +4,19 @@
       "@material-ui/core": "^4.11.0",
       "@material-ui/icons": "^4.9.1",
       "@material-ui/lab": "^4.0.0-alpha.56",
-      "@vidispine/vdt-api": "^0.15.0-pre.7",
-      "@vidispine/vdt-materialui": "^0.15.0-pre.7",
-      "@vidispine/vdt-react": "^0.15.0-pre.7",
+      "@vidispine/vdt-api": "^21.4.0-pre.1",
+      "@vidispine/vdt-materialui": "^21.4.0-pre.1",
+      "@vidispine/vdt-react": "^21.4.0-pre.1",
+      "clsx": "^1.1.1",
       "react-cookie": "^4.0.3",
       "react-router-dom": "^5.2.0",
       "typeface-roboto": "^0.0.75"
     },
     "devDependencies": {
-      "@vidispine/eslint-config": "^0.15.0-pre.7",
-      "@vidispine/eslint-config-base": "^0.15.0-pre.7",
-      "@vidispine/eslint-config-react": "^0.15.0-pre.7",
-      "@vidispine/prettier-config": "^0.15.0-pre.7",
+      "@vidispine/eslint-config": "^21.4.0-pre.1",
+      "@vidispine/eslint-config-base": "^21.4.0-pre.1",
+      "@vidispine/eslint-config-react": "^21.4.0-pre.1",
+      "@vidispine/prettier-config": "^21.4.0-pre.1",
       "eslint-config-airbnb": "^18.2.1",
       "eslint-config-prettier": "^7.1.0",
       "eslint-plugin-jsx-a11y": "^6.4.1",

package/template/src/pages/Search/index.js

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