[@mantine/demos] Migrate Demo components from @mantine/ds

Wurielle · Jan 31, 2022 · 69f1239 · 69f1239
1 parent 1991ea4
commit 69f1239
Show file tree

Hide file tree

Showing 28 changed files with 695 additions and 21 deletions.
diff --git a/docs/src/components/HomePage/Emotion/Emotion.tsx b/docs/src/components/HomePage/Emotion/Emotion.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'gatsby';
 import { Button, Group } from '@mantine/core';
 import { ArrowRightIcon } from '@modulz/radix-icons';
-import { Demo } from '@mantine/ds';
+import { Demo } from '@mantine/demos';
 import { createStylesBasics } from '../../../demos/create-styles/createStylesBasics';
 import { PageSection } from '../PageSection/PageSection';
 

diff --git a/docs/src/components/HomePage/Explore/Notifications/NotificationsDemo.tsx b/docs/src/components/HomePage/Explore/Notifications/NotificationsDemo.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Paper, createStyles } from '@mantine/core';
 import { Prism } from '@mantine/prism';
 import { NotificationsDemos } from '@mantine/demos';
-import { Demo } from '@mantine/ds';
+import { Demo } from '@mantine/demos';
 
 const code = `import { Button } from '@mantine/core';
 import { useNotifications } from '@mantine/notifications';

diff --git a/docs/src/components/MdxPage/MdxProvider/MdxProvider.tsx b/docs/src/components/MdxPage/MdxProvider/MdxProvider.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { MDXProvider } from '@mdx-js/react';
 import { Code, Text } from '@mantine/core';
 import { Prism } from '@mantine/prism';
-import { Demo } from '@mantine/ds';
+import { Demo } from '@mantine/demos';
 import GatsbyLink from './GatsbyLink/GatsbyLink';
 import DataTable from './DataTable/DataTable';
 import MdxTitle from './MdxTitle/MdxTitle';

diff --git a/docs/src/demos/hooks/use-click-outside.tsx b/docs/src/demos/hooks/use-click-outside.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Paper, Button, Group, useMantineTheme } from '@mantine/core';
 import { useClickOutside } from '@mantine/hooks';
-import { CodeDemo } from '@mantine/ds';
+import { CodeDemo } from '@mantine/demos';
 
 const getCode = (events?: string) => `import { useState } from 'react';
 import { Paper, Button } from '@mantine/core';

diff --git a/docs/src/demos/hooks/use-debounced-value/base.tsx b/docs/src/demos/hooks/use-debounced-value/base.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useDebouncedValue } from '@mantine/hooks';
 import { TextInput, Text } from '@mantine/core';
-import { CodeDemo } from '@mantine/ds';
+import { CodeDemo } from '@mantine/demos';
 
 const code = (leading: boolean) => `import { useState } from 'react';
 import { useDebouncedValue } from '@mantine/hooks';

diff --git a/docs/src/demos/hooks/use-debounced-value/cancel.tsx b/docs/src/demos/hooks/use-debounced-value/cancel.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useDebouncedValue } from '@mantine/hooks';
 import { TextInput, Text, Button } from '@mantine/core';
-import { CodeDemo } from '@mantine/ds';
+import { CodeDemo } from '@mantine/demos';
 
 const code = `import { useState } from 'react';
 import { useDebouncedValue } from '@mantine/hooks';

diff --git a/docs/src/demos/hooks/use-form/auth.tsx b/docs/src/demos/hooks/use-form/auth.tsx
@@ -1,7 +1,7 @@
 // import React from 'react';
 // import { AuthenticationForm } from '@mantine/core/demos';
 // import { useMantineTheme } from '@mantine/core';
-// import { CodeDemo } from '@mantine/ds';
+// import { CodeDemo } from '@mantine/demos';
 
 // @ts-ignore
 // eslint-disable-next-line import/no-webpack-loader-syntax

diff --git a/docs/src/demos/hooks/use-form/base.tsx b/docs/src/demos/hooks/use-form/base.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextInput, Group, Button, Checkbox, useMantineTheme } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
-import { CodeDemo } from '@mantine/ds';
+import { CodeDemo } from '@mantine/demos';
 
 const code = `import { TextInput, Checkbox, Button } from '@mantine/core';
 import { useForm } from '@mantine/hooks';

diff --git a/docs/src/demos/hooks/use-form/blur.tsx b/docs/src/demos/hooks/use-form/blur.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextInput, useMantineTheme } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
-import { CodeDemo } from '@mantine/ds';
+import { CodeDemo } from '@mantine/demos';
 
 const code = `import { TextInput } from '@mantine/core';
 import { useForm } from '@mantine/hooks';

diff --git a/docs/src/demos/hooks/use-form/server.tsx b/docs/src/demos/hooks/use-form/server.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { TextInput, Group, Button, LoadingOverlay, useMantineTheme } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
-import { CodeDemo } from '@mantine/ds';
+import { CodeDemo } from '@mantine/demos';
 
 const code = `import { useState } from 'react';
 import { TextInput, Button } from '@mantine/core';

diff --git a/docs/tsconfig.json b/docs/tsconfig.json
@@ -1,13 +1,20 @@
 {
-  "extends": "../tsconfig.json",
-  "include": ["src", "../configuration/types", "../gallery/src"],
-  "exclude": ["node_modules"],
   "compilerOptions": {
-    "paths": {
-      "@docs/demos": ["./docs/src/demos"],
-      "@mantine/*": ["src/mantine-*/src"],
-      "@demos/*": ["src/mantine-*/src/demos"],
-      "@gallery/*": ["../gallery/src/gallery"]
-    }
-  }
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "baseUrl": "."
+  },
+  "exclude": ["node_modules"],
+  "include": ["./src/**/*"]
 }
diff --git a/src/mantine-demos/src/Demos.story.tsx b/src/mantine-demos/src/Demos.story.tsx
@@ -1,5 +1,5 @@
 import { storiesOf } from '@storybook/react';
-import { attachDemos } from '@mantine/ds/src';
+import { attachDemos } from './attach-demos';
 import * as demos from './index';
 
 // @mantine/core

diff --git a/src/mantine-demos/src/attach-demos.tsx b/src/mantine-demos/src/attach-demos.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Container } from '@mantine/core';
+import { Demo } from './components/Demo/Demo';
+
+export function attachDemos(stories: any, demos: Record<string, MantineDemo>) {
+  Object.keys(demos).forEach((key) => {
+    stories.add(key, () => (
+      <Container sx={{ paddingTop: 40, paddingBottom: 40 }} size={820}>
+        <Demo data={demos[key]} />
+      </Container>
+    ));
+  });
+}
diff --git a/src/mantine-demos/src/components/Demo/CodeDemo/CodeDemo.styles.ts b/src/mantine-demos/src/components/Demo/CodeDemo/CodeDemo.styles.ts
@@ -0,0 +1,42 @@
+import { createStyles, MantineTheme } from '@mantine/core';
+
+export default createStyles((theme: MantineTheme) => ({
+  demo: {
+    maxWidth: '100%',
+    border: `1px solid ${
+      theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1]
+    }`,
+    position: 'relative',
+
+    '&:not(:only-child)': {
+      borderBottom: 0,
+      borderBottomRightRadius: 0,
+      borderBottomLeftRadius: 0,
+    },
+  },
+
+  prism: {
+    borderBottomRightRadius: theme.radius.sm,
+    borderBottomLeftRadius: theme.radius.sm,
+    marginTop: 0,
+    border: `1px solid ${
+      theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1]
+    }`,
+  },
+
+  code: {
+    borderTopRightRadius: 0,
+    borderTopLeftRadius: 0,
+  },
+
+  controls: {
+    position: 'absolute',
+    bottom: theme.spacing.xs - 1,
+    right: theme.spacing.xs - 1,
+  },
+
+  withToggle: {
+    paddingRight: 50,
+    minHeight: 80,
+  },
+}));
diff --git a/src/mantine-demos/src/components/Demo/CodeDemo/CodeDemo.tsx b/src/mantine-demos/src/components/Demo/CodeDemo/CodeDemo.tsx
@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { Language } from 'prism-react-renderer';
+import { CodeIcon } from '@modulz/radix-icons';
+import { useMantineTheme, Paper, Group, ActionIcon, Tooltip } from '@mantine/core';
+import { Prism } from '@mantine/prism';
+import useStyles from './CodeDemo.styles';
+
+interface CodeDemoProps {
+  code?: string;
+  language?: Language;
+  demoBackground?: string;
+  demoBorder?: boolean;
+  children?: React.ReactNode;
+  toggle?: boolean;
+  inline?: boolean;
+  spacing?: boolean;
+  zIndex?: number;
+}
+
+export default function CodeDemo({
+  code,
+  language,
+  children,
+  demoBackground,
+  demoBorder = true,
+  toggle = false,
+  inline = false,
+  spacing = true,
+  zIndex = 3,
+}: CodeDemoProps) {
+  const { classes, cx } = useStyles();
+  const [visible, setVisible] = useState(!toggle);
+  const theme = useMantineTheme();
+
+  if (inline) {
+    return <div>{children}</div>;
+  }
+
+  return (
+    <div style={{ marginBottom: theme.spacing.xl, marginTop: theme.spacing.md }}>
+      <Paper
+        padding={spacing ? 'md' : 0}
+        className={cx(classes.demo, { [classes.withToggle]: toggle })}
+        style={{
+          backgroundColor:
+            demoBackground || (theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white),
+          borderColor: demoBorder ? undefined : 'transparent',
+          zIndex,
+        }}
+      >
+        {children}
+
+        {!!code && toggle && (
+          <Group position="center" direction="column" spacing={5} className={classes.controls}>
+            <Tooltip
+              label={`${visible ? 'Hide' : 'Show'} code`}
+              position="left"
+              placement="center"
+              transition="fade"
+              withArrow
+              arrowSize={4}
+              gutter={8}
+              positionDependencies={[visible]}
+            >
+              <ActionIcon
+                variant="hover"
+                onClick={() => setVisible((v) => !v)}
+                aria-label="Toggle code"
+              >
+                <CodeIcon />
+              </ActionIcon>
+            </Tooltip>
+          </Group>
+        )}
+      </Paper>
+
+      {code && visible && (
+        <Prism language={language} className={classes.prism} classNames={{ code: classes.code }}>
+          {code}
+        </Prism>
+      )}
+    </div>
+  );
+}
diff --git a/src/mantine-demos/src/components/Demo/Configurator/Configurator.styles.ts b/src/mantine-demos/src/components/Demo/Configurator/Configurator.styles.ts
@@ -0,0 +1,66 @@
+import { createStyles, MantineTheme } from '@mantine/core';
+
+const BREAKPOINT = 885;
+
+export default createStyles((theme: MantineTheme) => ({
+  configurator: {
+    display: 'flex',
+    maxWidth: '100%',
+    border: `1px solid ${
+      theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1]
+    }`,
+    overflow: 'hidden',
+    borderTopLeftRadius: theme.radius.sm,
+    borderTopRightRadius: theme.radius.sm,
+    borderBottom: 0,
+
+    [`@media (max-width: ${BREAKPOINT}px)`]: {
+      flexDirection: 'column',
+    },
+  },
+
+  noCode: {
+    borderRadius: theme.radius.sm,
+    borderBottom: `1px solid ${
+      theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1]
+    }`,
+  },
+
+  preview: {
+    flex: 1,
+    padding: theme.spacing.md,
+    display: 'flex',
+    flexDirection: 'column',
+  },
+
+  controls: {
+    boxSizing: 'border-box',
+    width: 250,
+    padding: theme.spacing.md,
+    borderLeft: `1px solid ${
+      theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1]
+    }`,
+
+    [`@media (max-width: ${BREAKPOINT}px)`]: {
+      width: '100%',
+      borderLeft: 0,
+      borderTop: `1px solid ${
+        theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1]
+      }`,
+    },
+  },
+
+  prism: {
+    borderBottomRightRadius: theme.radius.sm,
+    borderBottomLeftRadius: theme.radius.sm,
+    marginTop: 0,
+    border: `1px solid ${
+      theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1]
+    }`,
+  },
+
+  code: {
+    borderTopRightRadius: 0,
+    borderTopLeftRadius: 0,
+  },
+}));