jx3box / jx3box-ui-react

React Jx3box-common-ui. Serve for Jx3Box react projects.

Jx3box-ui-react

为dps计算器等其它react前端业务线做准备

需要对公共组件生产一个react版本

首批只移植重要的几个模块

原vue2版本 https://github.com/JX3BOX/jx3box-common-ui

Install

npm install @jx3box/jx3box-ui-react

yarn add @jx3box/jx3box-ui-react

Usage

import { Layout } from '@jx3box/jx3box-ui-react';

const App = () => (
     <Layout>
        <Header />
        <Breadcrumb 
            name='频道名称' 
            slug='slug' 
            root='/slug' 
            logo={<Jx3Logo />}
        >
            bread info
        </Breadcrumb>

        <LeftSidebar>
            left sidebar content
        </LeftSidebar>

        <Main>
            <Thx 
                postType='tool'
                postId={31129} 
                userId={59236} 
            />
            <RightSidebar>
                RightSidebar content
            </RightSidebar>
            <Footer />
        </Main>
    </Layout>
);

Layout

请确保 Layout 组件在最外层

因为 LeftSidebar, RightSidebar, Main, BreadCrumb 等会影响

页面布局的组件需要被 Layout 组件包裹才能正确计算相应的 css

• Layout: 总布局容器 内部实现Jx3BoxContext计算布局尽量放在最外层渲染

• LeftSidebar: 左侧边栏 自带收放功能和默认样式 放在 Layout 内部才能正确计算

• Main: 主显示区域 放在 Layout 内部才能正确计算

• RightSidebar: 右侧边栏触发小屏时激活流式布局 放在 Layout 内部才能正确计算

代码演示

import { Layout, BreadCrumb } from '@jx3box/jx3box-ui-react';

const { LeftSidebar, RightSidebar, Main } = Layout;

export default () => (
    <Layout>
        <Breadcrumb name='频道名称' slug='slug' root='/slug'>
            bread content
        </Breadcrumb>

        <LeftSidebar>
            LeftSidebar content
        </LeftSidebar>

        <Main>
            <RightSidebar>
                RightSidebar content
            </RightSidebar>
        </Main>
    </Layout>
);

Breadcrumb

魔盒面包屑组件

请确保被 Layout 组件包裹

代码演示

import { Layout, Breadcrumb } from '@jx3box/jx3box-ui-react';

export default () => (
    <Layout>
        <Breadcrumb 
            name='频道名称'
            slug='slug' 
            root='/slug' 
            logo={<Jx3Logo />} 
        >
            custom breadcrumb info
        </Breadcrumb>
    </Layout>
);

props	detail	type	default
name	面包屑标题	string	-
root	点击面包屑标题跳转的链接	string	-
slug	组装发布按钮的请求地址	string	-
logo	logo图片	ReactNode	-
crumbEnable	是否显示 crumbBE 组件	boolean	undefined
publishEnable	是否显示发布按钮	boolean	true
feedbackEnable	是否显示反馈按钮	boolean	true

Thx

功能区组件

代码演示

import { Layout, Header } from '@jx3box/jx3box-ui-react';

export default () => (
    <Thx postId={31129} postType='tool' userId={59236} />
);

props	detail	type	default
postType	文章类型	string or number	-
postId	文章id	string or number	-
userId	发布文章的作者id	string or number	-

Header

魔盒公共头部组件

请确保被 Layout 组件包裹

代码演示

import { Layout, Header } from '@jx3box/jx3box-ui-react';

export default () => (
    <Layout>
        <Header />
    </Layout>
);

Footer

魔盒公共底部组件

代码演示

import { Footer } from '@jx3box/jx3box-ui-react';

export default () => (
    <Layout>
        <Footer/>
    </Layout>
);

开发相关

StoryBook 查看组件库

npm run storybook

本地开发

npm run dev

jx3box-ui-react's Issues

魔盒前端公共组件

为dps计算器等其它react前端业务线做准备，需要对公共组件生产一个react版本。

首批只移植重要的几个模块
原vue2版本 https://github.com/JX3BOX/jx3box-common-ui

全局模块

• #2
• #3
• #5
• #4
• #6

其他cms栏目，会暂时继续沿用vue2，后续持续将vue3模块补齐。
而react项目只涉及应用类型，只移植应用需要用到的模块

[JBR] Improve header-box and provider init

[JBR] Wrong npm publish flow

�We should run npm run build.
And we should publish build folder.

[JBR] Add components storybook.

[JBUR] Rebuild common footer

[JBR] Add documents

[BUG]box与nav数据

目前将data/box.json 与 box/nav.json的初始数据已更新，保持和旧版vue2项目一致。
此外，vue2中的nav昨日也做了小修复。
即例如“竞技”栏目，status=1，但是仅在正式服展示（clients不包含origin），所以在怀旧服情况下，也需要隐藏对应项目。 JX3BOX/jx3box-common-ui@ee09ae9

目前从storybook看，nav数据异常。

[JBUR] Rebuild common header (Major event)

[JBR] Rebuild Breadcrumb

[JBR] Update jx3-common version

Old @jx3box/jx3box-common will pack Vue and Element-Ui
Should update version and check new bundle size.

[JBUR] Add storybook.

A story captures the rendered state of a UI component.
Supported react and typescript

[JBR-Improve-Provider] Improve provider to only one major provider

Merge Jx3BoxLayoutContext, Jx3BoxContext and Jx3BoxUserContext to one Context
And Wapper with Layout component

[JBR] Improve entry

Use src/index.esm.ts for react project entry
So we need remove alias plugin and test for that

[JBR] Add BreadAdmin component

[JBR] Add vite build way

[JBR] Remove inline-svg.

[JBR] Add hasLeftSidebar field to breadcrumb

In breadcrumb below menu-control should always shown when has leftSidebar
So add a field to layout-context

<div className='u-menu' onClick={toggle}>
          <Menu />
        </div>

[JBR] Build React RightSidebar

[JBR] Improve provider component

should move changeJx3BoxClient to provider.ts not utils.ts

header bugs

错误修复

展开个人菜单的错误

[JBUR] Initialize project

• Add pack config (webpack or rollup)
• Create basic folder

[JBR] Build React LeftSidebar

[JBR] Rebuild Thx

[JBR] Build layout main component

We should build layout module like this. So add a main component

<>
    <Header />
    <Layout>
      <LeftSidebar>
        <LeftSidebarContent />
      </LeftSidebar>

      <Main>
        <Footer />
      </Main>

      <RightSidebar>
        <RightSidebarContext />
      </RightSidebar>
    </Layout>
  </>

[JBR] Add BreadAdminButton component

[JBR] Rebuild Like component

[JBR] Add header-box component

[JBR-Improve-LeftSidebar] Should hide LeftSidebar when window.innerWidth < 1024

[JBR] Improve typings

[JBR] Rebuild Layout module

[JBUR] Add alias

It's better way to import component or less like this:

import Component from '@component/component-name'
import '@less/less-name'

[JBR] Improve LeftSidebar

Error when use LeftSidebar wrap a string child

[JBR] Add bread layout context logic

[JBR] Rebuild Layout module.

Now the way we calculate the siderbar width is too sb. We need rebuild Layout module.

Except:

import {Layout} from 'jb-ui-react';

const { LeftSidebar, RightSidebar, Main } = Layout;

const Component = () => (
  <Layout>
    <LeftSidebar/>
    <Main>
      {children}
    </Main>
    <RightSidebar/>
  </Layout>
);

[JBUR] Copy packages from jx3-common-ui

[JBR] Add npm publish stuff

We need this library in react-bolilerplate

[JBR] Add components's displayName

Need add displayName to LeftSidebar RightSidebar and Main components

[JBR] Add a event emitter util

We will use event emitter for layout stuff