Sika UI

Sika's UI library

Usage

npm i @sikaeducation/ui

Requires React and React DOM.

JS/TS:

// Import these once per app
import "@sikaeducation/ui/components.css"; // Static CSS styles for included components
import "@sikaeducation/ui/reset"; // App reset SCSS
import "@sikaeducation/ui/styles"; // SCSS style library

// Import these in any component
import { Button, Markdown, TextInput } from "@sikaeducation/ui"; // Component library

SCSS:

/* Use this in any component */
@use "@sikaeducation/ui/styles" as *;

button {
  padding: $sizes-s4;
  @include shadows-small;
}

SCSS Style Modules

• @sikaeducation/reset: SCSS reset
• @sikaeducation/styles: Base SCSS styles, including these namespaces:
  • sizes-*
  • colors-*
  • typography-*
  • shadows-*
  • borders-*
  • forms-*

Sika fonts are in /dist/fonts of the compiled package and should be copied into a public fonts directory on the client.

Component Library

• @sikaeducation: The Sika component library
• @sikaeducation/components.css: CSS for all components
• @sikaeducation/types: TypeScript types for components

Documentation

• https://ui.sikaeducation.com - Production
• http://localhost:6006 - Development

Development

Requires npm i -D eslint prettier.

Scripts:

• dev, d - Launch a local server on 6006
• lint, l - Lint and fix
• build - Build the component library and copy the static files
• build:watch, bw - Continuously build (for npm linked projects)
• build:storybook - Build static storybook site
• test:ci - Run all tests statically
• test, test:watch, tw - Run tests through Storybook (Server must be running)
• new <component|widget|element> <name>, new:c, new:w, new:e
  • Example: new component SearchBox

Run npm link while inside this repo to create a global symlink for that folder. Run npm link @sikaeducation/stylelint-config in a client repo to link to locally installed version (this will be overwritten on the next npm install). Then run npm run build:watch in this repo to auto-build server for real-time style updates in clients.

Aliases:

• @: ./src
• $: ./style-library

Deployment

Set NPM_TOKEN on GitHub Actions to publish. Generate it on Sika's npm page then add it to the secrets page.

Set NETLIFY_SITE_ID and NETLIFY_AUTH_TOKEN on GitHub Actions to deploy to Netlify. Get these on the Netlify apps page and add them to the secrets page.

Publish updates by incrementing the version with npm version patch|minor|major and pushing.

Static documentation deploys to Netflify, library deploys to npm as @sikaeducation/ui.