Skip to content

Commit

Permalink
[Rename] kbn-ui-framework in packages directory to osd-ui-framework (#41
Browse files Browse the repository at this point in the history
)

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

Signed-off-by: Mihir Soni <[email protected]>

* [Rename] in-corporate review comments

Signed-off-by: Mihir Soni <[email protected]>
  • Loading branch information
mihirsoni authored and kavilla committed Mar 20, 2021
1 parent 720995f commit 44b74f1
Show file tree
Hide file tree
Showing 446 changed files with 26 additions and 26 deletions.
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

0 comments on commit 44b74f1

Please sign in to comment.