@sanity/plugin-kit 2.1.18 → 2.2.0

package/README.md

@@ -90,10 +90,10 @@ Now, configure the plugin in sanity.config.ts (or .js) in Sanity Studio:
   })
 ```
 
-Start the studio:
+Start the Sanity Studio development server:
 
 ```bash
-sanity start
+sanity dev
 ```
 
 Check browser console: the plugin should have logged `"hello from my-sanity-plugin"`.
@@ -198,6 +198,7 @@ The inject command can do more work by adding presets. Consult the individual pr
 
 * [semver-workflow](./docs/semver-workflow.md) - Add an opinionated Github workflow to automate NPM releases
 * [renovatebot](./docs/renovatebot.md) - Add opinionated Renovatebot config to make dependency management a breeze
+* [ui-workshop](./docs/ui-workshop.md) - Add  [@sanity/ui-workshop](https://github.com/sanity-io/ui-workshop) to make component testing a breeze
 
 ## Testing a plugin in Sanity Studio
 

package/assets/inject/ui-workshop/src/CustomField.tsx

@@ -0,0 +1,15 @@
+import {Box, Stack, Text} from '@sanity/ui'
+import React, {ReactNode} from 'react'
+
+export function CustomField(props: {children?: ReactNode; title?: ReactNode}) {
+  const {children, title} = props
+
+  return (
+    <Stack space={3}>
+      <Text size={1} weight="semibold">
+        {title}
+      </Text>
+      <Box>{children}</Box>
+    </Stack>
+  )
+}

package/assets/inject/ui-workshop/src/__workshop__/index.tsx

@@ -0,0 +1,14 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'custom',
+  title: 'Custom (example)',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./props')),
+    },
+  ],
+})

package/assets/inject/ui-workshop/src/__workshop__/props.tsx

@@ -0,0 +1,20 @@
+import {Box, Card, Container, Text} from '@sanity/ui'
+import {useString} from '@sanity/ui-workshop'
+import {CustomField} from '../CustomField'
+import React from 'react'
+
+export default function PropsStory() {
+  const title = useString('Title', 'My custom field')
+
+  return (
+    <Container width={1}>
+      <Box paddingX={4} paddingY={[5, 6, 7]}>
+        <CustomField title={title}>
+          <Card border padding={3}>
+            <Text>This is just an example</Text>
+          </Card>
+        </CustomField>
+      </Box>
+    </Container>
+  )
+}

package/assets/inject/ui-workshop/workshop.config.ts

@@ -0,0 +1,5 @@
+import {defineConfig} from '@sanity/ui-workshop'
+
+export default defineConfig({
+  title: 'Workshop Starter',
+})

package/lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sanity/plugin-kit",
-    "version": "2.1.18",
+    "version": "2.2.0",
     "description": "Enhanced Sanity.io plugin development experience",
     "keywords": [
         "sanity-io",
@@ -89,8 +89,9 @@
     "devDependencies": {
         "@commitlint/cli": "^17.2.0",
         "@commitlint/config-conventional": "^17.2.0",
-        "@sanity/pkg-utils": "^1.18.0",
+        "@sanity/pkg-utils": "^1.20.1",
         "@sanity/semantic-release-preset": "^2.0.2",
+        "@sanity/ui-workshop": "^1.0.1",
         "@types/eslint": "^8.4.10",
         "@types/fs-extra": "^9.0.13",
         "@types/inquirer": "^9.0.3",
@@ -112,7 +113,7 @@
         "prettier-plugin-packagejson": "^2.3.0",
         "readdirp": "^3.6.0",
         "rimraf": "^3.0.2",
-        "sanity": "3.0.0-rc.2",
+        "sanity": "^3.0.0",
         "sinon": "^14.0.2",
         "tap": "^16.3.1",
         "ts-node": "^10.9.1",

package/lib/src/cmds/init.js

@@ -43,7 +43,7 @@ Options
   --license [spdx]        Use the license with the given SPDX identifier
   --force                 No promt when overwriting files
 
-  --preset [preset-name]  [beta] - Adds config and files from a named preset. --preset can be supplied multiple times.
+  --preset [preset-name]  Adds config and files from a named preset. --preset can be supplied multiple times.
                           The following presets are available:
 ${(0, presets_1.presetHelpList)(30)}
 

package/lib/src/cmds/inject.js

@@ -37,7 +37,7 @@ Options
   --license [spdx]        Use the license with the given SPDX identifier
   --force                 No promt when overwriting files
 
-  --preset [preset-name]  [beta] - Adds config and files from a named preset. --preset can be supplied multiple times.
+  --preset [preset-name]  Adds config and files from a named preset. --preset can be supplied multiple times.
                           The following presets are available:
 ${(0, presets_1.presetHelpList)(30)}
   --preset-only           Skips the default inject steps. Use this to apply a preset to an otherwise complete plugin.

package/lib/src/presets/presets.js

@@ -12,7 +12,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.injectPresets = exports.presetHelpList = void 0;
 const semver_workflow_1 = require("./semver-workflow");
 const renovatebot_1 = require("./renovatebot");
-const presets = [semver_workflow_1.semverWorkflowPreset, renovatebot_1.renovatePreset];
+const ui_workshop_1 = require("./ui-workshop");
+const presets = [semver_workflow_1.semverWorkflowPreset, renovatebot_1.renovatePreset, ui_workshop_1.uiWorkshop];
 const presetNames = presets.map((p) => p === null || p === void 0 ? void 0 : p.name);
 function presetHelpList(padStart) {
     return presets

package/lib/src/presets/presets.js.map

@@ -1 +1 @@
-{"version":3,"file":"presets.js","sourceRoot":"","sources":["../../../src/presets/presets.ts"],"names":[],"mappings":";;;;;;;;;;;;AACA,uDAAsD;AACtD,+CAA4C;AAQ5C,MAAM,OAAO,GAAa,CAAC,sCAAoB,EAAE,4BAAc,CAAC,CAAA;AAChE,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,IAAI,CAAC,CAAA;AAE/C,SAAgB,cAAc,CAAC,QAAgB;IAC7C,OAAO,OAAO;SACX,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC;SAC1E,IAAI,CAAC,IAAI,CAAC,CAAA;AACf,CAAC;AAJD,wCAIC;AAED,SAAsB,aAAa,CAAC,OAAsB;;;QACxD,IAAI,OAAO,CAAC,KAAK,CAAC,UAAU,IAAI,CAAC,CAAA,MAAA,OAAO,CAAC,KAAK,CAAC,MAAM,0CAAE,MAAM,CAAA,EAAE;YAC7D,MAAM,IAAI,KAAK,CAAC,4DAA4D,CAAC,CAAA;SAC9E;QAED,MAAM,YAAY,GAAG,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAC3D,KAAK,MAAM,MAAM,IAAI,YAAY,EAAE;YACjC,MAAM,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;SAC5B;;CACF;AATD,sCASC;AAED,SAAS,gBAAgB,CAAC,YAAkC;IAC1D,IAAI,CAAC,YAAY,EAAE;QACjB,OAAO,EAAE,CAAA;KACV;IACD,MAAM,cAAc,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;IAC3E,IAAI,cAAc,CAAC,MAAM,EAAE;QACzB,MAAM,IAAI,KAAK,CACb,yBAAyB,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,WAAW,CAAC,IAAI,CACvF,IAAI,CACL,GAAG,CACL,CAAA;KACF;IAED,OAAO,YAAY;SAChB,MAAM,CAAC,UAAU,CAAC;SAClB,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC;SAC/D,MAAM,CAAC,CAAC,CAAC,EAAe,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AACpC,CAAC;AAED,SAAS,UAAU,CAAC,KAAa,EAAE,KAAa,EAAE,GAAa;IAC7D,OAAO,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,KAAK,CAAA;AACrC,CAAC"}
+{"version":3,"file":"presets.js","sourceRoot":"","sources":["../../../src/presets/presets.ts"],"names":[],"mappings":";;;;;;;;;;;;AACA,uDAAsD;AACtD,+CAA4C;AAC5C,+CAAwC;AAQxC,MAAM,OAAO,GAAa,CAAC,sCAAoB,EAAE,4BAAc,EAAE,wBAAU,CAAC,CAAA;AAC5E,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,IAAI,CAAC,CAAA;AAE/C,SAAgB,cAAc,CAAC,QAAgB;IAC7C,OAAO,OAAO;SACX,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC;SAC1E,IAAI,CAAC,IAAI,CAAC,CAAA;AACf,CAAC;AAJD,wCAIC;AAED,SAAsB,aAAa,CAAC,OAAsB;;;QACxD,IAAI,OAAO,CAAC,KAAK,CAAC,UAAU,IAAI,CAAC,CAAA,MAAA,OAAO,CAAC,KAAK,CAAC,MAAM,0CAAE,MAAM,CAAA,EAAE;YAC7D,MAAM,IAAI,KAAK,CAAC,4DAA4D,CAAC,CAAA;SAC9E;QAED,MAAM,YAAY,GAAG,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAC3D,KAAK,MAAM,MAAM,IAAI,YAAY,EAAE;YACjC,MAAM,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;SAC5B;;CACF;AATD,sCASC;AAED,SAAS,gBAAgB,CAAC,YAAkC;IAC1D,IAAI,CAAC,YAAY,EAAE;QACjB,OAAO,EAAE,CAAA;KACV;IACD,MAAM,cAAc,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;IAC3E,IAAI,cAAc,CAAC,MAAM,EAAE;QACzB,MAAM,IAAI,KAAK,CACb,yBAAyB,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,WAAW,CAAC,IAAI,CACvF,IAAI,CACL,GAAG,CACL,CAAA;KACF;IAED,OAAO,YAAY;SAChB,MAAM,CAAC,UAAU,CAAC;SAClB,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC;SAC/D,MAAM,CAAC,CAAC,CAAC,EAAe,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AACpC,CAAC;AAED,SAAS,UAAU,CAAC,KAAa,EAAE,KAAa,EAAE,GAAa;IAC7D,OAAO,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,KAAK,CAAA;AACrC,CAAC"}

package/lib/src/presets/ui-workshop.d.ts

@@ -0,0 +1,2 @@
+import { Preset } from './presets';
+export declare const uiWorkshop: Preset;

package/lib/src/presets/ui-workshop.js

@@ -0,0 +1,88 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uiWorkshop = void 0;
+const inject_1 = require("../actions/inject");
+const package_1 = require("../npm/package");
+const log_1 = __importDefault(require("../util/log"));
+const chalk_1 = __importDefault(require("chalk"));
+const outdent_1 = __importDefault(require("outdent"));
+const resolveLatestVersions_1 = require("../npm/resolveLatestVersions");
+const path_1 = __importDefault(require("path"));
+const files_1 = require("../util/files");
+const errorToUndefined_1 = require("../util/errorToUndefined");
+exports.uiWorkshop = {
+    name: 'ui-workshop',
+    description: 'Files for testing custom components with @sanity/ui-workshop',
+    apply: applyPreset,
+};
+function applyPreset(options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        yield (0, inject_1.writeAssets)(files(), options);
+        yield addDevDependencies(options);
+        yield updateGitIgnore(options);
+        log_1.default.info(chalk_1.default.green((0, outdent_1.default) `
+        ui-workshop preset injected.
+
+        Please confer
+        https://github.com/sanity-io/plugin-kit/blob/main/docs/ui-workshop.md#manual-steps-after-inject
+        to finalize configuration for this preset.
+  `.trim()));
+    });
+}
+function files() {
+    return [
+        { from: ['workshop.config.ts'], to: ['workshop.config.ts'] },
+        { from: ['src', 'CustomField.tsx'], to: ['src', 'CustomField.tsx'] },
+        { from: ['src', '__workshop__', 'index.tsx'], to: ['src', '__workshop__', 'index.tsx'] },
+        { from: ['src', '__workshop__', 'props.tsx'], to: ['src', '__workshop__', 'props.tsx'] },
+    ].map((fromTo) => (Object.assign(Object.assign({}, fromTo), { from: ['ui-workshop', ...fromTo.from] })));
+}
+function updateGitIgnore(options) {
+    var _a;
+    return __awaiter(this, void 0, void 0, function* () {
+        const { basePath } = options;
+        const gitignorePath = path_1.default.join(basePath, '.gitignore');
+        let gitignore = (_a = (yield (0, files_1.readFile)(gitignorePath, 'utf8').catch(errorToUndefined_1.errorToUndefined))) !== null && _a !== void 0 ? _a : '';
+        const value = '.workshop';
+        if (gitignore.includes(value)) {
+            return;
+        }
+        gitignore += `\n\n${value}`;
+        yield (0, files_1.writeFile)(gitignorePath, gitignore, { encoding: 'utf8' });
+    });
+}
+function addDevDependencies(options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const pkg = yield (0, package_1.getPackage)(options);
+        const devDeps = (0, package_1.sortKeys)(Object.assign(Object.assign({}, pkg.devDependencies), (yield devDependencies())));
+        const newPkg = Object.assign({}, pkg);
+        newPkg.devDependencies = devDeps;
+        yield (0, package_1.writePackageJsonDirect)(newPkg, options);
+        log_1.default.info('Updated devDependencies.');
+    });
+}
+function devDependencies() {
+    return __awaiter(this, void 0, void 0, function* () {
+        return (0, resolveLatestVersions_1.resolveLatestVersions)([
+            '@sanity/ui-workshop',
+            '@sanity/icons',
+            '@sanity/ui',
+            'react',
+            'react-dom',
+            'styled-component',
+        ]);
+    });
+}
+//# sourceMappingURL=ui-workshop.js.map

package/lib/src/presets/ui-workshop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-workshop.js","sourceRoot":"","sources":["../../../src/presets/ui-workshop.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/plugin-kit",
-  "version": "2.1.18",
+  "version": "2.2.0",
   "description": "Enhanced Sanity.io plugin development experience",
   "keywords": [
     "sanity-io",
@@ -89,8 +89,9 @@
   "devDependencies": {
     "@commitlint/cli": "^17.2.0",
     "@commitlint/config-conventional": "^17.2.0",
-    "@sanity/pkg-utils": "^1.18.0",
+    "@sanity/pkg-utils": "^1.20.1",
     "@sanity/semantic-release-preset": "^2.0.2",
+    "@sanity/ui-workshop": "^1.0.1",
     "@types/eslint": "^8.4.10",
     "@types/fs-extra": "^9.0.13",
     "@types/inquirer": "^9.0.3",
@@ -112,7 +113,7 @@
     "prettier-plugin-packagejson": "^2.3.0",
     "readdirp": "^3.6.0",
     "rimraf": "^3.0.2",
-    "sanity": "3.0.0-rc.2",
+    "sanity": "^3.0.0",
     "sinon": "^14.0.2",
     "tap": "^16.3.1",
     "ts-node": "^10.9.1",

package/src/cmds/init.ts

@@ -31,7 +31,7 @@ Options
   --license [spdx]        Use the license with the given SPDX identifier
   --force                 No promt when overwriting files
 
-  --preset [preset-name]  [beta] - Adds config and files from a named preset. --preset can be supplied multiple times.
+  --preset [preset-name]  Adds config and files from a named preset. --preset can be supplied multiple times.
                           The following presets are available:
 ${presetHelpList(30)}
 

package/src/cmds/inject.ts

@@ -25,7 +25,7 @@ Options
   --license [spdx]        Use the license with the given SPDX identifier
   --force                 No promt when overwriting files
 
-  --preset [preset-name]  [beta] - Adds config and files from a named preset. --preset can be supplied multiple times.
+  --preset [preset-name]  Adds config and files from a named preset. --preset can be supplied multiple times.
                           The following presets are available:
 ${presetHelpList(30)}
   --preset-only           Skips the default inject steps. Use this to apply a preset to an otherwise complete plugin.

package/src/presets/presets.ts

@@ -1,6 +1,7 @@
 import {InjectOptions} from '../actions/inject'
 import {semverWorkflowPreset} from './semver-workflow'
 import {renovatePreset} from './renovatebot'
+import {uiWorkshop} from './ui-workshop'
 
 export interface Preset {
   name: string
@@ -8,7 +9,7 @@ export interface Preset {
   apply: (options: InjectOptions) => Promise<void>
 }
 
-const presets: Preset[] = [semverWorkflowPreset, renovatePreset]
+const presets: Preset[] = [semverWorkflowPreset, renovatePreset, uiWorkshop]
 const presetNames = presets.map((p) => p?.name)
 
 export function presetHelpList(padStart: number) {

package/src/presets/ui-workshop.ts

@@ -0,0 +1,81 @@
+import {Preset} from './presets'
+import {FromTo, InjectOptions, writeAssets} from '../actions/inject'
+import {getPackage, sortKeys, writePackageJsonDirect} from '../npm/package'
+import log from '../util/log'
+import chalk from 'chalk'
+import outdent from 'outdent'
+import {resolveLatestVersions} from '../npm/resolveLatestVersions'
+import path from 'path'
+import {readFile, writeFile} from '../util/files'
+import {errorToUndefined} from '../util/errorToUndefined'
+
+export const uiWorkshop: Preset = {
+  name: 'ui-workshop',
+  description: 'Files for testing custom components with @sanity/ui-workshop',
+  apply: applyPreset,
+}
+
+async function applyPreset(options: InjectOptions) {
+  await writeAssets(files(), options)
+  await addDevDependencies(options)
+  await updateGitIgnore(options)
+  log.info(
+    chalk.green(
+      outdent`
+        ui-workshop preset injected.
+
+        Please confer
+        https://github.com/sanity-io/plugin-kit/blob/main/docs/ui-workshop.md#manual-steps-after-inject
+        to finalize configuration for this preset.
+  `.trim()
+    )
+  )
+}
+
+function files(): FromTo[] {
+  return [
+    {from: ['workshop.config.ts'], to: ['workshop.config.ts']},
+    {from: ['src', 'CustomField.tsx'], to: ['src', 'CustomField.tsx']},
+    {from: ['src', '__workshop__', 'index.tsx'], to: ['src', '__workshop__', 'index.tsx']},
+    {from: ['src', '__workshop__', 'props.tsx'], to: ['src', '__workshop__', 'props.tsx']},
+  ].map((fromTo) => ({
+    ...fromTo,
+    from: ['ui-workshop', ...fromTo.from],
+  }))
+}
+
+async function updateGitIgnore(options: InjectOptions) {
+  const {basePath} = options
+  const gitignorePath = path.join(basePath, '.gitignore')
+  let gitignore = (await readFile(gitignorePath, 'utf8').catch(errorToUndefined)) ?? ''
+  const value = '.workshop'
+  if (gitignore.includes(value)) {
+    return
+  }
+
+  gitignore += `\n\n${value}`
+  await writeFile(gitignorePath, gitignore, {encoding: 'utf8'})
+}
+
+async function addDevDependencies(options: InjectOptions) {
+  const pkg = await getPackage(options)
+  const devDeps = sortKeys({
+    ...pkg.devDependencies,
+    ...(await devDependencies()),
+  })
+  const newPkg = {...pkg}
+  newPkg.devDependencies = devDeps
+  await writePackageJsonDirect(newPkg, options)
+  log.info('Updated devDependencies.')
+}
+
+async function devDependencies(): Promise<Record<string, string>> {
+  return resolveLatestVersions([
+    '@sanity/ui-workshop',
+    '@sanity/icons',
+    '@sanity/ui',
+    'react',
+    'react-dom',
+    'styled-component',
+  ])
+}