@sanity/ui-workshop
v2.0.16 sanity ui design design system prototyping testing qa
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/icons @sanity/ui react react-dom styled-components
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>
)
}
License
npm i @sanity/ui-workshop
Metadata
- MIT
- Whatever
- Sanity.io
- released 7/29/2024
Downloads
Maintainers
tiit.kass.saity, christianhg, joan_miralles_paez, jwoods-sanity, armandocerna, daniel.malmer, jordanl17, tambet, jtpetty, drewsanity, refiito, sergeisarviro, ash, indrek.karner, cngonzalez-sanity, rdunk, rneatherway-sanity, ricokahler, pedro-sanity, jonabc, kenjonespizza, pauloborgesf, binoy14, simen.svale, svirs, josh_sanity_io, joneidejohnsen, nina.andal, rankers, snorreeb, mattcraig, vincentquigley, stipsan, michael-sanity, rubioz, tonina, ritasdias, simeonsanity, kmelve, bjoerge, rexxars, skogsmaskin, robinpyon, mariuslundgard, sanity-io, evenw, radhe_sanity, rbotten, judofyr, obliadp, dcilke, fredcarlsen, hermanw, sgulseth, atombender,