2.0.8 • Published 4 years ago

mui-storyblok v2.0.8

Weekly downloads
200
License
MIT
Repository
github
Last release
4 years ago

NPM JavaScript Style Guide Code Climate Grade Circle CI

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';

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"

export STORYBLOK_SPACE_ID="STORYBLOK_SPACE_ID"

export STORYBLOK_ACCESS_TOKEN="STORYBLOK_ACCESS_TOKEN"

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

2.0.8

4 years ago

2.0.7

4 years ago

2.0.6

4 years ago

2.0.5

4 years ago

2.0.4

4 years ago

2.0.3

4 years ago

2.0.2

4 years ago

2.0.1

4 years ago

2.0.0

4 years ago

1.9.5

4 years ago

1.9.4

4 years ago

1.9.3

4 years ago

1.9.1

5 years ago

1.9.0

5 years ago

1.1.13-beta-15

5 years ago

1.1.13-beta-14

5 years ago

1.1.13-beta-13

5 years ago

1.1.13-beta-12

5 years ago

1.1.13-beta-11

5 years ago

1.1.13-beta-10

5 years ago

1.1.13-beta-9

5 years ago

1.1.13-beta-8

5 years ago

1.1.13-beta-7

5 years ago

1.1.13-beta-6

5 years ago

1.1.13-beta-5

5 years ago

1.1.13-beta-4

5 years ago

1.1.13-beta-1

5 years ago

1.1.13-beta-0

5 years ago

1.1.13-beta-3

5 years ago

1.1.13-beta-2

5 years ago

1.1.12-beta

5 years ago

1.1.12

5 years ago

1.1.11

5 years ago

1.1.10

5 years ago

1.1.9

5 years ago

1.1.8

5 years ago

1.1.7

5 years ago

1.1.6

5 years ago

1.1.5

5 years ago

1.1.4

5 years ago

1.1.3

5 years ago

1.1.2

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.99

5 years ago

1.0.98

5 years ago

1.0.97

5 years ago

1.0.96

5 years ago

1.0.95

5 years ago

1.0.94

5 years ago

1.0.93

5 years ago

1.0.91

5 years ago

1.0.92

5 years ago

1.0.90

5 years ago

1.0.89

5 years ago

1.0.87

5 years ago

1.0.86

5 years ago

1.0.85

5 years ago

1.0.84

5 years ago

1.0.83

5 years ago

1.0.82

5 years ago

1.0.81

5 years ago

1.0.79

5 years ago

1.0.78

5 years ago

1.0.77

5 years ago

1.0.76

5 years ago

1.0.75

5 years ago

1.0.74

5 years ago

1.0.73

5 years ago

1.0.72

5 years ago

1.0.71

5 years ago

1.0.69

5 years ago

1.0.70

5 years ago

1.0.68

5 years ago

1.0.66

5 years ago

1.0.67

5 years ago

1.0.65

5 years ago

1.0.64

5 years ago

1.0.62

5 years ago

1.0.63

5 years ago

1.0.61

5 years ago

1.0.60

5 years ago

1.0.59

5 years ago

1.0.58

5 years ago

1.0.57

5 years ago

1.0.56

5 years ago

1.0.55

5 years ago

1.0.54

5 years ago

1.0.53

5 years ago

1.0.52

5 years ago

1.0.51

5 years ago

1.0.50

5 years ago

1.0.48

5 years ago

1.0.47

5 years ago

1.0.49

5 years ago

1.0.46

5 years ago

1.0.44

5 years ago

1.0.45

5 years ago

1.0.43

5 years ago

1.0.42

5 years ago

1.0.41

5 years ago

1.0.40

5 years ago

1.0.39

5 years ago

1.0.38

5 years ago

1.0.37

5 years ago

1.0.36

5 years ago

1.0.35

5 years ago

1.0.34

5 years ago

1.0.33

5 years ago

1.0.32

5 years ago

1.0.26

5 years ago

1.0.29

5 years ago

1.0.28

5 years ago

1.0.27

5 years ago

1.0.31

5 years ago

1.0.30

5 years ago

1.0.25

5 years ago

1.0.24

5 years ago

1.0.23

5 years ago

1.0.22

5 years ago

1.0.21

5 years ago

1.0.20

5 years ago

1.0.18

5 years ago

1.0.17

5 years ago

1.0.16

5 years ago

1.0.15

5 years ago

1.0.14

5 years ago

1.0.13

5 years ago

1.0.12

5 years ago

1.0.9

5 years ago

1.0.11

5 years ago

1.0.10

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago