@symbo.ls/starter-kit 2.34.4 → 3.3.4

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/package.json

@@ -1,29 +1,14 @@
 {
   "name": "@symbo.ls/starter-kit",
-  "version": "2.34.4",
+  "version": "3.3.4",
   "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 smbls start",
+    "build": "npx smbls build"
   },
   "dependencies": {
-    "smbls": "^2.34.4"
-  },
-  "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",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.32.0",
-    "parcel": "^2.16.0",
-    "standard": "^17.1.2"
-  },
-  "gitHead": "24af4cb709642223c3fa555fa6fb954570c31b6b"
+    "smbls": "^3.3.4"
+  }
 }

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,3 +1,8 @@
 {
-  "key": "projectName.symbo.ls"
-}
+  "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,20 +0,0 @@
-'use strict'
-
-import { Flex } from 'smbls'
-
-export const App = {
-  extend: Flex,
-
-  props: {
-    theme: 'document',
-    flow: 'column',
-    height: '100vh',
-    align: 'center space-between'
-  },
-
-  Header: {},
-
-  content: {},
-
-  Footer: { text: 'Footer' }
-}

package/example/components.js

@@ -1,68 +0,0 @@
-'use strict'
-
-import { Flex, Link } from 'smbls'
-
-export const Header = {
-  extend: Flex,
-  props: {
-    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'
-      })
-    },
-    Text_logo: { href: '/', text: 'Hello!' },
-    Text_about: { href: '/about', text: 'About' }
-  },
-
-  ThemeSwitcher: {}
-}
-
-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 })
-      }
-    }
-  },
-  dark: { text: 'Dark' },
-  light: { text: 'Light' },
-  midnight: { text: 'Midnight' }
-}
-
-export const Footer = {
-  props: {
-    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'
-    }
-  }
-}

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,34 +0,0 @@
-'use strict'
-
-export default {
-  '/': {
-    H1: 'Hello Symbols',
-    P: 'Lorem ipsum dolor sit amet',
-    TestComponent: {},
-    Link: {
-      props: {
-        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,55 +0,0 @@
-'use strict'
-
-import { Flex, Link } from 'smbls'
-
-export const Header = {
-  extend: Flex,
-  props: {
-    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'
-      })
-    },
-    Text_logo: { href: '/', text: 'Hello!' },
-    Text_about: { href: '/about', text: 'About' }
-  },
-
-  ThemeSwitcher: {}
-}
-
-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 })
-      }
-    }
-  },
-  dark: { text: 'Dark' },
-  light: { text: 'Light' },
-  midnight: { text: 'Midnight' }
-}
-
-export const Footer = {
-  props: {
-    padding: 'Z B',
-    order: 9
-  }
-}

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: 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/src/index.js

@@ -1,28 +0,0 @@
-'use strict'
-
-import { create, Flex } from 'smbls'
-
-import designSystem from './designSystem'
-import * as components from './components'
-import pages from './pages'
-
-create({
-  extend: Flex,
-
-  props: {
-    theme: 'document',
-    flow: 'column',
-    height: '100vh',
-    align: 'center space-between'
-  },
-
-  Header: {},
-
-  content: {},
-
-  Footer: { text: 'Footer' }
-}, {
-  designSystem,
-  components,
-  pages
-})

package/src/pages.js

@@ -1,12 +0,0 @@
-'use strict'
-
-export default {
-  '/': {
-    H1: { text: 'Hello Symbols' },
-    P: { text: 'Lorem ipsum dolor sit amet' }
-  },
-  '/about': {
-    H3: { text: 'This is Symbols starter-kit' },
-    P: { text: 'Lorem ipsum dolor sit amet' }
-  }
-}