Getting ready for demos and tests

hopsoft · Jul 21, 2023 · fc13408 · fc13408
1 parent cb83de8
commit fc13408
Show file tree

Hide file tree

Showing 33 changed files with 813 additions and 222 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
diff --git a/app/assets/builds/@turbo-boost/commands.metafile.json b/app/assets/builds/@turbo-boost/commands.metafile.json
@@ -1 +1 @@
-{"inputs":{"node_modules/@turbo-boost/streams/app/assets/builds/@turbo-boost/streams.js":{"bytes":47867,"imports":[],"format":"esm"},"app/javascript/meta.js":{"bytes":341,"imports":[],"format":"esm"},"app/javascript/events.js":{"bytes":784,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"app/javascript/state/observable.js":{"bytes":929,"imports":[{"path":"app/javascript/meta.js","kind":"import-statement","original":"../meta"},{"path":"app/javascript/events.js","kind":"import-statement","original":"../events"}],"format":"esm"},"app/javascript/state/index.js":{"bytes":1840,"imports":[{"path":"app/javascript/meta.js","kind":"import-statement","original":"../meta"},{"path":"app/javascript/state/observable.js","kind":"import-statement","original":"./observable"},{"path":"app/javascript/events.js","kind":"import-statement","original":"../events"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"app/javascript/renderer.js":{"bytes":477,"imports":[],"format":"esm"},"app/javascript/activity.js":{"bytes":283,"imports":[],"format":"esm"},"app/javascript/lifecycle.js":{"bytes":637,"imports":[{"path":"app/javascript/activity.js","kind":"import-statement","original":"./activity"},{"path":"app/javascript/events.js","kind":"import-statement","original":"./events"}],"format":"esm"},"app/javascript/turbo.js":{"bytes":2040,"imports":[{"path":"app/javascript/meta.js","kind":"import-statement","original":"./meta"},{"path":"app/javascript/state/index.js","kind":"import-statement","original":"./state"},{"path":"app/javascript/renderer.js","kind":"import-statement","original":"./renderer"},{"path":"app/javascript/events.js","kind":"import-statement","original":"./events"},{"path":"app/javascript/lifecycle.js","kind":"import-statement","original":"./lifecycle"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"app/javascript/schema.js":{"bytes":210,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"app/javascript/confirmation.js":{"bytes":919,"imports":[{"path":"app/javascript/events.js","kind":"import-statement","original":"./events"},{"path":"app/javascript/schema.js","kind":"import-statement","original":"./schema"}],"format":"esm"},"app/javascript/delegates.js":{"bytes":874,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"app/javascript/elements.js":{"bytes":1463,"imports":[{"path":"app/javascript/schema.js","kind":"import-statement","original":"./schema"},{"path":"app/javascript/lifecycle.js","kind":"import-statement","original":"./lifecycle"}],"format":"esm"},"app/javascript/drivers/form.js":{"bytes":314,"imports":[{"path":"app/javascript/meta.js","kind":"import-statement","original":"../meta"}],"format":"esm"},"app/javascript/urls.js":{"bytes":241,"imports":[],"format":"esm"},"app/javascript/drivers/frame.js":{"bytes":219,"imports":[{"path":"app/javascript/urls.js","kind":"import-statement","original":"../urls"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"app/javascript/drivers/method.js":{"bytes":266,"imports":[{"path":"app/javascript/urls.js","kind":"import-statement","original":"../urls"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"app/javascript/drivers/window.js":{"bytes":1930,"imports":[{"path":"app/javascript/meta.js","kind":"import-statement","original":"../meta"},{"path":"app/javascript/state/index.js","kind":"import-statement","original":"../state"},{"path":"app/javascript/events.js","kind":"import-statement","original":"../events"},{"path":"app/javascript/lifecycle.js","kind":"import-statement","original":"../lifecycle"},{"path":"app/javascript/urls.js","kind":"import-statement","original":"../urls"},{"path":"app/javascript/renderer.js","kind":"import-statement","original":"../renderer"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"app/javascript/drivers/index.js":{"bytes":2064,"imports":[{"path":"app/javascript/elements.js","kind":"import-statement","original":"../elements"},{"path":"app/javascript/drivers/form.js","kind":"import-statement","original":"./form"},{"path":"app/javascript/drivers/frame.js","kind":"import-statement","original":"./frame"},{"path":"app/javascript/drivers/method.js","kind":"import-statement","original":"./method"},{"path":"app/javascript/drivers/window.js","kind":"import-statement","original":"./window"}],"format":"esm"},"app/javascript/logger.js":{"bytes":731,"imports":[{"path":"app/javascript/events.js","kind":"import-statement","original":"./events"}],"format":"esm"},"app/javascript/uuids.js":{"bytes":221,"imports":[],"format":"esm"},"app/javascript/index.js":{"bytes":3513,"imports":[{"path":"node_modules/@turbo-boost/streams/app/assets/builds/@turbo-boost/streams.js","kind":"import-statement","original":"@turbo-boost/streams"},{"path":"app/javascript/turbo.js","kind":"import-statement","original":"./turbo"},{"path":"app/javascript/schema.js","kind":"import-statement","original":"./schema"},{"path":"app/javascript/events.js","kind":"import-statement","original":"./events"},{"path":"app/javascript/activity.js","kind":"import-statement","original":"./activity"},{"path":"app/javascript/confirmation.js","kind":"import-statement","original":"./confirmation"},{"path":"app/javascript/delegates.js","kind":"import-statement","original":"./delegates"},{"path":"app/javascript/drivers/index.js","kind":"import-statement","original":"./drivers"},{"path":"app/javascript/meta.js","kind":"import-statement","original":"./meta"},{"path":"app/javascript/elements.js","kind":"import-statement","original":"./elements"},{"path":"app/javascript/lifecycle.js","kind":"import-statement","original":"./lifecycle"},{"path":"app/javascript/logger.js","kind":"import-statement","original":"./logger"},{"path":"app/javascript/state/index.js","kind":"import-statement","original":"./state"},{"path":"app/javascript/urls.js","kind":"import-statement","original":"./urls"},{"path":"app/javascript/uuids.js","kind":"import-statement","original":"./uuids"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"}},"outputs":{"app/assets/builds/@turbo-boost/commands.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":238243},"app/assets/builds/@turbo-boost/commands.js":{"imports":[],"exports":["default"],"entryPoint":"app/javascript/index.js","inputs":{"node_modules/@turbo-boost/streams/app/assets/builds/@turbo-boost/streams.js":{"bytesInOutput":47846},"app/javascript/meta.js":{"bytesInOutput":254},"app/javascript/events.js":{"bytesInOutput":500},"app/javascript/state/observable.js":{"bytesInOutput":415},"app/javascript/state/index.js":{"bytesInOutput":794},"app/javascript/renderer.js":{"bytesInOutput":264},"app/javascript/activity.js":{"bytesInOutput":179},"app/javascript/lifecycle.js":{"bytesInOutput":299},"app/javascript/turbo.js":{"bytesInOutput":1031},"app/javascript/schema.js":{"bytesInOutput":166},"app/javascript/confirmation.js":{"bytesInOutput":419},"app/javascript/delegates.js":{"bytesInOutput":440},"app/javascript/elements.js":{"bytesInOutput":783},"app/javascript/drivers/form.js":{"bytesInOutput":188},"app/javascript/urls.js":{"bytesInOutput":167},"app/javascript/drivers/frame.js":{"bytesInOutput":98},"app/javascript/drivers/method.js":{"bytesInOutput":132},"app/javascript/drivers/window.js":{"bytesInOutput":1188},"app/javascript/drivers/index.js":{"bytesInOutput":1002},"app/javascript/logger.js":{"bytesInOutput":408},"app/javascript/uuids.js":{"bytesInOutput":155},"app/javascript/index.js":{"bytesInOutput":1676}},"bytes":58909}}}
+{"inputs":{"node_modules/@turbo-boost/streams/app/assets/builds/@turbo-boost/streams.js":{"bytes":47867,"imports":[],"format":"esm"},"app/javascript/meta.js":{"bytes":341,"imports":[],"format":"esm"},"app/javascript/events.js":{"bytes":784,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"app/javascript/state/observable.js":{"bytes":920,"imports":[{"path":"app/javascript/meta.js","kind":"import-statement","original":"../meta"},{"path":"app/javascript/events.js","kind":"import-statement","original":"../events"}],"format":"esm"},"app/javascript/state/index.js":{"bytes":1835,"imports":[{"path":"app/javascript/meta.js","kind":"import-statement","original":"../meta"},{"path":"app/javascript/state/observable.js","kind":"import-statement","original":"./observable"},{"path":"app/javascript/events.js","kind":"import-statement","original":"../events"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"app/javascript/renderer.js":{"bytes":477,"imports":[],"format":"esm"},"app/javascript/activity.js":{"bytes":283,"imports":[],"format":"esm"},"app/javascript/lifecycle.js":{"bytes":637,"imports":[{"path":"app/javascript/activity.js","kind":"import-statement","original":"./activity"},{"path":"app/javascript/events.js","kind":"import-statement","original":"./events"}],"format":"esm"},"app/javascript/turbo.js":{"bytes":2034,"imports":[{"path":"app/javascript/meta.js","kind":"import-statement","original":"./meta"},{"path":"app/javascript/state/index.js","kind":"import-statement","original":"./state"},{"path":"app/javascript/renderer.js","kind":"import-statement","original":"./renderer"},{"path":"app/javascript/events.js","kind":"import-statement","original":"./events"},{"path":"app/javascript/lifecycle.js","kind":"import-statement","original":"./lifecycle"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"app/javascript/schema.js":{"bytes":210,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"app/javascript/confirmation.js":{"bytes":919,"imports":[{"path":"app/javascript/events.js","kind":"import-statement","original":"./events"},{"path":"app/javascript/schema.js","kind":"import-statement","original":"./schema"}],"format":"esm"},"app/javascript/delegates.js":{"bytes":874,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"app/javascript/elements.js":{"bytes":1463,"imports":[{"path":"app/javascript/schema.js","kind":"import-statement","original":"./schema"},{"path":"app/javascript/lifecycle.js","kind":"import-statement","original":"./lifecycle"}],"format":"esm"},"app/javascript/drivers/form.js":{"bytes":313,"imports":[{"path":"app/javascript/meta.js","kind":"import-statement","original":"../meta"}],"format":"esm"},"app/javascript/urls.js":{"bytes":241,"imports":[],"format":"esm"},"app/javascript/drivers/frame.js":{"bytes":218,"imports":[{"path":"app/javascript/urls.js","kind":"import-statement","original":"../urls"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"app/javascript/drivers/method.js":{"bytes":265,"imports":[{"path":"app/javascript/urls.js","kind":"import-statement","original":"../urls"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"app/javascript/drivers/window.js":{"bytes":1864,"imports":[{"path":"app/javascript/meta.js","kind":"import-statement","original":"../meta"},{"path":"app/javascript/state/index.js","kind":"import-statement","original":"../state"},{"path":"app/javascript/events.js","kind":"import-statement","original":"../events"},{"path":"app/javascript/lifecycle.js","kind":"import-statement","original":"../lifecycle"},{"path":"app/javascript/urls.js","kind":"import-statement","original":"../urls"},{"path":"app/javascript/renderer.js","kind":"import-statement","original":"../renderer"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"app/javascript/drivers/index.js":{"bytes":2044,"imports":[{"path":"app/javascript/elements.js","kind":"import-statement","original":"../elements"},{"path":"app/javascript/drivers/form.js","kind":"import-statement","original":"./form"},{"path":"app/javascript/drivers/frame.js","kind":"import-statement","original":"./frame"},{"path":"app/javascript/drivers/method.js","kind":"import-statement","original":"./method"},{"path":"app/javascript/drivers/window.js","kind":"import-statement","original":"./window"}],"format":"esm"},"app/javascript/logger.js":{"bytes":731,"imports":[{"path":"app/javascript/events.js","kind":"import-statement","original":"./events"}],"format":"esm"},"app/javascript/uuids.js":{"bytes":221,"imports":[],"format":"esm"},"app/javascript/index.js":{"bytes":3531,"imports":[{"path":"node_modules/@turbo-boost/streams/app/assets/builds/@turbo-boost/streams.js","kind":"import-statement","original":"@turbo-boost/streams"},{"path":"app/javascript/turbo.js","kind":"import-statement","original":"./turbo"},{"path":"app/javascript/schema.js","kind":"import-statement","original":"./schema"},{"path":"app/javascript/events.js","kind":"import-statement","original":"./events"},{"path":"app/javascript/activity.js","kind":"import-statement","original":"./activity"},{"path":"app/javascript/confirmation.js","kind":"import-statement","original":"./confirmation"},{"path":"app/javascript/delegates.js","kind":"import-statement","original":"./delegates"},{"path":"app/javascript/drivers/index.js","kind":"import-statement","original":"./drivers"},{"path":"app/javascript/meta.js","kind":"import-statement","original":"./meta"},{"path":"app/javascript/elements.js","kind":"import-statement","original":"./elements"},{"path":"app/javascript/lifecycle.js","kind":"import-statement","original":"./lifecycle"},{"path":"app/javascript/logger.js","kind":"import-statement","original":"./logger"},{"path":"app/javascript/state/index.js","kind":"import-statement","original":"./state"},{"path":"app/javascript/urls.js","kind":"import-statement","original":"./urls"},{"path":"app/javascript/uuids.js","kind":"import-statement","original":"./uuids"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"}},"outputs":{"app/assets/builds/@turbo-boost/commands.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":238139},"app/assets/builds/@turbo-boost/commands.js":{"imports":[],"exports":["default"],"entryPoint":"app/javascript/index.js","inputs":{"node_modules/@turbo-boost/streams/app/assets/builds/@turbo-boost/streams.js":{"bytesInOutput":47846},"app/javascript/meta.js":{"bytesInOutput":254},"app/javascript/events.js":{"bytesInOutput":500},"app/javascript/state/observable.js":{"bytesInOutput":415},"app/javascript/state/index.js":{"bytesInOutput":794},"app/javascript/renderer.js":{"bytesInOutput":264},"app/javascript/activity.js":{"bytesInOutput":179},"app/javascript/lifecycle.js":{"bytesInOutput":299},"app/javascript/turbo.js":{"bytesInOutput":1031},"app/javascript/schema.js":{"bytesInOutput":166},"app/javascript/confirmation.js":{"bytesInOutput":419},"app/javascript/delegates.js":{"bytesInOutput":440},"app/javascript/elements.js":{"bytesInOutput":783},"app/javascript/drivers/form.js":{"bytesInOutput":188},"app/javascript/urls.js":{"bytesInOutput":167},"app/javascript/drivers/frame.js":{"bytesInOutput":98},"app/javascript/drivers/method.js":{"bytesInOutput":132},"app/javascript/drivers/window.js":{"bytesInOutput":1188},"app/javascript/drivers/index.js":{"bytesInOutput":1002},"app/javascript/logger.js":{"bytesInOutput":408},"app/javascript/uuids.js":{"bytesInOutput":155},"app/javascript/index.js":{"bytesInOutput":1676}},"bytes":58909}}}
diff --git a/package.json b/package.json
@@ -24,11 +24,15 @@
     "@hotwired/turbo-rails": ">= 7.2.0"
   },
   "devDependencies": {
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/forms": "^0.5.4",
+    "@tailwindcss/typography": "^0.5.9",
     "esbuild": "^0.18.14",
     "flowbite": "1.5.3",
     "playwright": "^1.29.2",
     "prettier": "^3.0.0",
-    "prettier-plugin-tailwindcss": "^0.4.1"
+    "prettier-plugin-tailwindcss": "^0.4.1",
+    "tailwindcss": "^3.3.3"
   },
   "scripts": {
     "build": "bin/standardize && node bin/build.mjs",

diff --git a/prettier.config.js b/prettier.config.js
@@ -0,0 +1,22 @@
+module.exports = {
+  arrowParens: "avoid",
+  bracketSameLine: true,
+  bracketSpacing: true,
+  embeddedLanguageFormatting: "auto",
+  htmlWhitespaceSensitivity: "css",
+  insertPragma: false,
+  jsxSingleQuote: false,
+  plugins: ["prettier-plugin-tailwindcss"],
+  printWidth: 110,
+  proseWrap: "preserve",
+  quoteProps: "as-needed",
+  requirePragma: false,
+  semi: false,
+  singleAttributePerLine: false,
+  singleQuote: true,
+  tabWidth: 2,
+  tailwindConfig: './test/dummy/config/tailwind.config.js',
+  trailingComma: "none",
+  useTabs: false,
+  vueIndentScriptAndStyle: false
+}
diff --git a/test/dummy/app/assets/builds/tailwind.css b/test/dummy/app/assets/builds/tailwind.css
diff --git a/test/dummy/app/assets/stylesheets/application.tailwind.css b/test/dummy/app/assets/stylesheets/application.tailwind.css
@@ -1,6 +1,7 @@
 @import './tailwind/base';
-@import './tailwind/components/marketing/features';
+@import './tailwind/components/alert';
 @import './tailwind/components/instruction';
+@import './tailwind/components/feature';
 
 @tailwind base;
 @tailwind components;

diff --git a/test/dummy/app/assets/stylesheets/tailwind/components/alert.css b/test/dummy/app/assets/stylesheets/tailwind/components/alert.css
@@ -0,0 +1,6 @@
+@layer components {
+  [class*="alert["] { @apply flex items-center p-4 my-4 text-sm rounded-lg; }
+  [class*="alert["] > svg { @apply w-4 h-4 mr-2; }
+  [class~="alert[info]"] { @apply text-blue-800 bg-blue-50 dark:bg-gray-800 dark:text-blue-400; }
+  [class~="alert[warning]"] { @apply text-yellow-800 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300; }
+}
diff --git a/test/dummy/app/assets/stylesheets/tailwind/components/feature.css b/test/dummy/app/assets/stylesheets/tailwind/components/feature.css
@@ -0,0 +1,12 @@
+@layer components {
+  /* icon container */
+  .feature > div:first-child { @apply bg-primary-100 dark:bg-primary-900 mb-4 flex h-10 w-10 items-center justify-center rounded-full lg:h-12 lg:w-12; }
+
+  /* icon */
+  .feature > div:first-child svg { @apply text-primary-600 dark:text-primary-300 h-5 w-5 lg:h-6 lg:w-6;}
+
+  .feature h3 { @apply mb-2 text-xl font-bold dark:text-white; }
+  .feature p { @apply text-gray-600 dark:text-gray-400; }
+  .feature p em { @apply text-accent-500 dark:text-accent-300 not-italic; }
+  .feature p i { @apply not-italic text-gray-700 underline decoration-gray-600 decoration-dotted underline-offset-4 dark:text-gray-300 dark:decoration-gray-400; }
+}
diff --git a/test/dummy/app/assets/stylesheets/tailwind/components/instruction.css b/test/dummy/app/assets/stylesheets/tailwind/components/instruction.css
@@ -1,14 +1,14 @@
 @layer components {
-  .instruction .step {
-    @apply border-primary-400 mr-3 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2;
-  }
-  .instruction .step * {
-    @apply text-primary-400;
-  }
-  .instruction h3 {
-    @apply text-3xl font-bold leading-tight text-gray-900 dark:text-gray-200 sm:text-4xl;
-  }
-  .instruction p {
-    @apply my-2 text-base font-normal text-gray-500 dark:text-gray-400 sm:text-lg;
-  }
+  /* step */
+  .instruction > div:first-child { @apply flex mb-4; }
+
+  /* step.number */
+  .instruction > div:first-child > span { @apply border-primary-400 mr-3 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2; }
+  .instruction > div:first-child > span span { @apply text-primary-400; }
+
+  /* step.heading */
+  .instruction > div:first-child > h3 { @apply text-3xl font-bold leading-tight text-gray-900 dark:text-gray-200 sm:text-4xl; }
+
+  /* copy */
+  .instruction > p { @apply my-2 text-base font-normal text-gray-500 dark:text-gray-400 sm:text-lg; }
 }