Merge pull request #33 from bensmithett/updates

Dependency update, change dev server port, and move to MDX for stories

Author: bensmithett

package.json

@@ -1,14 +1,14 @@
 {
   "name": "tropical",
-  "version": "9.1.0",
+  "version": "9.2.0",
   "dependencies": {
     "@babel/core": "^7.14.6",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@storybook/addon-actions": "^6.4.0-alpha.16",
-    "@storybook/addon-essentials": "^6.4.0-alpha.16",
-    "@storybook/addon-links": "^6.4.0-alpha.16",
-    "@storybook/react": "^6.4.0-alpha.16",
+    "@storybook/addon-actions": "^6.4.8",
+    "@storybook/addon-essentials": "^6.4.8",
+    "@storybook/addon-links": "^6.4.8",
+    "@storybook/react": "^6.4.8",
     "@vitejs/plugin-react-refresh": "^1.3.1",
     "babel-loader": "^8.2.2",
     "dayjs": "^1.10.6",
@@ -22,7 +22,7 @@
     "react-fela": "^11.6.1",
     "react-head": "^3.4.0",
     "rehype-slug": "^4.0.1",
-    "storybook-builder-vite": "^0.0.12",
+    "storybook-builder-vite": "^0.1.10",
     "tropical-islands": "^0.1.2",
     "tropical-scaffold": "^0.1.1",
     "vite": "^2.4.2",

server.js

@@ -27,9 +27,9 @@ async function createServer() {
     }
   })
 
-  app.listen(5000)
+  app.listen(3000)
 
-  console.log('🏝   Your Tropical site is now being served at: http://localhost:5000')
+  console.log('🏝   Your Tropical site is now being served at: http://localhost:3000')
 }
 
 createServer()

src/components/TropicalCodeBlock/TropicalCodeBlock.stories.jsx

@@ -0,0 +1,56 @@
+import { Meta, Story } from '@storybook/addon-docs'
+import { TropicalCodeBlock } from './TropicalCodeBlock'
+
+<Meta title='TropicalCodeBlock' component={TropicalCodeBlock} />
+
+export const Template = (args) => <TropicalCodeBlock {...args} />
+
+# TropicalCodeBlock
+
+This component is used to render MDX fenced code blocks (```) using <a href='https://github.com/FormidableLabs/prism-react-renderer' target='_blank'>prism-react-renderer</a> (as per the <a href='https://mdxjs.com/guides/syntax-highlighting' target='_blank'>MDX syntax highlighting guide</a>).
+
+## Customising
+
+You can change this component to suit your needs.
+
+### Theme
+
+See <a href='https://github.com/FormidableLabs/prism-react-renderer#theming'>prism-react-renderer's Theming docs</a>.
+
+### Syntaxes
+
+⚠️ prism-react-renderer only highlights <a href='https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js' target='_blank'>certain languages</a> by default. See prism-react-renderer's <a href='https://github.com/FormidableLabs/prism-react-renderer#faq' target='_blank'>FAQ about adding more language highlighing support</a> for instructions.
+
+## Stories
+
+### JS
+
+<Story
+  name='JS'
+  args={{
+    children: `function relax() {
+  console.log('Welcome to Tropical')
+}`,
+    language: 'javascript'
+  }}
+>
+  {Template.bind({})}
+</Story>
+
+### JSX
+
+<Story
+  name='JSX'
+  args={{
+    children: `function Relax ({ drink = 'Singapore Sling' }) {
+  return (
+    <div>
+      <Cocktail drink={drink} />
+    </div>
+  )
+}`,
+    language: 'jsx'
+  }}
+>
+  {Template.bind({})}
+</Story>

src/components/TropicalCodeBlock/TropicalCodeBlock.stories.mdx

@@ -0,0 +1,16 @@
+import { Meta, Story } from '@storybook/addon-docs'
+import { TropicalPhotoButton } from './TropicalPhotoButton'
+
+<Meta title='TropicalPhotoButton' component={TropicalPhotoButton} />
+
+export const Template = (args) => <TropicalPhotoButton {...args} />
+
+# TropicalPhotoButton
+
+A silly example component. You can delete this.
+
+## Stories
+
+### Normal
+
+<Story name='Normal' args={{ children: 'Click me!', alertMessage: 'Hello!' }} />