xcorejs · AlfonzAlfonz · Sep 22, 2020 · Jul 23, 2020 · Jul 23, 2020 · Jul 23, 2020
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -19,7 +19,7 @@
         },
         "ecmaVersion": 2018,
         "sourceType": "module",
-        "project": "tsconfig.eslint.json"
+        "project": "./tsconfig.eslint.json"
     },
     "plugins": [
         "react",

diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json
@@ -1,4 +1,4 @@
 {
   "extends": "./tsconfig.json",
-  "include": ["./**/*.js", "src", "stories", "tests", "**/*.d.ts"]
+  "include": ["./**/*.js", "src", "stories", "tests", "website", "**/*.d.ts"]
 }
diff --git a/website/.gitignore b/website/.gitignore
@@ -0,0 +1 @@
+.next
diff --git a/website/components/CodeBlock.tsx b/website/components/CodeBlock.tsx
@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+import Highlight, { defaultProps } from 'prism-react-renderer';
+import vsDark from 'prism-react-renderer/themes/vsDark';
+
+export const CodeBlock: FC = ({ children }) => {
+  const theme = {
+    ...vsDark,
+    plain: {
+      ...vsDark.plain,
+      color: 'white'
+    }
+  };
+  return (
+    <Highlight {...defaultProps} theme={theme} code={children as any} language="tsx">
+      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+        <pre className={className} style={{ ...style, padding: '20px', borderRadius: '.3rem', width: '100%', fontFamily: ' Menlo, Monaco, "Courier New", monospace', fontSize: '1.4rem' }}>
+          {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({ line, key: i })}>
+              {line.map((token, key) =>
+                <span key={key} {...getTokenProps({ token, key })} />
+              )}
+            </div>
+          ))}
+        </pre>
+      )}
+    </Highlight>
+  );
+};
diff --git a/website/components/Extends/index.tsx b/website/components/Extends/index.tsx
@@ -0,0 +1,31 @@
+import React, { FC, useContext } from 'react';
+import { Typography, Tag, Stack, Text } from '@xcorejs/ui';
+import { PropsContext } from '../PropsContext';
+import Link from 'next/link';
+
+interface Props {
+  props: string[];
+}
+
+const Extends: FC<Props> = ({ props }) => {
+  const propsLinks = useContext(PropsContext);
+
+  return (
+    <Typography mb="2rem">
+      Extends:
+      <Stack gap="1rem" mt="1rem">
+        {props.map(p => p in propsLinks ? (
+          <Text>
+            <Link href={propsLinks[p]}>
+              <a><Tag key={p} bg="primary">{p}</Tag></a>
+            </Link>
+          </Text>
+
+        ) : <Tag key={p} v="outline">{p}</Tag>)}
+      </Stack>
+
+    </Typography>
+  );
+};
+
+export default Extends;
diff --git a/website/components/Header/index.tsx b/website/components/Header/index.tsx
@@ -0,0 +1,24 @@
+import React, { FC } from 'react';
+import Head from 'next/head';
+import { Heading1, Tag, Flex } from '@xcorejs/ui';
+
+interface Props {
+  title: string;
+  themable: boolean;
+}
+
+const Header: FC<Props> = ({ title, themable }) => {
+  return (
+    <>
+      <Head>
+        <title>{title} | Xcore UI Documentation</title>
+      </Head>
+      <Flex alignItems="center">
+        <Heading1>{title}</Heading1>
+        {themable && <Tag ml="1rem">Themable</Tag>}
+      </Flex>
+    </>
+  );
+};
+
+export default Header;
diff --git a/website/components/Layout/index.tsx b/website/components/Layout/index.tsx
@@ -0,0 +1,69 @@
+import React, { FC } from 'react';
+import { Img, Typography, Stack, List, ListItem, Container, Heading3, Box, Heading2, Link, Flex } from '@xcorejs/ui';
+import NextLink from 'next/link';
+
+interface Props {
+  pages: [string| undefined, [string, string][]][];
+}
+
+const Layout: FC<Props> = ({ children, pages }) => {
+  return (
+    <Flex minHeight="100vh" flexDirection="column">
+      <Box height="100%">
+        <Flex
+          p="1.6rem"
+          alignItems="center"
+          justifyContent="space-between"
+          borderBottom="1px solid"
+          borderColor="grey"
+          height="6.4rem"
+        >
+          <NextLink href="/">
+            <a><Img height="4.8rem" src="/logo-primary.svg" alt="Logo" /></a>
+          </NextLink>
+
+          <Typography as="div">
+            <Link href="https://github.com/xcorejs/ui" target="_blank">Github</Link>
+          </Typography>
+        </Flex>
+
+        <Container mt="4rem">
+          <Stack gap="5rem" width="100%">
+            <Stack gap="1rem" direction="column" width="20rem" flexShrink={0}>
+              {pages.map(([heading, p]) =>
+                <MenuList key={heading} heading={heading} pages={p} />
+              )}
+            </Stack>
+
+            <Typography as="div" px="10rem" borderLeft="1px solid" borderColor="grey" flexGrow={1} pb="15rem">
+              {children}
+            </Typography>
+          </Stack>
+        </Container>
+      </Box>
+
+      <Flex justifyContent="flex-end">
+        <Typography p="1rem">Appio 2020</Typography>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default Layout;
+
+const MenuList: FC<{heading?: string; pages: [string, string][]}> = ({ heading, pages, ...props }) => (
+  <Box {...props}>
+    {heading && <Heading2 my=".5rem" fontSize="1.6rem">{heading}</Heading2>}
+    <List _bullet={{ content: '' }} _items={{ lineHeight: '2' }}>
+      {pages.map(([label, link]) => (
+        <ListItem key={label + link}>
+          <NextLink href={link} passHref>
+            <Link display="block">
+              {label}
+            </Link>
+          </NextLink>
+        </ListItem>
+      ))}
+    </List>
+  </Box>
+);
diff --git a/website/components/PropsContext.ts b/website/components/PropsContext.ts
@@ -0,0 +1,4 @@
+
+import { createContext } from 'react';
+
+export const PropsContext = createContext<Record<string, string>>({});
diff --git a/website/components/PropsTable/index.tsx b/website/components/PropsTable/index.tsx
@@ -0,0 +1,62 @@
+import React, { FC, useContext } from 'react';
+import { Box, Tag, Stack, Text } from '@xcorejs/ui';
+import { PropsContext } from 'components/PropsContext';
+import Link from 'next/link';
+
+interface Props {
+  props: [string, string | string[], string | null, string][];
+}
+
+const tdStyle: {} = { p: '1rem', fontWeight: 400, textAlign: 'left' };
+const thStyle = { borderBottom: '1px solid', borderColor: 'grey' };
+
+const PropsTable: FC<Props> = ({ props }) => {
+  return (
+    <Box as="table" width="100%">
+      <thead>
+        <Box as="tr" borderBottom="1px solid" borderColor="grey">
+          <Box as="th" {...tdStyle} {...thStyle}>Name</Box>
+          <Box as="th" {...tdStyle} {...thStyle}>Type</Box>
+          <Box as="th" {...tdStyle} {...thStyle}>Default</Box>
+          <Box as="th" {...tdStyle} {...thStyle}>Description</Box>
+        </Box>
+      </thead>
+      {props.map(([prop, type, def, text]) => (
+        <Box as="tr" key={prop}>
+          <Box as="td" {...tdStyle}>{prop}</Box>
+          <Box as="td" {...tdStyle}>
+            <Stack gap=".5rem">
+              {Array.isArray(type)
+                ? type.map(t => <TypeBadge key={t} type={t} />)
+                : <TypeBadge type={type} />}
+            </Stack>
+          </Box>
+          <Box as="td" {...tdStyle}>{def}</Box>
+          <Box as="td" {...tdStyle}>{text}</Box>
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+const TypeBadge: FC<{ type: string }> = ({ type: t, ...props }) => {
+  const propsLinks = useContext(PropsContext);
+
+  return t in propsLinks ? (
+    <Text>
+      <Link href={propsLinks[t]}>
+        <a>
+          <Tag bg="primary" {...props}>
+            {t}
+          </Tag>
+        </a>
+      </Link>
+    </Text>
+  ) : (
+    <Tag v="outline" {...props}>
+      {t}
+    </Tag>
+  );
+};
+
+export default PropsTable;
diff --git a/website/components/icons/16/xcore.svg b/website/components/icons/16/xcore.svg
diff --git a/website/next-env.d.ts b/website/next-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
diff --git a/website/next.config.js b/website/next.config.js
@@ -0,0 +1,26 @@
+const withMDX = require('@next/mdx')({ extension: /\.mdx?$/ });
+
+module.exports = withMDX({
+  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'mdx'],
+  webpack (config, { dir, defaultLoaders }) {
+    config.resolve.extensions.push('.svg');
+    config.module.rules.push(svgLoaderRule(defaultLoaders, dir));
+
+    return config;
+  }
+});
+
+const svgLoaderRule = (defaultLoaders, dir) => ({
+  test: /\.svg$/,
+  include: [dir],
+  exclude: /node_modules/,
+  use: [
+    defaultLoaders.babel,
+    {
+      loader: 'react-svg-loader',
+      options: {
+        jsx: true
+      }
+    }
+  ]
+});
diff --git a/website/package.json b/website/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@xcorejs/ui-website",
+  "version": "0.0.1",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@mdx-js/loader": "^1.6.13",
+    "@next/mdx": "^9.4.4",
+    "@xcorejs/ui": "^0.7.3",
+    "next": "^9.4.4",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "styled-components": "^5.1.1",
+    "prism-react-renderer": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/next": "^9.0.0",
+    "typescript": "^3.9.7",
+    "@types/mdx-js__react": "^1.5.2",
+    "react-svg-loader": "^3.0.3"
+  }
+}
diff --git a/website/pages/_app.tsx b/website/pages/_app.tsx
@@ -0,0 +1,72 @@
+import { XcoreProvider, Heading1, Heading2, Heading3, Link } from '@xcorejs/ui';
+import NextApp from 'next/app';
+import Head from 'next/head';
+import React from 'react';
+
+import Layout from '../components/Layout';
+import { theme } from '../theme';
+import { MDXProvider } from '@mdx-js/react';
+import { CodeBlock } from '../components/CodeBlock';
+import { PropsContext } from 'components/PropsContext';
+
+const pages: [string | undefined, [string, string][]][] = [
+  [undefined, [
+    ['Getting started', '/getting-started'],
+    ['Philosophy', '/philosophy']
+  ]],
+  ['Principles', [
+    ['Underscore props', '/underscore-props'],
+    ['Theme', '/theme'],
+    ['Scales', '/scales']
+  ]],
+  ['Components', [
+    ['Aspect Ratio', '/aspectRatio'],
+    ['Button', '/button'],
+    ['Collapse', '/collapse'],
+    ['Flex', '/flex'],
+    ['Icon', '/icon'],
+    ['Img', '/image'],
+    ['Link', '/link'],
+    ['Tag', '/tag'],
+    ['Typography', '/typography'],
+  ]]
+];
+
+const props = {
+  FlexProps: '/flex'
+};
+
+const mdxComponents = {
+  pre: (p: any) => <div {...p} />,
+  code: CodeBlock,
+  h1: Heading1,
+  h2: Heading2,
+  h3: Heading3,
+  a: Link
+};
+
+class App extends NextApp {
+  render () {
+    const { Component, pageProps } = this.props;
+
+    return (
+      <>
+        <Head>
+          <title key="title">Xcore UI</title>
+        </Head>
+
+        <XcoreProvider theme={theme}>
+          <PropsContext.Provider value={props}>
+            <MDXProvider components={mdxComponents}>
+              <Layout pages={pages}>
+                <Component {...pageProps} />
+              </Layout>
+            </MDXProvider>
+          </PropsContext.Provider>
+        </XcoreProvider>
+      </>
+    );
+  }
+}
+
+export default App;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@

		import { createContext } from 'react';

		export const PropsContext = createContext<Record<string, string>>({});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="next" />
		/// <reference types="next/types/global" />