gardenjs 0.9.0

package/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}

package/.eslintrc.yml

@@ -0,0 +1,19 @@
+env:
+  browser: true
+  commonjs: false
+  es6: true
+  node: true
+  mocha: true
+extends: ['eslint:recommended', 'plugin:svelte/recommended', 'prettier']
+globals:
+  Atomics: readonly
+  SharedArrayBuffer: readonly
+  globalThis: readonly
+  expect: readonly
+  beforeAll: readonly
+  afterAll: readonly
+parserOptions:
+  ecmaVersion: latest
+  sourceType: module
+rules:
+  no-console: 0

package/.github/workflows/npm-publish.yml

@@ -0,0 +1,32 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - run: npm ci
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

package/.prettierrc

@@ -0,0 +1,5 @@
+plugins: ['prettier-plugin-svelte']
+tabWidth: 2
+semi: false
+singleQuote: true
+trailingComma: 'es5'

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020-present, Robin Danzinger, Martin Farkas - Rabbit Development
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,76 @@
+# Component library explorer
+
+Gardenjs is a lightweight UI component explorer for JavaScript front-end libraries that makes it easier to develop, test and document UI components and pages. Svelte, Vue and React are currently supported out of the box. Other libraries can also be easily connected to Garden.
+
+## Why Garden?
+
+- Gardenjs is significantly faster than comparable tools such as Storybook.
+- Gardenjs is multi-framework compatible.
+- Gardenjs has many useful features without being complex and bloated.
+- Gardenjs simply looks good :)
+
+## Getting Started
+
+Please follow the documentation at [gardenjs.org](https://www.gardenjs.org)
+
+Happy Gardening :)
+
+## Sponsors
+
+Gardenjs is an open source project and is licensed under the MIT license. Become a sponsor to give us more scope for further development. We are grateful for this and will publish your logo and website URL in our README on Github and on our website/documentation.
+
+## Contributing
+
+GardenJS was developed and is contributed by [Rabbit Development](https://www.rabbitdevelopment.de). We look forward to your feedback, please report any bugs. We also welcome contributions and are happy about sponsoring.
+
+## License
+
+[MIT](https://opensource.org/license/mit/)
+
+Copyright (C) 2020 - present by Robin Danzinger & Martin Farkas from [Rabbit Development](https://www.rabbitdevelopment.de).
+
+## Todo´s
+
+### v1.0
+
+- [task] Gardenjs npm modul. (yarn?)
+- [task] Add renderer plugins for svelte, vue and react. npm modules (@gardenjs/plugin-xyz).
+- [task] Add hooks before, after.
+- [task] Make Gardenjs compatible with React.
+- [task] Public Gardenjs docs.
+- [task] Public Gardenjs demo of Gardenjs docs.
+- [refactor] Move logic to own file / use stores?. Handle user interaction.
+- [task] Set Gardenjs repository public.
+- [task] Set repository of Gardenjs docs public.
+- [task] Public Rabbit dev website.
+
+### v1.1
+
+- [feature] Evaluation of "Make Storybook stories compatible with Garden". If relatively easy possible then development. Otherwise prioritize other tasks/features depending on complexity.
+- [task] Add tests (or v1.1 ?).
+
+### v1.x
+
+- [task] Add [line numbers plugin](https://github.com/wcoder/highlightjs-line-numbers.js) to highlightjs.
+- [task] Sidebarnav is closed by default on narrow display devices.
+- [task] Make setting of default mode possible via garden.config.js.
+- [task] If full mode is active, switching to portrait mode is deactivated.
+- [task] Store selection in panel nav for refresh or if another component is selected.
+- [task] Store selection of stage for refresh or if another component is selected.
+- [task] Make Gardenjs docs link optional via garden.config.js.
+- [task] Show custom favicon.svg configured in garden.config.js.
+- [feature] Screenshot tests:
+  - Docker image oder alternativ for screenshot test.
+  - Automatic create test file & and folder (like init garden).
+  - Settings.
+- [feature] Set width and height of stage by size input.
+- [feature] Add zoom button 100% and if zoomed show size in % with switch possibility.
+- [feature] Vertical dragbar to drag stage horizontical to show rwd behaviour. Already integrated staticly, just needs to be commented out in topbar.svelte: Show 'px' width/height of stage next to rwd-navi.
+- [task] Switch from md to mdx.
+- [feature] Set stagesize values for "mobile, tablet, desktop" inside garden.config.js. Option: Set list of custom values like iPhone 15, iPad, Samsung etc. in garden.config and show dropdown in Gardenjs instead of icons.
+- [task] Integrate Svelte A11y features.
+- [feature] Build kickstarter "carrots". Define components for carrots.
+- [feature] Bookmarks. (siehe ReactCosmos)
+- [feature] Measure.
+
+<br><br><br><p align="center"><img src="src/client/assets/icons/logo.svg"></p>

package/bin/servegarden.js

@@ -0,0 +1,172 @@
+#!/usr/bin/env node
+
+import { init } from '../src/codegenerator/watchcl.js'
+import { input, confirm } from '@inquirer/prompts'
+import checkbox from '@inquirer/checkbox'
+import { createServer } from '../src/server.js'
+import fs from 'node:fs'
+import path, { dirname } from 'path'
+import { fileURLToPath } from 'url'
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+const exampleSourceFolder = path.resolve(__dirname, '../examples') + '/'
+
+if (fs.existsSync('./garden.config.js')) {
+  initAndCreateServer()
+} else {
+  runSetupScript()
+}
+
+async function initAndCreateServer() {
+  await init()
+  await createServer()
+}
+
+async function runSetupScript() {
+  console.clear()
+  console.log('Welcome to the garden setup process')
+  console.log('')
+  separator()
+  console.log('')
+
+  const title = await input({ message: 'Enter your project title:' })
+
+  const libraries = await checkbox({
+    message: 'UI Library',
+    choices: [
+      { name: 'Svelte', value: 'Svelte' },
+      { name: 'Vue', value: 'Vue' },
+      { name: 'React', value: 'React' },
+    ],
+  })
+
+  const componentFolder = await input({
+    message: 'Enter your component source folder:',
+    default: 'src/',
+  })
+
+  const shallCreateExample = await confirm({
+    message: 'Should garden create an example component?',
+  })
+
+  separator()
+  console.log('')
+  console.log('Creating garden config file...:')
+  console.log('')
+
+  createConfigFile({ title, libraries, componentFolder })
+  if (shallCreateExample) {
+    createExample({ libraries, componentFolder })
+  }
+
+  separator()
+  console.log('')
+  console.log('Done. Edit garden.config.js file according to your needs.')
+  console.log('Happy gardening!')
+}
+
+function separator() {
+  console.log('===================================')
+}
+
+function createConfigFile({ title, componentFolder, libraries }) {
+  const importStmts = libraries
+    .map((lib) => {
+      return `import ${lib}RendererBuilder from "garden/${lib.toLowerCase()}"`
+    })
+    .join('\n')
+  const renderer = libraries
+    .map((lib) => {
+      return `${lib.toLowerCase()}: ${lib}RendererBuilder,`
+    })
+    .join('\n    ')
+
+  const watchLibFiles = libraries
+    .map((lib) => {
+      return `".${lib.toLowerCase()}"`
+    })
+    .join(', ')
+
+  const content = `
+${importStmts}
+
+export default {
+  // Define the server port:
+  serverport: 3010,
+
+  // Stop auto opening Gardenjs on start:
+  // "no_open_browser": true,
+
+  // This title is displayed above the navigation:
+  project_title: "${title}",
+
+  // Here you can set a path to your own start page:
+  // "welcome_page": "/src/custom_welcome_page.${libraries[0]}", 
+
+  // vite config file:
+  // vite_config: "./garden.vite.config.js",
+  
+  // Each entry is output with its subpages in the page tree:
+  structure: {
+    components: "/${componentFolder}",
+  },
+
+  watch: {
+    directories: ["./${componentFolder}"],
+    include: [${watchLibFiles}, ".das.json", ".scss", ".css", ".less", ".js", ".ts"],
+  },
+
+  renderer: {
+    ${renderer}
+  },
+
+  // Add global style files needed for your project:
+  // "additional_style_files": [
+  //   'src/assets/scss/main.scss'
+  // ],
+
+  // Edit or disable "Themes" depending on whether your app uses themes.
+  // According to your requirements, you may also need to adjust the
+  // "onThemeChange" function below accordingly.
+  // "themes": [
+  //   {name: 'default', stageBg: 'white'},
+  //   {name: 'dark', stageBg: '#101010'}, // manually set default active theme on start {active: true, name: 'dark', stageBg: '#101010'},
+  //   {name: 'light', stageBg: '#eee'}
+  // ],
+  // "themeHandler": onThemeChange
+}
+
+////  Edit or disable the function "onThemeChange" according to your project (see also "themes" above):
+//function onThemeChange(theme) {
+//  if (theme === 'default') {
+//   delete document.body.dataset.theme
+//  } else {
+//   document.body.dataset.theme = theme
+//  }
+//}
+  `
+  fs.writeFileSync('garden.config.js', content)
+}
+
+function createExample({ libraries, componentFolder }) {
+  for (const library of libraries) {
+    console.log('Create example for library', library)
+    copyExampleFiles(library.toLowerCase(), componentFolder)
+  }
+}
+
+function copyExampleFiles(library, componentFolder) {
+  fs.mkdirSync(`${componentFolder}/garden_example/`, { recursive: true })
+  fs.copyFileSync(
+    `${exampleSourceFolder}garden_button.${library}.das.js`,
+    `${componentFolder}/garden_example/garden_button.${library}.das.js`
+  )
+  fs.copyFileSync(
+    `${exampleSourceFolder}garden_button.${library}`,
+    `${componentFolder}/garden_example/garden_button.${library}`
+  )
+  fs.copyFileSync(
+    `${exampleSourceFolder}garden_button.${library}.md`,
+    `${componentFolder}/garden_example/garden_button.${library}.md`
+  )
+}

package/examples/garden_button.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let name
+</script>
+
+<button>{name}</button>

package/examples/garden_button.svelte.das.js

@@ -0,0 +1,16 @@
+export default {
+  name: 'GardenSvelteButton',
+  description: './garden_button.svelte.md',
+  file: './garden_button.svelte',
+  in: [{ name: 'name', type: 'String' }],
+  out: [{ name: 'click', type: 'String' }],
+  examples: [
+    {
+      story: 'with text',
+      input: {
+        name: 'GardenButton',
+      },
+    },
+    { story: 'no text', input: {} },
+  ],
+}

package/examples/garden_button.svelte.md

@@ -0,0 +1,3 @@
+# Demo Svelte Button
+
+This is a demo svelte component

package/examples/garden_button.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineProps<{ name: string }>()
+</script>
+
+<template>
+  <button>{{ name }}</button>
+</template>
+
+<style scoped></style>

package/examples/garden_button.vue.das.js

@@ -0,0 +1,16 @@
+export default {
+  name: 'GardenVueButton',
+  file: './garden_button.vue',
+  description: './garden_button.vue.md',
+  in: [{ name: 'name', type: 'String' }],
+  out: [{ name: 'click', type: 'String' }],
+  examples: [
+    {
+      story: 'with text',
+      input: {
+        name: 'GardenButton',
+      },
+    },
+    { story: 'no text', input: { name: '' } },
+  ],
+}

package/examples/garden_button.vue.md

@@ -0,0 +1,3 @@
+# Demo Vue Button
+
+This is a demo vue component

package/frame.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en" style="overflow: hidden">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/assets/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Garden Component Library by Rabbit Development</title>
+  </head>
+  <body
+    style="
+      margin: 0;
+      height: 100%;
+      width: 100%;
+      top: 0px;
+      position: absolute;
+      overflow: auto;
+    "
+  >
+    <script type="module" src="./src/client/gardenframe.js"></script>
+  </body>
+</html>

package/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/assets/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Garden UI Component Explorer</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/client/gardenapp.js"></script>
+  </body>
+</html>

package/index.js

@@ -0,0 +1 @@
+export { marked } from 'marked'

package/jsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "target": "ESNext",
+    "module": "ESNext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable this if you'd like to use dynamic types.
+     */
+    "checkJs": true
+  },
+  /**
+   * Use global.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "gardenjs",
+  "version": "0.9.0",
+  "description": "A lightweight UI component explorer for JavaScript front-end libraries",
+  "repository": "https://github.com/gardenjs/gardenjs",
+  "homepage": "https://github.com/gardenjs/gardenjs/blob/main/README.md",
+  "main": "index.js",
+  "svelte": "src/client/index.js",
+  "type": "module",
+  "author": "Robin Danzinger, Martin Farkas @ Rabbit Development",
+  "license": "MIT",
+  "bin": {
+    "garden": "bin/servegarden.js"
+  },
+  "exports": {
+    ".": "./src/client/index.js",
+    "./init": "./src/codegenerator/watchcl.js",
+    "./GardenFrame": "./src/client/GardenFrame.svelte",
+    "./svelte": "./src/renderer/SvelteRenderer.js",
+    "./vue": "./src/renderer/VueRenderer.js",
+    "./main.scss": "./src/client/assets/scss/main.scss"
+  },
+  "scripts": {
+    "prepare": "husky install",
+    "build": "vite build",
+    "dev": "vite",
+    "preview": "vite preview",
+    "format": "prettier --write --plugin prettier-plugin-svelte .",
+    "lint": "eslint src/."
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "2.4.5",
+    "eslint": "8.44.0",
+    "eslint-config-prettier": "9.0.0",
+    "eslint-plugin-svelte": "2.32.2",
+    "husky": "8.0.3",
+    "lint-staged": "14.0.1",
+    "node-watch": "0.7.3",
+    "prettier": "3.0.3",
+    "prettier-plugin-svelte": "3.0.3",
+    "sass": "1.69.0",
+    "svelte": "4.2.0",
+    "vite": "4.4.9"
+  },
+  "dependencies": {
+    "@inquirer/checkbox": "1.5.0",
+    "@inquirer/prompts": "3.3.0",
+    "highlight.js": "11.7.0",
+    "marked": "4.3.0",
+    "open": "8.4.0"
+  },
+  "lint-staged": {
+    "**/*": "prettier --write --ignore-unknown"
+  }
+}