@3dsource/source-ui 0.0.27 → 0.0.29

package/README.md

@@ -1,26 +1,43 @@
 # @3dsource/source-ui
 
-### A bunch of ui elements using angular
+A comprehensive library of Angular UI components designed specifically for 3D visualization applications. This library extends Angular Material with specialized components for 3D content interaction.
+
+## Overview
+
+The Source UI library provides Angular components that are optimized for 3D applications, offering:
+
+- Specialized UI controls for 3D scene manipulation
+- Integration with Angular Material design system
+- Responsive and accessible components
+- Consistent styling across 3D Source applications
 
 ## Installation
 
-### add peer dependencies
+### Prerequisites
+
+- Angular 19+
+- Angular Material
 
-_List of peer dependencies_
+### Peer Dependencies
+
+This library requires the following peer dependencies:
 
 ```json
 {
   "@angular/common": "^19.2.0",
   "@angular/core": "^19.2.0",
-  "@angular/material": "19.2.11"
+  "@angular/material": "19.2.11",
+  "@3dsource/source-ui-native": "^1.0.17"
 }
 ```
 
+Install peer dependencies:
+
 ```shell
   npx install-peerdeps @3dsource/source-ui
 ```
 
-### add a library
+### Library Installation
 
 ```shell
   npm i @3dsource/source-ui
@@ -28,4 +45,62 @@ _List of peer dependencies_
 
 ## Usage
 
-todo
+### Style imports
+
+Import both styles for SourceUI Native and SourceUI in your style.scss
+
+```scss
+// Source UI Native
+@use '../node_modules/@3dsource/source-ui-native/styles/source.ui.native.scss' as source-ui-native;
+// Source UI
+@use '../node_modules/@3dsource/source-ui/styles/source.ui.scss' as source-ui;`;
+```
+
+### Material settings
+
+For correct styling provide neccessary outline option for form elements in your appConfig
+
+```typescript
+{
+  provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+  useValue: { appearance: 'outline' },
+},
+```
+
+### Import
+
+Import desired component and use it in template as described in components documentation.
+
+```typescript
+import { SourceSliderGroupComponent } from '@3dsource/source-ui';
+
+@NgModule({
+  imports: [SourceSliderGroupComponent],
+})
+export class AppComponent {
+  value = signal(15);
+
+  groupValueChange(value: number) {
+    console.log('Group value changed:', value);
+  }
+}
+```
+
+```html
+<src-slider-group label="Slider Group" [min]="0" [max]="100" [step]="1" units="" [showRange]="true" [value]="value()" (groupValueChange)="groupValueChange($event)"></src-slider-group>
+```
+
+## Available Components and Examples
+
+- **[src-colorpicker](https://preview.3dsource.com/front-libraries/master/#/components/SourceBadgeComponent)** - Highly customizable colorpicker
+- **[src-modal](https://preview.3dsource.com/front-libraries/master/#/components/SourceModalComponent)** - Service modal component
+- **[src-popover](https://preview.3dsource.com/front-libraries/master/#/components/SourcePopoverComponent)** - Popover with trigger or Service
+- **[src-slider-group](https://preview.3dsource.com/front-libraries/master/#/components/SourceSliderGroupComponent)** - Advanced variant of slider
+- **[src-tabs](https://preview.3dsource.com/front-libraries/master/#/components/SourceTabsComponent)** - Tabs in two options of usage
+- **[src-tooltip](https://preview.3dsource.com/front-libraries/master/#/components/SourceTooltipComponent)** - Directive for custom tooltips
+
+## Customization
+
+Customization provided in the same way as in SourceUI Native. Whole table of CSS custom properties is available in the **[documentation site](https://preview.3dsource.com/front-libraries/master/#/components/design-tokens)**.
+
+You can see all available options and examples in **[documentation](https://preview.3dsource.com/front-libraries/master/#/components/getting-started)**