add Bootstrap working example

• re-organize file structure with one directory per dialog
• add index.html file per dialog
• add bootstrap styling and dynamic cdn loading
• clean up react code and stylesheet

npm setup script update

adds force flag
"setup": "rm -f .clasp.json ..."

Update README.md

Move clasp to devDependencies

update dynamic cdn urls

Add repository field

src/server/index.js

@@ -4,6 +4,7 @@ import * as publicSheetFunctions from './sheets';
 // Expose public functions by attaching to `global`
 global.onOpen = publicUiFunctions.onOpen;
 global.openDialog = publicUiFunctions.openDialog;
+global.openDialogBootstrap = publicUiFunctions.openDialogBootstrap;
 global.openAboutSidebar = publicUiFunctions.openAboutSidebar;
 global.getSheetsData = publicSheetFunctions.getSheetsData;
 global.addSheet = publicSheetFunctions.addSheet;

src/server/sheets.js

@@ -5,11 +5,11 @@ const getActiveSheetName = () => SpreadsheetApp.getActive().getSheetName();
 export const getSheetsData = () => {
   const activeSheetName = getActiveSheetName();
   return getSheets().map((sheet, index) => {
-    const sheetName = sheet.getName();
+    const name = sheet.getName();
     return {
-      text: sheetName,
-      sheetIndex: index,
-      isActive: sheetName === activeSheetName,
+      name,
+      index,
+      isActive: name === activeSheetName,
     };
   });
 };

src/server/ui.js

@@ -1,19 +1,27 @@
 export const onOpen = () => {
   SpreadsheetApp.getUi()
     .createMenu('My Sample React Project') // edit me!
-    .addItem('Sheet Name Editor', 'openDialog')
+    .addItem('Sheet Editor', 'openDialog')
+    .addItem('Sheet Editor (Bootstrap)', 'openDialogBootstrap')
     .addItem('About me', 'openAboutSidebar')
     .addToUi();
 };
 
 export const openDialog = () => {
-  const html = HtmlService.createHtmlOutputFromFile('main')
-    .setWidth(400)
+  const html = HtmlService.createHtmlOutputFromFile('dialog-demo')
+    .setWidth(600)
     .setHeight(600);
   SpreadsheetApp.getUi().showModalDialog(html, 'Sheet Editor');
 };
 
+export const openDialogBootstrap = () => {
+  const html = HtmlService.createHtmlOutputFromFile('dialog-demo-bootstrap')
+    .setWidth(600)
+    .setHeight(600);
+  SpreadsheetApp.getUi().showModalDialog(html, 'Sheet Editor (Bootstrap)');
+};
+
 export const openAboutSidebar = () => {
-  const html = HtmlService.createHtmlOutputFromFile('about');
+  const html = HtmlService.createHtmlOutputFromFile('sidebar-about-page');
   SpreadsheetApp.getUi().showSidebar(html);
 };