angulardart-community / angular_components Goto Github PK

View Code? Open in Web Editor NEW

This project forked from angulardart/angular_components

20.0 20.0 13.0 39.13 MB

High-quality Material Design components for AngularDart.

Home Page: https://gallery.angulardart.xyz

Dart 75.98% HTML 4.46% Shell 0.25% SCSS 18.17% Mustache 1.14%

angulardart dart-web dartlang hacktoberfest material-design web

angular_components's Introduction

AngularDart Community Website/Documentation

The official repo has been archived and doesn't allow any changes, hence I created this fork so that we, the AngularDart community, can work on improvements by ourselves (and perhaps have our own documentation site?).

Feel free to create & submit ANY issues and pull requests! Nothing is too small to fix, even just a typo :)

A more modern and up-to-date new website is on its way!

The AngularDart community-maintained documentation site, built with Jekyll and hosted on Firebase Hosting.

We welcome contributions, and we're first-timer friendly!

Our main focus now is to keep the version of the website up-to-date with the latest version of AngularDart, but as stated above, feel free to submit anything. See the migration guide for more info!

For simple changes (such as to CSS and text), you probably don't need to build this site. Often you can make changes using the GitHub UI.

If your change involves code samples, adds/removes pages, or affects navigation, you'll need to build and test your work before submitting. If you want or need to build the site, follow the steps below.

Before you build this site

Windows users might find themselves having trouble building this site because they can't run .sh files. We're currently migrating the workflows from using gulpjs to Dart's grinder, which will do everything in Dart and resolve this problem. Sorry Windows users! (and how about considering using linux in the meantime?) We have migrated (most) workflows to Dart and Docker, so Windows users should be able to build the site now. But seriously, considering switching to Linux?

Also, if you do a full-site build, it takes up about 2~3GB of space. Hard Drive Lives Matter!

1. Get the prerequisites

Install the following tools if you don't have them already.

Docker. We use Docker for local development and building the site. Install it from https://docs.docker.com/get-docker/.
GNU Make. On Windows the easiest way to install Make is choco install make using command prompt or powershell as an admin. Other options include using a [subsystem][wsl].

2. Clone this repo and its submodule

NOTE: This repo has a git submodule, which affects how you clone it.

To clone this repo (site-angulardart), follow the instructions given in the GitHub help on Cloning a repository, and choose one of the following submodule-cloning techniques:

Clone this repo and its submodule at the same, use the --recurse-submodules option:
git clone --recurse-submodules https://github.com/angulardart-community/site-angulardart.git
If you've already cloned this repo without its submodule, then run this command from the repo root:
git submodule update --init --remote

IMPORTANT: Whenever you update your repo, update the submodule as well:
git pull; git submodule update --init --remote

Some common problems that might occur during this process (Linux/Mac only; for Windows please open an issue):

dart pub get getting stuck for hours, usually on dart_style.

Solution: before running all the steps above, run the following in the project root:
```
pub global activate webdev
pub global activate dartdoc
pub get
```

Building this site

(Optional) Build the container image from scratch. If you don't have the hard drive space to do so or you just want to quickly see how it looks, you can skip this step and use the image we provide on GitHub. However, if you're changing dependencies, you must run this step to update the dependencies in the image.
```
make setup
```
Serve the site locally (via docker compose).
```
make up
```
View your changes in the browser by navigating to http://localhost:5000.

Note: Unless you're editing files under site-shared, you can safely ignore ERROR: directory is already being watched messages. For details, see #1363.
Make your changes to the local repo.

The site will rebuild and the browser will autoreload to reflect the changes.
Tip: If you aren't seeing the changes you expect (e.g. src/_data), ctrl-C out of your running dev server and rebuild the site from scratch using the following commands:
```
$ make down && make clean && make up
```
When you've finished developing, shut down the Docker container:
```
$ make down
```

For more advance usage, see below

NOTE: Getting jekyll | Error: Too many open files under MacOS or Linux? One way to resolve this is to add the following to your .bashrc:
 ulimit -n 8192
and then reboot your machine.

Other useful `grinder` tasks

To see the full list of workflow commands available, run grind --help. Below are a few handy ones that you'll likely use to make your life easier. (More coming soon!)

grind clean # Clean build artifacts

angular_components's People

Contributors

Stargazers

Watchers

Forkers

dukefirehawk afpatmin giorgiofran meynety gzgavinzhao dougreese jodinathan igorbabalich informma dafinoer eddiekamau wchua darkstarx

angular_components's Issues

Package 'ngdart'. Dart version 3.0 ?

I saw that there is already a beta of this package, with Dart version 2.18.
Will the 'ngdart' package ever have a Dart 3.0 version ? And if so, when?

Warnings: doesn't use "ChangeDetectionStrategy.OnPush"

Many warnings at compile time due to ChangeDetectionStrategy.OnPush

All following components should use OnPush change detection:

MaterialTreeDropdownComponent
MaterialTreeComponent
DelayedContentComponent

Probably better to wait for null safety migration before we address that

Change links in gallery to redirect to this repo

Currently all links such as "view source code" redirect to the master repo. This should be changed.

Also I would like to remove any Google reference, otherwise the folks at Google will refuse to put the gallery on their website or repos. This should be a trivial change, so I'm including it in this issue.

Potential issues with Popups

This only applies to the v2.0.0-dev.X series alpha release (I.e. the dev and new-dev branches). Please try using these branches in your projects and tell us whether this is indeed an issue!

In my opinion, the current null safety implementation of ZIndexer has a caveat:

@JS()
library angular_components.css.acux.zindexer;

import 'package:angular/angular.dart';
import 'package:js/js.dart';

@JS('acxZIndex')
external int get _currentZIndex;

@JS('acxZIndex')
external set _currentZIndex(int value);

/// The layout tools will monotonically increment the zIndex for hoverable
/// elements.
const int hoverableAutoIncrement = 1000;

/// This allows a monotonically increasing z-index for hoverable elements. This
/// works around the problem where setting a static z-index for newly shown
/// elements will sometimes show up underneath existing elements.
@Injectable()
class ZIndexer {
  static ZIndexer? _currentInstance;

  static void _initZIndex() {
    if (_currentZIndex == null) {
      _currentZIndex = hoverableAutoIncrement;
    }
  }

  factory ZIndexer() {
    return _currentInstance ??= ZIndexer._();
  }

  ZIndexer._() {
    _initZIndex();
  }

  /// Increment and get the current z-index.
  int pop() => ++_currentZIndex;

  /// Peek at the current z-index without changing it.
  int peek() => _currentZIndex;
}

In the function _initZIndex(), _currentZIndex can never be null. However, according to testing with the non-null-safety version (the default template project created by ngdart is enough; after entering an item, hover above the checkbox), when the first time ZIndexer is used, _currentZIndex is definitely null. Therefore, _currentZIndex is never set to hoverableAutoIncrement and just seems to be... a random number? However, I don't see any errors or weird behaviors when I test the current implementation.

Just putting this problem out here for now. I will do some further investigation tomorrow.

Affected components:

material-popup, which in turn means:
material-dropdown-select
material-tooltip
Anything that does popup-related actions.

MaterialTooltipDirective missing providers

Currently on the latest compatible branch 25d6c64.

When building the template app provided by ngdart, the following run-time error throws on MaterialToolTipDirective:

EXCEPTION: No provider found for DomPopupSourceFactory:
  MaterialTooltipDirective ->
  DomPopupSourceFactory.
**NOTE**: This path is not exhaustive, and nodes may be missing in between the "->" delimiters. There is ongoing work to improve this error message and include all the nodes where possible. 
STACKTRACE: 
dart:sdk_internal 4861:11                                                              throw_
package:angular/src/di/injector.dart 195:7                                             get
package:angular/src/core/linker/views/host_view.dart 213:28                            injectFromAncestry
package:angular/src/core/linker/views/view.dart 208:16                                 inject
package:angular/src/core/linker/views/render_view.dart 112:7                           injectFromAncestry
package:angular/src/core/linker/views/view.dart 208:16                                 inject
package:angular/src/core/linker/views/render_view.dart 112:7                           injectFromAncestry
package:angular/src/core/linker/views/view.dart 208:16                                 inject
package:angular/src/core/linker/views/view.dart 160:20                                 injectorGet
package:testgallery/src/todo_list/todo_list_component.template.dart 405:97             <fn>
package:angular/src/di/errors.dart 39:22                                               debugInjectorWrap

MaterialToolTipDirective doesn't seem to have the correct providers. I tried to manually inject the missing providers, but I ended up with error because Window cannot be constructed. This probably shouldn't be in the constructor?

/// An ink-based tooltip which can be attached to any element.
@Directive(
  selector: '[materialTooltip]',
  providers: [tooltipControllerBinding],
)
class MaterialTooltipDirective extends TooltipTarget
    implements OnDestroy, OnInit, AfterViewInit {
  final _disposer = Disposer.multi();
  final ComponentLoader _viewLoader;
  final ChangeDetectorRef _changeDetector;
  final String _popupClassName;
  final Window _window; // Hmmm... I thought maybe we can just use the top-level `window` property.

  String _lastText;
  bool _isInitialized = false;
  Tooltip _tooltip;
  bool _canShow = true;
  bool _isShown = false;
  MaterialInkTooltipComponent _inkTooltip;
  DelayedAction _delayedActivate;
  HtmlElement element;
  bool inLongPress;
  bool _hostListenersAttached = false;

  ComponentRef _componentRef;

  MaterialTooltipDirective(
      DomPopupSourceFactory domPopupSourceFactory,
      ViewContainerRef viewContainerRef,
      this.element,
      this._viewLoader,
      this._changeDetector,
      this._window,
      @Attribute('initPopupAriaAttributes') String initAriaAttributes,
      @Attribute('tooltipClass') String tooltipClass)
      : _popupClassName =
            constructEncapsulatedCss(tooltipClass, element.classes),
        super(domPopupSourceFactory, viewContainerRef, element,
            initAriaAttributes ?? 'false') {
    inLongPress = false;
    _delayedActivate = DelayedAction(tooltipShowDelay, _activate);
  }
}

@lejard-h

@dukefirehawk This might also affect you, so just to let you aware of this.

StreamController are not closed.

While digging through the code I have noticed that the StreamController are not closed.

Ie date_input.dart:

final _controller = StreamController<Date?>.broadcast();

Shouldn't we close it within ngOnDestroy to not have a memory leak?

I guess it would be better if we attach it into Disposer and let it clear the stuff.

Sass deprecated division operator

Still using deprecated division operator that will be remove in Dart Sass 2

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($mat-grid-type, 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
131 │   padding: $mat-grid-type / 4 $mat-grid-type / 2;
    │            ^^^^^^^^^^^^^^^^^^
    ╵
    - 131:12  root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($mat-grid-type, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
131 │   padding: $mat-grid-type / 4 $mat-grid-type / 2;
    │                               ^^^^^^^^^^^^^^^^^^
    ╵
    - 131:31  root stylesheet

[INFO] 10.0s elapsed, 496/497 actions completed.DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($mat-grid-type, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
98 │         margin: $mat-grid-type / 2 0 0;
   │                 ^^^^^^^^^^^^^^^^^^
   ╵
    - 98:17  root stylesheet

Max rows of input multiline does not work

This also happens in the google version of the gallery: https://angulardart.github.io/angular_components/#/material_input.

The max rows is set to 4 but it doesn't show the error when you add more lines.

I think we can consider this low priority.

Update Angular packages to ngdart and ng<name>

In order to be able keep development and publishing of new packages by AngularDart Community,
Angular libraries were renamed (to ngdart, ng).
Now there is a need to update references to these new packages in angular_components.

material-calendar-picker is not showing the current date and is not selectable

I am not sure if this is a bug or intended. It happens at the google version of the gallery as well: https://angulardart.github.io/angular_components/#/material_datepicker

You need to scroll down the calendars to see the chosen dates as you can see in this image:

The calendar itself starts at the year of 2011.

Also, the dates have the pointer cursor like you could choose dates, but clicking does nothing.

So I think we should remove the pointer cursor and make the calendar start at a reasonable date close to the selection so the selection is in the view.

Can't bind to "XXX"

The current faulty components are:

I ran the build (here's the log, if it would be useful). Ignore the Sass warnings for now.

The argument type 'Object' can't be assigned to the parameter type xxx

Such errors probably happening because OpaqueToken are not typed

ex:

// this
const overlayContainerName = OpaqueToken('overlayContainerName');

// should be
const overlayContainerName = OpaqueToken<String>('overlayContainerName');

Ready for publish

I believe the current version in the master branch is almost ready for publish. This issue is for tracking some last issues that we might have to deal with.

I have only three things that we have to agree on:

#50 and #51 are two bugs that already exist in the upstream, so I think we can safely ignore them for now.
Rename the package to ngcomponents. To prevent causing trouble to the migration process, a separate branch used only for publishing will be created from the current master. ngcomponents can be a drop-in replacement for users who want to use angular_components with the latest Angular 7. All they have to do is the change the pubspec.yaml and all occurrences of package:angular_components to package:ngcomponents. This package will be published under the domain angulardart.xyz.
Update the full CHANGELOG. @jodinathan resolved the deprecated API, so he is probably the person who is most familiar with what got removed during the process. Rest of the changes were mainly made by @lejard-h, so maybe you guys can work on this together?

If anyone has any other concerns or issues, feel free to mention them below!

@lejard-h @dukefirehawk @jodinathan

Null safety migration

Steps to follow

~~Upgrade observable dependency #34~~ Now using change_notifier, our own fork of observable.
#41
#24
#12

Task

Migrate core

Migrate components (After core migration)

Migrate gallery builders (Last)

angular_gallery
angular_gallery_section

How to contribute

Create an issue based on the task you want to do.
1 Task = 1 PR.
Submit PR on dev branch
Avoid change not related to null safety.
Avoid dart migrate automated migration
Migrate existing example at the same time if any
Test your component on the Gallery cd examples/angular_components_example && dart run build_runner serve web

Remove uses of deprecated API

Notable deprecations:

ElementRef => HtmlElement or Element.
All other classes that uses ElementRef in some way, such as NgRuler.
XXXComponentRenderer => XXXFactoryRenderer for more tree-shakeable code.
action => actionWithContext, but actionWithContext also seems to be deprecated in some way...
ManagedZone, Angular2ManagedZone, and all other Zone => use NgZone directly.

The following files uses deprecated API (generated from script):

100% Done!
302 out of 303 files are still using deprecated API!

When you create a pull request, please make sure to specify in your message or title which files you fixed, and reference this issue!

Nuke unnecessary branches

Ideally, there should be only two branches left: one is the dev branch, one is the main development branch that we migrate from null safety. Those who want to use it now with Angular 7 should use ngcomponents (the imports have not changed; just do a global find & replace package:angular_components -> package:ngcomponents).

I have been hesitant on this because renaming would mean that cross-referencing code between null-safety branch and dev branch might get harder. ~~I think it's just me being lazy.~~ However, after some consideration, I think renaming after the migration is done is going to be more problematic: if something bad happened during renaming, at least it will be found out during the migration; otherwise, we might have to spend a lot of time (or shot our future selves in the foot by) fixing unexpected bugs.

Probably can solve #71 at the same time.

google/observable#107

During migration we can rely on the github version of the package, but we'll probably need to fork it and publish it ourself.