├── .editorconfig
├── .gitattributes
├── .gitignore
├── LICENSE
├── README.md
├── assets
└── logo.svg
├── bsconfig.json
├── example
├── .gitattributes
├── .gitignore
├── .spin
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── bsconfig.json
├── config
│ └── webpack.config.js
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── manifest.json
│ └── robot.txt
├── src
│ ├── Index.re
│ └── styles.css
└── yarn.lock
├── package.json
├── src
└── ReactReveal.re
└── yarn.lock
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | end_of_line = lf
6 | insert_final_newline = true
7 | indent_style = space
8 | indent_size = 2
9 | trim_trailing_whitespace = true
10 |
11 | [*.md]
12 | trim_trailing_whitespace = false
13 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | *.css linguist-detectable=false
2 | *.html linguist-detectable=false
3 | *.js linguist-detectable=false
4 | *.ts linguist-detectable=false
5 | *.c linguist-detectable=false
6 | *.cpp linguist-detectable=false
7 | *.re linguist-language=Reason
8 | *.rei linguist-language=Reason
9 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Normal npm stuff
2 | npm-debug.log
3 | /node_modules/
4 | /.cache/
5 | /dist/
6 | /build/
7 |
8 | # Bucklescript stuff
9 | /lib
10 | /types
11 | .merlin
12 | .bsb.lock
13 | *.bs.js
14 | _esy/
15 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Sander
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Installation •
7 | Basic usage •
8 | Supported features
9 |
10 |
11 |
12 |
13 | ## Installation
14 |
15 | ```sh
16 | yarn add @reasonbr/bs-react-reveal react-reveal
17 | ```
18 | Add the package to the `bsconfig.json`
19 | ```json
20 | {
21 | "bs-dependencies": [
22 | "@reasonbr/bs-react-reveal"
23 | ]
24 | }
25 | ```
26 |
27 | ## Usage
28 |
29 | ```reason
30 | open ReactReveal;
31 |
32 | [@react.component]
33 | let make = () => {
34 |
35 | {React.string("Fade animation...")
36 |
37 | }
38 | ```
39 | ## Status
40 | This is project is still `WIP`, but you can use all the components provided by [react-reveal](https://www.react-reveal.com/) with the almost all props.
41 | ### Supported features
42 | - Components:
43 | - `Reveal`: ⚠️ - Not yet `[WIP]`
44 | - `Fade`: ✅
45 | - `Flip`: ✅
46 | - `Rotate`: ✅
47 | - `Zoom`: ✅
48 | - `Bounce`: ✅
49 | - `Slide`: ✅
50 | - `Roll`: ✅
51 | - `LightSpeed`: ✅
52 | - `Jump`: ✅
53 | - `Flash`: ✅
54 | - `HeadShake`: ✅
55 | - `Jello`: ✅
56 | - `Pulse`: ✅
57 | - `RubberBand`: ✅
58 | - `Shake`: ✅
59 | - `Spin`: ✅
60 | - `Swing`: ✅
61 | - `Tada`: ✅
62 | - `Wobble`: ✅
63 | - Component props:
64 | - `duration`: ✅
65 | - `delay`: ✅
66 | - `left`: ✅
67 | - `right`: ✅
68 | - `top`: ✅
69 | - `bottom`: ✅
70 | - `count`: ✅
71 | - `forever`: ✅
72 | - `mirror`: ✅
73 | - `opposite`: ✅
74 | - `distance`: ✅
75 | - `spy`: ✅ ⚠️ - Only int values for now `[WIP]`
76 | - `when`: ✅ ⚠️ - Only bool values for now `[WIP]`
77 | - `in`: ✅ - ⚠️ Only bool values for now `[WIP]`
78 | - `appear`: ✅
79 | - `enter`: ✅
80 | - `exit`: ✅
81 | - `timeout`: ✅
82 | - `mountOnEnter`: ✅
83 | - `unmountOnExit`: ✅
84 | - `force`: ✅
85 | - `refProp`: ⚠️ - Not yet `[WIP]`
86 | - `innerRef`: ⚠️ - Not yet `[WIP]`
87 | - `cascade`: ✅
88 | - `collapse`: ✅
89 | - `fraction`: ✅
90 | - `ssrFadeout`: ✅
91 | - `ssrReveal`: ✅
92 | - `wait`: ✅
93 | - `onReveal`: ✅
94 | - `HOC's`: ⚠️ - Not yet `[WIP]`
95 | - `Custom effects`: ⚠️ - Not yet `[WIP]`
96 |
97 | ## Docs
98 | Check the official [react-reveal](https://www.react-reveal.com/docs/) documentation.
99 |
--------------------------------------------------------------------------------
/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/bsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@reasonbr/bs-react-reveal",
3 | "version": "0.0.5",
4 | "reason": {
5 | "react-jsx": 3
6 | },
7 | "sources": [
8 | {
9 | "dir" : "src",
10 | "subdirs" : true
11 | }
12 | ],
13 | "package-specs": {
14 | "module": "commonjs",
15 | "in-source": true
16 | },
17 | "suffix": ".bs.js",
18 | "bs-dependencies": ["reason-react"],
19 | "bs-dev-dependencies": [],
20 | "warnings": {
21 | "error" : "+5"
22 | },
23 | "refmt": 3
24 | }
25 |
--------------------------------------------------------------------------------
/example/.gitattributes:
--------------------------------------------------------------------------------
1 | # Supresses the lock folder from the diffs
2 | yarn.lock linguist-generated=true
3 | package-lock.json linguist-generated=true
4 |
5 | # Tell github that .re and .rei files are Reason
6 | *.re linguist-language=Reason
7 | *.rei linguist-language=Reason
8 |
9 | # Disable syntax detection for .spin
10 | .spin linguist-language=Text
11 |
12 | # Declare shell files to have LF endings on checkout
13 | # On Windows, the default git setting for `core.autocrlf`
14 | # means that when checking out code, LF endings get converted
15 | # to CRLF. This causes problems for shell scripts, as bash
16 | # gets choked up on the extra `\r` character.
17 | * text eol=lf
18 |
--------------------------------------------------------------------------------
/example/.gitignore:
--------------------------------------------------------------------------------
1 | # Normal npm stuff
2 | npm-debug.log
3 | /node_modules/
4 | /.cache/
5 | /dist/
6 | /build/
7 |
8 | # Bucklescript stuff
9 | /lib
10 | /types
11 | .merlin
12 | .bsb.lock
13 | *.bs.js
14 |
--------------------------------------------------------------------------------
/example/.spin:
--------------------------------------------------------------------------------
1 | (Source bs-react)
2 | (Cfg_str project_name example)
3 | (Cfg_str project_slug example)
4 | (Cfg_str project_description"A short, but powerful statement about your project")
5 | (Cfg_str css_framework None)
6 | (Cfg_str ci_cd None)
7 | (Cfg_str author_name vscodefy)
--------------------------------------------------------------------------------
/example/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 |
3 | ## Setup your development environment
4 |
5 | All the dependencies can be install via your favorite package manager:
6 |
7 | ```bash
8 | yarn install
9 | # Or
10 | npm install
11 | ```
12 |
13 | That's it! You're up and running, you can start the project with:
14 |
15 | ```bash
16 | yarn start
17 | # Or
18 | npm run start
19 | ```
20 |
21 | ### Running Tests
22 |
23 | This project uses Jest as a test framework. You can run the tests of the project with:
24 |
25 | ```bash
26 | yarn test
27 | # Or
28 | npm run test
29 | ```
30 |
31 | ### Creating production builds
32 |
33 | To create a production build of the application, you can run:
34 |
35 | ```bash
36 | yarn build
37 | # Or
38 | npm run build
39 | ```
40 |
41 | This will output the compiled files in `build/`.
42 |
43 | ### Repository Structure
44 |
45 | The following snippet describes example's repository structure.
46 |
47 | ```text
48 | .
49 | ├── config/
50 | | Configuration files used to build the project, such as the webpack configuration.
51 | │
52 | ├── public/
53 | | Static assets that you want to include when serving your application.
54 | │ The content of this folder will get copied to the production build.
55 | │
56 | ├── src/
57 | | Source code of the project application.
58 | │
59 | ├── tests/
60 | | Unit tests of the project.
61 | │
62 | ├── LICENSE
63 | │
64 | ├── package.json
65 | │
66 | └── README.md
67 | ```
68 |
--------------------------------------------------------------------------------
/example/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 vscodefy
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
1 | # example
2 |
3 | A short, but powerful statement about your project
4 |
5 | ## Contributing
6 |
7 | Take a look at our [Contributing Guide](CONTRIBUTING.md).
8 |
--------------------------------------------------------------------------------
/example/bsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example",
3 | "reason": {
4 | "react-jsx": 3
5 | },
6 | "sources": [
7 | {
8 | "dir": "src",
9 | "subdirs": true
10 | }
11 | ],
12 | "package-specs": [
13 | {
14 | "module": "commonjs",
15 | "in-source": true
16 | }
17 | ],
18 | "suffix": ".bs.js",
19 | "namespace": true,
20 | "bs-dependencies": [
21 | "reason-react",
22 | "@reasonbr/bs-react-reveal"
23 | ],
24 | "bs-dev-dependencies": [],
25 | "ppx-flags": [],
26 | "refmt": 3,
27 | "warnings": {
28 | "error": "+5"
29 | },
30 | "bsc-flags": [
31 | "-bs-super-errors",
32 | "-bs-no-version-header",
33 | "-open Belt"
34 | ]
35 | }
36 |
--------------------------------------------------------------------------------
/example/config/webpack.config.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs')
2 | const path = require('path')
3 | const HtmlWebpackPlugin = require('html-webpack-plugin')
4 | const TerserPlugin = require('terser-webpack-plugin')
5 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
6 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
7 |
8 | const appDirectory = fs.realpathSync(process.cwd())
9 | const paths = {
10 | appPublic: path.resolve(appDirectory, 'public'),
11 | appBuild: path.resolve(appDirectory, 'build'),
12 | appPublic: path.resolve(appDirectory, 'public'),
13 | appHtml: path.resolve(appDirectory, 'public/index.html'),
14 | appIndexJs: path.resolve(appDirectory, 'src/Index.bs'),
15 | appConfig: path.resolve(appDirectory, 'config/'),
16 | appSrc: path.resolve(appDirectory, 'src'),
17 | appNodeModules: path.resolve(appDirectory, 'node_modules'),
18 | }
19 |
20 | const isEnvProduction = process.env.NODE_ENV === 'production'
21 | const isEnvDevelopment = !isEnvProduction
22 |
23 | // This is the production and development configuration.
24 | // It is focused on developer experience, fast rebuilds, and a minimal bundle.
25 | module.exports = {
26 | mode: isEnvProduction ? 'production' : 'development',
27 | // Stop compilation early in production
28 | bail: isEnvProduction,
29 | devtool: isEnvProduction ? 'source-map' : 'cheap-module-source-map',
30 | entry: paths.appIndexJs,
31 | output: {
32 | // There will be one main bundle, and one file per asynchronous chunk.
33 | // In development, it does not produce real files.
34 | filename: isEnvProduction
35 | ? 'static/js/[name].[contenthash:8].js'
36 | : 'static/js/bundle.js',
37 | // TODO: remove this when upgrading to webpack 5
38 | futureEmitAssets: true,
39 | // There are also additional JS chunk files if you use code splitting.
40 | chunkFilename: isEnvProduction
41 | ? 'static/js/[name].[contenthash:8].chunk.js'
42 | : 'static/js/[name].chunk.js',
43 | // The build folder.
44 | path: isEnvProduction ? paths.appBuild : undefined,
45 | // Add /* filename */ comments to generated require()s in the output.
46 | pathinfo: isEnvDevelopment,
47 | publicPath: '/',
48 | },
49 | optimization: {
50 | minimize: isEnvProduction,
51 | // Automatically split vendor and commons
52 | // https://twitter.com/wSokra/status/969633336732905474
53 | // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
54 | splitChunks: {
55 | chunks: 'all',
56 | // name: false,
57 | },
58 | // Keep the runtime chunk separated to enable long term caching
59 | // https://twitter.com/wSokra/status/969679223278505985
60 | // https://github.com/facebook/create-react-app/issues/5358
61 | runtimeChunk: {
62 | name: entrypoint => `runtime-${entrypoint.name}`,
63 | },
64 | minimizer: [
65 | // This is only used in production mode
66 | new TerserPlugin({
67 | terserOptions: {
68 | parse: {
69 | // We want terser to parse ecma 8 code. However, we don't want it
70 | // to apply any minification steps that turns valid ecma 5 code
71 | // into invalid ecma 5 code. This is why the 'compress' and 'output'
72 | // sections only apply transformations that are ecma 5 safe
73 | // https://github.com/facebook/create-react-app/pull/4234
74 | ecma: 8,
75 | },
76 | compress: {
77 | ecma: 5,
78 | warnings: false,
79 | // Disabled because of an issue with Uglify breaking seemingly valid code:
80 | // https://github.com/facebook/create-react-app/issues/2376
81 | // Pending further investigation:
82 | // https://github.com/mishoo/UglifyJS2/issues/2011
83 | comparisons: false,
84 | // Disabled because of an issue with Terser breaking valid code:
85 | // https://github.com/facebook/create-react-app/issues/5250
86 | // Pending further investigation:
87 | // https://github.com/terser-js/terser/issues/120
88 | inline: 2,
89 | },
90 | mangle: {
91 | safari10: true,
92 | },
93 | output: {
94 | ecma: 5,
95 | comments: false,
96 | // Turned on because emoji and regex is not minified properly using default
97 | // https://github.com/facebook/create-react-app/issues/2488
98 | ascii_only: true,
99 | },
100 | },
101 | sourceMap: true,
102 | }),
103 | // This is only used in production mode
104 | new OptimizeCSSAssetsPlugin({
105 | cssProcessorOptions: {
106 | map: {
107 | // `inline: false` forces the sourcemap to be output into a
108 | // separate file
109 | inline: false,
110 | // `annotation: true` appends the sourceMappingURL to the end of
111 | // the css file, helping the browser find the sourcemap
112 | annotation: true,
113 | }
114 | },
115 | }),
116 | ]
117 | },
118 | module: {
119 | rules: [
120 | {
121 | test: /\.css$/,
122 | use: [
123 | isEnvDevelopment && 'style-loader',
124 | isEnvProduction && {
125 | loader: MiniCssExtractPlugin.loader,
126 | },
127 | {
128 | loader: 'css-loader',
129 | options: {
130 | importLoaders: 1,
131 | sourceMap: isEnvProduction,
132 | },
133 | },
134 | ].filter(Boolean)
135 | }
136 | ]
137 | },
138 | plugins: [
139 | // Generates an `index.html` file with the