@ossy/connected-components 0.0.1-alpha → 0.0.1

package/package.json

@@ -1,12 +1,19 @@
 {
   "name": "@ossy/connected-components",
-  "repository": "github:ossy-se/ossy",
+  "version": "0.0.1",
+  "repository": "github:ossy-se/packages",
   "description": "Ossy's CMS Connected React component library",
-  "version": "0.0.1-alpha",
-  "source": "index.js",
-  "main": "index.cjs.js",
-  "module": "index.esm.js",
+  "type": "module",
+  "source": "src/index.js",
+  "main": "build/cjs/index.js",
+  "module": "build/esm/index.js",
   "author": "Ossy <yourfriends@ossy.se> (https://ossy.se)",
+  "scripts": {
+    "build": "rollup -c rollup.config.js",
+    "test": "",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -19,17 +26,46 @@
       "last 1 safari version"
     ]
   },
+  "devDependencies": {
+    "@babel/cli": "^7.21.5",
+    "@babel/core": "^7.14.5",
+    "@babel/eslint-parser": "^7.15.8",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.24.1",
+    "@rollup/plugin-babel": "6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.5",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-terser": "0.4.4",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@types/react": "18.2.79",
+    "babel-loader": "^9.1.3",
+    "prop-types": "^15.8.1",
+    "rollup": "^4.24.3",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss-modules": "^2.1.1",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "storybook": "^8.6.12",
+    "tslib": "^2.6.2"
+  },
   "dependencies": {
-    "glamor": "^2.20.40",
-    "moment": "^2.29.4",
-    "react-ga4": "^2.1.0"
+    "@ossy/themes": "^0.0.1",
+    "moment": "^2.29.4"
   },
   "peerDependencies": {
-    "@ossy/design-system": "^0.0.1",
-    "react": "^18.0.2",
-    "react-dom": "^18.0.2",
-    "react-markdown": "^8.0.7",
-    "react-router-dom": "^6.10.0",
-    "react-syntax-highlighter": "^15.5.0"
+    "@ossy/design-system-extras": "^0.0.1",
+    "@ossy/sdk-react": "^0.0.1",
+    "@ossy/design-system": "^0",
+    "@ossy/router": "^0.0.1",
+    "@ossy/router-react": "^0.0.1",
+    "@ossy/sdk": "^0.0.1",
+    "react": "^19"
   }
 }

package/rollup.config.js

@@ -0,0 +1,35 @@
+import babel from '@rollup/plugin-babel'
+import { nodeResolve as resolveDependencies } from '@rollup/plugin-node-resolve'
+import resolveCommonJsDependencies from '@rollup/plugin-commonjs'
+import removeOwnPeerDependencies from 'rollup-plugin-peer-deps-external'
+import minifyJS from '@rollup/plugin-terser'
+// import typescript from '@rollup/plugin-typescript'
+import preserveDirectives from "rollup-plugin-preserve-directives"
+
+export default [
+  {
+    input: 'src/index.js',
+    output: [
+      {
+        dir: 'build/cjs',
+        format: 'cjs'
+      },
+      {
+        dir: 'build/esm',
+        format: 'esm'
+      }
+    ],
+    plugins: [
+      removeOwnPeerDependencies(),
+      resolveCommonJsDependencies(),
+      resolveDependencies(),
+      babel({
+        exclude: ['**/node_modules/**/*'],
+        presets: ['@babel/preset-react']
+      }),
+      preserveDirectives(),
+      // minifyJS(),
+      // typescript({ tsconfig: "./tsconfig.json" }),
+    ]
+  },
+]

package/src/app/App.jsx

@@ -0,0 +1,29 @@
+import React, { createContext } from 'react'
+import { SDK } from '@ossy/sdk'
+import { WorkspaceProvider } from '@ossy/sdk-react'
+import { Theme } from '@ossy/design-system'
+import { ThemeEditor } from '../theme-editor/ThemeEditor.jsx'
+import { defaultAppSettings } from './AppSettings.jsx'
+import { Router } from '@ossy/router-react'
+
+export const AppContext = createContext(defaultAppSettings())
+
+export const App = (_appSettings) => {
+  const appSettings = { ...defaultAppSettings(), ..._appSettings }
+
+  const sdk = SDK.of({
+    apiUrl: appSettings.apiUrl,
+    workspaceId: appSettings.workspaceId
+  })
+
+  return (
+    <AppContext.Provider value={appSettings}>
+      <Theme theme={appSettings.theme} themes={appSettings.themes}>
+        <WorkspaceProvider sdk={sdk}>
+          <Router {..._appSettings} />
+          { appSettings.devMode && <ThemeEditor />}
+        </WorkspaceProvider>
+      </Theme>
+    </AppContext.Provider>
+  )
+}

package/src/app/App.stories.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { App } from './App.jsx'
+import { Ossy } from '@ossy/themes'
+
+export default {
+  title: 'App',
+  component: App,
+  
+}
+
+const Story = props => <></>
+
+export const Default = Story.bind({})
+Default.args = {
+  workspaceId: '',
+  theme: Ossy,
+  routes: [
+    {
+    path: '/',
+    element: (
+      <>
+        <a href="/test">Click me</a>
+        <a href="test">me me me</a>
+        <a href="localhost">No click me</a>
+        <a href="https://www.google.com" target="_blank">External with target</a>
+        <a href="http://www.google.com">External http link!</a>
+        <a href="https://www.google.com">External https link!</a>
+      </>
+    )
+  },
+  {
+    path: '/test',
+    element: <>test </>
+  }
+  ]
+}

package/src/app/AppSettings.jsx

@@ -0,0 +1,22 @@
+
+import { useContext } from 'react'
+import { AppContext } from './App.jsx'
+
+export const useAppSettings = () => useContext(AppContext)
+
+export function defaultAppSettings() {
+    return {
+      workspaceId: undefined,
+      defaultLanguage: undefined,
+      supportedLanguages: [],
+      theme: undefined,
+      themes: undefined,
+      routes: [],
+      initialEntries: [],
+      initialIndex: 0,
+      router: 'browser',
+      gaId: undefined,
+      apiUrl: undefined,
+      devMode: false
+    }
+  }

package/src/app/index.js

@@ -0,0 +1,3 @@
+export * from './App.jsx'
+// export * from './useAnalytics.jsx'
+export * from './AppSettings.jsx'

package/src/app/useAnalytics.jsx

@@ -0,0 +1,18 @@
+// import { useEffect } from 'react'
+// import Analytics from 'react-ga4'
+// import { useAppSettings } from './AppSettings.jsx'
+
+// function useAnalytics(url) {
+//   const { gaId } = useAppSettings()
+
+//   useEffect(() => {
+//     if (!gaId) return
+//     Analytics.initialize(gaId)
+//   }, [gaId])
+
+//   useEffect(() => {
+//       if (!url) return
+//       Analytics.send({ hitType: 'pageview', page: url, path: url })
+//   }, [url])
+
+// }

package/src/index.js

@@ -0,0 +1,11 @@
+export * from './app/index.js'
+export * from './layout/index.js'
+export * from './ossybot/index.js'
+export * from './page/index.js'
+export * from './page-data-loader/index.js'
+export * from './pages-module/index.js'
+export * from './resume/index.js'
+// export * from './section/index.js'
+export * from './theme-editor/index.js'
+export * from './theme-provider/index.js'
+export * from './use-active-page-location/index.js'

package/src/layout/Layout.jsx

@@ -0,0 +1,25 @@
+import { useMemo, useEffect, useState } from 'react'
+import {
+  useResource,
+  AsyncStatus
+} from '@ossy/sdk-react'
+
+export const Layout = ({
+  layoutId,
+  ...props
+}) => {
+  const { status, resource } = useResource(layoutId)
+
+  const layoutStyles = useMemo(() => !resource.data
+    ? {}
+    : ({
+      display: 'grid',
+      gridTemplateRows: resource.data.rows,
+      gridTemplateColumns: resource.data.columns,
+      gridTemplateAreas: resource.data.areas
+    }), [resource])
+
+  return status === AsyncStatus.Success
+    ? (<div {...props} style={layoutStyles} />)
+    : <></>
+}

package/src/layout/Layout.stories.jsx

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

package/src/layout/index.js

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

package/src/ossybot/Ossybot.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Button } from '@ossy/design-system';
+
+
+// https://twitter.com/jh3yy/status/1762979019446698310
+// button:hover span:after {
+//     animation: flip 0.2s calc(var(--i) * 0.05s);
+//   }
+//   @​keyframes flip {
+//   20% { content: '_'; }
+//   40% { content: var(--c1); }
+//   60% { content: var(--c2); }
+//   }
+
+
+// <button>
+//   <span style="--i: 0; --c1: 'x'; --c2: '$'; --c3: '≈';">C</span>
+//   <span style="--i: 1; --c1: 'ç'; --c2: '&'; --c3: 'π';">l</span>
+//   <!-- Other characters -->
+//   <span class="sr-only">Click Me</span>
+// </button>
+
+export const Ossybot = ({
+    style = {},
+    surface = "cta",
+    icon,
+    ...props
+}) => {
+  return (
+    <>
+      <style href="@ossy/design-system/ossybot" precedence="high">
+        {`
+          @keyframes flip {
+            0% {
+              content: '_';
+            }
+            60% {
+              content: var(--c1);
+            }
+            100% {
+              content: var(--c2);
+            }
+          }
+
+          /* Define the animation */
+          [data-animation="flip"] {
+            animation: flip 0.2s calc(var(--i) * 0.05s) infinite;
+          }
+        `}
+      </style>
+      <Button
+        data-animation="flip"
+        prefix={{ name: icon, size: 'm'}}
+        variant={surface}
+        {...props}
+        style={{
+            '--size': '64px',
+            width: 'var(--size)',
+            height: 'var(--size)',
+            padding: 'var(--space-m)',
+            borderRadius: '999px',
+          ...style,
+        }}
+      />
+    </>
+  )
+}

package/src/ossybot/Ossybot.stories.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Ossybot } from './Ossybot.jsx'
+
+export default {
+  title: 'Connected components/Ossybot',
+  component: Ossybot,
+  parameters: {
+   layout: 'centered',
+   workspaceId: '36zDqF0TKZZ5KkJdyg7NH',
+   renderInsideApp: true
+ },
+}
+
+const Story = props => <Ossybot {...props} />
+
+export const Default = Story.bind({})
+Default.args = { }
+
+export const Add = Story.bind({})
+Add.args = { icon: 'math-plus'}
+
+export const Custom = Story.bind({})
+Custom.args = { icon: 'loadbar-sound' }
+
+export const Ascii = Story.bind({})
+Ascii.args = { label: '(≧︿≦)' }

package/src/ossybot/index.js

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

package/src/page/Page.jsx

@@ -0,0 +1,33 @@
+import { useResources } from '@ossy/sdk-react'
+import { useActivePageLocation } from '../use-active-page-location'
+import { Layout } from '../layout'
+import { Section } from '../section'
+
+export const Page = () => {
+  const activePageLocation = useActivePageLocation()
+  const { resources: folder } = useResources(`/pages${activePageLocation}`)
+  const pageSettings = folder.find(entry => entry.name === 'Page settings')
+  const sections = folder.filter(entry => entry.name.endsWith('Section'))
+
+  const title = pageSettings?.data?.title
+  const layout = pageSettings?.data?.layout
+
+  if (!pageSettings) return
+
+  setSections(sections)
+
+  return !!pageSettings && (
+    (
+      <Layout layoutId={pageSettings.layout}>
+        { sections.map(section => (
+          <Section
+            key={section.data.slotName}
+            slotName={section.data.slotName}
+            componentId={section.data.componentId}
+            componentProps={section.data.componentProps}
+          />
+        ))}
+      </Layout>
+    )
+  )
+}

package/src/page/Page.stories.jsx

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

package/src/page/index.js

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

package/src/page-data-loader/PageDataLoader.jsx

@@ -0,0 +1,90 @@
+import { useEffect, useState } from 'react'
+import { useResources, AsyncStatus } from '@ossy/sdk-react'
+import { Switch, useDocumentTitle } from '@ossy/design-system'
+import { useActivePageLocation } from '../use-active-page-location'
+
+const getLoadingPageSettings = () => ({
+  title: 'Loading...'
+})
+
+const getErrorPageSettings = () => ({
+  title: 'Error'
+})
+
+const getNotFoundPageSettings = () => ({
+  title: 'Not found'
+})
+
+const getDefaultPageSettings = () => ({
+  title: undefined
+})
+
+const PageStatus = {
+  Loading: 'Loading',
+  Error: 'Error',
+  Success: 'Success',
+  NotFound: 'NotFound'
+}
+
+export const PageDataLoader = ({ children }) => {
+  const activePageLocation = useActivePageLocation()
+  const { status, resources: folder } = useResources(`/pages${activePageLocation}`)
+  const [pageStatus, setPageStatus] = useState(PageStatus.Loading)
+  const [pageSettings, setPageSettings] = useState(getLoadingPageSettings())
+
+  useDocumentTitle(pageSettings.title)
+
+  useEffect(() => {
+    if ([AsyncStatus.NotInitialized, AsyncStatus.Loading].includes(status)) {
+      setPageSettings(getLoadingPageSettings())
+      return setPageStatus(PageStatus.Loading)
+    } else if ([AsyncStatus.Error].includes(status)) {
+      setPageSettings(getErrorPageSettings())
+      return setPageStatus(PageStatus.Error)
+    } else if ([AsyncStatus.Success].includes(status)) {
+      const pageSettings = folder.find(entry => entry.name === 'Page settings')
+
+      if (!pageSettings) {
+        setPageSettings(getNotFoundPageSettings())
+        return setPageStatus(PageStatus.NotFound)
+      }
+
+      setPageSettings({
+        title: pageSettings.data.title,
+        layout: pageSettings.data.layout,
+        slots: pageSettings.data.slots
+      })
+
+      setPageStatus(PageStatus.Success)
+
+    }
+
+    return () => {
+      setPageSettings(getDefaultPageSettings())
+    }
+
+  }, [status, folder])
+
+  return (
+    <Switch on={pageStatus}>
+
+      <Switch.Case match={[PageStatus.NotFound]}>
+        Page not found
+      </Switch.Case>
+
+      <Switch.Case match={[PageStatus.Error]}>
+        Couldn't load the page
+      </Switch.Case>
+
+      <Switch.Case match={[PageStatus.Loading]}>
+        Page Loading
+      </Switch.Case>
+
+      <Switch.Case match={[PageStatus.Success]}>
+        {children}
+      </Switch.Case>
+
+    </Switch>
+
+  )
+}

package/src/page-data-loader/PageDataLoader.stories.jsx

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

package/src/page-data-loader/index.js

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

package/src/pages-module/PagesModule.jsx

@@ -0,0 +1,8 @@
+import { Page } from '../page'
+import { PageDataLoader } from '../page-data-loader'
+
+export const PagesModule = () => (
+  <PageDataLoader>
+    <Page/>
+  </PageDataLoader>
+)

package/src/pages-module/PagesModule.stories.jsx

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

package/src/pages-module/index.js

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

package/src/resume/Resume.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Resume as _Resume } from '@ossy/design-system-extras'
+import { useResume } from './useResume.js'
+
+export const Resume = ({
+  resumeId,
+  ...props
+}) => {
+  const resumeProps = useResume(resumeId)
+  return resumeProps.status === 'Success'
+    ? <_Resume {...resumeProps} profileCardVariant="resume" {...props}/>
+    : <></>
+}

package/src/resume/Resume.stories.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { WorkspaceProvider } from '@ossy/sdk-react'
+import { Resume } from './Resume.jsx'
+
+export default {
+  title: 'Resume',
+  component: Resume,
+  args: { workspaceId: '36zDqF0TKZZ5KkJdyg7NH' },
+  parameters: {
+   layout: 'fullscreen',
+ },
+}
+
+const Story = props => (
+  <WorkspaceProvider workspaceId={props?.workspaceId}>
+    <Resume {...props}/>
+  </WorkspaceProvider>
+)
+
+export const Default = Story.bind({})
+Default.args = {
+  resumeId: ''
+}