refactor(playground): use kitten-tricks as playground

.gitignore

@@ -18,7 +18,7 @@ docs/src/assets/playground-build/
 docs/src/assets/examples-build/
 
 # env
-src/playground/env/index.js
+src/doc-showcase/env/index.js
 
 #config
 config/

CONTRIBUTING.md

@@ -8,7 +8,7 @@ We would love for you to contribute to UI Kitten and help make it even better to
  - [Feature Requests](#feature)
  - [Submission Guidelines](#submit-pr)
  - [Coding Rules](#rules)
- - [Run Playground](#run)
+ - [Run Demo Application](#run)
  - [Debugging your changes](#debug)
  - [Commit Message Guidelines](#commit)
 
@@ -135,12 +135,13 @@ To ensure consistency throughout the source code, keep these rules in mind as yo
 * All features or bug fixes **must be tested** by one or more specs (unit-tests).
 * All public API methods **must be documented** following JsDoc notation.
 
-## <a name="run"></a> Run playground
+## <a name="run"></a> Run Demo Application
 
-UI Kitten contains playground module which allows you to debug quickly your changes.
-See the project in [playground directory](src/playground).
+UI Kitten has [Demo Application](https://github.com/akveo/kittenTricks) which allows you to debug quickly your changes.
 To run it you should:
-* Clone this repo
+* Clone UI Kitten project
+* Clone Kitten Tricks project
+* Clone Eva Design System project
 * Go to project root directory:
 ```
 cd ./path-to/react-native-ui-kitten
@@ -151,16 +152,16 @@ yarn
 ```
 * That's it! You're ready to run:
 ```
-yarn playground start
+yarn demo start:dev
 ```
 * Now you will be prompted by CLI to select the device you'd like to run.
 Just follow the CLI instructions. Normally you should hit `a` or `i` button
 to make Android or iOS device running.
 
 ## <a name="debug"></a> Debugging your changes
 
-If you're done with running playground on Android emulator or iOS simulator,
-you can observe all the changes you do inside [framework](src/framework)
+If you're done with running Kitten Tricks on Android emulator or iOS simulator,
+you can observe all the changes you do inside [components module](src/components)
  on the device you have started. That's where hot/live reload takes place.
 
 ## <a name="commit"></a> Commit Message Guidelines
@@ -208,13 +209,13 @@ Must be one of the following:
 * **release**: Release version commit
 
 ### Scope
-* For [framework's ui module](src/framework/ui) the scope should be the name of the component that was affected:
+* For [components ui module](src/components/ui) the scope should be the name of the component that was affected:
 ```
 style(button): add styles for pressed state
 ```
-* For changes in other modules (like [theme](src/framework/theme) or [playground](src/playground)) the scope should be module name:
+* For changes in other modules (like [moment](src/moment) or [date-fns](src/date-fns)) the scope should be module name:
 ```
-build(playground): react-navigation integration
+feat(date-fns): description of awesome feature
 ```
 
 ### Subject

DEV_DOCS.md

@@ -5,24 +5,23 @@
 - [Documentation](#documentation)
 - [Development](#development)
 - [Release](#release)
-- [Playground](#playground)
-- [Kitten Tricks](#kitten-tricks)
+- [Kitten Tricks](#demo-application---kitten-tricks)
 
 # Things you must follow before contributing
 - Don’t overcomplicate
 - Don’t make things too abstract
 - Use tslint, to check the code style
 - Never forget [document your changes add create some examples](#documentation)
 - Write tests
-- [Create playground components](#creating-playground-components) per each new component/feature
+- [Create showcase components](#create-a-new-component) per each new component/feature
 
 # New Feature Checklist
 - lint checks are passing
-- tests are added/updated and passing
-- showcase in the playground updated
-- tsdocs added/updated
+- tests are added or updated and passing
+- showcase components in demo application added or updated
+- showcase components in documentation application added or updated
+- readable documentation added or updated
 - commit message is properly formatted
-- for the override styles - registered in a list of overrides
 - looks great on all default themes
 - requires approval from several core team contributors
 
@@ -42,18 +41,18 @@ The components documentation is taken from the component comment sections.
     - moment - `@ui-kitten/moment` package. Services that allows UI Kitten components to work with moment.js.    
     - template-js - `@ui-kitten/template-js` package. Template app for creating UI Kitten project with React Native CLI.    
     - template-ts - `@ui-kitten/template-ts` package. Template app for creating TypeScript UI Kitten project with React Native CLI.     
-    - playground - independent module with runnable examples for each feature
+    - [Demo Application](https://github.com/akveo/kittenTricks) - independent application with runnable examples for each feature
 
 ## UI Kit 
 
-Located in [./src/framework](./src/components). Divided into two dirs:
+Located in [./src/components](./src/components). Divided into two dirs:
 
 - [theme](./src/components/theme) - Contains styling services and supporting components used to provide styles to basic components.
 - [ui](./src/components/ui) - Contains basic UI components.
 
 ## Styling services
 
-Located in [./src/framework/theme](./src/components/theme)
+Located in [./src/components/theme](./src/components/theme)
 
 - [theme](./src/components/theme/theme) - ThemeProvider component. Used to provide one of Eva themes used to style basic components.
 - [mapping](./src/components/theme/mapping) - MappingProvider component. Used to provide one of Eva mappings to style basic components.
@@ -196,22 +195,31 @@ And don't forget to specify the language above your example.
 - awesomeComponent.spec.tsx (component tests)
 ````
 
-- create directory in `./src/playground/src/scenes/awesomeComponent` with following files:
+- create directory in Demo Application `./src/scenes/components/awesomeComponent` with following files:
 ````
-- awesomeComponent.component.tsx (component showcase container)
-- awesomeComponentShowcase.component.tsx (basic component showcase)
+- awesome-component.component.tsx (component showcase container)
+- awesome-component-showcase.component.tsx (basic component showcase)
 - type.tsx (component configuration file)
 ````
 
-Look through already existing showcases and use similar implementation (e.g [Button Showcase](./src/playground/src/scenes/button))
+Look through already existing showcases and use similar implementation (e.g [Button Showcase](https://github.com/akveo/kittenTricks/tree/master/src/scenes/components/button))
 
-- register your showcase in a playground: 
+- register your showcase in a Demo Application: 
 
-Open `./src/playground/src/navigation/components.navigator.tsx` and expand playground navigation with your component container:
+Open [Components Navigator](https://github.com/akveo/kittenTricks/tree/master/src/navigation/components.navigator.tsx) and expand navigation with your component container:
 ```
-import { AwesomeComponentScreen } from '@pg/scenes/awesomeComponent/awesomeComponent.component';
+import { AwesomeComponentScreen } from '../scenes/components/awesome-component.component';
 ...
-['AwesomeComponent']: AwesomeComponentScreen
+<Stack.Screen name='AwesomeComponent' component={AwesomeComponentScreen} />
+```
+
+Open [Components Screen](https://github.com/akveo/kittenTricks/tree/master/src/scenes/components/data.ts) and expand it with route to new component:
+```
+{
+    title: 'AwesomeComponent',
+    route: 'AwesomeComponent',
+    ...
+  }
 ```
 
 ## Release
@@ -233,67 +241,38 @@ To start a new release (publish the framework packages on NPM) you need:
 11. Create and push [git tag](https://git-scm.com/book/en/v2/Git-Basics-Tagging) with template `(vX.X.X)`
 12. Create release on GitHub for the tag
 
-# Playground
-
-Playground is an example app built on top of the [Expo](https://github.com/expo/expo) containing runnable component examples.
-
-## Start a Playground
-
-`yarn && yarn playground start` from the project root
-
-### Playground environments:
-
-Playground module supports two environments: 
-
-- **Production** (Provides Eva Design System module published to npm)
-- **Development** (Provides local Eva Design System module)
-
-To run playground in a development mode:
-
-- Clone Eva Design System to the directory containing UI Kitten repo:
-```bash
-git clone https://github.com/eva-design/eva
-```
-- Ensure you have the following structure of repos:
-```
-- /Users/UIKittenDeveloper/
-  - react-native-ui-kitten
-  - eva
-```
-- Install dependencies if needed and finally run `yarn playground start:dev`
+# Demo Application - Kitten Tricks
 
-# Kitten Tricks
+Kitten Tricks is an example app built on top of the [Expo](https://github.com/expo/expo) containing reusable screens and runnable component examples. This application is used as a framework demo.
 
-## Start an App
+## Start a Demo Application
 
-1. Clone the repo `git clone https://github.com/akveo/kittenTricks`
-2. Go to the Kitten Tricks project dir and run `npm i && npm start`
+`yarn && yarn demo start` from the `react-native-ui-kitten` project
+or
+`yarn && yarn start` from the `kittenTricks` project
 
-## Kitten Tricks environments:
+### Demo Application environments:
 
-Kitten Tricks app supports two environments: 
+Demo Application supports two environments: 
 
 - **Production** (Provides Eva Design System and UI Kitten modules published to npm)
 - **Development** (Provides local Eva Design System and UI Kitten modules)
 
-To run App in a development mode:
+To run Demo Application in a development mode:
 
-- Clone UI Kitten to the directory containing Kitten Tricks repo:
+- Clone Eva Design System to the directory containing UI Kitten repo:
 ```bash
-git clone https://github.com/akveo/react-native-ui-kitten
+git clone https://github.com/eva-design/eva
 ```
-- Clone Eva Design System to the directory containing Kitten Tricks repo:
+- Clone Demo Application to the directory containing UI Kitten repo:
 ```bash
-git clone https://github.com/eva-design/eva
+git clone https://github.com/akveo/kittenTricks
 ```
-- Ensure you have the following structure of repos:
+- **IMPORTANT** Ensure you have the following structure of repos:
 ```
-- /Users/UIKittenDeveloper/
-  - react-native-ui-kitten
+- /
   - eva
   - kittenTricks
+  - react-native-ui-kitten
 ```
-- Inside react-native-ui-kitten dir run `rm -rf yarn.lock ./node_modules && yarn` to install latest dependencies.
-- Inside Kitten Tricks directory `rm -rf ./node_modules ./package-lock.json && npm i` to install the latest dependencies.
-- `npm run start:dev` - this will start application in development mode and watch for UI Kitten and Eva changes.
-
+- Install dependencies if needed and finally run `yarn demo start:dev`

jest.config.js

@@ -9,7 +9,7 @@ module.exports = {
     'js',
   ],
   modulePathIgnorePatterns: [
-    '<rootDir>/src/playground/',
+    '<rootDir>/src/doc-showcase/',
     '<rootDir>/src/template-js/',
     '<rootDir>/src/template-ts/',
   ],

package.json

@@ -12,11 +12,12 @@
   "workspaces": {
     "packages": [
       "src/*",
-      "docs"
+      "docs",
+      "../kittenTricks"
     ]
   },
   "scripts": {
-    "playground": "yarn --cwd src/playground",
+    "demo": "yarn --cwd ../kittenTricks",
     "build": "tsc && tscpaths -p ./tsconfig.json -s ./src/components -o ./dist/tsc-out/components",
     "clean": "rimraf ./dist",
     "lint": "tslint -c ./tslint.json ./src/**/*.{ts,tsx}",
@@ -64,4 +65,4 @@
     "react-native": "~0.61.4",
     "react-native-svg": "~9.13.3"
   }
-}
+}

scripts/create-doc-app-navigation.ts

@@ -21,7 +21,9 @@ interface ShowcaseRouteMap {
 }
 
 export const createDocAppNavigation = (showcasePath: string): string => {
-  const showcaseDirs: string[] = fs.readdirSync(showcasePath);
+  const showcaseDirs: string[] = fs.readdirSync(showcasePath).filter((dirOrFile: string) => {
+    return !dirOrFile.endsWith('.tsx');
+  });
 
   const showcaseMap: ShowcaseMap = showcaseDirs.reduce((map, component: string) => {
     return { ...map, [component]: createComponentShowcase(showcasePath, component) };
@@ -44,15 +46,15 @@ export const createDocAppNavigation = (showcasePath: string): string => {
 
 const createShowcaseRouteMap = (map: ShowcaseMap, component: string): ShowcaseRouteMap => {
   return map[component].showcases.reduce((componentShowcases, showcaseInfo: ShowcaseInfo) => {
-    const showcaseScreenStatement = `() => sharingHeightContainer(${showcaseInfo.name}, '${showcaseInfo.routeName}')`;
+    const showcaseScreenStatement = `() => ShowcaseIFrame(${showcaseInfo.name}, '${showcaseInfo.routeName}')`;
     return { ...componentShowcases, [showcaseInfo.routeName]: showcaseScreenStatement };
   }, {});
 };
 
 const createShowcaseImportStatements = (map: ShowcaseMap, component: string): string[] => {
   return map[component].showcases.map((showcaseInfo: ShowcaseInfo): string => {
     const platformComponentPath: string = path.parse(showcaseInfo.path).name;
-    return `import { ${showcaseInfo.name} } from '@pg/components/showcases/${component}/${platformComponentPath}';`;
+    return `import { ${showcaseInfo.name} } from '../components/${component}/${platformComponentPath}';`;
   });
 };
 
@@ -71,7 +73,7 @@ const createOutput = (imports: string[], statements: string[]): string => {
     'import React from \'react\';',
     'import { createBrowserApp } from \'@react-navigation/web\';',
     'import { createStackNavigator } from \'react-navigation-stack\';',
-    'import { sharingHeightContainer } from \'@pg/components/sharingHeight.container\';',
+    'import { ShowcaseIFrame } from \'../components/showcaseIFrame.component\';',
     ...imports,
     '',
     ...statements,