graphql

.env.example

@@ -2,7 +2,7 @@
 NEXT_PUBLIC_DRUPAL_BASE_URL=https://dev.next-drupal.org
 
 # Required for On-demand Revalidation.
-DRUPAL_REVALIDATE_SECRET=DRUPAL_REVALIDATE_SECRET
+#DRUPAL_REVALIDATE_SECRET=DRUPAL_REVALIDATE_SECRET
 
 # Draft mode credentials.
 #DRUPAL_PREVIEW_SECRET=DRUPAL_PREVIEW_SECRET
@@ -11,4 +11,4 @@ DRUPAL_REVALIDATE_SECRET=DRUPAL_REVALIDATE_SECRET
 
 # Change this to 'true' to fetch all pages and build each one.
 # Recommended to enable this for production environment.
-BUILD_COMPLETE=false
+#BUILD_COMPLETE=false

.eslintrc.json

@@ -1,7 +1,14 @@
 {
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+    "project": "./tsconfig.json"
+  },
   "extends": [
     "next/core-web-vitals",
-    "plugin:storybook/recommended"
+    "plugin:storybook/recommended",
+    "plugin:deprecation/recommended"
   ],
   "rules": {
     "@typescript-eslint/no-unused-vars": "off",

.gitpod.yml

@@ -3,15 +3,6 @@ additionalRepositories:
   - url: https://github.com/SU-SWS/acsf-cardinalsites-public
     checkoutLocation: back
 checkoutLocation: front
-github:
-  prebuilds:
-    master: true
-    branches: true
-    pullRequests: true
-    pullRequestsFromForks: false
-    addCheck: false
-    addComment: false
-    addBadge: true
 ports:
   - name: database
     description: Mysql database
@@ -39,6 +30,9 @@ tasks:
     init: >
       eval $(gp env -e APACHE_DOCROOT_IN_REPO=../back/docroot) &&
       cd /workspace/back &&
+      rm -rf config/default &&
+      mkdir -p config/default &&
+      touch config/default/core.extension.yml &&
       git checkout composer.* &&
       composer install --no-interaction &&
       mkdir -p blt &&
@@ -52,6 +46,7 @@ tasks:
       blt settings &&
       blt drupal:install -n &&
       cd /workspace/front &&
+      cp .env.example .env.local &&
       yarn install
     command: |
       cd /workspace/back &&
@@ -72,6 +67,7 @@ tasks:
       echo 'Connecting Drupal to Frontend' &&
       cd /workspace/front &&
       yarn install &&
+      sed -i -r "s|NEXT_PUBLIC_DRUPAL_BASE_URL.*|NEXT_PUBLIC_DRUPAL_BASE_URL=$NEXT_PUBLIC_DRUPAL_BASE_URL|g" .env.local &&
       yarn dev &
       gp ports await 3000 &&
       gp url 3000 | xargs gp preview --external
@@ -91,7 +87,7 @@ tasks:
       [[ ! -z $GITCONFIG  ]] &&
       echo $GITCONFIG | base64 -d > ~/.gitconfig &&
       chmod 644 ~/.gitconfig
-#      git remote set-url origin [email protected]:SU-SWS/sulgryphon-nextjs.git
+      git remote set-url origin $(echo $GITPOD_WORKSPACE_CONTEXT | jq -r .repository.cloneUrl | sed -E 's|^.*.com/(.*)$|[email protected]:\1|')
 
 vscode:
   extensions:

.storybook/main.ts

@@ -1,9 +1,20 @@
-// @ts-nocheck
+import { TsconfigPathsPlugin } from "tsconfig-paths-webpack-plugin";
+import path from "path";
 import type {StorybookConfig} from "@storybook/nextjs";
 
-const path = require("path");
-
 const config: StorybookConfig = {
+  framework: {
+    name: "@storybook/nextjs",
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+  typescript: {
+    reactDocgen: 'react-docgen',
+    check: false,
+  },
   stories: [
     "./stories/**/*.mdx",
     "./stories/**/*.stories.@(js|jsx|ts|tsx)"
@@ -22,17 +33,12 @@ const config: StorybookConfig = {
       },
     },
   ],
-  framework: {
-    name: "@storybook/nextjs",
-    options: {},
-  },
   docs: {
     autodocs: "tag",
   },
   webpackFinal: async (config) => {
-    config.resolve.alias['@components'] = path.resolve(__dirname, '../src/components')
-    config.resolve.alias['@lib'] = path.resolve(__dirname, '../src/lib')
+    if (config.resolve) config.resolve.plugins = [new TsconfigPathsPlugin()];
     return config
-  }
+  },
 };
 export default config;

.storybook/stories/config-pages/GlobalMessage.stories.tsx

@@ -1,99 +1,45 @@
 import type {Meta, StoryObj} from '@storybook/react';
-
-import GlobalMessage from "@components/config-pages/global-message/global-message";
+import GlobalMessage from "@components/config-pages/global-message";
+import {ComponentProps} from "react";
+import {Link, Text} from "@lib/gql/__generated__/drupal";
+
+type ComponentStoryProps = ComponentProps<typeof GlobalMessage> & {
+  messageText?: Text["processed"]
+  linkUrl?: Link["url"]
+  linkTitle?: Link["title"]
+}
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-const meta: Meta<typeof GlobalMessage> = {
+const meta: Meta<ComponentStoryProps> = {
   title: 'Design/Config Pages/Global Message',
   component: GlobalMessage,
   tags: ['autodocs'],
   argTypes: {
-    type: {
-      description: 'The type of global message',
+    suGlobalMsgType: {
       options: ['info', 'success', 'warning', 'error', 'plain'],
       control: {type: 'select'}
     },
-    message: {
-      description: "General message html text",
-    },
-    label: {
-      description: "Text placed to the right of the icon"
-    },
-    header: {
-      description: "H2 element at the top."
-    },
-    linkText: {
-      description: "Link text for the bottom link"
-    },
-    linkUrl: {
-      description: "Absolute or relative url"
-    },
-    enabled: {
-      description: "Toggle the display on or off"
-    },
-    link: {
-      table: {
-        disable: true,
-      },
-    }
+    suGlobalMsgEnabled: {control: "boolean"}
   }
 };
 
 export default meta;
-type Story = StoryObj<typeof GlobalMessage>;
+type Story = StoryObj<ComponentStoryProps>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const SuccessMessage: Story = {
-  render: ({linkUrl, linkText, ...args}) => {
-    if(linkUrl && linkText) {
-      args.link = {
-        title: linkText,
-        url: linkUrl,
-        uri: linkUrl,
-      }
-    }
+  render: ({linkUrl, linkTitle, messageText, ...args}) => {
+    if (messageText) args.suGlobalMsgMessage = {processed: messageText}
+    if (linkUrl && linkTitle) args.suGlobalMsgLink = {url: linkUrl, title: linkTitle, internal: false}
     return <GlobalMessage {...args}/>
   },
   args: {
-    type: 'success',
-    message: '<p>Rutrum nec ipsum lacus portaest cursus orci dolor gravida gravida eget nulla ipsum elementum leo enim vivamus quam lorem tempus quis cursus sem nec pellentesque. <a href="#">Link text</a></p><p><a class="su-button" href="#">Button text</a></p><p><a class="su-button--secondary" href="#">Secondary text</a></p>',
-    label: 'Placerat lacus ut eget leo.',
-    header: 'Accumsan eget amet id sollicitudin.',
-    linkText: 'Sem quisque placerat quis suspendisse.',
-    linkUrl: 'http://localhost',
-    enabled: true,
+    suGlobalMsgType: 'success',
+    messageText: '<p>Rutrum nec ipsum lacus portaest cursus orci dolor gravida gravida eget nulla ipsum elementum leo enim vivamus quam lorem tempus quis cursus sem nec pellentesque. <a href="#">Link text</a></p><p><a class="su-button" href="#">Button text</a></p><p><a class="su-button--secondary" href="#">Secondary text</a></p>',
+    suGlobalMsgLabel: 'Placerat lacus ut eget leo.',
+    suGlobalMsgHeader: 'Accumsan eget amet id sollicitudin.',
+    linkTitle: 'Sem quisque placerat quis suspendisse.',
+    linkUrl: '#',
+    suGlobalMsgEnabled: true,
   },
 };
-
-export const InfoMessage: Story = {
-  render: SuccessMessage.render,
-  args: {
-    ...SuccessMessage.args,
-    type: "info",
-  }
-}
-
-export const ErrorMessage: Story = {
-  render: SuccessMessage.render,
-  args: {
-    ...SuccessMessage.args,
-    type: "error",
-  }
-}
-
-export const WarningMessage: Story = {
-  render: SuccessMessage.render,
-  args: {
-    ...SuccessMessage.args,
-    type: "warning",
-  }
-}
-
-
-export const PlainMessage: Story = {
-  render: SuccessMessage.render,
-  args: {
-    ...SuccessMessage.args,
-    type: "plain",
-  }
-}