Merge pull request #8 from CSSSR/CORE-29

CORE-29

examples/nextjs-integration/components/Logo/Logo.tsx

@@ -14,6 +14,7 @@ const Logo: React.FC<ILogoProps> = props => {
     <Link href='/docs'>
       <TextLink 
         fontStyle='font_roboto_slab_light'
+        theme={{dark: {}}}
         css={css`
           margin-top: 0;
           margin-bottom: 0;
@@ -26,6 +27,11 @@ const Logo: React.FC<ILogoProps> = props => {
 
           :hover {
             color: rgba(0, 0, 0, 0.7);
+
+          ${({ theme }) => theme.dark && css`
+            color: white;
+            background-color: black;
+          `}
           }
         `}
         {...props}

examples/nextjs-integration/components/docs/Headings/Headings.tsx

@@ -0,0 +1,20 @@
+import styled from '@emotion/styled'
+import { Heading as OriginHeading } from '@asmy/core-design'
+
+const headingsWithFontStyle = {
+  H1: props => <OriginHeading.H1 fontStyle="font_h1_slab" {...props} />,
+  H2: props => <OriginHeading.H2 fontStyle="font_h2_slab" {...props} />,
+  H3: props => <OriginHeading.H3 fontStyle="font_h3_slab" {...props} />,
+  H4: props => <OriginHeading.H4 fontStyle="font_h3_slab" {...props} />,
+  H5: props => <OriginHeading.H5 fontStyle="font_h3_slab" {...props} />,
+  H6: props => <OriginHeading.H6 fontStyle="font_h3_slab" {...props} />,
+}
+
+const H1 = styled(headingsWithFontStyle.H1)`grid-column: 1 / span 12`
+const H2 = styled(headingsWithFontStyle.H2)`grid-column: 1 / span 12`
+const H3 = styled(headingsWithFontStyle.H3)`grid-column: 1 / span 12`
+const H4 = styled(headingsWithFontStyle.H4)`grid-column: 1 / span 12`
+const H5 = styled(headingsWithFontStyle.H5)`grid-column: 1 / span 12`
+const H6 = styled(headingsWithFontStyle.H6)`grid-column: 1 / span 12`
+
+export { H1, H2, H3, H4, H5, H6 }

examples/nextjs-integration/components/docs/Headings/index.ts

@@ -0,0 +1 @@
+export { H1, H2, H3, H4, H5, H6 } from './Headings'

examples/nextjs-integration/components/docs/Paragraph/Paragraph.tsx

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled'
+import { Text as OriginText } from '@asmy/core-design'
+
+const Text = props => <OriginText fontStyle="font_p24_strong" {...props} /> 
+
+const Paragraph = styled(Text)`
+  margin-top: 20px;
+  grid-column: 1 / span 12
+`
+
+export { Paragraph }
+export default Paragraph

examples/nextjs-integration/components/docs/Paragraph/index.ts

@@ -0,0 +1 @@
+export { deafult, Paragraph } from './Paragraph'

examples/nextjs-integration/components/docs/Pre/Pre.tsx

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled'
+
+const OriginPre = styled.pre`
+  margin: 0;
+  padding: 40px;
+  background-color: #f2f2f2;
+`
+
+const Pre = styled(OriginPre)`
+  grid-column: 1 / span 12;
+`
+
+export { Pre }
+export default Pre

examples/nextjs-integration/components/docs/Table/Table.tsx

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled'
+
+const OriginTable = styled.table`
+  border: 1px solid black;
+  border-collapse: collapse;
+`
+
+const Table = styled(OriginTable)`
+  grid-column: 1 / span 12;
+`
+
+export { Table }
+export default Table

examples/nextjs-integration/components/docs/TableCells/TableCell.tsx

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled'
+
+import { font_p24_strong } from '@asmy/core-design'
+
+const TD = styled.td`
+  padding: 12px;
+  border: 1px solid black;
+  text-align: left;
+  vertical-align: top;
+  ${font_p24_strong}
+`
+const TH = styled(TD.withComponent('th'))`
+  vertical-align: middle;
+  color: white !important;
+`
+
+export { TD, TH }

examples/nextjs-integration/components/docs/TableCells/index.ts

@@ -0,0 +1 @@
+export { TD, TH } from './TableCell'

examples/nextjs-integration/components/docs/TableRow/TableRow.tsx

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled'
+
+const TableRow = styled.tr`
+  thead & {
+    background-color: #343434;
+  }
+
+  :nth-of-type(even) {
+    background-color: #f2f2f2;
+  }
+`
+
+export { TableRow }
+export default TableRow

examples/nextjs-integration/components/docs/TableRow/index.ts

@@ -0,0 +1 @@
+export { default, TableRow } from './TableRow'

examples/nextjs-integration/next.config.js

@@ -1,6 +1,7 @@
 const { print } = require('q-i')
 const withPlugins = require('next-compose-plugins');
 const withFonts = require('next-fonts');
+const withMDX = require('@zeit/next-mdx')();
 
 const withTypescript = require('@zeit/next-typescript')
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
@@ -31,6 +32,4 @@ module.exports = withPlugins([[withTypescript, {
 
     return config
   },
-}], withFonts]);
-
-// module.exports = withTypescript()
+}], [withMDX, { pageExtensions: ['tsx', 'mdx'] }], withFonts]);

examples/nextjs-integration/package.json

@@ -26,6 +26,7 @@
     "react-dom": "^16.8.6"
   },
   "devDependencies": {
+    "@zeit/next-mdx": "^1.2.0",
     "fork-ts-checker-webpack-plugin": "^1.0.2",
     "prettier": "^1.17.0",
     "q-i": "^2.0.1",

examples/nextjs-integration/pages/_app.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import App, { Container } from 'next/app'
+
+import { H1, H2, H3, H4, H5, H6 } from '../components/docs/Headings'
+import { Paragraph } from '../components/docs/Paragraph'
+import { Table } from '../components/docs/Table'
+import { TableRow } from '../components/docs/TableRow'
+import { Pre } from '../components/docs/Pre'
+import { TD, TH } from '../components/docs/TableCells'
+import { ProjectLayout } from '../components/ProjectLayout'
+
+import { Grid } from '@asmy/core-design'
+
+
+const components = {
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
+  h5: H5,
+  h6: H6,
+  p:  Paragraph,
+  table: Table,  
+  tr: TableRow,
+  td: TD,
+  th: TH,
+  pre: Pre,
+  wrapper: Grid,
+}
+
+class MyApp extends App {
+  static async getInitialProps({ Component, ctx }) {
+    let pageProps = {};
+
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx);
+    }
+
+    if (ctx.pathname.slice(0, 5) === '/docs') {
+      pageProps.isDocsPage = true
+    }
+
+    return { pageProps };
+  }
+
+  render() {
+    const { Component, pageProps } = this.props;
+
+    return (
+      <Container>
+          {pageProps.isDocsPage 
+            ? <ProjectLayout>
+                <Component 
+                  components={components} 
+                  {...pageProps} 
+                />
+              </ProjectLayout>
+
+            : <Component {...pageProps} />
+          }
+      </Container>
+    );
+  }
+}
+
+export default MyApp;

examples/nextjs-integration/pages/docs/button.mdx

@@ -0,0 +1,67 @@
+import { css } from '@emotion/core'
+import { Button } from '@asmy/core-design'
+
+# Button
+
+<Button 
+  css={css`grid-column: 1 / span 3;`} 
+  kind="primary" 
+  onClick={() => alert('Ты кликнул кнопку')}
+>
+  Кнопка
+</Button>
+
+<Button
+  css={css`grid-column: 4 / span 3;`}
+  kind="primary"
+  onClick={() => alert('Ты кликнул кнопку')}
+  disabled
+>
+  Кнопка
+</Button>
+
+<Button
+  css={css`grid-column: 7 / span 3;`}
+  kind="secondary"
+  onClick={() => alert('Ты кликнул кнопку')}
+>
+  Кнопка
+</Button>
+
+<Button
+  css={css`grid-column: 10 / span 3;`}
+  kind="secondary"
+  onClick={() => alert('Ты кликнул кнопку')}
+  disabled
+>
+  Кнопка
+</Button>
+
+Компонент кнопки. Используется как триггер для выполнения определённого действия. Кнопка однозначно сообщает пользователю, что произойдёт после нажатия на неё.
+
+---------------------------------------
+## Свойства
+Имя       | Допустимые значения  | Значение по умолчанию | Комментарий
+--------- | -------------------- | --------------------- | ----------------
+kind      | primary \| secondary | primary               | Тема кнопки
+disabled  | true \| false        | false                 | Отвечает за disabled состояние кнопки
+
+---------------------------------------
+## Хендлеры
+Имя       | Аргументы | Комментарий
+--------- | --------- | ---------------
+onClick   | event     | Функция, которая будет исполнятся при клике на кнопку
+
+---------------------------------------
+## Код
+```
+  import { Button } from '@asmy/core-design'
+
+  <Button
+    kind="secondary"
+    onClick={handleClick}
+    disabled
+  >
+    Кнопка
+  </Button>
+```