asyavee/medusa-store
1
0 Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

docs: adds first version of REST docs (#116)

Browse Source
This commit is contained in:
Sebastian Rindom authored and GitHub committed 2020-09-30 21:17:22 +02:00
1 parent 1da1ebbb5e
commit 47e2ad2952
29 files changed
+14653 -17
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

www/src/components/layout.js
+24
View File
@@ -0,0 +1,24 @@
import React from "react"
import { Flex, Box } from "rebass"
const Layout = ({ children }) => {
return (
<Flex
sx={{
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
overflowY: "scroll",
}}
fontFamily={"body"}
flexDirection="column"
flexGrow="1"
>
<Box>{children}</Box>
</Flex>
)
}
export default Layout
www/src/pages/api/store.js
+233
View File
@@ -0,0 +1,233 @@
import React, { useState, useEffect } from "react"
import { graphql } from "gatsby"
import { Flex, Box, Text } from "rebass"
import { AnchorLink } from "gatsby-plugin-anchor-links"
import Highlight from "react-highlight.js"
import { Helmet } from "react-helmet"
import { InView } from "react-intersection-observer"
import Layout from "../../components/layout"
import "highlight.js/styles/a11y-dark.css"
const convertToKebabCase = string => {
return string.replace(/\s+/g, "-").toLowerCase()
}
const JsonBox = ({ content }) => {
const json = JSON.parse(content)
return (
<Flex
sx={{
border: "1px solid #454545",
backgroundColor: "dark",
borderRadius: "5px",
marginLeft: "auto",
marginRight: "auto",
width: "100%",
maxHeight: "calc(90vh - 20px)",
overflowY: "scroll",
alignSelf: "flex-start",
fontSize: "1",
position: "sticky",
top: "20px",
bottom: "20px",
}}
flexDirection="column"
as="pre"
>
<Text fontSize={0} fontFamily="body" py={1} px={2} color="lightest">
RESPONSE
</Text>
<Box w={1} flex="1" sx={{ overflowY: "scroll" }}>
<Highlight language="json">
{JSON.stringify(json, undefined, 2)}
</Highlight>
</Box>
</Flex>
)
}
const ParamSection = ({ routeParam, param }) => {
return (
<Box
py={2}
sx={{
borderTop: "hairline",
}}
>
<Flex fontSize="1" alignItems="center" pb={2} fontFamily="monospace">
<Box mr={2}>{param.name}</Box>
{(param.required || routeParam) && (
<Text variant="labels.required">required</Text>
)}
</Flex>
<Text fontSize="1">{param.description}</Text>
</Box>
)
}
const RouteSection = ({ path, method }) => {
return (
<Box py={2}>
<Flex fontFamily="monospace">
<Text mr={2} variant={`labels.${method}`}>
{method}
</Text>
<Text>{path}</Text>
</Flex>
</Box>
)
}
const SideBar = ({ endpoints }) => {
return (
<Flex
p={3}
sx={{
position: "sticky",
top: 0,
height: "100vh",
overflowY: "scroll",
backgroundColor: "light",
minWidth: "250px",
}}
flexDirection="column"
>
{endpoints.edges.map(({ node }) => {
return (
<Box py={3}>
<Text fontSize={1} mb={2} sx={{ textTransform: "uppercase" }}>
{node.title}
</Text>
{node.endpoints.map(e => (
<AnchorLink to={`#${convertToKebabCase(e.title)}`}>
<Text mb={2} fontSize={0}>
{e.title}
</Text>
</AnchorLink>
))}
</Box>
)
})}
</Flex>
)
}
const StoreApi = ({ data }) => {
let { endpoints } = data
return (
<Layout>
<Helmet>
<title>Store API | Medusa Commerce</title>
</Helmet>
<Flex>
<SideBar endpoints={endpoints} />
<Flex p={3} flexDirection="column">
{endpoints.edges.map(({ node }) => (
<Flex
id={convertToKebabCase(node.title)}
sx={{
minHeight: "90vh",
position: "relative",
}}
>
<Flex flexDirection="column" flex="60%" maxWidth={756}>
<Flex
sx={{
borderBottom: "hairline",
}}
py={5}
flexDirection="column"
borderBottom="hairline"
>
<Text mb={3} fontSize={4}>
{node.title}
</Text>
<Text fontFamily="monospace" my={2}>
{node.route}
</Text>
<Text mb={4}>{node.description}</Text>
{node.endpoints.map(endpoint => (
<Flex
id={convertToKebabCase(endpoint.title)}
sx={{
borderTop: "hairline",
}}
py={4}
flexDirection="column"
>
<Text mb={3} fontSize={3}>
{endpoint.title}
</Text>
<RouteSection
method={endpoint.method}
path={endpoint.path}
/>
<Text>{endpoint.description}</Text>
{((endpoint.params && endpoint.params.length) ||
(endpoint.body && endpoint.body.length)) && (
<Box
sx={{
borderBottom: "hairline",
}}
my="2"
>
<Text my={2}>Parameters</Text>
{(endpoint.params || []).map(p => (
<ParamSection routeParam param={p} />
))}
{(endpoint.body || []).map(p => (
<ParamSection param={p} />
))}
</Box>
)}
</Flex>
))}
</Flex>
</Flex>
<Flex py={5} px={3} minWidth={450} flex="1">
<JsonBox name={node.title} content={node.response} />
</Flex>
</Flex>
))}
</Flex>
</Flex>
</Layout>
)
}
export default StoreApi
export const pageQuery = graphql`
{
endpoints: allEndpointsYaml(filter: { domain: { eq: "store" } }) {
edges {
node {
id
title
route
response
description
endpoints {
title
path
params {
description
name
type
}
method
description
body {
type
required
name
description
}
}
}
}
}
}
`
www/src/pages/index.js
+5
View File
@@ -0,0 +1,5 @@
import React from "react"
export default function Home() {
return <div>Hello world!</div>
}
www/src/theme/breakpoints.js
+1
View File
@@ -0,0 +1 @@
export default ["40em", "52em", "64em"]
www/src/theme/buttons.js
+168
View File
@@ -0,0 +1,168 @@
export const buttons = {
pillActive: {
cursor: "pointer",
backgroundColor: "transparent",
color: "dark",
height: "40px",
outline: 0,
borderRadius: "3px",
paddingTop: "3px",
paddingBottom: "3px",
boxShadow: "pillActive",
"&:focus": {
boxShadow: "pillActiveFocus",
},
},
pill: {
cursor: "pointer",
backgroundColor: "transparent",
color: "dark",
height: "40px",
outline: 0,
borderRadius: "3px",
paddingTop: "3px",
paddingBottom: "3px",
boxShadow: "pill",
"&:focus": {
boxShadow: "buttonBoxShadowActive",
},
},
danger: {
minHeight: "28px",
fontWeight: "500",
color: "light",
fontSize: "14px",
lineHeight: "14px",
backgroundColor: "danger",
border: 0,
outline: 0,
paddingTop: "3px",
paddingBottom: "3px",
cursor: "pointer",
borderRadius: "3px",
boxShadow: "buttonBoxShadow",
"&:hover": {
color: "darkest",
boxShadow: "buttonBoxShadowHover",
},
"&:active": {
boxShadow: "buttonBoxShadowActive",
},
},
primary: {
minHeight: "24px",
height: "28px",
fontWeight: "500",
color: "dark",
fontSize: "14px",
lineHeight: "14px",
backgroundColor: "lightest",
border: 0,
outline: 0,
paddingTop: "3px",
paddingBottom: "3px",
cursor: "pointer",
borderRadius: "3px",
boxShadow: "buttonBoxShadow",
"&:hover": {
color: "darkest",
boxShadow: "buttonBoxShadowHover",
},
"&:active": {
boxShadow: "buttonBoxShadowActive",
},
"&:disabled": {
cursor: "not-allowed",
pointerEvents: "none",
opacity: 0.5,
},
},
green: {
height: "30px",
color: "lightest",
backgroundColor: "#53725D",
border: 0,
outline: 0,
paddingTop: "3px",
paddingBottom: "3px",
cursor: "pointer",
borderRadius: "3px",
"&:focus": {
boxShadow: "buttonBoxShadowFocus",
},
"&:active": {
boxShadow: "buttonBoxShadowActive",
},
},
secondary: {
height: "30px",
color: "light",
backgroundColor: "dark",
border: 0,
outline: 0,
paddingTop: "3px",
paddingBottom: "3px",
cursor: "pointer",
borderRadius: "3px",
"&:focus": {
boxShadow: "buttonBoxShadowFocus",
},
"&:active": {
boxShadow: "buttonBoxShadowActive",
},
},
cta: {
height: "30px",
color: "white",
backgroundColor: "medusaGreen",
fontWeight: 600,
fontSize: "14px",
lineHeight: "14px",
border: 0,
outline: 0,
paddingTop: "3px",
paddingBottom: "3px",
cursor: "pointer",
borderRadius: "3px",
boxShadow: "ctaBoxShadow",
"&:hover": {
boxShadow: "ctaBoxShadowHover",
},
"&:disabled": {
cursor: "not-allowed",
pointerEvents: "none",
opacity: 0.5,
},
},
delete: {
height: "30px",
color: "white",
backgroundColor: "#b02b13",
fontWeight: 600,
fontSize: "14px",
lineHeight: "14px",
border: 0,
outline: 0,
paddingTop: "3px",
paddingBottom: "3px",
cursor: "pointer",
borderRadius: "3px",
boxShadow: "ctaBoxShadow",
"&:hover": {
boxShadow: "ctaBoxShadowHover",
},
},
}
export default buttons
www/src/theme/colors.js
+11
View File
@@ -0,0 +1,11 @@
export default {
primary: "#B27979",
secondary: "#79B28A",
medusaGreen: "#3ecf8e",
lightest: "#fefefe",
light: "#f0f0f0",
gray: "#a3acb9",
dark: "#454545",
darkest: "#212121",
placeholder: "#a3acb9",
}
www/src/theme/forms.js
+92
View File
@@ -0,0 +1,92 @@
export default {
invalidInput: {
color: "dark",
backgroundColor: "lightest",
border: 0,
outline: 0,
cursor: "text",
transition: "all 0.2s ease",
borderRadius: "3px",
boxShadow: "invalidBoxShadow",
"&.tag__focus": {
boxShadow: "inputBoxShadowHover",
},
"&:focus": {
boxShadow: "inputBoxShadowHover",
},
"&::placeholder": {
color: "danger",
},
},
input: {
color: "dark",
backgroundColor: "lightest",
border: 0,
outline: 0,
cursor: "text",
transition: "all 0.2s ease",
borderRadius: "3px",
boxShadow: "inputBoxShadow",
"&.tag__focus": {
boxShadow: "inputBoxShadowHover",
},
"&:focus": {
boxShadow: "inputBoxShadowHover",
},
"&::placeholder": {
color: "placeholder",
},
},
textarea: {
color: "dark",
backgroundColor: "lightest",
border: 0,
outline: 0,
cursor: "text",
transition: "all 0.2s ease",
borderRadius: "3px",
boxShadow: "inputBoxShadow",
"&.tag__focus": {
boxShadow: "inputBoxShadowHover",
},
"&:focus": {
boxShadow: "inputBoxShadowHover",
},
"&::placeholder": {
color: "placeholder",
},
},
dropdown: {
color: "dark",
backgroundColor: "lightest",
border: 0,
outline: 0,
paddingTop: "3px",
paddingBottom: "3px",
cursor: "pointer",
borderRadius: "3px",
boxShadow: "buttonPrimaryBoxShadow",
"&:hover": {
color: "darkest",
boxShadow: "buttonPrimaryBoxShadowHover",
},
"&:active": {
boxShadow: "buttonPrimaryBoxShadowActive",
},
},
}
www/src/theme/index.js
+85
View File
@@ -0,0 +1,85 @@
import React from "react"
import { ThemeProvider as Provider } from "emotion-theming"
import breakpoints from "./breakpoints"
import buttons from "./buttons"
import spacing from "./spacing"
import shadows from "./shadows"
import forms from "./forms"
import labels from "./labels"
export const theme = {
labels,
colors: {
primary: "#53725D",
secondary: "#79B28A",
medusaGreen: "#53725D",
danger: "#FF7675",
muted: "#E3E8EE",
lightest: "#fefefe",
light: "#f0f0f0",
dark: "#454545",
darkest: "#212121",
placeholder: "#a3acb9",
},
borders: {
hairline: "1px solid #E3E8EE",
},
fontSizes: [12, 14, 16, 18, 22],
fonts: {
body:
"-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Ubuntu, sans-serif",
heading: "system-ui, sans-serif",
monospace: "Menlo, monospace",
},
breakpoints,
spacing,
mediaQueries: {
small: `@media screen and (min-width: ${breakpoints[0]})`,
medium: `@media screen and (min-width: ${breakpoints[1]})`,
large: `@media screen and (min-width: ${breakpoints[2]})`,
},
grid: {
selectedShadow: `
inset rgba(0, 0, 0, 0) 0px 0px 0px 0px,
inset rgba(206, 208, 190, 0.56) 0px 0px 0px 2px,
inset rgba(0, 0, 0, 0) 0px 0px 0px 0px,
inset rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
inset rgba(0, 0, 0, 0) 0px 0px 0px 0px,
inset rgba(0, 0, 0, 0) 0px 0px 0px 0px,
inset rgba(0, 0, 0, 0) 0px 0px 0px 0px;
`,
header: {
padding: 2,
fontSize: 1,
fontFamily: "body",
},
data: {
padding: 2,
fontSize: 1,
fontFamily: "body",
},
},
shadows,
variants: {
loginCard: {
boxShadow: "buttonBoxShadow",
borderRadius: "3px",
},
badge: {
fontSize: "0",
color: "dark",
backgroundColor: "lightest",
boxShadow: "buttonBoxShadow",
borderRadius: "3px",
minWidth: "unset",
px: "1",
},
},
forms,
buttons,
}
export const ThemeProvider = ({ children }) => (
<Provider theme={theme}>{children}</Provider>
)
www/src/theme/labels.js
+17
View File
@@ -0,0 +1,17 @@
export const labels = {
required: {
color: "danger",
fontSize: 0,
},
GET: {
color: "green",
},
POST: {
color: "blue",
},
DELETE: {
color: "danger",
},
}
export default labels
www/src/theme/shadows.js
+111
View File
@@ -0,0 +1,111 @@
export default {
pill: `
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(60, 66, 87, 0.08) 0px 0px 5px 0px;
`,
pillActive: `
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(83, 114, 93, 0.8) 0px 0px 0px 2px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px
`,
pillActiveFocus: `
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(206, 208, 190, 0.36) 0px 0px 0px 4px,
rgba(83, 114, 93, 0.8) 0px 0px 0px 2px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px
`,
invalidBoxShadow: `
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(255, 66, 87, 0.8) 0px 0px 0px 1px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px;
`,
inputBoxShadow: `
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px;
`,
inputBoxShadowHover: `
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(206, 208, 190, 0.36) 0px 0px 0px 4px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px;
`,
buttonBoxShadow: `
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
`,
buttonBoxShadowHover: `
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(60, 66, 87, 0.08) 0px 3px 9px 0px,
rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
`,
buttonBoxShadowActive: `
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(206, 208, 190, 0.36) 0px 0px 0px 4px,
rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(60, 66, 87, 0.08) 0px 3px 9px 0px;
rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
`,
tagBoxShadow: `
rgba(0,0,0,0) 0px 0px 0px 0px,
rgb(190, 191, 208) 0px 0px 0px 2px,
rgba(0, 0, 0, 0) 0px 0px 0px 0px,
rgba(60, 62, 87, 0.22) 0px 0px 0px 2px,
rgba(0,0,0,0) 0px 0px 0px 0px,
rgba(0,0,0,0) 0px 0px 0px 0px,
rgba(0,0,0,0) 0px 0px 0px 0px;
`,
ctaBoxShadow: `
rgba(0,0,0,0) 0px 0px 0px 0px,
rgba(0,0,0,0) 0px 0px 0px 0px,
rgba(0,0,0,0.12) 0px 1px 1px 0px,
rgba(62, 207, 142, 0) 0px 0px 0px 1px,
rgba(0,0,0,0) 0px 0px 0px 0px,
rgba(0,0,0,0) 0px 0px 0px 0px,
rgba(60,66,87,0.08) 0px 2px 5px 0px;
`,
ctaBoxShadowHover: `
rgba(0,0,0,0) 0px 0px 0px 0px,
rgba(0,0,0,0) 0px 0px 0px 0px,
rgba(0,0,0,0.12) 0px 1px 1px 0px,
rgba(62, 207, 142, 0) 0px 0px 0px 1px,
rgba(0,0,0,0) 0px 0px 0px 0px,
rgba(62, 207, 142, 0.25) 0px 3px 9px 0px;
rgba(62, 207, 142, 0.25) 0px 2px 5px 0px;
`,
}
www/src/theme/spacing.js
+1
View File
@@ -0,0 +1 @@
export default [0, 4, 8, 16, 32, 64]