diff --git a/.gitignore b/.gitignore index cd0b0e6ab..6835ce697 100644 --- a/.gitignore +++ b/.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/ diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index aec1ec111..cb6c6144f 100644 --- a/CONTRIBUTING.md +++ b/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. -## Run playground +## 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,7 +152,7 @@ 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 @@ -159,8 +160,8 @@ to make Android or iOS device running. ## 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. ## 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 diff --git a/DEV_DOCS.md b/DEV_DOCS.md index 05238cfb5..fc3baa726 100644 --- a/DEV_DOCS.md +++ b/DEV_DOCS.md @@ -5,8 +5,7 @@ - [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 @@ -14,15 +13,15 @@ - 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 + +``` + +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` diff --git a/jest.config.js b/jest.config.js index 14c98059e..434c38dfc 100644 --- a/jest.config.js +++ b/jest.config.js @@ -9,7 +9,7 @@ module.exports = { 'js', ], modulePathIgnorePatterns: [ - '/src/playground/', + '/src/doc-showcase/', '/src/template-js/', '/src/template-ts/', ], diff --git a/package.json b/package.json index 0178675df..9f90e008d 100644 --- a/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/scripts/create-doc-app-navigation.ts b/scripts/create-doc-app-navigation.ts index 5b4387111..3bdd3df3c 100644 --- a/scripts/create-doc-app-navigation.ts +++ b/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,7 +46,7 @@ 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 }; }, {}); }; @@ -52,7 +54,7 @@ const createShowcaseRouteMap = (map: ShowcaseMap, component: string): ShowcaseRo 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, diff --git a/scripts/parse-docs.ts b/scripts/parse-docs.ts index cd7f7dbde..120c9c8cc 100644 --- a/scripts/parse-docs.ts +++ b/scripts/parse-docs.ts @@ -12,8 +12,8 @@ import { DocShowcase, } from './create-doc-app-showcases'; import { - GulpCompletionCallback, DOCS_DIR, + GulpCompletionCallback, PACKAGES_DIR, ROOT_DIR, } from './common'; @@ -22,18 +22,18 @@ const typedoc = require('gulp-typedoc'); const exec = require('child_process').execSync; const glob = require('glob'); -const PLAYGROUND_DIR: string = path.resolve(PACKAGES_DIR, 'playground'); -const SHOWCASE_DIR: string = path.resolve(PLAYGROUND_DIR, 'src/components/showcases'); -const APP_NAVIGATOR_PATH: string = path.resolve(PLAYGROUND_DIR, 'src/navigation/app.navigator.web.tsx'); +const PLAYGROUND_DIR: string = path.resolve(PACKAGES_DIR, 'showcases'); +const SHOWCASE_DIR: string = path.resolve(PLAYGROUND_DIR, 'components'); +const APP_NAVIGATOR_PATH: string = path.resolve(PLAYGROUND_DIR, 'navigation/app.navigator.web.tsx'); const tsconfig = require(path.resolve(ROOT_DIR, 'tsconfig.json')); gulp.task('parse-docs', gulp.series( createDocsJson, createDocsInputJson, - createPlaygroundNavigation, - createPlaygroundJson, - buildPlayground, - copyPlaygroundBuildToDocs, + createDocAppNavigator, + createDocAppJson, + buildDocApp, + copyDocAppBuildToDocs, cleanUp, )); @@ -57,13 +57,19 @@ function createDocsInputJson(done: GulpCompletionCallback): void { const typedocOutput = require(inputJsonPath); const themes: DocThemes = createDocThemes('light', 'dark'); - fs.writeFileSync(inputJsonPath, JSON.stringify({ ...typedocOutput, themes }, null, 2)); + fs.writeFileSync( + inputJsonPath, + JSON.stringify({ + ...typedocOutput, + themes, + }, null, 2), + ); done(); } -function createPlaygroundJson(done: GulpCompletionCallback): void { - glob('src/playground/src/components/showcases/**/*.tsx', (error, showcaseFiles: string[]) => { +function createDocAppJson(done: GulpCompletionCallback): void { + glob('src/showcases/components/**/*.tsx', (error, showcaseFiles: string[]) => { const showcases: DocShowcase[] = createDocAppShowcases(showcaseFiles); fs.writeFileSync(`${DOCS_DIR}/src/playground.json`, JSON.stringify(showcases, null, 2)); }); @@ -71,20 +77,20 @@ function createPlaygroundJson(done: GulpCompletionCallback): void { done(); } -function buildPlayground(done: GulpCompletionCallback): void { +function buildDocApp(done: GulpCompletionCallback): void { exec('npm run build:web', { cwd: PLAYGROUND_DIR }); done(); } -function copyPlaygroundBuildToDocs(done: GulpCompletionCallback) { - gulp.src(['src/playground/web-build/**/*']) +function copyDocAppBuildToDocs(done: GulpCompletionCallback) { + gulp.src(['src/showcases/web-build/**/*']) .pipe(gulp.dest('docs/src/assets/playground-build')); done(); } -function createPlaygroundNavigation(done: GulpCompletionCallback): void { +function createDocAppNavigator(done: GulpCompletionCallback): void { const navigationOutput: string = createDocAppNavigation(SHOWCASE_DIR); fs.writeFileSync(APP_NAVIGATOR_PATH, navigationOutput); diff --git a/src/components/ui/card/card.component.tsx b/src/components/ui/card/card.component.tsx index 709e6ef2b..ae20ca421 100644 --- a/src/components/ui/card/card.component.tsx +++ b/src/components/ui/card/card.component.tsx @@ -6,15 +6,17 @@ import React from 'react'; import { - StyleSheet, - View, + GestureResponderEvent, StyleProp, + StyleSheet, TextStyle, - ViewStyle, TouchableOpacity, TouchableOpacityProps, + View, + ViewStyle, } from 'react-native'; import { + Interaction, styled, StyledComponentProps, StyleType, @@ -80,6 +82,22 @@ class CardComponent extends React.Component { static styledComponentName: string = 'Card'; + private onPressIn = (event: GestureResponderEvent): void => { + this.props.dispatch([Interaction.ACTIVE]); + + if (this.props.onPressIn) { + this.props.onPressIn(event); + } + }; + + private onPressOut = (event: GestureResponderEvent): void => { + this.props.dispatch([]); + + if (this.props.onPressOut) { + this.props.onPressOut(event); + } + }; + private getComponentStyle = (source: StyleType): StyleType => { const { backgroundColor, @@ -196,7 +214,9 @@ class CardComponent extends React.Component { + style={[container, styles.container, style]} + onPressIn={this.onPressIn} + onPressOut={this.onPressOut}> {header} {header && this.renderDivider()} {body} diff --git a/src/playground/.gitignore b/src/playground/.gitignore deleted file mode 100644 index 54e5df0fa..000000000 --- a/src/playground/.gitignore +++ /dev/null @@ -1,64 +0,0 @@ -# OSX -# -.DS_Store - -# iOS -# -/ios/Pods/ -/ios/build/ -*.pbxuser -!default.pbxuser -*.mode1v3 -!default.mode1v3 -*.mode2v3 -!default.mode2v3 -*.perspectivev3 -!default.perspectivev3 -xcuserdata -*.xccheckout -*.moved-aside -DerivedData -*.hmap -*.ipa -*.xcuserstate -project.xcworkspace -*.p8 -*.p12 -*.mobileprovision - -# Android/IntelliJ -# -.idea -.gradle -local.properties -*.iml -*.jks -*.key - -# Visual Studio Code -# -.vscode/ - -# node.js -# -node_modules/**/* -yarn-error.log -npm-debug.* - -# BUCK -# -buck-out/ -\.buckd/ -*.keystore - -# Bundle artifact -# -*.jsbundle -build/ - -# Expo -# -.expo/* -*.orig.* -web-build/ -web-report/ diff --git a/src/playground/App.tsx b/src/playground/App.tsx deleted file mode 100644 index 9faedf677..000000000 --- a/src/playground/App.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import App from './src/app/app.component'; - -export default App; diff --git a/src/playground/env/index.js b/src/playground/env/index.js deleted file mode 100644 index eb45b992c..000000000 --- a/src/playground/env/index.js +++ /dev/null @@ -1,6 +0,0 @@ -const path = require('path'); - -module.exports = { - ENV: 'dev', - EVA_PATH: path.resolve(__dirname, '../../../../eva/packages'), -}; diff --git a/src/playground/src/app/app.component.tsx b/src/playground/src/app/app.component.tsx deleted file mode 100644 index fa13e5360..000000000 --- a/src/playground/src/app/app.component.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import React from 'react'; -import { SafeAreaProvider } from 'react-native-safe-area-context'; -import { - ApplicationProvider, - ApplicationProviderProps, - IconPack, - IconRegistry, -} from '@ui-kitten/components'; -import { EvaIconsPack } from '@ui-kitten/eva-icons'; -import { mapping, light, dark } from '@eva-design/eva'; -import { AppNavigator } from '@pg/navigation/app.navigator'; -import { MaterialIconsPack } from '@pg/icons/materialIconPack'; -import { - AppTheme, - ThemeContext, - ThemeContextType, -} from '@pg/themes/themeContext'; -import { default as customMapping } from './mapping.json'; -import { ApplicationLoader } from './applicationLoader.component'; - -const themes = { - Light: light, - Dark: dark, -}; - -const fonts = { - 'opensans-regular': require('../assets/fonts/opensans-regular.ttf'), - 'roboto-regular': require('../assets/fonts/roboto-regular.ttf'), -}; - -const icons: IconPack[] = [ - EvaIconsPack, - MaterialIconsPack, -]; - -export default () => { - - const [theme, setTheme] = React.useState(AppTheme.light); - - const isDarkMode = (): boolean => { - return theme === AppTheme.dark; - }; - - const applicationProviderConfig: ApplicationProviderProps = { - mapping: mapping, - theme: themes[theme], - // @ts-ignore - customMapping: customMapping, - }; - - const themeContextProviderConfig: ThemeContextType = { - theme: theme, - setTheme: setTheme, - isDarkMode: isDarkMode, - }; - - return ( - - - - - - - - - - - - - - ); -}; diff --git a/src/playground/src/app/applicationLoader.component.tsx b/src/playground/src/app/applicationLoader.component.tsx deleted file mode 100644 index 9a988d43d..000000000 --- a/src/playground/src/app/applicationLoader.component.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import React from 'react'; -import { ImageRequireSource } from 'react-native'; -import { - AppLoading, - SplashScreen, -} from 'expo'; -import { Asset } from 'expo-asset'; -import * as Font from 'expo-font'; -import { LoadingAnimation } from './loadingAnimation.component'; - -export interface Assets { - images?: ImageRequireSource[]; - fonts?: { [key: string]: number }; -} - -interface Props { - assets: Assets; - splash: ImageRequireSource; - children: React.ReactNode; -} - -interface State { - loaded: boolean; -} - -type LoadingElement = React.ReactElement<{}>; - -/** - * Loads child component after asynchronous tasks are done - */ -export class ApplicationLoader extends React.Component { - - constructor(props: Props) { - super(props); - SplashScreen.preventAutoHide(); - } - - public state: State = { - loaded: false, - }; - - private onLoadSuccess = () => { - // setTimeout(() => { - this.setState({ loaded: true }); - SplashScreen.hide(); - // }, 1); - }; - - private onLoadError = (error: Error) => { - console.warn(error); - }; - - private loadResources = (): Promise => { - return this.loadResourcesAsync(this.props.assets); - }; - - private loadFonts = (fonts: {[key: string]: number}): Promise => { - return Font.loadAsync(fonts); - }; - - private loadImages = (images: ImageRequireSource[]): Promise => { - const tasks: Promise[] = images.map((image: ImageRequireSource): Promise => { - return Asset.fromModule(image).downloadAsync(); - }); - - return Promise.all(tasks); - }; - - private async loadResourcesAsync(assets: Assets): Promise { - const { fonts, images } = assets; - - // @ts-ignore (expo type error) - return Promise.all([ - fonts && this.loadFonts(fonts), - images && this.loadImages(images), - ]); - } - - private renderLoading = (): LoadingElement => { - return ( - - ); - }; - - public render(): React.ReactNode { - return ( - - {this.state.loaded ? this.props.children : this.renderLoading()} - - - ); - } -} diff --git a/src/playground/src/app/loadingAnimation.component.tsx b/src/playground/src/app/loadingAnimation.component.tsx deleted file mode 100644 index cfda6a9b6..000000000 --- a/src/playground/src/app/loadingAnimation.component.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import React from 'react'; -import { - Animated, - Easing, - ImageRequireSource, - StyleSheet, -} from 'react-native'; - -interface Props { - image: ImageRequireSource; - isLoaded: boolean; -} - -interface State { - animationValue: Animated.Value; - animationCompleted: boolean; -} - -export class LoadingAnimation extends React.Component { - - public state: State = { - animationValue: new Animated.Value(0), - animationCompleted: false, - }; - - public componentDidUpdate(prevProps: Props): void { - if (this.props.isLoaded && this.props.isLoaded !== prevProps.isLoaded) { - this.triggerAnimation(); - } - } - - private triggerAnimation(): void { - Animated.timing(this.state.animationValue, { - toValue: 1, - duration: 700, - useNativeDriver: true, - easing: Easing.in(Easing.exp), - }).start(() => this.onAnimationCompleted()); - } - - private onAnimationCompleted(): void { - this.setState({ animationCompleted: true }); - } - - public renderAnimatedComponent(): React.ReactNode { - const opacity: Animated.AnimatedInterpolation = this.state.animationValue.interpolate({ - inputRange: [0, 1], - outputRange: [1, 0], - }); - const transform: Object[] = [ - { - scale: this.state.animationValue.interpolate({ - inputRange: [0, 1], - outputRange: [1, 1.5], - }), - }, - ]; - - return ( - - - - ); - } - - public render(): React.ReactNode { - const { animationCompleted } = this.state; - return animationCompleted ? null : this.renderAnimatedComponent(); - } -} - -const styles = StyleSheet.create({ - container: { - ...StyleSheet.absoluteFillObject, - alignItems: 'center', - justifyContent: 'center', - backgroundColor: '#fff', - }, - image: { - width: undefined, - height: undefined, - ...StyleSheet.absoluteFillObject, - resizeMode: 'contain', - }, -}); diff --git a/src/playground/src/assets/fonts/opensans-bold.ttf b/src/playground/src/assets/fonts/opensans-bold.ttf deleted file mode 100755 index efdd5e84a..000000000 Binary files a/src/playground/src/assets/fonts/opensans-bold.ttf and /dev/null differ diff --git a/src/playground/src/assets/fonts/opensans-regular.ttf b/src/playground/src/assets/fonts/opensans-regular.ttf deleted file mode 100755 index 29bfd35a2..000000000 Binary files a/src/playground/src/assets/fonts/opensans-regular.ttf and /dev/null differ diff --git a/src/playground/src/assets/fonts/opensans-semibold.ttf b/src/playground/src/assets/fonts/opensans-semibold.ttf deleted file mode 100755 index 54e7059cf..000000000 Binary files a/src/playground/src/assets/fonts/opensans-semibold.ttf and /dev/null differ diff --git a/src/playground/src/assets/fonts/roboto-bold.ttf b/src/playground/src/assets/fonts/roboto-bold.ttf deleted file mode 100755 index d998cf5b4..000000000 Binary files a/src/playground/src/assets/fonts/roboto-bold.ttf and /dev/null differ diff --git a/src/playground/src/assets/fonts/roboto-medium.ttf b/src/playground/src/assets/fonts/roboto-medium.ttf deleted file mode 100755 index f714a514d..000000000 Binary files a/src/playground/src/assets/fonts/roboto-medium.ttf and /dev/null differ diff --git a/src/playground/src/assets/fonts/roboto-regular.ttf b/src/playground/src/assets/fonts/roboto-regular.ttf deleted file mode 100755 index 2b6392ffe..000000000 Binary files a/src/playground/src/assets/fonts/roboto-regular.ttf and /dev/null differ diff --git a/src/playground/src/assets/images/icon.png b/src/playground/src/assets/images/icon.png deleted file mode 100644 index 7f5e01c5e..000000000 Binary files a/src/playground/src/assets/images/icon.png and /dev/null differ diff --git a/src/playground/src/assets/images/splash.png b/src/playground/src/assets/images/splash.png deleted file mode 100644 index e9d97c139..000000000 Binary files a/src/playground/src/assets/images/splash.png and /dev/null differ diff --git a/src/playground/src/components/safeAreaLayout.tsx b/src/playground/src/components/safeAreaLayout.tsx deleted file mode 100644 index 5b92ad71b..000000000 --- a/src/playground/src/components/safeAreaLayout.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React from 'react'; -import { - StyleProp, - ViewStyle, -} from 'react-native'; -import { - EdgeInsets, - useSafeArea, -} from 'react-native-safe-area-context'; -import { - Layout, - LayoutElement, - LayoutProps, - ThemeType, - useTheme, -} from '@ui-kitten/components'; - -export enum SaveAreaInset { - TOP = 'top', - BOTTOM = 'bottom', -} - -type InsetsProp = SaveAreaInset | SaveAreaInset[]; - -export interface SafeAreaLayoutProps extends LayoutProps { - insets?: InsetsProp; -} - -export type SafeAreaLayoutElement = React.ReactElement; - -export const SafeAreaLayout = (props: SafeAreaLayoutProps): LayoutElement => { - - const theme: ThemeType = useTheme(); - - const safeAreaInsets: EdgeInsets = useSafeArea(); - const { insets, style, ...layoutProps } = props; - - - const toStyleProp = (inset: SaveAreaInset): ViewStyle => { - switch (inset) { - case SaveAreaInset.BOTTOM: - return { paddingBottom: safeAreaInsets.bottom }; - case SaveAreaInset.TOP: - return { - backgroundColor: theme['background-basic-color-3'], - paddingTop: safeAreaInsets.top, - }; - } - }; - - const createInsets = (): StyleProp => { - // @ts-ignore - return React.Children.map(insets, toStyleProp); - }; - - return ( - - ); -}; diff --git a/src/playground/src/components/showcase.component.tsx b/src/playground/src/components/showcase.component.tsx deleted file mode 100644 index 8917a59bb..000000000 --- a/src/playground/src/components/showcase.component.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import React from 'react'; -import { - ScrollView, - ViewStyle, -} from 'react-native'; -import { useStyleSheet } from '@ui-kitten/components'; -import { - ComponentShowcase, - ComponentShowcaseSection, -} from '@pg/model/componentShowcase.model'; -import { - ShowcaseSection, - ShowcaseSectionProps, -} from './showcaseSection.component'; - -export interface ShowcaseProps { - showcase: ComponentShowcase; - settings?: { [prop: string]: any }; - renderItem: (props: any) => React.ReactElement; -} - -type ListItemElement = React.ReactElement; - -export const Showcase = (props: ShowcaseProps): React.ReactElement => { - - const styles = StyleSheet.create(); - const { showcase } = props; - - const renderShowcaseElement = (showcaseProps: any): React.ReactElement => { - return props.renderItem({ - ...showcaseProps, - ...props.settings, - }); - }; - - const renderSectionElement = (item: ComponentShowcaseSection): ListItemElement => ( - - ); - - const renderSectionItem = (item: ComponentShowcaseSection, index: number): ListItemElement => { - - const listItemElement: ListItemElement = renderSectionElement(item); - - const borderStyle: ViewStyle | null = index === showcase.sections.length - 1 ? null : styles.itemBorder; - - return React.cloneElement(listItemElement, { - key: index, - style: [styles.item, borderStyle, listItemElement.props.style], - }); - }; - - return ( - - {showcase.sections.map(renderSectionItem)} - - ); -}; - -const StyleSheet = useStyleSheet({ - container: { - flex: 1, - backgroundColor: 'background-basic-color-1', - }, - item: { - paddingHorizontal: 24, - paddingVertical: 16, - }, - itemBorder: { - borderBottomWidth: 1, - borderBottomColor: 'border-basic-color-3', - }, -}); - diff --git a/src/playground/src/components/showcaseContainer.component.tsx b/src/playground/src/components/showcaseContainer.component.tsx deleted file mode 100644 index 3e7654c3c..000000000 --- a/src/playground/src/components/showcaseContainer.component.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import React from 'react'; -import { StyleSheet } from 'react-native'; -import { - AppTheme, - ThemeContext, - ThemeContextType, -} from '@pg/themes/themeContext'; -import { - ComponentShowcase, - ComponentShowcaseSetting, -} from '@pg/model/componentShowcase.model'; -import { - SafeAreaLayout, - SafeAreaLayoutProps, - SaveAreaInset, -} from './safeAreaLayout'; -import { Toolbar } from './toolbar.component'; -import { Showcase } from './showcase.component'; -import { ShowcaseSettings } from './showcaseSettings.component'; - -interface ShowcaseContainerProps extends SafeAreaLayoutProps { - showcase: ComponentShowcase; - settings?: ComponentShowcaseSetting[]; - renderItem: (props: any) => React.ReactElement; - onBackPress?: () => void; -} - -export const ShowcaseContainer = (props: ShowcaseContainerProps): React.ReactElement => { - - const [showcaseSettings, setShowcaseSettings] = React.useState({}); - const themeContext: ThemeContextType = React.useContext(ThemeContext); - const themes: AppTheme[] = [AppTheme.light, AppTheme.dark]; - - const onSelectSetting = (selectedSettings: { [prop: string]: any }): void => { - setShowcaseSettings({ ...settings, ...selectedSettings }); - }; - - const onResetSettings = (): void => { - setShowcaseSettings({}); - }; - - const { showcase, settings, renderItem, children, onBackPress, ...layoutProps } = props; - - return ( - - - - {children} - - - ); -}; - -const styles = StyleSheet.create({ - container: { - flex: 1, - }, -}); diff --git a/src/playground/src/components/showcaseItem.component.tsx b/src/playground/src/components/showcaseItem.component.tsx deleted file mode 100644 index 68d1b1038..000000000 --- a/src/playground/src/components/showcaseItem.component.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import React from 'react'; -import { - View, - ViewProps, - StyleSheet, -} from 'react-native'; -import { - Text, - TextElement, -} from '@ui-kitten/components'; -import { ComponentShowcaseItem } from '@pg/model/componentShowcase.model'; - -export interface ShowcaseItemProps extends ViewProps { - item: ComponentShowcaseItem; - renderItem: (props: any) => React.ReactElement; -} - -export const ShowcaseItem = (props: ShowcaseItemProps): React.ReactElement => { - - const { style, item, renderItem } = props; - - const renderElement = (): React.ReactElement => { - const element: React.ReactElement = renderItem(item.props); - - return React.cloneElement(element, { - style: [element.props.style], - }); - }; - - const renderTitleElement = (): TextElement => ( - - {item.title} - - ); - - - const titleElement: TextElement = item.title && renderTitleElement(); - const showcaseElement: React.ReactElement = renderElement(); - - return ( - - {titleElement} - {showcaseElement} - - ); -}; - -const styles = StyleSheet.create({ - container: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - }, - titleLabel: { - minWidth: 128, - fontSize: 13, - textAlign: 'left', - }, -}); diff --git a/src/playground/src/components/showcaseSection.component.tsx b/src/playground/src/components/showcaseSection.component.tsx deleted file mode 100644 index 2588ad5ba..000000000 --- a/src/playground/src/components/showcaseSection.component.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import React from 'react'; -import { - StyleSheet, - View, - ViewProps, -} from 'react-native'; -import { - Text, - TextElement, - TextProps, -} from '@ui-kitten/components'; -import { - ComponentShowcaseItem, - ComponentShowcaseSection, -} from '@pg/model/componentShowcase.model'; -import { - ShowcaseItem, - ShowcaseItemProps, -} from './showcaseItem.component'; - -export interface ShowcaseSectionProps extends ViewProps { - section: ComponentShowcaseSection; - renderItem: (props: any) => React.ReactElement; -} - -export const ShowcaseSection = (props: ShowcaseSectionProps): React.ReactElement => { - - const { style, section, renderItem } = props; - - const renderShowcaseItem = (item: ComponentShowcaseItem, index: number): React.ReactElement => ( - - ); - - const renderTitleElement = (): TextElement => ( - - {section.title} - - ); - - const titleElement: React.ReactElement = section.title && renderTitleElement(); - - return ( - - {titleElement} - {section.items.map(renderShowcaseItem)} - - ); -}; - -const styles = StyleSheet.create({ - container: {}, - titleLabel: { - marginVertical: 8, - fontSize: 20, - lineHeight: 28, - textAlign: 'left', - }, - item: { - marginVertical: 8, - }, -}); diff --git a/src/playground/src/components/showcaseSettings.component.tsx b/src/playground/src/components/showcaseSettings.component.tsx deleted file mode 100644 index 879f0439f..000000000 --- a/src/playground/src/components/showcaseSettings.component.tsx +++ /dev/null @@ -1,143 +0,0 @@ -import React from 'react'; -import { - I18nManager, - Platform, - View, - ViewProps, -} from 'react-native'; -import { Updates } from 'expo'; -import { - Button, - CheckBox, - OverflowMenu, - OverflowMenuItemType, - useStyleSheet, -} from '@ui-kitten/components'; -import { ComponentShowcaseSetting } from '@pg/model/componentShowcase.model'; -import { AppTheme } from '@pg/themes/themeContext'; -import { - ColorPaletteIcon, - SettingsIcon, - TrashIcon, -} from '@pg/icons'; - -export interface ShowcaseSettingsProps extends ViewProps { - themes?: AppTheme[]; - settings?: ComponentShowcaseSetting[]; - onThemeSelect?: (theme: AppTheme) => void; - onSettingSelect?: (setting: { [prop: string]: any }) => void; - onReset: () => void; -} - -export const ShowcaseSettings = (props: ShowcaseSettingsProps): React.ReactElement => { - - const [themesMenuVisible, setThemesMenuVisible] = React.useState(false); - const [settingsMenuVisible, setSettingsMenuVisible] = React.useState(false); - - const styles = StyleSheet.create(); - - const createSettingMenuItem = (setting: ComponentShowcaseSetting): OverflowMenuItemType => { - return { - title: setting.description || `${setting.propertyName}: ${setting.value}`, - }; - }; - - const createThemeMenuItem = (title: string): OverflowMenuItemType => { - return { title }; - }; - - const onThemeSelect = (index: number): void => { - props.onThemeSelect(props.themes[index]); - setThemesMenuVisible(false); - }; - - const onResetButtonPress = (): void => { - props.onReset(); - }; - - const onSettingSelect = (index: number): void => { - const { [index]: setting } = props.settings; - - props.onSettingSelect({ - [setting.propertyName]: setting.value, - }); - - setSettingsMenuVisible(false); - }; - - const createThemesMenuItems = (): OverflowMenuItemType[] => { - return props.themes && props.themes.map(createThemeMenuItem); - }; - - const createSettingsMenuItems = (): OverflowMenuItemType[] => { - const settings = props.settings && props.settings.map(createSettingMenuItem); - return settings || []; - }; - - const toggleThemesMenu = (): void => { - setThemesMenuVisible(!themesMenuVisible); - }; - - const toggleSettingsMenu = (): void => { - setSettingsMenuVisible(!settingsMenuVisible); - }; - - const toggleRtl = (): void => { - I18nManager.forceRTL(!I18nManager.isRTL); - I18nManager.allowRTL(I18nManager.isRTL); - Platform.OS !== 'web' && Updates.reload(); - }; - - return ( - - - - - - - - - - - ); -}; - -const StyleSheet = useStyleSheet({ - container: { - flexDirection: 'row', - justifyContent: 'space-evenly', - paddingVertical: 16, - backgroundColor: 'background-basic-color-2', - }, -}); diff --git a/src/playground/src/components/toolbar.component.tsx b/src/playground/src/components/toolbar.component.tsx deleted file mode 100644 index 7148927af..000000000 --- a/src/playground/src/components/toolbar.component.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react'; -import { ImageProps } from 'react-native'; -import { - Divider, - OverflowMenu, - OverflowMenuItemType, - StyleType, - TopNavigation, - TopNavigationAction, - TopNavigationActionElement, - TopNavigationProps, -} from '@ui-kitten/components'; -import { - BackIcon, - MoreVerticalIcon, -} from '@pg/icons'; - -export type ToolbarMenu = OverflowMenuItemType[]; - -export interface ToolbarProps extends TopNavigationProps { - menu?: ToolbarMenu; - backIcon?: (style: StyleType) => React.ReactElement; - menuIcon?: (style: StyleType) => React.ReactElement; - onMenuItemSelect?: (index: number) => void; - onBackPress?: () => void; -} - -export const Toolbar = (props: ToolbarProps): TopNavigationActionElement => { - - const { menu, backIcon, menuIcon, onMenuItemSelect, onBackPress, ...topNavigationProps } = props; - const [menuVisible, setMenuVisible] = React.useState(false); - - const onMenuSelect = (index: number) => { - setMenuVisible(false); - onMenuItemSelect && onMenuItemSelect(index); - }; - - const onMenuActionPress = () => { - setMenuVisible(!menuVisible); - }; - - const renderMenuAction = (): TopNavigationActionElement => ( - - - - ); - - const renderBackAction = (): TopNavigationActionElement => ( - - ); - - return ( - - - - - ); -}; diff --git a/src/playground/src/icons/index.tsx b/src/playground/src/icons/index.tsx deleted file mode 100644 index 14ee7bbc4..000000000 --- a/src/playground/src/icons/index.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React from 'react'; -import { - Icon, - IconElement, - StyleType, -} from '@ui-kitten/components'; - -/** - * Should contain all icon names used in app. - * Needed to support compatible icon names between different icon packs. - */ -export interface AppIconRegistry { - ['arrow-back']: string; - ['brush']: string; - ['color-palette']: string; - ['grid']: string; - ['list']: string; - ['menu']: string; - ['more-vertical']: string; - ['search']: string; - ['settings']: string; - ['star']: string; - ['trash']: string; -} - -export const BackIcon = (style): IconElement => ( - -); - -export const BrushIcon = (style): IconElement => ( - -); - -export const ColorPaletteIcon = (style: StyleType): IconElement => ( - -); - -export const GridIcon = (style: StyleType): IconElement => ( - -); - -export const ListIcon = (style: StyleType): IconElement => ( - -); - -export const MenuIcon = (style): IconElement => ( - -); - -export const MoreVerticalIcon = (style): IconElement => ( - -); - -export const SearchIcon = (style: StyleType): IconElement => ( - -); - -export const SettingsIcon = (style: StyleType): IconElement => ( - -); - -export const StarIcon = (style: StyleType): IconElement => ( - -); - -export const TrashIcon = (style: StyleType): IconElement => ( - -); - - diff --git a/src/playground/src/icons/materialIconPack.tsx b/src/playground/src/icons/materialIconPack.tsx deleted file mode 100644 index af1efdcfd..000000000 --- a/src/playground/src/icons/materialIconPack.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import { StyleSheet } from 'react-native'; -import { MaterialIcons } from '@expo/vector-icons'; -import { AppIconRegistry } from '@pg/icons'; - -export const MaterialIconsPack = { - name: 'material', - icons: createIconsMap(), -}; - -function createIconsMap() { - return new Proxy({}, { - get(target, name) { - return IconProvider(name); - }, - }); -} - -const IconProvider = (name) => ({ - toReactElement: (props) => MaterialIcon({ name, ...props }), -}); - -const MaterialIconRegistry: AppIconRegistry = { - ['arrow-back']: 'arrow-back', - ['brush']: 'brush', - ['color-palette']: 'palette', - ['grid']: 'dashboard', - ['list']: 'list', - ['menu']: 'menu', - ['more-vertical']: 'more-vert', - ['search']: 'search', - ['settings']: 'settings', - ['star']: 'star', - ['trash']: 'delete', -}; - -function MaterialIcon(props) { - const { name, style } = props; - const { height, tintColor, ...iconStyle } = StyleSheet.flatten(style); - return ( - - ); -} diff --git a/src/playground/src/model/componentShowcase.model.ts b/src/playground/src/model/componentShowcase.model.ts deleted file mode 100644 index 0f3f7b7b8..000000000 --- a/src/playground/src/model/componentShowcase.model.ts +++ /dev/null @@ -1,20 +0,0 @@ -export interface ComponentShowcase { - title: string; - sections: ComponentShowcaseSection[]; -} - -export interface ComponentShowcaseSection { - title?: string; - items: ComponentShowcaseItem[]; -} - -export interface ComponentShowcaseItem { - title?: string; - props: any; -} - -export interface ComponentShowcaseSetting { - propertyName: string; - value: any; - description?: string; -} diff --git a/src/playground/src/navigation/app.navigator.tsx b/src/playground/src/navigation/app.navigator.tsx deleted file mode 100644 index 197d38d14..000000000 --- a/src/playground/src/navigation/app.navigator.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { Platform } from 'react-native'; -import { - createAppContainer, - NavigationContainer, -} from 'react-navigation'; -import { createBrowserApp } from '@react-navigation/web'; -import { HomeNavigator } from './home.navigator'; - -const createAppNavigator = (): NavigationContainer => { - if (Platform.OS === 'web') { - return createBrowserApp(HomeNavigator, { history: 'hash' }); - } - - return createAppContainer(HomeNavigator); -}; - -export const AppNavigator = createAppNavigator(); diff --git a/src/playground/src/navigation/components.navigator.tsx b/src/playground/src/navigation/components.navigator.tsx deleted file mode 100644 index 9ae1fff29..000000000 --- a/src/playground/src/navigation/components.navigator.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { createStackNavigator } from 'react-navigation-stack'; -import { ComponentsScreen } from '@pg/scenes/components/components.component'; -import { AutocompleteScreen } from '@pg/scenes/autocomplete/autocomplete.component'; -import { AvatarScreen } from '@pg/scenes/avatar/avatar.component'; -import { BottomNavigationScreen } from '@pg/scenes/bottomNavigation/bottomNavigation.component'; -import { ButtonScreen } from '@pg/scenes/button/button.component'; -import { ButtonGroupScreen } from '@pg/scenes/buttonGroup/buttonGroup.component'; -import { CalendarScreen } from '@pg/scenes/calendar/calendar.component'; -import { CardScreen } from '@pg/scenes/card/card.component'; -import { RangeCalendarScreen } from '@pg/scenes/rangeCalendar/rangeCalendar.component'; -import { IconScreen } from '@pg/scenes/icon/icon.component'; -import { DrawerScreen } from '@pg/scenes/drawer/drawer.component'; -import { CheckBoxScreen } from '@pg/scenes/checkbox/checkbox.component'; -import { DatepickerScreen } from '@pg/scenes/datepicker/datepicker.component'; -import { InputScreen } from '@pg/scenes/input/input.component'; -import { ModalScreen } from '@pg/scenes/modal/modal.component'; -import { MenuScreen } from '@pg/scenes/menu/menu.component'; -import { ListScreen } from '@pg/scenes/list/list.component'; -import { LayoutScreen } from '@pg/scenes/layout/layout.component'; -import { PopoverScreen } from '@pg/scenes/popover/popover.component'; -import { RadioScreen } from '@pg/scenes/radio/radio.component'; -import { RadioGroupScreen } from '@pg/scenes/radioGroup/radioGroup.component'; -import { SpinnerScreen } from '@pg/scenes/spinner/spinner.component'; -import { TabViewScreen } from '@pg/scenes/tabView/tabView.component'; -import { TooltipScreen } from '@pg/scenes/tooltip/tooltip.component'; -import { TextScreen } from '@pg/scenes/text/text.component'; -import { TopNavigationScreen } from '@pg/scenes/topNavigation/topNavigation.component'; -import { ToggleScreen } from '@pg/scenes/toggle/toggle.component'; -import { SelectScreen } from '@pg/scenes/select/select.component'; -import { OverflowMenuScreen } from '@pg/scenes/overflowMenu/overflowMenu.component'; -import { RangeDatepickerScreen } from '@pg/scenes/rangeDatepicker/rangeDatepicker.component'; - -export const ComponentsNavigator = createStackNavigator({ - ['Components']: ComponentsScreen, - ['Autocomplete']: AutocompleteScreen, - ['Avatar']: AvatarScreen, - ['BottomNavigation']: BottomNavigationScreen, - ['Button']: ButtonScreen, - ['ButtonGroup']: ButtonGroupScreen, - ['Calendar']: CalendarScreen, - ['RangeCalendar']: RangeCalendarScreen, - ['Card']: CardScreen, - ['CheckBox']: CheckBoxScreen, - ['Drawer']: DrawerScreen, - ['Datepicker']: DatepickerScreen, - ['RangeDatepicker']: RangeDatepickerScreen, - ['Icon']: IconScreen, - ['Input']: InputScreen, - ['Layout']: LayoutScreen, - ['List']: ListScreen, - ['Menu']: MenuScreen, - ['Modal']: ModalScreen, - ['Popover']: PopoverScreen, - ['Radio']: RadioScreen, - ['RadioGroup']: RadioGroupScreen, - ['Spinner']: SpinnerScreen, - ['TabView']: TabViewScreen, - ['Tooltip']: TooltipScreen, - ['Text']: TextScreen, - ['Toggle']: ToggleScreen, - ['TopNavigation']: TopNavigationScreen, - ['OverflowMenu']: OverflowMenuScreen, - ['Select']: SelectScreen, -}, { - headerMode: 'none', -}); diff --git a/src/playground/src/navigation/home.navigator.tsx b/src/playground/src/navigation/home.navigator.tsx deleted file mode 100644 index 9741feac3..000000000 --- a/src/playground/src/navigation/home.navigator.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { Platform } from 'react-native'; -import { createBottomTabNavigator } from 'react-navigation-tabs'; -import { createDrawerNavigator } from 'react-navigation-drawer'; -import { HomeDrawer } from '@pg/scenes/home/homeDrawer.component'; -import { HomeTabBar } from '@pg/scenes/home/homeTabBar.component'; -import { ComponentsNavigator } from './components.navigator'; -import { ServicesNavigator } from './services.navigator'; -import { SamplesNavigator } from './samples.navigator'; - -const HomeBottomNavigator = createBottomTabNavigator({ - ['Components']: ComponentsNavigator, - ['Services']: ServicesNavigator, - ['Samples']: SamplesNavigator, -}, { - tabBarComponent: HomeTabBar, -}); - -const HomeDrawerNavigator = createDrawerNavigator({ - ['Home']: HomeBottomNavigator, -}, { - contentComponent: HomeDrawer, - initialRouteName: 'Home', -}); - -const createHomeNavigator = () => { - if (Platform.OS === 'web') { - return HomeBottomNavigator; - } - - return HomeDrawerNavigator; -}; - -export const HomeNavigator = createHomeNavigator(); - diff --git a/src/playground/src/navigation/samples.navigator.tsx b/src/playground/src/navigation/samples.navigator.tsx deleted file mode 100644 index 47e5ba412..000000000 --- a/src/playground/src/navigation/samples.navigator.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { createStackNavigator } from 'react-navigation-stack'; -import { SamplesScreen } from '@pg/scenes/samples/samples.component'; -import { SampleAuthScreen } from '@pg/scenes/sampleAuth/sampleAuth.component'; - -export const SamplesNavigator = createStackNavigator({ - ['Samples']: SamplesScreen, - ['Auth']: SampleAuthScreen, -}, { - headerMode: 'none', -}); diff --git a/src/playground/src/navigation/services.navigator.tsx b/src/playground/src/navigation/services.navigator.tsx deleted file mode 100644 index 1c6f86eda..000000000 --- a/src/playground/src/navigation/services.navigator.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { createStackNavigator } from 'react-navigation-stack'; -import { ServicesScreen } from '@pg/scenes/services/services.component'; -import { UseStyleSheetScreen } from '@pg/scenes/useStyleSheet/useStyleSheet.component'; -import { WithStylesScreen } from '@pg/scenes/withStyles/withStyles.component'; -import { ThemeProviderScreen } from '@pg/scenes/themeProvider/themeProvider.component'; -import { UseThemeScreen } from '@pg/scenes/useTheme/useTheme.component'; -import { StyledComponentScreen } from '@pg/scenes/styled/styled.component'; - -export const ServicesNavigator = createStackNavigator({ - ['Services']: ServicesScreen, - ['Use Theme']: UseThemeScreen, - ['Use StyleSheet']: UseStyleSheetScreen, - ['With Styles']: WithStylesScreen, - ['Theme Provider']: ThemeProviderScreen, - ['Styled']: StyledComponentScreen, -}, { - headerMode: 'none', -}); diff --git a/src/playground/src/scenes/autocomplete/autoCompleteShowcaseComponents.tsx b/src/playground/src/scenes/autocomplete/autoCompleteShowcaseComponents.tsx deleted file mode 100644 index ce14ad094..000000000 --- a/src/playground/src/scenes/autocomplete/autoCompleteShowcaseComponents.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { - ListRenderItemInfo, - View, -} from 'react-native'; -import { - Avatar, - Text, -} from '@ui-kitten/components'; -import { AutocompleteShowcaseOption } from './type'; - -type Option = AutocompleteShowcaseOption; - -export const CustomOptionsAutocompleteItem = ({ item }: ListRenderItemInfo