search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.19k stars 32.08k forks source link

[material-ui][docs] Make the free premium templates easier to use #14604

Open askpatrickw opened 5 years ago

askpatrickw commented 5 years ago

I'm looking through the Onepirate landing page example as a launching point and I'm not understanding how the links in AppAppBar and AppFooter are working.

The Source for the onepirate example is here: https://github.com/mui-org/material-ui/tree/master/docs/src/pages/premium-themes/onepirate

Expected: Download the example and have it work.

Observed:

I've gathered up the files not in the source directory, but I'm looking for a straight-forward way to fix the 404s.

For example this link to the terms in ./modules/views/AppFooter.js

<li className={classes.listItem}>
    <Link href="/premium-themes/onepirate/terms">Terms</Link>
</li>

You will note two things:

  1. The link is to /premium-themes/ not to files in the source directory linked to from the Premium Themes library
  2. There is not router in the example

I've tried moving the Terms.js from my src into into /src/modules and putting the terms.js into src and changed the href to '/terms' but I still get 404s.

It seems as though this example is not really reusable as-is, but I'm not sure. Do I need to re-work the example using react-router-dom or is there some other more straight-forward approach I'm not seeing.

I'm dropping this into a vanilla create-react-app project and serving it up with AWS Amplify hosting.

Module Versions: 
+-- @material-ui/core@3.9.2
+-- @material-ui/icons@3.0.2
+-- aws-amplify@1.1.19
+-- aws-amplify-react@2.3.0
+-- clsx@1.0.3
+-- prop-types@15.7.2
+-- react@16.8.2
+-- react-dom@16.8.2
+-- react-router-dom@4.3.1
`-- react-scripts@2.1.5
askpatrickw commented 5 years ago

@oliviertassinari I see you created the onepirate example. Can you suggest a path forward? I'd be happy to provide additional documentation for the next person who wants to use the example. tx!

askpatrickw commented 5 years ago

I decided to use material-kit instead.

joshwooding commented 5 years ago

Links are a wrapper around an anchor element that applies Material UI styling. The router we use is built in to Next (next/router)

askpatrickw commented 5 years ago

Ah.. so there are other dependencies needed to make this work, but there's no package.json specific to the example.

My $.02 is these examples should be in their own repos and work independently not be based on the documentation app.

Also, there's a general comment in the docs that you can drop the themes into the sample applications, but again there are dependencies which would not be specified in the theme or the sample.

I hope that's helpful feedback.

oliviertassinari commented 5 years ago

@askpatrickw Thank you for raising the problem. You are right, we should make our "theme" better isolated!

askpatrickw commented 5 years ago

I suggest you move themes to their own repro with folders for each theme, and you can link to other repos as well.

See https://github.com/getpelican/pelican-themes

kpennell commented 5 years ago

@oliviertassinari Thank you for working on this. Would love to have solid theme starting points

neilpalima commented 5 years ago

Is this done? I encounter this problem as well. I would love to use this with create-react-app.

gregsifr commented 4 years ago

As a beginner I would also appreciate the theme working out of the box

Nived660987 commented 3 years ago

i want to redirect on click of product category buttons of onepirate material ui template can some help??? the code is:

function ProductCategories(props) { const { classes } = props;

const images = [
    {
        url: 'https://i.pinimg.com/564x/73/16/32/731632e44bdf21489d4d7632e59a8894.jpg',
        title: 'GYM',
        width: '33%',

    },

    {
        url: 'https://www.safwallpapers.com/files/1524485537_Yoga-Girls-Wallpapers-For-Laptop.jpg',
        title: 'Yoga',
        width: '33%',
    },
    {
        url:
            'https://c1.iggcdn.com/indiegogo-media-prod-cld/image/upload/c_limit,w_695/v1537210711/dkwlqnj2sgxmdpy2mv6z.png',
        title: 'Beauty Sleep ',
        width: '33%',
    },
    {
        url: 'https://images.unsplash.com/photo-1533727937480-da3a97967e95?auto=format&fit=crop&w=400&q=80',
        title: 'Fitness',
        width: '33%',
    },
    {
        url:
            'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/afro-american-couple-doing-yoga-royalty-free-image-598708752-1548713240.jpg?crop=1.00xw:0.751xh;0,0.153xh&resize=980:*',
        title: 'Meditation',
        width: '33%',
    },
    {
        url:
            'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/salad-mix-plate-shot-from-above-on-rustic-wooden-royalty-free-image-1018199524-1556130377.jpg',
        title: 'Diet',
        width: '33%',
    },

    {
        url:
            'https://mediad.publicbroadcasting.net/p/wsiu/files/styles/large/public/202004/CoronaVirusHeader-Final-3.jpg',
        title: 'COVID-19',
        height: '80%',
        width: '99%',
    },
];

return (
    <Container className={classes.root} component="section">
        <Typography variant="h4" marked="center" align="center" component="h2">
            For all tastes and all desires
        </Typography>
        <div className={classes.images}>
            {images.map((image) => (
                <ButtonBase
                    key={image.title}
                    className={classes.imageWrapper}
                    style={{
                        width: image.width,
                    }}
                >
                    <div
                        className={classes.imageSrc}
                        style={{
                            backgroundImage: `url(${image.url})`,
                        }}
                    />
                    <div className={classes.imageBackdrop} />
                    <div className={classes.imageButton}>
                        <Typography component="h3" variant="h6" color="inherit" className={classes.imageTitle}>
                            {image.title}
                            <div className={classes.imageMarked} />
                        </Typography>
                    </div>
                </ButtonBase>
            ))}
        </div>
    </Container>
);

}

ProductCategories.propTypes = { classes: PropTypes.object.isRequired, };

export default withStyles(styles)(ProductCategories);

ehartford commented 3 years ago

I have same problem, as an experienced web developer learning material-ui, I would like to have a starting point to build from that works out of the box with no modification. This one, I had to track down all the static files, and still have problems with getting the markdown to generate with webpack.

tobiaspfuetze commented 3 years ago

Since this seems still to be an open issue, I created a version with create-react-app and added 'react-router-dom' as one of the dependencies. All credit to @oliviertassinari who created the template in the first place. Feel free to git clone https://github.com/tobiaspfuetze/material-ui-onepirate.git && cd material-ui-onepirate && npm install && npm start

mariabohorquez commented 2 years ago

Since this seems still to be an open issue, I created a version with create-react-app and added 'react-router-dom' as one of the dependencies. All credit to @oliviertassinari who created the template in the first place. Feel free to git clone https://github.com/tobiaspfuetze/material-ui-onepirate.git && cd material-ui-onepirate && npm install && npm start

Thank you a lot for making it a separated repo! It's a lot easier to work with. Small comment, would you happen to know why your version has all the button text underlined? Seems a style is missing somewhere.

yukihirai0505 commented 2 years ago

FYI

I found a repository that uses the Typescript for the onepirate theme. https://github.com/rothbart/onepirate-typescript

kriscoleman commented 1 year ago

FYI

I found a repository that uses the Typescript for the onepirate theme. https://github.com/rothbart/onepirate-typescript

this was actually super helpful and enough for it to click so I could start using this in a gatsby app. thanks.

samuelsycamore commented 9 months ago

Revisiting this in Q4 '23—it seems that these two free "premium" themes each need a package.json and a README.md to explain how to use them. They should "just work" after you npm install.

The rothbart/onepirate-typescript repo linked above is a good example, but I'd much prefer to see Vite or Next.js in place of create-react-app for these.

ehartford commented 1 month ago

thanks