Sanity UI Workshop

An environment for designing, reviewing, and quality-testing React components.

# Install `@sanity/ui-workshop` as dev dependency
npm install @sanity/ui-workshop -D

# Install peer dependencies
npm install @sanity/ui react react-dom

Basic usage

Add a workshop.config.ts (or .js) in the root of your project:

import {defineConfig} from '@sanity/ui-workshop'

export default defineConfig({
  title: 'My UI Workshop',
})

Start the workshop

workshop dev

workshop will automatically find workshop "scopes" by searching for files mathing these patterns:

• src/**/__workshop__/index.js
• src/**/__workshop__/index.jsx
• src/**/__workshop__/index.ts
• src/**/__workshop__/index.tsx

Define your first workshop scope by creating src/__workshop__/index.tsx:

import {
  defineScope,
  useBoolean,
  useNumber,
  useSelect,
  useString,
  useText,
} from '@sanity/ui-workshop'

export default defineScope({
  name: 'test',
  title: 'Test',
  stories: [
    {
      name: 'test',
      title: 'Test',
      component: TestStory,
    },
  ],
})

const options = {
  None: '',
  Small: 'sm',
  Medium: 'md',
  Large: 'lg',
}

function TestStory() {
  const text = useText('Text', 'Hello, world')
  const boolean = useBoolean('Boolean', true)
  const number = useNumber('Number', 1234)
  const string = useString('String', '...')
  const option = useSelect('Select option', options)

  return (
    <div>
      <h1>This is my first story.</h1>
      <p>Some text: {text}</p>
      <p>A boolean: {boolean ? 'true' : 'false'}</p>
      <p>A number: {number}</p>
      <p>A string: {string}</p>
      <p>An option: {option}</p>
    </div>
  )
}

Styling

In addition to the CSS features that vite supports, you can also use Vanilla Extract for styling.

First install the @vanilla-extract/css package:

npm install @vanilla-extract/css

Then, add a style.css.ts file for your workshop:

// src/__workshop__/style.css.ts

import {style} from '@vanilla-extract/css'

export const container = style({
  display: 'grid',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100%',
  width: '100%',
})

And finally, import the container className and use it in your workshop:

import {
  defineScope,
  useBoolean,
  useNumber,
  useSelect,
  useString,
  useText,
} from '@sanity/ui-workshop'
+import {container} from './style.css'

export default defineScope({
  name: 'test',
  title: 'Test',
  stories: [
    {
      name: 'test',
      title: 'Test',
      component: TestStory,
    },
  ],
})

const options = {
  None: '',
  Small: 'sm',
  Medium: 'md',
  Large: 'lg',
}

function TestStory() {
  const text = useText('Text', 'Hello, world')
  const boolean = useBoolean('Boolean', true)
  const number = useNumber('Number', 1234)
  const string = useString('String', '...')
  const option = useSelect('Select option', options)

  return (
-    <div>
+    <div className={container}>
      <h1>This is my first story.</h1>
      <p>Some text: {text}</p>
      <p>A boolean: {boolean ? 'true' : 'false'}</p>
      <p>A number: {number}</p>
      <p>A string: {string}</p>
      <p>An option: {option}</p>
    </div>
  )
}

License

MIT