use react and mui to build pages with storyblok

React : A JavaScript library for building user interfaces

Storyblok : Managing digital content with a headless CMS

Material-UI : React components for faster and easier web development.

Install

npm install --save mui-storyblok

Usage

import React, { Component } from 'react'
import MuiStoryblok from 'mui-storyblok'

class Page extends Component {
  render () {
    return (
      <MuiStoryblok
        theme={{}} // mui theme obj `https://material-ui.com/customization/theming/`
        accessToken="sdcawrt23t32t23t" //storyblok public API-Key
        version="draft" // storyblok version [published or draft] in development use draft and published in production
      />
    )
  }
}

export default Page;

MuiStoryblok will work for any route with a prefix of page

⋅ ex [page-welcome, page-about, page-whatever-dude]

in your react project add this to your routes to get your pages from storyblok

  import Page from 'PAGE_FILE_PATH';

  <Route path="/page**" component={Page} exact />

Storyblok

In your .bash_profile or .bashrc add two exports (remember to source it after you export vars)

export STORYBLOK_OAUTH_TOKEN="STORYBLOK_OAUTH_TOKEN"

• STORYBLOK_OAUTH_TOKEN DOCS

export STORYBLOK_SPACE_ID="STORYBLOK_SPACE_ID"

• STORYBLOK_SPACE_ID DOCS

export STORYBLOK_ACCESS_TOKEN="STORYBLOK_ACCESS_TOKEN"

• STORYBLOK_ACCESS_TOKEN DOCS

Storyblok Command Line Interface

We are using the Storyblok Command Line Interface and need to log in before we can run the following cmds.

• install npm i storyblok -g
• run login storyblok login follow the props for email and password

mui-sotryblok CLI Commands

For new Storyblok spaces

Once env is configured run cmd: npx migrate-new-mui-storyblok This will add all components to your storyblok account with three demo pages. ⋅ [page-welcome, page-demo, page-not-found]

For Storyblok page examples

Once env is configured run cmd: npx migrate-storyblok-stories This will add three demo pages to storyblok space. ⋅ [page-welcome, page-demo, page-not-found]

To migrate mui-storyblok components to space

Once env is configured run cmd: npx migrate-storyblok-components This will add all components to your storyblok account.

To migrate mui-storyblok presets to space

WARNING!!: only do this on a new space alittle hacky will not override existing presets with same name but will update all presets defaults

Once env is configured run cmd: npx migrate-storyblok-presets This will add all presets to the components in your storyblok account.

Custom Components in MuiStoryblok

Usage:

• Create a custom component.
• Pass custom component down as prop to <MuiStoryblok />.

<MuiStoryblok
  customComponents={[{ componentName: 'NameOfCustomComp', Component: **CompName**, props: {} }]}
/>

• Create Custom Component in Storyblok space.

License

MIT © apjames93