npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@moatamed-sce/ui-components

v0.1.5

Published

SCE Platform design system — presentational Angular components.

Downloads

291

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

lib-moatamed-scelib-moatamed-sce

Keywords

sceangulardesign-systemui-componentsrtlprimeng

Readme

@moatamed-sce/ui-components

The SCE Platform component library: around 300 standalone, presentational Angular components — RTL-first, bilingual (Arabic/English), OnPush, signal-based.

What's in it

Every component is dumb: no NgRx store, no HTTP calls of its own, state in and events out. The catalog is organised as atomic design.

  • Atoms — SceButton, SceIcon, badges, tags, chips, dividers, skeletons, progress indicators, verification badges (sce-engineering-office-verification-badge), office brand logos, account role icons.
  • Molecules — SceFormInput (a universal form field rendering text, password, select, multiselect, textarea, checkbox, radio, phone, date and datetime), cards, info fields, video player, QR code, geo-location field, account switcher.
  • Organisms — SceGenericTableComponent (config-driven table with sorting, pagination, expansion, row actions and menus), SceFilterFormComponent, SceDynamicFormComponent (builds a typed FormGroup from a field schema), ScePopupComponent, SceEmptyStateComponent, SceStatusPageComponent, file viewer, guided tour, dialogs.
  • Charts and maps — an ECharts suite and OpenStreetMap/Google map wrappers, behind optional peer dependencies.
  • Templates — page shells, auth layouts, dashboard page headers, landing layouts.

Install

npm install @moatamed-sce/core @moatamed-sce/ui-components
ng add @moatamed-sce/core

ui-components needs @moatamed-sce/core for its tokens, stylesheets and icon assets. Running ng add @moatamed-sce/core wires the stylesheet cascade, the icon assets and the providers in one step; without it, the components build but render unstyled.

Peer dependencies

Angular 21, PrimeNG 21, @ngx-translate/core 18, RxJS 7.8, and @moatamed-sce/core. echarts and ngx-echarts back the chart components; leaflet, qrcode and ngx-image-cropper are optional peers required only by the map, QR and cropper components. Exact ranges live in this package's package.json.

Quick start

import { Component, signal } from '@angular/core';
import { SceButton, SceEmptyStateComponent } from '@moatamed-sce/ui-components';

@Component({
  selector: 'app-offers',
  standalone: true,
  imports: [SceButton, SceEmptyStateComponent],
  template: `
    @if (offers().length === 0) {
      <sce-empty-state [title]="'OFFERS.EMPTY_TITLE' | translate" />
    }
    <sce-button variant="primary" [fullWidth]="false" (click)="refresh()"> Refresh </sce-button>
  `,
})
export class OffersComponent {
  readonly offers = signal<string[]>([]);
  refresh(): void {}
}

Import everything from the package root. @moatamed-sce/ui-components/atoms and the other subpaths are monorepo-only path aliases — they are not published entry points and will not resolve from npm.

Two gotchas worth knowing up front

sce-button defaults fullWidth to true. A <sce-button> with no inputs stretches to fill its container. Pass [fullWidth]="false" for an inline button — this catches almost everyone once.

Most sce-*-field components are not ControlValueAccessors. Putting formControlName on them compiles and silently does nothing: no value ever reaches your form. They expose value / valueChange instead. For reactive forms, use sce-form-input, which is a real CVA and covers most field types, or bind value / valueChange by hand.

Translations are not included

The published tarball ships only icons and stylesheets — no i18n JSON. Components reference keys like COMMON.SAVE; without your own ngx-translate dictionary they render the raw key. Supply ar.json and en.json yourself.

Styling

Components are styled with the tokens from @moatamed-sce/core. Note that --space-N is literally N pixels (--space-4 is 4px, not 16px), and that dark mode is an attribute on <html>, not a class.

Docs

License

MIT