feat: added ui-workshop preset

Author: snorrees

.eslintignore

@@ -9,3 +9,4 @@ babel
 *.js
 v2-incompatible.js.template
 *.json
+assets/

README.md

@@ -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
 

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>
+  )
+}

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')),
+    },
+  ],
+})

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>
+  )
+}

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

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

docs/ui-workshop.md

@@ -0,0 +1,26 @@
+# Preset: ui-workshop
+
+## Usage
+
+### Inject into existing package
+`npx @sanity/plugin-kit inject --preset-only --preset ui-workshop`
+
+### Use to init plugin
+`npx @sanity/plugin-kit init --preset ui-workshop <new-plugin-name>`
+
+## What does it do?
+
+Sets up your package with [@sanity/ui-workshop](https://github.com/sanity-io/ui-workshop),
+to make component testing a breeze.
+
+- Adds [@sanity/ui-workshop](https://github.com/sanity-io/ui-workshop) dev dependency.
+- Adds a example files for testing components using @sanity/ui-workshop
+- Adds .workshop to .gitignore
+- 
+## Manual steps after inject
+
+* Run `npm i` to install dependencies.
+* Start the workshop with `workshop dev`.
+* Put your plugin/package components into workshop to test them.
+* Refer to @sanity/ui-workshop [README](https://github.com/sanity-io/ui-workshop#basic-usage) for more.
+