@ossy/connected-components 0.1.4 → 0.1.5

package/src/stories/page.css

@@ -1,68 +0,0 @@
-.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

@@ -1,132 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

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

package/src/theme-provider/ThemeProvider.jsx

@@ -1,9 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

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

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

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

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

@@ -1,54 +0,0 @@
-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
-}