@ossy/connected-components 0.0.3-alpha → 0.0.9

package/src/stories/page.css

@@ -0,0 +1,68 @@
+.storybook-page {
+  margin: 0 auto;
+  padding: 48px 20px;
+  max-width: 600px;
+  color: #333;
+  font-size: 14px;
+  line-height: 24px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-page h2 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 0 0 4px;
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1;
+}
+
+.storybook-page p {
+  margin: 1em 0;
+}
+
+.storybook-page a {
+  color: inherit;
+}
+
+.storybook-page ul {
+  margin: 1em 0;
+  padding-left: 30px;
+}
+
+.storybook-page li {
+  margin-bottom: 8px;
+}
+
+.storybook-page .tip {
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 10px;
+  border-radius: 1em;
+  background: #e7fdd8;
+  padding: 4px 12px;
+  color: #357a14;
+  font-weight: 700;
+  font-size: 11px;
+  line-height: 12px;
+}
+
+.storybook-page .tip-wrapper {
+  margin-top: 40px;
+  margin-bottom: 40px;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.storybook-page .tip-wrapper svg {
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 3px;
+  margin-right: 4px;
+  width: 12px;
+  height: 12px;
+}
+
+.storybook-page .tip-wrapper svg path {
+  fill: #1ea7fd;
+}

package/src/theme-editor/ThemeEditor.jsx

@@ -0,0 +1,132 @@
+import { useState, useMemo, useCallback, useEffect } from 'react'
+import { useResource } from '@ossy/sdk-react'
+import { Overlay, Button, useTheme, View, Text } from '@ossy/design-system'
+
+const overlayStyles = {
+  background: 'transparent',
+  display: 'content',
+  pointerEvents: 'none'
+}
+
+const blobStyles = {
+  boxShadow: '2px 2px 5px hsla(0, 0%, 0%, .2)',
+  borderRadius: '999px',
+  position: 'absolute',
+  right: 'var(--space-m)',
+  bottom: 'var(--space-m)',
+  cursor: 'pointer',
+  transition: 'transform .5s',
+  pointerEvents: 'auto',
+  padding: 'var(--space-m)'
+}
+
+const editorContainerStyles = {
+  position: 'absolute',
+  right: '0',
+  top: '0',
+  height: '100%',
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'flex-end',
+  alignItems: 'stretch',
+  padding: '8px 32px'
+}
+
+const editorStyles = {
+  width: '100%',
+  maxWidth: '350px',
+  height: '100%',
+  boxShadow: '2px 2px 5px hsla(0, 0%, 0%, .2)',
+  padding: '16px 16px 76px 16px',
+  overflowX: 'none',
+  overflowY: 'auto',
+  pointerEvents: 'auto'
+}
+
+const ThemeSwitcher = () => {
+  const { activeTheme, setTheme, themes } = useTheme()
+  return (
+    <View gap="s">
+      <Text>Theme</Text>
+      <View layout="row-wrap" gap="s">
+        {
+          themes.map(themeName => <Button variant={themeName === activeTheme ? 'tag-active' : 'tag'} onClick={() => setTheme(themeName)}>{themeName}</Button>)
+        }
+      </View>
+    </View>
+  )
+}
+
+export const ThemeEditor = () => {
+  const { updateResourceContent } = useResource('PCX53TaGviq4_8KvK-VOp')
+  const [isEditorOpen, setIsEditorOpen] = useState(false)
+  const [viewCount, setViewCount] = useState(0)
+  // const [theme, temporarilyUpdateTheme] = useTheme()
+  const theme = {}
+  const temporarilyUpdateTheme = () => {}
+
+  const toggleStyles = useMemo(() => !isEditorOpen
+    ? blobStyles
+    : { ...blobStyles, transform: 'rotate(-45deg)' }, [isEditorOpen])
+
+  const onToggle = useCallback(() => {
+    setIsEditorOpen(!isEditorOpen)
+  }, [isEditorOpen, setIsEditorOpen])
+
+  const onThemeChange = (event) => {
+
+    const name = event.target.dataset.name
+    const updatedValue = event.target.value
+
+    if (!name) return
+    if (!updatedValue) return
+
+    temporarilyUpdateTheme(theme => ({
+      ...theme,
+      [name]: updatedValue
+    }))
+
+  }
+
+  const onSaveTheme = event => {
+    event.preventDefault()
+    updateResourceContent(theme)
+  }
+
+  useEffect(() => {
+    if (!isEditorOpen) return
+    const views = document.querySelectorAll('[data-view]')
+    views.forEach(view => view.style.border = '1px solid red')
+    setViewCount(views.length)
+  }, [isEditorOpen])
+
+  return (
+    <Overlay isVisible={true} style={overlayStyles}>
+
+      {
+        isEditorOpen && (
+          <div style={editorContainerStyles}>
+            <View surface="primary" roundness="m" gap="m" style={editorStyles}>
+              <View as="form" gap="s" onSubmit={onSaveTheme} onChange={onThemeChange}>
+                {Object.entries(theme).map(([name, value]) => (
+                  <div style={{ marginBottom: '16px' }}>
+                    <label style={{ display: 'block', fontFamily: 'sans-serif', marginBottom: '4px', fontWeight: 'bold' }}>{name}</label>
+                    <input value={value} data-name={name} style={{ width: '100%', padding: '4px' }}/>
+                  </div>
+                ))}
+                <Button type="submit" variant="cta">
+                  Save
+                </Button>
+              </View>
+              <ThemeSwitcher/>
+              <Text>Views: {viewCount}</Text>
+            </View>
+          </div>
+        )
+      }
+
+      <Button variant="cta" prefix="math-plus" style={toggleStyles} onClick={onToggle} />
+
+    </Overlay>
+  )
+}

package/src/theme-editor/ThemeEditor.stories.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { ThemeEditor } from './ThemeEditor.jsx'
+
+export default {
+  title: 'Connected components/ThemeEditor',
+  component: ThemeEditor,
+  parameters: {
+   layout: 'fullscreen',
+   workspaceId: '36zDqF0TKZZ5KkJdyg7NH'
+ },
+}
+
+const Story = props => <ThemeEditor {...props}/>
+
+export const Default = Story.bind({})
+Default.args = { }

package/src/theme-editor/index.js

@@ -0,0 +1 @@
+export * from './ThemeEditor.jsx'

package/src/theme-provider/ThemeProvider.jsx

@@ -0,0 +1,9 @@
+import { useResource, AsyncStatus } from '@ossy/sdk-react'
+import { Theme } from '@ossy/design-system'
+
+export const ThemeProvider = props => {
+  const { status, resource: theme } = useResource('PCX53TaGviq4_8KvK-VOp')
+  return status === AsyncStatus.Success
+    ? <Theme theme={theme.data} {...props}/>
+    : <></>
+}

package/src/theme-provider/ThemeProvider.stories.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { ThemeProvider } from './ThemeProvider.jsx'
+
+export default {
+  title: 'Connected components/ThemeProvider',
+  component: ThemeProvider,
+  parameters: {
+   layout: 'fullscreen',
+   workspaceId: '36zDqF0TKZZ5KkJdyg7NH'
+ },
+}
+
+const Story = props => <ThemeProvider {...props}/>
+
+export const Default = Story.bind({})
+Default.args = { }

package/src/theme-provider/index.js

@@ -0,0 +1 @@
+export * from './ThemeProvider.jsx'

package/src/use-active-page-location/index.js

@@ -0,0 +1 @@
+export * from './useActivePageLocation.js'

package/src/use-active-page-location/useActivePageLocation.js

@@ -0,0 +1,54 @@
+import { useAppSettings } from '../app/AppSettings.jsx'
+const appendSlash = string => string[string.length - 1] === '/'
+  ? string : `${string}/`
+
+const prependSlash = string => string[0] === '/'
+  ? string : `/${string}`
+
+const padWithSlash = string => appendSlash(prependSlash(string))
+
+const Predicates = {
+  byLength: desiredLength => route => {
+    const routeParts = route.split('/').filter(x => !!x)
+    return routeParts.length === desiredLength
+  },
+  byParamPlaceHolders: activePathname => route => {
+    const routeParts = route.split('/').filter(x => !!x).reduce(
+      (parts, part) => part.startsWith(':') ? [...parts, '.+?'] : [...parts, part],
+      []
+    ).join('/')
+
+    const regex = new RegExp(`^${padWithSlash(routeParts)}$`)
+    const passes = regex.test(activePathname)
+    return passes
+  }
+}
+
+export const useActivePageLocation = (path) => {
+  console.log('useActivePageLocation path', path)
+  const { routes: pages } = useAppSettings()
+
+  if (!path) return 
+
+  // TODO: this needs tests because I don't think it works right
+  const activePathname = path === '' ? '/' : padWithSlash(path)
+  const registeredPageRoutes = pages.map(page => padWithSlash(page.path))
+  const exactRouteMatch = registeredPageRoutes.find(route => route === activePathname)
+  let activePageLocation
+
+  if (!!exactRouteMatch) {
+    activePageLocation = exactRouteMatch
+  } else {
+    const activePathnameParts = activePathname.split('/').filter(x => !!x)
+    const dynamicRouteMatch = registeredPageRoutes.find(route => (
+      Predicates.byLength(activePathnameParts.length)(route) && Predicates.byParamPlaceHolders(activePathname)(route)
+    ))
+
+    activePageLocation = dynamicRouteMatch
+  }
+
+  console.log('useActivePageLocation exactRouteMatch', exactRouteMatch)
+  console.log('useActivePageLocation activePageLocation', activePageLocation)
+
+  return activePageLocation
+}