@sikaeducation/ui NPM

Sika UI

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 { Markdown, Button, 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)

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.