react-native-elements / react-native-elements-storybook Goto Github PK

View Code? Open in Web Editor NEW

27.0 3.0 15.0 2.8 MB

Storybook for React Native Elements UI Library

License: MIT License

JavaScript 15.82% HTML 82.92% Java 0.22% Objective-C 0.61% CSS 0.13% Starlark 0.31%

react-native react-native-elements react-native-web storybook

react-native-elements-storybook's Introduction

A Storybook for React Native Elements UI Library

Get Started

Development

Install package dependencies

➜  react-native-elements-storybook git:(master) ✗ yarn

Start Storybook

➜  react-native-elements-storybook git:(master) ✗ yarn storybook

It will start webpack-dev-server at port 6006 and opens the browser automagically.

╭────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 5.0.6 started                          │
│   20 s for manager and 22 s for preview            │
│                                                    │
│   Local:            http://localhost:6006/         │
│                                                    │
╰────────────────────────────────────────────────────╯

Deployment

Export storybook as a static web app and place it inside the .out directory

✗ yarn build-storybook

Now you can deploy the content in the .out directory wherever you want.

To test it locally, using serve for example:

✗ npx serve .out

Start Storybook in iOS Simulator

✗ yarn ios

Components included:

Contributing

Interested in contributing to this repo? Submit a PR for a new feature/bug fix.

First Contributors

We encourage everyone to contribute & submit PR's especially first-time contributors. Look for the label Good First Issue on the issues. Click here to see them.

If there is something you's like to see or request a new feature, please submit an issue or a pull request.

react-native-elements-storybook's People

Contributors

Stargazers

Watchers

Forkers

gbhasha naturalclar theodorusyoga newdaveespionage pranshuchittora hoangnguyen1247 superhen tewarig nlok5923 prathamsinghsaluja mhimanshu712 rodctech backbayrider faizzz7348 shadan-hussain

react-native-elements-storybook's Issues

Unable to start metro, react-native start hit error

Running react-native start to start the metro bundler gives the following error:

UnhandledPromiseRejectionWarning: Error: `fsevents` unavailable (this watcher can only be used on Darwin) at new FSEventsWatcher

chore: needed issue and pull request templates.

There should be proper templates to extract out useful information about contribution.

Templates need to be added are:

bug report template
pull request template
feature request template

need to add certain components in story book

still there are few components which are missing in story book they are:

Overlay
Rating
Search bar
Slider
Tooltip

The following asset(s) exceed the recommended size limit

To reproduce, run yarn build-storybook. There are two asset size limit warnings that can impact web performance.

yarn build-storybook
yarn run v1.15.2
$ build-storybook -c .storybook -o .out
info @storybook/react v5.0.6
info
info clean outputDir..
info => Copying prebuild dll's..
info => Building manager..
info => Loading manager config..
info => Loading presets
info => Compiling manager..
info => manager built (12 s)
WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
WARN This can impact web performance.
WARN Assets:
WARN   vendors~main.587e785d3b39ea07a8b4.bundle.js (1.19 MiB)
WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
WARN Entrypoints:
WARN   main (1.19 MiB)
WARN       runtime~main.6ac4c33d73ae9704bbb9.bundle.js
WARN       vendors~main.587e785d3b39ea07a8b4.bundle.js
WARN       main.78dd7914b17fa05a2a5e.bundle.js
WARN
WARN webpack performance recommendations:
WARN You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
WARN For more info visit https://webpack.js.org/guides/code-splitting/
info => Building preview..
info => Loading preview config..
info => Loading presets
info => Loading custom webpack config (extending mode).
info => Using base config because react-scripts is not installed.
info => Compiling preview..
 10% building 1/1 modules 0 active(node:1679) DeprecationWarning: Extend-mode configuration is deprecated, please use full-control mode instead.

See https://storybook.js.org/docs/configurations/custom-webpack-config/#full-control-mode
info => Preview built (19 s)
WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
WARN This can impact web performance.
WARN Assets:
WARN   vendors~main.233f5970e9ab16c4055e.bundle.js (1.66 MiB)
WARN   iframe.html (385 KiB)
WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
WARN Entrypoints:
WARN   main (1.67 MiB)
WARN       runtime~main.233f5970e9ab16c4055e.bundle.js
WARN       vendors~main.233f5970e9ab16c4055e.bundle.js
WARN       main.233f5970e9ab16c4055e.bundle.js
WARN
WARN webpack performance recommendations:
WARN You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
WARN For more info visit https://webpack.js.org/guides/code-splitting/

Solution: implement Code Splitting.

Catch up with latest React Native Web version

Current RNW:

➜  react-native-elements-storybook git:(master) npm show react-native-web

[email protected] | MIT | deps: 10 | versions: 210
React Native for Web
https://github.com/necolas/react-native-web#readme

keywords: react, react-component, react-native, web

dist
.tarball: https://registry.npmjs.org/react-native-web/-/react-native-web-0.11.7.tgz
.shasum: d173d5a9b58db23b6d442c4bc4c81e9939adac23
.integrity: sha512-w1KAxX2FYLS2GAi3w3BnEZg/IUu7FdgHnLmFKHplRnHMV3u1OPB2EVA7ndNdfu7ds4Rn2OZjSXoNh6F61g3gkA==
.unpackedSize: 2.5 MB

dependencies:
array-find-index: ^1.0.2      fbjs: ^1.0.0                  prop-types: ^15.6.0
create-react-class: ^15.6.2   hyphenate-style-name: ^1.0.2  react-timer-mixin: ^0.13.4
debounce: ^1.2.0              inline-style-prefixer: ^5.0.3
deep-assign: ^3.0.0           normalize-css-color: ^1.0.2

maintainers:
- necolas <[email protected]>

dist-tags:
latest: 0.11.7        next: 0.11.0-alpha.3

published 2 months ago by necolas <[email protected]>

Meanwhile, this is still v0.9.

DeprecationWarning: Extend-mode configuration is deprecated

Instead of an object, webpack.config.js should return a function.

How to reproduce:

yarn storybook
There is DeprecationWarning

... please use full-control mode instead.

See https://storybook.js.org/docs/configurations/custom-webpack-config/#full-control-mode

Could not get unknown property 'mergeResourcesProvider' when running on Android

Steps to reproduce:
I got this error while running on Android: yarn android (react-native run-android).

Where:
Script '/Users/theoyoga/Documents/react-native-elements-storybook/node_modules/react-native/react.gradle' line: 95
What went wrong:
A problem occurred configuring project ':app'.
> Could not get unknown property 'mergeResourcesProvider' for object of type com.android.build.gradle.internal.api.ApplicationVariantImpl.

Temporary solution:
I found the issue and a quick workaround from this link: facebook/react-native/24022#474717616. I solved it by upgrading gradle version and SDK versions, etc in android/build.gradle.

@haruelrovix I also submitted a PR related to this error. Please take a look.

Thanks.

Potential security vulnerability in one of your dependencies

An issue was discovered in lib/Server.js in webpack-dev-server before 3.1.11. Attackers are able to steal developer's code because the origin of requests is not checked by the WebSocket server, which is used for HMR (Hot Module Replacement). Anyone can receive the HMR message sent by the WebSocket server via a ws://127.0.0.1:8080/ connection from any origin.

Need to upgrade webpack-dev-server to version 3.1.11 or later.