I get the propTypes to render but not the show code...
This is my Component.stories.jsx
import React, { useCallback, useState } from 'react';
import { MoreVertical, Repeat, Trash2, ExternalLink } from 'react-feather';
import { radios } from '#storybook/addon-knobs';
import { withMemoryRouter } from 'utils/wrapper';
import { HORIZONTAL, VERTICAL } from 'data/globals';
import { useTranslation } from 'react-i18next';
import ActionMenu from '.';
import ContainerCenteredStorybook from '../storybook/ContainerCenteredStorybook';
export function ActionMenuExample() {
[![enter image description here][1]][1]
return (
<ContainerCenteredStorybook>
<>
<MoreVertical onClick={handleClick} />
<ActionMenu
anchorEl={anchorEl}
anchorOrigin={{
horizontal: anchorHorizontal,
vertical: anchorVertical,
}}
onClose={handleClose}
items={items}
transformOrigin={{
horizontal: transformHorizontal,
vertical: transformVertical,
}}
/>
</>
</ContainerCenteredStorybook>
);
}
ActionMenuExample.storyName = 'Action Menu';
export default {
component: ActionMenu,
decorators: [withMemoryRouter],
title: 'Action Menu',
};
As you can see No code is available...
How do I get this to work?
Related
I am developing a dropdown Sidebar with ReactJS, and using separate files with the name of sizeConfig and colorConfigs and access it in mainLayout page using material UI.
sizeConfigs.js:
const sizeConfigs = {
sidebar:{
width:"300px"
}
}
export default sizeConfigs
colorConfigs.js:
import { colors } from "#mui/material";
const colorConfigs = {
sidebar: {
bg: "#233044",
color: "#eeeeee",
hoverBg: "#1e293a",
activeBg: "#1e253a"
},
topbar: {
bg: "#fff",
color: "#000"
},
mainBg: colors.grey["100"]
};
export default colorConfigs;
MainLayout.jsx:
import { Box, Toolbar } from '#mui/material'
import React from 'react'
import Topbar from '../common/Topbar'
import sizeConfigs from '../../configs/sizeConfigs'
import colorConfigs from '../../configs/colorConfigs'
import Sidebar from '../common/Sidebar'
import { Outlet } from 'react-router-dom'
const MainLayout = () => {
return (
<Box sx={{display:"flex"}}>
<Topbar />
{/*2nd Box*/}
<Box componenet="nav" sx={{
width:sizeConfigs.sidebar.width,
flexShrink:0
}}>
<Sidebar />
</Box>
{/*3rd Box*/}
<Box component="main" sx={{
flexGrow:1,
p:3,
width:`calc(100%-${sizeConfigs.sidebar.width})`,
minHeight: "100vh",
backgroundColor:colorConfigs.mainBg
}}>
<Toolbar />
<Outlet />
</Box>
</Box>
);
};
export default MainLayout
App.jsx File:
import {BrowserRouter,Routes,Route} from 'react-router-dom'
import MainLayout from './components/layout/MainLayout';
//import HomePage from './pages/home/HomePage';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path='/' element={<MainLayout/>}/>
</Routes>
</BrowserRouter>
);
}
export default App;
This code is showing my sidebar with main page, but when I add 2nd Route with index element, only homepage is showing on my main screen sidebar is not showing.
Code after adding 2nd Route:
import {BrowserRouter,Routes,Route} from 'react-router-dom'
import MainLayout from './components/layout/MainLayout';
import HomePage from './pages/home/HomePage';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path='/' element={<MainLayout/>}/>
<Route index element={<HomePage/>}/>
</Routes>
</BrowserRouter>
);
}
export default App;
Please help me finding the mistake why my code is not displaying the sidebar and home page with display:flex as shown in the image:
I have prepared this custom tab to style it as I want:
import { withStyles } from "#material-ui/core/styles";
const StyledTab = withStyles((theme) => ({
root: {
backgroundColor: "yellow",
},
}))((props) => {
const { shouldSetBackgroundColorToOrange } = props;
return <Tab {...props} />;
});
This is how it's used:
<StyledTab label={"Room"} shouldSetBackgroundColorToOrange={true} />;
I'd like to set its color to orange based on the shouldSetBackgroundColorToOrange prop that's passed to it.
But, I couldn't find a way to do this.
Have a look at the code below and in this working codesandbox
In using the button but you can easily adopt it in your code
import React from "react";
import { createStyles, makeStyles } from "#material-ui/core/styles";
import Button from "#material-ui/core/Button";
interface styleProps {
shouldSetBackgroundColorToOrange: boolean;
}
const useStyles = makeStyles((theme) =>
createStyles({
root: {
backgroundColor: ({shouldSetBackgroundColorToOrange}: styleProps) =>
shouldSetBackgroundColorToOrange ? "orange" : "yellow"
}
})
);
function TestComponent() {
const classes = useStyles({ shouldSetBackgroundColorToOrange: true });
return (
<Button variant="contained" className={classes.root}>
Button
</Button>
);
}
export default TestComponent;
I´m looking for way to load static texts into storybook via next-translate.
My code looks like this, but it´s loading my locale files, but not writing them properly.
This is storybook preview.js:
import '../src/styles/global/global.scss';
import CssBaseline from '#material-ui/core/CssBaseline';
import { ThemeProvider } from '#material-ui/core/styles';
import theme from '../src/utils/theme';
import I18nProvider from 'next-translate/I18nProvider';
import commonCS from '../locales/cs/common.json';
export const decorators = [(Story) => themeDecorator(Story)];
const themeDecorator = (Story) => {
console.log(commonCS.homepage_title);
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<I18nProvider lang={'cs-CS'} namespaces={{ commonCS }}>
<Story />
</I18nProvider>
</ThemeProvider>
);
};
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: { expanded: true },
};
And this is my storybook storie:
import React from 'react';
import HeaderContact from './HeaderContact';
import I18nProvider from 'next-translate/I18nProvider';
import useTranslation from 'next-translate/useTranslation';
import commonCS from '../../../locales/cs/common.json';
export default {
title: 'HeaderContact',
component: HeaderContact,
};
export const Basic = () => {
const { t } = useTranslation('common');
return (
<HeaderContact
link="mailto:info#numisdeal.com"
text={t('homepage_title')}
/>
);
};
My local file common.json:
{
"homepage_title": "Blog in Next.js",
"homepage_description": "This example shows a multilingual blog built in Next.js with next-translate"
}
And my translate config i18n.json
{
"locales": ["cs", "en", "de"],
"defaultLocale": "cs",
"pages": {
"*": ["common"]
}
}
I would be very glad for some help.
Thanks!
Roman
Here is the solution.
preview.js
import '../src/styles/global/global.scss';
import CssBaseline from '#material-ui/core/CssBaseline';
import { ThemeProvider } from '#material-ui/core/styles';
import theme from '../src/utils/theme';
import I18nProvider from 'next-translate/I18nProvider';
import commonCS from '../locales/cs/common.json';
export const decorators = [(Story) => themeDecorator(Story)];
const themeDecorator = (Story) => {
console.log(commonCS.homepage_title);
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<I18nProvider lang={'cs'} namespaces={{ common: commonCS }}>
<Story />
</I18nProvider>
</ThemeProvider>
);
};
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: { expanded: true },
};
Storie:
import React from 'react';
import HeaderContact from './HeaderContact';
export default {
title: 'HeaderContact',
component: HeaderContact,
};
export const Basic = () => {
return <HeaderContact link="mailto:info#numisdeal.com" />;
};
Component:
import React from 'react';
import AlternateEmailIcon from '#material-ui/icons/AlternateEmail';
import useTranslation from 'next-translate/useTranslation';
import styles from './HeaderContact.module.scss';
export interface IHeaderContact {
link: string;
text?: string;
}
export default function HeaderContact(props: IHeaderContact) {
const { link, text } = props;
const { t } = useTranslation('common');
const preklad = t('homepage_title');
return (
<a href={link} className={styles.headerLink}>
<AlternateEmailIcon fontSize="small" />
<span>
{/* {text} */}
{preklad}
</span>
</a>
);
}
I cannot see any change when applying "ThemeProvider" tag, even in a simple project as shown below.
There is no errors/warnings in the browser console (except for unused imports, but it fails even if I remove them all).
import React, { Component } from "react";
import Grid from "#material-ui/core/Grid";
import CssBaseline from "#material-ui/core/CssBaseline";
import MainBar from "./modules/MainBar";
import MainTemplate from "./style/MainTemplate";
import Palette from "./palette";
import { Button } from "#material-ui/core";
import { createMuiTheme } from "#material-ui/core/styles";
import { ThemeProvider } from "#material-ui/styles";
import purple from '#material-ui/core/colors/purple';
const theme = createMuiTheme({
typography: {
useNextVariants: true
},
palette: {
primary: purple,
secondary: {
main: "#f44336"
}
}
});
class App extends Component {
render() {
return (
<div className="App">
<ThemeProvider theme={theme}>
<Button color="primary">BUTTON</Button>
</ThemeProvider>
</div>
);
}
}
export default App;
Any idea about it? Its almost like documentation example, and it doesn't work.
Thank you.
Import MuiThemeProvider like,
import { MuiThemeProvider } from '#material-ui/core/styles';
And replace your code,
<ThemeProvider theme={theme}>
<Button color="primary">BUTTON</Button>
</ThemeProvider>
with this,
<MuiThemeProvider theme={theme}>
<Button color="primary">BUTTON</Button>
</MuiThemeProvider>
Ref
I have been trying to set the material-ui theme in Meteor with react-mounter to mount the components.
I was having issues setting it then I extended the component so that I could set the theme using the examples on the material-ui site.
I now get the following error message.
client/components/navbar.jsx:14:4: /client/components/navbar.jsx: Missing
class properties transform.
Here is the navbar sample code
import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import Navigationclose from 'material-ui/svg-icons/navigation/close';
import IconMenu from 'material-ui/IconMenu';
import NavigationMoreVert from 'material-ui/svg-icons/navigation/more-vert';
import MenuItem from 'material-ui/MenuItem';
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
class Navbar extends React.Component {
childContextTypes: {
muiTheme: React.PropTypes.object.isRequired
}
getChildContext() {
return {muiTheme: getMuiTheme(baseTheme)};
}
render() {
return (<AppBar
title="Title"
iconElementLeft={<IconButton><Navigationclose /></IconButton>}
iconElementRight={
<IconMenu
iconButtonElement={
<IconButton><NavigationMoreVert /></IconButton>
}
targetOrigin={{horizontal: 'right', vertical: 'top'}}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}
>
<MenuItem primaryText="Refresh"/>
<MenuItem primaryText="Help"/>
<MenuItem primaryText="Sign out"/>
</IconMenu>
}
/>);
}
}
export default Navbar;
Here is the router.jsx
import React from 'react';
import {mount} from 'react-mounter';
import {MainLayout} from '/client/layouts/mainLayout.jsx';
import Content from '/client/components/content.jsx';
import Navbar from '/client/components/navbar.jsx';
import Footer from '/client/components/footer.jsx';
FlowRouter.route("/", {
action () {
mount(MainLayout, {
navbar: <Navbar/>,
content: <Content/>,
footer: <Footer/>
});
}
});
You need a Babel transform. Meteor 1.3.3+ supports additional plugins and presets via .babelrc
Install the static transform:
npm install babel-plugin-transform-class-properties
# .babelrc
{
"presets": [
"meteor",
"es2015",
"stage-1"
],
"plugins": [
"transform-class-properties"
]
}
Support in Meteor 1.3.3
The transform
I changed it from extending the class too React.createClass and it now works.
import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import Navigationclose from 'material-ui/svg-icons/navigation/close';
import IconMenu from 'material-ui/IconMenu';
import NavigationMoreVert from 'material-ui/svg-icons/navigation/more-vert';
import MenuItem from 'material-ui/MenuItem';
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
var Navbar = React.createClass({
childContextTypes: {muiTheme: React.PropTypes.object},
getChildContext() {
return {muiTheme: getMuiTheme(baseTheme)};
},
navigate(event, index, item) {
console.log('navigate', item);
FlowRouter.go(item.route);
},
getMenuItems() {
console.log('navigate1');
return [
{ route: '/', text: 'Home' },
{ route: '/table', text: 'Table' }
];
},
render() {
console.log('Render');
return (<AppBar
title="Title"
iconElementLeft={<IconButton><Navigationclose /></IconButton>}
iconElementRight={
<IconMenu
iconButtonElement={
<IconButton><NavigationMoreVert /></IconButton>
}
targetOrigin={{horizontal: 'right', vertical: 'top'}}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}
>
<MenuItem primaryText="Refresh"/>
<MenuItem primaryText="Help"/>
<MenuItem primaryText="Sign out"/>
</IconMenu>
}
/>);
}
});
export default Navbar;