Refactor UI Framework directory structure to house everything in a sr…

…c directory. (elastic#12880)

- Add components/index.js and services/index.js files to continue to export JS modules from the root.

src/ui/public/modals/confirm_modal.js

@@ -6,7 +6,10 @@ import { ModalOverlay } from './modal_overlay';
 
 const module = uiModules.get('kibana');
 
-import { CONFIRM_BUTTON, CANCEL_BUTTON } from 'ui_framework/components/modal/confirm_modal';
+import {
+ KUI_MODAL_CONFIRM_BUTTON as CONFIRM_BUTTON,
+ KUI_MODAL_CANCEL_BUTTON as CANCEL_BUTTON,
+} from 'ui_framework/components';
 
 export const ConfirmationButtonTypes = {
  CONFIRM: CONFIRM_BUTTON,

tasks/ui_framework.js

@@ -78,14 +78,14 @@ module.exports = function (grunt) {
 
  function uiFrameworkCompile() {
  sass.render({
- file: 'ui_framework/components/index.scss'
+ file: 'ui_framework/src/index.scss'
  }, function (error, result) {
  if (error) {
  grunt.log.error(error);
  }
 
  postcss([postcssConfig])
- .process(result.css, { from: 'ui_framework/components/index.scss', to: 'ui_framework/dist/ui_framework.css' })
+ .process(result.css, { from: 'ui_framework/src/index.scss', to: 'ui_framework/dist/ui_framework.css' })
  .then(result => {
  grunt.file.write('ui_framework/dist/ui_framework.css', result.css);
 
@@ -102,7 +102,7 @@ module.exports = function (grunt) {
  return new Promise(() => {
  debouncedCompile();
 
- chokidar.watch('ui_framework/components', { ignoreInitial: true }).on('all', (event, path) => {
+ chokidar.watch('ui_framework/src', { ignoreInitial: true }).on('all', (event, path) => {
  grunt.log.writeln(event, path);
  debouncedCompile();
  });

ui_framework/components/index.js

@@ -1,118 +1 @@
-export { KuiActionItem } from './action_item';
-
-export {
- KuiKeyboardAccessible,
-} from './accessibility';
-
-export {
- KuiBar,
- KuiBarSection,
-} from './bar';
-
-export {
- KuiButton,
- KuiButtonGroup,
- KuiButtonIcon,
- KuiLinkButton,
- KuiSubmitButton,
-} from './button';
-
-export {
- KuiCard,
- KuiCardDescriptionText,
- KuiCardDescriptionTitle,
- KuiCardDescription,
- KuiCardFooter,
- KuiCardGroup,
-} from './card';
-
-export {
- KuiColorPicker,
-} from './color_picker';
-
-export {
- KuiCollapseButton,
-} from './collapse_button';
-
-export {
- KuiEmptyTablePrompt,
- KuiEmptyTablePromptMessage,
- KuiEmptyTablePromptPanel,
-} from './empty_table_prompt';
-
-export {
- KuiEvent,
- KuiEventSymbol,
- KuiEventBody,
- KuiEventBodyMessage,
- KuiEventBodyMetadata,
-} from './event';
-
-export {
- KuiFieldGroup,
- KuiFieldGroupSection,
-} from './form_layout';
-
-export {
- KuiGallery,
- KuiGalleryButton,
- KuiGalleryButtonIcon,
- KuiGalleryButtonImage,
- KuiGalleryButtonLabel,
-} from './gallery';
-
-export {
- KuiHeaderBar,
- KuiHeaderBarSection,
-} from './header_bar';
-
-export { KuiInfoButton } from './info_button';
-
-export {
- KuiLocalNav,
- KuiLocalNavRow,
- KuiLocalNavRowSection,
- KuiLocalTab,
- KuiLocalTabs,
- KuiLocalTitle,
-} from './local_nav';
-
-export {
- KuiMenu,
- KuiMenuItem,
-} from './menu';
-
-
-export * from './modal';
-
-export {
- KuiPager,
- KuiPagerButtonGroup,
-} from './pager';
-
-export {
- KuiTabs,
- KuiTab
-} from './tabs';
-
-export {
- KuiTable,
- KuiControlledTable,
- KuiTableHeaderCell,
- KuiTableRow,
- KuiTableRowCell,
- KuiTableInfo,
- KuiTableRowCheckBoxCell,
- KuiTableHeaderCheckBoxCell,
- KuiTableHeader,
- KuiTableBody,
-} from './table';
-
-export {
- KuiToolBar,
- KuiToolBarSearchBox,
- KuiToolBarFooter,
- KuiToolBarSection,
- KuiToolBarFooterSection,
- KuiToolBarText
-} from './tool_bar';
+export * from '../src/components';

ui_framework/doc_site/src/views/color_picker/color_picker.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KuiColorPicker } from '../../../../components/index';
+import { KuiColorPicker } from '../../../../components';
 
 export class ColorPicker extends React.Component {
  constructor(props) {

ui_framework/doc_site/src/views/color_picker/color_picker_clear.js

@@ -5,7 +5,7 @@ import {
  KuiFieldGroup,
  KuiFieldGroupSection,
  KuiKeyboardAccessible,
-} from '../../../../components/index';
+} from '../../../../components';
 
 export class ColorPickerLabelAndClear extends React.Component {
  constructor(props) {

ui_framework/doc_site/src/views/color_picker/color_picker_no_color_label.js

@@ -4,7 +4,7 @@ import {
  KuiColorPicker,
  KuiFieldGroup,
  KuiFieldGroupSection,
-} from '../../../../components/index';
+} from '../../../../components';
 
 export class ColorPickerNoColorLabel extends React.Component {
  constructor(props) {

ui_framework/doc_site/src/views/modal/confirm_modal_example.js

@@ -4,7 +4,7 @@ import {
  KuiConfirmModal,
  KuiModalOverlay,
  KuiButton
-} from '../../../../components/index';
+} from '../../../../components';
 
 export class ConfirmModalExample extends React.Component {
  constructor(props) {

ui_framework/doc_site/src/views/modal/modal_example.js

@@ -9,39 +9,29 @@ import {
  GuideSectionTypes,
 } from '../../components';
 
-import {
- KuiConfirmModal,
-} from '../../../../components';
+import { StaticConfirmModal } from './static';
+const staticConfirmModalSource = require('!!raw!./static');
+const staticConfirmModalHtml = renderToHtml(StaticConfirmModal);
 
 import { ConfirmModalExample } from './confirm_modal_example';
 const showConfirmModalSource = require('!!raw!./confirm_modal_example');
 const showConfirmModalHtml = renderToHtml(ConfirmModalExample);
 
-const kuiConfirmModalSource = require('!!raw!../../../../components/modal/confirm_modal');
-const kuiConfirmModalHtml = renderToHtml(KuiConfirmModal);
-
 export default props => (
  <GuidePage title={props.route.name}>
 
  <GuideSection
  title="Confirmation Modal"
  source={[{
  type: GuideSectionTypes.JS,
- code: kuiConfirmModalSource,
+ code: staticConfirmModalSource,
  }, {
  type: GuideSectionTypes.HTML,
- code: kuiConfirmModalHtml,
+ code: staticConfirmModalHtml,
  }]}
  >
  <GuideDemo>
- <KuiConfirmModal
- onCancel={() => {}}
- onConfirm={() => {}}
- confirmButtonText="Confirm"
- cancelButtonText="Cancel"
- message="This is a confirmation modal"
- title="Confirm Modal Title"
- />
+ <StaticConfirmModal />
  </GuideDemo>
  </GuideSection>
 

ui_framework/doc_site/src/views/modal/static.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import {
+ KuiConfirmModal,
+} from '../../../../components';
+
+export const StaticConfirmModal = () => (
+ <KuiConfirmModal
+ onCancel={() => {}}
+ onConfirm={() => {}}
+ confirmButtonText="Confirm"
+ cancelButtonText="Cancel"
+ message="This is a confirmation modal"
+ title="Confirm Modal Title"
+ />
+);

ui_framework/services/index.js

@@ -1,11 +1 @@
-export {
- accessibleClickKeys,
- comboBoxKeyCodes,
- ENTER_KEY,
- SPACE_KEY,
-} from './accessibility';
-
-export { SortableProperties } from './sort';
-export { ESC_KEY_CODE } from './key_codes';
-
-export { LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from './alignment';
+export * from '../src/services';