docz with theme wrapper

[ukris]

Docz with extended Material UI Theme and Typescript

I have extended Material UI Theme properties. docz does not recognize this. If I read the document in seems like I need to put the wrapper in src/gatsby-theme-docz?Am i right?

Any case it does not work.. Further. more it does not make sense that I need to use gatsby to have a themeprovider. How do i enable a to have a simple theme wrapper?

Here is my directory

/src/components /src/theme /src/gatsby-theme-docz

Inside src/gatsby-theme-docz - I have index.tsx like so

import React, { useState } from 'react'

import { ThemeContext, ThemeProvider, ThemeZoom } from '../theme'
import globalState from '../global-state'

export default (props:any) => {
  const [themeZoom, setThemeZoom] = useState<ThemeZoom>(globalState.themeZoom)

  return (
    <ThemeContext.Provider value={{ themeZoom, setThemeZoom }}>
      <ThemeProvider>
      {props.children}
    </ThemeProvider>
    </ThemeContext.Provider>
  )
}

Here is doczrc.js

export default  {
  typescript: true,
  files: '**/*.{md,mdx}',
  menu: ['Getting Started', 'Components'],
  theme: 'src/theme/index',
  ignore: [
    'README.md'
  ],
  codeSandbox: false,
}

I love docz - so I hope I will get over the hurdles.

Thanks in advance

[jesperorb]

Hey, would you be able to create a minimal repo where this is reproduced? As I am not sure what the error is? What you expect to happen and what does not happen? Is it just that the wrapper is not being shadowed?

[ukris]

Thanks for your response

Please see the below repo:

https://github.com/ukris/docz-material-ui

[ukris]

Hello ? Any updates?

[petejodo]

I believe the file name is supposed to be src/gatsby-theme-docz/wrapper.js. Docz picks it up but it doesn't seem to find any imports from outside the gatsby-theme-docz directory. I have a similar theme.js file located in src but docz can seem to find it. It's missing from the .docz build directory

[AndreasJJ]

Hey, I would also like to see this issue be solved, but in the meantime i thought i'd share how i solved it temporarily if there's other people out there with the same problem.

The basic wrapper

/* ./src/gatsby-theme-docz/wrapper.js */

import React from 'react';
import { ThemeProvider } from 'styled-components';
import theme from '@/theme';

export default ({ children }) => (
    <ThemeProvider theme={theme}>
        {children}
    </ThemeProvider>
);

Then i solved the import issue by creating a custom plugin that creates an alias to our src folder

/* ./doczrc.js */
import { createPlugin } from 'docz-core';

const importFix = () =>
    createPlugin({
        onCreateWebpackConfig: ({ actions }) => {
            const path = require('path');
            actions.setWebpackConfig({
                resolve: {
                    modules: [path.resolve(__dirname, '../src'), 'node_modules'],
                    alias: {
                        '@': path.resolve(__dirname, '../src'),
                    },
                },
            });
        },
    });

export default {
    plugins: [importFix()],
};

[sparkbuzz]

Having the same issue, would love to see it fixed out of the box. @AndreasJJ, the above solution works for me.

[dbertella]

This kind of works for me but having your custom wrapper make me loose the sidebar with links, is there a way to keep the default page structure or I need to rebuild it myself from scratch?

EDIT: I see using wrapper.js file works as expected actually, I was using index.js instead thanks for this solution!