I have two repositories in github: with storybook and with rect project. How do I need to properly arrange the folders so that I can update the repositories separately and use components from the storybook in the project? Thanks
There could be two scenarios:
1) You want to independently develop components as a separate repository using storybook which is the case in most cases.
Here we have several options to share components:-
Publish onto npm and use as any other react component from npm
like react-select etc.
You want to use this component internally only in internal
projects. use git ssh Refer to this
link for more info.
2) You want to share components only in specific repositories.
In this case you could combine all those repositories using lerna and one of the repository could be for storybook. So all projects are under lerna so easily shareable.
Hope that helps!!!
Related
I know that in React you can add components to any existing page from this excellent documentation (https://reactjs.org/docs/add-react-to-a-website.html). However, in that example the component is built from scratch. I am building several of my own components from scratch too but I would like to use a few different components from npm as well. For example, there is one called react-ace (https://www.npmjs.com/package/react-ace).
If a component is published on npm (and available on unpkg.com) is it possible to add it to an existing page like in the React docs example above? I have tried adding a script tag with this as the source: https://unpkg.com/react-ace#9.4.1/dist/react-ace.js/main.js but that does not make the AceEditor available. Or, do components have to be processed somehow in order to use them?
Note: I am also exploring using create-react-app to build and share the app and I may end up doing that but I want to know if any npm React component can be used in an existing page and if so how?
Basically I want to
Have MaterialUI as the base package (#material-ui/core)
Customize all or the required components as per my branding and style guide and generate my own component library as NPM package. (customize #material-ui/core and create own package like #myorg/core)
Use those custom components in my project by installing the NPM package & importing. (npm install #myorg/core and import 'button' from '#myorg/core/button')
Because I want to create a common component library for different react applications.
Please let me know if that makes sense.
Of course you can.
Creating a package is possible and even recommended if you want to reuse it in different applications or publish it.
Most of the packages are using another packages (called dependencies) and sometimes building new components on top of these packages' components. You can read more about dependencies here..
Packages with MIT License allows Modification as well.
More information about creating NodeJS modules can be found here.
And finally, if you are willing to publish the package in NPM, follow this.
I understand we can create and test React Native Components in isolation in Storybook. But how do we export/publish the components to integrate in our app?
In React -
I used react-docgen that will allow me to create and document components as a standalone project
Then I will build and publish my doc app as a package to npm registry and npm install as dependency in my app to import those components
How do we do same in Storybook with React Native? Should I -
copy files/code of tested components in my actual app?
export everything just in stories folder and build and publish as package and install as dependency in my app?
Install storybook in my actual app? But I guess that's not an option as storybook is supposed to be run as standalone app in itself
May be I am missing something obvious as no tutorial/article/doc talk about how to consume the created Components in final apps? Can someone please shed some light? Thank you.
Ok, someone finally said this in a tutorial-
Once you find the component and the state that you want, you can see the source code you need to place in your application to get the exact same functionality
So, after all it will act simply like a UI library documentation from where you need to copy code from example and cannot add stories as dependency to your project.
I have three different repos based o React.js and flux architecture(actions/store/utils model) on bitbucket and I want to use some UI components across these repos.
What could be the best way to achieve this, and maintain versions if possible.
Move your components into a separate repository, google it how to set up that repo with NPM
as a package. Then in the other repos you can install the first one as an NPM dependency. You can support multiple versions just like you probably already doing with third party npm packages.
If you want to go further you can setup your own npm registry to store all these.
I want to split my web project into three: front-end, back-end and super-admin.
What is the best way to re-use the components across code bases? Npm packages? That seems hard to maintain:
Open component dev package
Make changes
Push changes
Tag version
Update all projects
Seems complex and prone to errors. Is there a better way?
Depends on if you need to use different versions of the shared components from different projects. If so, you probably need to make a versioned npm package. However, if you just want to share the packages and use the same version everywhere, you have other options. For one, you don't have to actually build and publish an npm packge, you can just use npm link. This will basically create a symlink to your shared code in node_modules of the other projects.
Alternatively, you can do it without any npm package at all, just have the shared components in a separate project (directory) and import them in javascript through an alias, using a bundling system (webpack alias / browserify aliasify).