Setup chromatic CI and some other stuff

.github/workflows/CD.yml

@@ -0,0 +1,98 @@
+name: Deploy code
+
+on:
+    push:
+        branches:
+            - next
+    workflow_dispatch:
+
+jobs:
+    deploy:
+        name: Deploy
+        runs-on: ubuntu-latest
+        strategy:
+            matrix:
+                node-version: [20.x]
+        steps:
+            - name: Install Native Dependencies
+              run: |
+                  sudo apt-get update
+                  sudo apt-get install -y expect-dev
+
+            - name: Checkout
+              uses: actions/checkout@v4
+              with:
+                  fetch-tags: true
+
+            - name: Check if version is tagged
+              id: get-tag
+              run: |
+                  set +ea
+                  git describe --exact-match HEAD
+                  if [ $? -eq 0 ]; then
+                    echo "deploy_tag=$(git describe --exact-match HEAD)" >> $GITHUB_OUTPUT
+                  else
+                    echo "deploy_tag=FAILED" >> $GITHUB_OUTPUT
+                  fi
+
+            - name: Restore Yarn cache
+              uses: actions/cache@v4
+              with:
+                  path: .yarn/cache
+                  key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
+
+            - name: Use Node.js ${{ matrix.node-version }}
+              uses: actions/setup-node@v4
+              with:
+                  node-version: ${{ matrix.node-version }}
+
+            - name: Setup Yarn
+              run: corepack enable
+
+            - name: Install Yarn Dependencies
+              run: |
+                  unbuffer yarn install --immutable | tee yarn_output.log
+                  if cat yarn_output.log | grep YN0060; then
+                    echo "Detected incompatible peer dependencies!"
+                    exit 1
+                  fi
+
+            - name: Compile
+              if: steps.get-tag.outputs.deploy_tag != 'FAILED'
+              run: yarn run build --env GITHUB_CD --env GITHUB_SHA=$GITHUB_SHA --env GITHUB_TAG="${{ steps.get-tag.outputs.deploy_tag }}"
+
+            - name: Compile (no tag)
+              if: steps.get-tag.outputs.deploy_tag == 'FAILED'
+              run: yarn run build --env GITHUB_CD --env GITHUB_SHA=$GITHUB_SHA
+
+            #Safety against pushing broken code
+            - name: Run ESLint
+              run: yarn eslint "**/*.{js,jsx,ts,tsx}"
+
+            - name: Create workdir
+              run: |
+                  git fetch origin live
+                  git worktree add $HOME/webpanellive origin/live
+                  touch $HOME/webpanellive/.nojekyll
+
+            - name: Copy files
+              run: |
+                  export WEBPANEL_VERSION=$(node -pe "require('./package.json').version")
+                  export API_VERSION=$(node -pe "require('./package.json').tgs_api_version")
+                  rm -rf $HOME/webpanellive/api/$API_VERSION
+                  rm -rf $HOME/webpanellive/webpanel/$WEBPANEL_VERSION
+                  mkdir -p $HOME/webpanellive/webpanel/$WEBPANEL_VERSION
+                  cp ./dist/* $HOME/webpanellive/webpanel/$WEBPANEL_VERSION -R
+                  cd $HOME/webpanellive/api
+                  ln -s ../webpanel/$WEBPANEL_VERSION $API_VERSION
+
+            - name: Deploy to Github
+              if: steps.get-tag.outputs.deploy_tag != 'FAILED'
+              run: |
+                  cd $HOME/webpanellive
+                  git config --local user.email "161980869+tgstation-server-ci[bot]@users.noreply.github.com"
+                  git config --local user.name "tgstation-server-ci[bot]"
+                  git add *
+                  git commit -m "Update webpanel"
+                  git pull --rebase origin live
+                  git push origin HEAD:live

.github/workflows/CI.yml

@@ -0,0 +1,74 @@
+name: Node.js CI
+
+on:
+    push:
+        branches:
+            - next
+            - graphql
+    pull_request:
+
+jobs:
+    build:
+        name: Build
+        runs-on: ubuntu-latest
+        strategy:
+            matrix:
+                node-version: [20.x]
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Restore Yarn cache
+              uses: actions/cache@v4
+              with:
+                  path: .yarn/cache
+                  key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
+
+            - name: Use Node.js ${{ matrix.node-version }}
+              uses: actions/setup-node@v4
+              with:
+                  node-version: ${{ matrix.node-version }}
+
+            - name: Setup Yarn
+              run: corepack enable
+
+            - name: Install Yarn Dependencies
+              run: |
+                  unbuffer yarn install --immutable | tee yarn_output.log
+                  if cat yarn_output.log | grep YN0060; then
+                    echo "Detected incompatible peer dependencies!"
+                    exit 1
+                  fi
+
+            - name: Compile
+              run: yarn build
+
+    lint:
+        name: Run Linter
+        runs-on: ubuntu-latest
+        strategy:
+            matrix:
+                node-version: [20.x]
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Restore Yarn cache
+              uses: actions/cache@v4
+              with:
+                  path: .yarn/cache
+                  key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
+
+            - name: Use Node.js ${{ matrix.node-version }}
+              uses: actions/setup-node@v4
+              with:
+                  node-version: ${{ matrix.node-version }}
+
+            - name: Setup Yarn
+              run: corepack enable
+
+            - name: Install Dependencies
+              run: yarn
+
+            - name: Run ESLint
+              run: yarn eslint "**/*.{js,jsx,ts,tsx}"

.github/workflows/chromatic.yml

@@ -0,0 +1,42 @@
+name: "Chromatic"
+
+on:
+    push:
+        branches:
+            - next
+            - graphql
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    strategy:
+        matrix:
+            node-version: [20.x]
+    steps:
+        - name: Checkout
+          uses: actions/checkout@v4
+          with:
+            fetch-depth: 0
+
+        - name: Restore Yarn cache
+          uses: actions/cache@v4
+          with:
+              path: .yarn/cache
+              key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
+
+        - name: Use Node.js ${{ matrix.node-version }}
+          uses: actions/setup-node@v4
+          with:
+              node-version: ${{ matrix.node-version }}
+
+        - name: Setup Yarn
+          run: corepack enable
+
+        - name: Install Dependencies
+          run: yarn
+
+        - name: Run Chromatic
+          uses: chromaui/action@latest
+          with:
+            projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/dependabot-automerge.yml → .github/workflows/dependabot-automerge.yml

@@ -5,6 +5,7 @@ on:
         types: [opened, reopened]
         branches:
             - next
+            - graphql
 
 concurrency:
     group: "dependabot-automerge-${{ github.head_ref || github.run_id }}-${{ github.event_name }}"

package.json

@@ -29,7 +29,7 @@
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "chromatic": "npx chromatic --project-token=chpt_d91fb89186cb623"
+    "chromatic": "npx chromatic"
   },
   "dependencies": {
     "concurrently": "^9.0.1",

src/components/utils/Loading.stories.tsx

@@ -9,4 +9,7 @@ const config: Meta<typeof Loading> = {
 export default config;
 
 export const NoText = () => <Loading />;
-export const LoadingText = () => <Loading messageId="loading.loading" />;
+export const TranslatedLoadingText = () => (
+    <Loading message="loading.loading" />
+);
+export const UntranslatedText = () => <Loading message="Untranslated" noIntl />;

src/components/utils/Loading.tsx

@@ -1,19 +1,26 @@
-import { Loader2 } from "lucide-react"
+import { Loader2 } from "lucide-react";
 import { FormattedMessage } from "react-intl";
 
 interface IProps {
-    messageId?: string
+    message?: string;
+    noIntl?: boolean;
 }
 
 const Loading = function (props: IProps) {
     return (
-      <div className="flex flex-col items-center justify-center space-y-2">
-        <Loader2 className="h-8 w-8 animate-spin text-primary" />
-        {props.messageId ? <p className="text-sm font-medium text-muted-foreground">
-            <FormattedMessage id={props.messageId} />
-        </p> : null}
-      </div>
-    )
-  }
+        <div className="flex flex-col items-center justify-center space-y-2">
+            <Loader2 className="h-64 w-64 animate-spin text-primary" />
+            {props.message ? (
+                <p className="text-sm font-medium text-muted-foreground">
+                    {props.noIntl ? (
+                        props.message
+                    ) : (
+                        <FormattedMessage id={props.message} />
+                    )}
+                </p>
+            ) : null}
+        </div>
+    );
+};
 
 export default Loading;

src/index.css

@@ -1,3 +1,12 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+    background: #212529;
+    color: #FFFFFF;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+p {
+    text-align: center;
+}