feat: storybook typescript

examples/storybook/.storybook/main.js

@@ -0,0 +1,12 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.(ts|tsx|js|jsx)'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-docs'],
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+    },
+  },
+};

examples/storybook/README.md

@@ -0,0 +1,10 @@
+# Storybook example
+
+The idea of this example is to provide you with a ready to go storybook containing all the demos we have in the documentation, so that you can see how theme changes affect the overall component look and feel.
+
+# How to use
+
+```
+yarn
+yarn storybook
+```

examples/storybook/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "storybook",
+  "version": "1.0.0",
+  "main": "index.js",
+  "author": "sakulstra",
+  "license": "MIT",
+  "dependencies": {
+    "@material-ui/core": "^4.9.14",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.53",
+    "@storybook/addon-docs": "^5.3.18",
+    "material-table": "^1.57.2",
+    "notistack": "^0.9.16"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.9.6",
+    "@storybook/addon-actions": "^6.0.0-beta.12",
+    "@storybook/addon-links": "^6.0.0-beta.12",
+    "@storybook/addons": "^6.0.0-beta.12",
+    "@storybook/react": "^6.0.0-beta.12",
+    "babel-loader": "^8.1.0"
+  },
+  "scripts": {
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  }
+}

examples/storybook/scripts/csf-transform.js

@@ -0,0 +1,29 @@
+// play around with ast https://astexplorer.net
+// https://github.com/benjamn/ast-types/
+
+module.exports = (fileInfo, api) => {
+  const j = api.jscodeshift;
+
+  const root = j(fileInfo.source);
+  const partials = fileInfo.path.replace('.tsx', '').split('/');
+  const component = partials[partials.length - 2];
+  const test = partials[partials.length - 1];
+
+  // make export a names export
+  root.find(j.ExportDefaultDeclaration).replaceWith((p) => {
+    return j.exportDeclaration(false, p.node.declaration);
+  });
+
+  // add default export
+  root
+    .get()
+    .node.program.body.push(
+      j.exportDefaultDeclaration(
+        j.objectExpression([
+          j.property('init', j.identifier('title'), j.literal(`Material-ui|${component}|${test}`)),
+        ]),
+      ),
+    );
+
+  return root.toSource();
+};

examples/storybook/scripts/prepare.sh

@@ -0,0 +1,27 @@
+#!/bin/bash
+
+parent_path=$( cd "$(dirname "${BASH_SOURCE[0]}")" ; pwd -P )
+cd "$parent_path"
+
+# copy files
+rm -rf ../stories/material-ui
+cp -R ../../../docs/src/pages/components ../stories/material-ui
+
+# remove unnecessary files
+find ../stories/material-ui -name "*.md" -type f -delete
+find ../stories/material-ui -name "*.js" -type f -delete
+
+# rename files
+find ../stories/material-ui -name "*.tsx" -exec bash -c 'mv "$1" "${1%.tsx}".stories.tsx' - '{}' \;
+
+# alter files
+npx jscodeshift -t ./csf-transform.js --extensions=ts,tsx --parser=tsx ../stories/material-ui/**/*.tsx
+
+# remove stuff that is broken atm :)
+rm ../stories/material-ui/grid/InteractiveGrid.stories.tsx # references component from docs
+rm ../stories/material-ui/grid-list -rf # because i removed tile-list.js
+rm ../stories/material-ui/hidden/BreakpointDown.stories.tsx # current jscodeshift breaks hoc exports like export default withWidth()(BreakpointDown);
+rm ../stories/material-ui/hidden/BreakpointOnly.stories.tsx # ^^
+rm ../stories/material-ui/hidden/BreakpointUp.stories.tsx # ^^
+rm ../stories/material-ui/hidden/GridIntegration.stories.tsx # ^^
+rm ../stories/material-ui/steppers/SwipeableTextMobileStepper.stories.tsx # export default Sth currently breaks as well

examples/storybook/stories/0-Welcome.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { Welcome } from '@storybook/react/demo';
+
+export default {
+  title: 'Welcome',
+  component: Welcome,
+};
+
+export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
+
+ToStorybook.story = {
+  name: 'to Storybook',
+};

examples/storybook/stories/material-ui/alert/ActionAlerts.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Alert from '@material-ui/lab/Alert';
+import Button from '@material-ui/core/Button';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      '& > * + *': {
+        marginTop: theme.spacing(2),
+      },
+    },
+  }),
+);
+
+export function ActionAlerts() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Alert onClose={() => {}}>This is a success alert — check it out!</Alert>
+      <Alert
+        action={
+          <Button color="inherit" size="small">
+            UNDO
+          </Button>
+        }
+      >
+        This is a success alert — check it out!
+      </Alert>
+    </div>
+  );
+}
+
+export default {
+  title: 'Material-ui|alert|ActionAlerts.stories',
+};

examples/storybook/stories/material-ui/alert/ColorAlerts.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Alert from '@material-ui/lab/Alert';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      '& > * + *': {
+        marginTop: theme.spacing(2),
+      },
+    },
+  }),
+);
+
+export function ColorAlerts() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Alert severity="success" color="info">
+        This is a success alert — check it out!
+      </Alert>
+    </div>
+  );
+}
+
+export default {
+  title: "Material-ui|alert|ColorAlerts.stories"
+};

examples/storybook/stories/material-ui/alert/DescriptionAlerts.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import { Alert, AlertTitle } from '@material-ui/lab';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      '& > * + *': {
+        marginTop: theme.spacing(2),
+      },
+    },
+  }),
+);
+
+export function DescriptionAlerts() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Alert severity="error">
+        <AlertTitle>Error</AlertTitle>
+        This is an error alert — <strong>check it out!</strong>
+      </Alert>
+      <Alert severity="warning">
+        <AlertTitle>Warning</AlertTitle>
+        This is a warning alert — <strong>check it out!</strong>
+      </Alert>
+      <Alert severity="info">
+        <AlertTitle>Info</AlertTitle>
+        This is an info alert — <strong>check it out!</strong>
+      </Alert>
+      <Alert severity="success">
+        <AlertTitle>Success</AlertTitle>
+        This is a success alert — <strong>check it out!</strong>
+      </Alert>
+    </div>
+  );
+}
+
+export default {
+  title: "Material-ui|alert|DescriptionAlerts.stories"
+};

examples/storybook/stories/material-ui/alert/FilledAlerts.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Alert from '@material-ui/lab/Alert';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      '& > * + *': {
+        marginTop: theme.spacing(2),
+      },
+    },
+  }),
+);
+
+export function SimpleAlerts() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Alert variant="filled" severity="error">
+        This is an error alert — check it out!
+      </Alert>
+      <Alert variant="filled" severity="warning">
+        This is a warning alert — check it out!
+      </Alert>
+      <Alert variant="filled" severity="info">
+        This is an info alert — check it out!
+      </Alert>
+      <Alert variant="filled" severity="success">
+        This is a success alert — check it out!
+      </Alert>
+    </div>
+  );
+}
+
+export default {
+  title: "Material-ui|alert|FilledAlerts.stories"
+};

examples/storybook/stories/material-ui/alert/IconAlerts.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Alert from '@material-ui/lab/Alert';
+import CheckIcon from '@material-ui/icons/Check';
+import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      '& > * + *': {
+        marginTop: theme.spacing(2),
+      },
+    },
+  }),
+);
+
+export function IconAlerts() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
+        This is a success alert — check it out!
+      </Alert>
+      <Alert iconMapping={{ success: <CheckCircleOutlineIcon fontSize="inherit" /> }}>
+        This is a success alert — check it out!
+      </Alert>
+      <Alert icon={false} severity="success">
+        This is a success alert — check it out!
+      </Alert>
+    </div>
+  );
+}
+
+export default {
+  title: "Material-ui|alert|IconAlerts.stories"
+};

examples/storybook/stories/material-ui/alert/OutlinedAlerts.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Alert from '@material-ui/lab/Alert';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      '& > * + *': {
+        marginTop: theme.spacing(2),
+      },
+    },
+  }),
+);
+
+export function SimpleAlerts() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Alert variant="outlined" severity="error">
+        This is an error alert — check it out!
+      </Alert>
+      <Alert variant="outlined" severity="warning">
+        This is a warning alert — check it out!
+      </Alert>
+      <Alert variant="outlined" severity="info">
+        This is an info alert — check it out!
+      </Alert>
+      <Alert variant="outlined" severity="success">
+        This is a success alert — check it out!
+      </Alert>
+    </div>
+  );
+}
+
+export default {
+  title: "Material-ui|alert|OutlinedAlerts.stories"
+};

examples/storybook/stories/material-ui/alert/SimpleAlerts.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Alert from '@material-ui/lab/Alert';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      '& > * + *': {
+        marginTop: theme.spacing(2),
+      },
+    },
+  }),
+);
+
+export function SimpleAlerts() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Alert severity="error">This is an error alert — check it out!</Alert>
+      <Alert severity="warning">This is a warning alert — check it out!</Alert>
+      <Alert severity="info">This is an info alert — check it out!</Alert>
+      <Alert severity="success">This is a success alert — check it out!</Alert>
+    </div>
+  );
+}
+
+export default {
+  title: "Material-ui|alert|SimpleAlerts.stories"
+};