chore(): begin adding ionic components to mono-repo.

This commit is contained in:
Josh Thomas
2017-06-21 09:33:06 -05:00
parent 1181fe98fc
commit bd5b67304d
2159 changed files with 15687 additions and 147 deletions

View File

@@ -0,0 +1,25 @@
// we don't want to run copy for the demos, so just override the config for now
var path = require('path');
module.exports = {
copyAssets: {
src: [path.join(path.dirname(process.env.IONIC_APP_ENTRY_POINT), '..', 'assets', '**', '*')],
dest: path.join('{{WWW}}', 'assets')
},
copyIndexContent: {
src: [path.join(process.cwd(), 'scripts', 'e2e', 'index.html')],
dest: '{{WWW}}'
},
copyFonts: {
src: [path.join(process.cwd(), 'node_modules', 'ionicons', 'dist', 'fonts', '**', '*'), path.join(process.cwd(), 'src', 'fonts', '**', '*')],
dest: path.join('{{WWW}}', 'assets', 'fonts')
},
copyPolyfills: {
src: [path.join(process.cwd(), 'dist', 'e2e', 'polyfills', 'polyfills.ng.js')],
dest: '{{BUILD}}'
},
sharedCss: {
src: [path.join(process.cwd(), 'scripts', 'e2e', 'e2e.shared.css')],
dest: `{{BUILD}}`
}
}

View File

@@ -0,0 +1,139 @@
module.exports = function(options) {
var fs = require('fs');
var path = require('path');
var request = require('request');
var inputDir = path.join(__dirname, '..', '..' , 'dist', 'e2e', 'tests');
var uploadQueue = [];
var ignoreFiles = /(\/test\/|\/ts\/|\/q\/|\/ionic-site\/|\/docs\/|\/examples\/|\/inquirer\/|\/lodash\/|\/tooling\/|\/colors\/|\/bin\/|\.ts$|\.bin|\.map$|\.md$|\.git|\.scss$|\.yml$|\.yaml$|\.dart$|\.txt|\.npm|bower|DS_Store|LICENSE)/i;
function uploadFiles(dir, urlPath) {
fs.readdir(dir, function(err, list) {
list.forEach(function(file) {
var url = path.join(urlPath, file);
fs.stat(path.join(dir, file), function(err, stat) {
if (stat && stat.isDirectory()) {
uploadFiles(path.join(dir, file), path.join(urlPath, file);
} else {
if ( shouldProcessPath (url) ){
uploadFile(url, path.join(dir, file));
}
}
});
});
});
setTimeout(postNextUpload, 100);
}
function uploadFile(archiveFileUrlPath, archiveFileLocalPath) {
uploadQueue.push({
url_path: archiveFileUrlPath,
local_path: archiveFileLocalPath,
group_id: options.groupId,
app_id: options.appId,
test_id: options.testId,
access_key: process.env.IONIC_SNAPSHOT_KEY
});
}
function postNextUpload() {
var uploadData = null;
var totalUploading = 0;
for (var i = 0; i < uploadQueue.length; i++) {
if (uploadQueue[i].status === 'uploaded') {
continue;
} else if (uploadQueue[i].status === 'uploading') {
totalUploading++;
continue;
} else {
uploadData = uploadQueue[i];
}
}
if (!uploadData || totalUploading > 20) {
return;
} else if (options.verbose) {
console.log('Uploading: ' + uploadData.url_path);
}
uploadData.status = 'uploading';
request.post({
uri: 'http://' + options.domain + '/e2e/upload-url',
formData: uploadData
},
function(err, httpResponse, body) {
if (err) {
uploadData.status = 'failed';
console.error('Get upload failed:', uploadData.url_path, err);
} else {
if (httpResponse.statusCode == 200) {
uploadE2E(body, uploadData);
} else {
console.error('Get upload error:', httpResponse.statusCode, body);
}
}
}
);
}
function uploadE2E(uploadUrl, uploadData) {
var formData = {
file: fs.createReadStream(uploadData.local_path)
};
request.post({
uri: uploadUrl,
formData: formData
},
function(err, httpResponse, body) {
setTimeout(postNextUpload, 100);
if (err) {
console.error('Upload failed:', uploadUrl, err);
uploadData.status = 'failed';
} else {
if (httpResponse.statusCode == 200) {
uploadData.status = 'uploaded';
if (options.verbose) {
console.error('Uploaded:', uploadData.url_path);
}
} else {
console.error('Upload error:', httpResponse.statusCode, body);
uploadData.status = 'failed';
}
}
}
);
}
function shouldProcessPath(urlPath) {
if ( urlPath && urlPath.length > 0 ) {
var cleanedUpString = urlPath.substring(1);
var tokens = cleanedUpString.split('/');
// {component}/test/{testName}/{file}
var extension = path.extname(cleanedUpString);
return tokens && tokens.length > 3 && tokens[1] === 'test' && ( extension === '.html' || extension === '.js' );
}
return false;
}
console.log('Uploading e2e tests:', options.testId);
uploadFiles(inputDir, '');
};

View File

@@ -0,0 +1,265 @@
.snapshot body {
/* crop an exact size */
max-height: 700px !important;
}
.snapshot .scroll-content {
/* disable scrollbars */
overflow: hidden !important;
}
.snapshot ::-webkit-scrollbar {
display: none;
}
.snapshot *,
.snapshot *:before,
.snapshot *:after {
/* do not allow css animations during snapshot */
-webkit-transition-duration: 0ms !important;
transition-duration: 0ms !important;
}
.snapshot .button-effect {
display: none !important;
}
/* hack to create tall scrollable areas for testing using <div f></div> */
div[f] {
display: block;
margin: 15px auto;
max-width: 150px;
height: 150px;
background: blue;
}
div[f]:last-of-type {
background: red;
}
ion-tab:nth-of-type(2) div[f],
.green div[f] {
background: green;
max-width: 250px;
height: 100px;
}
ion-tab:nth-of-type(3) div[f],
.yellow div[f] {
background: yellow;
width: 100px;
height: 50px;
}
/********************
e2e-stacked-tabbars
*********************/
.e2e-stacked-tabbars ion-tabs {
margin-bottom: 20px;
}
.e2e-stacked-tabbars ion-tabs,
.e2e-stacked-tabbars ion-tabs .tabbar {
position: relative;
top: auto;
height: auto;
visibility: visible;
opacity: 1;
}
/********************
e2e-loading
*********************/
.e2e-loading {
position: absolute;
width: 100%;
height: 100%;
}
.e2e-loading .fixed-spinner svg {
animation: none;
}
.e2e-loading .custom-spinner-container {
position: relative;
display: inline-block;
box-sizing: border-box;
}
.e2e-loading .custom-spinner-box {
position: relative;
box-sizing: border-box;
border: 4px solid #000;
width: 60px;
height: 60px;
animation: spin 3s infinite linear;
}
.e2e-loading .custom-spinner-box:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
border: 4px solid #000;
width: 40px;
height: 40px;
animation: pulse 1.5s infinite ease;
}
.e2e-loading .wp .custom-spinner-box,
.e2e-loading .wp .custom-spinner-box:before {
border-color: #fff;
}
@-webkit-keyframes pulse {
50% {
border-width: 20px;
}
}
@keyframes pulse {
50% {
border-width: 20px;
}
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/********************
e2e-popover
*********************/
e2e-popover-basic .text-to-change div {
margin: 10px auto;
}
e2e-popover-basic ion-row,
e2e-popover-basic ion-col {
padding: 0;
}
e2e-popover-basic .text-button {
padding-left: 0;
text-align: center;
min-height: 20px;
line-height: 18px;
}
e2e-popover-basic .text-button .item-inner {
padding-right: 0;
}
e2e-popover-basic .text-smaller {
font-size: 12px;
}
.popover-ios e2e-popover-basic .text-smaller {
border-right: 1px solid #c8c7cc;
}
.popover-md e2e-popover-basic .text-smaller {
border-right: 1px solid #dedede;
}
e2e-popover-basic .text-larger {
font-size: 16px;
}
e2e-popover-basic .row-dots {
text-align: center;
}
.popover-ios e2e-popover-basic .row-dots {
border-bottom: 1px solid #c8c7cc;
}
.popover-md e2e-popover-basic .row-dots {
border-bottom: 1px solid #dedede;
}
e2e-popover-basic .dot-ios {
border: 1px solid #c8c7cc;
}
e2e-popover-basic .dot-md {
border: 1px solid #dedede;
}
e2e-popover-basic .dot-wp {
border: 2px solid #ccc;
}
.hairlines e2e-popover-basic .text-smaller,
.hairlines e2e-popover-basic .row-dots,
.hairlines e2e-popover-basic .dot {
border-width: 0.55px;
}
e2e-popover-basic .row-dots .dot {
height: 30px;
width: 30px;
border-radius: 50%;
margin: 10px auto;
position: relative;
}
e2e-popover-basic .dot-white {
background-color: rgb(255,255,255);
}
e2e-popover-basic .dot-tan {
background-color: rgb(249,241,228);
}
e2e-popover-basic .dot-grey {
background-color: rgb(76,75,80);
}
e2e-popover-basic .dot-black {
background-color: rgb(0,0,0);
}
e2e-popover-basic .dot.selected {
border-width: 2px;
border-color: #327eff;
}
e2e-popover-basic .text-athelas {
font-family: "Athelas";
}
e2e-popover-basic .text-charter {
font-family: "Charter";
}
e2e-popover-basic .text-iowan {
font-family: "Iowan";
}
e2e-popover-basic .text-palatino {
font-family: "Palatino";
}
e2e-popover-basic .text-san-francisco {
font-family: "San Francisco";
}
e2e-popover-basic .text-seravek {
font-family: "Seravek";
}
e2e-popover-basic .text-times-new-roman {
font-family: "Times New Roman";
}
.rainbow-content {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

View File

@@ -0,0 +1,9 @@
describe('<%= relativePathBackwardsCompatibility %>: <%= platform %>', function() {
it('should init', function() {
browser.get('http://localhost:<%= buildConfig.protractorPort %>/dist/e2e/<%= relativePath %>/index.html?ionicplatform=<%= platform %>&ionicOverlayCreatedDiff=0&ionicanimate=false&snapshot=true');
});
<%= contents %>
});

View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<title>Ionic E2E</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<link id="ionicLink" href="./build/main.css" rel="stylesheet">
<link href="build/e2e.shared.css" rel="stylesheet">
<script>
if (location.href.indexOf('snapshot=true') > -1) {
document.documentElement.classList.add('snapshot');
} else {
document.documentElement.classList.remove('snapshot');
}
if (location.href.indexOf('cordova=true') > -1) {
window.cordova = {};
}
if (location.href.indexOf('rtl=true') > -1) {
document.dir = 'rtl';
}
window.domCount = function domCount(ele) {
if(!ele) {
return 0;
}
var count = 1;
for(var i = 0; i < ele.children.length; i++) {
count += domCount(ele.children[i]);
}
return count;
}
if (location.href.indexOf('theme=dark') > -1) {
var link = document.getElementById('ionicLink');
link.setAttribute('href', link.getAttribute('href').replace('.css', '.dark.css'));
}
</script>
</head>
<body>
<ion-app></ion-app>
<script>
if (document.dir === 'rtl') {
document.body.classList.add('rtl');
} else {
document.body.classList.remove('rtl');
}
</script>
<script src="./build/polyfills.ng.js"></script>
<script src="./build/main.js"></script>
</body>
</html>

View File

@@ -0,0 +1,103 @@
// https://www.npmjs.com/package/node-sass
module.exports = {
/**
* outputFilename: The filename of the saved CSS file
* from the sass build. The directory which it is saved in
* is set within the "buildDir" config options.
*/
outputFilename: process.env.IONIC_OUTPUT_CSS_FILE_NAME,
/**
* sourceMap: If source map should be built or not.
*/
sourceMap: false,
/**
* outputStyle: How node-sass should output the css file.
*/
outputStyle: 'expanded',
/**
* autoprefixer: The config options for autoprefixer.
* Excluding this config will skip applying autoprefixer.
* https://www.npmjs.com/package/autoprefixer
*/
autoprefixer: {
browsers: [
'last 2 versions',
'iOS >= 8',
'Android >= 4.4',
'Explorer >= 11',
'ExplorerMobile >= 11'
],
cascade: false
},
/**
* includePaths: Used by node-sass for additional
* paths to search for sass imports by just name.
*/
includePaths: [
'src/themes',
'node_modules/ionicons/dist/scss',
'src/fonts'
],
/**
* includeFiles: An array of regex patterns to search for
* sass files in the same directory as the component module.
* If a file matches both include and exclude patterns, then
* the file will be excluded.
*/
includeFiles: [
/\.(s(c|a)ss)$/i
],
/**
* excludeFiles: An array of regex patterns for files which
* should be excluded. If a file matches both include and exclude
* patterns, then the file will be excluded.
*/
excludeFiles: [
/* /\.(wp).(scss)$/i */
],
/**
* variableSassFiles: Lists out the files which include
* only sass variables. These variables are the first sass files
* to be imported so their values override default variables.
*/
variableSassFiles: [
'./scripts/e2e/variables.scss'
],
/**
* directoryMaps: Compiled JS modules may be within a different
* directory than its source file and sibling component sass files.
* For example, NGC places it's files within the .tmp directory
* but doesn't copy over its sass files. This is useful so sass
* also checks the JavaScript's source directory for sass files.
*/
directoryMaps: {
'{{TMP}}': '{{SRC}}'
},
/**
* excludeModules: Used just as a way to skip over
* modules which we know wouldn't have any sass to be
* bundled. "excludeModules" isn't necessary, but is a
* good way to speed up build times by skipping modules.
*/
excludeModules: [
'@angular',
'commonjs-proxy',
'core-js',
'ionic-native',
'rxjs',
'zone.js'
]
};

View File

@@ -0,0 +1,87 @@
// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/
// Font path is used to include ionicons,
// roboto, and noto sans fonts
$font-path: "../assets/fonts";
@import "ionic.globals";
// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/theming/overriding-ionic-variables/
// Named Color Variables
// --------------------------------------------------
// Named colors makes it easy to reuse colors on various components.
// It's highly recommended to change the default colors
// to match your app's branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The "primary" color is the only required color in the map.
$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
vibrant: rebeccapurple,
bright: #ffc125,
greyYellow: (
base:#49606e,
contrast:#fbb636
),
greyWhite: (
base:#49606e,
contrast:#fff
)
);
// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here
// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here
// App Windows Variables
// --------------------------------------------------
// Windows only Sass variables can go here
// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic's
// default are overridden.
@import "ionic.theme.default";
// Ionicons
// --------------------------------------------------
// The premium icon font for Ionic. For more info, please see:
// http://ionicframework.com/docs/ionicons/
@import "ionic.ionicons";
// Fonts
// --------------------------------------------------
// Roboto font is used by default for Material Design. Noto sans
// is used by default for Windows.
@import "roboto";
@import "noto-sans";