Why your code is all in the docs folder? Components in "docs/dist"? quite a mess

[totty90]

No description provided.

[franz-josef-kaiser]

It seems that there is a sub package for the docs site wrapped inside the main package. Should probably be split out and removed from the main package.

[jtollerene]

We were trying to provide an easy way to test components in the docs site as we are building them. Maybe the confusion is not worth the convenience. Suggestions are welcome ...

[totty90]

In your docs you do require('mui/Dialog'), but this only works with require.js. If you use commonjs you might need to get messy and do require('../../src/Dialog') instead (That's the reason I still use require js over browserify).

[franz-josef-kaiser]

Just pull mui as Npm package in. That way the vendor folders position is fixed and it's easy to refer to it. The docs could as well just have a Gruntfile that has a concatenation or similar task to bundle everything in a file and remove the need to refer to folders multiple levels up or down.

[elijahdorman]

I concur with the refactor of the file structure. Keep your built version in /dist, dev source files in /src and keep website docs in /docs or similar. Using a file structure more like other react projects would go a long way toward encouraging others (such as myself) to contribute.

[franz-josef-kaiser]

Just make myself clear: I vote for a separate repo for the docs.

[felixakiragreen]

👍

[hai-cea]

This was definitely something that we struggled with. Here are the options as I understand it:

• Have 2 repos - 1 for docs and 1 for the npm distribution and reference the material-ui as an npm dependency from the docs site.
  • Pros: Cleaner repo organization.
  • Cons: We can't do active development in both project at once. Currently we're using the docs site to develop, test, and document the components quickly.
• Have 1 repo, but move the /dist folder to the root (outside of the docs folder). We actually tried this, but browserify-shim doesn't like references to folders outside its project folder. See - Unable to find a browserify-shim config section in the package.json thlorenz/browserify-shim#61. We're using browserify-shim to include a syntax highlighting library for the docs site - https://highlightjs.org/. Maybe we just need to find some way to remove this dependency?

Are there any other options I'm missing? I'm open to suggestions.

Thanks for the feedback guys - we really appreciate it.
Hai

[totty90]

I think you should have just one repo. In this way any commit will has docs and code match. If you have 2 repo try to match one with another, is a hell!

If you are at commit #xxx then you know your code matches that certain docs (if is done correctly, of course).

[rob0rt]

I think I've got a fix for this in my fork (keeping everything in one repo); I was able to move the dist/ folder to the root of the project and fix the browserify shim to work with it existing in the new location. I can open up a pull request with my changes (PR #48).

[hai-cea]

@BobertForever Thanks for the pull request. We actually discovered that there's an npm package for highlight.js that will allow us to remove the browser-shim dependency. We'll be releasing a fix for this issue here in the next couple hours.

[franz-josef-kaiser]

@totty90 Just set the version number in your package.json to * to get latest. Update via npm and you are fine. That's why we have package managers.

[totty90]

When developing you use git and you will have 2 folders:

• material-ui-docs
• material-ui-code

All fine for now, but let's suppose I want to go back to commit X. I go into material-ui-code and go to commit X. There is no matching commit on the material-ui-docs repo. So I have to check the date of the commit X and find the last commit before that date. Now if you have multiple branches is even worse, should I look at branch A, B or C?

[Alderian]

Hi,

Found this while trying to make docs work independently from root folder. I just made some changes to package.json to include material-ui but I cant seem to make it even build...

I would like to see a mini how-to, maybe in README.md file in docs on how to make this folder work as an independent project, so I can start playing around and try to make a complex site.

Is there another example that I can take a look to? maybe a larger mockup?

Thanks!

[hai-cea]

@Alderian Did you check out the example folder? https://github.com/callemall/material-ui/tree/master/example

[Alderian]

@hai-cea Yes I did, I found it very simple though. Docs project have a lot of different samples in code and it would be better for beginning a startup project and for learning purposes. Also tried to make changes in example to try to recreate the Docs project, but it didn't work, something important is missing, may be some dependencies.

May be there is no use on trying to do this on Docs project... that would also be a possible answer :) nevertheless if anyone can provide with some simple (or not) tasks to make Docs independent, it would be of real help.

[Off-topic] I'm trying to make a complex application, but I'm thinking of making an admin template using material-ui with MIT license, based on Docs as an example and as a learning material. Should I open a request for help? is there any similar project going on?
(Sorry for off topic here)

Thanks a lot!

[al3jo]

@Alderian I'm actually working on something like that myself.
I am basing my work on the current code of examples and docs. I can share it when it's sort of finished within the next few days

[Alderian]

I just made a fork and made some changes to make Docs work independent from root folder. I added steps to clarify steps needed

• https://github.com/Alderian/material-ui/
• https://github.com/Alderian/material-ui/blob/master/docs/README.md

I'm having big problems with svg-icons wherever they are used. I cannot find a way to make them work. The problem is that in original Docs, they are imported from material src folder directly, and I'm trying to use them directly as a component, just like any other from material-ui

I was thinking that we might need a svg-icons-index.jsx or something like in material-ui/src/svg-icons that include all icons in a module, just as Styles. But I still don't understand why svg-icons doen't work as any other module....

If I resolve this, I can make a pull request so that Docs might be easy separate to start a bigger project using it as template.

Thanks
PS. We might need a new issue...