feat: edit this page block, add to classic page

ccontrols · Apr 30, 2020 · 4865e70 · 4865e70
1 parent 578d820
commit 4865e70
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -105,8 +105,8 @@ Storybook Addon For live editing of component controls
 ### Limitations
 
 -   Initial version is only for `react` apps. More frameworks are on the roadmap. 
--   Only handles the CSF and MDX stories format. The storeisOf API is not supported and there are currently no plans to support it.
--   The Storybook MDX is a proprietary format that will be replaced in due time with a portable [frontmatter](https://www.gatsbyjs.org/docs/mdx/markdown-syntax/#frontmatter--mdx-example) stories format, similar to the CSF format.
+-   Only handles the CSF and MDX stories format. The storiesOf API is not supported and there are currently no plans to support it.
+-   The Storybook MDX (`<Meta />` tag) is a proprietary format that will be replaced in due time with a portable [frontmatter](https://www.gatsbyjs.org/docs/mdx/markdown-syntax/#frontmatter--mdx-example) stories format, similar to the CSF format.
 
 <!-- END-PACKAGE-SECTION -->
 

diff --git a/examples/stories/package.json b/examples/stories/package.json
@@ -2,5 +2,11 @@
   "private": true,
   "version": "1.0.1",
   "name": "component-controls-stories",
-  "license": "MIT"
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ccontrols/component-controls.git",
+    "directory": "examples/stories"
+  }
+
 }
diff --git a/examples/storybook-6-no-docs/package.json b/examples/storybook-6-no-docs/package.json
@@ -19,5 +19,10 @@
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "typescript": "^3.8.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ccontrols/component-controls.git",
+    "directory": "examples/storybook-6-no-docs"
   }
 }
diff --git a/examples/storybook-6/package.json b/examples/storybook-6/package.json
@@ -24,5 +24,10 @@
     "react-dom": "^16.9.0",
     "typescript": "^3.8.3",
     "webpack-react-docgen-typescript": "^0.9.5"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ccontrols/component-controls.git",
+    "directory": "examples/storybook-6"
   }
 }
diff --git a/examples/storybook-tutorial/package.json b/examples/storybook-tutorial/package.json
@@ -23,5 +23,10 @@
     "react-dom": "^16.9.0",
     "typescript": "^3.8.3",
     "webpack-react-docgen-typescript": "^0.9.5"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ccontrols/component-controls.git",
+    "directory": "examples/storybook-tutorial"
   }
 }
diff --git a/ui/blocks/README.md b/ui/blocks/README.md
@@ -8,6 +8,7 @@
     -   [<ins>ControlsTable</ins>](#inscontrolstableins)
     -   [<ins>SingleControlsTable</ins>](#inssinglecontrolstableins)
     -   [<ins>Description</ins>](#insdescriptionins)
+    -   [<ins>EditPage</ins>](#inseditpageins)
     -   [<ins>PageContainer</ins>](#inspagecontainerins)
     -   [<ins>Playground</ins>](#insplaygroundins)
     -   [<ins>PropsTable</ins>](#inspropstableins)
@@ -60,14 +61,15 @@ _StoryBlockContainer [source code](https:/github.com/ccontrols/component-control
 
 ### properties
 
-| Name          | Type                | Description                                                                 |
-| ------------- | ------------------- | --------------------------------------------------------------------------- |
-| `id`          | _string_            | id of the story                                                             |
-| `name`        | _string_            | alternatively you can use the name of a story to load from an external file |
-| `title`       | _string_            | optional section title for the block.                                       |
-| `description` | _string_            | optional markdown description.                                              |
-| `collapsible` | _boolean_           | if false, will nothave a collapsible frame.                                 |
-| `sxStyle`     | _SystemStyleObject_ | theme-ui styling object for Block Box                                       |
+| Name                  | Type                | Description                                                                 |
+| --------------------- | ------------------- | --------------------------------------------------------------------------- |
+| `useStoryDescription` | _boolean_           |                                                                             |
+| `id`                  | _string_            | id of the story                                                             |
+| `name`                | _string_            | alternatively you can use the name of a story to load from an external file |
+| `title`               | _string_            | optional section title for the block.                                       |
+| `description`         | _string_            | optional markdown description.                                              |
+| `collapsible`         | _boolean_           | if false, will nothave a collapsible frame.                                 |
+| `sxStyle`             | _SystemStyleObject_ | theme-ui styling object for Block Box                                       |
 
 ## <ins>ComponentSource</ins>
 
@@ -145,6 +147,13 @@ _Description [source code](https:/github.com/ccontrols/component-controls/tree/m
 | `components` | _{ \[key: string]: ComponentOverride&lt;any, any>; a?: ComponentOverride&lt;any, any>; br?: ComponentOverride&lt;any, any>; button?: ComponentOverride&lt;any, any>; ... 27 more ...; ul?: ComponentOverride&lt;...>; }_ | components to customize the markdown display.                                                                                                                                                                                                                                                      |
 | `of`         | _any_                                                                                                                                                                                                                    | Specify the component(s), for which to have information displayed. The default, a value of \`"."\` will indicate to display information for the current component (associated with the current Story). If an array of components is specified, each component will be displayed in a separate tab. |
 
+## <ins>EditPage</ins>
+
+Display a Edit this page link at the top of the page.
+In order for this to work, you need to set up the `repository` field in `package.json`.
+
+_EditPage [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/blocks/src/EditPage/EditPage.tsx)_
+
 ## <ins>PageContainer</ins>
 
 If the page is an MDX page, will display the MDX components.

diff --git a/ui/blocks/src/EditPage/EditPage.tsx b/ui/blocks/src/EditPage/EditPage.tsx
@@ -0,0 +1,43 @@
+/** @jsx jsx */
+/* eslint react/jsx-key: 0 */
+import { jsx } from 'theme-ui';
+import { FC } from 'react';
+import { Box, Text } from 'theme-ui';
+import Octicon, { MarkGithub } from '@primer/octicons-react';
+import { ExternalLink } from '@component-controls/components';
+import { useStoryContext } from '../context';
+
+/**
+ * Display a Edit this page link at the top of the page.
+ * In order for this to work, you need to set up the `repository` field in `package.json`.
+ */
+export const EditPage: FC = () => {
+  const { kind, ...rest } = useStoryContext({ id: '.', name });
+  const { repository } = kind || {};
+  console.log(rest, kind, repository);
+  return repository && repository.browse ? (
+    <Box
+      sx={{
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        p: 2,
+      }}
+    >
+      <ExternalLink href={repository.browse} aria-label="edit this page">
+        <Box
+          sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}
+        >
+          <Octicon icon={MarkGithub} />
+          <Text
+            sx={{
+              pl: 2,
+            }}
+          >
+            Edit this page
+          </Text>
+        </Box>
+      </ExternalLink>
+    </Box>
+  ) : null;
+};
diff --git a/ui/blocks/src/EditPage/index.ts b/ui/blocks/src/EditPage/index.ts
@@ -0,0 +1 @@
+export * from './EditPage';
diff --git a/ui/blocks/src/index.ts b/ui/blocks/src/index.ts
@@ -3,6 +3,7 @@ export * from './context';
 export * from './ComponentSource';
 export * from './ControlsTable';
 export * from './Description';
+export * from './EditPage';
 export * from './PageContainer';
 export * from './Playground';
 export * from './PropsTable';

diff --git a/ui/pages/src/ClassicPage/ClassicPage.tsx b/ui/pages/src/ClassicPage/ClassicPage.tsx
@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import {
+  EditPage,
   ControlsTable,
   Title,
   Subtitle,
@@ -14,6 +15,7 @@ import {
 export const ClassicPage: FC = () => {
   return (
     <>
+      <EditPage />
       <Title />
       <Subtitle />
       <Description />