Highsoft UI

Development

npm i
npm run dev

This will run the test application located in src that uses the component library located in lib.

Usage

1. Install the package:

npm i highsoft-ui

2. Load the the css somehow:

@import 'highsoft-ui/css';

3. Use the components:

import { Button } from 'highsoft-ui';
// ...
<Button variant="brand" size={300}>Hello</Button>

PHP

How to use components that need hydration (running client-side react) in PHP. This mostly applies to the wordpress block gang.

1. Build script

ui.tsx:

import { Header } from 'highsoft-ui';
import { render } from 'highsoft-ui/php';

render('react.php', {
  header: <Header />,
  some_other_component: <Header
    subItems={[
      {
        title: "Core",
        url: "https://www.highcharts.com/products/highcharts/",
        icon: <CoreIcon />,
      },
      {
        title: "Stock",
        url: "https://www.highcharts.com/products/stock/",
        icon: <StockIcon />,
      },
    ]}
  />
});

Run it with tsx:

npx tsx ui.tsx

2. PHP template

include_once 'react.php';
// ...
hsui_header();
?>

<div>
  <h2>Wordpress <3</h2>
  <?php hsui_some_other_component(); ?>
</div>

3. Client JS bundle

import { Header } from 'highsoft-ui';
import { hydrate } from 'highsoft-ui/php/client';

hydrate({
  header: <Header />,
  some_other_component: <Header
    subItems={[
      {
        title: "Core",
        url: "https://www.highcharts.com/products/highcharts/",
        icon: <CoreIcon />,
      },
      {
        title: "Stock",
        url: "https://www.highcharts.com/products/stock/",
        icon: <StockIcon />,
      },
    ]}
  />
});

Sub-navigation notes

Header supports a single level of secondary navigation through subItems.

Text-only items compact automatically:

<Header
  subItems={[
    { title: 'Demos', url: '/demo' },
    { title: 'Docs', url: '/docs', prefixMatch: true },
    { title: 'API', url: '/api' },
  ]}
  pathname={pathname}
/>

Icon-based items keep the taller icon layout:

<Header
  subItems={[
    {
      title: 'Demos',
      url: '/demo',
      icon: <ChartBreakoutSquare />,
      selectedIcon: <PresentationChart02 />,
    },
    {
      title: 'Docs',
      url: '/docs',
      prefixMatch: true,
      icon: <File06 />,
    },
  ]}
  pathname={pathname}
/>

Supported:

• One horizontal row of secondary navigation
• Optional icons and selected icons
• Optional short tags next to the title
• Active-state matching with pathname and prefixMatch

Not supported:

• Nested submenus or flyout menus
• Accordion or expand/collapse navigation behavior
• Multi-line or highly custom item layouts
• Perfect alignment when mixing icon and non-icon items in the same row

Formatting and linting

Prettier

• Your code is formatted on save
• No need to discuss style in code review. Stop all the on-going debates over styles
• Saves you time and energy

Stylelint

• CSS linter that helps you avoid errors and enforce conventions
• Help you avoid errors, for example:
  • invalid things, e.g. malformed grid areas
  • valid things that are problematic, e.g. duplicate selectors
  • unknown things, e.g. misspelled property names
  • disallow things, e.g. specific units

stylelint-config-standard

• Recommended and standard configs for stylelint.
• It extends "stylelint-config-recommended" and turns on additional rules to enforce modern conventions found in the CSS specifications.

lint-staged

• Allows use to run code quality tools together in a coordinated way, like prettier, eslint and stylelint.
• We use ESLint. lint-staged must run ESLint before Prettier, not after.

ESLint

• Find and fix problems in your JavaScript code
• Many problems ESLint finds can be automatically fixed. ESLint fixes are syntax-aware so you won't experience errors introduced by traditional find-and-replace algorithms
• Rules: https://eslint.org/docs/latest/rules

eslint-config-prettier

• To make ESLint and Prettier play nice with each other.
• Turns off all rules that are unnecessary or might conflict with Prettier.
• this config only turns rules off

Husky

• Automatically lint your commit messages, code, and run tests upon committing or pushing.