i-VRESSE · sverhoeven · Feb 27, 2023 · Feb 27, 2023 · Feb 27, 2023 · Feb 27, 2023
diff --git a/README.md b/README.md
@@ -21,6 +21,7 @@ The workflow builder is organized as a monorepo with packages and apps.
 * [haddock3-submit app](apps/haddock3-submit): To construct haddock3 workflow and submit it for online running
 * [haddock3-galaxy app](apps/haddock3-galaxy): To construct haddock3 workflow and submit inside a galaxy project instance.
 * [kitchensink app](apps/kitchensink): Demonstration of features of workflow builder
+* [kitchensink app with tailwind](apps/kitchensink): Demonstration of features of workflow builder with tailwindcss styling.
 * [@i-vresse/wb-core package](packages/core): React components, state management, input/output functions to create an application
 * [@i-vresse/wb-form package](packages/form): Web Form based on JSON Schema
 * [haddock3_catalog package](packages/haddock3_catalog): Generate script and storage place for haddock3 catalogs

diff --git a/apps/kitchensink-tailwind/.gitignore b/apps/kitchensink-tailwind/.gitignore
@@ -0,0 +1,7 @@
+dist
+dist-ssr
+*.local
+coverage
+.coverage
+util/__pycache__/
+playwright-report/
diff --git a/apps/kitchensink-tailwind/index.html b/apps/kitchensink-tailwind/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/kitchensink-tailwind/package.json b/apps/kitchensink-tailwind/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@i-vresse/wb-kitchensink-app-tailwind",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite ",
+    "build": "tsc && vite build",
+    "serve": "vite preview",
+    "lint": "ts-standard",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "format": "prettier --write index.html src"
+  },
+  "dependencies": {
+    "@i-vresse/wb-core": "workspace:^",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.3",
+    "@types/node": "16",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@vitejs/plugin-react": "^2.0.0",
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.21",
+    "prettier": "^2.8.4",
+    "prettier-plugin-tailwindcss": "^0.2.3",
+    "tailwindcss": "^3.2.7",
+    "ts-standard": "^11.0.0",
+    "typescript": "^4.7.4",
+    "vite": "^3.0.4"
+  },
+  "engines": {
+    "node": ">=16"
+  },
+  "ts-standard": {
+    "ignore": [
+      "vite.config.ts"
+    ]
+  },
+  "packageManager": "[email protected]"
+}
diff --git a/apps/kitchensink-tailwind/postcss.config.js b/apps/kitchensink-tailwind/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}
diff --git a/apps/kitchensink-tailwind/src/App.css b/apps/kitchensink-tailwind/src/App.css
@@ -0,0 +1,204 @@
+h1 {
+  @apply text-4xl;
+}
+
+legend {
+  @apply text-2xl;
+}
+
+h4 {
+  @apply text-xl;
+}
+
+h5 {
+  @apply text-xl;
+}
+
+.btn {
+  @apply inline-block rounded px-3 py-1.5 text-center align-middle text-base font-normal transition duration-150 ease-in-out;
+}
+
+.btn-primary {
+  @apply bg-blue-500 text-white hover:bg-blue-600;
+}
+
+.btn-light {
+  @apply bg-gray-100 hover:bg-gray-200;
+}
+
+.btn-sm {
+  @apply p-1 text-sm;
+}
+
+.btn-link {
+  @apply text-blue-600;
+}
+
+.btn-outline-danger {
+  @apply border border-red-500 text-red-500 hover:bg-red-500 hover:text-white;
+}
+
+.btn-danger {
+  @apply bg-red-500 text-white;
+}
+
+.btn-toolbar {
+  @apply flex flex-wrap justify-start;
+}
+
+ul {
+  @apply list-inside;
+}
+
+ul ul {
+  /* TODO add circle before button or not? */
+}
+
+li {
+  @apply pl-2;
+}
+
+.card {
+  @apply border border-gray-300;
+}
+
+.card-header {
+  @apply border border-gray-100 bg-gray-100 p-2 py-4 align-middle;
+}
+
+.card-header svg {
+  @apply mr-3 inline;
+}
+
+.form-group {
+  @apply mb-4 p-1;
+}
+
+.form-label {
+  @apply mb-2 inline-block;
+}
+
+.form-control {
+  @apply w-full p-1.5;
+}
+
+.form-check-label {
+  @apply ml-2;
+}
+
+.array-item-add,
+.object-property-expand {
+  /* TODO full width + center plus sign */
+  @apply m-4 !w-auto;
+}
+
+.container {
+  @apply w-full;
+}
+
+.container-fluid {
+  @apply w-full;
+}
+
+.row {
+  @apply flex flex-wrap;
+}
+
+.col {
+  @apply max-w-full grow basis-0;
+}
+
+.col-2 {
+  @apply w-full max-w-[16.666667%] basis-2/12 px-3;
+}
+
+.col-3 {
+  @apply w-full max-w-[25%] basis-3/12 px-3;
+}
+
+.col-5 {
+  @apply max-w-[41.666667%] basis-5/12;
+}
+
+.col-9 {
+  @apply max-w-[75%] basis-9/12;
+}
+
+.col-10 {
+  @apply max-w-[85%] basis-10/12;
+}
+
+.col-12 {
+  @apply max-w-full basis-full;
+}
+
+.offset-9 {
+  @apply ml-[75%];
+}
+
+.nav {
+  @apply flex flex-wrap;
+}
+
+.nav-tabs {
+  @apply border-b-2  border-b-gray-100;
+}
+
+.nav-link {
+  @apply block rounded-t-md border bg-gray-100 px-4 py-2;
+}
+
+.nav .active {
+  @apply border-gray-100 bg-white text-black;
+}
+
+.justify-content-end {
+  @apply justify-end;
+}
+
+.d-flex {
+  @apply !flex;
+}
+
+.align-items-center {
+  @apply items-center;
+}
+
+.table-field {
+  @apply mb-4 table w-full border-collapse border border-gray-300;
+}
+
+.table-bordered td,
+.table-bordered th {
+  @apply border border-gray-300;
+}
+
+.table-striped tbody tr:nth-of-type(odd) {
+  @apply bg-gray-100;
+}
+
+.array-item-remove {
+  @apply !text-black;
+}
+
+.popover-header {
+  @apply rounded border-b border-gray-200 bg-gray-100 px-3 py-2;
+}
+
+.popover-body {
+  @apply bg-white px-3 py-2 text-black;
+}
+
+.page {
+  /* TODO replace with tailwind */
+  grid-template-areas:
+    "head head head"
+    "catalog workflow node"
+    "catalog workflow-actions node-actions";
+  grid-template-columns: 1fr 1fr 2fr;
+  grid-template-rows: auto 1fr auto;
+}
+
+.page > div {
+  overflow: auto;
+}
diff --git a/apps/kitchensink-tailwind/src/App.tsx b/apps/kitchensink-tailwind/src/App.tsx
@@ -0,0 +1,53 @@
+import { useEffect } from 'react'
+import {
+  CatalogPanel,
+  FormActions,
+  GridArea,
+  Header,
+  NodePanel,
+  WorkflowClear,
+  WorkflowDownloadButton,
+  WorkflowPanel,
+  WorkflowUploadButton
+} from '@i-vresse/wb-core'
+import { useSetCatalog } from '@i-vresse/wb-core/dist/store'
+import { prepareCatalog } from '@i-vresse/wb-core/dist/catalog'
+
+import '@i-vresse/wb-form/dist/index.css'
+import './App.css'
+import kitchensinkCatalog from './kitchensink.json'
+
+function App (): JSX.Element {
+  const setCatalog = useSetCatalog()
+  useEffect(() => {
+    const catalog = prepareCatalog(kitchensinkCatalog)
+    setCatalog(catalog)
+  }, [])
+  return (
+    <div className='page grid h-screen w-full gap-2 p-4'>
+      <GridArea area='head'>
+        <Header />
+      </GridArea>
+      <GridArea area='catalog'>
+        <CatalogPanel />
+      </GridArea>
+      <GridArea area='workflow'>
+        <WorkflowPanel>
+          <WorkflowUploadButton />
+        </WorkflowPanel>
+      </GridArea>
+      <GridArea area='node'>
+        <NodePanel />
+      </GridArea>
+      <GridArea className='p-1' area='workflow-actions'>
+        <WorkflowDownloadButton />
+        <WorkflowClear />
+      </GridArea>
+      <GridArea className='p-1' area='node-actions'>
+        <FormActions />
+      </GridArea>
+    </div>
+  )
+}
+
+export default App
diff --git a/apps/kitchensink-tailwind/src/favicon.svg b/apps/kitchensink-tailwind/src/favicon.svg
diff --git a/apps/kitchensink-tailwind/src/index.css b/apps/kitchensink-tailwind/src/index.css
@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}