2.0.16 • Published 11 months ago

@sanity/ui-workshop v2.0.16

Weekly downloads
-
License
MIT
Repository
github
Last release
11 months ago

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

npm version

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

MIT

2.0.15

1 year ago

2.0.16

11 months ago

2.0.14

1 year ago

2.0.13

1 year ago

2.0.12

1 year ago

2.0.11

1 year ago

2.0.9

1 year ago

2.0.8

1 year ago

2.0.10

1 year ago

2.0.7

1 year ago

2.0.5

1 year ago

2.0.4

1 year ago

2.0.6

1 year ago

1.2.7

2 years ago

1.2.6

2 years ago

1.2.5

2 years ago

2.0.3

2 years ago

2.0.2

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

1.2.10

2 years ago

1.2.11

2 years ago

1.2.9

2 years ago

1.2.4

2 years ago

1.2.3

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.2.0

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.1.8

2 years ago

1.1.7

2 years ago

1.1.6

2 years ago

1.1.5

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.1.2

2 years ago

1.0.1

3 years ago

1.0.0

3 years ago

0.6.2-next.36

3 years ago

0.6.2-next.30

3 years ago

1.0.0-beta.11

3 years ago

1.0.0-beta.12

3 years ago

1.0.0-beta.10

3 years ago

1.0.0-next.3

3 years ago

1.0.0-beta.13

3 years ago

1.0.0-beta.2

3 years ago

1.0.0-beta.3

3 years ago

1.0.0-beta.4

3 years ago

1.0.0-beta.5

3 years ago

1.0.0-beta.0

3 years ago

1.0.0-beta.1

3 years ago

1.0.0-beta.6

3 years ago

1.0.0-beta.7

3 years ago

1.0.0-beta.8

3 years ago

1.0.0-beta.9

3 years ago

0.6.1-next.4

3 years ago

0.6.1-next.14

3 years ago

0.6.1-next.16

3 years ago

0.5.2-next.4

3 years ago

0.5.0

3 years ago

0.5.1

3 years ago

0.6.1-next.22

3 years ago

0.6.2-next.10

3 years ago

0.4.17

3 years ago

0.4.16

3 years ago

0.6.2-next.5

3 years ago

0.6.2-next.18

3 years ago

0.6.1

3 years ago

0.6.0

3 years ago

0.4.9

3 years ago

0.4.8

3 years ago

0.4.9-next.6

3 years ago

0.4.9-next.5

3 years ago

0.4.15-next.8

3 years ago

0.4.10

3 years ago

0.4.15

3 years ago

0.4.13

3 years ago

0.4.14

3 years ago

0.4.11

3 years ago

0.4.12

3 years ago

0.4.5

3 years ago

0.4.7

3 years ago

0.4.6

3 years ago

0.4.4

3 years ago

0.4.3

3 years ago

0.4.2

3 years ago

0.3.16-next.19

3 years ago

0.4.1

3 years ago

0.4.0

3 years ago

0.3.15

3 years ago

0.3.16-next.18

3 years ago

0.3.14

3 years ago

0.3.13

3 years ago

0.3.12

3 years ago

0.3.11

3 years ago

0.3.10

3 years ago

0.3.9

4 years ago

0.3.8-next.1

4 years ago

0.3.8

4 years ago

0.3.7

4 years ago

0.3.6

4 years ago

0.3.5-next.12

4 years ago

0.3.5-next.13

4 years ago

0.3.5

4 years ago

0.3.4

4 years ago

0.3.3

4 years ago

0.3.2

4 years ago

0.3.0

4 years ago

0.3.1

4 years ago

0.2.6

4 years ago

0.2.5

4 years ago

0.2.4

4 years ago

0.2.3

4 years ago

0.2.2-next.19

4 years ago

0.2.2

4 years ago

0.2.2-next.21

4 years ago

0.2.2-next.2

4 years ago

0.2.2-next.1

4 years ago

0.2.1

4 years ago

0.2.0

4 years ago

0.1.25

4 years ago

0.1.24

4 years ago