Examples gallery

.storybook/webpack.config.js

@@ -0,0 +1,23 @@
+const path = require('path');
+
+module.exports = {
+  module: {
+    loaders: [
+      {
+        test: /\.css$/,
+        loader: 'style!css',
+        include: path.resolve(__dirname, '../'),
+      },
+      {
+        test: /\.yml$/,
+        loader: 'json!yaml',
+        include: path.resolve(__dirname, '../')
+      },
+      {
+        test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)$/,
+        loader: 'file',
+        include: path.resolve(__dirname, '../'),
+      },
+    ]
+  }
+};

components/Grid/Examples/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Grid from '../Grid';
+import './style.css';
+
+export default ({ items }) => (
+  <div className="examples">
+    <div className="heading">
+      <h1>Storybook Examples</h1>
+      <a
+        className="edit-link"
+        href="https://github.com/storybooks/storybooks.github.io/tree/source/pages/examples/_examples.yml"
+        target="_blank"
+      >
+        Edit this list
+      </a>
+    </div>
+    <Grid columnWidth={350} items={items} />
+  </div>
+);

components/Grid/Examples/style.css

@@ -0,0 +1,10 @@
+.examples .heading {
+  margin: 40px 80px 0 80px;
+}
+
+.examples a.edit-link {
+  color: #E25E5E !important;
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: bold;
+}

components/Grid/Grid/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import StackGrid from 'react-stack-grid';
+import GridItem from '../GridItem';
+
+export default ({ items, columnWidth }) => (
+  <StackGrid columnWidth={columnWidth}>
+    {items.map((item, idx) => <GridItem key={idx} {...item} />)}
+  </StackGrid>
+);

components/Grid/GridItem/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import './style.css';
+
+export default ({ title, description, source, demo, site, thumbnail }) => (
+  <div className="grid-item">
+    <div className="photobox" style={{ backgroundImage: `url(${thumbnail})` }}>
+      <div className="overlay" />
+    </div>
+    <div className="text">
+      <h2>{title}</h2>
+      <p className="desc">{description}</p>
+      <div className="button-row">
+        {demo ? <a target="_blank" className="link" href={demo}>Demo</a> : null}
+        {source ? <a target="_blank" className="link" href={source}>Source</a> : null}
+      </div>
+    </div>
+  </div>
+);

components/Grid/GridItem/style.css

@@ -0,0 +1,69 @@
+div {
+  box-sizing: border-box;
+}
+
+.grid-item {
+  margin: 30px;
+  background: white;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  font-weight: 300;
+}
+
+.grid-item .photobox {
+  position: relative;
+  width: 100%;
+  height: 200px;
+  background-color: #ddd;
+  border-radius: 0;
+  background-size: cover;
+}
+
+.grid-item .overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+.grid-item .button-row {
+  position: absolute;
+  width: 100%;
+  right: 0px;
+  bottom: 0px;
+  text-align: right;
+}
+
+.grid-item .link {
+  display: inline-block;
+  cursor: pointer;
+  padding: 5px 15px;
+  margin: 0 10px 10px 0px;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 20px;
+  color: white;
+  transition: all 0.3s linear;
+  font-size: 12px;
+}
+.grid-item .link:hover {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+.grid-item .text {
+  position: relative;
+  height: 150px;
+  padding: 20px 15px 10px 20px;
+}
+
+.grid-item h2 {
+  margin: 0 0 10px 0;
+  font-size: 21px;
+  font-weight: 600;
+}
+
+.grid-item .desc {
+  color: #aaa;
+  font-size: 12px;
+  line-height: 1.4;
+}

components/Header/index.js

@@ -8,6 +8,7 @@ import storybookLogo from '../../design/homepage/storybook-logo.png';
 const sections = [
   { id: 'home', caption: 'Home', href: '/' },
   { id: 'docs', caption: 'Docs', href: '/docs/react-storybook/basics/introduction/' },
+  { id: 'examples', caption: 'Examples', href: '/examples/' },
 ];
 
 class Header extends React.Component {

package.json

@@ -14,6 +14,7 @@
     "react-helmet": "^5.0.3",
     "react-motion": "^0.1.0",
     "react-responsive-grid": "^0.3.3",
+    "react-stack-grid": "^0.2.1",
     "react-typography": "^0.15.0",
     "sitemap": "^1.12.0",
     "typography": "^0.15.8",

pages/examples/_examples.yml

@@ -0,0 +1,78 @@
+airbnb:
+  thumbnail: ./thumbnails/airbnb.jpg
+  title: Airbnb Dates
+  description: An internationalizable, mobile-friendly datepicker library for the web.
+  source: https://github.com/airbnb/react-dates
+  demo: http://airbnb.io/react-dates/
+  site: http://airbnb.com
+buffer:
+  thumbnail: ./thumbnails/buffer.jpg
+  title: Buffer Components
+  description: A collection of Buffer UI React components.
+  source: https://github.com/bufferapp/buffer-components
+  demo: https://bufferapp.github.io/buffer-components/
+  site: https://buffer.com
+lonelyplanet:
+  thumbnail: ./thumbnails/lonelyplanet.jpg
+  title: Lonely Planet
+  description: All the tools you need to build the Lonely Planet UI experience.
+  source: https://github.com/lonelyplanet/backpack-ui
+  demo: https://lonelyplanet.github.io/backpack-ui/
+  site: https://www.lonelyplanet.com/
+algolia:
+  thumbnail: ./thumbnails/algolia.jpg
+  title: Algolia Instantsearch
+  description: Lightning-fast, hyper-configurable search.
+  source: https://github.com/algolia/react-instantsearch/
+  demo: https://community.algolia.com/react-instantsearch/storybook/
+necolas:
+  thumbnail: ./thumbnails/reactnativeweb.jpg
+  title: React Native Web
+  description: Storybook demo for React Native Web.
+  source: https://github.com/necolas/react-native-web
+  demo: https://necolas.github.io/react-native-web/storybook/
+griddle:
+  thumbnail: ./thumbnails/griddle.jpg
+  title: Griddle
+  description: An ultra customizable datagrid component for React.
+  source: https://github.com/GriddleGriddle/Griddle
+  demo: https://griddlegriddle.github.io/Griddle/examples/controlling-griddle/
+  site: https://griddlegriddle.github.io/Griddle/
+appbase:
+  thumbnail: ./thumbnails/appbase.jpg
+  title: Appbase Maps
+  description: A storybook playground for ReactiveMaps and ReactiveSearch.
+  source: https://github.com/appbaseio/playground
+  demo: https://opensource.appbase.io/playground/
+  site: https://appbase.io
+quran:
+  thumbnail: ./thumbnails/quran.jpg
+  title: Quran.com
+  description: Component library for Quran.com, Quranicaudio.com and Salah.com.
+  source: https://github.com/quran/common-components
+  demo: https://quran.github.io/common-components/
+  site: https://quran.com/
+timeline:
+  thumbnail: ./thumbnails/timeline.jpg
+  title: React Event Timeline
+  description: Event timeline component.
+  source: https://github.com/rcdexta/react-event-timeline
+  demo: https://rcdexta.github.io/react-event-timeline/
+semanticui:
+  thumbnail: ./thumbnails/semanticui.png
+  title: Semantic-UI
+  description: Storybook for Semantic-UI React components
+  source: https://github.com/white-rabbit-japan/Semantic-UI-React-Storybook
+  demo: https://white-rabbit-japan.github.io/Semantic-UI-React-Storybook/
+hackoregon:
+  thumbnail: ./thumbnails/hackoregon.png
+  title: Hack Oregon
+  description: Official component library and storybook for Hack Oregon.
+  source: https://github.com/hackoregon/component-library
+  demo: https://hackoregon.github.io/component-library/
+todomvc:
+  thumbnail: ./thumbnails/todomvc.png
+  title: TodoMVC with Specs
+  description: Todo app Storybook with built-in unit tests.
+  source: https://github.com/thorjarhun/react-storybook-todolist
+  demo: https://thorjarhun.github.io/react-storybook-todolist/

pages/examples/index.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import Examples from 'components/Grid/Examples';
+import { values } from 'lodash';
+
+import data from './_examples.yml';
+
+export default () => <Examples items={values(data)} />;

stories/_examples.yml

@@ -0,0 +1,30 @@
+airbnb:
+  thumbnail: https://a0.muscache.com/im/pictures/90bce1b0-24ab-4e07-8499-3c4f4b0f2000.jpg?aki_policy=xl_poster
+  title: Airbnb Dates
+  description: An internationalizable, mobile-friendly datepicker library for the web.
+  source: https://github.com/airbnb/react-dates
+  demo: http://airbnb.io/react-dates/
+  site: http://airbnb.com
+appbase:
+  title: Appbase
+  description: A storybook playground for ReactiveMaps and ReactiveSearch.
+  source: https://github.com/appbaseio/playground
+  demo: https://opensource.appbase.io/playground/
+  site: https://appbase.io
+buffer:
+  title: Buffer
+  description: A collection of Buffer UI React components.
+  source: https://github.com/bufferapp/buffer-components
+  demo: https://bufferapp.github.io/buffer-components/
+  site: https://buffer.com
+lonelyplanet:
+  title: Lonely Planet
+  description: All the tools you need to build the Lonely Planet UI experience.
+  source: https://github.com/lonelyplanet/backpack-ui
+  site: https://www.lonelyplanet.com/
+griddle:
+  title: Griddle
+  description: An ultra customizable datagrid component for React.
+  source: https://github.com/GriddleGriddle/Griddle
+  demo: https://griddlegriddle.github.io/Griddle/examples/controlling-griddle/
+  site: https://griddlegriddle.github.io/Griddle/

stories/data.js

@@ -1,4 +1,4 @@
-import marked from 'marked'
+import marked from 'marked';
 
 export const docsData = {
   categories: [

stories/implementations.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import { values } from 'lodash';
+
 import Homepage from '../components/Homepage';
 import Header from '../components/Header';
 import Heading from '../components/Homepage/Heading';
@@ -11,8 +13,12 @@ import Docs from '../components/Docs';
 import DocsContainer from '../components/Docs/Container';
 import DocsContent from '../components/Docs/Content';
 import DocsNav from '../components/Docs/Nav';
+import GridItem from '../components/Grid/GridItem';
+import Grid from '../components/Grid/Grid';
+import Examples from '../components/Grid/Examples';
 
 import { docsData } from './data';
+import exampleData from './_examples.yml';
 
 export default {
   'Homepage.page': <Homepage featuredStorybooks={docsData.featuredStorybooks} />,
@@ -49,4 +55,7 @@ export default {
       selectedItem={docsData.selectedItem.id}
     />
   ),
+  'Grid.grid-item': <GridItem {...values(exampleData)[0]} />,
+  'Grid.grid': <Grid items={values(exampleData)} columnWidth={300} />,
+  'Grid.examples': <Examples items={values(exampleData)} />,
 };