@symbo.ls/starter-kit 3.2.3 → 3.3.5

package/.eslintignore

@@ -0,0 +1,4 @@
+dist/
+node_modules/
+.parcel-cache/
+.symbols/

package/.eslintrc

@@ -1,3 +1,13 @@
 {
-  "extends": "standard"
-}
+  "extends": "standard",
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "requireConfigFile": false
+  },
+  "rules": {
+    "no-unused-vars": "warn",
+    "import/no-duplicates": "warn"
+  }
+}

package/.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  }
+}

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 live editor [Playground](https://domql.com/playground/).
+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.
 
 ### Setup
 
@@ -10,10 +10,10 @@ git clone git@github.com:symbo-ls/starter-kit.git
 
 2. Install scripts
 ```
-yarn
+npm install
 ```
 
 3. Run the project
 ```
-yarn start
+npm start
 ```

package/package.json

@@ -1,30 +1,14 @@
 {
   "name": "@symbo.ls/starter-kit",
-  "version": "3.2.3",
+  "version": "3.3.5",
   "description": "Example dev setup to use Symbols",
   "author": "symbo.ls",
   "repository": "https://github.com/symbo-ls/starter-kit",
   "scripts": {
-    "start": "npx parcel index.html --no-cache --watch-dir=../domql",
-    "fetch": "npx @symbo.ls/cli fetch",
-    "build": "npx parcel build index.html"
+    "start": "npx smbls start",
+    "build": "npx smbls build"
   },
   "dependencies": {
-    "smbls": "^3.2.3"
-  },
-  "devDependencies": {
-    "@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.31.0",
-    "parcel": "^2.13.3",
-    "standard": "^17.1.2"
-  },
-  "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681"
+    "smbls": "^3.3.5"
+  }
 }

package/symbols/app.js

@@ -0,0 +1 @@
+export default {}

package/symbols/config.js

@@ -0,0 +1,11 @@
+export default {
+  useReset: true,
+  useVariable: true,
+  useFontImport: true,
+  useIconSprite: true,
+  useSvgSprite: true,
+  useDefaultConfig: true,
+  useDocumentTheme: true,
+  verbose: false,
+  globalTheme: 'auto'
+}

package/symbols/dependencies.js

@@ -0,0 +1,2 @@
+export default {
+}

package/symbols/designSystem/ANIMATION.js

@@ -0,0 +1 @@
+export default {}

package/symbols/designSystem/CASES.js

@@ -0,0 +1 @@
+export default {}

package/symbols/designSystem/CLASS.js

@@ -0,0 +1 @@
+export default {}

package/symbols/designSystem/COLOR.js

@@ -0,0 +1,4 @@
+export default {
+  black: '#000',
+  white: '#fff'
+}

package/symbols/designSystem/FONT.js

@@ -0,0 +1 @@
+export default {}

package/symbols/designSystem/FONT_FAMILY.js

@@ -0,0 +1 @@
+export default {}

package/symbols/designSystem/GRADIENT.js

@@ -0,0 +1 @@
+export default {}

package/symbols/designSystem/GRID.js

@@ -0,0 +1 @@
+export default {}

package/symbols/designSystem/ICONS.js

@@ -0,0 +1 @@
+export default {}

package/symbols/designSystem/MEDIA.js

@@ -0,0 +1 @@
+export default {}

package/symbols/designSystem/RESET.js

@@ -0,0 +1 @@
+export default {}

package/symbols/designSystem/SHAPE.js

@@ -0,0 +1 @@
+export default {}

package/symbols/designSystem/SPACING.js

@@ -0,0 +1,5 @@
+export default {
+  base: 16,
+  ratio: 1.618,
+  subSequence: true
+}

package/symbols/designSystem/THEME.js

@@ -0,0 +1,20 @@
+export default {
+  document: {
+    '@light': {
+      color: 'black',
+      background: 'white'
+    },
+    '@dark': {
+      color: 'white',
+      background: 'black'
+    }
+  },
+  none: {
+    color: 'none',
+    background: 'none'
+  },
+  transparent: {
+    color: 'currentColor',
+    background: 'transparent'
+  }
+}

package/symbols/designSystem/TIMING.js

@@ -0,0 +1 @@
+export default {}

package/symbols/designSystem/TYPOGRAPHY.js

@@ -0,0 +1,6 @@
+export default {
+  base: 16,
+  ratio: 1.25,
+  subSequence: true,
+  templates: {}
+}

package/symbols/designSystem/index.js

@@ -0,0 +1,35 @@
+import color from './color.js'
+import gradient from './gradient.js'
+import theme from './theme.js'
+import font from './font.js'
+import font_family from './font_family.js'
+import typography from './typography.js'
+import spacing from './spacing.js'
+import timing from './timing.js'
+import class_ from './class.js'
+import grid from './grid.js'
+import icons from './icons.js'
+import shape from './shape.js'
+import reset from './reset.js'
+import animation from './animation.js'
+import media from './media.js'
+import cases from './cases.js'
+
+export default {
+  color,
+  gradient,
+  theme,
+  font,
+  font_family,
+  typography,
+  spacing,
+  timing,
+  class: class_,
+  grid,
+  icons,
+  shape,
+  reset,
+  animation,
+  media,
+  cases
+}

package/symbols/envs.js

@@ -0,0 +1 @@
+export default {}

package/symbols/files/index.js

@@ -0,0 +1,3 @@
+export default {
+
+}

package/symbols/index.html

@@ -0,0 +1,15 @@
+<html background="#000">
+  <head>
+    <title>Symbols App</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
+    />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>

package/symbols/index.js

@@ -0,0 +1,31 @@
+import { create } from 'smbls'
+
+import app from './app.js'
+
+import state from './state.js'
+import dependencies from './dependencies.js'
+import * as components from './components/index.js'
+import * as snippets from './snippets/index.js'
+import pages from './pages/index.js'
+import * as functions from './functions/index.js'
+import * as methods from './methods/index.js'
+import designSystem from './designSystem/index.js'
+import files from './files/index.js'
+import sharedLibraries from './sharedLibraries.js'
+import config from './config.js'
+import envs from './envs.js'
+
+create(app, {
+  ...config,
+  state,
+  dependencies,
+  components,
+  snippets,
+  pages,
+  functions,
+  methods,
+  designSystem,
+  files,
+  sharedLibraries,
+  envs
+})

package/symbols/pages/index.js

@@ -0,0 +1,2 @@
+export default {
+}

package/symbols/sharedLibraries.js

@@ -0,0 +1 @@
+export default []

package/symbols/state.js

@@ -0,0 +1 @@
+export default {}

package/symbols.json

@@ -1,4 +1,8 @@
 {
-  "key": "smart-capital.symbo.ls",
-  "distDir": "smbls_dist"
-}
+  "key": "projectName.symbo.ls",
+  "branch": "main",
+  "version": "1.0.0",
+  "dir": "./symbols",
+  "bundler": "parcel",
+  "packageManager": "npm"
+}

package/.parcelrc

@@ -1,8 +0,0 @@
-{
-  "extends": "@parcel/config-default",
-  "transformers": {
-    "*.woff2": ["@parcel/transformer-raw"],
-    "*.otf": ["@parcel/transformer-raw"],
-    "*.svg": ["@parcel/transformer-inline-string"]
-  }
-}

package/example/app.js

@@ -1,15 +0,0 @@
-'use strict'
-
-export const App = {
-  display: 'flex',
-  theme: 'document',
-  flow: 'column',
-  height: '100vh',
-  align: 'center space-between',
-
-  Header: {},
-
-  content: {},
-
-  Footer: { text: 'Footer' }
-}

package/example/components.js

@@ -1,54 +0,0 @@
-'use strict'
-
-export const Header = {
-  display: 'flex',
-  minWidth: '100%',
-  padding: 'Z B',
-  align: 'center space-between',
-  Flex: {
-    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' }
-  },
-
-  ThemeSwitcher: {}
-}
-
-export const ThemeSwitcher = {
-  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' }
-}
-
-export const Footer = {
-  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/example/designSystem.js

@@ -1,92 +0,0 @@
-'use strict'
-
-import { DEFAULT_ICONS } from '@symbo.ls/default-icons'
-
-/**
- * Colors
- * @tutorial https://docs.symbols.app/color
- */
-const COLOR = {
-  transparent: 'transparent',
-  black: 'black',
-  white: 'white',
-  orange: '#E98232'
-}
-
-/**
- * Gradients
- * @tutorial https://docs.symbols.app/color
- */
-const GRADIENT = {}
-
-/**
- * Themes
- * @tutorial https://docs.symbols.app/theme
- */
-const THEME = {
-  document: {
-    '@dark': {
-      color: 'white',
-      background: 'black'
-    },
-    '@light': {
-      background: 'white',
-      color: 'black'
-    },
-    '@midnight': {
-      background: '#112233',
-      color: 'white'
-    }
-  }
-}
-
-/**
- * Fonts
- * @tutorial https://docs.symbols.app/font
- */
-const FONT = {}
-
-/**
- * Font families
- * @tutorial https://docs.symbols.app/font
- */
-const FONT_FAMILY = {}
-
-/**
- * Typography
- * @tutorial https://docs.symbols.app/typography
- * @tutorial https://docs.symbols.app/sequence
- */
-const TYPOGRAPHY = {
-  base: 16,
-  ratio: 1.2
-}
-
-/**
- * Spacing
- * @tutorial https://docs.symbols.app/spacing
- * @tutorial https://docs.symbols.app/sequence
- */
-const SPACING = {}
-
-const options = {
-  verbose: false,
-  useReset: true,
-  useDocumentTheme: true,
-  useFontImport: true,
-  useVariable: true,
-  useSvgSprite: true,
-  useIconSprite: true
-}
-
-export default {
-  ...options,
-  COLOR,
-  GRADIENT,
-  THEME,
-  ICONS: DEFAULT_ICONS,
-  TYPOGRAPHY,
-  SPACING,
-  FONT,
-  FONT_FAMILY
-}

package/example/index.js

@@ -1,16 +0,0 @@
-'use strict'
-
-import config from '../symbols.json'
-import { create } from 'smbls'
-
-import { App } from './app'
-import designSystem from './designSystem'
-import * as components from './components'
-import pages from './pages'
-
-create(App, {
-  key: config.key,
-  designSystem,
-  components,
-  pages
-})

package/example/pages.js

@@ -1,32 +0,0 @@
-'use strict'
-
-export default {
-  '/': {
-    H1: 'Hello Symbols',
-    P: 'Lorem ipsum dolor sit amet',
-    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: 'This is Symbols starter-kit',
-    P: 'Lorem ipsum dolor sit amet',
-    Link: {
-      href: '/',
-      text: 'Go Back'
-    }
-  }
-}

package/index.html

@@ -1,12 +0,0 @@
-<html background="#000">
-<head>
-  <title>Documents</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-
-  <meta charset="UTF-8">
-</head>
-<body>
-  <script type="module" src="./src/index.js"></script>
-</body>
-</html>

package/src/components.js

@@ -1,57 +0,0 @@
-'use strict'
-
-export const Header = {
-  display: 'flex',
-  minWidth: '100%',
-  padding: 'Z B',
-  align: 'center space-between',
-  Flex: {
-    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' }
-  },
-
-  ThemeSwitcher: {}
-}
-
-export const ThemeSwitcher = {
-  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' }
-}
-
-export const Footer = {
-  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

@@ -1,92 +0,0 @@
-'use strict'
-
-import { DEFAULT_ICONS } from '@symbo.ls/default-icons'
-
-/**
- * Colors
- * @tutorial https://docs.symbols.app/color
- */
-const COLOR = {
-  transparent: 'transparent',
-  black: 'black',
-  white: 'white',
-  orange: '#E98232'
-}
-
-/**
- * Gradients
- * @tutorial https://docs.symbols.app/color
- */
-const GRADIENT = {}
-
-/**
- * Themes
- * @tutorial https://docs.symbols.app/theme
- */
-const THEME = {
-  document: {
-    '@dark': {
-      color: 'white',
-      background: 'black'
-    },
-    '@light': {
-      background: 'white',
-      color: 'black'
-    },
-    '@midnight': {
-      background: '#112233',
-      color: 'white'
-    }
-  }
-}
-
-/**
- * Fonts
- * @tutorial https://docs.symbols.app/font
- */
-const FONT = {}
-
-/**
- * Font families
- * @tutorial https://docs.symbols.app/font
- */
-const FONT_FAMILY = {}
-
-/**
- * Typography
- * @tutorial https://docs.symbols.app/typography
- * @tutorial https://docs.symbols.app/sequence
- */
-const TYPOGRAPHY = {
-  base: 16,
-  ratio: 1.2
-}
-
-/**
- * Spacing
- * @tutorial https://docs.symbols.app/spacing
- * @tutorial https://docs.symbols.app/sequence
- */
-const SPACING = {}
-
-const options = {
-  verbose: true,
-  useReset: true,
-  useDocumentTheme: true,
-  useFontImport: true,
-  useVariable: true,
-  useSvgSprite: true,
-  useIconSprite: true
-}
-
-export default {
-  ...options,
-  COLOR,
-  GRADIENT,
-  THEME,
-  ICONS: DEFAULT_ICONS,
-  TYPOGRAPHY,
-  SPACING,
-  FONT,
-  FONT_FAMILY
-}

package/src/index.js

@@ -1,27 +0,0 @@
-'use strict'
-
-import { create } from 'smbls'
-
-import designSystem from './designSystem'
-import * as components from './components'
-import pages from './pages'
-
-async function initialize () {
-  let fetched_context
-  try {
-    fetched_context = await import('../smbls_dist')
-  } catch (error) {
-    console.error('Failed to load fetched_context:', error)
-  }
-
-  create(
-    {},
-    fetched_context || {
-      designSystem,
-      components,
-      pages
-    }
-  )
-}
-
-initialize()

package/src/pages.js

@@ -1,30 +0,0 @@
-'use strict'
-
-export default {
-  '/': {
-    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': {
-    Header: {},
-    Link: {
-      href: '/',
-      text: 'Go Back'
-    }
-  }
-}