add initial support for tailwindcss (#134)

Add support for and demo using tailwindcss

.stylelintrc.json

@@ -0,0 +1,17 @@
+{
+  "rules": {
+    "at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": [
+          "extends",
+          "apply",
+          "tailwind",
+          "components",
+          "utilities",
+          "screen"
+        ]
+      }
+    ]
+  }
+}

package.json

@@ -38,7 +38,8 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.4.0",
     "react-dom": "^18.2.0",
-    "react-transition-group": "^4.4.2"
+    "react-transition-group": "^4.4.2",
+    "tailwindcss": "^3.1.6"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.6",
@@ -59,6 +60,7 @@
     "@types/jest-environment-puppeteer": "^5.0.2",
     "@types/puppeteer": "^5.4.6",
     "@types/react": "^18.0.14",
+    "autoprefixer": "10.4.5",
     "aws-sdk": "^2.1106.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.5",
@@ -93,6 +95,8 @@
     "jest-image-snapshot": "^5.1.0",
     "mkdirp": "^1.0.4",
     "module-to-cdn": "^3.1.5",
+    "postcss-loader": "^7.0.1",
+    "postcss-preset-env": "^7.7.2",
     "prettier": "^2.7.0",
     "puppeteer": "^14.3.0",
     "puppeteer-extra": "^3.2.3",

postcss.config.js

@@ -0,0 +1,6 @@
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+
+module.exports = {
+  plugins: ['postcss-preset-env', tailwindcss, autoprefixer],
+};

src/client/dialog-demo-tailwindcss/components/FormInput.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+const FormInput = ({ submitNewSheet }) => {
+  const [inputValue, setInputValue] = useState('');
+
+  const handleChange = (event) => setInputValue(event.target.value);
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    if (inputValue.length === 0) return;
+
+    submitNewSheet(inputValue);
+    setInputValue('');
+  };
+
+  return (
+    <form className="flex w-full mx-auto items-center" onSubmit={handleSubmit}>
+      <div className="grow pr-2 py-1">
+        <input
+            className="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-transparent focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 transition-colors duration-200 ease-in-out"
+            onChange={handleChange}
+            value={inputValue}
+            placeholder="New sheet name"
+        />
+      </div>
+      <button
+        className="text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded" 
+        type="submit"
+      >Add Sheet</button>
+    </form>
+  );
+};
+
+export default FormInput;
+
+FormInput.propTypes = {
+  submitNewSheet: PropTypes.func,
+};

src/client/dialog-demo-tailwindcss/components/SheetButton.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const SheetButton = ({ sheetDetails, deleteSheet, setActiveSheet }) => {
+  const { index, name, isActive } = sheetDetails;
+
+  return (
+    <div
+      className={`mt-5 py-3 w-1/2 justify-center border-b-2 title-font font-medium  inline-flex leading-none ${
+        isActive
+          ? ` bg-gray-100 border-indigo-500 text-indigo-500 tracking-wider rounded-t`
+          : ` border-gray-200 hover:text-gray-900 tracking-wider`
+      } flex flex-wrap space-x-2 p-2 items-end`}
+    >
+      <button
+        className="bg-transparent hover focus:outline-none grow"
+        onClick={() => setActiveSheet(name)}
+      >
+        {name}
+      </button>
+      <button
+        className="bg-transparent hover:text-red-500 sm"
+        onClick={() => deleteSheet(index)}
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          data-prefix="fas"
+          data-icon="times"
+          className="w-3 ml-3"
+          role="img"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 352 512"
+        >
+          <path
+            fill="currentColor"
+            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+          ></path>
+        </svg>
+      </button>
+    </div>
+  );
+};
+
+export default SheetButton;
+
+SheetButton.propTypes = {
+  sheetDetails: PropTypes.shape({
+    index: PropTypes.number,
+    name: PropTypes.string,
+    isActive: PropTypes.bool,
+  }),
+  deleteSheet: PropTypes.func,
+  setActiveSheet: PropTypes.func,
+};

src/client/dialog-demo-tailwindcss/components/SheetEditor.jsx

@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from 'react';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import FormInput from './FormInput';
+import SheetButton from './SheetButton';
+
+// This is a wrapper for google.script.run that lets us use promises.
+import { serverFunctions } from '../../utils/serverFunctions';
+
+const SheetEditor = () => {
+  const [names, setNames] = useState([]);
+
+  useEffect(() => {
+    // Call a server global function here and handle the response with .then() and .catch()
+    serverFunctions.getSheetsData().then(setNames).catch(alert);
+  }, []);
+
+  const deleteSheet = (sheetIndex) => {
+    serverFunctions.deleteSheet(sheetIndex).then(setNames).catch(alert);
+  };
+
+  const setActiveSheet = (sheetName) => {
+    serverFunctions.setActiveSheet(sheetName).then(setNames).catch(alert);
+  };
+
+  // You can also use async/await notation for server calls with our server wrapper.
+  // (This does the same thing as .then().catch() in the above handlers.)
+  const submitNewSheet = async (newSheetName) => {
+    try {
+      const response = await serverFunctions.addSheet(newSheetName);
+      setNames(response);
+    } catch (error) {
+      // eslint-disable-next-line no-alert
+      alert(error);
+    }
+  };
+
+  return (
+    <div>
+      <p>
+        <b>☀️ React demo! ☀️</b>
+      </p>
+      <p>
+        This is a sample page that demonstrates a simple React app. Enter a name
+        for a new sheet, hit enter and the new sheet will be created. Click the
+        red &times; next to the sheet name to delete it.
+      </p>
+      <FormInput submitNewSheet={submitNewSheet} />
+      <TransitionGroup className="sheet-list">
+        {names.length > 0 &&
+          names.map((name) => (
+            <CSSTransition
+              classNames="sheetNames"
+              timeout={500}
+              key={name.name}
+            >
+              <SheetButton
+                sheetDetails={name}
+                deleteSheet={deleteSheet}
+                setActiveSheet={setActiveSheet}
+              />
+            </CSSTransition>
+          ))}
+      </TransitionGroup>
+    </div>
+  );
+};
+
+export default SheetEditor;

src/client/dialog-demo-tailwindcss/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base target="_top" />
+    <!-- Add any external scripts and stylesheets here -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Nunito"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <section id="index">
+      <!-- bundled js and css will get inlined here during build -->
+    </section>
+  </body>
+</html>

src/client/dialog-demo-tailwindcss/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import SheetEditor from './components/SheetEditor';
+import './styles.css';
+
+const App = () => {
+  return (
+    <>
+      <SheetEditor />
+    </>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById('index'));

src/client/dialog-demo-tailwindcss/styles.css

@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+CSSTransitionGroup styling
+ */
+.sheetNames-enter {
+  opacity: 0;
+}
+
+.sheetNames-enter.sheetNames-enter-active {
+  opacity: 1;
+  transition: opacity 300ms ease-in;
+}
+
+.sheetNames-exit {
+  opacity: 1;
+}
+
+.sheetNames-exit.sheetNames-exit-active {
+  opacity: 0;
+  transition: opacity 300ms ease-in;
+}
+
+.sheetNames-appear {
+  opacity: 0;
+}
+
+.sheetNames-appear.sheetNames-appear-active {
+  opacity: 1;
+  transition: opacity 0.5ms ease-in;
+}

src/server/index.ts

@@ -2,6 +2,7 @@ import {
   onOpen,
   openDialog,
   openDialogBootstrap,
+  openDialogTailwindCSS,
   openAboutSidebar,
 } from './ui';
 
@@ -12,6 +13,7 @@ export {
   onOpen,
   openDialog,
   openDialogBootstrap,
+  openDialogTailwindCSS,
   openAboutSidebar,
   getSheetsData,
   addSheet,

src/server/ui.js

@@ -3,6 +3,7 @@ export const onOpen = () => {
     .createMenu('My Sample React Project') // edit me!
     .addItem('Sheet Editor', 'openDialog')
     .addItem('Sheet Editor (Bootstrap)', 'openDialogBootstrap')
+    .addItem('Sheet Editor (Tailwind CSS)', 'openDialogTailwindCSS')
     .addItem('About me', 'openAboutSidebar');
 
   menu.addToUi();
@@ -22,6 +23,13 @@ export const openDialogBootstrap = () => {
   SpreadsheetApp.getUi().showModalDialog(html, 'Sheet Editor (Bootstrap)');
 };
 
+export const openDialogTailwindCSS = () => {
+  const html = HtmlService.createHtmlOutputFromFile('dialog-demo-tailwindcss')
+    .setWidth(600)
+    .setHeight(600);
+  SpreadsheetApp.getUi().showModalDialog(html, 'Sheet Editor (Tailwind CSS)');
+};
+
 export const openAboutSidebar = () => {
   const html = HtmlService.createHtmlOutputFromFile('sidebar-about-page');
   SpreadsheetApp.getUi().showSidebar(html);

tailwind.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  content: ['./src/client/**/*.{js,jsx,ts,tsx}'],
+};

webpack.config.js

@@ -56,6 +56,12 @@ const clientEntrypoints = [
     filename: 'dialog-demo-bootstrap',
     template: './src/client/dialog-demo-bootstrap/index.html',
   },
+  {
+    name: 'CLIENT - Dialog Demo Tailwind CSS',
+    entry: './src/client/dialog-demo-tailwindcss/index.js',
+    filename: 'dialog-demo-tailwindcss',
+    template: './src/client/dialog-demo-tailwindcss/index.html',
+  },
   {
     name: 'CLIENT - Sidebar About Page',
     entry: './src/client/sidebar-about-page/index.js',
@@ -161,7 +167,7 @@ const clientConfig = ({ isDevClientWrapper }) => ({
       // we could add support for scss here
       {
         test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
+        use: ['style-loader', 'css-loader', 'postcss-loader'],
       },
     ],
   },