chore: add env variables for apps (#3293)

* chore: improve deployed env variables for apps

* change env vaules to preview and production

Author: mimarz

apps/storefront/app/layout.tsx

@@ -8,15 +8,12 @@ import { Figma, Github, Header, Slack } from '@repo/components';
 import { Footer } from '@repo/components';
 import type { Metadata } from 'next';
 import Script from 'next/script';
+import { isProduction } from '../utils/is-production';
 
-const isProduction = true;
+const subdomain = isProduction() ? '' : 'next.';
 
 export const metadata: Metadata = {
-  metadataBase: new URL(
-    isProduction
-      ? 'https://designsystemet.no'
-      : 'https://next.designsystemet.no',
-  ),
+  metadataBase: new URL(`https://${subdomain}designsystemet.no`),
   title: {
     template: '%s - Designsystemet',
     default: 'Designsystemet',
@@ -49,9 +46,7 @@ const menu = [
   },
   {
     name: 'Temabygger',
-    href: isProduction
-      ? 'https://theme.designsystemet.no'
-      : 'https://next.theme.designsystemet.no',
+    href: `https://${subdomain}theme.designsystemet.no`,
   },
 ];
 

apps/storefront/utils/is-production.ts

@@ -1,3 +1,3 @@
 export function isProduction() {
-  return true;
+  return process.env.DESIGNSYSTEMET_ENV === 'production';
 }

apps/theme/components/TokenModal/TokenModal.tsx

@@ -40,12 +40,12 @@ export const TokenModal = () => {
     return str;
   };
 
-  const packageCommand = `@digdir/designsystemet${isProduction() ? '' : '@next'}`;
+  const packageWithTag = `@digdir/designsystemet${isProduction() ? '' : '@next'}`;
 
-  const buildSnippet = `npx ${packageCommand} tokens build`;
+  const buildSnippet = `npx ${packageWithTag} tokens build`;
 
   const cliSnippet = [
-    `npx ${packageCommand} tokens create`,
+    `npx ${packageWithTag} tokens create`,
     `--${colorCliOptions.main} ${setCliColors(colors.main).trimEnd()}`,
     `--${colorCliOptions.neutral} "${getBaseDefault(colors.neutral[0]?.colors.light)?.hex}"`,
     `${colors.support.length > 0 ? `--${colorCliOptions.support} ${setCliColors(colors.support).trimEnd()}` : ''}`,

apps/theme/utils/is-production.ts

@@ -1,3 +1,3 @@
 export function isProduction() {
-  return true;
+  return process.env.DESIGNSYSTEMET_ENV === 'production';
 }