JavaScript to TypeScript (#2490)

* Initial changes conversion from js and json to ts

* Update dyn-screen

* Remove tailwind-config-viewer

---------

Co-authored-by: Olga Bulat <[email protected]>

.github/actions/build-docs/action.yml

@@ -27,16 +27,10 @@ runs:
       run: |
         just frontend/run storybook:build
 
-    - name: Build Tailwind Config Viewer
-      shell: bash
-      run: |
-        just frontend/run tcv:build
-
     # Storybook will be available at `/storybook`
     # Tailwind will be available at `/tailwind`
     - name: Merge all docs
       shell: bash
       run: |
         mv documentation/_build /tmp/docs
         mv frontend/storybook-static /tmp/docs/storybook
-        mv frontend/.tcv-export /tmp/docs/tailwind

frontend/.gitignore

@@ -5,9 +5,6 @@
 .nuxt-storybook
 storybook-static
 
-# Tailwind Config Viewer
-.tcv-export
-
 # Playwright creates these two folders
 test-results
 test/Default

frontend/nuxt.config.ts

@@ -249,7 +249,7 @@ const config: NuxtConfig = {
         },
         plugins: {
           tailwindcss: {
-            config: path.resolve(__dirname, "tailwind.config.js"),
+            config: path.resolve(__dirname, "tailwind.config.ts"),
           },
           "postcss-focus-visible": {},
         },

frontend/package.json

@@ -22,8 +22,6 @@
     "storybook": "nuxt storybook --port=54000",
     "storybook:build": "nuxt storybook build",
     "storybook:smoke": "pnpm storybook --ci --smoke-test",
-    "tcv": "tailwind-config-viewer --port 54001",
-    "tcv:build": "tailwind-config-viewer export ./.tcv-export",
     "talkback": "node ./test/proxy.js",
     "pretest": "pnpm install",
     "test": "pnpm test:unit && pnpm test:playwright",
@@ -134,7 +132,6 @@
     "postcss": "^8.4.12",
     "qs": "^6.11.0",
     "rimraf": "^3.0.2",
-    "tailwind-config-viewer": "^1.6.3",
     "tailwindcss": "^3.3.0",
     "talkback": "^3.0.1",
     "typescript": "^4.9.5",

frontend/src/constants/z-indices.ts

@@ -0,0 +1,25 @@
+/**
+ * mapping of z-index names to z-indices; Ensure that these values are also
+ * written in the `tailwind.safelist.txt` file in the project root.
+ */
+export const Z_INDICES = Object.freeze({
+  auto: "auto",
+  10: "10",
+  20: "20",
+  30: "30",
+  40: "40",
+  50: "50",
+  // Named indices
+  popover: "50",
+  snackbar: "10",
+  "global-audio": "20",
+} as const)
+
+/**
+ * Check whether the given z-index is valid and is configured in Tailwind.
+ *
+ * @param value - the provided z-index to validate
+ * @returns - whether the z-index is valid and configured in Tailwind
+ */
+export const zIndexValidator = (value: string | number): boolean =>
+  Object.keys(Z_INDICES).includes(value.toString())

frontend/src/layouts/content-layout.vue

@@ -2,7 +2,7 @@
   <div>
     <VSkipToContentButton />
     <div
-      class="app grid min-h-dyn-screen grid-cols-1 grid-rows-[auto,1fr,auto] bg-white"
+      class="app min-h-dyn-screen grid grid-cols-1 grid-rows-[auto,1fr,auto] bg-white"
       :class="[isDesktopLayout ? 'desktop' : 'mobile', breakpoint]"
     >
       <div class="header-el sticky top-0 z-40 block bg-white">

frontend/src/layouts/default.vue

@@ -2,7 +2,7 @@
   <div>
     <VSkipToContentButton />
     <div
-      class="app grid h-dyn-screen grid-cols-1 grid-rows-[auto,1fr] flex-col bg-yellow"
+      class="app h-dyn-screen grid grid-cols-1 grid-rows-[auto,1fr] flex-col bg-yellow"
       :class="[isDesktopLayout ? 'desktop' : 'mobile', breakpoint]"
     >
       <div class="header-el">

frontend/src/layouts/search-layout.vue

@@ -2,7 +2,7 @@
   <div>
     <VSkipToContentButton />
     <div
-      class="app grid h-dyn-screen min-h-dyn-screen grid-rows-[auto,1fr,auto] bg-white"
+      class="app h-dyn-screen min-h-dyn-screen grid grid-rows-[auto,1fr,auto] bg-white"
       :class="[
         isDesktopLayout ? 'desktop' : 'mobile',
         breakpoint,

frontend/src/styles/tailwind.css

@@ -140,7 +140,7 @@ Time                - 11px - xs semibold (default leading-tight)
    *
    * There is no bold-transparent variant.
    *
-   * The color of the ring (or outline for `focus-slim-filled`) is set by a plugin defined in `tailwind.config.js`.
+   * The color of the ring (or outline for `focus-slim-filled`) is set by a plugin defined in `tailwind.config.ts`.
    */
 
   [class*="focus-slim-offset"] {
@@ -195,4 +195,13 @@ Time                - 11px - xs semibold (default leading-tight)
   #content {
     @apply scroll-mt-20;
   }
+
+  .h-dyn-screen {
+    @apply h-screen;
+    @apply h-[100dvh];
+  }
+  .min-h-dyn-screen {
+    @apply min-h-screen;
+    @apply min-h-[100dvh];
+  }
 }

frontend/tailwind.config.js → frontend/tailwind.config.ts

@@ -1,13 +1,16 @@
-const defaultTheme = require("tailwindcss/defaultTheme")
-const plugin = require("tailwindcss/plugin")
+import defaultTheme from "tailwindcss/defaultTheme"
+import plugin from "tailwindcss/plugin"
 
-const { SCREENS } = require("./src/constants/screens")
-const { Z_INDICES } = require("./src/constants/z-indices")
+import { SCREENS } from "./src/constants/screens"
+import { Z_INDICES } from "./src/constants/z-indices"
 
-module.exports = {
+import type { Config } from "tailwindcss"
+import type { PluginAPI } from "tailwindcss/types/config"
+
+export default {
   content: [
     "./src/**/*.{vue,js,jsx,ts,tsx,mdx}",
-    "./nuxt.config.js",
+    "./nuxt.config.ts",
     "./tailwind.safelist.txt",
   ],
   theme: {
@@ -116,7 +119,7 @@ module.exports = {
     ringWidth: {
       DEFAULT: "1.5px", // aka slim
       bold: "3.0px",
-      0: 0,
+      0: "0",
     },
     borderWidth: {
       0: "0px",
@@ -187,22 +190,16 @@ module.exports = {
       ],
     },
     flexGrow: {
-      0: 0,
-      DEFAULT: 1,
-      2: 2,
+      0: "0",
+      DEFAULT: "1",
+      2: "2",
     },
     fontFamily: {
       mono: ['"JetBrains Mono"', "monospace"],
       sans: ["Inter", ...defaultTheme.fontFamily.sans],
       serif: [...defaultTheme.fontFamily.serif],
     },
     extend: {
-      height: {
-        "dyn-screen": ["100vh", "100dvh"],
-      },
-      minHeight: {
-        "dyn-screen": ["100vh", "100dvh"],
-      },
       blur: {
         image: "60px",
         text: "4px",
@@ -233,7 +230,7 @@ module.exports = {
       outlineWidth: {
         1.5: "1.5px",
       },
-      typography: (theme) => ({
+      typography: (theme: PluginAPI["theme"]) => ({
         DEFAULT: {
           css: {
             "--tw-prose-body": theme("colors.dark-charcoal.default"),
@@ -275,4 +272,4 @@ module.exports = {
       )
     }),
   ],
-}
+} satisfies Config

package.json

@@ -40,7 +40,7 @@
     "eslint-plugin-vue": "9.9.0",
     "eslint-plugin-vuejs-accessibility": "1.1.1",
     "prettier": "2.8.3",
-    "prettier-plugin-tailwindcss": "0.2.2",
+    "prettier-plugin-tailwindcss": "0.4.1",
     "typescript": "4.9.5",
     "vue-tsc": "1.2.0"
   },