@clement_lores/admin-design-system 1.0.0

package/src/organisms/navigation/navigation.doc.md

@@ -0,0 +1,126 @@
+<img src="components/navigation.png" />
+
+Component rendering entire navigation list
+
+### Usage
+
+```javascript
+import { Navigation } from '@adminjs/design-system'
+
+const navigationElements = [{
+  label: 'Dashboard',
+  icon: 'Dashboard',
+  isSelected: true,
+  href: '/',
+  onClick: () => {},
+  id: 'dashboard',
+}]
+
+return (
+  <Navigation
+    label: "Pages",
+    elements: navigationElements,
+  />
+)
+```
+
+### Prop types
+
+By default all the data are passed via {@link CurrentUserNavProps} - check them out below.
+
+
+### Example
+
+#### Full-featured example with all the props
+
+```reactComponent
+const MyComponent = () => {
+  const label = 'Navigation'
+
+  const [postgresOpen, setPostgresOpen] = React.useState(false)
+  const [mongooseOpen, setMongooseOpen] = React.useState(false)
+  
+  const handleClick = (event) => {
+    event.preventDefault()
+    console.log(event)
+  }
+  
+  const navigationElements = [{
+    label: 'Dashboard',
+    icon: 'Dashboard',
+    isSelected: true,
+    href: '/',
+    onClick: handleClick,
+    id: 'dashboard',
+  }, {
+    label: 'Postgres with long name and spaces',
+    icon: 'Sql',
+    onClick: (event) => {
+      event.preventDefault()
+      setPostgresOpen(!postgresOpen)
+    },
+    isOpen: postgresOpen,
+    elements: [{
+      label: 'Users',
+      href: '/resources/Users/list',
+      onClick: handleClick,
+      id: 'users',
+    }, {
+      label: 'Posts',
+      href: '/resources/Posts/list',
+      onClick: handleClick,
+      id: 'posts',
+    }, {
+      label: 'Messages',
+      href: '/resources/Messages/list',
+      onClick: handleClick,
+      id: 'messages',
+    }, {
+      label: 'Calendar',
+      href: '/resources/Calendar/list',
+      onClick: handleClick,
+      id: 'calendar',
+    }],
+  }, {
+    label: 'MongooseWithLongNameAndWithoutSpaces',
+    icon: 'Datastore',
+    isOpen: mongooseOpen,
+    onClick: (event) => {
+      event.preventDefault()
+      setMongooseOpen(!mongooseOpen)
+    },
+    elements: [{
+      label: 'Car',
+      href: '/resources/Cars/list',
+      onClick: handleClick,
+      id: 'car',
+    }, {
+      label: 'Dealers',
+      href: '/resources/Dealers/list',
+      onClick: handleClick,
+      id: 'dealers',
+    }, {
+      label: 'Owners',
+      href: '/resources/Owners/list',
+      onClick: handleClick,
+      id: 'owners',
+    }, {
+      label: 'Orders',
+      href: '/resources/Orders/list',
+      onClick: handleClick,
+      id: 'orders',
+    }],
+  }]
+
+  return (
+    <Box variant="grey" height="500px">
+      <Label>Navigation example</Label>
+      <Box width="sidebarWidth" border="bg" bg="white">
+        <Navigation elements={navigationElements} label={label} />
+      </Box>
+    </Box>
+  )
+}
+
+return <MyComponent />
+```

package/src/organisms/navigation/navigation.stories.tsx

@@ -0,0 +1,124 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React, { useState } from 'react'
+
+import { Box, Label } from '../../index.js'
+import { Navigation } from './index.js'
+import { NavigationProps } from './navigation-props.js'
+
+export const Default: StoryObj<NavigationProps & { onClick: (e) => void }> = {
+  render: ({ onClick, label }) => {
+    const [postgresOpen, setPostgresOpen] = useState(false)
+    const [mongooseOpen, setMongooseOpen] = useState(false)
+
+    const handleClick = (event) => {
+      event.preventDefault()
+      onClick(event)
+    }
+
+    const props: NavigationProps = {
+      label: 'Navigation',
+      elements: [
+        {
+          label: 'Dashboard',
+          icon: 'Database',
+          isSelected: true,
+          href: '/',
+          onClick: handleClick,
+          id: 'dashboard',
+        },
+        {
+          label: 'Postgres with long name and spaces',
+          icon: 'Database',
+          onClick: (event) => {
+            event.preventDefault()
+            setPostgresOpen(!postgresOpen)
+          },
+          isOpen: postgresOpen,
+          elements: [
+            {
+              label: 'Users',
+              href: '/resources/Users/list',
+              onClick: handleClick,
+              id: 'users',
+            },
+            {
+              label: 'Posts',
+              href: '/resources/Posts/list',
+              onClick: handleClick,
+              id: 'posts',
+            },
+            {
+              label: 'Messages',
+              href: '/resources/Messages/list',
+              onClick: handleClick,
+              id: 'messages',
+            },
+            {
+              label: 'Calendar',
+              href: '/resources/Calendar/list',
+              onClick: handleClick,
+              id: 'calendar',
+            },
+          ],
+        },
+        {
+          label: 'MongooseWithLongNameAndWithoutSpaces',
+          icon: 'Database',
+          isOpen: mongooseOpen,
+          onClick: (event) => {
+            event.preventDefault()
+            setMongooseOpen(!mongooseOpen)
+          },
+          elements: [
+            {
+              label: 'Car',
+              href: '/resources/Cars/list',
+              onClick: handleClick,
+              id: 'car',
+            },
+            {
+              label: 'Dealers',
+              href: '/resources/Dealers/list',
+              onClick: handleClick,
+              id: 'dealers',
+            },
+            {
+              label: 'Owners',
+              href: '/resources/Owners/list',
+              onClick: handleClick,
+              id: 'owners',
+            },
+            {
+              label: 'Orders',
+              href: '/resources/Orders/list',
+              onClick: handleClick,
+              id: 'orders',
+            },
+          ],
+        },
+      ],
+    }
+
+    return (
+      <Box variant="grey">
+        <Label>Navigation example</Label>
+        <Box width="sidebarWidth" border="bg" bg="white">
+          <Navigation {...props} label={label} />
+        </Box>
+      </Box>
+    )
+  },
+}
+
+const meta: Meta<typeof Navigation> = {
+  title: 'DesignSystem/Organisms/Navigation',
+  component: Navigation,
+  args: {
+    label: 'Navigation',
+  },
+  argTypes: {
+    label: { control: { type: 'text' } },
+  },
+}
+
+export default meta

package/src/organisms/navigation/navigation.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { NavigationProps } from './navigation-props.js'
+import { StyledNavigation } from './navigation-styled.jsx'
+import { NavigationElementWrapper } from './navigation-element-wrapper.jsx'
+import { Label } from '../../atoms/label/index.js'
+
+/**
+ * @load ./navigation.doc.md
+ * @component
+ * @subcategory Organisms
+ * @hideconstructor
+ * @see NavigationProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-organisms-navigation--default Storybook}
+ * @new In version 3.3
+ * @section design-system
+ */
+export const Navigation: React.FC<NavigationProps> = (props) => {
+  const { label, elements } = props
+  return (
+    <StyledNavigation px="xl" py="lg">
+      {!!label?.length && <Label pl="lg" mb="md" uppercase>{label}</Label>}
+      <ul>
+        {elements.map((element, id) => (
+          <NavigationElementWrapper key={[id, element.href].join('-')} {...element} />
+        ))}
+      </ul>
+    </StyledNavigation>
+  )
+}
+
+Navigation.displayName = 'Navigation'
+
+export default Navigation

package/src/templates/blog.stories.tsx

@@ -0,0 +1,69 @@
+import { Meta, StoryFn } from '@storybook/react'
+import React, { useState } from 'react'
+
+import {
+  Box,
+  Button,
+  Drawer,
+  DrawerContent,
+  DropZone,
+  Header,
+  Icon,
+  Input,
+  Label,
+  RichTextEditor,
+} from '../index.js'
+
+export const Default: StoryFn = () => {
+  const [isDrawerVisible, setIsDrawerVisible] = useState(false)
+
+  return (
+    <Box variant="grey" width={1}>
+      {isDrawerVisible && (
+        <Drawer>
+          <DrawerContent>
+            <Header.H3>
+              <Button size="icon" rounded mr="lg" onClick={() => setIsDrawerVisible(false)}>
+                <Icon icon="ChevronRight" />
+              </Button>
+              Article settings
+            </Header.H3>
+            <Label>Drop splash screen</Label>
+            <DropZone />
+          </DrawerContent>
+        </Drawer>
+      )}
+      <Box variant="white">
+        <Box flex flexDirection="row-reverse" mb="xl">
+          <Button size="icon" onClick={() => setIsDrawerVisible(true)}>
+            <Icon icon="Settings" />
+          </Button>
+          <Button mr="default" variant="primary">
+            <Icon icon="Send" />
+            Publish
+          </Button>
+          <Button mr="default">
+            <Icon icon="Save" />
+            Save
+          </Button>
+        </Box>
+        <Box mb="xxl">
+          <Input variant="xxl" borderless width={1} placeholder="My amazing new article" />
+        </Box>
+
+        <RichTextEditor
+          value=""
+          onChange={() => {
+            /* noop */
+          }}
+        />
+      </Box>
+    </Box>
+  )
+}
+
+const meta: Meta = {
+  title: 'DesignSystem/Templates/Blog',
+}
+
+export default meta

package/src/theme.doc.md

@@ -0,0 +1,111 @@
+An entire AdminJS interface is built with 2 main packages:
+
+- [styled-components]{@link https://styled-components.com/} backed by
+- [styled-system]{@link https://styled-system.com/}. 
+
+The core of the style information is the {@link Theme}. It is base on the
+[Theme Specification]{@link https://styled-system.com/theme-specification/} and
+it is used by almost all the components provided by AdminJS.
+
+The structure of the Theme is as follows:
+
+```javascript
+const theme = {
+  breakpoints,
+  colors,
+  fontSizes,
+  fontWeights,
+  lineHeights,
+  shadows,
+  sizes,
+  space,
+}
+```
+
+Each element controls a different kind of props passed to the Design System Components.
+
+
+
+So let's say you would like to create a box with the same background as our
+`primary100` color. This is one way of achieving that:
+
+```javascript
+import styled from 'styled-components'
+import { Box } from '@adminjs/design-system'
+
+const MyBlueBox = styled(Box)`
+  background: ${({ theme }) => theme.colors.primary100};
+  // other css styles you want to override.
+`
+```
+
+> There is a helper function {@link themeGet} which can be used to fetch the data from Theme.
+
+But, since AdminJS uses [styled-system]{@link https://styled-system.com/}, you also can achieve
+a similar result by passing a `bg` Prop to the [Box Component]{@link Box},
+everything because Box supports all the {@link ColorProps}.
+
+```javascript
+import { Box } from '@adminjs/design-system'
+
+const ComponentWhereIWantToUseBlueBox = () => (
+  <Box bg="primary100">
+  ...
+  </Box>
+)
+```
+
+The last way of accessing the theme is to use withTheme HOC provided by
+[styled-components]{@link https://styled-components.com/}
+
+```javascript
+import { withTheme } from 'styled-components'
+
+const MyComponent = (props) => {
+  const { theme } = props
+  // theme.colors.primary100
+}
+
+export default withTheme(MyComponent)
+```
+
+{@link ColorProps} is only one of the extensions we provided. Take a look at the documentation
+below to see all possible options,
+
+
+### Responsive styles
+
+You can pass an array instead of value to props to define how behaves in in different breakpoints.
+
+so passing `[1, 1/2, 0.4]` as `width` will width for a following breakpoints:
+
+- <= 577px: 100%
+- 578px-769px: 50%
+- \>= 769px: 40%
+
+Combined with {@Box} and {@FlexProps} creates a tool to build entire layouts.
+
+Take a look at this example:
+
+```javascript
+import { Box } from '@adminjs/design-system'
+
+const ComponentWhereIWantToUseResponsiveStyle = () => (
+  <Box flex flexDirection="column">
+    <Box width={[1, 1/2, 1/3]}>Sidebar</Box>
+    <Box width={[1, 1/2, 2/3]}>Content</Box>
+  </Box>
+)
+```
+
+Above we defined that the Sidebar box should have 100% width until the viewport reaches the first
+breakpoint, then 50% (until the next breakpoint) and then 1/3rd of the page for the remaining 2
+breakpoints.
+
+You can read more about responsive features on `styled-system` 
+{@link https://styled-system.com/responsive-styles}
+
+<style>
+.shadow-div { display: block; width: 80px; height: 80px;}
+.space-box { display: inline-block; height: 20px; background: #4268F6; vertical-align: middle;}
+</style>