test: DatoCMS lib helpers (#194)

# Changes

<!-- example:
- Fixes wrong color in button
- Adds a new page
-->

- adds unit tests for datocms + search lib functions 
- changes the lib folder structure and namings + refactors all imports
of the lib functions

# Associated issue

<!-- example:
Resolves #(ticket number)
-->

- n/a

# How to test

<!-- example:
1. Open preview link
2. Navigate to ...
3. Tap on ...
4. Verify that ...
5. Etc ...
-->

- run `npm run test:unit` -- also happens automatically in the github
actions

# Checklist

- [x] I have performed a self-review of my own code
- [x] I have made sure that my PR is easy to review (not too big,
includes comments)
- [x] I have made updated relevant documentation files (in project
README, docs/, etc)
- [x] I have added a decision log entry if the change affects the
architecture or changes a significant technology
- [x] I have notified a reviewer

<!-- Please strike through and check off all items that do not apply
(rather than removing them) -->

.eslintignore

@@ -1,4 +1,5 @@
 dist
 node_modules
 
-src/lib/types/datocms.d.ts
+src/lib/datocms/types.ts
+!**/.graphqlrc.ts

.gitignore

@@ -17,8 +17,8 @@ node_modules/
 # generated files
 src/assets/icon-sprite.svg
 src/assets/icon-sprite.d.ts
-src/lib/types/datocms.d.ts
-src/lib/i18n.messages.json
-src/lib/i18n.types.ts
+src/lib/datocms/types.ts
+src/lib/i18n/messages.json
+src/lib/i18n/types.ts
 src/lib/site.json
 src/lib/routing/redirects.json

.graphqlrc.ts

@@ -1,9 +1,9 @@
-import 'dotenv/config'
-import { datocmsEnvironment} from './datocms-environment';
+import 'dotenv/config';
+import { datocmsEnvironment } from './datocms-environment';
 
-const outputFilename = 'src/lib/types/datocms.d.ts';
+const outputFilename = 'src/lib/datocms/types.ts';
 
-console.log(`Saving generated types for DatoCMS (environment: '${datocmsEnvironment}') to '${outputFilename}'.`)
+console.log(`Saving generated types for DatoCMS (environment: '${datocmsEnvironment}') to '${outputFilename}'.`);
 
 /**
  * @link https://graphql-config.com/introduction
@@ -13,8 +13,8 @@ module.exports = {
     'https://graphql.datocms.com': {
       headers: {
         Authorization: process.env.DATOCMS_READONLY_API_TOKEN,
-        "X-Environment": datocmsEnvironment,
-        "X-Exclude-Invalid": "true",
+        'X-Environment': datocmsEnvironment,
+        'X-Exclude-Invalid': 'true',
       },
     },
   },
@@ -27,7 +27,7 @@ module.exports = {
           plugins: [
             'typescript',
             'typescript-operations',
-            'typed-document-node',
+            '@graphql-codegen/typescript-document-nodes',
           ],
           /**
           * scalar config borrowed from DatoCMS team:
@@ -44,7 +44,7 @@ module.exports = {
               FloatType: 'number',
               IntType: 'number',
               ItemId: 'string',
-              JsonField: 'unkown',
+              JsonField: 'unknown',
               MetaTagAttributes: 'Record<string, string>',
               UploadId: 'string',
             },
@@ -67,5 +67,5 @@ module.exports = {
       },
     },
   },
-}
+};
 

astro.config.ts

@@ -59,5 +59,8 @@ export default defineConfig({
     plugins: [
       graphql() as PluginOption,
     ],
+    optimizeDeps: {
+      exclude: ['msw'],
+    }
   },
 });

config/plop/templates/block/Block.astro.hbs

@@ -1,5 +1,5 @@
 ---
-import type { {{ pascalCase name }}Fragment } from '@lib/types/datocms';
+import type { {{ pascalCase name }}Fragment } from '@lib/datocms/types';
 
 export interface Props {
     block: {{ pascalCase name }}Fragment

config/plop/templates/page/route.astro.hbs

@@ -1,7 +1,7 @@
 ---
 {{#if name }}
 import { datocmsRequest } from '@lib/datocms';
-import type { {{ name }}Query } from '@lib/types/datocms';
+import type { {{ name }}Query } from '@lib/datocms/types';
 import query from './_index.query.graphql';
 {{/if}}
 import Layout from '@layouts/Default.astro';
@@ -10,7 +10,7 @@ export async function getStaticPaths() {
 // todo
 }
 
-type Params = { 
+type Params = {
   {{#if (hasRouteLocale route) }}
   locale: SiteLocale;
   {{/if}}

docs/blocks-and-components.md

@@ -33,7 +33,7 @@ Head Start uses the same convention for props and types for every Block: the `Pr
 
 ```astro
 ---
-import type { SomeContentBlockFragment } from '@lib/types/datocms';
+import type { SomeContentBlockFragment } from '@lib/datocms/types';
 
 interface Props {
   block: SomeContentBlockFragment
@@ -95,12 +95,12 @@ Register a new Block's type:
 ```ts
 // src/Blocks/Blocks.d.ts:
 
-import { 
+import {
   ImageBlockFragment,
-  // import new Block's Fragment: 
+  // import new Block's Fragment:
   SomeContentBlockFragment,
   TextBlockFragment,
-} from '@lib/types/datocms';
+} from '@lib/datocms/types';
 
 export type AnyBlock =
   | ImageBlockFragment

docs/cms-data-loading.md

@@ -79,7 +79,7 @@ console.log(typeof query) // DocumentNode
 Head Start automatically generates TypeScript types for all your GraphQL files, which you can import:
 
 ```ts
-import type { ImageBlockFragment, PageQuery, PageRecord } from '@lib/types/datocms';
+import type { ImageBlockFragment, PageQuery, PageRecord } from '@lib/datocms/types';
 ```
 
 ## DatoCMS requests
@@ -91,12 +91,12 @@ Example usage:
 ```astro
 ---
 import { datocmsRequest } from '@lib/datocms';
-import type { PageQuery, PageRecord } from '@lib/types/datocms';
+import type { PageQuery, PageRecord } from '@lib/datocms/types';
 import query from './_index.query.graphql';
 
-const { page } = await datocmsRequest<PageQuery>({ 
+const { page } = await datocmsRequest<PageQuery>({
   query,
-  variables: { locale, slug: Astro.params.slug } 
+  variables: { locale, slug: Astro.params.slug }
 }) as { page: PageRecord };
 ---
 ```
@@ -128,7 +128,7 @@ Simplified example without types:
 ```ts
 import { datocmsCollection } from '@lib/datocms';
 
-const pages = await datocmsCollection({ 
+const pages = await datocmsCollection({
   collection: 'Pages',
   fragment: `slugs: _allSlugLocales { locale, value }`,
 });
@@ -144,7 +144,7 @@ export async function getStaticPaths() {
   interface PagesCollectionItem {
     slugs: Array<{ locale: string; value: string; }>;
   }
-  const pages = await datocmsCollection<PagesCollectionItem>({ 
+  const pages = await datocmsCollection<PagesCollectionItem>({
     collection: 'Pages',
     fragment: `slugs: _allSlugLocales { locale, value }`,
   });

docs/i18n.md

@@ -4,7 +4,7 @@
 
 ## Configuration
 
-Supported locales and the default locale are defined in [`src/lib/i18n.ts`](../src/lib/i18n.ts). You can access these anywhere using:
+Supported locales and the default locale are defined in [`src/lib/i18n.ts`](../src/lib/i18n/index.ts). You can access these anywhere using:
 
 ```ts
 import { defaultLocale, locales } from '@lib/i18n';
@@ -38,7 +38,7 @@ A website visitor can switch between the available locales using the [`LocaleSel
 import Layout from '@layouts/Default.astro';
 
 ---
-<Layout 
+<Layout
   pageUrls={[
     { locale: 'en', pathname: '/en/some/path/' },
     { locale: '..', pathname: '...' },
@@ -51,14 +51,14 @@ import Layout from '@layouts/Default.astro';
 
 Head Start uses [Rosetta](https://github.com/lukeed/rosetta) for translations. Rosetta is an internationalization (i18n) library, selected for its small footprint (<300 bytes) and for being framework agnostic. It can used in Astro templates, client-side scripts and in UI frameworks like React, Svelte and Vue.
 
-Translations can be managed in the CMS and are automatically loaded pre build and pre dev. You can use them anywhere using their `key` value with [Rosetta's `t()` function](https://github.com/lukeed/rosetta#rosettatkey-params-lang), made available from [`src/lib/i18n.ts`](../src/lib/i18n.ts):
+Translations can be managed in the CMS and are automatically loaded pre build and pre dev. You can use them anywhere using their `key` value with [Rosetta's `t()` function](https://github.com/lukeed/rosetta#rosettatkey-params-lang), made available from [`src/lib/i18n.ts`](../src/lib/i18n/index.ts):
 
 ```ts
 import { setLocale, t } from '@lib/i18n';
 
 setLocale('nl');
 
-t('play_video'); 
+t('play_video');
 // returns 'video afspelen' (translation from CMS)
 ```