add initial support for tailwindcss (#134)

Add support for and demo using tailwindcss
2022-11-18 05:37:00 +01:00
parent f4371469fc
commit 4718f4b870
14 changed files with 2617 additions and 161 deletions
@@ -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,
+};
@@ -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,
+};
@@ -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;
@@ -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>
@@ -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'));
@@ -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;
+}