Consider separating the library code from the examples (Playground)

[maylukas]

Currently the library is mixed with the example page. The index.tsx for example both exports the components and bootstraps the demo application.

The storybook project (https://github.com/storybooks/storybook) does pretty much the same than what the Playground is designed for in my opinion.
Using Storybook, the documentation is written in so called stories. They are stored aside the components they describe and are then picked up by the storybook scripts. Additionally stoybook provides a UI that showcases the components and provides functionality such as event logging, knobs (changing props), responsive preview, generating the interface documentation from typescript code and much more.
Example:
React official storybook

When the library is published the stories can be easily filtered using a .npmignore file.

If you consider this a valid option I would be happy to provide an example for this project.

Example for a story:

import *  as React from 'react';
import { storiesOf } from '@storybook/react';

import { wInfo } from '../utils';
import { Tabs } from './tabs';
import { Tab } from './tab';
import { action } from '@storybook/addon-actions';
import { text } from '@storybook/addon-knobs';
import { Story } from '../story';

const info = `
### Notes 
This control is used to navigate between frequently accessed, distinct content categories.
They allow for navigation between two or more content views.
When the header is clicked, the section's content is displayed.

### Do
* Use on content-heavy pages that would otherwise require a significant 
  amount of scrolling to access the various sections.
* Be concise on the navigation labels, ideally one or two words rather than a phrase.

### Usage
* Don’t use the Pivot to link to a new page.
* Don’t use the Pivot to link to hidden content.
~~~js
<Tabs />
~~~`;

(storiesOf('Components/Tabs', module) as any).addWithJSX(
    'Tabs',
    wInfo(info)(() => {
        return (
            <Story>
                <div>
                    <Tabs
                        onSelectTab={action('on-select-tab')}
                        selectedTab={
                            text('selectedTab', null) !== null && text('selectedTab', null) !== ''
                                ? text('selectedTab', null)
                                : undefined
                        }
                    >
                        <Tab key={'tab-1'} title={{id: 'dummy', defaultMessage: 'Tab 1'}}>
                            Content for Tab 1
                        </Tab>
                        <Tab key={'tab-2'} title={{id: 'dummy', defaultMessage: 'Tab 2'}}>
                            Content for Tab 2
                        </Tab>
                        <Tab key={'tab-2'} title={{id: 'dummy', defaultMessage: 'Disabled Tab'}} disabled={true}>
                            Content for Tab 2
                        </Tab>

                    </Tabs>

                    <h3>Tabs with icons</h3>
                    <Tabs
                        onSelectTab={action('on-select-tab')}
                        selectedTab={
                            text('selectedTab', null) !== null && text('selectedTab', null) !== ''
                                ? text('selectedTab', null)
                                : undefined
                        }
                    >
                        <Tab key={'tab-1'} title={{id: 'dummy', defaultMessage: 'Tab 1'}} icon={'sap-icon://edit'}>
                            Content for Tab 1
                        </Tab>
                        <Tab key={'tab-2'} title={{id: 'dummy', defaultMessage: 'Tab 2'}} icon={'sap-icon://list'}>
                            Content for Tab 2
                        </Tab>

                        <Tab
                            key={'tab-2'}
                            title={{id: 'dummy', defaultMessage: 'Tab 2'}}
                            icon={'sap-icon://error'}
                            iconColor={'Critical'}
                        >
                            Content for Tab 2
                        </Tab>

                        <Tab
                            key={'tab-2'}
                            title={{id: 'dummy', defaultMessage: 'Tab 2'}}
                            icon={'sap-icon://accept'}
                            iconColor={'Positive'}
                        >
                            Content for Tab 2
                        </Tab>
                    </Tabs>
                </div>
            </Story>
        );
    })
);

[jeffredodd]

CORUI-6084 will handle this issue if we take it on 😄

[magicmatatjahu]

Hello everyone! What do you thinking about lerna? We use it in AsyncApi React project. We have a two separate project in a single monorepo - lib and playground and this set is very good in development. Then you have a separate two domains - playground app and core library with only a component definition and tests. Of course, we can use storybook in a playground app :)

[jiawang1]

@magicmatatjahu : I have create a POC by lerna to separate playground and components, you can check here #78 (comment), also I think provides one more cli sub project used to setup react application project with fundametal-react.