Skip to content

Commit 8b3642f

Browse files
32penkin32penkin
authored
refactor(framework): install-templates functionality return
* refactor(framework): install-templates functionality return Authored-By: Artur Yorsh <10753921+artyorsh@users.noreply.github.com>
1 parent 573d76c commit 8b3642f

File tree

17 files changed

+314
-82
lines changed

17 files changed

+314
-82
lines changed

‎README.md

Lines changed: 5 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -31,32 +31,14 @@ There is a huge variety of customizable layouts, use “as is” or add new bloc
3131

3232
## Quick Start
3333

34-
Install UI Kitten and Eva Design System packages via npm:
34+
Start a new app with UI Kitten template from a scratch:
3535

3636
```bash
37-
npm i react-native-ui-kitten @eva-design/eva
37+
react-native init AwesomeApp --template ui-kitten
3838
```
3939

40-
Modify your application root:
41-
42-
```jsx
43-
import React from 'react';
44-
import { mapping, light as lightTheme } from '@eva-design/eva';
45-
import { ApplicationProvider, Layout } from 'react-native-ui-kitten';
46-
47-
const App = () => (
48-
<ApplicationProvider
49-
mapping={mapping}
50-
theme={lightTheme}>
51-
<Layout style={{flex: 1}}/>
52-
</ApplicationProvider>
53-
);
54-
55-
export default App;
56-
```
57-
58-
The code above will configure your application component to apply Eva Design System styling magic.
59-
Read the [Design System guide][link:doc-theme-system] for more details.
40+
This will setup a new React Native application configured with UI Kitten.
41+
Refer to the [Documentation][link:doc-where-start] for more options to start.
6042

6143
## How can I support the developers?
6244
- Star our GitHub repo :star:
@@ -83,7 +65,7 @@ We're always happy to receive your feedback!
8365
[link:travis]: https://travis-ci.com/akveo/react-native-ui-kitten
8466
[link:coveralls]: https://coveralls.io/github/akveo/react-native-ui-kitten?branch=master
8567
[link:doc-homepage]: https://akveo.github.io/react-native-ui-kitten
86-
[link:doc-theme-system]: https://akveo.github.io/react-native-ui-kitten/docs/design-system/eva-design-system-intro
68+
[link:doc-where-start]: https://akveo.github.io/react-native-ui-kitten/docs/getting-started/where-to-start
8769
[link:kitten-tricks]: https://github.com/akveo/kittenTricks
8870
[link:eva-icons]: https://github.com/akveo/eva-icons
8971
[link:akveo-homepage]: https://akveo.com

‎docs/src/articles/getting-started/where-to-start.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,15 @@ UI Kitten is a framework of UI components powered by Eva Design System for your
55

66
## Quick start tutorials
77

8-
**[Install UI Kitten](guides/install-ui-kitten)**
8+
- **[Start a new App](guides/start-a-new-app)**
99

10-
This tutorial explains how to setup React Native app with UI Kitten.
10+
This tutorial explains how to setup React Native app with UI Kitten from a scratch.
11+
12+
- **[Install into existing App](guides/install-into-existing-app)**
1113

1214
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.
1315

16+
1417
<hr>
1518

1619
## I'm new to React Native or mobile development

‎docs/src/articles/guides/install-existing.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Add into existing project
2+
3+
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.
4+
5+
<hr>
6+
7+
## Install UI Kitten and Eva Design System
8+
9+
```bash
10+
npm i react-native-ui-kitten @eva-design/eva
11+
```
12+
13+
<hr>
14+
15+
## Configure Application Root
16+
17+
At this step you have everything in place, let's configure UI Kitten to be used in your app.
18+
In your **App.js**:
19+
20+
```js
21+
import React from 'react';
22+
import { mapping, light as lightTheme } from '@eva-design/eva';
23+
import { ApplicationProvider } from 'react-native-ui-kitten';
24+
import { RootComponent } from '../path-to/root.component'; // <-- Import your application entry point
25+
26+
const App = () => (
27+
<ApplicationProvider
28+
mapping={mapping}
29+
theme={lightTheme}>
30+
<RootComponent />
31+
</ApplicationProvider>
32+
);
33+
34+
export default App;
35+
```
36+
37+
That's it. UI Kitten is ready now.

‎docs/src/articles/guides/install-new.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Starting a new App
2+
3+
If you don't have any code yet, please consider checking <a href="https://facebook.github.io/react-native/docs/getting-started" target="_blank">React Native Getting Started</a> documentation for help creating your app.
4+
5+
<hr>
6+
7+
## Installation
8+
9+
First of all, you should have React Native CLI installed.
10+
11+
```bash
12+
npm i -g react-native-cli
13+
```
14+
15+
<hr>
16+
17+
## Create a New Project
18+
19+
A new project can be created using React Native CLI tools ant UI Kitten template.
20+
21+
```bash
22+
react-native init AwesomeApp --template ui-kitten
23+
```
24+
25+
Or, if you want to init with TypeScript:
26+
```bash
27+
react-native init --template ui-kitten-typescript
28+
```
29+
30+
That's it. UI Kitten is ready now. For the next steps, simply follow command line instructions.

‎docs/src/articles/guides/install.md

Lines changed: 0 additions & 54 deletions
This file was deleted.

‎docs/src/structure.ts

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,23 @@ export const structure = [
3333
children: [
3434
{
3535
type: 'page',
36-
name: 'Install UI Kitten',
36+
name: 'Start a new App',
3737
children: [
3838
{
3939
type: 'block',
4040
block: 'markdown',
41-
source: 'guides/install.md',
41+
source: 'guides/install-new.md',
42+
},
43+
],
44+
},
45+
{
46+
type: 'page',
47+
name: 'Install into existing App',
48+
children: [
49+
{
50+
type: 'block',
51+
block: 'markdown',
52+
source: 'guides/install-existing.md',
4253
},
4354
],
4455
},

‎src/templates/template-ui-kitten-typescript/App.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/**
2+
* @license
3+
* Copyright Akveo. All Rights Reserved.
4+
* Licensed under the MIT License. See License.txt in the project root for license information.
5+
*/
6+
7+
import React from 'react';
8+
import { StyleSheet } from 'react-native';
9+
import { ApplicationProvider, Layout, Text } from 'react-native-ui-kitten';
10+
import { mapping, light as theme } from '@eva-design/eva';
11+
12+
const App = () => (
13+
<ApplicationProvider mapping={mapping} theme={theme}>
14+
<Layout style={styles.container}>
15+
<Text style={styles.text} category='h1'>
16+
Welcome to UI Kitten 😻
17+
</Text>
18+
<Text style={styles.text} category='s1'>
19+
Start with editing App.tsx to configure your App
20+
</Text>
21+
<Text style={styles.text} appearance='hint'>
22+
For example, try changing theme to Dark by simply changing an import
23+
</Text>
24+
</Layout>
25+
</ApplicationProvider>
26+
);
27+
28+
const styles = StyleSheet.create({
29+
container: {
30+
flex: 1,
31+
justifyContent: 'center',
32+
alignItems: 'center',
33+
},
34+
text: {
35+
textAlign: 'center',
36+
},
37+
});
38+
39+
export default App;

‎src/templates/template-ui-kitten-typescript/_tsconfig.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"compilerOptions": {
3+
"allowJs": true,
4+
"allowSyntheticDefaultImports": true,
5+
"esModuleInterop": true,
6+
"isolatedModules": true,
7+
"jsx": "react",
8+
"lib": ["es6"],
9+
"moduleResolution": "node",
10+
"noEmit": true,
11+
"strict": true,
12+
"target": "esnext"
13+
},
14+
"exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
15+
}

‎src/templates/template-ui-kitten-typescript/dependencies.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"@eva-design/eva": "^1.0.1",
3+
"react-native-ui-kitten": "^4.1.0"
4+
}

‎src/templates/template-ui-kitten-typescript/devDependencies.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"@types/jest": "latest",
3+
"@types/react-native": "latest",
4+
"@types/react-test-renderer": "latest",
5+
"@types/react": "latest",
6+
"typescript": "latest"
7+
}

‎src/templates/template-ui-kitten-typescript/install.js

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/**
2+
* @license
3+
* Copyright Akveo. All Rights Reserved.
4+
* Licensed under the MIT License. See License.txt in the project root for license information.
5+
*/
6+
7+
/**
8+
* Additional scripts needed to correctly setup a project.
9+
* Based on https://github.com/react-native-community/react-native-template-typescript.
10+
*
11+
* Runs as install script on `npm install` and replaces self after everything is done.
12+
*
13+
* - Replaces useless .js files
14+
* - Adds tsconfig.json
15+
*/
16+
17+
const fs = require('fs');
18+
const path = require('path');
19+
20+
if (fs.existsSync(path.join(__dirname, '.travis.yml'))) {
21+
process.exit()
22+
}
23+
24+
const projectFilesToDelete = [
25+
'.flowconfig',
26+
'App.js',
27+
'__tests__/App-test.js',
28+
];
29+
30+
const templateFilesToAdd = [
31+
'_tsconfig.json',
32+
];
33+
34+
const templateFilesToDelete = [
35+
'install.js',
36+
'_tsconfig.json',
37+
];
38+
39+
const deleteFile = (filePath) => {
40+
if (!fs.existsSync(filePath)) {
41+
return
42+
}
43+
44+
fs.unlinkSync(filePath)
45+
};
46+
47+
const projectPath = path.join(__dirname, '..', '..');
48+
49+
const projectFilePath = (fileName) => {
50+
return path.join(projectPath, fileName);
51+
};
52+
53+
const templateFilePath = (fileName) => {
54+
return path.join(__dirname, fileName);
55+
};
56+
57+
const replaceTemplateFile = (fileName) => {
58+
const newName = fileName.replace('_', '');
59+
fs.copyFileSync(templateFilePath(fileName), templateFilePath(newName));
60+
};
61+
62+
const deleteProjectFile = (fileName) => {
63+
deleteFile(projectFilePath(fileName));
64+
};
65+
66+
const deleteTemplateFile = (fileName) => {
67+
deleteFile(templateFilePath(fileName));
68+
};
69+
70+
templateFilesToAdd.forEach(replaceTemplateFile);
71+
projectFilesToDelete.forEach(deleteProjectFile);
72+
templateFilesToDelete.forEach(deleteTemplateFile);

‎src/templates/template-ui-kitten-typescript/jest.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
preset: 'react-native',
3+
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
4+
};

‎src/templates/template-ui-kitten-typescript/package.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "react-native-template-ui-kitten-typescript",
3+
"description": "React Native template with UI Kitten and TypeScript",
4+
"version": "4.1.0",
5+
"license": "MIT",
6+
"author": "akveo <contact@akveo.com>",
7+
"homepage": "https://github.com/akveo/react-native-ui-kitten#readme",
8+
"repository": "git+https://github.com/akveo/react-native-ui-kitten.git",
9+
"bugs": {
10+
"url": "https://github.com/akveo/react-native-ui-kitten/issues"
11+
},
12+
"keywords": [
13+
"react-native",
14+
"ui-kitten",
15+
"typescript",
16+
"template",
17+
"boilerplate"
18+
],
19+
"scripts": {
20+
"install": "node install.js"
21+
}
22+
}

0 commit comments

Comments
 (0)