Stencil Boilerplate

App boilerplate for Stencil applications.

There is a live demo available HERE.

It features a couple of common principles and workflows that are used at the moment in the Web Apps development world:

• Routing using Stencil Router
• Redux:
  • Stencil Redux is used as basic router
  • Typed actions (as described in this article) pattern for a better typed-coding experience
  • Redux Thunk support
  • Browser extension (using Redux DevTools Extension) included for easier development
• Automated testing using Jest
• Linting:
  • TSLint
  • stylelint
  • Manually-configured rules
• Fully-configured for development using JetBrains products:
  • Code Styles
  • Run Configurations
• Full support for Progressive Web App
  • Stats offered by Lighthouse
  • 
• Auto-generated Service Worker using Workbox
• Decorators for quicker development:
  • Debounce
  • Autobind
• Translations system
  • Connected to Redux - map the translations directly as a prop
  • Named values replacement
  • Component for quicker translations
• Advanced CSS tehniques:
  • PostCSS + cssnext = <3
  • Grid layout
  • Centralized variables
  • Material-UI-based styles
• nginx configuration
• Continous integration using CircleCI

Components

The boilerplate project aims to ease the development of a project while keeping everything as simple as possible.

• Button
  • Label (optional)
  • Icon (optional)
  • Disabled State (optional)
  • Pending State (optional)
  • Background Color Palette
  • Layout adjustments (swap, full width, center)
• Checkbox
  • Label(optional)
  • Custom Icon (optional)
  • Disabled State (optional)
  • Inversed Layout (optional)
• Connected Link
  • Wrap another element in an internal link
• Dynamic Table
  • Create dynamic tables
  • Column Types
    • Index
    • Text
    • Icon
    • Button
    • Rich Text
  • Column Features
    • Label
    • Width
    • Align
    • Class Name
    • Item Class Name
• Enhanced Route
  • Can check for authorization
  • Can check the user role
  • Redirects to login page in case of unauthorized
• Icon (via SVG definitions)
• Loader Indicator
  • Multiple sizes: small, medium, large
  • Multiple styles: white background, dark background etc.
• Menu Component
  • Controlled via redux
  • Auto-adjusts using media queries
• Redirect
  • It can redirect to a specific location
  • It can render a specific component with specific props
  • By default it redirects to login page
• Rich Editor
  • Based on native implementation using contenteditable attribute
  • Has support for default values
  • Available Menu Items:
    • Bold, Italic, Underline, Strike-Through
    • Justify text, Align Left, Align Center, Align Right
    • Unordered List, Ordered List
    • Horizontal Rule
    • Link
    • Headings (H1-H6)
    • Quote-Block, Code-Block
• Text Input
  • Label (optional)
  • Available Types:
    • Text
    • Password
  • Error State with message
  • Disabled State
  • Message Container
• Translate
  • Can act as a link via url prop

Orchestrators

The orchestrators are singleton store instances which coordinate a specific piece of functionality.

• App Config
  • Global object for storing values like current language etc.
• Connected Forms
  • Inspired by redux-form
  • Automatically manage the states of a form
  • Validation
  • Supported Controls:
    • Text Input
    • Password Input
    • Rich Input
    • Checkbox
    • Submit
• Connected Router
  • Inspired by react-router-redux
  • Control the browser navigation through redux
  • Store the location globally
• Internationalization (i18n) System
• User Layer

Current Work In Progress

At the moment the following features are in work and should be finished soon:

• Connected Forms:
  • List Support
• Components:
  • Dynamic Table
  • Dropdown Menu
• Pages:
  • Projects List

TODO

1. Add message support and error state to Rich Input
2. Add message support and error state to Checkbox

Known Issues

Please note that this boilerplate is built for web apps rather than public websites. This means that stuff like server side rendering are not enabled and the styles are specifically built for WebKit-based browsers.

• Due to an issue with contenteditable items (the cursor repositions itself at the beginning of the element after a re-render), the content cannot be controlled from outside the component. It can, however receive a default value mapped to Redux.
• Automated Testing is not working
• Editing a PostCSS file is not triggering the rebuild process (PR in pending)

Credits

• Logo
  • Vexels
• Original CSS Reset
  • Eric Meyer
• Icons:
  • Material Design Icons
  • Material-UI
• Styles inspired from:
  • Material-UI
  • Marmelab
  • Flow
  • Anton Kalik
• Original Loader Indicator
  • John Louie Biñas
• nginx config rules
  • H5BP
• Original Docs:
  • Code of Conduct
  • Contributing
  • Issue Template
  • Style Guide