fix: Only export components when publishing

config/paths.js

@@ -72,7 +72,7 @@ module.exports = {
   appBuild: resolveApp('build'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
-  appIndexJs: resolveModule(resolveApp, 'src/index'),
+  appIndexJs: resolveModule(resolveApp, 'src/_playground/index'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   appTsConfig: resolveApp('tsconfig.json'),

package.json

@@ -14,7 +14,7 @@
     "build-js": "node scripts/build.js",
     "build:lint:fix": "eslint --fix 'src/**' --ext .js,.jsx --env browser,node",
     "build:lint": "eslint 'src/**' --ext .js,.jsx --env browser,node",
-    "build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__,Component.js",
+    "build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --ignore \"src/**/*.spec.js\",\"src/**/*.test.js\",\"src/**/*.Component.js\",\"src/_playground/*\"",
     "deploy": "gh-pages -d build",
     "lint:fix": "npm run build:lint:fix",
     "lint:pre-commit": "printf \"running pre-commit lint...\"  && npm run lint && printf \"done!\n\"",

src/ActionBar/ActionBar.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ActionBar, ActionBarBack, ActionBarHeader, ActionBarActions, Button, Popover, Menu, MenuList, MenuItem } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 
 export const ActionBarComponent = () => {
     const actionBarBackBtnCode = `<ActionBar>

src/Alert/Alert.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Alert, Icon } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../_playground';
 
 export const AlertComponent = () => {
     const defaultAlertCode = '<Alert dismissable link="#" linkText="link">Default alert with a </Alert>';

src/Badge/Badge.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Badge, Label, Status, Counter, Button } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../_playground';
 
 export const BadgeComponent = () => {
     const defaultBadgeCode = `<Badge>Default</Badge>

src/Breadcrumb/Breadcrumb.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Breadcrumb, BreadcrumbItem } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import } from '../_playground';
 
 export const BreadcrumbComponent = () => {
     const breadcrumbHrefCode = `<Breadcrumb>

src/Button/Button.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, ButtonGroup } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../_playground';
 
 export const ButtonComponent = () => {
     const buttonOptionsCode = `<Button option="emphasized" onClick={() => clickBtnHandler('Emphasized')}>

src/Calendar/Calendar.Component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 import {Calendar} from '../';
 
 export const CalendarComponent = () => {

src/ComboboxInput/ComboboxInput.Component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Import, Properties } from '../_playground';
 import { Menu, MenuItem, MenuList, ComboboxInput } from '../';
 
 export const ComboboxInputComponent = () => {

src/ContextualMenu/ContextualMenu.Component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Description } from '../';
+import { DocsTile, DocsText, Separator, Header, Description } from '../_playground';
 import { Popover, Button, Menu, MenuList, MenuItem } from '../';
 
 export const ContextualMenuComponent = () => {

src/DatePicker/DatePicker.Component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 import { DatePicker } from '../';
 
 export const DatePickerComponent = () => {

src/Dropdown/Dropdown.Component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 import { Dropdown, Popover, Button, Menu, MenuList, MenuItem } from '../';
 
 export const DropdownComponent = () => {

src/Forms/Forms.Component.js

@@ -11,7 +11,7 @@ import {
     FormFieldset,
     FormLegend
 } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 
 export const FormsComponent = () => {
     const inputsCode = `<FormSet>

src/Icon/Icon.Component.js

@@ -9,7 +9,7 @@ import {
   Import,
   Properties,
   Playground
-} from '../';
+} from '../_playground';
 
 export const IconComponent = () => {
   const iconsCode = `<Icon glyph="cart" size="s" />

src/Identifier/Identifier.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Identifier } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../_playground';
 
 
 export const IdentifierComponent = () => {

src/Image/Image.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Image } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../_playground';
 
 export const ImageComponent = () => {
     const sizesImageCode = `<Image size="s" photo="https://placeimg.com/400/400/nature"></Image>

src/InlineHelp/InlineHelp.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { InlineHelp } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 
 
 export const InlineHelpComponent = () => {

src/InputGroup/InputGroup.Component.js

@@ -8,7 +8,7 @@ import {
   Import,
   Properties,
   Playground
-} from '../';
+} from '../_playground';
 import { FormItem, FormLabel, FormGroup, InputGroup, Button } from '../';
 
 export const InputGroupComponent = () => {

src/ListGroup/ListGroup.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, ListGroup, ListGroupItem, ListGroupItemActions, ListGroupItemCheckbox } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Playground } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Playground } from '../_playground';
 
 export const ListGroupComponent = () => {
     const simpleListCode = `<ListGroup>

src/LocalizationEditor/LocalizationEditor.Component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Import, Properties } from '../_playground';
 import { LocalizationEditor } from '../';
 
 export const LocalizationEditorComponent = () => {

src/MegaMenu/MegaMenu.Component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 import { MegaMenu, MegaMenuList, MegaMenuGroup } from '../';
 
 export const MegaMenuComponent = () => {

src/Menu/Menu.Component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 import { Menu, MenuList, MenuItem, MenuGroup } from '../';
 
 export const MenuComponent = () => {

src/Modal/Modal.Component.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 import { Modal, Button } from '../';
 
 export class ModalComponent extends Component {

src/MultiInput/MultiInput.Component.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 import { MultiInput } from '../';
 
 export class MultiInputComponent extends Component {

src/Pagination/Pagination.Component.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Pagination } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
+import { Pagination } from '../';
 
 export const PaginationComponent = () => {
     const handleClick = event => {

src/Panel/Panel.Component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 import {
     Panel,
     PanelGrid,

src/Popover/Popover.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Popover, Image, Identifier, Icon, Menu, MenuList, MenuItem } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 
 export const PopoverComponent = () => {
     const popoverCode = `<Popover

src/SearchInput/SearchInput.Component.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 import { SearchInput } from './SearchInput';
 
 export class SearchInputComponent extends Component {

src/Shellbar/Shellbar.Component.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Menu, MenuList, MenuItem } from '..';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
+import { Menu, MenuList, MenuItem } from '../';
 import { Shellbar } from '..';
 var images = require.context('../../assets', true);
 

src/SideNavigation/SideNavigation.Component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 import { SideNav, SideNavList, SideNavGroup } from '../';
 
 export const SideNavigationComponent = () => {

src/Table/Table.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Image, Popover, Button, Menu, MenuList, MenuItem, Table } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 
 export const TableComponent = () => {
     const simpleTableCode = `<Table

src/Tabs/Tabs.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Tabs, TabComponent } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../_playground';
 
 export const TabsComponent = () => {
     const tabscomponentCode = `

src/Tile/Tile.Component.js

@@ -16,7 +16,7 @@ import {
     MenuList,
     MenuItem
 } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../_playground';
 
 export const TileComponent = () => {
     const simpleTileCode = `<Tile>

src/Time/Time.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Time } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 
 export const TimeComponent = () => {
     const defaultTimeCode = '<Time />';

src/TimePicker/TimePicker.Component.js

@@ -8,7 +8,7 @@ import {
   Header,
   Description,
   Properties
-} from '../';
+} from '../_playground';
 
 export const TimePickerComponent = () => {
   const defaultTimeCode = '<TimePicker />';

src/Toggle/Toggle.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Toggle } from '../';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 
 export const ToggleComponent = () => {
     const toggleCode = `<Toggle size="xs" id="Yj07w604">

src/Token/Token.Component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Token } from './Token';
-import { DocsTile, DocsText, Separator, Header, Description, Import } from '..';
+import { DocsTile, DocsText, Separator, Header, Description, Import } from '../_playground';
 
 export const TokenComponent = () => {
     const tokenCode = `<Token>Bibendum</Token>

src/Tree/Tree.Component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../';
+import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../_playground';
 import { Tree} from '../';
 
 export const TreeComponent = () => {

src/App.scss → src/_playground/App.scss

@@ -1,6 +1,6 @@
-$fd-icons-path: '../node_modules/fiori-fundamentals/scss/icons/';
-$fd-fonts-path: '../node_modules/fiori-fundamentals/dist/fonts/';
-@import '../node_modules/fiori-fundamentals/scss/all.scss';
+$fd-icons-path: '../../node_modules/fiori-fundamentals/scss/icons/';
+$fd-fonts-path: '../../node_modules/fiori-fundamentals/dist/fonts/';
+@import '../../node_modules/fiori-fundamentals/scss/all.scss';
 
 .App {
     background-color: white;

src/Routes.js → src/_playground/Routes.js

@@ -7,42 +7,42 @@ import {
   Redirect
 } from 'react-router-dom';
 
-import { ActionBarComponent } from './ActionBar/ActionBar.Component';
-import { AlertComponent } from './Alert/Alert.Component';
-import { BadgeComponent } from './Badge/Badge.Component';
-import { BreadcrumbComponent } from './Breadcrumb/Breadcrumb.Component';
-import { ButtonComponent } from './Button/Button.Component';
-import { CalendarComponent } from './Calendar/Calendar.Component';
-import { ComboboxInputComponent } from './ComboboxInput/ComboboxInput.Component';
-import { ContextualMenuComponent } from './ContextualMenu/ContextualMenu.Component';
-import { DatePickerComponent } from './DatePicker/DatePicker.Component';
-import { DropdownComponent } from './Dropdown/Dropdown.Component';
-import { FormsComponent } from './Forms/Forms.Component';
-import { IconComponent } from './Icon/Icon.Component';
-import { IdentifierComponent } from './Identifier/Identifier.Component';
-import { ImageComponent } from './Image/Image.Component';
-import { InlineHelpComponent } from './InlineHelp/InlineHelp.Component';
-import { InputGroupComponent } from './InputGroup/InputGroup.Component';
-import { ListGroupComponent } from './ListGroup/ListGroup.Component';
-import { LocalizationEditorComponent } from './LocalizationEditor/LocalizationEditor.Component';
-import { MegaMenuComponent } from './MegaMenu/MegaMenu.Component';
-import { MenuComponent } from './Menu/Menu.Component';
-import { ModalComponent } from './Modal/Modal.Component';
-import { MultiInputComponent } from './MultiInput/MultiInput.Component';
-import { PaginationComponent } from './Pagination/Pagination.Component';
-import { PanelComponent } from './Panel/Panel.Component';
-import { PopoverComponent } from './Popover/Popover.Component';
-import { SearchInputComponent } from './SearchInput/SearchInput.Component';
-import { SideNavigationComponent } from './SideNavigation/SideNavigation.Component';
-import { TableComponent } from './Table/Table.Component';
-import { TabsComponent } from './Tabs/Tabs.Component';
-import { TokenComponent } from './Token/Token.Component';
-import { TileComponent } from './Tile/Tile.Component';
-import { ToggleComponent } from './Toggle/Toggle.Component';
-import { TreeComponent } from './Tree/Tree.Component';
-import { TimeComponent } from './Time/Time.Component';
-import { TimePickerComponent } from './TimePicker/TimePicker.Component';
-import { ShellbarComponent } from './Shellbar/Shellbar.Component';
+import { ActionBarComponent } from '../ActionBar/ActionBar.Component';
+import { AlertComponent } from '../Alert/Alert.Component';
+import { BadgeComponent } from '../Badge/Badge.Component';
+import { BreadcrumbComponent } from '../Breadcrumb/Breadcrumb.Component';
+import { ButtonComponent } from '../Button/Button.Component';
+import { CalendarComponent } from '../Calendar/Calendar.Component';
+import { ComboboxInputComponent } from '../ComboboxInput/ComboboxInput.Component';
+import { ContextualMenuComponent } from '../ContextualMenu/ContextualMenu.Component';
+import { DatePickerComponent } from '../DatePicker/DatePicker.Component';
+import { DropdownComponent } from '../Dropdown/Dropdown.Component';
+import { FormsComponent } from '../Forms/Forms.Component';
+import { IconComponent } from '../Icon/Icon.Component';
+import { IdentifierComponent } from '../Identifier/Identifier.Component';
+import { ImageComponent } from '../Image/Image.Component';
+import { InlineHelpComponent } from '../InlineHelp/InlineHelp.Component';
+import { InputGroupComponent } from '../InputGroup/InputGroup.Component';
+import { ListGroupComponent } from '../ListGroup/ListGroup.Component';
+import { LocalizationEditorComponent } from '../LocalizationEditor/LocalizationEditor.Component';
+import { MegaMenuComponent } from '../MegaMenu/MegaMenu.Component';
+import { MenuComponent } from '../Menu/Menu.Component';
+import { ModalComponent } from '../Modal/Modal.Component';
+import { MultiInputComponent } from '../MultiInput/MultiInput.Component';
+import { PaginationComponent } from '../Pagination/Pagination.Component';
+import { PanelComponent } from '../Panel/Panel.Component';
+import { PopoverComponent } from '../Popover/Popover.Component';
+import { SearchInputComponent } from '../SearchInput/SearchInput.Component';
+import { SideNavigationComponent } from '../SideNavigation/SideNavigation.Component';
+import { TableComponent } from '../Table/Table.Component';
+import { TabsComponent } from '../Tabs/Tabs.Component';
+import { TokenComponent } from '../Token/Token.Component';
+import { TileComponent } from '../Tile/Tile.Component';
+import { ToggleComponent } from '../Toggle/Toggle.Component';
+import { TreeComponent } from '../Tree/Tree.Component';
+import { TimeComponent } from '../Time/Time.Component';
+import { TimePickerComponent } from '../TimePicker/TimePicker.Component';
+import { ShellbarComponent } from '../Shellbar/Shellbar.Component';
 
 export default class Routes extends Component {
   constructor(props) {

src/documentation/DocsTile/DocsTile.js → src/_playground/documentation/DocsTile/DocsTile.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import {googlecode} from 'react-syntax-highlighter/styles/hljs';
-import {Button} from '../../Button/Button';
+import {Button} from '../../../Button/Button';
 
 export const DocsTile = props => {
     const docsTileStyle = {