feat(studio): new layout and contextual sidebar (#357)

Author: alec-chernicki

.changeset/new-ads-perform.md

@@ -0,0 +1,13 @@
+---
+"@commonalityco/utils-conformance": patch
+"@commonalityco/ui-design-system": patch
+"@commonalityco/config-tailwind": patch
+"@commonalityco/data-packages": patch
+"@commonalityco/feature-graph": patch
+"@commonalityco/utils-core": patch
+"commonality": patch
+"workshop": patch
+"@commonalityco/studio": patch
+---
+
+Update layout of graph and deprecate packages

.commonality/config.json

@@ -35,5 +35,18 @@
       "has-client-tsconfig",
       "has-npm-ignore"
     ]
+  },
+  "constraints": {
+    "application": {
+      "allow": [
+        "feature",
+        "ui",
+        "state",
+        "data",
+        "utility",
+        "config",
+        "application"
+      ]
+    }
   }
 }

.github/workflows/commonality.yml

@@ -6,6 +6,9 @@ on:
   pull_request:
     branches: [main]
 
+env:
+  FORCE_COLOR: 1
+
 jobs:
   validate:
     timeout-minutes: 10

apps/commonality/package.json

@@ -72,7 +72,6 @@
     "ora": "^7.0.1",
     "pathe": "^1.1.2",
     "pino": "^8.19.0",
-    "pino-pretty": "^10.3.1",
     "prompts": "^2.4.2",
     "std-env": "^3.7.0",
     "strip-ansi": "^7.1.0",
@@ -110,4 +109,4 @@
     "typescript": "^5.3.3",
     "vitest": "^0.34.6"
   }
-}
+}

apps/commonality/src/cli/commands/constrain.test.ts

@@ -312,7 +312,7 @@ describe('constrain', () => {
 
       Prevent endless dependency debugging by limiting the which packages can depend on each other.
 
-      https://commonality.co/docs/constraints",
+      https://docs.commonality.co/constraints",
         ],
       ]
     `);

apps/commonality/src/cli/commands/constrain.ts

@@ -27,7 +27,7 @@ class ConstrainLogger extends Logger {
   addEmptyMessage() {
     const title = c.bold(`You don't have any constraints configured.`);
     const body = `Prevent endless dependency debugging by limiting the which packages can depend on each other.`;
-    const link = 'https://commonality.co/docs/constraints';
+    const link = 'https://docs.commonality.co/constraints';
 
     this.output += `\n${title}\n\n${body}\n\n${link}`;
   }

apps/commonality/src/cli/commands/studio.ts

@@ -80,8 +80,8 @@ export const studio = command
         process.on('SIGINT', handleExit);
         process.on('SIGTERM', handleExit);
 
-        const localUrl = `http://localhost:${port}/graph`;
-        const networkUrl = `http://${ip.address()}:${port}/graph`;
+        const localUrl = `http://localhost:${port}/`;
+        const networkUrl = `http://${ip.address()}:${port}/`;
 
         await waitOn({ resources: [localUrl], timeout: 10_000 });
 

apps/studio/e2e/smoke.spec.ts

@@ -1,13 +1,7 @@
 import { test, expect } from '@playwright/test';
 
 test('smoke - constraints', async ({ page }) => {
-  await page.goto('/graph');
+  await page.goto('/');
 
   await expect(page.getByTestId('dependency-graph')).toBeVisible();
 });
-
-test('smoke - checks', async ({ page }) => {
-  await page.goto('/packages');
-
-  await expect(page.getByRole('heading', { name: 'Packages' })).toBeVisible();
-});

apps/studio/next.config.js

@@ -2,18 +2,16 @@ module.exports = {
   reactStrictMode: true,
   transpilePackages: [
     '@commonalityco/ui-design-system',
-    '@commonalityco/ui-package',
     '@commonalityco/ui-core',
-    '@commonalityco/ui-graph',
-    '@commonalityco/ui-conformance',
-    '@commonalityco/ui-constraints',
+    '@commonalityco/feature-graph',
   ],
   async redirects() {
     return [
       {
-        source: '/((?!graph|packages).*)',
-        destination: '/graph',
-        permanent: true,
+        source: '/:path+',
+        destination: '/',
+        permanent: false, // Set to true if you want the redirect to be permanent
+        basePath: false,
       },
     ];
   },

apps/studio/package.json

@@ -30,7 +30,8 @@
     "dist/"
   ],
   "dependencies": {
-    "@xyflow/react": "12.0.0-next.9",
+    "@commonalityco/feature-graph": "workspace:*",
+    "@xyflow/react": "12.0.0-next.11",
     "@xyflow/system": "^0.0.17",
     "chokidar": "^3.6.0",
     "execa": "^8.0.1",
@@ -52,12 +53,8 @@
     "@commonalityco/data-project": "workspace:*",
     "@commonalityco/data-tags": "workspace:*",
     "@commonalityco/types": "workspace:*",
-    "@commonalityco/ui-conformance": "workspace:*",
-    "@commonalityco/ui-constraints": "workspace:*",
     "@commonalityco/ui-core": "workspace:*",
     "@commonalityco/ui-design-system": "workspace:*",
-    "@commonalityco/ui-graph": "workspace:*",
-    "@commonalityco/ui-package": "workspace:*",
     "@commonalityco/utils-conformance": "workspace:*",
     "@commonalityco/utils-core": "workspace:*",
     "@commonalityco/utils-package": "workspace:*",
@@ -84,7 +81,6 @@
     "clsx": "^2.1.0",
     "cookies-next": "^4.1.1",
     "cypress": "^13.6.5",
-    "cytoscape": "^3.28.1",
     "date-fns": "^2.30.0",
     "eslint-config-next": "^14.1.0",
     "fs-extra": "^11.2.0",
@@ -97,7 +93,6 @@
     "open-editor": "^4.1.1",
     "path-browserify": "^1.0.1",
     "pino": "^8.19.0",
-    "pino-pretty": "^10.3.1",
     "postcss": "^8.4.35",
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.11",
@@ -121,4 +116,4 @@
     "url": "https://github.com/commonalityco/commonality",
     "directory": "apps/studio"
   }
-}
+}

apps/studio/src/actions/editor.ts

@@ -7,7 +7,7 @@
 
 @layer base {
   body {
-    @apply text-sm bg-background text-foreground;
+    @apply bg-background text-foreground text-sm;
   }
 
   * {
@@ -17,7 +17,7 @@
 
 @layer components {
   .react-flow__minimap {
-    @apply bg-interactive rounded-md border border-muted-foreground/25 overflow-hidden shadow;
+    @apply bg-interactive border-muted-foreground/25 overflow-hidden rounded-md border shadow;
   }
 
   .react-flow__minimap-mask {
@@ -29,6 +29,10 @@
   }
 
   .react-flow__nodesselection-rect {
-    @apply bg-muted-foreground/10 border border-muted-foreground;
+    @apply bg-muted-foreground/10 border-muted-foreground border;
+  }
+
+  .react-flow__background-pattern.dots {
+    @apply fill-zinc-500 dark:fill-zinc-500/75;
   }
 }