{"size": 1154, "ext": "js", "max_stars_repo_path": "src/lib/component/base/Skeleton/Skeleton.stories.js", "max_stars_repo_name": "3l1k/web", "max_stars_repo_stars_event_min_datetime": "2019-05-23T22:07:04.000Z", "max_stars_repo_stars_event_max_datetime": "2022-01-30T08:23:15.000Z", "max_issues_repo_path": "src/lib/component/base/Skeleton/Skeleton.stories.js", "max_issues_repo_name": "3l1k/web", "max_issues_repo_issues_event_min_datetime": "2019-04-08T23:58:44.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T20:36:42.000Z", "max_forks_repo_path": "src/lib/component/base/Skeleton/Skeleton.stories.js", "max_forks_repo_name": "3l1k/web", "max_forks_repo_forks_event_min_datetime": "2020-02-08T21:16:10.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-22T10:25:01.000Z"}
{"max_stars_count": 32, "max_issues_count": 232, "max_forks_count": 18, "avg_line_length": 25.0869565217, "max_line_length": 79, "alphanum_fraction": 0.5979202773}
import React from "react";

import { storiesOf } from "@storybook/react";
import withTheme from "/lib/storybook/withTheme";

import { Box, Card, CardContent, Typography } from "/vendor/@material-ui/core";
import Skeleton from "./Skeleton";

const stories = storiesOf("lib/base|Skeleton", module)
  .addDecorator(fn => {
    return (
      <Box alignItems="center" justifyContent="center">
        <Card
          style={{
            minHeight: 480,
            width: 480,
          }}
        >
          <CardContent>{fn()}</CardContent>
        </Card>
      </Box>
    );
  })
  .addDecorator(withTheme);

stories.add("text", () => (
  <React.Fragment>
    <Typography variant="h3" paragraph>
      <Skeleton variant="text">Local Man is Invisible!</Skeleton>
    </Typography>
    <Typography variant="overline" paragraph>
      <Skeleton variant="text">Subtitle</Skeleton>
    </Typography>
    <Typography paragraph>
      <Skeleton variant="text">
        text text text
        text text text
        text text text
        text text text
        text text text
        text text text
      </Skeleton>
    </Typography>
  </React.Fragment>
));
