SCORER UI KIT LIBRARY

SCORER UI KIT is a UI components library created in react for faster web applications development.

Version 2

Our default branch is Version 2 release but we keep a legacy branch available. This version provides dark mode, the newest components and tools as well as been up to date with npm dependencies.

You can review online a React project example and test some of the components on storybook in the live page

https://future-standard.github.io/scorer-ui-kit

Enabling Dark and Light theme in your project

You can read an example about how to configure dark and light theme in the Dark Light Mode Usage document

Development

The version 2 is preferred to be run node version 18 and above due Storybook 8 support requirement.

If you want to run the project follow the next steps

• Clone repository

  git clone [email protected]:future-standard/scorer-ui-kit.git

• Install with npm version 10 node 18 or above from the root folder

  npm install

• Use npm dedupe to fix react-refresh difference between Storybook and Example project

  npm dedupe

• Run everything from the repo root. These scripts are defined in the root package.json:

  // Run ui-lib watcher + example dev server together (most common)
  npm start

  // Run ui-lib + types + example + storybook together
  npm run start:all

• Or start each workspace individually (from the repo root):

  npm run start:ui-lib     // library build watcher
  npm run start:types      // incremental .d.ts generation (optional, see below)
  npm run start:example    // example dev server
  npm run start:storybook  // storybook

Watch mode and type declarations

The ui-lib watch build skips .d.ts generation so rebuilds finish in ~50ms instead of ~10s. A full npm run build still emits declarations as usual, and your IDE continues to read types from source.

If you need live-regenerated .d.ts files during dev (e.g. consumers that resolve from dist/*.d.ts rather than source), add the incremental type watcher — either use npm run start:all from the root, or run npm run start:types alongside npm start.

Contributing

This is an open source project, if you are interested in participating please contact @atomworks or @JoshLipps.

Theres a list of issues and we recommend to pick one of the tagged Quick Wins as starter.

You can make a branch out the main, we don't have a strong preference in the naming of the branch but when submitting these changes please review the PR template.

Icons

The icons used in this UI Kit are licensed from Streamline Icons. We are able to provide a limited set in this kit with as per our license agreement. If you wish to extend the icons included in this kit yourself, we highly recommend checking those out if you want to keep a consistent style.

We tend to use the regular weighted icons and process them first to ungroup them. Then we use the above command to process them for inclusion in the UI Kit.

Image Credits

Some stock photos were used as placeholders in this UI Kit. These were sourced through Unsplash.com and we give credit for the following photographs and their photographers.

Photo by Van Thanh on Unsplash

Photo by Thomas Habr on Unsplash

License

The Scorer UI Kit is released under the MIT license.

Please note however that the icon set included in this software is included under license and remains property of Webalys LLC. These icons can be used only in the context of this open source project. For more information regarding this license, see Streamline Icons Premium License.

Release

1. Update the version in package.json in this ui-lib folder and commit it. (this can done on a branch and then merged)
2. Add a release tag with the following format: vXX.XX.XX or vXX.XX.XX-beta.x(for beta) - this should match the package.json version
3. Push the tag to Github (this should cause the release)

// Updating to v2.5.2

  git commit -m "Bump 2.5.2"
  grep version package.json
  ~  "version": "2.5.2",
  git tag v2.5.2
  git push origin v2.5.2