vrizo / uibook Goto Github PK

I get an error if the page name is typed in non-Latin letters:

page-select.js:19 Uncaught TypeError: Cannot read property 'join' of null
    at Object.optionFromPage (page-select.js:19)
    at Object.eval (page-select.js:26)
    at Array.map (<anonymous>)
    at Object.render (page-select.js:24)

Code:

const ButtonUibook = {
  name: 'Звонок',
  component: CallPreview,
  cases: [
    () => (
      <UibookCase props={{ ...PROPS }} />
    )
  ]
}

Hey. Thank you for the work you do.

In my project, I use UIBook for system design. Now part of the system is moving to Svelte 3, and I want to use the new components in the proven UIBook.

Maybe we can update UIBook so that it supports other frameworks?

I try use the uibook with project based on create-react-app. Dev server starts ok, but page /uibook is empty/white. Console is clear (no errors).

My steps:

• npx create-react-app .
• npm run eject
• yarn add uibook
• add test files as in example Quick Install
• add plugin to webpack config
• yarn start

Versions:

"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1",
"uibook": "^0.5.1"

P.S. sometimes an error occurs webpackHotUpdate is not defined - I think this is not the main problem.

Hi, we have problem with compilation in project based on old CRA (on new project with updated CRA it does not reproduce).
Error looks like TypeError: compilation.entrypoints.forEach is not a function
I`ve created PR to you with fix this bug #9

I found that popup is below the header.

How to make live-reload on uibook page when changing files?

Привет.
Хочу помочь в развитии проекта. Какие задачи ты видишь приоритетными? С чем можно помочь?

I think %IMPORTS%-block should be placed inside tag body. It will be more convenient.

Error: Cannot find module 'webpack/lib/MultiEntryPlugin'

File: /plugin.js
let MultiEntryPlugin = require('webpack/lib/MultiEntryPlugin')

As I understand Webpack 5 doesn`t use MultiEntryPlugin anymore.

src

• Button.js
• uibook
  • button.uibook.js
  • uibook-controller.js

Button.js

import React, { Component } from 'react';
class Button extends Component {
  render () {
    return (
      <button
        style={{
          background: '#FF7E79',
          padding: '5px 15px',
          border: 'none'
        }}
      >{ this.props.text }</button>
    );
  }
}
export default Button;

button.uibook.js

import UibookCase from 'uibook/case';
import Button from '../button.js';
import React from 'react';

export default {
  background: 'light',
  component: Button,
  cases: [
    () => <UibookCase props={{ text: 'Button' }}></UibookCase>,
    () => <UibookCase props={{  text: 'Button 2' }}></UibookCase>
  ]
}

uibook-controller.js

import UibookStarter from 'uibook/starter';
import ButtonUibook from './button.uibook.js';

export default UibookStarter({
  pages: {
    Button: ButtonUibook
  }
})

Changes in webpack.config.js
in plugins:

new UibookPlugin({
        isFixedHeader: true,
        controller: path.join(__dirname, '../src/uibook/uibook-controller.js'),
        outputPath: '/uibook',
        title: 'Uibook',
        hot: true
      }),
new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            inject: true,
            template: paths.appHtml,
            excludeChunks: ['uibook'] // added this line
          },
          isEnvProduction
            ? {
                minify: {
                  removeComments: true,
                  collapseWhitespace: true,
                  removeRedundantAttributes: true,
                  useShortDoctype: true,
                  removeEmptyAttributes: true,
                  removeStyleLinkTypeAttributes: true,
                  keepClosingSlash: true,
                  minifyJS: true,
                  minifyCSS: true,
                  minifyURLs: true,
                },
              }
            : undefined
        )
      )

Change in output:
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/[name].js'// changed bundle to [name]

Versions:
"react": "^16.13.1",
"react-dom": "^16.13.1",
"uibook": "^0.6.1",
"webpack": "4.42.0"

Error in console
WebsocketClient.js:39 Uncaught DOMException: Failed to construct 'WebSocket': The URL '/sockjs-node' is invalid.
at new WebsocketClient (http://localhost:3000/static/js/1.chunk.js:10180:20)
at initSocket (http://localhost:3000/static/js/1.chunk.js:10565:12)
at Object. (http://localhost:3000/static/js/1.chunk.js:10402:1)
at Object../node_modules/webpack-dev-server/client/index.js?/ (http://localhost:3000/static/js/1.chunk.js:10403:30)
at webpack_require (http://localhost:3000/static/js/runtime-uibook.js:785:30)
at fn (http://localhost:3000/static/js/runtime-uibook.js:151:20)
at Object.2 (http://localhost:3000/static/js/uibook.chunk.js:149:1)
at webpack_require (http://localhost:3000/static/js/runtime-uibook.js:785:30)
at checkDeferredModules (http://localhost:3000/static/js/runtime-uibook.js:46:23)
at Array.webpackJsonpCallback [as push] (http://localhost:3000/static/js/runtime-uibook.js:33:19)

Может ли кто сделать пример для nextjs ?

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>