biotope / biotope-boilerplate

Biotope, a toolchain for lasting design systems.

Biotope helps you to build, distribute and adopt a library of web components with a consistent design and of high quality across all your websites and apps. With Biotope you can easily collaborate with your team to develop and maintain the user interface of all your digital experiences from a single location.

If you want to learn more about Biotope and how you can benefit from using this toolchain please visit https://biotope.sh

Quick Start

Installation

First and foremost, you need to install biotope either as global package:

npm i biotope -g

After that you can use the biotope commandline tool to start a new biotope project.

Setup your first project

Setting up your first biotope instance, you should just trust the cli tool to setup your project. Just run:

biotope create [project-name]

This command will ask you some questions and create a new biotope-boilerplate instance.
After the tool is done, you can change directory to the newly generated biotope instance and run it:

cd [project-name]
npm start

Developing your first component

After starting your project, if you've chosen the empty instance, you should see an empty overview page.
Now to add your first component, just run

biotope generate

After asking you some questions, a new component will be created and ready to be developed. After that, you can go into the newly generated files an change them at your will.

biotope-boilerplate's Issues

Wrong directory description "app/"

In readme file "app/" is used instead of "src/".

Add docs

please add the docsify package and transfer the readme docs quick and dirty to these docs

Deprecated templates

Is it possible to mark templates as "deprecated" so that on index page they are displayed with special styling, same as we had in previous versions of frontend framework? If so, it's not being mentioned in readme.md

Add biotope-element

Expected behavior

I want to clone biotope and be ready to use biotope-element

Actual behavior

I have to update a bunch of stuff to use biotope-element

Add shields

Expected behavior

There are no shields

Actual behavior

We have shields (https://shields.io/) for the status of the project

Remove references to vi coding guidelines

Current:
We reference the coding guidelines from VI as best practices

Wish:
To become it's own product, there should be no more references to the coding guidelines, as it is up to the developer.

@timomayer what do you think?

minified external scripts whatwg-fetch and object-assign not available

Expected behavior

All external resources and scripts are available

Actual behavior

https://unpkg.com/[email protected]/dist/fetch.umd.min.js is no longer working
"Cannot find "/dist/fetch.umd.min.js" in [email protected]"

https://unpkg.com/[email protected]/index.min.js is not accessible (anymore):
"Cannot find "/index.min.js" in [email protected]"

not minified versions are available however:
https://unpkg.com/[email protected]/dist/fetch.umd.js
https://unpkg.com/[email protected]/index.js 

Steps to reproduce

1. load URL: https://unpkg.com/[email protected]/dist/fetch.umd.min.js
2. load URL: https://unpkg.com/[email protected]/index.min.js

Specifications

• Biotope Version: all
• Node Version: all
• Yarn Version: all
• Operating System: all
• Browser & Version: all

Update bio-helpers documentation

The bio-prefixed handlebars helpers are not up to date. See https://github.com/biotope/biotope-build/blob/master/lib/hbs-helpers.js for current list of helpers and update readme.md in this project

Cleanup branches

Delete stale branches

yarn start doesnt work

Expected behavior

start the development environment run yarn start

Actual behavior

error Command "start" not found.

Steps to reproduce

1. Open your command line/terminal/bash
2. Navigate to the project folder
3. Run yarn install
4. Run yarn start

Rename icon.scss to icon.tpl

Expected behavior

After cloning the project will build without warnings.

Actual behavior

Warning in IconFont task: file does not exist, src/resources/scss/fonts/iconfont/_icons.tpl
Renaming src/resources/scss/fonts/iconfont/_icons.scss to _icons.tpl will fix this.

Steps to reproduce

1. clone project
2. yarn install
3. yarn start
4. enjoy your warning

Specifications

• Biotope Version: 5.4.0
• Node Version: >=8.9.0
• Yarn Version: >=1.4.0
• Operating System: Windows

@dweiger : was changed in biotope-build (biotope/biotope-build#102) but not adjusted in biotope-boilerplate

add watchScss to projectConfig

Expected behavior

Live reload

Actual behavior

stop and start npm for effecting changes

Steps to reproduce

1. start npm
2. change style
3. reload website

Specifications

• Biotope Version: 6.2.0
• Node Version: 11.13
• Yarn Version:
• Operating System: macOS 10.14.5
• Browser & Version: Firefox Developer Edition 68.0b11

Implement testing possibilities to test typescript

Current:
We have no default testing for ts/js unit tests.

Wish:
There is an easy method to register tests and have them run automagically.

Fix system

Currently the boilerplate may not run after clone. Please ensure this usecase.

Add react/vue demo

The prototype in the beta branch is now ready.
https://github.com/biotope/biotope/tree/beta/
We can add a demo implementation of a simple React/Vue App component.

@koepferd there you go 👍

Extract demo components to demo branch

Currently there are still "Demo" components in the master branch. We should move them to the demo branch.

Move biotope-generator to own repository

Move the biotope component generator to its own npm package and repository.

https://github.com/biotope/biotope/tree/beta/generators

Adding NPX to biotope-boilerplate

Expected behavior

having NPX installed via npm install from the start on

Actual behavior

NPX needs to be installed manually

Steps to reproduce

1. clone boilerplate
2. generate a new component
3. NPX is temporarily installing to generate the component each time

Specifications

• Biotope Version: 6.2.0
• Node Version: 11.13
• Yarn Version:
• Operating System: macOS 10.14.5
• Browser & Version: Firefox Developer Edition 68.0b11

remove the old configuration from biotope and include it as external dept

https://github.com/biotope/biotope-configuration

Move helpers to own repo

Current:

The jquery/js helpers are delivered with the biotope.

Wish:

The helpers are required as modules from their own repositories.

Enable "Snyk" for Security Checks on all Repositories

Snyk is a security checker for NPM Dependencies that could be used to identify security risks within the Biotope-Ecosystem.

It is free for open-source projects and could therefore be easily connected with all of biotopes repositories.

For more info see the website:
https://snyk.io/

Just a suggestion ;)

Typescript. JavaScript heap out of memory.

Start with gulp serve.

After view times webpack:ts runs it takes longer and longer and at some point running into:

Starting 'webpack:ts'...
<--- Last few GCs --->

[13936:0000020A1C0B82A0] 2906109 ms: Mark-sweep 1410.9 (1461.0) -> 1410.9 (1461.0) MB, 1618.4 / 0.0 ms last resort GC in old space requested

<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 000003CDEB725EE1
2: /* anonymous /(aka / anonymous */) [C:<projectPath>\ui-privatkunden-frontend-framework\node_modules\typescript\lib\typescript.js:20797] [bytecode=0000012474DB12A9 offset=3](this=000001CA07782311 ,ElementKind=
0000012985E5CA71 )
4: bindObjectLiteralExpression(aka bindObjectLiteralExpression) [C:\Users...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
1: node_module_register
2: v8::internal::FatalProcessOutOfMemory
3: v8::internal::FatalProcessOutOfMemory
4: v8::internal::Factory::NewTransitionArray
5: v8::internal::EhFrameIterator::DecodeSLeb128
6: v8::internal::JSReceiver::GetOwnPropertyDescriptor
7: v8::internal::JSReceiver::GetOwnPropertyDescriptor
8: v8::internal::JSReceiver::GetOwnPropertyDescriptor
9: v8::internal::JSReceiver::class_name
10: v8::internal::JSReceiver::GetOwnPropertyDescriptor
11: v8::internal::LookupIterator::PrepareTransitionToDataProperty
12: std::vector<v8::internal::compiler::MoveOperands * __ptr64,v8::internal::ZoneAllocator<v8::internal::compiler::MoveOperands * __ptr64> >::_Reallocate
13: std::vector<v8::internal::compiler::MoveOperands * __ptr64,v8::internal::ZoneAllocator<v8::internal::compiler::MoveOperands * __ptr64> >::_Reallocate
14: std::vector<v8::internal::compiler::MoveOperands * __ptr64,v8::internal::ZoneAllocator<v8::internal::compiler::MoveOperands * __ptr64> >::_Reallocate
15: std::vector<v8::internal::compiler::MoveOperands * __ptr64,v8::internal::ZoneAllocator<v8::internal::compiler::MoveOperands * __ptr64> >::_Reallocate
16: 0000014AEA2847A1

Add global biotope object ts interface

Add an interface for the global biotope object describing biotope.configuration and similar.

Race condition (resourceloader, slotted elements, polyfills)

Expected behavior

Slotted components work with resource-loader and polyfill.
 

Actual behavior

Slotted components don't work with resource-loader and polyfill.

Specifications

  - Biotope Version: 6
  - Browser & Version: IE11, Edge, Firefox ESR

 

Use jsonschema to define component data structure

http://json-schema.org

Create Issue Template

Current

There is no issue template

Wish

We have an issue template on github

Move the new biotope-core

Move the new biotope-core to its own project

https://github.com/biotope/biotope/tree/beta/src/resources/ts/core
https://github.com/biotope/biotope/tree/beta/src/resources/ts/state

@timomayer @janrembold what do you think?

RFC: vNext

@tiagomapmarques I would propose a change in the folder structure for vNext in comparison to your v7 branch:

In my opinion, there should be only a components and a common folder (you called it services)

What do you think @biotope/core-enforcer ?

CDN and local version of jQuery in use

Currently jQuery is included in two different ways:

• loaded from CDN (index.hbs, browserSupport.hbs)
• local jQuery module (included in every layout/page)

RFC: Get rid of the resources folder

I propose to get rid of the resources folder, as everything should live inside a component to guaranty reusability. This ticket is for discussion around that topic and for collection of risks.

Make it possible to work offline

Currently there is no way of working offline (in train) because bootstrap and jquery are only loaded from CDN

We should have a local fallback version in case of no internet.

Compile/Watch .scss in components folder

Expected behavior

Sass get's compiled if there's no underscore and it should trigger a build if there's no underscore

Actual behavior

In case you include it in resources, it works when saving the entrypoint file.

Steps to reproduce

1. Checkout project and just use it.
2. Create a scss file somewhere in src/components/<componentname>/styles.scss
3. Run npm start check for a compiled file.

Specifications

• Biotope Version: 6
• Node Version: 11
• Operating System: Mac OS

Make port configurable in projectConfig

I sometimes need to run two projects locally at the same time. Because biotope-build's serve process uses port 9000 by default, that's not possible without changing the used port. Currently it's possible to change it in biotope-build's config.js file. However, because that's a change in the node_modules folder, it gets lost upon every yarn install execution.
My suggestion: make the port configurable in the projectConfig.js file like a lot of other features are.

Add documentation for adding biotope element

Add documentation on how to add biotope element to older projects.

Basically:

1. npm install @biotope/element
2. Add types to import styles in TS files

Update the patterns section of the readme

The local typescript demos src/resources/ts/jquery.plugin.advanced.ts and src/resources/ts/jquery.plugin.simple.ts referenced in the README file ('Patterns' section) do not exist.
Also, the jQuery section references the wrong file (/patterns/jquery.typescript.boilerplate.ts)
Does this whole section need to be updated?

Update readme - remove global gulp

It is not necessary to install global gulp if we use the script property in package.json to call "gulp build" with "yarn run build". We can remove this global requirement from the readme.

Move from normalize to sanitize

As normalize seems to be abandoned at the moment, we could move on and use sanitize. It's almost the same and it fixes the main Element for IE11 :)

Translate german part of the migration document.

The MIGRATION.md has some german party in it. We should translate that part!

Error running npm start with Node 12.1.0

Expected behavior

When entering "npm start" the server should be fired up and I can view the start page.

Actual behavior

I get an error message and the server is not started.

PS C:\...> npm start
> [email protected] start C:\projects\vi\biotope-for-non-biotopers\biotope-boilerplate
> gulp serve

fs.js:27
const { Math, Object, Reflect } = primordials;
                                  ^
ReferenceError: primordials is not defined
    at fs.js:27:35
    at req_ (C:\projects\vi\biotope-for-non-biotopers\biotope-boilerplate\node_modules\natives\index.js:143:24)
    at Object.req [as require] (C:\projects\vi\biotope-for-non-biotopers\biotope-boilerplate\node_modules\natives\index.js:55:10)
    at Object.<anonymous> (C:\projects\vi\biotope-for-non-biotopers\biotope-boilerplate\node_modules\vinyl-fs\node_modules\graceful-fs\fs.js:1:37)
    at Module._compile (internal/modules/cjs/loader.js:759:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at Function.Module._load (internal/modules/cjs/loader.js:555:12)
    at Module.require (internal/modules/cjs/loader.js:666:19)
    at require (internal/modules/cjs/helpers.js:16:16)

Probably caused by: "Gulp 3 is broken on Node 12"
gulpjs/gulp#2324

Steps to reproduce

1. Install node version 12.1.0
2. npm install -g npx
3. npx @biotope/cli init
4. goto project folder
5. npm start

Specifications

• Biotope Version: 6.0.0
• Node Version: 12.1.0
• Yarn Version: n/a
• Operating System: Win 10
• Browser & Version: n/a

SCSS IntelliSense throws UnhandledPromiseRejectionWarning when starting serve process

Expected behavior

No errors thrown.

Actual behavior

The following error comes up in the VSCode SCC IntelliSense log:
[Error - 09:27:55] (node:13924) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): Error: ENOENT: no such file or directory, stat 'c:\Users\lukas.mueller\Documents\dev\biotope\src\resources\scss\utilities\functions.scss'

Steps to reproduce

1. Open (clean) biotope project in VSCode
2. yarn start
3. check SCSS IntelliSense output

Specifications

• Biotope Version: 5.4.0
• Node Version: 8.10.0
• Yarn Version: 1.7.0
• Operating System: Windows 10 Pro (Version 10.0.16299 Build 16299)
• VSCode Version: 1.25.0-insider

projectConfig.js wrong value for 'project'

Expected behavior

https://github.com/biotope/biotope-boilerplate/blob/6.0.0/projectConfig.js
I would expact 'Biotope 6' here.

Actual behavior

VI Frontend Framework 5

Steps to reproduce

https://github.com/biotope/biotope-boilerplate/blob/6.0.0/projectConfig.js

• Biotope Version: 6.0.0

rename the repo

Expected behavior

i expect to have a rough understanding of what a repo is for by reading its repo name.

Actual behavior

biotope/biotope confuses. i suggest to rename it to biotope/biotope-seed, biotope/biotope-boilerplate ?

Wrong path to component scaffolding in layout.default.hbs

Expected behavior

The path to the scaffolding of the components goes in line with the files that biotope CLI generates:
{{bioInclude 'components/XHeader/scaffolding/XHeader' }}
and
{{bioInclude 'components/XFooter/scaffolding/XFooter' }}

Actual behavior

Specifications

• Biotope Version: 7.0.0

Dependency 'vi-css-helper' not found when performing 'yarn install'

https://github.com/frontend-framework/frontend-framework/blob/a383536f08d37ca2c41a298507fbf69129c3f323/package.json#L31

IMHO the path should point to: https://github.com/virtualidentityag/vi-css-helper#1.1.1

Yarn start does not work on windows

On windows yarn start does not work and exit with an error.

C:\dev\frontend-turbo-diesel\node_modules\.bin\gulp:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Function.Module.runMain (module.js:693:10)
    at startup (bootstrap_node.js:188:16)
    at bootstrap_node.js:609:3

Which is granted under scripts in the package.json

Problem occures because the given path "node node_modules/.bin/gulp" selects a file which is not processable with windows.

Quickfix: Change path to "node node_modules/gulp/bin/gulp"

We need to discuss if this a valid solution or if we need some better solution.

Resource Loader not dispatching event "resourcesReady"

Expected behavior

If you use the resource loader in a component and every resource got loaded it should fire an event for completion, e.g. to initialize components with data-init

Actual behavior

Event is not fired, the first file the resource loader picks up is stuck in the queue.

Steps to reproduce

1. Checkout
2. Create a component and some js/ts file include it via the resource loader
3. Watch src/resources/ts/main.ts for the event

Specifications

• Biotope Version: 6
• Node Version: 11
• Operating System: Mac OS

extendable hbs templates

consider using https://github.com/shannonmoeller/handlebars-layouts so hbs templates can be easly (for use in different projects)

Add documentation for assets

There's missing documentation on how biotope behaves regarding copying assets in the component folder.

The behaviour is as followed:
All folders and files with and _ are ignored, as well as scss and ts files. They'll get transpiled and put back in the folder 👍
Everything else is copied over, the folder structure stays the same.

vNext: move host mixin enhancement bag to the element repo

The current vNext branch has a separate host mixin. We should keep it in one location.

✏️ Typo in README.md

Expected behavior

In README.md file, "Definition Ecosystem vs. Ecosystem Framework" section point one should be "web applications user interface"

Actual behavior

Currently, it is "webaaplications user interface"