K2 Systems Web Components

Code

Dev

Run yarn storybook to start the storybook server to develop the individual react components

Build

Run yarn run build to execute the rollup.js script which builds the components into esm and cjs versions

Publish

Storybook is available at https://account-dev.k2-systems.com/web-components/

with:

user: webcomponents
pw: webcomponents

Building new components & naming conventions

To be able to use the web-components throughout differen tech-stacks, we first have to define the simple css classes and the html structure of the different components.

Below you'll find examples on how to define that structure.

After this strucuture is defined, the ReactJS components can be build, based on the css classes and HTML structure.

Sizing

All core elements (e.g. button, input, ...) should have the following sizes:

• sm -sm
• md -md
• lg -lg

If no size class is provided to the element it should default to md

e.g.

<button class="bttn bttn-primary bttn-lg">hello world!</button>

Simple components (e.g. buttons, inputs, chips)

Most of the components are build as simple html elemnts without any nesting.

To use the button component you simple add the wanted classes to the used html element.

e.g.

<button class="bttn bttn-primary">hello world!</button>

corresponding css class definition:

.bttn {
  @apply px-5 py-2 rounded-full bg-red text-white leading-[24px] inline-flex items-center;
}

.bttn-primary {
  @apply bg-red text-white hover:bg-black transition-all;
}

ReactJS (TSX) implementation:

import React, { FC } from 'react';

import { ButtonProps } from './Button.types';

const Button: FC<ButtonProps> = ({ name }) => {
  return <button className="bttn bttn-primary">{name}</span>;
};

export default Button;

nested components (e.g. switch)

Simple nested components should only consist of elements that can be accessed relatively simple with standard element selectors or if needed use the BEM naming convention, to structure said components.

<span class="switch">
  <span class="switch__thumb"></span>
  <span></span>
  <input class="switch__input" type="checkbox" />
</span>

corresponding css class definition:

/* switch/components.css */
@layer components {
  .switch {
    @apply relative inline-flex items-center h-6 rounded-full w-11 bg-red/70;

    &__thumb {
      @apply transition ease-in-out duration-200 inline-block w-4 h-4 transform bg-white rounded-full translate-x-1;
    }

    &__input {
      @apply absolute opacity-0 w-full h-full top-0 left-0 m-0 z-0 cursor-pointer;
    }
  }
}

/* switch/utilities.css */
@layer utilities {
  .switch {
    &.active {
      @apply bg-green-400;

      .switch__thumb {
        @apply translate-x-6;
      }
    }

    &.disabled {
      @apply bg-lightGrey;
    }
  }
}

ReactJS (TSX) implementation:

import React, { FC } from 'react';

import { SwitchProps } from './Switch.types';

const Switch: FC<SwitchProps> = ({ name }) => {
  return (
    <span className="switch">
      <span className="switch__thumb"></span>
      <span></span>
      <input className="switch__input" type="checkbox" />
    </span>
  );
};

export default Switch;

Higher order components (tbd)

This needs to be defined once HOCs will be introduced.