Tailwind refactor (#183)

* Working on tailwind refactor

* Move providers to their own file

* Update appConfig loader

* Update appConfig

* Delete tmp after pre-build is complete

* Migrate footer to tailwind

* Fix types

* Change to use lucide icons

* Remove mantine from document

* Move styles to top of import list

* Add HOC for app config

* Working on refactor

* Add new error pages

* Working on search bar redesign

* Working on search bar component

* Working on search bar

* Add jotai

* Working on search component

* Fix up categories

* Working on map adapter

* Trying to finish Search components

* Working on search layout

* Update

* Remove geocoding API endpoint

* Large update

* Update

* Update

* Add comma

* Update

* Working on map

* Finish up search feature

* Rebuild search functionality

* Working on resource page

* Update

* Finish up resource feature

* Working on search and resource pages

* Fixing tailwind

* Fix issues

* Fix fonts not rendering

* Working on favorites

* Update

* Fix map rendering issues

* Update

* Fix issue with printing where font styles were lost

* Delete plugins folder

* Big change

* Update

* Updates

* Remove unneeded folders

* Move short url logic to service

* Make category headers not so bold

* Fix issue with tailwind config/plugin

* Add new taxonomy container for getting currently searched taxonomy terms

* Fix layout shift issue

* Add clear filters button

* Fix several taxonomy issues

* Bunch of fixes

* fix: appconfig typing issues

* chore: Remove remnants of mantine and tabler icons

* fix: Change mapbox access token env variable

* Remove production tag

* fix: fallback radius options

* chore: add bottom border to header

* feat: Add feature flag support

* fix: taxonomy suggestions no longer get lost on search resubmit

* 1st value is always highlighted

* fix: remove last change. Didn't fix anything

* fix: add back map zoom and center configurations

* Add user location map marker

* Add user location pin to map

* Fix issue with map re-rendering when it shouldn't

* feat: Add showSearchAndResourceServiceLabel flag

* fix: Crashing from user coordinates

* fix: State no longer becomes undefined on route changes

* fix: api calls are only made when there is a valid session

* fix: linting errors

* chore: render as false instead of null

* chore: add session to search page

* feat: add support for "everywhere" location query

* flag: add service name feature flag

* fix: hide share button for PRIVATE lists

* flag: add showTaxonomyBadge support

* feat: Prioritize environment variable flags

* feat: Add input wrapper className for added customization

* fix: Add default error to empty on pages

* feat: Start work on required user location

* fix: favicon now points to the appConfig url

* fix: decodeUriComponent for coords page param

* fix: whitespace breaks are handled properly now

* fix: Use short description when available

* fix: whitespace breaks and distance no longer is 0 at random times

* fix(map): Zoomed in too far on

* fix(map): Map stutters less now on resize

* feat(directions): Clicking on the copy badge for address will now take the user to the google maps directions page

* Fix issue with dynamic titles not coming through

* fix(theme): Added border radius to theme back in

* fix(appConfig): Removed category and suggestion key/value pairs from the OLD config

* chore(appConfig): cleanup appConfig and use new values

* chore(appConfig): Remove commented out code

* feat: Preparing API calls for new API

* chore: Use new /term endpoint instead of /taxonomy-term

* fix: Don't make an API call when terms is an empty array

* fix: Change short_service_description to service_short_description

* fix: Add locale to header and query params for resources

* fix: Add support for new API

* fix: Add background color to tour button

* Fix build script

* chore: Add deps for translation

* feat: Add script for translating from english

* chore: Update all locales for client

* fix: Add category images for locales other than english

* chore: Use location_coordinates field instead of location field from ES to prepare for new updates

.gitignore

@@ -49,5 +49,7 @@ next-env.d.ts
 .env
 
 public/locales/**/dynamic.json
+public/locales/**/categories.json
+public/locales/**/suggestions.json
 
 .nx/

.prettierrc

@@ -1,3 +1,7 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "semi": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

.vscode/settings.json

@@ -1,4 +1,7 @@
 {
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-}
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "files.associations": {
+    "*.css": "tailwindcss"
+  }
+}

app.defaults.json

@@ -20,6 +20,9 @@
     "radiusOptions": [],
     "defaultRadius": "0"
   },
+  "adapters": {
+    "map": "mapbox"
+  },
   "features": {
     "map": {
       "plugin": "mapbox"

bin/createAppFromStrapi.js

@@ -2,6 +2,7 @@ const qs = require('qs');
 const path = require('path');
 const fs = require('fs-extra');
 const syncClient = require('sync-rest-client');
+const _ = require('lodash');
 
 const STRAPI_URL = process.env.STRAPI_URL;
 const STRAPI_TOKEN = process.env.STRAPI_TOKEN;
@@ -22,11 +23,15 @@ const query = qs.stringify({
         'pages',
         'search',
         'plugins',
+        'featureFlags',
         'lastAssuredText',
         'categoriesText',
         'hideAttribution',
         'headerMenu',
         'footerMenu',
+        'map',
+        'homePage',
+        'resourcePage',
         'dataProviders',
         'dataProviders.logo',
         'radiusSelectValues',
@@ -42,6 +47,8 @@ const query = qs.stringify({
         'localizations.search',
         'localizations.lastAssuredText',
         'localizations.categoriesText',
+        'localizations.homePage',
+        'localizations.resourcePage',
       ],
     },
     category: {
@@ -67,7 +74,7 @@ const query = qs.stringify({
  * @param {string} dir Next.js root directory
  * @returns {*} void
  */
-module.exports = async function createFromStrapi(dir) {
+module.exports = function createFromStrapi(dir) {
   if (!STRAPI_URL || !STRAPI_TOKEN || !TENANT_ID) return;
 
   try {
@@ -89,8 +96,7 @@ module.exports = async function createFromStrapi(dir) {
     const suggestionTranslations =
       tenant.suggestion.data.attributes.localizations.data;
     const appConfig = tenant.app_config.data.attributes;
-    const appConfigTranslations =
-      tenant.app_config.data.attributes.localizations.data;
+    const appConfigTranslations = appConfig.localizations.data;
     const logoUrl = appConfig.logo.data.attributes.url;
     const faviconUrl = appConfig.favicon.data.attributes.url;
     const heroUrl = appConfig.hero.data.attributes.url;
@@ -114,18 +120,26 @@ module.exports = async function createFromStrapi(dir) {
         feedbackUrl: appConfig.feedbackUrl,
       },
       search: {
+        defaultRadius: appConfig?.defaultRadiusValue ?? 0,
         defaultRadius: appConfig?.defaultRadiusValue ?? 0,
         radiusOptions: appConfig?.radiusSelectValues ?? null,
+        resultsLimit: appConfig?.search?.resultsLimit ?? 25,
       },
       features: {
         map: {
           plugin: 'mapbox',
         },
       },
+      adapters: {
+        map: 'mapbox',
+      },
+      map: appConfig?.map ?? {
+        center: [0, 0],
+        zoom: 7,
+      },
       alert: appConfig?.alert,
       theme: appConfig?.theme ?? null,
       hideAttribution: appConfig?.hideAttribution ?? true,
-      plugins: [],
       pages: {},
       menus: {
         header: [],
@@ -147,32 +161,21 @@ module.exports = async function createFromStrapi(dir) {
       appConfig.search.locationInputPlaceholder;
     translationFile['en']['search.no_results_fallback_text'] =
       appConfig?.search?.noResultsFallbackText;
-    translationFile['en']['last_assured_text'] = appConfig?.lastAssuredText;
-    translationFile['en']['categories_text'] = appConfig?.categoriesText;
-
-    for (const page of appConfig?.pages ?? []) {
-      if (page.page === 'home') {
-        translationFile['en'][`meta_title`] = page.title;
-        translationFile['en'][`meta_description`] = page.description;
-
-        newAppConfig.pages[page.page] = {
-          heroSection: {
-            backgroundImageUrl: heroUrl,
-          },
-          meta: {
-            title: page.title,
-            description: page.description,
-          },
-          showLocationInput: page.showLocationInput ?? false,
-          disableTour: page.disableTour ?? false,
-        };
-      } else if (page.page === 'resource') {
-        newAppConfig.pages[page.page] = {
-          hideCategories: page.hideCategories ?? false,
-          hideLastAssured: page.hideLastAssured ?? false,
-        };
-      }
-    }
+    translationFile['en']['last_assured_text'] =
+      appConfig?.resourcePage?.lastAssuredText;
+    translationFile['en']['categories_text'] =
+      appConfig?.resourcePage?.categoriesText;
+
+    translationFile['en']['meta_title'] = appConfig?.homePage?.title;
+    translationFile['en']['meta_description'] =
+      appConfig?.homePage?.description;
+
+    // Add hero section URL
+    newAppConfig.pages['home'] = {
+      heroSection: {
+        backgroundImageUrl: heroUrl,
+      },
+    };
 
     for (const menu of appConfig?.headerMenu ?? []) {
       newAppConfig.menus.header.push({
@@ -210,103 +213,149 @@ module.exports = async function createFromStrapi(dir) {
         data?.search?.locationInputPlaceholder;
       translationFile[data.locale]['search.no_results_fallback_text'] =
         data?.search?.noResultsFallbackText;
-      translationFile[data.locale]['last_assured_text'] = data?.lastAssuredText;
-      translationFile[data.locale]['categories_text'] = data?.categoriesText;
+      translationFile[data.locale]['last_assured_text'] =
+        data?.resourcePage?.lastAssuredText;
+      translationFile[data.locale]['categories_text'] =
+        data?.resourcePage?.categoriesText;
+
+      translationFile[data.locale]['meta_title'] = data?.homePage?.title;
+      translationFile[data.locale]['meta_description'] =
+        data?.homePage?.description;
     }
 
-    for (let catI = 0; catI < categories.length; catI++) {
-      const category = categories[catI];
-      const subcategories = category.subcategories;
-      translationFile['en'][`categories.${catI}`] = category.name;
-
-      newAppConfig.categories.push({
-        id: category.id,
-        name: category.name,
-        href: category.href,
-        image: category?.image?.data?.attributes?.url,
-        subcategories: category.subcategories.map((subcategory, key) => {
+    const categoryFiles = {};
+    for (const _category of categoryTranslations || []) {
+      const category = _category.attributes;
+      if (!(category.locale in categoryFiles)) {
+        categoryFiles[category.locale] = [];
+      }
+
+      categoryFiles[category.locale] = categoryFiles[category.locale].concat(
+        category.list.map((cat, idx) => {
+          const matchingCategory = categories[idx];
+
           return {
-            id: subcategory.id,
-            name: subcategory.name,
-            href: subcategory.href,
-            query: subcategory.query,
-            query_type: subcategory.queryType,
+            name: cat['name'],
+            href: cat['href'],
+            image:
+              matchingCategory?.['image']?.['data']?.['attributes']?.['url'],
+            subcategories: cat['subcategories'].map((sub) => ({
+              name: sub['name'],
+              href: sub['href'],
+              query: sub['query'],
+              queryType: sub['queryType'],
+            })),
           };
         }),
-      });
-
-      for (let subCatI = 0; subCatI < subcategories.length; subCatI++) {
-        const subcategory = subcategories[subCatI];
-        translationFile['en'][`categories.${catI}.subcategories.${subCatI}`] =
-          subcategory.name;
-
-        for (const locale of categoryTranslations || []) {
-          const data = locale.attributes;
-
-          if (!translationFile[data.locale]) {
-            translationFile[data.locale] = {};
-          }
-
-          const categories = data.list;
-          const subcategories = categories?.[catI]?.subcategories;
-
-          if (categories?.[catI]) {
-            translationFile[data.locale][`categories.${catI}`] =
-              categories[catI].name;
-          }
+      );
+    }
 
-          if (subcategories?.[subCatI]) {
-            translationFile[data.locale][
-              `categories.${catI}.subcategories.${subCatI}`
-            ] = subcategories[subCatI].name;
-          }
-        }
+    for (const _category of categories) {
+      const category = _category;
+      if (!('en' in categoryFiles)) {
+        categoryFiles['en'] = [];
       }
+      categoryFiles['en'] = categoryFiles['en'].concat([
+        {
+          name: category['name'],
+          href: category['href'],
+          image: category['image']?.['data']?.['attributes']?.['url'],
+          subcategories: category['subcategories'].map((sub) => ({
+            name: sub['name'],
+            href: sub['href'],
+            query: sub['query'],
+            queryType: sub['queryType'],
+          })),
+        },
+      ]);
     }
 
-    for (let i = 0; i < suggestions.length; i++) {
-      const suggestion = suggestions[i];
-      translationFile['en'][`suggestions.${i}`] = suggestion.displayName;
+    for (const key in categoryFiles) {
+      const categoryToWrite = categoryFiles[key];
+      fs.mkdirpSync(path.join(dir, `public/locales/${key}`));
+      fs.writeFileSync(
+        path.resolve(`public/locales/${key}/categories.json`),
+        JSON.stringify(categoryToWrite, null, 2),
+      );
+    }
 
-      newAppConfig.suggestions.push({
-        id: i,
-        value: suggestion.displayName,
-        term: suggestion.taxonomies,
-      });
+    const suggestionFiles = {};
+    for (const _suggestion of suggestionTranslations || []) {
+      const suggestion = _suggestion.attributes;
+      if (!(suggestion.locale in suggestionFiles)) {
+        suggestionFiles[suggestion.locale] = [];
+      }
 
-      for (const locale of suggestionTranslations || []) {
-        const data = locale.attributes;
+      suggestionFiles[suggestion.locale] = suggestionFiles[
+        suggestion.locale
+      ].concat(
+        suggestion.list.map((sugg) => ({
+          name: sugg['displayName'],
+          taxonomies: sugg['taxonomies'],
+        })),
+      );
+    }
 
-        if (!translationFile[data.locale]) {
-          translationFile[data.locale] = {};
-        }
+    for (const _suggestion of suggestions || []) {
+      const suggestion = _suggestion;
+      if (!('en' in suggestionFiles)) {
+        suggestionFiles['en'] = [];
+      }
 
-        const suggestions = data.list;
+      suggestionFiles['en'] = suggestionFiles['en'].concat([
+        {
+          name: suggestion['displayName'],
+          taxonomies: suggestion['taxonomies'],
+        },
+      ]);
+    }
 
-        if (suggestions?.[i]) {
-          translationFile[data.locale][`suggestions.${i}`] =
-            suggestions[i].displayName;
-        }
-      }
+    for (const key in suggestionFiles) {
+      const suggestionToWrite = suggestionFiles[key];
+      fs.mkdirpSync(path.join(dir, `public/locales/${key}`));
+      fs.writeFileSync(
+        path.resolve(`public/locales/${key}/suggestions.json`),
+        JSON.stringify(suggestionToWrite, null, 2),
+      );
     }
 
-    for (const plugin of appConfig?.plugins ?? []) {
-      newAppConfig.plugins.push([
-        plugin.__component.replace('plugin.', ''),
-        plugin?.config ?? {},
-      ]);
+    function deepCleanConfig(config) {
+      if (Array.isArray(config)) {
+        return config.map((item) => deepCleanConfig(item));
+      } else if (_.isPlainObject(config)) {
+        return _.chain(config)
+          .omitBy(_.isNil)
+          .omit('id')
+          .mapValues((value) => deepCleanConfig(value))
+          .value();
+      } else {
+        return config;
+      }
     }
 
+    const cleanedAppConfig = deepCleanConfig(newAppConfig);
+
+    const featureFlags = _.omit(
+      _.omitBy(appConfig.featureFlags, _.isNil),
+      'id',
+    );
+
+    fs.writeFileSync(
+      path.resolve('./.norse/flags.json'),
+      JSON.stringify(featureFlags, null, 2),
+    );
+
     fs.writeFileSync(
       path.join(dir, 'tmp/app.json'),
-      JSON.stringify(newAppConfig, null, 2),
+      JSON.stringify(cleanedAppConfig, null, 2),
     );
 
     for (const key in translationFile) {
       fs.mkdirpSync(path.join(dir, `public/locales/${key}`));
       fs.writeFileSync(
         path.join(dir, `public/locales/${key}/dynamic.json`),
         JSON.stringify(translationFile[key], null, 2),
+        JSON.stringify(translationFile[key], null, 2),
       );
     }
   } catch (err) {