@symbo.ls/starter-kit 2.34.2 → 3.2.3

package/README.md

@@ -1,5 +1,5 @@
 # Symbols Starter Kit
-Example dev setup (boilerplate) to use [DOMQL](https://github.com/domql/domql). You can also check out [Symbols developers documentation](https://symbols.app/developers) for advanced use.
+Example dev setup (boilerplate) to use [DOMQL](https://github.com/domql/domql). You can also check live editor [Playground](https://domql.com/playground/).
 
 ### Setup
 
@@ -10,10 +10,10 @@ git clone git@github.com:symbo-ls/starter-kit.git
 
 2. Install scripts
 ```
-npm install
+yarn
 ```
 
 3. Run the project
 ```
-npm start
+yarn start
 ```

package/example/app.js

@@ -1,16 +1,11 @@
 'use strict'
 
-import { Flex } from 'smbls'
-
 export const App = {
-  extend: Flex,
-
-  props: {
-    theme: 'document',
-    flow: 'column',
-    height: '100vh',
-    align: 'center space-between'
-  },
+  display: 'flex',
+  theme: 'document',
+  flow: 'column',
+  height: '100vh',
+  align: 'center space-between',
 
   Header: {},
 

package/example/components.js

@@ -1,22 +1,16 @@
 'use strict'
 
-import { Flex, Link } from 'smbls'
-
 export const Header = {
-  extend: Flex,
-  props: {
-    minWidth: '100%',
-    padding: 'Z B',
-    align: 'center space-between'
-  },
-
+  display: 'flex',
+  minWidth: '100%',
+  padding: 'Z B',
+  align: 'center space-between',
   Flex: {
-    props: { gap: 'C' },
-    childExtend: {
-      extend: Link,
-      props: ({ props }) => ({
-        textDecoration: window.location.pathname === props.href ? 'underline' : 'none'
-      })
+    gap: 'C',
+    childExtends: {
+      extends: 'Link',
+      textDecoration: ({ props }) =>
+        window.location.pathname === props.href ? 'underline' : 'none'
     },
     Text_logo: { href: '/', text: 'Hello!' },
     Text_about: { href: '/about', text: 'About' }
@@ -26,43 +20,35 @@ export const Header = {
 }
 
 export const ThemeSwitcher = {
-  extend: Flex,
-  props: { gap: 'A2' },
-  childExtend: {
-    props: (element, state) => ({
-      active: state.globalTheme === element.key,
-      cursor: 'pointer',
-      '.active': {
-        fontWeight: '900'
-      }
-    }),
-    on: {
-      click: (event, element, state) => {
-        state.update({ globalTheme: element.key })
-      }
+  display: 'flex',
+  gap: 'A2',
+  childExtends: {
+    isActive: (element, state) => state.globalTheme === element.key,
+    cursor: 'pointer',
+    '.isActive': {
+      fontWeight: '900'
+    },
+    onClick: (event, element, state) => {
+      state.update({ globalTheme: element.key })
     }
   },
-  dark: { text: 'Dark' },
-  light: { text: 'Light' },
-  midnight: { text: 'Midnight' }
+  Dark: { text: 'Dark' },
+  Light: { text: 'Light' },
+  Midnight: { text: 'Midnight' }
 }
 
 export const Footer = {
-  props: {
-    padding: 'Z B',
-    order: 9
-  }
+  padding: 'Z B',
+  order: 9
 }
 
 export const TestComponent = {
-  props: {
-    padding: 'Z B',
-    round: 'A',
-    margin: 'A -Z C',
-    background: 'orange .35',
-    text: 'test',
-    ':hover': {
-      background: 'orange .35 +35'
-    }
+  padding: 'Z B',
+  round: 'A',
+  margin: 'A -Z C',
+  background: 'orange .35',
+  text: 'test',
+  ':hover': {
+    background: 'orange .35 +35'
   }
 }

package/example/pages.js

@@ -6,13 +6,11 @@ export default {
     P: 'Lorem ipsum dolor sit amet',
     TestComponent: {},
     Link: {
-      props: {
-        href: 'https://symbols.app/developers',
-        target: '_blank',
-        ':hover': {
-          '& svg': {
-            margin: '- Y - -'
-          }
+      href: 'https://symbols.app/developers',
+      target: '_blank',
+      ':hover': {
+        '& svg': {
+          margin: '- Y - -'
         }
       },
       Icon: {

package/package.json

@@ -1,29 +1,30 @@
 {
   "name": "@symbo.ls/starter-kit",
-  "version": "2.34.2",
+  "version": "3.2.3",
   "description": "Example dev setup to use Symbols",
   "author": "symbo.ls",
   "repository": "https://github.com/symbo-ls/starter-kit",
   "scripts": {
-    "start": "parcel index.html",
-    "build": "parcel build index.html"
+    "start": "npx parcel index.html --no-cache --watch-dir=../domql",
+    "fetch": "npx @symbo.ls/cli fetch",
+    "build": "npx parcel build index.html"
   },
   "dependencies": {
-    "smbls": "^2.34.2"
+    "smbls": "^3.2.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.4",
-    "@babel/eslint-parser": "^7.28.4",
-    "@babel/preset-env": "^7.28.3",
-    "@parcel/babel-preset-env": "^2.16.0",
-    "@parcel/transformer-inline-string": "^2.16.0",
-    "@parcel/transformer-raw": "^2.16.0",
-    "buffer": "^6.0.3",
-    "eslint": "^9.37.0",
+    "@babel/core": "^7.26.0",
+    "@babel/eslint-parser": "^7.26.10",
+    "@babel/preset-env": "^7.26.9",
+    "@parcel/babel-preset-env": "^2.11.0",
+    "@parcel/transformer-inline-string": "^2.13.3",
+    "@parcel/transformer-raw": "^2.13.3",
+    "buffer": "^5.5.0||^6.0.0",
+    "eslint": "^9.28.0",
     "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.32.0",
-    "parcel": "^2.16.0",
+    "eslint-plugin-import": "^2.31.0",
+    "parcel": "^2.13.3",
     "standard": "^17.1.2"
   },
-  "gitHead": "fb12105837bedc8f038614c2cf77ed7a5e02619b"
+  "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681"
 }

package/src/components.js

@@ -1,22 +1,16 @@
 'use strict'
 
-import { Flex, Link } from 'smbls'
-
 export const Header = {
-  extend: Flex,
-  props: {
-    minWidth: '100%',
-    padding: 'Z B',
-    align: 'center space-between'
-  },
-
+  display: 'flex',
+  minWidth: '100%',
+  padding: 'Z B',
+  align: 'center space-between',
   Flex: {
-    props: { gap: 'C' },
-    childExtend: {
-      extend: Link,
-      props: ({ props }) => ({
-        textDecoration: window.location.pathname === props.href ? 'underline' : 'none'
-      })
+    gap: 'C',
+    childExtends: {
+      extends: 'Link',
+      textDecoration: ({ props }) =>
+        window.location.pathname === props.href ? 'underline' : 'none'
     },
     Text_logo: { href: '/', text: 'Hello!' },
     Text_about: { href: '/about', text: 'About' }
@@ -26,30 +20,38 @@ export const Header = {
 }
 
 export const ThemeSwitcher = {
-  extend: Flex,
-  props: { gap: 'A2' },
-  childExtend: {
-    props: (element, state) => ({
-      active: state.globalTheme === element.key,
-      cursor: 'pointer',
-      '.active': {
-        fontWeight: '900'
-      }
-    }),
-    on: {
-      click: (event, element, state) => {
-        state.update({ globalTheme: element.key })
-      }
+  display: 'flex',
+  gap: 'A2',
+  childExtends: {
+    isActive: (element, state) =>
+      state.globalTheme === element.key.toLowerCase(),
+    cursor: 'pointer',
+    '.isActive': {
+      fontWeight: '900'
+    },
+    onClick: (event, element, state, ctx) => {
+      console.log(element.key.toLowerCase())
+      ctx.designSystem.globalTheme = element.key.toLowerCase()
+      state.update({ globalTheme: element.key.toLowerCase() })
     }
   },
-  dark: { text: 'Dark' },
-  light: { text: 'Light' },
-  midnight: { text: 'Midnight' }
+  Dark: { text: 'Dark' },
+  Light: { text: 'Light' },
+  Midnight: { text: 'Midnight' }
 }
 
 export const Footer = {
-  props: {
-    padding: 'Z B',
-    order: 9
+  padding: 'Z B',
+  order: 9
+}
+
+export const TestComponent = {
+  padding: 'Z B',
+  round: 'A',
+  margin: 'A -Z C',
+  background: 'orange .35',
+  text: 'test',
+  ':hover': {
+    background: 'orange .35 +35'
   }
 }

package/src/designSystem.js

@@ -70,7 +70,7 @@ const TYPOGRAPHY = {
 const SPACING = {}
 
 const options = {
-  verbose: false,
+  verbose: true,
   useReset: true,
   useDocumentTheme: true,
   useFontImport: true,

package/src/index.js

@@ -1,28 +1,27 @@
 'use strict'
 
-import { create, Flex } from 'smbls'
+import { create } from 'smbls'
 
 import designSystem from './designSystem'
 import * as components from './components'
 import pages from './pages'
 
-create({
-  extend: Flex,
+async function initialize () {
+  let fetched_context
+  try {
+    fetched_context = await import('../smbls_dist')
+  } catch (error) {
+    console.error('Failed to load fetched_context:', error)
+  }
 
-  props: {
-    theme: 'document',
-    flow: 'column',
-    height: '100vh',
-    align: 'center space-between'
-  },
+  create(
+    {},
+    fetched_context || {
+      designSystem,
+      components,
+      pages
+    }
+  )
+}
 
-  Header: {},
-
-  content: {},
-
-  Footer: { text: 'Footer' }
-}, {
-  designSystem,
-  components,
-  pages
-})
+initialize()

package/src/pages.js

@@ -2,11 +2,29 @@
 
 export default {
   '/': {
-    H1: { text: 'Hello Symbols' },
-    P: { text: 'Lorem ipsum dolor sit amet' }
+    Header: {},
+    TestComponent: {},
+    Link: {
+      href: 'https://symbols.app/developers',
+      target: '_blank',
+      ':hover': {
+        '& svg': {
+          margin: '- Y - -'
+        }
+      },
+      Icon: {
+        transition: 'margin ease A',
+        margin: '- X - -',
+        name: 'arrow up right'
+      },
+      Span: 'Checkout Docs'
+    }
   },
   '/about': {
-    H3: { text: 'This is Symbols starter-kit' },
-    P: { text: 'Lorem ipsum dolor sit amet' }
+    Header: {},
+    Link: {
+      href: '/',
+      text: 'Go Back'
+    }
   }
 }

package/symbols.json

@@ -1,3 +1,4 @@
 {
-  "key": "projectName.symbo.ls"
+  "key": "smart-capital.symbo.ls",
+  "distDir": "smbls_dist"
 }