@unipin/angular-applet

v22.1.0

Published

a month ago

UniPin Angular Applet is an internal tool used by UniPin to build consistent and high-quality applets using the Angular framework. UniPin Angular Applet provides a set of reusable components, directives, and services that adhere to UniPin's design system.

0High
0Medium
0Low

unipin-developer

UniPin Angular Applet

UniPin Angular Applet is:

Modular, so you can import only what you need.
Configurable, allowing you to define applet metadata and structure easily.
Integrated, working seamlessly with other UniPin libraries like @unipin/angular-gql.
Multi Entry Points, supporting granular imports for better optimization.
Tree Shakeable, removing unused code to minimize bundle size.

Versions

| Angular | @unipin/angular-applet | Notes | | --- | --- | --- | | 18.x | v18.x.x | Legacy line | | 19.x | v18.x.x | Legacy compatible line | | 20.x | v18.x.x | Legacy compatible line | | 21.x | v21.x.x | Previous stable line | | 22.x | v22.x.x | Latest line |

Getting started

Step 1: Install `@unipin/angular-applet` and required peers:

npm install --save @unipin/angular-applet@22 clsx class-variance-authority tailwind-merge @ng-icons/core @ng-icons/material-icons date-fns

Use @unipin/angular-applet@21 for Angular 21 projects. Install optional peer dependencies only for the modules you use, for example @angular/cdk for dialogs/popovers, @ng-select/ng-select for select inputs, and ag-grid-angular ag-grid-community for grids.

Step 2: Provide UniPin Applet configuration (Only if using the applet container) usually in the applet projects

Standalone: Call `provideAppletConfig` function inside `ApplicationConfig` providers array:

import { provideAppletConfig } from '@unipin/angular-applet/containers';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAppletConfig({
      icon: 'icon-name',
      name: 'Applet Name',
      version: '1.0.0',
      containers: [
        {
          icon: 'container-icon',
          label: 'Container Label',
          path: '/container-path'
        }
      ]
    }),
  ]
};

Step 3: Use components

import { UpButtonDirective } from '@unipin/angular-applet/buttons';

@Component({
  imports: [UpButtonDirective],
  template: `<button upButton>Click me</button>`
})
export class MyComponent {}

Step 4: Style Configuration

Add this configuration to your styles.css:

@import 'tailwindcss';
@import 'tw-animate-css';
@source './node_modules/@unipin/angular-applet/';

/* Required only when using UpSelectComponent or UpSearchableSelectComponent */
/* @import '@ng-select/ng-select/themes/default.theme.css'; */

@custom-variant dark (&:is(.dark *));

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
}

:root {
  --radius: 0.625rem;
  --background: oklch(0.9911 0 0);
  --foreground: oklch(0.3791 0 0);

  --primary: oklch(0.6769 0.1781 44.42);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9714 0.0136 46.23);
  --secondary-foreground: oklch(0.6769 0.1781 44.42);
  --muted: oklch(0.9702 0 0);
  --muted-foreground: oklch(0.4926 0 0);
  --accent: oklch(0.9714 0.0136 46.23);
  --accent-foreground: oklch(0.6769 0.1781 44.42);
  --destructive: oklch(0.6533 0.2305 28.81);

  --ring: oklch(0.6769 0.1781 44.42);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);

  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
}
    
.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);

  --primary: oklch(0.6769 0.1781 44.42);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9714 0.0136 46.23);
  --secondary-foreground: oklch(0.6769 0.1781 44.42);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.9714 0.0136 46.23);
  --accent-foreground: oklch(0.6769 0.1781 44.42);
  --destructive: oklch(0.704 0.191 22.216);

  --ring: oklch(0.6769 0.1781 44.42);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);

  --popover: oklch(0.269 0 0);
  --popover-foreground: oklch(0.985 0 0);
}

What this configuration does:

Enables component animations
Configures light/dark mode themes
Sets up color design tokens
Defines border radius system

API

Applet Configuration

| Input | Type | Default | Required | Description | Example | | :------------- | :------------ | :------ | :------- | :-------------------------- | :-------------------------------------------------------------------------------- | | icon | string | - | true | Applet icon name | icon-name | | name | string | - | true | Applet name | Applet Name | | version | string | - | true | Applet version | 1.0.0 | | containers | Container[] | - | true | List of containers (routes) | [{ icon: 'container-icon', label: 'Container Label', path: '/container-path' }] | | enabledSetting | boolean | false | false | Enable settings menu | true |

Container Interface

| Property | Type | Required | Description | | :---------- | :------- | :------- | :------------------------------------------------------------------------- | | icon | string | true | Container icon | | label | string | true | Container label (displayed in sidebar) | | path | string | true | Route path (must start with /) | | permissions | object | false | Permission configuration { codes: string[], aggregator?: 'AND' \| 'OR' } |

Available Modules

The library is organized into secondary entry points. Import them as @unipin/angular-applet/<module>.

| Entry point | Primary exports | Purpose | | :---------- | :-------------- | :------ | | accordion | UpAccordionDirective, UpAccordionItemDirective, UpAccordionTriggerDirective, UpAccordionContentDirective | Accordion primitives. | | alert | UpAlertDirective, UpAlertTitleDirective, UpAlertDescriptionDirective, alertVariants | Inline alert UI. | | alert-dialog | UpAlertController, AlertOptions, AlertButton, AlertFormField | Programmatic alert dialog controller and types. | | approval | UpApprovalFormComponent, UpApprovalGridComponent, ApprovalService, provideApprovalEntities | Approval workflow form, grid, service, and provider helper. | | audit | UpAuditListComponent, AuditService | Audit trail list and data service. | | auth | UpPermissionDirective, authGuard, permissionGuard, authorizationInterceptor, refreshTokenInterceptor, AuthResolver, AuthService, ProfileService, PermissionService, UpUnauthorizedPage, UpLoadingPage, provideLoadingConfig | Authentication and authorization helpers. | | avatar | UpAvatarDirective | Avatar display directive. | | badge | UpBadgeDirective, badgeVariants | Badge/tag styling. | | buttons | UpButtonDirective, UpSplitButtonComponent, buttonVariants | Button and split-button UI. | | calendar | UpCalendarComponent, SingleDate, RangeDate | Calendar selection primitives. | | collapsible | UpCollapsibleDirective, UpCollapsibleTriggerDirective, UpCollapsibleContentDirective | Collapsible content primitives. | | common | up, compressImage, generateContrastColor, UpPricePipe, UpInitialPipe, UpLinkifyPipe, UpCapitalizaPipe, CountryService, CurrencyService, RateGroupCodeService, UpFileDragNDropDirective | Shared utilities, pipes, services, and file drag-and-drop. | | containers | UpAppletContainerComponent, UpColumnContainerComponent, UpContentContainerComponent, UpLazyRouteDirective, provideAppletConfig, APPLET_CONFIG, redirectToFirstMenu, AppletConfig | Applet shell, route/container helpers, and applet configuration. | | dialog | UpDialog, UpDialogRef, UpDialogService, UpDialogWrapperComponent, UpDialogTriggerDirective, UpDialogContentDirective, UpDialogContentRefDirective, UpDialogCloseDirective, provideDialogDefaultOptions, injectDialogContext | Dialog primitives, service, ref, context, and configuration helpers. | | forms | UpFormFieldComponent, UpFieldControl, UpInputDirective, UpNumberDirective, UpPasswordComponent, UpCheckboxDirective, UpRadioDirective, UpRadioGroupComponent, UpSwitchComponent, UpSelectComponent, UpOptionComponent, UpSearchableSelectComponent, UpCountrySelectComponent, UpCurrencySelectComponent, UpRateGroupCodeSelectComponent, UpDatepickerComponent, UpDateRangePickerComponent, UpTimepickerComponent, UpTimeComponent, UpPinComponent, UpImagePickerComponent, validRangeValidator, isEqualValidator, isNotEqualValidator, setValidator, toggleFormControls, TimeValue | Form controls, field wrapper, validators, and form utilities. | | froala | UpFroalaComponent | Froala WYSIWYG editor wrapper. | | grids | UpGridComponent, UpSnapshotGridComponent, GridService, rowNumberColumn, gridDefaultColDef, gridTheme, renderFlag, renderGridBadge, renderStatusBadge, GridDatasourceRefreshEvent, GridSnapshotDatasourceRefreshEvent, GridSnapshotPageInfo | AG Grid wrappers, datasource contracts, utilities, and defaults. | | infinite-scroll | UpInfiniteScrollDirective | Infinite-scroll trigger directive. | | json-viewer | UpJsonViewerComponent | JSON viewer wrapper. | | kbd | UpKbdDirective | Keyboard shortcut styling. | | loading-dialog | UpLoadingDialogController, LoadingDialogOptions | Programmatic loading dialog controller and options. | | markdown | UpMarkdownInputComponent, UpMarkdownDirective | Markdown editor and renderer. | | micro-frontend | bootstrap | Bootstrap helper for Angular custom-element micro frontends. | | popover | UpPopoverComponent, UpPopoverTriggerDirective, UpPopoverContentDirective, UpPopoverContentRefDirective, UpPopoverCloseDirective, UpPopoverPlacement, UpPopoverAlignment, AttachPosition | Popover primitives and placement types. | | progress-bar | UpProgressBarDirective | Progress bar directive. | | skeleton | UpSkeletonDirective | Loading skeleton directive. | | spinner | UpSpinnerComponent | Loading spinner component. | | stepper | UpStepperComponent, UpStepperContentDirective | Responsive stepper component and content directive. | | swipeable | UpSwipeableDirective, UpSwipeableButtonDirective, UpSwipeableButtonsDirective, UpSwipeableContentDirective | Swipeable row/action primitives. | | tabs | UpTabsComponent, UpTabsTriggerDirective, UpTabsContentDirective | Tabs primitives. | | tooltip | UpTooltipDirective | Tooltip directive. |

Development

Perform the clone-to-launch steps with these terminal commands.

Run storybook

git clone [email protected]:MobileArts/unipin-applet-lib.git
cd unipin-applet-lib
npm run storybook

Release

To release to npm just run npm run publish, of course if you have permissions ;)

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme