sanity-plugin-workspace-home 1.0.0

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "sanity-plugin-workspace-home",
+  "version": "1.0.0",
+  "description": "A home screen for your multi-workspace Sanity Studio",
+  "keywords": [
+    "sanity",
+    "sanity-plugin"
+  ],
+  "homepage": "https://github.com/sanity-io/sanity-plugin-workspace-home#readme",
+  "bugs": {
+    "url": "https://github.com/sanity-io/sanity-plugin-workspace-home/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:sanity-io/sanity-plugin-workspace-home.git"
+  },
+  "license": "MIT",
+  "author": "Sanity <hello@sanity.io>",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "source": "./src/index.ts",
+      "require": "./dist/index.js",
+      "import": "./dist/index.esm.js",
+      "default": "./dist/index.esm.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "source": "./src/index.ts",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "sanity.json",
+    "src",
+    "v2-incompatible.js"
+  ],
+  "scripts": {
+    "build": "run-s clean && plugin-kit verify-package --silent && pkg-utils build --strict && pkg-utils --strict",
+    "clean": "rimraf dist",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "link-watch": "plugin-kit link-watch",
+    "lint": "eslint .",
+    "prepublishOnly": "run-s build",
+    "watch": "pkg-utils watch --strict",
+    "prepare": "husky install"
+  },
+  "dependencies": {
+    "@sanity/incompatible-plugin": "^1.0.4"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.5.0",
+    "@commitlint/config-conventional": "^17.4.4",
+    "@sanity/pkg-utils": "^2.2.13",
+    "@sanity/plugin-kit": "^3.1.7",
+    "@sanity/semantic-release-preset": "^4.0.2",
+    "@types/react": "^18.0.28",
+    "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.56.0",
+    "@typescript-eslint/parser": "^5.56.0",
+    "eslint": "^8.36.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-sanity": "^6.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.6",
+    "prettier-plugin-packagejson": "^2.4.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "rimraf": "^4.4.0",
+    "sanity": "^3.7.1",
+    "typescript": "^5.0.2"
+  },
+  "peerDependencies": {
+    "react": "^18",
+    "sanity": "^3",
+    "styled-components": "^5.3.9"
+  },
+  "engines": {
+    "node": ">=14"
+  }
+}

package/sanity.json

@@ -0,0 +1,8 @@
+{
+  "parts": [
+    {
+      "implements": "part:@sanity/base/sanity-root",
+      "path": "./v2-incompatible.js"
+    }
+  ]
+}

package/src/components/WorkspaceHome.tsx

@@ -0,0 +1,41 @@
+import {useActiveWorkspace, useWorkspaces} from 'sanity'
+import {Button, Flex, Container, Stack, Heading, Card} from '@sanity/ui'
+
+import WorkspacePreview from './WorkspacePreview'
+import {useEffect} from 'react'
+
+export default function WorkspaceHome() {
+  const [home, ...workspaces] = useWorkspaces()
+  const {setActiveWorkspace} = useActiveWorkspace()
+
+  // Listen to keypress of workspace index
+  useEffect(() => {
+    const handleKeypress = (event: KeyboardEvent) => {
+      const index = parseInt(event.key, 10) - 1
+      if (index >= 0 && index < workspaces.length) {
+        setActiveWorkspace(workspaces[index].name)
+      }
+    }
+
+    window.addEventListener('keypress', handleKeypress)
+
+    return () => {
+      window.removeEventListener('keypress', handleKeypress)
+    }
+  }, [workspaces, setActiveWorkspace])
+
+  return (
+    <Card tone="transparent" height="fill">
+      <Flex direction="column" height="fill" padding={[4, 5, 6, 6]}>
+        <Container>
+          <Stack space={4}>
+            <Heading>Workspaces</Heading>
+            {workspaces.map((workspace, index) => (
+              <WorkspacePreview key={workspace.name} workspace={workspace} index={index} />
+            ))}
+          </Stack>
+        </Container>
+      </Flex>
+    </Card>
+  )
+}

package/src/components/WorkspacePreview.tsx

@@ -0,0 +1,77 @@
+import {Button, Hotkeys, Stack, Box, Flex, Heading, Card, Text} from '@sanity/ui'
+// import {StarIcon} from '@sanity/icons'
+import React, {createElement, isValidElement, useMemo} from 'react'
+import {isValidElementType} from 'react-is'
+import {useActiveWorkspace, WorkspaceSummary} from 'sanity'
+import styled from 'styled-components'
+
+const createIcon = (icon: React.ComponentType | React.ReactNode) => {
+  if (isValidElementType(icon)) return createElement(icon)
+  if (isValidElement(icon)) return icon
+  return undefined
+}
+
+export const MediaCard = styled(Card)`
+  width: 35px;
+  height: 35px;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`
+
+export type WorkspacePreviewProps = {
+  workspace: WorkspaceSummary
+  index: number
+}
+
+export default function WorkspacePreview(props: WorkspacePreviewProps) {
+  const {icon, title, name, subtitle} = props.workspace
+  const {setActiveWorkspace} = useActiveWorkspace()
+  const iconComponent = useMemo(() => createIcon(icon), [icon])
+
+  // TODO: Favorites feature
+  // get favorite workspace name from localStorage
+  //   const favoriteWorkspace = localStorage.getItem('favoriteWorkspace')
+  //   save local state to force re-render
+  //   const [isFavourite, setIsFavourite] = React.useState(favoriteWorkspace === name)
+
+  // set favorite workspace name to localStorage
+  //   const setFavoriteWorkspace = useCallback(() => {
+  //     localStorage.setItem('favoriteWorkspace', name)
+  //   }, [name])
+
+  return (
+    <Card shadow={1} radius={2}>
+      <Flex align="center" gap={[2, 3, 4, 4]} paddingX={[2, 3, 4, 4]}>
+        <Hotkeys keys={[String(props.index + 1)]} padding={2} />
+        <Box flex={1}>
+          <Stack>
+            <Button mode="bleed" tone="default" onClick={() => setActiveWorkspace(name)}>
+              <Flex align="center" gap={[2, 3, 4, 4]}>
+                {iconComponent ? <MediaCard>{createIcon(iconComponent)}</MediaCard> : null}
+                <Box flex={1}>
+                  <Stack space={[1, 2, 3, 3]}>
+                    <Heading>{title || name}</Heading>
+                    {subtitle ? <Text muted>{subtitle}</Text> : null}
+                  </Stack>
+                </Box>
+              </Flex>
+            </Button>
+          </Stack>
+        </Box>
+        {/* <Button
+          mode={isFavourite ? 'default' : 'bleed'}
+          tone={isFavourite ? 'primary' : 'default'}
+          icon={StarIcon}
+          title="Favorite"
+          onClick={() => {
+            setIsFavourite(!isFavourite)
+            setFavoriteWorkspace()
+          }}
+        /> */}
+      </Flex>
+    </Card>
+  )
+}

package/src/index.ts

@@ -0,0 +1,29 @@
+import {Config, definePlugin} from 'sanity'
+import {HomeIcon} from '@sanity/icons'
+
+import {workspaceHomeTool} from './tool'
+
+export const workspaceHome = definePlugin(() => {
+  return {
+    name: 'sanity-plugin-workspace-home',
+    tools: [workspaceHomeTool],
+  }
+})
+
+type WorkspaceHomeConfigProps = {
+  projectId: string
+  dataset: string
+}
+
+export const workspaceHomeConfig = ({
+  projectId = ``,
+  dataset = ``,
+}: WorkspaceHomeConfigProps): Config => ({
+  name: 'home',
+  title: 'Home',
+  basePath: '/home',
+  projectId,
+  dataset,
+  icon: HomeIcon,
+  plugins: [workspaceHome()],
+})

package/src/tool/index.ts

@@ -0,0 +1,10 @@
+import {HomeIcon} from '@sanity/icons'
+
+import WorkspaceHome from '../components/WorkspaceHome'
+
+export const workspaceHomeTool = {
+  title: 'Workspace Home',
+  name: 'workspace-home',
+  icon: HomeIcon,
+  component: WorkspaceHome,
+}

package/v2-incompatible.js

@@ -0,0 +1,11 @@
+const {showIncompatiblePluginDialog} = require('@sanity/incompatible-plugin')
+const {name, version, sanityExchangeUrl} = require('./package.json')
+
+export default showIncompatiblePluginDialog({
+  name: name,
+  versions: {
+    v3: version,
+    v2: undefined,
+  },
+  sanityExchangeUrl,
+})