sq-ui / ng-sq-ui Goto Github PK

View Code? Open in Web Editor NEW

99.0 5.0 11.0 8.63 MB

Flexible and easily customizable UI-kit for Angular 11+

License: MIT License

JavaScript 0.43% TypeScript 68.13% HTML 21.55% SCSS 9.89%

angular typescript ui-kit ui angular6 angular-library components uikit ui-components ng-sq-ui

ng-sq-ui's Introduction

NG-SQ-UI

Simple Quality UI kit for Angular

built by developers for developers!

Docs

You will find a description of the public API for each component. The components are grouped by modules. Any properties you can see through code inspection that are left out from this documentation are for internal use and you should not rely on them.

Any types of public interfaces and services are also included.

BREAKING CHANGES:

The 2.0.1 relases of all packages are compatible with Angular 14+. If you need a backwards-compatible version, please refer to 1.x.y packages, as stated below.

Note:
For projects that use the View Engine, instead Ivy (Angular 10 ~ Angular 12), please use the following version for each package:

@sq-ui/ng-sq-ui: 1.3.3
@sq-ui/ng-datetime-picker: 1.1.2
@sq-ui/ng-sq-common: 1.1.5
@sq-ui/ng-modal: 1.1.2
@sq-ui/ng-datatable: 1.1.3

For projects that use Angular version < 9, please use the following version for each package:

@sq-ui/ng-sq-ui: 1.1.5
@sq-ui/ng-datetime-picker: 1.1.0
@sq-ui/ng-sq-common: 1.0.3
@sq-ui/ng-modal: 1.0.6
@sq-ui/ng-datatable: 1.0.3

Installation

You can clone / download this repo or install it as a node dependency.

npm i @sq-ui/ng-sq-ui@latest --save

-- or --

yarn add @sq-ui/ng-sq-ui@latest

Usage

Import the NgSqUiModule in your module:

import { NgSqUiModule } from '@sq-ui/ng-sq-ui';

and then include it in the imports array of your @NgModule() decorator:

@NgModule({
  declarations: [ //... ],
  imports: [
    NgSqUiModule,
    //...
  ],
  //...

ng-sq-ui does not come with a specific font. Including the default theme is also optional. Refer to our Live examples page.

Need a grid? We've got you covered!

Add styles to angular.json

"styles": [
  "src/styles.css",
  "./node_modules/@sq-ui/ng-sq-common/sq-ui-theme.scss",
  "./node_modules/@sq-ui/ng-sq-ui/styles/form-elements.scss",
  "./node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css",
  "./node_modules/@fortawesome/fontawesome-free/css/solid.min.css",
  "./node_modules/@fortawesome/fontawesome-free/css/regular.min.css",
],

Apply styling to the components

To use our styling just add the class="sq" on a parent element.

<body class="sq">
  <div class="row">
    <sq-input ...></sq-input>
  </div>
</body>

Dependencies

ng-sq-ui depends on:

font-awesome and immutable.js (both will be installed with ng-sq-ui)

Try it out locally

git clone [email protected]:SQ-UI/ng-sq-ui.git
npm i
npm start

-- or --

git clone [email protected]:SQ-UI/ng-sq-ui.git
yarn install
npm start

The libraries are watched automatically when you run npm start:

The TypeScript compiler for this project is configured to look for the libraries under dist/ and if dist/ does not exist, it refers to the libraries' source code. That is why you should run npm start instead of just ng serve --open - npm start removes dist/ (if it exists) and then runs ng serve --open. This prepares the compiler to listen for changes under the projects/ directory.

Support

Use NG-SQ-UI in your daily work.
Star ⭐ it if you like.
Join us on ng slack or our main SQ slack channel.
Follow us on twitter to get latest updates.
Or simply send an email to contact[at]sq-ui.xyz.
Sponsor with DevToken
Tip us with BAT from brave awards or download brave

Contribution

Want to file a bug, contribute some code, or improve documentation? Read up on our Contributing Guide before making a pull request.

LICENSE

MIT
Feel free to use and contribute to the development.

Contributors

Thanks goes to these wonderful people!

_{Plamena Radneva}
💻 📖

⚠️

✅ 📝

_{Samuil Gospodinov}
💻 📖

⚠️

📢

This project follows the all-contributors specification. Contributions of any kind welcome!

ng-sq-ui's People

Contributors

Stargazers

Watchers

Forkers

y-a-n-n pranavgupta93 e4x creativeslave jmmluna eogra7 bm0lnar ivankaloyanov heniu75 fossabot cipriansauliuc

ng-sq-ui's Issues

[!] Limit the height of the drop-down for the type ahead

[+] Update to angular 9

Migrate to angular 9

Prepare 1.1.0 release

Test ticket from Code Climate

[!] Migrate to esLint

migrate to latest esLint
remove tsLint

[+] Add from-to datetime picker selection

From community review feedback
A very frequent case with date pickers is having a from - to date to choose. It is infinitely more useful to have the option to have a separate FromToDatePicker, or a DatePicker type="from-to" which basically unites two regular date pickers, but provides their values in a single handler to make validation easier.

https://www.figma.com/file/P4QpiVvlqVriAtd4JSN9JT?node-id=1:5589#125184362

[+] Data table

Should be super awesome and easy to use.

[+] Add to input ability to pass type

Fix cognitive complexity in onUserInput method for tags input component

https://codeclimate.com/github/SQ-UI/ng-sq-ui/projects/ng-form-elements/src/lib/tags-input/tags-input.component.ts/source?from_sha=e92389f3&to_sha=827d7606

Function onUserInput has a Cognitive Complexity of 8 (exceeds 5 allowed). Consider refactoring.

This task has a bounty of 10 DEVs!

Move the core functionalities for all libraries in a separate package

[+] Nav bar

As a developer I want a nice nav bar + mobile layout.

Acceptance criteria:
This component should be part of the ng-sq-ui/common module.
Mobile layout should expand with animation.
Menu items should be configurable programmatically (e.g: as an array of objects, where one object represents a single menu item)

Reward: 0.5 DEV

[+] Add a custom textarea component

A simple web component which should wrap the native <textarea> element

Fix cognitive complexity in transformToLabelValuePairList method of typeahead component

Function transformToLabelValuePairList has a Cognitive Complexity of 7 (exceeds 5 allowed)

https://codeclimate.com/github/SQ-UI/ng-sq-ui/projects/ng-form-elements/src/lib/typeahead/typeahead.component.ts/source?from_sha=e92389f3&to_sha=827d7606

This task has a bounty of 10 DEVs!

[!] Add cursor pointer to sq-dropdown initial state

[+] Tooltips

As a developer I want to have tooltip component / directive.

Acceptance criteria:
The tooltip directive / component should be created as part of the ng-sq-ui/common module.
Tooltip should detect the edges of the screen and prevent displaying out of the window.

Reward for completing this feature: 0.5 DEV

[+] Update documentation to include live examples

Is your feature request related to a problem? Please describe.
I want to interact with the examples in the documentation.

Describe the solution you'd like
Remove GIF images. Add stackblitz.

Update to angular 12.2.4

Update to latest angular:
This includes all libraries and subprojects.

Improvements:

set all libraries to use the projects angular version instead of managing that by hand

[!] Update documentation to include SQ class

[+] Update to Angular 8

Describe the solution you'd like
Migrate code to angular 8 guide

[+] Datatable: allow the author to specify sorting functions

Wrong name of common module in documentation

Describe the bug
Title is wrong

To Reproduce
Steps to reproduce the behavior:

Go to https://sq-ui.github.io/ng-sq-ui/#/common-module

Expected behavior
To see the correct title

Fix "method_complexity" issue in projects/ng-modal/src/lib/modal/modal.component.ts

Help us improve our code quality.
Function ngOnChanges has a Cognitive Complexity of 6 (exceeds 5 allowed). Consider refactoring.

https://codeclimate.com/github/SQ-UI/ng-sq-ui/projects/ng-modal/src/lib/modal/modal.component.ts#issue_6137170aece75100010000ce

Reward for completing refactoring: 5 DEV

Allow specifying custom templates for some form components

As a consumer, I want to be able to create my own custom templates for:

sq-checkbox:
- allow creating a custom template for the label
sq-radio:
- allow creating a custom template for the label
sq-tags-input:
- allow creating a custom template for each entered item
- expose the remove method for each item in the template context, so that it can be used for custom remove buttons
sq-typeahead:
- allow creating a custom template for each option in the dropdown list
- allow creating a custom template for each selected item
- expose the remove method for each selected item in the template context, so that it can be used for custom remove buttons
sq-dropdown:
- allow creating a custom template for each option in the dropdown list
- allow creating a custom template for each selected item
- allow changing the chevron icon
all elements:
- allow usage of custom icons

Separate the modal into its own module

[+] Add custom templates for datetime picker component

I want to use custom templates and custom icons in the datetime picker component.

[!] Android device sq-tags-input does not create tag when typing space on the device keyboard

[+] Add example for datagrid scroll to bottom lazy loading

Additional context
Improve documentation. Should use the scrollToBottom directive.

Update to latest stable Angular (7.0.0)

UPDATE: dependabot

dependabot/dependabot-core#2219

[!] The integrated time-picker does not change the value returned by the datetime-picker component

Describe the bug
The value returned by the datetime-picker component does not get updated real-time when I change the hours and/or minutes of the integrated time-picker.

To Reproduce
Steps to reproduce the behavior:

Install @sq-ui/ng-datetime-picker
Include the sq-datetime-picker component with its required time-picker config
After the component is rendered, start changing the hours and/or minutes of the time-picker using the up/down arrows

Expected behavior
The hours and/or minutes of the integrated time-picker should be reflected in the value returned by the datetime-picker component.

Screenshots
No screenshots but a Stackblitz preview of the problem:
https://stackblitz.com/edit/sq-datetime-picker-timepicker-bug

Desktop (please complete the following information):

OS: Windows 10
Browser: Chrome
Version 72.0.3626.121

Smartphone (please complete the following information):
Not applicable.

Is it compatible with Mobile browsers?

[+] Progress bar

As a developer I want to have a loading bar that fills to 100%.

component
example usage in app
tests
documentation

[+] Add support for ng-add schematics

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Add support for ng-add schematics, to automate the initial setup.

Describe the solution you'd like
A clear and concise description of what you want to happen.
Refer angular material, where they have schematics support.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.
https://material.angular.io/guide/getting-started#alternative-2-angular-devkit-6-

[!] Update how we pass displayName prop to sq-typeahead

Developer should be able to specify displayName$Key that will be used for the name of the option. This key should be present in the value object.

 <sq-typeahead 
      name="trainWagons"
      formControlName="trainWagons"
      [searchResults]="availableWagons"
      (onUserInputEnd)="searchMethod($event)"
      controlLabel="Wagons*"
      displayName="wagonName"
      [multiple]="true"
      controlPlaceholder="Add or remove wagons from this train">
    </sq-typeahead>

[!] Styles not applied

In a new empty directory on computer with:

Distributor ID: Ubuntu
Description: Ubuntu 18.04.1 LTS
Release: 18.04
Codename: bionic

[email protected] /usr/share/npm
Angular CLI: 6.0.8
Node: 8.10.0
OS: linux x64
Angular:
...
Package Version

@angular-devkit/architect 0.6.8
@angular-devkit/core 0.6.8
@angular-devkit/schematics 0.6.8
@schematics/angular 0.6.8
@schematics/update 0.6.8
rxjs 6.2.1
typescript 2.7.2

I run the following commands:

npm install -g @angular/cli
ng new my-app
cd my-app
ng serve --open

everything is OK
Control + C
code . - opens VS Code
npm i @sq-ui/ng-sq-ui

in ./src/app/app.module.ts

added
import { NgSqUiModule } from '@sq-ui/ng-sq-ui';
and
NgSqUiModule, // in imports

Added styles to angular.json
"./node_modules/@sq-ui/ng-sq-ui/sq-ui-theme.scss",
"./node_modules/font-awesome/scss/font-awesome.scss"
line 25 and 75

Added
some stuff in the app.component

TS:

dropdownOptions: LabelValuePair[] = [
{
label: 'option1',
value: 'someVal1'
},
{
label: 'option2',
value: 'someVal2'
},
{
label: 'option3',
value: 'someVal3'
}
];
HTML:

Previously I run into errors in the console, but then - probably the problems were on my side. Right now the styles are not being applied. Something small that I'm missing...

[+] Date Time Picker

It would be awesome if you create a date picker, time picker and datetime picker UI components with abilities to set, get and pick a date programmatically and from the UI. This also includes date/time formatters for the UI component to be able to display date and time in different formats.

use moment.js to create underlying datepicker logic
use moment.js to create underlying timepicker logic
create UI
make UI events programatically triggerable

sq-ui / ng-sq-ui Goto Github PK

ng-sq-ui's Introduction

NG-SQ-UI

Docs

BREAKING CHANGES:

Installation

Usage

Add styles to angular.json

Apply styling to the components

Dependencies

Try it out locally

Support

Contribution

LICENSE

Contributors

ng-sq-ui's People

Contributors

Stargazers

Watchers

Forkers

ng-sq-ui's Issues

[email protected] /usr/share/npm Angular CLI: 6.0.8 Node: 8.10.0 OS: linux x64 Angular: ... Package Version

Recommend Projects

Recommend Topics

Recommend Org

Jobs

[email protected] /usr/share/npm
Angular CLI: 6.0.8
Node: 8.10.0
OS: linux x64
Angular:
...
Package Version