Improve Component Integration With Content

This commit ensures that Storybook, Jest and a preact project render the
components/contents correctly.

Previously a variety of mistakes were made that now are rectified:
* Jest does not honour .babelrc, so we gave up on JSX and pragma
niceties
* Previous tests were not actually rendering the component from the
bundle
* package.json specified an incorrect bundle entry
* dist/ folder was made part of version control
* Hidayah implementation was leveraging react-markdown to render the
contents. While this works for storybook, bundling this code implied
that react-markdown tries to mutate the content that Rollup marks as
immutable: rollup/rollup#1771

In addition to the above:
* Abstract out the implementation of markdown_plugin so Rollup and Vite
can reuse.

.gitignore

@@ -1,3 +1,5 @@
 node_modules/
 npm-debug.log
 storybook-static/
+.DS_Store
+dist/

.storybook/main.js

@@ -1,7 +1,8 @@
 /** @type { import('@storybook/preact-vite').StorybookConfig } */
-import fs from 'fs/promises';
+import fsPromise from 'fs/promises';
 import { StorybookConfig } from '@storybook/preact-vite';
 import path from 'path'
+import markdown from '../plugins/markdown_plugin'
 
 const config = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -35,22 +36,23 @@ const config = {
             setup(build) {
               build.onLoad({ filter: /src\/.*\.js$/ }, async (args) => ({
                 loader: 'jsx',
-                contents: await fs.readFile(args.path, 'utf8'),
+                contents: await fsPromise.readFile(args.path, 'utf8'),
               }));
             },
           },
         ],
       };
     };
 
+  config.plugins.push(markdown());
   return {
     ...config,
     resolve: {
 
       alias: [
-        { find: '@hanafi', replacement: path.resolve(__dirname, 'contents/hanafi/') },
-        { find: '@components', replacement: path.resolve(__dirname, 'src/components/') },
-        { find: '@utils', replacement: path.resolve(__dirname, 'src/utils/') },
+        { find: '@hanafi', replacement: path.resolve(__dirname, '../contents/hanafi/') },
+        { find: '@components', replacement: path.resolve(__dirname, '../src/components/') },
+        { find: '@utils', replacement: path.resolve(__dirname, '../src/utils/') },
         { find: '@al-mabsut/muslimah', replacement: path.resolve(__dirname, '../node_modules/@al-mabsut/muslimah/dist/esm/bundle.js') }
       ]
     },

jest.config.common.js

@@ -98,7 +98,7 @@ const commonConfig = {
   // notifyMode: "failure-change",
 
   // A preset that is used as a base for Jest's configuration
-  preset: 'jest-preset-preact'
+  preset: 'jest-preset-preact',
 
   // Run tests from one or more projects
   // projects: null,
@@ -178,21 +178,21 @@ const commonConfig = {
 
   // A map from regular expressions to paths to transformers
   // transform: null,
-  // transform: {
-  //   '^.+\\.js?$': 'babel-jest',
-  //   '\\.(jpg|jpeg|png|svg|webp|)$': './fileMock.js',
-  // },
+  transform: {
+    // '^.+\\.js?$': 'babel-jest'
+    // '\\.(jpg|jpeg|png|svg|webp|)$': './fileMock.js'
+  },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip
   // transformation
   // transformIgnorePatterns: [
   //   "/node_modules/"
   // ],
 
-  // transformIgnorePatterns: [
-  //   // This is needed to solve: SyntaxError: Unexpected token 'export'
-  //   "node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)"
-  // ],
+  transformIgnorePatterns: [
+    // This is needed to solve: SyntaxError: Unexpected token 'export'
+    'node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)'
+  ]
 
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically
   // return a mock for them