Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Rename] kbn-ui-framework in packages directory to osd-ui-framework #41

Merged
merged 2 commits into from
Mar 5, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

const sass = require('node-sass');
const postcss = require('postcss');
const postcssConfig = require('@kbn/optimizer/postcss.config.js');
const postcssConfig = require('@osd/optimizer/postcss.config.js');
const chokidar = require('chokidar');
const { debounce } = require('lodash');

Expand Down Expand Up @@ -51,7 +51,7 @@ module.exports = function (grunt) {
src: ['target/components/**/*.js', 'target/src/**/*.js'],
dest: '.',
options: {
presets: [require.resolve('@kbn/babel-preset/webpack_preset')],
presets: [require.resolve('@osd/babel-preset/webpack_preset')],
},
},
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Kibana UI Framework
# OpenSearch Dashboards UI Framework

> The Kibana UI Framework is a collection of React UI components for quickly building user interfaces
> for Kibana. Not using React? No problem! You can still use the CSS behind each component.
> The OpenSearch Dashboards UI Framework is a collection of React UI components for quickly building user interfaces
> for OpenSearch Dashboards. Not using React? No problem! You can still use the CSS behind each component.

## Using the Framework

Expand All @@ -25,10 +25,10 @@ See the documentation in [`scripts/jest.js`](../scripts/jest.js) for more option

There are four steps to creating a new component:

1. Create the SCSS for the component in `packages/kbn-ui-framework/src/components`.
1. Create the SCSS for the component in `packages/osd-ui-framework/src/components`.
2. Create the React portion of the component.
3. Write tests.
4. Document it with examples in `packages/kbn-ui-framework/doc_site`.
4. Document it with examples in `packages/osd-ui-framework/doc_site`.

You can do this using Yeoman (the easy way), or you can do it manually (the hard way).

Expand Down Expand Up @@ -77,23 +77,23 @@ and re-export the generated JS and SCSS files.

#### Create component SCSS

1. Create a directory for your component in `packages/kbn-ui-framework/src/components`.
1. Create a directory for your component in `packages/osd-ui-framework/src/components`.
2. In this directory, create `_{component name}.scss`.
3. _Optional:_ Create any other components that should be [logically-grouped](#logically-grouped-components)
in this directory.
4. Create an `_index.scss` file in this directory that import all of the new component SCSS files
you created.
5. Import the `_index.scss` file into `packages/kbn-ui-framework/src/components/index.scss`.
5. Import the `_index.scss` file into `packages/osd-ui-framework/src/components/index.scss`.

This makes your styles available to Kibana and the UI Framework documentation.
This makes your styles available to OpenSearch Dashboards and the UI Framework documentation.

#### Create the React component

1. Create the React component(s) in the same directory as the related SCSS file(s).
2. Export these components from an `index.js` file.
3. Re-export these components from `packages/kbn-ui-framework/src/components/index.js`.
3. Re-export these components from `packages/osd-ui-framework/src/components/index.js`.

This makes your React component available for import into Kibana.
This makes your React component available for import into OpenSearch Dashboards.

#### Test the component

Expand All @@ -107,11 +107,11 @@ To see how well the components have been covered by tests, you can run

#### Document the component with examples

1. Create a directory for your example in `packages/kbn-ui-framework/doc_site/src/views`. Name it the name of the
1. Create a directory for your example in `packages/osd-ui-framework/doc_site/src/views`. Name it the name of the
component.
2. Create a `{component name}_example.js` file inside the directory. You'll use this file to define
the different examples for your component.
3. Add the route to this file in `packages/kbn-ui-framework/doc_site/src/services/routes/Routes.js`.
3. Add the route to this file in `packages/osd-ui-framework/doc_site/src/services/routes/Routes.js`.
4. In the `{component name}_example.js` file you created, define examples which demonstrate the component and describe
its role from a UI perspective.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export class GuideNav extends Component {
<div className="guideNav__header">
<div className={buttonClasses} onClick={this.props.onToggleNav} />
<Link className="guideNav__title" to="/" onClick={this.props.onClickNavItem}>
Kibana UI Framework <span className="guideNav__version">{this.props.version}</span>
OpenSearch Dashboards UI Framework <span className="guideNav__version">{this.props.version}</span>
</Link>
<a
href="http://elastic.co"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export class GuidePage extends Component {

<div className="guidePageBody">
<div className="guidePageKillScreen">
<h1 className="guideTitle">The Kibana UI Framework has been DEPRECATED.</h1>
<h1 className="guideTitle">The OpenSearch Dashboards UI Framework has been DEPRECATED.</h1>

<h2 className="guideTitle">
Please use the <a href="https://github.com/elastic/eui">EUI Framework instead</a>.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,8 @@ const routes = [
const onRouteEnter = (route) => {
const leafRoute = route.routes[route.routes.length - 1];
document.title = leafRoute.name
? `Kibana UI Framework - ${leafRoute.name}`
: 'Kibana UI Framework';
? `OpenSearch Dashboards UI Framework - ${leafRoute.name}`
: 'OpenSearch Dashboards UI Framework';
};

const syncTitleWithRoutes = (routesList) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const HomeView = () => (
<div className="guideContentPage guideHomePage">
<div className="guideContentPage__content">
<div style={{ marginBottom: 40, backgroundColor: '#ffec9d', padding: 20 }}>
<h1 className="guideTitle">The Kibana UI Framework has been DEPRECATED.</h1>
<h1 className="guideTitle">The OpenSearch Dashboards UI Framework has been DEPRECATED.</h1>

<h2 className="guideTitle">
Please use the <a href="https://github.com/elastic/eui">EUI Framework instead</a>.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ module.exports = {
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: [require.resolve('@kbn/babel-preset/webpack_preset')],
presets: [require.resolve('@osd/babel-preset/webpack_preset')],
},
},
{
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "@kbn/ui-framework",
"name": "@osd/ui-framework",
"version": "1.0.0",
"license": "Apache-2.0",
"scripts": {
Expand All @@ -9,7 +9,7 @@
"createComponent": "yo ./generator-kui/app/component.js",
"documentComponent": "yo ./generator-kui/app/documentation.js"
},
"kibana": {
"opensearchDashboards": {
"build": {
"intermediateBuildDirectory": "target"
}
Expand All @@ -32,8 +32,8 @@
"devDependencies": {
"@babel/core": "^7.11.6",
"@elastic/eui": "29.3.2",
"@kbn/babel-preset": "1.0.0",
"@kbn/optimizer": "1.0.0",
"@osd/babel-preset": "1.0.0",
"@osd/optimizer": "1.0.0",
"babel-loader": "^8.0.6",
"brace": "0.11.1",
"chalk": "^4.1.0",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// --------------------------------------------------------------------------------------
// Kibana UI framework
// OpenSearch Dashboards UI framework
// --------------------------------------------------------------------------------------
// This library will eventually contain all styles used throughout Kibana. Currently it
// This library will eventually contain all styles used throughout OpenSearch Dashboards. Currently it
// only covers a portion of the components. The processed css from this library currently
// loads on top of other CSS (itself generated from LESS files) contained in /ui/*/*.less
// files. This includes some base LESS files (including bootstrap) that can be found in
Expand Down
Loading