React - storybook. Bootstrap Icon components don't show in storybook - javascript

I am building React storybook components using react-bootstrap.
Almost components are completed well.
But only some components that includes bootstrap icons don't show in storybook.
Is there any way to fix this issue?
Thanks.

Sometimes the issue is for linked components, in this case, you need import each icon from SVG.
import {
faEdit,
faUser,
faCartShopping,
faHeart,
} from "#fortawesome/free-solid-svg-icons";
Don't forget link the components in console with: npm link

import "bootstrap-icons/font/bootstrap-icons.css";
in the .storybook/preview.js file solved that issue.

Related

Material-UI Can't resolve '#material-ui/core/styles/createMuiTheme

I know people have posted similar question on StackOverflow, but nothing worked for me, the errors are not the same nor are the fixes, so I am creating a new post.
The firm that is testing me sent me their Github repository and I need to check out that code, it is a Telegram Web app and they are using Material-UI for their design, I cloned the repo installed node_modules and then I got the error from Material-UI ,I followed instructions from other StackOverflow posts but nothing worked for me, uninstalled #material-ui/core and #material-ui/icons, installed them again and still got the same error.
I have tried both NPM and Yarn for installation and nothing. Hope you can help, it is important.
./src/Theme.js
Module not found: Can't resolve '#material-ui/core/styles/createMuiTheme' in '/Users/Faruk/Desktop/int/telegram-react/src'
As #Ryan mentioned, createMuiTheme has been renamed to createTheme in the latest v4 and in v5. See the migration guide here for reference.
V5
import { createTheme } from '#mui/material/styles';
V4
import { createTheme } from '#material-ui/core/styles';
If you are using material UI V5 or higher, this works;
import { createTheme } from '#mui/material/styles';
Don't know about createMuiTheme. but you can use this for importing Styles in Mui. This solved mine on importing styles only,
import styled from '#material-ui/core';
Also it works for Material-ui Box, Paper, Link, Grid all of them. Use like this,
import { Grid, Link, makeStyles, Paper,Box, styled} from '#material-ui/core';
But I'm not sure with your theme .

How to properly build a Vue component library using Vuetify

I've done my research and found some questions about building a vue component library using vuetify. However none of them answered my issue.
After building the library and adding it to my app, the app throws errors of unknown custom elements. These elements are the vuetify ones.
Here is my small lib:
https://codesandbox.io/s/staging-water-f79hp
What am I doing wrong?
You have to import the Vuetify components and add them to the components section of your own components.
For example:
<script>
import VFileInput from 'vuetify/something'
export default {
name: 'FormParser',
components: {
VFileInput
}
}
</script>

How to import vue plugins installed with npm

I am sorry upfront for the pretty noobie question, but I don't know how to import plugins installed with npm. I would like to use this plugin for Vue, I have installed it with npm, in my project, and would like to import it to my main app.js file so that I can use it in Vue.
I have tried with using the path to the file in dist folder:
import MaskedInput from 'node-modules/vue-masked-input/dist/MaskedInput.js'
Vue.use(MaskedInput);
But, that obviously didn't work, what is the right way to do this?
Following the link this is actually a component, so what you could do in your component is:
import MaskedInput from 'vue-masked-input'
export default {
components: {
MaskedInput
}
}
What usually helps is by clicking through to the actual github page, and look for either an example in the README or in the actual code. In this case:
https://github.com/niksmr/vue-masked-input/blob/master/src/App.vue
There it shows you how you can use it 'in real life'

React: How to load components properly?

I am working on a simple app in react with ES6 and babel. Recently I faced this issue. I used react-notifications package here: https://github.com/minhtranite/react-notifications
I just followed the docs and it works fine. I can import it with import {NotificationContainer, NotificationManager} from 'react-notifications';
But then I tried to work with this: https://github.com/cezary/react-loading
Now in the example of react-loading, the developer isn't using the ES6 way to get the component. I tried to look at the JS file and tried this after doing npm install react-loading:
import {Loading} from 'react-loading'; but somehow this doesn't work. I get this:
You likely forgot to export your component from the file it's defined in
But I can see it is exported. What am I doing wrong?
Since it is a single module, it is exported as default. You'll have to do this:
import Loading from 'react-loading';

Wrap components of npm and export it as custom component

There's a problem installing 3rd party components from npm. For example there's a dropdown react module, I can use it easily in my module. But I have to declare its style and other dependencies of the component in many modules of mine.
Like for this component
I have to inject its style in every of my module
import 'icheck/skins/all.css';
How to solve this problem?
Assuming you're using a dropdown library, which we'll call Dropdown, you could create a custom module, called MyDropdown, where you import your CSS and export Dropdown.
All other modules that use Dropdown would import it from MyDropdown. The CSS will have been loaded along with it.

Categories