New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Who uses React Styleguidist? #127

Closed
sapegin opened this Issue Apr 14, 2016 · 39 comments

Comments

Projects
None yet
@sapegin
Member

sapegin commented Apr 14, 2016

Do you use React Styleguidist in your project? Let us know about that! It’d be great if you can share some details: screenshot, link, number of components, etc.

We use it at Here for a component library that we use to develop internal tools. Right now we have 41 component and it’s growing:

@sapegin sapegin added the question label Apr 14, 2016

@operatino

This comment has been minimized.

operatino commented Apr 14, 2016

Interested in sourcejs-react-styleguidist users? I know @ndelangen uses it quite extensively.

@sapegin

This comment has been minimized.

Member

sapegin commented Apr 14, 2016

@operatino Yep ;-)

@ndelangen

This comment has been minimized.

ndelangen commented Apr 14, 2016

Me and my team are using sourcejs-react-styleguidist as @operatino says.
We currently document 58 spec pages, ranging from Utilities/Colors, Utilities/Fonts, Atoms/Buttons, Atoms/Image, Molecules/Map, Molecules/ProductList, Modules/Hero, Modules/StoreLocator, Scaffolds/Header, Scaffolds/Footer.

Spec pages are grouped together according to a somewhat atomic design principle to the extend that worked for us.

On each spec page there are on average 5 representations of each component, in different states, variations, with different modifiers etc. Some specs only have a single representation, some have over 20.

This is for example how our Atoms/FormElements looks like:

sourcejs

@sapegin

This comment has been minimized.

Member

sapegin commented Apr 14, 2016

@ndelangen Cool, thanks!

@mik01aj

This comment has been minimized.

Collaborator

mik01aj commented Apr 21, 2016

Hello from LovelyBooks! :)

screenshot 2016-04-21 13 27 36

Right now we have 50 components.

@sapegin

This comment has been minimized.

Member

sapegin commented Apr 21, 2016

@mik01aj Awesome!

@sapegin

This comment has been minimized.

Member

sapegin commented Apr 25, 2016

Rumble Charts, React components for building composable and flexible charts.

/cc @rosko

@pke

This comment has been minimized.

pke commented Apr 26, 2016

I stumbled over this project a couple of weeks ago, starred it and then forgot how it was named and that I had it starred. Last week I was desperately googling anything with react component documentation by example example.md but did not find this project. react components in example.md finally lead me back to this repo.

Now I can work on our example files for about 80 components/containers and I will present screens later here.
Thanks for creating the project!

@sapegin

This comment has been minimized.

Member

sapegin commented Apr 27, 2016

@pke Would be interesting to see the result ;-)

@sapegin

This comment has been minimized.

Member

sapegin commented May 11, 2016

@sapegin

This comment has been minimized.

Member

sapegin commented Jul 6, 2016

Feel free to add your project here!

@sapegin sapegin closed this Jul 6, 2016

@zecaptus

This comment has been minimized.

zecaptus commented Aug 3, 2016

Hello from Whataboon ;)

Change from the original react-styleguidist (without forking / only webpack aliases) :

  • Material Design
  • One component / page
  • Collapse Sections

Future :

  • 100% Material
  • Subsections

capture d ecran 2016-08-03 a 23 03 08

Good job @sapegin !! Probably the best styleguide that I've found !

@sapegin

This comment has been minimized.

Member

sapegin commented Aug 4, 2016

@zecaptus Wow that’s cool! Thanks for sharing ;-)

@pke

This comment has been minimized.

pke commented Aug 4, 2016

@zecaptus Care to share the webpack config?

@zecaptus

This comment has been minimized.

zecaptus commented Aug 4, 2016

@pke : I'm not really sure, it's really helpfull but here it is.

styleguide.config.js

var path = require('path');
var glob = require('glob');

module.exports = {
    title: 'Whataboon UI Components Library',
    sections: [
        {name: 'Introduction', content: 'docs/introduction.md'},
        {name: 'UI Components', content: 'docs/ui.md', components: function() {
            return glob.sync(path.resolve(__dirname, 'src/components/**/*.jsx')).filter(function(module) {
                return /\/[A-Z]\w*\.jsx$/.test(module);
            });
        }}
    ],
    showCode: true,
    template: 'config/styleguide/template.html',
    updateWebpackConfig: function(webpackConfig, env) {
        // Your source files folder or array of folders, should not include node_modules
        var dir = path.join(__dirname, 'src');
        var config = path.join(__dirname, 'config/styleguide');

        webpackConfig.resolve.alias['rsg-components/Layout'] = path.join(config, 'Layout');
        webpackConfig.resolve.alias['rsg-components/Wrapper'] = path.join(config, 'Wrapper');

        webpackConfig.module.loaders.push(
            // Babel loader will use your project’s .babelrc
            {
                test: /\.jsx?$/,
                include: [dir, config],
                loader: 'babel'
            },
            // Other loaders that is needed for your components
            {
                test: /\.css$/,
                include: [dir, config],
                loader: 'style!css?modules&importLoaders=1'
            },
            // Image URL config. Generate data URI's for images smaller than 10,000 bytes
            {
                test: /\.(png|gif|jpe?g|svg)$/i,
                include: [dir, config],
                loader: 'url?limit=10000'
            }
        );
        return webpackConfig;
    }
};
@mik01aj

This comment has been minimized.

Collaborator

mik01aj commented Aug 4, 2016

Our LovelyBooks styleguide grew much bigger since then. Now we have 72 components with 120 examples. All our examples are also used as unit-tests (we just check that they render without any warnings or errors; this turned out to be a really good test).

image
image

Good job @sapegin and everyone :)

@sapegin

This comment has been minimized.

Member

sapegin commented Aug 4, 2016

@mik01aj I like this idea of testing. Could you please share some code?

@mik01aj

This comment has been minimized.

Collaborator

mik01aj commented Aug 4, 2016

@sapegin I did already in #34

@sapegin

This comment has been minimized.

Member

sapegin commented Aug 4, 2016

@mik01aj we have Dialog in the Showcase in Readme. I can’t add Nordnet because they have removed a link to Styleguidist.

@kulakowka

This comment has been minimized.

Contributor

kulakowka commented Apr 25, 2017

We finally started using it in production.

2017-04-25 10 20 06

2017-04-25 10 25 48

@sapegin

This comment has been minimized.

Member

sapegin commented Apr 25, 2017

@kulakowka Awesome!

@sapegin

This comment has been minimized.

Member

sapegin commented May 3, 2017

@kulakowka Could I add your company logo to a site? ;-)

@zecaptus Are you still using Styleguidist? ;-)

@mik01aj Do you know if they are still using Styleguidist?

@zecaptus

This comment has been minimized.

zecaptus commented May 3, 2017

@sapegin Yes, I still use it, moreover I will update it to make it work for react-native with exponent, probably in 2018.

@kulakowka

This comment has been minimized.

Contributor

kulakowka commented May 4, 2017

@sapegin We just started developing our components. They will be released in a couple of weeks. Unfortunately, we can not open the source code. No one will be able to see our documentation, except for employees of our company. Does it make sense then to place a logo?

@sapegin

This comment has been minimized.

Member

sapegin commented May 4, 2017

@kulakowka No, it doesn’t ;-)

@kulakowka

This comment has been minimized.

Contributor

kulakowka commented May 31, 2017

I started a new project: react-bulma - React.js components for Modern CSS framework based on Flexbox - bulma.io

2017-06-01 2 52 24

Docs created with styleguidist: https://kulakowka.github.io/react-bulma/

@cameron-martin

This comment has been minimized.

cameron-martin commented Sep 21, 2017

@zecaptus which part of this gives you the one component per page?

@zecaptus

This comment has been minimized.

zecaptus commented Sep 21, 2017

@cameron-martin nothing here.
1/ The trick is to overwrite styleguide components
2/ parse current component in the url
3/ and insteadOf showing a list of components, just show it as if it was open in isolated mode.

Hope this can help you ;)

@ajainvivek

This comment has been minimized.

ajainvivek commented Nov 24, 2017

I started a new project preact-fluid a minimal UI kit for Preact

screen shot 2017-11-24 at 4 42 13 pm

Docs created with styleguidist: https://ajainvivek.github.io/preact-fluid/

@sapegin

This comment has been minimized.

Member

sapegin commented Nov 24, 2017

@ajainvivek Looks cool!

@konradk

This comment has been minimized.

Contributor

konradk commented Dec 29, 2017

React Chat UI Kit

LiveChat React Chat UI Kit

@SaraVieira

This comment has been minimized.

Collaborator

SaraVieira commented Dec 29, 2017

screenshot-2017-12-29 design system

We are also using it at Joyent: https://joyent-ui-toolkit.now.sh/

@stepancar

This comment has been minimized.

Member

stepancar commented May 24, 2018

@artola

This comment has been minimized.

artola commented Aug 26, 2018

@stepancar Your styleguide customisation is great! ... could you please share it?

@elevatebart

This comment has been minimized.

Collaborator

elevatebart commented Sep 24, 2018

@artola a quick search in github just in case put me here

@artola

This comment has been minimized.

artola commented Sep 24, 2018

@elevatebart Thanks a lot!

@tizmagik

This comment has been minimized.

Collaborator

tizmagik commented Sep 24, 2018

@konradk wow that is a really beautiful styleguide -- mind sharing the config/customizations you made for that? I especially like how the sample code is offset to the right column like that. 😍

@mealeyst

This comment has been minimized.

mealeyst commented Sep 25, 2018

I am starting to move our components at our organization over to styled components and I am using styleguidist as our organization's pattern library.

https://rocketsofawesome.github.io/mirage/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment