Some use cases

[TuxGit]

Hi, vrizo!)

We started use uibook and have some questions about following use cases:

1. How to display colors, as done by amplifr (https://amplifr.com/uikit/#Colors:ru)? I did not find in the doc examples

2. How to make a dummy placeholder as done on https://amplifr.com/uikit/#DateRangePicker:ru ? for example, I have a dropdown that opens to the left and is displayed behind the screen at the current location. It would be nice to be able to position an element with an offset (possibly in a grid)

3. How to add complex components like Tab or Dropdown to uibook ? In example https://amplifr.com/uikit/#Tabs:ru I see sections without Case component, only titles. How can I do this? And are we going to work in this direction to display complex components with child props? Components something like:

   <Dropdown props={{}}>
   <DropdownMenu>
   <DropdownItem title="desciption">Item 1</DropdownItem>
   <DropdownItem title="desciption">Item 2</DropdownItem>
   </DropdownMenu>
   </Dropdown>

[vrizo]

Hi, @TuxGit !

How to display colors, as done by amplifr

It is a quite rare use-case :) We keep colors in JSON file, so we can import them and create cases. Also, it is possible to declare a small component in the Uibook file.

let colors = require('../postcss/colors.json')['custom-properties']

const Example = styled.div`
  width: 280px;
  height: 30px;
  padding: 0 10px;
  font-family: monospace;
  font-size: 12px;
  line-height: 30px;
  border: 2px solid white;
`

export default {
  name: 'Colors',
  background: 'white',
  cases: Object.keys(colors).map(name => {
    return () => h(UibookCase, {
      example: `var(${ name })`,
      key: name
    }, [
      h(Example, {
        style: { … }
      }, [colors[name]])
    ])
  })
}

It may look strange because we use Hyperscript. You can replace h with React.createElement or use JSX.

How to make a dummy placeholder

The same way applied here. Create a component inside of Uibook test and render it:

let Shifted = styled.div`
  padding-left: 60px;
`
…

  cases: [
    () => h(UibookCase, {
      example: 'h(DateRangePicker, { … })'
    }, [
      h(Shifted, [h(DateRangePicker, PROPS)])
    ]),
  ]

How to add complex components like Tab or Dropdown to uibook display complex components with child props

In this Case I add Tabs as component and pass Tab as props. You can display components with child props like this:

export default {
  component: Tabs,
  name: 'Tabs',
  cases: [
    () => h(UibookCase, {
      example: 'Check horizontal scrolling: Lots of Tabs'
    }, [
      h(Tab, { key: 1, title: 'Dogs' }, ['Woof']),
      h(Tab, { key: 2, title: 'Cats' }, ['Meow']),
      h(Tab, { key: 3, title: 'Bird' }, ['Tweet']),
      h(Tab, { key: 4, title: 'Mouse' }, ['Squeek'])
    ])
  ]
}

I see sections without Case component, only titles

I'm not sure what do you mean. Let me try to guess:

1. Code example renders in desktop cases only. Mobile (iframe) cases don't render examples;
2. Also, you can pass a custom example using example prop in UibookCase.

---

Thanks for your questions! I'll try to simplify the configuration process and provide more examples in docs :)

[TuxGit]

@vrizo, Thx for the answer!

1. About colors Attribute example - exactly what is needed (as I see in the source code there is a text attr for children).

But there was a problem that I had to duplicate the color keys as js object. We use the astroturf lib with :root { --css-values } and don't know yet how render from js/json theme values. If you have any ideas, I would be very happy.

2. Dummy placeholder Its works! I used Shifted (fake) component as "default" component. Just thought that in the default component you need to specify the real component.

3. Complex components In addition to the answer. we can use the text attribute to describe an example for children.

4. I see sections without Case component, only titles

I'm not sure what do you mean. Let me try to guess:

1. Code example renders in desktop cases only. Mobile (iframe) cases don't render examples;
2. Also, you can pass a custom example using example prop in UibookCase.

Yes, I did not understand that there is an attribute example to write my text.

[vrizo]

Glad to help, @TuxGit !

We use the astroturf lib with :root { --css-values } and

Yes, it is a great solution! We use astroturf plus postcss-custom-properties plugin to process color variables:

plugins: [
  require('postcss-custom-properties')({
    importFrom: path.join(__dirname, 'colors.json')
  })
]

[TuxGit]

@vrizo , sorry for offtop here

postcss-custom-properties

oh, this is not exactly what I need (very close). I want save css variables without replacement to change the theme by changing variables. googled the old note, wich not work with latest postcss (https://github.com/amobiz/postcss-json-properties). May be need to run this postcss plugin without compiling app, but first try was bad( If I import css file from exportTo my app (on yarn start) looping.

P.S. astroturf I think has bug with names like in uibook examples (many dots)

//  colors.uibook.js
const Shifted = styled.div`
  margin-left: 200px;`;

// result css class ".colors.uibook-Shifted_cls1__vkPxd" not applied to
// <div class="colors.uibook-Shifted_cls1__vkPxd">

[vrizo]

Hi, @TuxGit !

Sorry for the long answer.

I asked @ai to help with the case. We've come to the conclusion that the best solution is to use postcss-export-vars. You can generate JSON file while starting a webpack using this plugin.

astroturf I think has bug with names like in uibook examples

Hmm, I have no such a problem. It is joined by - in my case. I think it is better to ask astroturf developers :)

[vrizo]

Hey, @TuxGit ! Have you tried the postcss-export-vars? ^

[TuxGit]

Hi, @vrizo !

postcss-export-vars is what I need, but have a problem. And sadly for the good project is not updating, last commit was 3 years ago.

When I use this plugin with UibookPlugin:

• on webpack start variable-file is filling
• when dev server started valiable-file is empty o_O

I can use postcss-cli, for example =)

my project deps: react, typescript, astroturf, uibook,

[vrizo]

Hey, @TuxGit ! Sorry for the long answer. Have you solved the problem?

[TuxGit]

Hey, @vrizo !)

There are inconveniences, but overall, it works. Thx