diff --git a/README.md b/README.md index fde9be205..e50834a06 100644 --- a/README.md +++ b/README.md @@ -31,14 +31,32 @@ There is a huge variety of customizable layouts, use “as is” or add new bloc ## Quick Start -Start a new app with UI Kitten template from a scratch: +Install UI Kitten and Eva Design System packages via npm: ```bash -react-native init --template ui-kitten +npm i react-native-ui-kitten @eva-design/eva ``` -This will setup a new React Native application configured with UI Kitten. -Refer to the [Documentation][link:doc-where-start] for more options to start. +Modify your application root: + +```jsx +import React from 'react'; +import { mapping, light as lightTheme } from '@eva-design/eva'; +import { ApplicationProvider, Layout } from 'react-native-ui-kitten'; + +const App = () => ( + + + +); + +export default App; +``` + +The code above will configure your application component to apply Eva Design System styling magic. +Read the [Design System guide][link:doc-theme-system] for more details. ## How can I support the developers? - Star our GitHub repo :star: @@ -65,7 +83,7 @@ We're always happy to receive your feedback! [link:travis]: https://travis-ci.com/akveo/react-native-ui-kitten [link:coveralls]: https://coveralls.io/github/akveo/react-native-ui-kitten?branch=master [link:doc-homepage]: https://akveo.github.io/react-native-ui-kitten -[link:doc-where-start]: https://akveo.github.io/react-native-ui-kitten/docs/getting-started/where-to-start +[link:doc-theme-system]: https://akveo.github.io/react-native-ui-kitten/docs/design-system/eva-design-system-intro [link:kitten-tricks]: https://github.com/akveo/kittenTricks [link:eva-icons]: https://github.com/akveo/eva-icons [link:akveo-homepage]: https://akveo.com diff --git a/docs/src/articles/getting-started/where-to-start.md b/docs/src/articles/getting-started/where-to-start.md index 47ebe4690..c7d2766fc 100644 --- a/docs/src/articles/getting-started/where-to-start.md +++ b/docs/src/articles/getting-started/where-to-start.md @@ -5,15 +5,12 @@ UI Kitten is a framework of UI components powered by Eva Design System for your ## Quick start tutorials -- **[Start a new App](guides/start-a-new-app)** +**[Install UI Kitten](guides/install-ui-kitten)** -This tutorial explains how to setup React Native app with UI Kitten from a scratch. - -- **[Install into existing App](guides/install-into-existing-app)** +This tutorial explains how to setup React Native app with UI Kitten. Please consider creating an issue on GitHub if your use case is not described above. But we kindly ask to always look through the documentation and the list of existing issues first. -
## I'm new to React Native or mobile development diff --git a/docs/src/articles/guides/install-existing.md b/docs/src/articles/guides/install-existing.md deleted file mode 100644 index cd44c2af0..000000000 --- a/docs/src/articles/guides/install-existing.md +++ /dev/null @@ -1,37 +0,0 @@ -# Add into existing project - -If you already have an existing code base, you're able to give UI Kitten a try as simple as `npm install`. Please refer to [Start a new App Guide](guides/start-a-new-app) if you don't have any code yet. - -
- -## Install UI Kitten and Eva Design System - -```bash -npm i react-native-ui-kitten @eva-design/eva -``` - -
- -## Configure Application Root - -At this step you have everything in place, let's configure UI Kitten to be used in your app. -In your **App.js**: - -```js -import React from 'react'; -import { mapping, light as lightTheme } from '@eva-design/eva'; -import { ApplicationProvider } from 'react-native-ui-kitten'; -import { RootComponent } from '../path-to/root.component'; // <-- Import your application entry point - -const App = () => ( - - - -); - -export default App; -``` - -That's it. UI Kitten is ready now. diff --git a/docs/src/articles/guides/install-new.md b/docs/src/articles/guides/install-new.md deleted file mode 100644 index 6bb8613bb..000000000 --- a/docs/src/articles/guides/install-new.md +++ /dev/null @@ -1,30 +0,0 @@ -# Starting a new App - -If you don't have any code yet, please consider checking React Native Getting Started documentation for help creating your app. - -
- -## Installation - -First of all, you should have React Native CLI installed. - -```bash -npm i -g react-native-cli -``` - -
- -## Create a New Project - -A new project can be created using React Native CLI tools ant UI Kitten template. - -```bash -react-native init --template ui-kitten -``` - -Or, if you want to init with TypeScript: -```bash -react-native init --template ui-kitten-typescript -``` - -That's it. UI Kitten is ready now. For the next steps, simply follow command line instructions. diff --git a/docs/src/articles/guides/install.md b/docs/src/articles/guides/install.md new file mode 100644 index 000000000..678221eb3 --- /dev/null +++ b/docs/src/articles/guides/install.md @@ -0,0 +1,54 @@ +# Install UI Kitten + +If you don't have any code yet, please consider checking React Native Getting Started documentation for help creating your app. + +
+ +## Installation + +We recommend to develop React Native with expo-cli, you can install it with the following command. + +```bash +npm i -g expo-cli +``` + +
+ +## Create a New Project + +A new project can be created using Expo CLI tools. + +```bash +expo init PROJECT-NAME +``` +
+ +## Install UI Kitten and Eva Design System + +```bash +npm i react-native-ui-kitten @eva-design/eva +``` + +
+ +## Configure Application Root + +At this step you have everything in place, let's configure UI Kitten to be used in your app. + +```js +import * as React from 'react'; +import { mapping, light as lightTheme } from '@eva-design/eva'; +import { ApplicationProvider, Layout } from 'react-native-ui-kitten'; + +const App = () => ( + + + +); + +export default App; +``` + +That's it. UI Kitten is ready now. diff --git a/docs/src/assets/images/components/drawer.svg b/docs/src/assets/images/components/drawer.svg new file mode 100644 index 000000000..27b0b78cc --- /dev/null +++ b/docs/src/assets/images/components/drawer.svg @@ -0,0 +1,24 @@ + + + + icon/component/Drawer + Created with Sketch. + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/src/assets/images/overview/drawer.png b/docs/src/assets/images/overview/drawer.png new file mode 100644 index 000000000..0bc50d4b4 Binary files /dev/null and b/docs/src/assets/images/overview/drawer.png differ diff --git a/docs/src/structure.ts b/docs/src/structure.ts index 194544431..6616fb224 100644 --- a/docs/src/structure.ts +++ b/docs/src/structure.ts @@ -33,23 +33,12 @@ export const structure = [ children: [ { type: 'page', - name: 'Start a new App', + name: 'Install UI Kitten', children: [ { type: 'block', block: 'markdown', - source: 'guides/install-new.md', - }, - ], - }, - { - type: 'page', - name: 'Install into existing App', - children: [ - { - type: 'block', - block: 'markdown', - source: 'guides/install-existing.md', + source: 'guides/install.md', }, ], }, @@ -334,6 +323,20 @@ export const structure = [ }, ], }, + { + type: 'tabs', + name: 'Drawer', + icon: 'drawer.svg', + source: [ + 'Drawer', + ], + overview: [ + { + name: 'Drawer', + images: ['drawer.png'], + }, + ], + }, { type: 'tabs', name: 'ViewPager', diff --git a/src/framework/ui/drawer/drawer.component.tsx b/src/framework/ui/drawer/drawer.component.tsx new file mode 100644 index 000000000..cb5483d83 --- /dev/null +++ b/src/framework/ui/drawer/drawer.component.tsx @@ -0,0 +1,241 @@ +import React from 'react'; +import { + styled, + StyledComponentProps, +} from '@kitten/theme'; +import { + Menu, + MenuElement, + MenuProps, +} from '../menu/menu.component'; +import { MenuItemType } from '../menu/menuItem.component'; + +export type DrawerHeaderElement = React.ReactElement; +export type DrawerFooterElement = React.ReactElement; + +interface ComponentProps { + header?: () => DrawerHeaderElement; + footer?: () => DrawerFooterElement; +} + +export type DrawerProps = StyledComponentProps & ComponentProps & MenuProps; +export type DrawerElement = React.ReactElement; + +/** + * Styled Navigation Drawer component. The principle of rendering a Drawer is the same as a rendering a List. + * + * @extends React.Component + * + * @property {MenuItemType[]} data - Determines the items displayed in drawer menu. + * + * @property {string} appearance - Determines the appearance of the component. + * Can be `default` or `noDivider`. + * Default is `default`. + * + * @property {() => DrawerHeaderElement} header - Determines the function to render a header. Optional. + * + * @property {() => DrawerFooterElement} footer - Determines the function to render a footer. Optional. + * + * @property {(index: number, event: GestureResponderEvent) => void} onSelect - Determines the function to handle + * menu item press. + * + * @property ListProps + * + * @overview-example Simple Usage + * + * ``` + * import React from 'react'; + * import { Drawer } from 'react-native-ui-kitten'; + * + * const data = [ + * { title: 'Feed' }, + * { title: 'Messages' }, + * { title: 'Settings' }, + * ]; + * + * export const DrawerShowcase = (props) => ( + * + * ); + * ``` + * + * @overview-example Using with React Navigation + * + * ``` + * import React from 'react'; + * import { createDrawerNavigator, SafeAreaView } from 'react-navigation'; + * import { Feed, Messages, Settings } from './path-to/screen-components'; // <-- Import screen components + * + * class DrawerNavigation extends React.Component { + * + * constructor(props) { + * super(props); + * this.drawerData = props.items.map(this.createDrawerItem); + * } + * + * onRouteSelect = (index) => { + * const { [index]: route } = this.drawerData; + * this.props.navigation.navigate(route.title); + * }; + * + * createDrawerItem = ({ routeName }) => ({ + * title: routeName, + * }); + * + * render() { + * return ( + * + * + * + * ); + * } + * } + * + * export const DrawerNavigator = createDrawerNavigator({ + * Feed: Feed, + * Messages: Messages, + * Settings: Settings, + * }, { + * contentComponent: DrawerNavigation, + * }); + * + * ``` + * + * @example Header + * + * ``` + * import React from 'react'; + * import { View } from 'react-native'; + * import { Drawer, Text } from 'react-native-ui-kitten'; + * + * const data = [ + * { title: 'Feed' }, + * { title: 'Messages' }, + * { title: 'Settings' }, + * ]; + * + * const DrawerHeader = (style) => ( + * + * Awesome Application + * + * ); + * + * export const DrawerShowcase = (props) => ( + * + * ); + * ``` + * + * @example Icon Item + * + * ``` + * import React from 'react'; + * import { View, Image } from 'react-native'; + * import { Drawer } from 'react-native-ui-kitten'; + * + * const data = [ + * { title: 'Feed' }, + * { title: 'Messages', icon: MessagesIcon }, + * { title: 'Settings' }, + * ]; + * + * const MessagesIcon = (style) => ( + * + * ); + * + * export const DrawerShowcase = (props) => ( + * + * ); + * ``` + * + * @example Notification Badge Item + * + * ``` + * import React from 'react'; + * import { View, StyleSheet } from 'react-native'; + * import { Drawer, Text } from 'react-native-ui-kitten'; + * + * const data = [ + * { title: 'Feed' }, + * { title: 'Messages', accessory: NotificationBadge }, + * { title: 'Settings' }, + * ]; + * + * const NotificationBadge = (style) => ( + * + * NEW + * + * ); + * + * export const DrawerShowcase = (props) => ( + * + * ); + * + * const styles = StyleSheet.create({ + * badge: { + * justifyContent: 'center', + * alignItems: 'center', + * height: 24, + * width: 48, + * paddingHorizontal: 24, + * borderRadius: 12, + * backgroundColor: 'orange', + * }, + * }); + * ``` + */ + +class DrawerComponent extends React.Component { + + static styledComponentName: string = 'Drawer'; + + private renderHeader = (): DrawerHeaderElement => { + const { header } = this.props; + + return header(); + }; + + private renderFooter = (): DrawerFooterElement => { + const { footer } = this.props; + + return footer(); + }; + + private renderMenu = (): MenuElement => { + const { style, header, footer, themedStyle, ...restProps } = this.props; + + return ( + + ); + }; + + private renderComponentChildren = (): [DrawerHeaderElement, MenuElement, DrawerFooterElement] => { + const { header, footer } = this.props; + + return [ + header && this.renderHeader(), + this.renderMenu(), + footer && this.renderFooter(), + ]; + }; + + public render(): React.ReactNode { + const [header, menu, footer] = this.renderComponentChildren(); + + return ( + + {header} + {menu} + {footer} + + ); + } +} + +export const Drawer = styled(DrawerComponent); diff --git a/src/framework/ui/drawer/drawer.spec.tsx b/src/framework/ui/drawer/drawer.spec.tsx new file mode 100644 index 000000000..775d00ee0 --- /dev/null +++ b/src/framework/ui/drawer/drawer.spec.tsx @@ -0,0 +1,136 @@ +import React from 'react'; +import { + Image, + ImageSourcePropType, + TouchableOpacity, +} from 'react-native'; +import { + fireEvent, + render, + RenderAPI, +} from 'react-native-testing-library'; +import { + ApplicationProvider, + ApplicationProviderProps, +} from '@kitten/theme'; +import { + Drawer, + DrawerProps, +} from '../drawer/drawer.component'; +import { DrawerFence } from './drawerFence.component'; +import { + MenuItemType, + MenuItem, +} from '../menu/menuItem.component'; +import { + mapping, + theme, +} from '../support/tests'; + +const data: MenuItemType[] = [ + { title: 'Item 1' }, + { title: 'Item 2' }, + { title: 'Item 3' }, +]; + +const Mock = (props?: DrawerProps): React.ReactElement => { + return ( + + + + ); +}; + +const renderComponent = (props?: DrawerProps): RenderAPI => { + return render( + , + ); +}; + +describe('@drawer: component checks', () => { + + it('* should render proper number of items', () => { + const component: RenderAPI = renderComponent(); + + expect(component.getAllByType(MenuItem).length).toEqual(3); + }); + + it('* item should render title', () => { + const component: RenderAPI = renderComponent(); + + expect(component.getByText('Item 1')).toBeTruthy(); + expect(component.getByText('Item 2')).toBeTruthy(); + expect(component.getByText('Item 3')).toBeTruthy(); + }); + + it('* item should render icon', () => { + const source: ImageSourcePropType = { uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' }; + + const icon = () => ( + + ); + + const drawerData: MenuItemType[] = [ + { title: 'Item 1', icon }, + { title: 'Item 2', icon }, + { title: 'Item 3', icon }, + ]; + + const component: RenderAPI = renderComponent({ data: drawerData, onSelect: () => 1 }); + + expect(component.getAllByTestId('@drawer-item-icon').length).toEqual(3); + }); + + it('* item should render accessory view', () => { + const source: ImageSourcePropType = { uri: 'https://akveo.github.io/eva-icons/fill/png/128/star.png' }; + + const accessory = () => ( + + ); + + const drawerData: MenuItemType[] = [ + { title: 'Item 1', accessory }, + { title: 'Item 2', accessory }, + { title: 'Item 3', accessory }, + ]; + + const component: RenderAPI = renderComponent({ data: drawerData, onSelect: () => 1 }); + + expect(component.getAllByTestId('@drawer-item-accessory').length).toEqual(3); + }); + + it('* should render header', () => { + const header = () => ( + + ); + + const component: RenderAPI = renderComponent({ data, header, onSelect: () => 1 }); + + expect(component.getAllByTestId('@drawer-header').length).toBeTruthy(); + }); + + it('* should render footer', () => { + const footer = () => ( + + ); + + const component: RenderAPI = renderComponent({ data, footer, onSelect: () => 1 }); + + expect(component.getAllByTestId('@drawer-footer').length).toBeTruthy(); + }); + + it('* should call onSelect', () => { + const pressIndex: number = 1; + + const onSelect = jest.fn((index: number) => { + expect(index).toEqual(pressIndex); + }); + + const component: RenderAPI = renderComponent({ data, onSelect }); + + fireEvent.press(component.getAllByType(TouchableOpacity)[pressIndex]); + }); + +}); diff --git a/src/framework/ui/drawer/drawerFence.component.tsx b/src/framework/ui/drawer/drawerFence.component.tsx new file mode 100644 index 000000000..1486f69cd --- /dev/null +++ b/src/framework/ui/drawer/drawerFence.component.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { + ListItem, + ListItemProps, + ListItemElement, +} from '../list/listItem.component'; + +export type DrawerFenceProps = Partial; +export type DrawerFenceElement = ListItemElement; + +export class DrawerFence extends React.Component { + + public render(): DrawerFenceElement { + return ( + + ); + } +} diff --git a/src/framework/ui/index.ts b/src/framework/ui/index.ts index b1384ab6f..9867a036e 100644 --- a/src/framework/ui/index.ts +++ b/src/framework/ui/index.ts @@ -1,5 +1,3 @@ -import { SelectOption } from '@kitten/ui/select/select.component'; - export { Avatar, AvatarProps, @@ -30,6 +28,17 @@ export { CheckBoxProps, CheckBoxElement, } from './checkbox/checkbox.component'; +export { + Drawer, + DrawerProps, + DrawerElement, + DrawerHeaderElement, +} from './drawer/drawer.component'; +export { + DrawerFence, + DrawerFenceElement, + DrawerFenceProps, +} from './drawer/drawerFence.component'; export { Select, SelectProps, diff --git a/src/framework/ui/list/list.component.tsx b/src/framework/ui/list/list.component.tsx index 5acf65bc6..2888bd6c7 100644 --- a/src/framework/ui/list/list.component.tsx +++ b/src/framework/ui/list/list.component.tsx @@ -112,7 +112,7 @@ export type ListElement = React.ReactElement; * * * ); - * };= + * }; * * return ( * { + + private onItemSelect = (index: number) => { + const { [index]: selectedRoute } = this.props.items; + this.props.navigation.navigate(selectedRoute.routeName); + }; + + private createDrawerItem = (source: NavigationRoute): MenuItemType => { + return { + title: source.routeName, + accessory: this.shouldRenderBadge(source) && this.renderBadge, + }; + }; + + private shouldRenderBadge = (source: NavigationRoute): boolean => { + return source.routeName === 'Drawer'; + }; + + private renderBadge = (style: StyleType): React.ReactElement => { + return ( + + NEW + + ); + }; + + private renderIcon = (style: StyleType): React.ReactElement => { + return ( + + ); + }; + + private renderHeader = (): DrawerHeaderElement => { + return ( + + + + + ); + }; + + private renderFooter = (): DrawerFooterElement => { + return ( + + + + + ); + }; + + public render(): React.ReactElement { + const drawerItems: MenuItemType[] = this.props.items.map(this.createDrawerItem); + + return ( + + + + ); + } +} + +const styles = StyleSheet.create({ + safeArea: { + flex: 1, + }, + badge: { + paddingHorizontal: 8, + height: 24, + width: 48, + borderRadius: 12, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: 'orange', + }, +}); diff --git a/src/playground/src/navigation/navigation.component.tsx b/src/playground/src/navigation/navigation.component.tsx index 300f5f469..816731d71 100644 --- a/src/playground/src/navigation/navigation.component.tsx +++ b/src/playground/src/navigation/navigation.component.tsx @@ -1,46 +1,51 @@ import React from 'react'; import { createAppContainer, + createDrawerNavigator, createStackNavigator, + NavigationRouteConfigMap, } from 'react-navigation'; import { - Home, + AvatarContainer, + BottomNavigationContainer, ButtonContainer, ButtonGroupContainer, - AvatarContainer, - InputContainer, CheckBoxContainer, - ToggleContainer, - RadioContainer, - TextContainer, + DrawerContainer, + Home, + InputContainer, + LayoutContainer, ListContainer, - PopoverContainer, - TooltipContainer, + ModalContainer, OverflowMenuContainer, - BottomNavigationContainer, - TabViewContainer, - TopNavigationContainer, + PopoverContainer, + RadioContainer, RadioGroupContainer, - LayoutContainer, SampleContainer, - ModalContainer, + TabViewContainer, + TextContainer, + ToggleContainer, + TooltipContainer, + TopNavigationContainer, SelectContainer, SpinnerContainer, IconContainer, MenuContainer, } from '../ui/screen'; +import { DrawerNavigation } from './drawerNavigation.component'; export interface RouteType { name: string; } -const AppNavigator = createStackNavigator({ +const routes: NavigationRouteConfigMap = { ['Home']: Home, ['Avatar']: AvatarContainer, ['Bottom Navigation']: BottomNavigationContainer, ['Button']: ButtonContainer, ['Button Group']: ButtonGroupContainer, ['Checkbox']: CheckBoxContainer, + ['Drawer']: DrawerContainer, ['Icon']: IconContainer, ['Input']: InputContainer, ['Layout']: LayoutContainer, @@ -59,9 +64,19 @@ const AppNavigator = createStackNavigator({ ['Overflow Menu']: OverflowMenuContainer, ['Sample']: SampleContainer, ['Select']: SelectContainer, -}, { +}; + +const MenuNavigator = createStackNavigator(routes, { initialRouteName: 'Home', headerMode: 'screen', }); -export const Router: any = createAppContainer(AppNavigator); +const DrawerNavigator = createDrawerNavigator({ + ...routes, + ['Home']: MenuNavigator, +}, { + contentComponent: DrawerNavigation, + initialRouteName: 'Home', +}); + +export const Router: any = createAppContainer(DrawerNavigator); diff --git a/src/playground/src/ui/screen/drawer/drawer.container.tsx b/src/playground/src/ui/screen/drawer/drawer.container.tsx new file mode 100644 index 000000000..3697e92ed --- /dev/null +++ b/src/playground/src/ui/screen/drawer/drawer.container.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { StyleSheet } from 'react-native'; +import { NavigationScreenProps } from 'react-navigation'; +import { DrawerProps } from '@kitten/ui'; +import { DrawerShowcase } from './drawerShowcase.component'; +import { drawerShowcase } from './type'; +import { ShowcaseContainer } from '../common/showcase.container'; + +export class DrawerContainer extends React.Component { + + private toggleDrawer = () => { + this.props.navigation.toggleDrawer(); + }; + + private renderItem = (props: DrawerProps): React.ReactElement => { + return ( + + ); + }; + + public render(): React.ReactNode { + return ( + + + ); + } +} + +const styles = StyleSheet.create({ + component: { + flex: 1, + }, +}); + diff --git a/src/playground/src/ui/screen/drawer/drawerShowcase.component.tsx b/src/playground/src/ui/screen/drawer/drawerShowcase.component.tsx new file mode 100644 index 000000000..3821b9889 --- /dev/null +++ b/src/playground/src/ui/screen/drawer/drawerShowcase.component.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { + Button, + ButtonProps, +} from '@kitten/ui'; + +export const DrawerShowcase = (props?: ButtonProps): React.ReactElement => { + return ( + + ); +}; diff --git a/src/playground/src/ui/screen/drawer/type.tsx b/src/playground/src/ui/screen/drawer/type.tsx new file mode 100644 index 000000000..9f4e798c8 --- /dev/null +++ b/src/playground/src/ui/screen/drawer/type.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { + ComponentShowcase, + ComponentShowcaseItem, + ComponentShowcaseSection, +} from '../common/type'; + + +const defaultDrawer: ComponentShowcaseItem = { + title: 'Default', + props: {}, +}; + +const defaultSection: ComponentShowcaseSection = { + title: 'Default', + items: [ + defaultDrawer, + ], +}; + +export const drawerShowcase: ComponentShowcase = { + sections: [ + defaultSection, + ], +}; + diff --git a/src/playground/src/ui/screen/home.component.tsx b/src/playground/src/ui/screen/home.component.tsx index 134521daa..8ff0bdf63 100644 --- a/src/playground/src/ui/screen/home.component.tsx +++ b/src/playground/src/ui/screen/home.component.tsx @@ -1,5 +1,8 @@ import React from 'react'; -import { ListRenderItemInfo, Button, I18nManager } from 'react-native'; +import { + Button, + ListRenderItemInfo, +} from 'react-native'; import { NavigationScreenProps } from 'react-navigation'; import { ThemedComponentProps, @@ -13,7 +16,6 @@ import { ListItemElement, } from '@kitten/ui'; import { RouteType } from '../../navigation'; -import { Updates } from 'expo'; export const routes: RouteType[] = [ { name: 'Avatar' }, @@ -21,7 +23,9 @@ export const routes: RouteType[] = [ { name: 'Button' }, { name: 'Button Group' }, { name: 'Checkbox' }, + { name: 'Drawer' }, { name: 'Icon' }, + { name: 'Drawer' }, { name: 'Input' }, { name: 'Layout' }, { name: 'List' }, diff --git a/src/playground/src/ui/screen/index.ts b/src/playground/src/ui/screen/index.ts index 77be11826..f9e3ab2b0 100644 --- a/src/playground/src/ui/screen/index.ts +++ b/src/playground/src/ui/screen/index.ts @@ -3,6 +3,7 @@ export { BottomNavigationContainer } from './bottomNavigation/bottomNavigation.c export { ButtonContainer } from './button/button.container'; export { ButtonGroupContainer } from './buttonGroup/buttonGroup.container'; export { CheckBoxContainer } from './checkbox/checkbox.container'; +export { DrawerContainer } from './drawer/drawer.container'; export { IconContainer } from './icon/icon.container'; export { InputContainer } from './input/input.container'; export { LayoutContainer } from './layout/layout.container'; diff --git a/src/templates/template-ui-kitten-typescript/App.tsx b/src/templates/template-ui-kitten-typescript/App.tsx deleted file mode 100644 index 6c6d0ebc5..000000000 --- a/src/templates/template-ui-kitten-typescript/App.tsx +++ /dev/null @@ -1,39 +0,0 @@ -/** - * @license - * Copyright Akveo. All Rights Reserved. - * Licensed under the MIT License. See License.txt in the project root for license information. - */ - -import React from 'react'; -import { StyleSheet } from 'react-native'; -import { ApplicationProvider, Layout, Text } from 'react-native-ui-kitten'; -import { mapping, light as theme } from '@eva-design/eva'; - -const App = () => ( - - - - Welcome to UI Kitten 😻 - - - Start with editing App.tsx to configure your App - - - For example, try changing theme to Dark by simply changing an import - - - -); - -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - text: { - textAlign: 'center', - }, -}); - -export default App; diff --git a/src/templates/template-ui-kitten-typescript/_tsconfig.json b/src/templates/template-ui-kitten-typescript/_tsconfig.json deleted file mode 100644 index 1bfc717a7..000000000 --- a/src/templates/template-ui-kitten-typescript/_tsconfig.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "compilerOptions": { - "allowJs": true, - "allowSyntheticDefaultImports": true, - "esModuleInterop": true, - "isolatedModules": true, - "jsx": "react", - "lib": ["es6"], - "moduleResolution": "node", - "noEmit": true, - "strict": true, - "target": "esnext" - }, - "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"] -} diff --git a/src/templates/template-ui-kitten-typescript/dependencies.json b/src/templates/template-ui-kitten-typescript/dependencies.json deleted file mode 100644 index 0fbfce8a2..000000000 --- a/src/templates/template-ui-kitten-typescript/dependencies.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "@eva-design/eva": "^1.0.1", - "react-native-ui-kitten": "^4.1.0" -} diff --git a/src/templates/template-ui-kitten-typescript/devDependencies.json b/src/templates/template-ui-kitten-typescript/devDependencies.json deleted file mode 100644 index 4846c5445..000000000 --- a/src/templates/template-ui-kitten-typescript/devDependencies.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "@types/jest": "latest", - "@types/react-native": "latest", - "@types/react-test-renderer": "latest", - "@types/react": "latest", - "typescript": "latest" -} diff --git a/src/templates/template-ui-kitten-typescript/install.js b/src/templates/template-ui-kitten-typescript/install.js deleted file mode 100644 index 7b166cdc6..000000000 --- a/src/templates/template-ui-kitten-typescript/install.js +++ /dev/null @@ -1,72 +0,0 @@ -/** - * @license - * Copyright Akveo. All Rights Reserved. - * Licensed under the MIT License. See License.txt in the project root for license information. - */ - -/** - * Additional scripts needed to correctly setup a project. - * Based on https://github.com/react-native-community/react-native-template-typescript. - * - * Runs as install script on `npm install` and replaces self after everything is done. - * - * - Replaces useless .js files - * - Adds tsconfig.json - */ - -const fs = require('fs'); -const path = require('path'); - -if (fs.existsSync(path.join(__dirname, '.travis.yml'))) { - process.exit() -} - -const projectFilesToDelete = [ - '.flowconfig', - 'App.js', - '__tests__/App-test.js', -]; - -const templateFilesToAdd = [ - '_tsconfig.json', -]; - -const templateFilesToDelete = [ - 'install.js', - '_tsconfig.json', -]; - -const deleteFile = (filePath) => { - if (!fs.existsSync(filePath)) { - return - } - - fs.unlinkSync(filePath) -}; - -const projectPath = path.join(__dirname, '..', '..'); - -const projectFilePath = (fileName) => { - return path.join(projectPath, fileName); -}; - -const templateFilePath = (fileName) => { - return path.join(__dirname, fileName); -}; - -const replaceTemplateFile = (fileName) => { - const newName = fileName.replace('_', ''); - fs.copyFileSync(templateFilePath(fileName), templateFilePath(newName)); -}; - -const deleteProjectFile = (fileName) => { - deleteFile(projectFilePath(fileName)); -}; - -const deleteTemplateFile = (fileName) => { - deleteFile(templateFilePath(fileName)); -}; - -templateFilesToAdd.forEach(replaceTemplateFile); -projectFilesToDelete.forEach(deleteProjectFile); -templateFilesToDelete.forEach(deleteTemplateFile); diff --git a/src/templates/template-ui-kitten-typescript/jest.config.js b/src/templates/template-ui-kitten-typescript/jest.config.js deleted file mode 100644 index 4ee5f1683..000000000 --- a/src/templates/template-ui-kitten-typescript/jest.config.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - preset: 'react-native', - moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], -}; diff --git a/src/templates/template-ui-kitten-typescript/package.json b/src/templates/template-ui-kitten-typescript/package.json deleted file mode 100644 index 7dedf86e9..000000000 --- a/src/templates/template-ui-kitten-typescript/package.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "name": "react-native-template-ui-kitten-typescript", - "description": "React Native template with UI Kitten and TypeScript", - "version": "4.1.0", - "license": "MIT", - "author": "akveo ", - "homepage": "https://github.com/akveo/react-native-ui-kitten#readme", - "repository": "git+https://github.com/akveo/react-native-ui-kitten.git", - "bugs": { - "url": "https://github.com/akveo/react-native-ui-kitten/issues" - }, - "keywords": [ - "react-native", - "ui-kitten", - "typescript", - "template", - "boilerplate" - ], - "scripts": { - "install": "node install.js" - } -} diff --git a/src/templates/template-ui-kitten/App.js b/src/templates/template-ui-kitten/App.js deleted file mode 100644 index 152e0ebfb..000000000 --- a/src/templates/template-ui-kitten/App.js +++ /dev/null @@ -1,39 +0,0 @@ -/** - * @license - * Copyright Akveo. All Rights Reserved. - * Licensed under the MIT License. See License.txt in the project root for license information. - */ - -import React from 'react'; -import { StyleSheet } from 'react-native'; -import { ApplicationProvider, Layout, Text } from 'react-native-ui-kitten'; -import { mapping, light as theme } from '@eva-design/eva'; - -const App = () => ( - - - - Welcome to UI Kitten 😻 - - - Start with editing App.js to configure your App - - - For example, try changing theme to Dark by simply changing an import - - - -); - -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - text: { - textAlign: 'center', - }, -}); - -export default App; diff --git a/src/templates/template-ui-kitten/dependencies.json b/src/templates/template-ui-kitten/dependencies.json deleted file mode 100644 index 0fbfce8a2..000000000 --- a/src/templates/template-ui-kitten/dependencies.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "@eva-design/eva": "^1.0.1", - "react-native-ui-kitten": "^4.1.0" -} diff --git a/src/templates/template-ui-kitten/package.json b/src/templates/template-ui-kitten/package.json deleted file mode 100644 index 210b72e1a..000000000 --- a/src/templates/template-ui-kitten/package.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "name": "react-native-template-ui-kitten", - "description": "React Native template with UI Kitten", - "version": "4.1.0", - "license": "MIT", - "author": "akveo ", - "homepage": "https://github.com/akveo/react-native-ui-kitten#readme", - "repository": "git+https://github.com/akveo/react-native-ui-kitten.git", - "bugs": { - "url": "https://github.com/akveo/react-native-ui-kitten/issues" - }, - "keywords": [ - "react-native", - "ui-kitten", - "template", - "boilerplate" - ] -} diff --git a/tsconfig.dev.json b/tsconfig.dev.json index 352a2bcf5..7d790e923 100644 --- a/tsconfig.dev.json +++ b/tsconfig.dev.json @@ -5,6 +5,7 @@ "jsx": "react-native", "target": "es2015", "lib": [ + "dom", "es2018" ] },