kubesphere / kube-design

Kube Design for KubeSphere Console

Kube Design

Kube Design is a set of React component libraries created for KubeSphere console.

Requirement

• Node.js 12.18+ (installation with nvm)
• Yarn 1.22.4+

Installation

yarn add @kube-design/components

Example

import React, { Component } from "react";

import { Button } from "@kube-design/components";

class Example extends Component {
  render() {
    return <Button>Button</Button>;
  }
}

Import All Styles

There are two ways to import style files.

Use css

The css file can be imported directly, so no additional configuration is required in the webpack configuration file.

import "@kube-design/components/esm/styles/index.css";

Use scss

If you import the scss file, you may need to compile this part of the scss file in the webpack configuration file.

import "@kube-design/components/esm/styles/index.scss";

webpack.config.js

// module.rules
[
  ...otherRules,
  {
    test: /\.s[ac]ss$/i,
    include: root("node_modules"),
    use: ["style-loader", "css-loader", "sass-loader"],
  },
];

Modular Import

You can use babel-plugin-import to load the component library on demand.

When loading on demand, styles will also be imported on demand. You don't need to import all styles, only main.scss.

Configure the babel as follows:

// babel.config.js

const getBabelPluginImportConfig = require('@kube-design/components/babel.plugin.import')

...

"plugins": [
  ['import', getBabelPluginImportConfig()],
]

Import the main.scss instead of index.scss

import "@kube-design/components/esm/styles/main.scss";

Localization

Kube Design use LocaleProvider component to support localization.

1. Define locales

// locales.js

const locales = {
  "en-US": {
    HELLO: "Hello!",
  },
  "zh-CN": {
    HELLO: "你好!",
  },
};

export default locales;

2. Use the LocaleProvider component to wrap the root node

The locale method can be assigned to window for easy use.

import React from "react";
import ReactDOM from "react-dom";
import { LocaleProvider } from "@kube-design/components";
import locales from "./locales";
import App from "./App";

window.locale = LocaleProvider.locale;

const App = () => (
  <LocaleProvider locales={locales} currentLocale="en">
    <App />
  </LocaleProvider>
);

ReactDOM.render(<App />, document.getElementById("root"));

3. In the root node App.jsx and its child nodes, use locale.get('key') to get the language text

import React from "react";
import { Button } from "@kube-design/components";

export default () => <Button>{locale.get("HELLO")}</Button>;

License

MIT © kubesphere

kube-design's Issues

Proposal for base components

Roadmap of base components.

• Table
• Pagination
• Select
• Tooltip
• Dropdowm
• Menu
• Form

how change the theme color

how do i use kube-design with ant-design-pro ?

new commer idea, is there a way ?

i just little familier with umi, not a professional FE;

hope to contribute code.

I really like the component style and interaction of your open source products, so we developed a component similar to yours based on iview. The specific component style can refer to http://101.206.8.9:9025/. I think we can perfect and open source this component.

Custom style is not work when use loading on demand

Style that loading on demand will override the custom style I use.

how do i use kube-design in VUE-PROJECT

i want to use kube-design in my vue project,can it be run successfully？

how to change theme color

Hello, I wonder how to change the theme color. I download the kubesphere console project and make a new file to rewrite the color variables，but it doesn't work.

@import '../src/scss/variables';

@import "~@kube-design/components/esm/styles/index.scss";

Is the theme color can be rewrite by this way? or is there another way?
Looking forward to answer， Thanks！

The table does not render when the columns of the table are changed

[FEAT ADD] Can we add a timer component

I have seen timers are becoming common component especially in ecommerce/ sales related websites, If there was one for timer component, it would be helpful

About this project

Hello, kubesphere, I am a front-end practitioner (react and Nodejs direction, all golang and OC and other technologies), currently working at Newegg, I have a few small ideas and opinions on the front-end project of kube-design.

1. Is the kube-degin project a bit old? At present, cutting-edge technologies are fully embracing React+TS. Will we try to re-plan and design this project? In addition, the nomorepo method of learn seems to be breaking away from the mainstream. Maybe we can try pnpm.

2. The example of Nodejs on the KubFass platform is a bit short, can it support more functions, such as the serveless solution of renderUI-function

3. As mentioned in the Issue, we have not implemented the version of Vue yet, whether to consider this part.

In addition, if there is a chance, I hope to participate in the open source project of kubesphere, do you have any relevant PR specifications or documents?

Finally, I wish kubesphere, getting better and better, and becoming an international project.

select 组件当 options 为空时，未进行翻译。

示例： https://codesandbox.io/s/elegant-shadow-52vn7p?file=/src/App.js:82-87
组件： @kubed/components

Select componet should support onBlur event

Sometimes, i don't want to send the request when I have changed the value immediately. I just want to do this after the options panel was closed.

The documentation of the Menu needs to be improved

• How to bind events to menu item?
• Can menu item be disabled?
  @tracer1023

[FEAT ADD] Can we add a timer component

I have seen timers are becoming common component especially in ecommerce/ sales related websites, If there was one for timer component, it would be helpful

[FEAT ADD] Can we add a timer component

I have seen timers are becoming common component especially in ecommerce/ sales related websites, If there was one for timer component, it would be helpful

UI design document

We have done the skin resurfacing function on the basis of your development before.
The effect after skin resurfacing is as follows.


Could it possible if you can provide the design document of UI?
Such as Sketch Template or other UI resources.
Your UI style is really good!
As we know, the kube-design is based on React.
We plan to develop this UI Library based on Vue.
Need your support, pls!