Skip to content

Commit

Permalink
feat: react router integration
Browse files Browse the repository at this point in the history
  • Loading branch information
@atanasster
atanasster committed Feb 26, 2021
1 parent 3ba7443 commit 631541f
Show file tree
Hide file tree
Showing 18 changed files with 402 additions and 45 deletions.
8 changes: 4 additions & 4 deletions core/routes/src/routes/docs-pages.ts
View file
Expand Up @@ -54,10 +54,10 @@ export interface DocPagesPath {
type: DocType;
path: string;
lastModified?: string;
docId?: string | null;
storyId?: string | null;
category?: string | null;
activeTab?: string | null;
docId?: string;
storyId?: string;
category?: string;
activeTab?: string;
}

export const getPageTabs = (
Expand Down
4 changes: 1 addition & 3 deletions examples/react-webpack/package.json
View file
Expand Up @@ -4,10 +4,8 @@
"version": "2.9.1",
"dependencies": {
"@babel/core": "7.12.3",
"@component-controls/app": "^2.9.1",
"@component-controls/core": "^2.9.0",
"@component-controls/pages": "^2.9.1",
"@component-controls/routes": "^2.9.0",
"@component-controls/react-router-integration": "^2.9.1",
"@component-controls/search-algolia": "^2.9.0",
"@component-controls/search-fusejs": "^2.9.0",
"@component-controls/store": "^2.9.1",
Expand Down
8 changes: 4 additions & 4 deletions examples/react-webpack/src/App.tsx
View file
@@ -1,10 +1,10 @@
import React, { FC } from 'react';
import React, { FC, Fragment } from 'react';
import { store } from '@component-controls/store/controls-store';
import { Layout } from '@component-controls/nextjs-plugin';
import { useRoutes } from '@component-controls/react-router-integration';

const App: FC = () => {
console.log(store);
return <Layout />;
const routes = useRoutes(store);
return <Fragment>{routes}</Fragment>;
};

export default App;
13 changes: 2 additions & 11 deletions integrations/gatsby-theme-stories/src/gatsby-node.ts
View file
Expand Up @@ -44,7 +44,6 @@ export const createPagesStatefully = async (
...defaultCompileProps,
...options,
};
console.log(config);
const onBundle: CompilerCallbackFn = async ({ store: loadingStore }) => {
if (loadingStore) {
const store: Store = loadStore(loadingStore, true);
Expand All @@ -60,8 +59,7 @@ export const createPagesStatefully = async (
createPage(props);
};
//home page
const { path, docId = null, type = null, storyId = null } =
getIndexPage(store) || {};
const { path, docId, type, storyId } = getIndexPage(store) || {};
createGatsbyPage({
path,
component: require.resolve(`../src/templates/DocPage.tsx`),
Expand All @@ -86,14 +84,7 @@ export const createPagesStatefully = async (

const docPages = getDocPages(store);
docPages.forEach(
({
path,
type,
docId = null,
storyId = null,
category = null,
activeTab = null,
}: DocPagesPath) => {
({ path, type, docId, storyId, category, activeTab }: DocPagesPath) => {
createGatsbyPage({
path,
component: require.resolve(`../src/templates/DocPage.tsx`),
Expand Down
23 changes: 0 additions & 23 deletions integrations/gatsby-theme-stories/src/templates/CategoryPage.tsx
View file

This file was deleted.

1 change: 1 addition & 0 deletions integrations/react-router-integration/.eslintignore
View file
@@ -0,0 +1 @@
dist
21 changes: 21 additions & 0 deletions integrations/react-router-integration/LICENSE.md
View file
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2020 Atanas Stoyanov

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
91 changes: 91 additions & 0 deletions integrations/react-router-integration/README.md
View file
@@ -0,0 +1,91 @@
# Table of contents

- [In action](#in-action)
- [Overview](#overview)
- [API](#api)
- [<ins>getHomePagesPaths</ins>](#insgethomepagespathsins)
- [<ins>getDocPagesPaths</ins>](#insgetdocpagespathsins)
- [<ins>Layout</ins>](#inslayoutins)
- [<ins>NextLink</ins>](#insnextlinkins)

# In action

[Live site](https://nextjs.component-controls.com)

# Overview

Next.js plugin for documenting your projects with component controls

- Exports building and store interfaces.
- Exports generic Layout component.

[Getting started with nextjs](https://component-controls.com/tutorial/getting-started/nextjs)

# API

<react-docgen-typescript path="./src" />

<!-- START-REACT-DOCGEN-TYPESCRIPT -->

## <ins>getHomePagesPaths</ins>

_getHomePagesPaths [source code](https://github.com/ccontrols/component-controls/tree/master/integrations/nextjs-plugin/src/page-links.ts)_

### properties

| Name | Type | Description |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| `error` | _string_ | build-time error string |
| `config*` | _{ renderFn?: FrameworkRenderFn; title?: string; logo?: ReactNode; app?: FC&lt;{}>; description?: string; copyright?: string; language?: string; author?: string; image?: string; ... 10 more ...; analytics?: any; } & StoryProps&lt;...> & Pick&lt;...>_ | global configuration for config file |
| `docs*` | _Record&lt;string, Document&lt;unknown>>_ | list of documents (pages) |
| `stories*` | _Record&lt;string, Story&lt;unknown>>_ | list of stories |
| `components*` | _Record&lt;string, Component>_ | list of components used in stories and documents |
| `packages*` | _Record&lt;string, PackageInfo>_ | list of package.json files and their data used by the components and the stories of the project |
| `addObserver*` | _(observer: StoreObserver) => void_ | storybook integration notifiers |
| `removeObserver*` | _(observer: StoreObserver) => void_ | |
| `updateStory*` | _(story: Story&lt;unknown>) => void_ | update store, for example controls or state |
| `search` | _(store: Store) => SearchResult_ | |

## <ins>getDocPagesPaths</ins>

_getDocPagesPaths [source code](https://github.com/ccontrols/component-controls/tree/master/integrations/nextjs-plugin/src/page-links.ts)_

### properties

| Name | Type | Description |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| `error` | _string_ | build-time error string |
| `config*` | _{ renderFn?: FrameworkRenderFn; title?: string; logo?: ReactNode; app?: FC&lt;{}>; description?: string; copyright?: string; language?: string; author?: string; image?: string; ... 10 more ...; analytics?: any; } & StoryProps&lt;...> & Pick&lt;...>_ | global configuration for config file |
| `docs*` | _Record&lt;string, Document&lt;unknown>>_ | list of documents (pages) |
| `stories*` | _Record&lt;string, Story&lt;unknown>>_ | list of stories |
| `components*` | _Record&lt;string, Component>_ | list of components used in stories and documents |
| `packages*` | _Record&lt;string, PackageInfo>_ | list of package.json files and their data used by the components and the stories of the project |
| `addObserver*` | _(observer: StoreObserver) => void_ | storybook integration notifiers |
| `removeObserver*` | _(observer: StoreObserver) => void_ | |
| `updateStory*` | _(story: Story&lt;unknown>) => void_ | update store, for example controls or state |
| `search` | _(store: Store) => SearchResult_ | |

## <ins>Layout</ins>

_Layout [source code](https://github.com/ccontrols/component-controls/tree/master/integrations/nextjs-plugin/src/components/Layout.tsx)_

### properties

| Name | Type | Description |
| ----------- | -------- | ----------- |
| `docId` | _string_ | |
| `storyId` | _string_ | |
| `activeTab` | _string_ | |

## <ins>NextLink</ins>

_NextLink [source code](https://github.com/ccontrols/component-controls/tree/master/integrations/nextjs-plugin/src/components/NextLink.tsx)_

### properties

| Name | Type | Description |
| ----- | ---------------------------------------------------------------------------- | ----------- |
| `ref` | _((instance: HTMLAnchorElement) => void) \| RefObject&lt;HTMLAnchorElement>_ | |
| `to` | _string_ | |

<!-- END-REACT-DOCGEN-TYPESCRIPT -->
63 changes: 63 additions & 0 deletions integrations/react-router-integration/package.json
View file
@@ -0,0 +1,63 @@
{
"name": "@component-controls/react-router-integration",
"version": "2.9.1",
"description": "react-router integration to create stories documentation sites",
"keywords": [
"story",
"nextjs"
],
"main": "dist/index.js",
"module": "dist/index.esm.js",
"typings": "dist/index.d.ts",
"files": [
"dist/",
"package.json",
"README.md",
"build.js",
"store.js"
],
"scripts": {
"build": "yarn cross-env NODE_ENV=production rollup -c",
"dev": "yarn cross-env NODE_ENV=development rollup -cw",
"docs": "ts-md",
"fix": "yarn lint --fix",
"lint": "yarn eslint . --ext mdx,ts,tsx",
"prepare": "yarn build",
"test": "yarn jest --passWithNoTests"
},
"homepage": "https://github.com/ccontrols/component-controls",
"bugs": {
"url": "https://github.com/ccontrols/component-controls/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/ccontrols/component-controls.git",
"directory": "integrations/react-router-integration"
},
"license": "MIT",
"dependencies": {
"@component-controls/app": "^2.9.1",
"@component-controls/pages": "^2.9.1",
"@component-controls/routes": "^2.9.0",
"@component-controls/store": "^2.9.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0"
},
"devDependencies": {
"@component-controls/ts-markdown-docs": "^2.6.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"@types/react-router": "^5.1.11",
"@types/react-router-dom": "^5.1.7",
"typescript": "^4.0.5"
},
"publishConfig": {
"access": "public"
},
"authors": [
"Atanas Stoyanov"
],
"gitHead": "e30d62f101e104711a16261fce04785d58cac1eb"
}
5 changes: 5 additions & 0 deletions integrations/react-router-integration/rollup.config.js
View file
@@ -0,0 +1,5 @@
import { config } from '../../rollup-config';

export default config({
input: ['./src/index.tsx'],
});
31 changes: 31 additions & 0 deletions integrations/react-router-integration/src/components/Layout.tsx
View file
@@ -0,0 +1,31 @@
import React, { FC } from 'react';
import { AppContext, AppContextProps } from '@component-controls/app';
import { Helmet } from 'react-helmet';
import { store } from '@component-controls/store/controls-store';
import { ReactRouterLink } from './ReactRouterLink';

interface LayoutProps {
docId?: string;
storyId?: string;
activeTab?: string;
}

export const Layout: FC<LayoutProps> = ({
docId,
storyId,
children,
activeTab,
}) => {
return (
<AppContext
Helmet={Helmet as AppContextProps['Helmet']}
docId={docId}
storyId={storyId}
store={store}
linkClass={ReactRouterLink}
activeTab={activeTab}
>
{children}
</AppContext>
);
};
15 changes: 15 additions & 0 deletions integrations/react-router-integration/src/components/ReactRouterLink.tsx
View file
@@ -0,0 +1,15 @@
import React, { FC } from 'react';
import { LinkProps } from 'theme-ui';
import { Link } from 'react-router-dom';

export const ReactRouterLink: FC<LinkProps & { to?: string }> = ({
href = '',
children,
...props
}) => {
return (
<Link to={href} {...props}>
{children}
</Link>
);
};
9 changes: 9 additions & 0 deletions integrations/react-router-integration/src/components/types.ts
View file
@@ -0,0 +1,9 @@
import { ReactNode } from 'react';

export interface PageConfig {
key: string;
title: string;
render: () => ReactNode;
}

export type PagesConfig = (route: string) => PageConfig[];

0 comments on commit 631541f

Please sign in to comment.