Browse Source

Prepare for building

Prepare requirements for Next to build the documentation.
tags/0.3.0
TheoryOfNekomata 3 years ago
parent
commit
7cbb51481e
11 changed files with 157 additions and 77 deletions
  1. +1
    -0
      packages/react-common-docs/brand.tsx
  2. +3
    -0
      packages/react-common-docs/next.config.js
  3. +11
    -2
      packages/react-common-docs/src/components/Header/Header.tsx
  4. +1
    -1
      packages/react-common-docs/src/components/MenuGraphics/MenuGraphics.tsx
  5. +38
    -28
      packages/react-common-docs/src/components/Nav/Nav.tsx
  6. +38
    -32
      packages/react-common-docs/src/components/NavLink/NavLink.tsx
  7. +13
    -2
      packages/react-common-docs/src/components/Playground/Playground.tsx
  8. +30
    -4
      packages/react-common-docs/src/components/Props/Props.tsx
  9. +20
    -6
      packages/react-common-docs/src/components/Sidebar/Sidebar.tsx
  10. +1
    -1
      packages/react-common-docs/tsconfig.json
  11. +1
    -1
      tsconfig.json

+ 1
- 0
packages/react-common-docs/brand.tsx View File

@@ -6,6 +6,7 @@ const Base = styled('div')({
position: 'relative',
})

// @ts-ignore
const Title = styled('strong')({
fontSize: '2rem',
fontFamily: 'var(--font-family-headings), sans-serif',


+ 3
- 0
packages/react-common-docs/next.config.js View File

@@ -10,6 +10,9 @@ const e = withMDX({

module.exports = {
...e,
typescript: {
ignoreBuildErrors: true,
},
webpack(...args) {
const oldWebpack = e.webpack(...args)
const [config, { defaultLoaders, }] = args


+ 11
- 2
packages/react-common-docs/src/components/Header/Header.tsx View File

@@ -1,11 +1,18 @@
import * as React from 'react'
import * as PropTypes from 'prop-types'
import Head from 'next/head'
import unified from 'unified'
import parse from 'remark-parse'
import remark2react from 'remark-react'
import docgen from '../../docgen.json'

const Header = ({ of: ofAttr }) => {
const propTypes = {
of: PropTypes.string,
}

type Props = PropTypes.InferProps<typeof propTypes>

const Header: React.FC<Props> = ({ of: ofAttr }) => {
const docs = docgen.find(d => d.displayName === ofAttr)

if (!docs) {
@@ -25,11 +32,13 @@ const Header = ({ of: ofAttr }) => {
unified()
.use(parse)
.use(remark2react)
.processSync(docs.description).result
.processSync(docs.description).result as any
}
</p>
</React.Fragment>
)
}

Header.propTypes = propTypes

export default Header

+ 1
- 1
packages/react-common-docs/src/components/MenuGraphics/MenuGraphics.tsx View File

@@ -35,7 +35,7 @@ const MenuGraphics: React.FC<Props> = ({
return (
<Image
src={id}
alt={alt}
alt={alt as string}
/>
)
default:


+ 38
- 28
packages/react-common-docs/src/components/Nav/Nav.tsx View File

@@ -1,13 +1,9 @@
import * as React from 'react'
import * as PropTypes from 'prop-types'
import Link from 'next/link'
import styled from 'styled-components'
import NavLink from '../NavLink/NavLink'

const StyledLink = styled('a')({
display: 'block',
textDecoration: 'none',
})

const Container = styled('span')({
display: 'flex',
alignItems: 'center',
@@ -24,68 +20,82 @@ const HeaderContainer = styled(Container)({
marginTop: '2rem',
})

const NavContainer = styled('div')({
const propTypes = {
data: PropTypes.oneOfType([
PropTypes.array,
PropTypes.object,
PropTypes.string,
])
}

})
type Props = PropTypes.InferProps<typeof propTypes>

const Nav = ({
const Nav: React.FC<Props> = ({
data,
}) => {
if (Array.isArray(data)) {
if (Array.isArray(data! as unknown[])) {
return (
<NavContainer>
<div>
{
data.map(d => (
(data as (string | object | null | undefined)[]).map(d => (
<Nav
data={d}
/>
))
}
</NavContainer>
</div>
)
}
if (typeof data === 'object') {
const [entry] = Object.entries(data)
if (typeof data as unknown === 'object') {
const [entry] = Object.entries(data as Record<string, unknown>)
const [key, value] = entry
if (Array.isArray(value)) {
if (Array.isArray(value as unknown[])) {
return (
<NavContainer>
<div>
<HeaderContainer>
{key}
</HeaderContainer>
{
value.map(v => (
(value as (string | object | null | undefined)[]).map(v => (
<Nav
data={v}
/>
))
}
</NavContainer>
</div>
)
}
return (
<Link
href={value}
href={value as string}
passHref
>
<NavLink
title={key}
enclosingComponent={Container}
/>
{
// @ts-ignore
<NavLink
title={key}
enclosingComponent={Container}
/>
}
</Link>
)
}
return (
<Link
href={data}
href={data as string}
passHref
>
<NavLink
title={data}
enclosingComponent={Container}
/>
{
// @ts-ignore
<NavLink
title={data as string}
enclosingComponent={Container}
/>
}
</Link>
)
}

Nav.propTypes = propTypes

export default Nav

+ 38
- 32
packages/react-common-docs/src/components/NavLink/NavLink.tsx View File

@@ -106,43 +106,49 @@ const NavLink = React.forwardRef<HTMLAnchorElement, Props>((
<Link
ref={ref}
href={href}
onClick={onClick}
onClick={onClick as (...args: any[]) => any}
>
<EnclosingComponent>
{
graphics as object
&& (
<MenuGraphicsContainer>
<MenuGraphics
{...graphics}
/>
</MenuGraphicsContainer>
)
}
<LinkText>
<LinkTitle>
{title}
</LinkTitle>
{
// @ts-ignore
<EnclosingComponent>
{
subtitle as string
graphics as object
&& (
<LinkSubtitle>
{subtitle}
</LinkSubtitle>
<MenuGraphicsContainer>
{
// @ts-ignore
<MenuGraphics
{...graphics}
/>
}
</MenuGraphicsContainer>
)
}
</LinkText>
{
indicator as string
&& (
<IndicatorContainer>
<Icon
name={indicator!}
/>
</IndicatorContainer>
)
}
</EnclosingComponent>
<LinkText>
<LinkTitle>
{title}
</LinkTitle>
{
subtitle as string
&& (
<LinkSubtitle>
{subtitle}
</LinkSubtitle>
)
}
</LinkText>
{
indicator as string
&& (
<IndicatorContainer>
<Icon
name={indicator!}
/>
</IndicatorContainer>
)
}
</EnclosingComponent>
}
</Link>
))



+ 13
- 2
packages/react-common-docs/src/components/Playground/Playground.tsx View File

@@ -1,4 +1,5 @@
import * as React from 'react'
import * as PropTypes from 'prop-types'
import {
LiveProvider,
LiveEditor,
@@ -16,7 +17,15 @@ const StyledLiveEditor = styled(LiveEditor)({
marginTop: '1rem',
})

const Playground = ({
const propTypes = {
components: PropTypes.object,
code: PropTypes.string.isRequired,
label: PropTypes.string,
}

type Props = PropTypes.InferProps<typeof propTypes>

const Playground: React.FC<Props> = ({
components,
code,
label,
@@ -31,7 +40,7 @@ const Playground = ({
return (
<Figure>
{
label
label as string
&& (
<figcaption>
{label}
@@ -50,4 +59,6 @@ const Playground = ({
)
}

Playground.propTypes = propTypes

export default Playground

+ 30
- 4
packages/react-common-docs/src/components/Props/Props.tsx View File

@@ -1,4 +1,5 @@
import * as React from 'react'
import * as PropTypes from 'prop-types'
import styled from 'styled-components'
import docgen from '../../docgen.json'

@@ -90,10 +91,33 @@ const Code = styled('code')({
display: 'inline-block',
})

const Props = ({ of: ofAttr }) => {
const docs = docgen.find(d => d.displayName === ofAttr)
const propTypes = {
of: PropTypes.string,
}

type Props = PropTypes.InferProps<typeof propTypes>

if (!docs) {
type Docs = {
displayName: string,
description: string,
methods: unknown[],
props: {
[name: string]: {
required: boolean,
type: {
name: string,
value: { value: string }[]
},
defaultValue: { value: string, },
description: string,
}
}
}

const Props: React.FC<Props> = ({ of: ofAttr }) => {
const docs = (docgen as unknown as Docs[]).find(d => d.displayName === ofAttr)

if (!(docs as Docs)) {
return null
}

@@ -123,7 +147,7 @@ const Props = ({ of: ofAttr }) => {
</HeaderCellGroup>
<BodyCellGroup>
{
Object.entries(docs.props).map(([name, def]) => (
Object.entries((docs as Docs).props).map(([name, def]) => (
<HeaderRow>
<MainBodyCell>
<Code>
@@ -173,4 +197,6 @@ const Props = ({ of: ofAttr }) => {
)
}

Props.propTypes = propTypes

export default Props

+ 20
- 6
packages/react-common-docs/src/components/Sidebar/Sidebar.tsx View File

@@ -1,4 +1,5 @@
import * as React from 'react'
import * as PropTypes from 'prop-types'
import { Icon } from '../../../../react-common/src'
import pkg from '../../../../../package.json'
import styled from 'styled-components'
@@ -108,20 +109,31 @@ const RepoLink = styled('a')({
placeContent: 'center',
})

const Sidebar = ({
const propTypes = {
data: PropTypes.shape({
nav: PropTypes.object,
}),
brand: PropTypes.elementType,
initialTheme: PropTypes.string,
}

type Props = PropTypes.InferProps<typeof propTypes>

const Sidebar: React.FC<Props> = ({
data,
brand: Brand,
brand: BrandRaw,
initialTheme = 'Dark',
}) => {
const [theme, setTheme] = React.useState(initialTheme)
const [sidebar, setSidebar] = React.useState(false)
const navRef = React.useRef<HTMLDivElement>(null)
const Brand = BrandRaw!

const toggleDarkMode = (b: string) => () => {
setTheme(b)
}

const toggleSidebar = (b: boolean) => (e) => {
const toggleSidebar = (b: boolean): MouseEventHandler => (e) => {
e.preventDefault()
setSidebar(b)
}
@@ -140,7 +152,7 @@ const Sidebar = ({
}, [])

React.useEffect(() => {
const eventListener: MouseEventHandler = (e) => {
const eventListener = (e: MouseEvent) => {
let currentElement = e.target as HTMLElement
while (currentElement !== e.currentTarget) {
if (currentElement.tagName === 'A') {
@@ -170,7 +182,7 @@ const Sidebar = ({
}, [])

React.useEffect(() => {
window.localStorage.setItem('tesseract-theme', theme)
window.localStorage.setItem('tesseract-theme', theme as string)
}, [theme])

React.useEffect(() => {
@@ -265,7 +277,7 @@ const Sidebar = ({
</Actions>
</Container>
<Nav
data={data.nav}
data={data!.nav}
/>
</NavWrapper>
</Base>
@@ -273,4 +285,6 @@ const Sidebar = ({
)
}

Sidebar.propTypes = propTypes

export default Sidebar

+ 1
- 1
packages/react-common-docs/tsconfig.json View File

@@ -10,7 +10,7 @@
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",


+ 1
- 1
tsconfig.json View File

@@ -10,7 +10,7 @@
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",


Loading…
Cancel
Save