i-VRESSE · sverhoeven · Oct 20, 2023 · Oct 20, 2023 · Oct 22, 2023 · Oct 23, 2023
diff --git a/apps/kitchensink-tailwind/.eslintrc.cjs b/apps/kitchensink-tailwind/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/apps/kitchensink-tailwind/.gitignore b/apps/kitchensink-tailwind/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/apps/kitchensink-tailwind/README.md b/apps/kitchensink-tailwind/README.md
@@ -0,0 +1,27 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+   parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+   },
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
diff --git a/apps/kitchensink-tailwind/components.json b/apps/kitchensink-tailwind/components.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
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="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</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,38 @@
+{
+  "name": "kitchensink-tailwind",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@i-vresse/wb-core": "workspace:^",
+    "@i-vresse/wb-tailwind-form": "workspace:^",
+    "@radix-ui/react-icons": "^1.3.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
+}
diff --git a/apps/kitchensink-tailwind/postcss.config.cjs b/apps/kitchensink-tailwind/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    }
+  }
diff --git a/apps/kitchensink-tailwind/public/vite.svg b/apps/kitchensink-tailwind/public/vite.svg
diff --git a/apps/kitchensink-tailwind/src/App.css b/apps/kitchensink-tailwind/src/App.css
@@ -0,0 +1,226 @@
+
+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 normal-case transition-colors duration-150 ease-in-out;
+}
+
+.btn-light {
+  @apply border-gray-100 bg-gray-100 text-start text-primary  hover:bg-gray-200;
+}
+
+.btn-sm {
+  @apply h-12 p-1 text-sm;
+}
+
+.grip,
+.delete {
+  @apply h-auto border-0;
+}
+
+.btn-link {
+  @apply border-0 bg-inherit text-primary hover:bg-primary;
+}
+
+.btn-outline-danger {
+  @apply border border-destructive text-destructive-foreground hover:bg-destructive hover:text-white;
+}
+
+.btn-danger {
+  @apply bg-destructive 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 rounded 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;
+}
+
+/* rjsf uses .checkbox in div and input. daisyui uses checkbox on input. */
+div.checkbox {
+  @apply h-auto w-auto cursor-default border-none;
+}
+
+.form-check-input {
+  @apply checkbox;
+}
+
+.custom-select {
+  @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-4  border-b-primary;
+}
+
+.nav-link {
+  @apply block rounded-t-md border bg-primary-foreground px-4 py-2;
+}
+
+.nav .active {
+  @apply border-primary bg-primary text-primary-foreground;
+}
+
+.justify-content-end {
+  @apply justify-end;
+}
+
+.d-flex {
+  @apply !flex;
+}
+
+.align-items-center {
+  @apply items-center;
+}
+
+.table-field {
+  @apply mb-4 table 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;
+}
+
+.table-field th:first-child {
+  @apply relative;
+}
+
+.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 {
+  /* grid-template-areas:
+    "catalog workflow node"
+    "catalog workflow-actions node-actions"; */
+  grid-template-columns: 1fr 1fr 2fr;
+  /* grid-template-rows: 1fr auto; */
+}
+
+.page > .action-row {
+  padding: 0.25rem;
+  overflow: unset;
+}
+
+code .table {
+  @apply contents;
+}