feat: improve example

Author: sergeysova

example/src/woly/atoms/button/index.tsx

@@ -1,3 +1,8 @@
 import React from 'react';
+import styled from 'styled-components';
 
-export const Base = () => <button>Hello</button>;
+export const Base = styled.button`
+  background-color: blue;
+  color: white;
+  border-radius: 6px;
+`;

example/src/woly/atoms/button/usage.mdx

@@ -17,17 +17,11 @@ Button allow users to take actions, and make choices, with a single tap.
 
 ### Usage
 
-```tsx
-const Example = () => (
-  <button.Primary text="Hello world" onClick={(event) => console.info('Hi!')} />
-);
-```
-
 First
 
 <Frame>
   <New />
-  <button.Base />
+  <button.Base>Demooo</button.Base>
 </Frame>
 
 Second

gatsby-theme-woly/plugins/remark-plugin.js

@@ -4,31 +4,15 @@ module.exports = (options) => {
   // console.log('REMARK PLUGIN', options);
 
   function transformer(tree) {
-    const codes = [];
-
     visit(tree, 'jsx', (node, index, parent) => {
-      codes.push({
-        at: index,
-        node: {
-          type: 'code',
-          lang: 'jsx',
-          meta: null,
-          value: node.value,
-        },
-        parent,
+      parent.children.splice(index + 1, 0, {
+        type: 'code',
+        lang: 'jsx',
+        meta: null,
+        value: node.value,
       });
     });
 
-    // When new element added to AST list, other elements is moved down
-    // Absolute index of each element in `codes` has incorrect `at` position
-    let shift = 0;
-    codes.forEach(({ at, node, parent }) => {
-      parent.children.splice(at + 1 + shift, 0, node);
-      shift++;
-    });
-
-    delete codes;
-
     // console.log('REMARK PLUGIN TRANSFORMER', tree);
   }
 

gatsby-theme-woly/src/components/frame/index.tsx

@@ -1,25 +1,24 @@
 /**
- * Creates iFrame with react components content inside .mdx docs
+ * Creates Frame with react components content inside .mdx docs
  * usage: usage.mdx
  */
 
-import * as React from 'react';
 import styled from 'styled-components';
-import { createPortal } from 'react-dom';
 
-export const Frame = ({ children, title, ...props }) => {
-  const [contentRef, setContentRef] = React.useState(null)
-  const mountNode =
-    contentRef?.contentWindow?.document?.body
-
-  return (
-    <StyledIframe title={title} {...props} ref={setContentRef}>
-      {mountNode && createPortal(children, mountNode)}
-    </StyledIframe>
-  )
-}
-
-const StyledIframe = styled.iframe`
+export const Frame = styled.div`
   resize: both;
   width: 100%;
+  border: 2px solid var(--base, rgb(246, 248, 250));
+  padding: 1rem;
+  box-sizing: border-box;
+  border-radius: 4px;
+
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+
+  & + .prism-code {
+    margin-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
 `;

gatsby-theme-woly/src/styles/global.css

@@ -14,7 +14,7 @@ body {
 }
 
 pre {
-  background: var(--base);
+  background: var(--base) !important;
   padding: 1rem;
   margin-bottom: 30px;
   border-radius: 3px;

gatsby-theme-woly/src/templates/usage.js

@@ -15,16 +15,15 @@ const ComponentPage = ({ data, pageContext }) => {
     <Layout>
       <div>
         <h2>{frontmatter.name}</h2>
-        <h3>Use it</h3>
         <pre>
           import {'{'} {pascalCase(frontmatter.name)} {'}'} from "
           {frontmatter.package}";
         </pre>
-        <h3>Installation</h3>
+        {/* <h3>Installation</h3> */}
         {/* prettier-ignore */}
-        <pre>
+        {/* <pre>
           {installation(frontmatter)}
-        </pre>
+        </pre> */}
         <MDXRenderer>{body}</MDXRenderer>
       </div>
     </Layout>