Skip to content

Commit

Permalink
Initial public commit.
Browse files Browse the repository at this point in the history
  • Loading branch information
Vestride committed Jul 21, 2017
0 parents commit 77d94b6
Show file tree
Hide file tree
Showing 800 changed files with 107,934 additions and 0 deletions.
13 changes: 13 additions & 0 deletions .editorconfig
@@ -0,0 +1,13 @@
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
9 changes: 9 additions & 0 deletions .eslintignore
@@ -0,0 +1,9 @@
dist
docs
node_modules
coverage

# Generated demo and test files.
demo.js
raf.js
specs.js
4 changes: 4 additions & 0 deletions .eslintrc.json
@@ -0,0 +1,4 @@
{
"root": true,
"extends": "@odopod"
}
35 changes: 35 additions & 0 deletions .github/ISSUE_TEMPLATE.md
@@ -0,0 +1,35 @@
<!--
Reporting a bug?
================
- Try to search for your issue, it may have already been answered or even fixed in a development branch.
- Check if the issue is reproducible with the latest stable version.
- Please provide as much relevant info as possible.
- It is recommended that you make a JSFiddle/JSBin/Codepen to demonstrate your issue.
- If your issue is resolved but still open, don’t hesitate to close it. In case you found a solution by yourself, it could be helpful to explain how you fixed it.
Have a feature request?
=======================
Remove the template from below and explain why the feature should be added. Specific use-cases are best.
-->

<!-- BUG REPORT TEMPLATE -->
### Odo component name


### Odo component version


### Reproduction Link
<!-- A minimal JSBin, JSFiddle, Codepen, or a GitHub repository that can reproduce the bug. -->

### Steps to reproduce


### What is Expected?


### What is actually happening?
4 changes: 4 additions & 0 deletions .github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,4 @@
<!--
Please make sure to read the Pull Request Guidelines:
https://github.com/odopod/code-library/blob/master/CONTRIBUTING.md#pull-requests
-->
9 changes: 9 additions & 0 deletions .gitignore
@@ -0,0 +1,9 @@
.DS_Store
/node_modules
packages/**/node_modules
npm-debug.log
yarn-error.log
coverage/
*.instrumented.js
**/tests/specs.js
**/demos/scripts/demo.js
123 changes: 123 additions & 0 deletions CONTRIBUTING.md
@@ -0,0 +1,123 @@
# Contributing to Odo

Want to contribute to Odo? Great! If you're new to contributing to contributing to open source, please check out [GitHub's guide for contributing to open source](https://guides.github.com/activities/contributing-to-open-source/index.html).

## Issues
If you find a bug in the source code or a mistake in the documentation, you can help us by submitting an issue. Please check existing issues first for your issue by searching the open and closed issues. Providing the following information will increase the chances of your issue being dealt with quickly:

* **Overview of the Issue** - if an error is being thrown a non-minified stack trace helps
* **Motivation for or Use Case** - explain why this is a bug for you
* **Browsers and Operating System** - is this a problem with all browsers or only a specific one?
* **Reproduce the Error** - provide a [reduced test case](https://css-tricks.com/reduced-test-cases/) (using [JS Bin](https://jsbin.com), [JSFiddle](https://jsfiddle.net/), or [CodePen](http://codepen.io/)) or a unambiguous set of steps.
* **Related Issues** - has a similar issue been reported before?
* **Paste error output** or logs in your issue or in a Gist. If pasting them in the issue, wrap it in three backticks so that it renders nicely.
* **Suggest a Fix** - if you can't fix the bug yourself, perhaps you can point to what might be causing the problem (line of code or commit)

If your issue does not contain sufficient information, it may be closed.

## Developing

### Setup

[Install `yarn`](https://yarnpkg.com/docs/install).

```sh
$ git clone https://github.com/odopod/code-library.git odo
$ cd odo
$ yarn run setup # Grab a coffee
```

Running the `setup` script will `yarn link` _explicit_ local dependencies for each package. It then will install the dependencies for each package and run the `test` script which compiles the package and runs its tests.

### Package Tasks

Once the dependencies are installed, `cd` into the component directory you want to work on. There are a few gulp tasks available to you:

| Task | Description |
|--------------|-------------|
| `watch` | Watch source and demo files |
| `watch-test` | Watch all files and re-run tests on change |
| `build` | Compile source and demo files |
| `test` | Compile tests, run them, and gather code coverage |
| `all` | Compile everything and test |

You can also run these gulp tasks from the root directory if you supply an argument. For example, to build the carousel, you can `gulp build --project odo-carousel` or even `gulp build -p carousel`.

### Project Tasks

Scripts available in the main `package.json`.

| Task | Description |
|--------------|-------------|
| `build-test-all` | Run `default` `gulp` task in each package. |
| `docs` | Generate docs files |
| `setup` | Link all odo dependencies, install all dependencies, and `build-test-all` |
| `test` | Run `yarn test` in every package |

There are others, but they're mostly used within the ones above.

## Pull Requests

If you’re able to patch the bug or add the feature yourself – fantastic, make a pull request with the code! We mostly follow [Airbnb's JavaScript style guide](https://github.com/airbnb/javascript). The linter will tell you if you're not conforming.

* Make your changes in a new git branch:

```shell
git checkout -b my-fix-branch master
```

* Create your patch, **including appropriate test cases**.
* If you're adding a feature, make sure to update the **documentation/demos**.
* Build your changes locally to ensure all the tests pass:

```shell
gulp
```

* Push your branch to GitHub:

```shell
git push origin my-fix-branch
```

* In GitHub, send a pull request to the `master` branch.
* If we suggest changes then:
* Make the required updates.
* Re-run the tests to ensure they are still passing.
* Rebase your branch and force push to your GitHub repository (this will update your Pull Request):

```shell
git rebase master -i
git push -f
```

That's it! Thank you for your contribution!

#### After your pull request is merged

After your pull request is merged, you can safely delete your branch and pull the changes
from the main (upstream) repository:

* Delete the remote branch on GitHub either through the GitHub web UI or your local shell as follows:

```shell
git push origin --delete my-fix-branch
```

* Check out the master branch:

```shell
git checkout master -f
```

* Delete the local branch:

```shell
git branch -D my-fix-branch
```

* Update your master with the latest upstream version:

```shell
git pull --ff upstream master
```
21 changes: 21 additions & 0 deletions LICENSE
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2017 Odopod

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
84 changes: 84 additions & 0 deletions README.md
@@ -0,0 +1,84 @@
# Odo

> A collection of JavaScript components used in Odopod projects.
## Want to contribute to Odo?

Take a look at [CONTRIBUTING.md](https://github.com/odopod/code-library/blob/master/CONTRIBUTING.md).

## Packages

The Odo repo is managed as a [monorepo](https://github.com/babel/babel/blob/master/doc/design/monorepo.md); it's composed of many npm packages.

| Package | Version |
|---------|---------|
| [`@odopod/odo-affix`](/packages/odo-affix) | [![npm](https://img.shields.io/npm/v/@odopod/odo-affix.svg)](https://www.npmjs.com/package/@odopod/odo-affix) |
| [`@odopod/odo-background-video`](/packages/odo-background-video) | [![npm](https://img.shields.io/npm/v/@odopod/odo-background-video.svg)](https://www.npmjs.com/package/@odopod/odo-background-video) |
| [`@odopod/odo-base-component`](/packages/odo-base-component) | [![npm](https://img.shields.io/npm/v/@odopod/odo-base-component.svg)](https://www.npmjs.com/package/@odopod/odo-base-component) |
| [`@odopod/odo-carousel`](/packages/odo-carousel) | [![npm](https://img.shields.io/npm/v/@odopod/odo-carousel.svg)](https://www.npmjs.com/package/@odopod/odo-carousel) |
| [`@odopod/odo-device`](/packages/odo-device) | [![npm](https://img.shields.io/npm/v/@odopod/odo-device.svg)](https://www.npmjs.com/package/@odopod/odo-device) |
| [`@odopod/odo-dialog`](/packages/odo-dialog) | [![npm](https://img.shields.io/npm/v/@odopod/odo-dialog.svg)](https://www.npmjs.com/package/@odopod/odo-dialog) |
| [`@odopod/odo-draggable`](/packages/odo-draggable) | [![npm](https://img.shields.io/npm/v/@odopod/odo-draggable.svg)](https://www.npmjs.com/package/@odopod/odo-draggable) |
| [`@odopod/odo-dropdown`](/packages/odo-dropdown) | [![npm](https://img.shields.io/npm/v/@odopod/odo-dropdown.svg)](https://www.npmjs.com/package/@odopod/odo-dropdown) |
| [`@odopod/odo-dual-viewer`](/packages/odo-dual-viewer) | [![npm](https://img.shields.io/npm/v/@odopod/odo-dual-viewer.svg)](https://www.npmjs.com/package/@odopod/odo-dual-viewer) |
| [`@odopod/odo-helpers`](/packages/odo-helpers) | [![npm](https://img.shields.io/npm/v/@odopod/odo-helpers.svg)](https://www.npmjs.com/package/@odopod/odo-helpers) |
| [`@odopod/odo-hotspots`](/packages/odo-hotspots) | [![npm](https://img.shields.io/npm/v/@odopod/odo-hotspots.svg)](https://www.npmjs.com/package/@odopod/odo-hotspots) |
| [`@odopod/odo-module`](/packages/odo-module) | [![npm](https://img.shields.io/npm/v/@odopod/odo-module.svg)](https://www.npmjs.com/package/@odopod/odo-module) |
| [`@odopod/odo-object-fit`](/packages/odo-object-fit) | [![npm](https://img.shields.io/npm/v/@odopod/odo-object-fit.svg)](https://www.npmjs.com/package/@odopod/odo-object-fit) |
| [`@odopod/odo-on-swipe`](/packages/odo-on-swipe) | [![npm](https://img.shields.io/npm/v/@odopod/odo-on-swipe.svg)](https://www.npmjs.com/package/@odopod/odo-on-swipe) |
| [`@odopod/odo-parallax`](/packages/odo-parallax) | [![npm](https://img.shields.io/npm/v/@odopod/odo-parallax.svg)](https://www.npmjs.com/package/@odopod/odo-parallax) |
| [`@odopod/odo-pointer`](/packages/odo-pointer) | [![npm](https://img.shields.io/npm/v/@odopod/odo-pointer.svg)](https://www.npmjs.com/package/@odopod/odo-pointer) |
| [`@odopod/odo-responsive-attributes`](/packages/odo-responsive-attributes) | [![npm](https://img.shields.io/npm/v/@odopod/odo-responsive-attributes.svg)](https://www.npmjs.com/package/@odopod/odo-responsive-attributes) |
| [`@odopod/odo-responsive-classes`](/packages/odo-responsive-classes) | [![npm](https://img.shields.io/npm/v/@odopod/odo-responsive-classes.svg)](https://www.npmjs.com/package/@odopod/odo-responsive-classes) |
| [`@odopod/odo-responsive-images`](/packages/odo-responsive-images) | [![npm](https://img.shields.io/npm/v/@odopod/odo-responsive-images.svg)](https://www.npmjs.com/package/@odopod/odo-responsive-images) |
| [`@odopod/odo-reveal`](/packages/odo-reveal) | [![npm](https://img.shields.io/npm/v/@odopod/odo-reveal.svg)](https://www.npmjs.com/package/@odopod/odo-reveal) |
| [`@odopod/odo-scroll-animation`](/packages/odo-scroll-animation) | [![npm](https://img.shields.io/npm/v/@odopod/odo-scroll-animation.svg)](https://www.npmjs.com/package/@odopod/odo-scroll-animation) |
| [`@odopod/odo-scroll-feedback`](/packages/odo-scroll-feedback) | [![npm](https://img.shields.io/npm/v/@odopod/odo-scroll-feedback.svg)](https://www.npmjs.com/package/@odopod/odo-scroll-feedback) |
| [`@odopod/odo-share`](/packages/odo-share) | [![npm](https://img.shields.io/npm/v/@odopod/odo-share.svg)](https://www.npmjs.com/package/@odopod/odo-share) |
| [`@odopod/odo-sticky-headers`](/packages/odo-sticky-headers) | [![npm](https://img.shields.io/npm/v/@odopod/odo-sticky-headers.svg)](https://www.npmjs.com/package/@odopod/odo-sticky-headers) |
| [`@odopod/odo-tabs`](/packages/odo-tabs) | [![npm](https://img.shields.io/npm/v/@odopod/odo-tabs.svg)](https://www.npmjs.com/package/@odopod/odo-tabs) |
| [`@odopod/odo-tap`](/packages/odo-tap) | [![npm](https://img.shields.io/npm/v/@odopod/odo-tap.svg)](https://www.npmjs.com/package/@odopod/odo-tap) |
| [`@odopod/odo-video`](/packages/odo-video) | [![npm](https://img.shields.io/npm/v/@odopod/odo-video.svg)](https://www.npmjs.com/package/@odopod/odo-video) |
| [`@odopod/odo-viewport`](/packages/odo-viewport) | [![npm](https://img.shields.io/npm/v/@odopod/odo-viewport.svg)](https://www.npmjs.com/package/@odopod/odo-viewport) |
| [`@odopod/odo-window-events`](/packages/odo-window-events) | [![npm](https://img.shields.io/npm/v/@odopod/odo-window-events.svg)](https://www.npmjs.com/package/@odopod/odo-window-events) |

## Tips for advanced webpack configuration

If you use webpack (or another bundler) for your project and are already using a compiler for your JavaScript (like babel), you have the option of using odo component source files and compiling them with your project.

This has a couple benefits:

* No dependencies for odo are bundled with their dist files. For example, the `debounce` package is bundled in a couple odo components.
* Use the same babel preset for your app's code _and_ odo components. Maybe you're using [`babel-preset-env`](https://github.com/babel/babel-preset-env) so that you can compile less.
* Less boilerplate code. Each odo component comes with webpack's [UMD](https://github.com/umdjs/umd) [wrapper](https://webpack.js.org/configuration/output/#output-librarytarget) so that it can work in multiple environments.

Use the `alias` object to map requests for odo components to their source files instead of dist files. This configuration is intended for webpack v2.

```js
// Webpack config
{
resolve: {
alias: {
'@odopod/odo-carousel$': '@odopod/odo-carousel/src/carousel.js',
'@odopod/odo-device$': '@odopod/odo-device/src/device.js',
'@odopod/odo-draggable$': '@odopod/odo-draggable/src/draggable.js',
'@odopod/odo-helpers$': '@odopod/odo-helpers/index.js',
'@odopod/odo-pointer$': '@odopod/odo-pointer/src/pointer.js',
},
},
}
```

Don't `exclude` odo components from being compiled with babel.

```js
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules\/(?!@odopod\/odo-)/,
loader: 'babel-loader',
},
}
]
```

0 comments on commit 77d94b6

Please sign in to comment.