Configure Renovate

.buildkite/pipeline-base.yml

@@ -32,7 +32,7 @@ env:
   ECR_NAMESPACE: "${IMAGE_REPOSITORY}:${BUILDKITE_PIPELINE_SLUG}"
 
   # Define service directory were the Dockerfile is used
-  DOCKERFILE_LOCATION: "./services/app"
+  DOCKERFILE_LOCATION: "./"
 steps:
   - label: ":hammer: :docker: Building Docker Image"
     key: "build-image"
@@ -45,7 +45,7 @@ steps:
       - *ecr
       - seek-oss/aws-sm#v2.0.0:
           file:
-            - path: services/app/.env
+            - path: .env
               secret-id: [NEED THIS CONFIGURED]
 
   # Wait for images to finish building.

services/app/.ddev/commands/web/nextjs → .ddev/commands/web/nextjs

@@ -35,10 +35,13 @@ case $1 in
   prettier:write)
     npm run prettier:write
   ;;
+  icons)
+    npm run build-icons
+  ;;
   "")
     echo "Usage: nextjs install|build|deploy|watch|(some other command in the theme service)"
   ;;
   *)
     "$@"
   ;;
-esac
+esac

.ddev/config.mutagen.yaml

@@ -0,0 +1 @@
+mutagen_enabled: true

services/app/.ddev/config.yaml → .ddev/config.yaml

@@ -16,7 +16,7 @@ mutagen_enabled: false
 use_dns_when_possible: true
 composer_version: "2"
 web_environment: []
-nodejs_version: "16"
+nodejs_version: "18"
 hooks:
   post-start:
       # Detects to see if the node_modules folder exists
@@ -29,7 +29,7 @@ hooks:
     - exec: pm2 start --name app node_modules/.bin/next -- dev
       service: web
       # pm2 does not live in the node path, so have to call binary directly
-    - exec: pm2 start --name storybook node_modules/.bin/start-storybook --  -p 6006
+    - exec: pm2 start --name storybook node_modules/.bin/storybook -- dev -p 6006
       service: web
 
 # Key features of ddev's config.yaml:
@@ -188,9 +188,9 @@ hooks:
 # https://ngrok.com/docs#http or run "ngrok http -h"
 
 # disable_settings_management: false
-# If true, ddev will not create CMS-specific settings files like
-# Drupal's settings.php/settings.ddev.php or TYPO3's AdditionalConfiguration.php
-# In this case the user must provide all such settings.
+# If true, ddev will not create CMS-specific meta files like
+# Drupal's meta.php/meta.ddev.php or TYPO3's AdditionalConfiguration.php
+# In this case the user must provide all such meta.
 
 # You can inject environment variables into the web container with:
 # web_environment:

.eslintrc.json

@@ -0,0 +1,48 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "prettier"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "next/core-web-vitals",
+    "prettier"
+  ],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "ignoreRestSiblings": true,
+        "varsIgnorePattern": "^_",
+        "argsIgnorePattern": "^_"
+      }
+    ],
+    "@typescript-eslint/no-explicit-any": "error",
+    "@typescript-eslint/no-empty-interface": [
+      "error",
+      {
+        "allowSingleExtends": true
+      }
+    ],
+    "prettier/prettier": "error"
+  },
+  "overrides": [
+    {
+      "files": ["**/*.stories.tsx"],
+      "rules": {
+        "@next/next/no-img-element": "off"
+      }
+    },
+    {
+      "files": ["next.config.js", ".storybook/**/*.js"],
+      "rules": {
+        "@typescript-eslint/no-var-requires": "off"
+      }
+    },
+    {
+      "files": ["source/03-components/Icon/icons/*.tsx"],
+      "rules": {
+        "prettier/prettier": "off"
+      }
+    }
+  ]
+}

.github/workflows/checks.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     defaults:
       run:
-        working-directory: ./services/app
+        working-directory: ./
 
     strategy:
       matrix:
@@ -40,7 +40,7 @@ jobs:
     runs-on: ubuntu-latest
     defaults:
       run:
-        working-directory: ./services/app
+        working-directory: ./
 
     strategy:
       matrix:

.gitignore

@@ -1,7 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
 # dependencies
 /node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
 
 # misc
 .DS_Store
 *.pem
 .idea
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# TypeScript
+tsconfig.tsbuildinfo
+
+# Storybook build files
+storybook-static/

.husky/pre-commit

@@ -1,6 +1,5 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-# Run test command in the app service.
-cd services/app
+# Run test command
 npm test

.nvmrc

@@ -1 +1 @@
-16.12
+18

.prettierignore

@@ -0,0 +1,2 @@
+source/01-global/icon/**/*.svg
+source/01-global/icon/**/*.tsx

services/app/.prettierrc → .prettierrc

@@ -9,5 +9,13 @@
   "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "all",
-  "useTabs": false
-}
+  "useTabs": false,
+  "overrides": [
+    {
+      "files": ["source/01-global/icon/**/*.tsx"],
+      "options": {
+        "organizeImportsSkipDestructiveCodeActions": true
+      }
+    }
+  ]
+}

.storybook/main.js

@@ -0,0 +1,54 @@
+const path = require('path');
+const StylelintWebpackPlugin = require('stylelint-webpack-plugin');
+const YAML = require('yaml');
+
+module.exports = {
+  staticDirs: ['../public'],
+  stories: ['../source/**/*.stories.@(js|jsx|ts|tsx)', '../source/**/*.mdx'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  webpackFinal: async config => {
+    config.plugins.push(
+      new StylelintWebpackPlugin({
+        exclude: ['node_modules', 'storybook', '.next'],
+      }),
+    );
+    config.module.rules.find(
+      rule => rule.test && rule.test.toString().includes('svg'),
+    ).exclude = /Icon\/icons\/.*\.svg$/i;
+    config.module.rules.push({
+      test: /Icon\/icons\/.*\.svg$/i,
+      use: [
+        {
+          loader: '@svgr/webpack',
+          options: {
+            svgo: true,
+            svgoConfig: {
+              plugins: ['removeDimensions'],
+            },
+            replaceAttrValues: {
+              '#000': 'currentColor',
+            },
+            titleProp: true,
+          },
+        },
+      ],
+    });
+    config.module.rules.push({
+      test: /\.ya?ml$/i,
+      type: 'json',
+      parser: {
+        parse: YAML.parse,
+      },
+    });
+    return config;
+  },
+};

.storybook/manager-head.html

@@ -0,0 +1,3 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@100;400;700&display=swap" rel="stylesheet" crossorigin>

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import theme from './theme';
+
+addons.setConfig({
+  theme,
+});

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet" crossorigin>

.storybook/preview.js

@@ -0,0 +1,77 @@
+import '../source/00-config/index.css';
+import '../source/01-global/index.css';
+import '../source/06-utility/index.css';
+
+const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  layout: 'fullscreen',
+  options: {
+    storySort: {
+      method: 'alphabetical',
+      order: [
+        'Global',
+        ['Color Palette', '*'],
+        'Layouts',
+        'Components',
+        'Templates',
+        'Pages',
+      ],
+      includeName: true,
+    },
+  },
+};
+
+// Toolbar to test multiple writing directions.
+// See https://storybook.js.org/docs/react/essentials/toolbars-and-globals#advanced-usage
+// for an example of using specific locales rather than general page orientations.
+const globalTypes = {
+  direction: {
+    name: 'Direction',
+    description: 'Writing direction',
+    defaultValue: 'ltr',
+    toolbar: {
+      icon: 'compass',
+      items: [
+        { value: 'ltr', title: 'Left-to-right' },
+        { value: 'rtl', title: 'Right-to-left' },
+        { value: 'vrl', title: 'Vertical right-to-left' },
+        { value: 'vlr', title: 'Vertical left-to-right' },
+      ],
+    },
+  },
+};
+
+const withWritingDirection = (Story, context) => {
+  const { direction } = context.globals;
+  return (
+    <div
+      dir={direction === 'rtl' || direction === 'vrl' ? 'rtl' : 'ltr'}
+      style={{
+        writingMode:
+          direction === 'vrl'
+            ? 'vertical-rl'
+            : direction === 'vlr'
+            ? 'vertical-lr'
+            : 'horizontal-tb',
+      }}
+    >
+      <Story />
+    </div>
+  );
+};
+
+const decorators = [withWritingDirection];
+
+const preview = {
+  parameters,
+  globalTypes,
+  decorators,
+};
+
+export default preview;

.storybook/theme.js

@@ -0,0 +1,20 @@
+import { create } from '@storybook/theming';
+
+const storybookTheme = create({
+  appBg: '#F8F8F8',
+  appContentBg: '#fff',
+  barBg: '#19013A',
+  barSelectedColor: '#EE2737',
+  barHoverColor: '#EE2737',
+  barTextColor: '#fff',
+  base: 'light',
+  brandTitle: 'Forum One',
+  brandUrl: 'https://forumone.com',
+  brandImage: 'images/forumone.svg',
+  colorPrimary: '#3E2A5E',
+  colorSecondary: '#EE2737',
+  fontBase: '"Barlow", sans-serif',
+  textColor: '#3f3f3f',
+});
+
+export default storybookTheme;