@s-ui/studio
Develop, maintain and publish your SUI components.
Last updated 2 days ago by schibstedspain .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @s-ui/studio 
SYNC missed versions from official npm registry.

sui-studio

Develop, maintain, and publish your SUI components.

Sui Studio helps you develop and document isolated UI components for your projects. It provides,

  • Isolated development of components
  • A unified development platform
  • Productivity improvement, focusing on component-development experience
  • Live demos with auto-generated playgrounds
  • Catalog of components generated from live demos and markdown docs.

Installation

npm install @s-ui/studio

Getting Started

In case you want to create a new studio, check out sui-studio-create

Once you're in a new project, execute sui-studio start to start the development browser and work on your components.

Common Workflow

To create a new component, execute the component-scaffolding command.

$ npx sui-studio generate house window

To develop the new component,

1) Launch the development environment

$ npx sui-studio dev house/window

2) Go to http://localhost:3000

3) Commit changes using the appropiate command

First of all, stage you changes for commit with git add or whatever you use.

DO NOT use git commit directly. Instead, use:

$ npm run co

Add the script to your package.json

{
  "scripts": {
    "co": "sui-studio commit"
  }
}

It will prompt a question form. The way you answer to this question form affects the way the commit's comment is built. Comments will be used later, after merging to master in order to decide what kind of change (release) is going to be applied (minor or major).

Then just push your changes using git push and merge them into master after review.

4) Release

Select master branch. First, check that the release will be properly built by executing,

$ sui-studio check-release

If the output is the expected one, then run:

$ sui-studio release

CLI

$ sui-studio start

Launch a development environment where you can see all your components at once. If there are too many components, use the devcommand.

sui-studio build

Build a static version of a web app aimed to be deployed, where you will be able to interact with all components. The interface will be the same you use for the start command, only this one is optimized for production.

$ sui-studio dev

Launch a development environment where you can work in total isolation on your component.

Testing

Test the studio's components both in the demo as in the development environment. Currently in experimental mode

Here's an example of what could go inside test/[category]/[component]/index.js:

/* eslint react/jsx-no-undef:0 */
/* global AtomButton */

import React from 'react'

import chai, {expect} from 'chai'
import chaiDOM from 'chai-dom'
import {render} from '@testing-library/react'

chai.use(chaiDOM)

describe('AtomButton', () => {
  it('Render', () => {
    const {getByRole} = render(<AtomButton>HOLA</AtomButton>)
    expect(getByRole('button')).to.have.text('HOLA')
  })
})

The component will be a global object when running tests, so it is PARAMOUNT NOT to import it. In order to avoid problems with the linter, add relevant comments, as in the example above.

How works with different contexts

If there is a demo/context.js file where you define several contexts for your components. You have to apply a patch to Mocha to allow setup describe by context. This allows you to have a "contextify" version of your component, for the context selected.

First, you have to import the patcher to create the context object, inside the describe object

import '@s-ui/studio/src/patcher-mocha'

After that, you can use the describe.context object to has a key by every context definition in your demo/context.js file.

For example, if your context.js file looks like:

export default () => {
  return Promise.resolve({
    default: {
      user: {id: 12},
      language: 'es'
    },
    other: {
      user: {id: 34},
      language: 'ca'
    }
  })
}

the test file should be like:

import '@s-ui/studio/patcher-mocha'

chai.use(chaiDOM)

describe.context.default('atom/button', AtomButton => {
  it('Render', () => {
    const {getByText} = render(<AtomButton>HOLA</AtomButton>)
    expect(getByText('HOLA')).to.have.text('HOLA 12')
  })
})

describe.context.other('atom/button', AtomButton => {
  it('Render', () => {
    const {getByText} = render(<AtomButton>HOLA</AtomButton>)
    expect(getByText('HOLA')).to.have.text('HOLA 34')
  })
})

Known issue: Test a memoized component

If a component is exported wrapped memoized: export default React.memo(Component), it loses the displayName and sui-test dispatch an Error because it couldn't find the component.

If you need to make a test using a memoized component, just wrap it like:

const Component = React.memo(() => <></>)
Component.displayName = 'Component'

export default Component

or

const Component = () => <></>
Component.displayName = 'Component'

const MemoComponent = React.memo(Component)
MemoComponent.displayName = 'MemoComponent'

export default MemoComponent

File structure

SUIStudio profusely uses the concept of "convention over configuration" for file structure.

.
├── components
│   ├── README.md
│   └── atom                                <- Component's category
│       ├── button                          <- Component's name
│       │   ├── README.md
│       │   ├── package.json
│       │   └── src
│       │       ├── index.js
│       │       └── index.scss
│       └── header
│           ├── README.md
│           ├── package.json
│           └── src
│               ├── index.js
│               └── index.scss
├── demo
│   └── atom
│       ├── button
│       │   ├── context.js
│       │   ├── playground                <- Basic code that will be shown in the component's demo
│       │   └── themes                    <- SASS files stored in this folder will be themes shown on the interface
│       │       └── myStudioTheme.scss
│       └── header
│           └── demo                      <- Create a `demo` folder to put an demo app of your component (playground will be ignored)
│               ├── index.js
│               ├── index.scss
│               └── package.json
├── package.json
└── test
    └── atom
        ├── button
        │   └── index.js                 <- File containing all component's tests
        └── header
            └── index.js

Conventions

Naming

lowerCamelCase is the choice for directories and files.

components/house/mainWindow/...

Current Tags

  • 8.9.0-beta.0                                ...           beta (15 days ago)
  • 8.12.0                                ...           latest (2 days ago)

122 Versions

  • 8.12.0                                ...           2 days ago
  • 8.10.0                                ...           9 days ago
  • 8.9.0-beta.0                                ...           15 days ago
  • 8.9.0                                ...           16 days ago
  • 8.8.0                                ...           a month ago
  • 8.7.0                                ...           a month ago
  • 8.6.0                                ...           a month ago
  • 8.5.0                                ...           a month ago
  • 8.4.0                                ...           a month ago
  • 8.4.0-beta.0                                ...           a month ago
  • 8.3.0                                ...           a month ago
  • 8.2.0                                ...           a month ago
  • 8.1.0                                ...           a month ago
  • 8.0.0                                ...           a month ago
  • 7.33.0                                ...           a month ago
  • 7.32.0                                ...           a month ago
  • 7.31.0                                ...           2 months ago
  • 7.30.0                                ...           2 months ago
  • 7.29.0                                ...           2 months ago
  • 7.28.0                                ...           2 months ago
  • 7.27.0                                ...           2 months ago
  • 7.26.0                                ...           3 months ago
  • 7.25.0                                ...           4 months ago
  • 7.21.0                                ...           4 months ago
  • 7.20.0-beta.0                                ...           4 months ago
  • 7.20.0                                ...           4 months ago
  • 7.19.0                                ...           4 months ago
  • 7.18.0                                ...           4 months ago
  • 7.17.0                                ...           4 months ago
  • 7.16.0                                ...           4 months ago
  • 7.15.0                                ...           4 months ago
  • 7.14.0-beta.0                                ...           4 months ago
  • 7.14.0                                ...           4 months ago
  • 7.13.0-beta.3                                ...           4 months ago
  • 7.13.0-beta.2                                ...           4 months ago
  • 7.13.0-beta.1                                ...           4 months ago
  • 7.13.0-beta.0                                ...           4 months ago
  • 7.13.0                                ...           4 months ago
  • 7.12.0                                ...           4 months ago
  • 7.11.0                                ...           4 months ago
  • 7.10.0                                ...           4 months ago
  • 7.9.0                                ...           5 months ago
  • 7.8.0                                ...           5 months ago
  • 7.7.0                                ...           5 months ago
  • 7.6.0-beta.0                                ...           6 months ago
  • 7.6.0                                ...           7 months ago
  • 7.5.0                                ...           8 months ago
  • 7.4.0                                ...           9 months ago
  • 7.3.0                                ...           a year ago
  • 7.2.0                                ...           a year ago
  • 7.1.0                                ...           a year ago
  • 7.0.0                                ...           a year ago
  • 6.10.0                                ...           a year ago
  • 6.9.0                                ...           a year ago
  • 6.8.0                                ...           a year ago
  • 6.7.0                                ...           a year ago
  • 6.6.0                                ...           a year ago
  • 6.5.0                                ...           a year ago
  • 6.4.0                                ...           a year ago
  • 6.3.0                                ...           a year ago
  • 5.19.0-beta.6                                ...           a year ago
  • 5.19.0-beta.5                                ...           a year ago
  • 6.1.0                                ...           a year ago
  • 6.0.0                                ...           a year ago
  • 5.19.1-beta.0                                ...           a year ago
  • 5.19.0-beta.4                                ...           a year ago
  • 5.19.0-beta.2                                ...           2 years ago
  • 5.19.0-beta.1                                ...           2 years ago
  • 5.19.0-beta.0                                ...           2 years ago
  • 5.18.0                                ...           2 years ago
  • 5.17.0                                ...           2 years ago
  • 5.16.0                                ...           2 years ago
  • 5.15.0                                ...           2 years ago
  • 5.14.0                                ...           2 years ago
  • 5.13.0                                ...           2 years ago
  • 5.12.0                                ...           2 years ago
  • 5.11.0                                ...           2 years ago
  • 5.10.0                                ...           2 years ago
  • 5.9.0                                ...           2 years ago
  • 5.8.0                                ...           2 years ago
  • 5.7.0                                ...           2 years ago
  • 5.7.0-beta.11                                ...           2 years ago
  • 5.7.0-beta.10                                ...           2 years ago
  • 5.7.0-beta.9                                ...           2 years ago
  • 5.7.0-beta.8                                ...           2 years ago
  • 5.7.0-beta.7                                ...           2 years ago
  • 5.7.0-beta.6                                ...           2 years ago
  • 5.7.0-beta.5                                ...           2 years ago
  • 5.7.0-beta.4                                ...           2 years ago
  • 5.7.0-beta.3                                ...           2 years ago
  • 5.7.0-beta.2                                ...           2 years ago
  • 5.7.0-beta.1                                ...           2 years ago
  • 5.7.0-beta.0                                ...           2 years ago
  • 5.6.0                                ...           2 years ago
  • 5.5.0                                ...           2 years ago
  • 5.4.0                                ...           2 years ago
  • 5.3.0                                ...           2 years ago
  • 5.2.0                                ...           2 years ago
  • 5.1.0                                ...           2 years ago
  • 5.0.0                                ...           2 years ago
  • 4.44.0                                ...           2 years ago
  • 4.43.0                                ...           2 years ago
  • 4.42.0                                ...           2 years ago
  • 4.41.0                                ...           2 years ago
  • 4.40.0                                ...           2 years ago
  • 4.39.0                                ...           2 years ago
  • 4.38.0                                ...           2 years ago
  • 4.37.0                                ...           3 years ago
  • 4.36.0                                ...           3 years ago
  • 4.35.0                                ...           3 years ago
  • 4.34.0                                ...           3 years ago
  • 4.31.0                                ...           3 years ago
  • 4.30.0                                ...           3 years ago
  • 4.29.0                                ...           3 years ago
  • 4.29.0-beta.2                                ...           3 years ago
  • 4.29.0-beta.1                                ...           3 years ago
  • 4.29.0-beta.0                                ...           3 years ago
  • 4.28.0                                ...           3 years ago
  • 4.27.0                                ...           3 years ago
  • 4.24.0                                ...           3 years ago
  • 4.23.1                                ...           3 years ago
  • 4.23.0                                ...           3 years ago
Downloads
Today 0
This Week 15
This Month 15
Last Day 2
Last Week 40
Last Month 313
Dev Dependencies (0)
None

Copyright 2014 - 2017 © taobao.org |