[Skeleton]: Can't read property 'gray' of undefined.

Descriptions

1. Importing Skeleton component cause problem that throw error “Can't read property 'gray' of undefined.”
2. Using AspectRatioBox, children width and height style properties value treated as full.

Codesanbox

• https://codesandbox.io/s/chakra-ui-with-storybook-tks8u?file=/src/components/Bug.js

Notes I use the latest version of @storybook/react.

[with-heart]

@clngkusnd Looks like it was fixed in the most recent version: https://codesandbox.io/s/chakra-ui-with-storybook-mn7t0?file=/src/stories/Issues.stories.js

Install 1.0.0-rc.0 please!

[geemanjs]

Hey,

Looks like you’ve got a couple of problems. I forked your sandbox and I think fixed them all: https://codesandbox.io/s/chakra-ui-with-storybook-r31id

1. The components are not wrapped in the chakra-ui ThemeProvider which means it’s unable to look up “theme values” from context. On my sandbox I added a decorator via the .storybook/preview.js file as per the Storybook docs

import { ThemeProvider, CSSReset, theme } from '@chakra-ui/core'

function App({ children }) {
  return (
    <ThemeProvider theme={theme}>
      <CSSReset />
      {children}
    </ThemeProvider>
  );
}

1. AspectRatioBox requires a ratio and maxWidth prop to limit the size https://chakra-ui.com/aspectratiobox#embed-image

2. The Icon is not exported as a “story” via a function

// Use this 
export const Icon = () => <IconBug name="copy" />;

// Instead of this
export const Icon = <IconBug name="copy"/> 

1. Likewise the Skeleton isn’t exported as a “stroy” and is missing the height prop

// Use this
export const SkeletonExample = () => (<Skeleton height="40px" />)

// Instead of this
export { Skeleton } from '@chakra-ui/core`