├── .github └── workflows │ └── tests.yml ├── .gitignore ├── .prettierrc.js ├── .storybook ├── main.js └── preview.js ├── LICENSE ├── README.md ├── babel.config.js ├── eslint.config.js ├── jest ├── config.js ├── setup.js ├── setupForEach.js └── testUtilities │ ├── index.js │ ├── renderHookWithProviders.js │ └── renderWithProviders.js ├── jsconfig.json ├── package.json ├── src ├── __mocks__ │ └── filemock.js ├── components │ ├── animation │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.test.js │ │ ├── makeAnimations.js │ │ └── makeAnimations.test.js │ ├── button │ │ ├── README.md │ │ ├── __snapshots__ │ │ │ └── button.test.js.snap │ │ ├── button.js │ │ ├── button.stories.js │ │ ├── button.test.js │ │ ├── buttonGroup.js │ │ ├── constants.js │ │ ├── iconButton.js │ │ ├── index.d.ts │ │ ├── index.js │ │ └── styled.js │ ├── checkbox │ │ ├── README.md │ │ ├── checkbox.js │ │ ├── checkbox.mock.js │ │ ├── checkbox.stories.js │ │ ├── checkbox.test.js │ │ ├── hooks.js │ │ ├── index.js │ │ └── styled.js │ ├── collapsible │ │ ├── README.md │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.stories.js │ │ └── index.test.js │ ├── confirmation-dialog │ │ ├── confirmation-dialog.d.ts │ │ ├── confirmation-dialog.js │ │ ├── confirmation-dialog.stories.js │ │ ├── confirmation-dialog.test.js │ │ ├── index.js │ │ └── styled.js │ ├── drops │ │ ├── container.js │ │ ├── drop │ │ │ ├── README.md │ │ │ ├── container.js │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ ├── index.stories.js │ │ │ ├── index.test.js │ │ │ ├── useDimensionChange.js │ │ │ └── useMakeUpdatePosition.js │ │ ├── menu │ │ │ ├── README.md │ │ │ ├── dropdown.js │ │ │ ├── dropdownItem.js │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ ├── index.stories.js │ │ │ ├── index.test.js │ │ │ └── menuButton.js │ │ ├── mixins │ │ │ ├── dropAlignMap.js │ │ │ ├── getAncestors.js │ │ │ ├── index.d.ts │ │ │ ├── isAncestor.js │ │ │ ├── useClonedChildren.js │ │ │ └── useDescribedId.js │ │ ├── popover │ │ │ ├── README.md │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ ├── index.stories.js │ │ │ └── index.test.js │ │ └── tooltip │ │ │ ├── README.md │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ ├── index.stories.js │ │ │ └── index.test.js │ ├── icon │ │ ├── README.md │ │ ├── assets │ │ │ ├── D.svg │ │ │ ├── I.svg │ │ │ ├── L.svg │ │ │ ├── N.svg │ │ │ ├── add_node.svg │ │ │ ├── add_user.svg │ │ │ ├── aggregation_avg.svg │ │ │ ├── aggregation_max.svg │ │ │ ├── aggregation_med.svg │ │ │ ├── aggregation_min.svg │ │ │ ├── aggregation_sum.svg │ │ │ ├── aggregation_sum_abs.svg │ │ │ ├── alarm.svg │ │ │ ├── alarmFilled.svg │ │ │ ├── alarm_bell.svg │ │ │ ├── alarm_c.svg │ │ │ ├── alarm_cw.svg │ │ │ ├── alarm_off.svg │ │ │ ├── alarm_w.svg │ │ │ ├── alarms_new.svg │ │ │ ├── anomalies_brain.svg │ │ │ ├── anomalies_lens.svg │ │ │ ├── anomaly_badge.svg │ │ │ ├── applications_hollow.svg │ │ │ ├── applications_solid.svg │ │ │ ├── area_chart.svg │ │ │ ├── around_clock.svg │ │ │ ├── arrow-s_down.svg │ │ │ ├── arrow-s_left.svg │ │ │ ├── arrow_down.svg │ │ │ ├── arrow_left.svg │ │ │ ├── arrow_w_line_left.svg │ │ │ ├── arrow_w_line_right.svg │ │ │ ├── arrows_vertical.svg │ │ │ ├── auth.svg │ │ │ ├── bar_chart.svg │ │ │ ├── bookmark.svg │ │ │ ├── bullet_one.svg │ │ │ ├── bullet_three.svg │ │ │ ├── bullet_two.svg │ │ │ ├── calendar_full.svg │ │ │ ├── calendar_full_press.svg │ │ │ ├── chart_added.svg │ │ │ ├── chart_bars.svg │ │ │ ├── chart_circle.svg │ │ │ ├── chart_gauge.svg │ │ │ ├── chart_pie.svg │ │ │ ├── charts.svg │ │ │ ├── charts_view.svg │ │ │ ├── check.svg │ │ │ ├── checkmark.svg │ │ │ ├── checkmark_partial_s.svg │ │ │ ├── checkmark_s.svg │ │ │ ├── chevron_double.svg │ │ │ ├── chevron_down.svg │ │ │ ├── chevron_down_thin.svg │ │ │ ├── chevron_expand.svg │ │ │ ├── chevron_left.svg │ │ │ ├── chevron_left_small.svg │ │ │ ├── chevron_left_start.svg │ │ │ ├── chevron_right.svg │ │ │ ├── chevron_right_end.svg │ │ │ ├── chevron_right_s.svg │ │ │ ├── chevron_right_small.svg │ │ │ ├── chevron_up_thin.svg │ │ │ ├── class_error.svg │ │ │ ├── class_latency.svg │ │ │ ├── class_utilization.svg │ │ │ ├── class_workload.svg │ │ │ ├── clock_5_min.svg │ │ │ ├── clock_5_min_press.svg │ │ │ ├── clock_hollow.svg │ │ │ ├── close_circle.svg │ │ │ ├── cluster.svg │ │ │ ├── cluster_spaces.svg │ │ │ ├── code.svg │ │ │ ├── collapse.svg │ │ │ ├── collect.svg │ │ │ ├── community.svg │ │ │ ├── connection_to_cloud.svg │ │ │ ├── connectivity_status_live.svg │ │ │ ├── connectivity_status_offline.svg │ │ │ ├── connectivity_status_stale.svg │ │ │ ├── container.svg │ │ │ ├── controller_kind.svg │ │ │ ├── controller_name.svg │ │ │ ├── copy.svg │ │ │ ├── correlation.svg │ │ │ ├── correlation_inv.svg │ │ │ ├── correlations.svg │ │ │ ├── cpu.svg │ │ │ ├── cross_s.svg │ │ │ ├── dashboard.svg │ │ │ ├── dashboard_add.svg │ │ │ ├── dashboard_add_chart.svg │ │ │ ├── dashboards.svg │ │ │ ├── data_retention.svg │ │ │ ├── database.svg │ │ │ ├── difference.svg │ │ │ ├── discovered_config.svg │ │ │ ├── disk.svg │ │ │ ├── documentation.svg │ │ │ ├── dot.svg │ │ │ ├── dots_2x3.svg │ │ │ ├── download.svg │ │ │ ├── drag_horizontal.svg │ │ │ ├── drag_vertical.svg │ │ │ ├── dynamic_config.svg │ │ │ ├── edit.svg │ │ │ ├── error.svg │ │ │ ├── exclamation.svg │ │ │ ├── expand.svg │ │ │ ├── favorites.svg │ │ │ ├── feed.svg │ │ │ ├── filter.svg │ │ │ ├── filterList.svg │ │ │ ├── firewall_solid.svg │ │ │ ├── force_play.svg │ │ │ ├── force_play_outline.svg │ │ │ ├── full_screen.svg │ │ │ ├── fullscreen.svg │ │ │ ├── functions.svg │ │ │ ├── gear.svg │ │ │ ├── gift_box.svg │ │ │ ├── github.svg │ │ │ ├── go_to_node.svg │ │ │ ├── google.svg │ │ │ ├── grid.svg │ │ │ ├── group_by.svg │ │ │ ├── h1.svg │ │ │ ├── h2.svg │ │ │ ├── hamburger.svg │ │ │ ├── heart.svg │ │ │ ├── heart_broken.svg │ │ │ ├── heart_hollow.svg │ │ │ ├── heatmap_chart.svg │ │ │ ├── help.svg │ │ │ ├── hide.svg │ │ │ ├── highlight_area.svg │ │ │ ├── holder.svg │ │ │ ├── importExport.svg │ │ │ ├── incident_manager.svg │ │ │ ├── information.svg │ │ │ ├── information_press.svg │ │ │ ├── insights.svg │ │ │ ├── integrations.svg │ │ │ ├── integrations │ │ │ │ ├── aws_sns.svg │ │ │ │ ├── aws_sns_colored.svg │ │ │ │ ├── discord.svg │ │ │ │ ├── discord_colored.svg │ │ │ │ ├── email.svg │ │ │ │ ├── email_colored.svg │ │ │ │ ├── ilert.svg │ │ │ │ ├── ilert_colored.svg │ │ │ │ ├── mattermost.svg │ │ │ │ ├── mattermost_colored.svg │ │ │ │ ├── mobile_app_colored.svg │ │ │ │ ├── opsgenie.svg │ │ │ │ ├── opsgenie_colored.svg │ │ │ │ ├── pagerduty.svg │ │ │ │ ├── pagerduty_colored.svg │ │ │ │ ├── push_notifications.svg │ │ │ │ ├── rocketChat.svg │ │ │ │ ├── rocketChat_colored.svg │ │ │ │ ├── slack.svg │ │ │ │ ├── slack_colored.svg │ │ │ │ ├── smseagle.svg │ │ │ │ ├── smseagle_colored.svg │ │ │ │ ├── splunk-black.svg │ │ │ │ ├── teams.svg │ │ │ │ ├── teams_colored.svg │ │ │ │ ├── telegram.svg │ │ │ │ ├── telegram_colored.svg │ │ │ │ ├── victorOps.svg │ │ │ │ ├── victorOps_colored.svg │ │ │ │ ├── webhook.svg │ │ │ │ └── webhook_colored.svg │ │ │ ├── internal_config.svg │ │ │ ├── ipNetworking.svg │ │ │ ├── ipNetworkingPress.svg │ │ │ ├── last_week.svg │ │ │ ├── line_chart.svg │ │ │ ├── line_chart2.svg │ │ │ ├── list.svg │ │ │ ├── loading.svg │ │ │ ├── logo_s.svg │ │ │ ├── logs.svg │ │ │ ├── long_arrow_up.svg │ │ │ ├── magnify.svg │ │ │ ├── metrics.svg │ │ │ ├── metrics_explorer.svg │ │ │ ├── minimize_s.svg │ │ │ ├── misc_select.svg │ │ │ ├── mobile_push_notifications.svg │ │ │ ├── mobile_push_notifications_hollow.svg │ │ │ ├── monitoring.svg │ │ │ ├── more.svg │ │ │ ├── nav_arrow_goto.svg │ │ │ ├── nav_dots.svg │ │ │ ├── nav_left.svg │ │ │ ├── nav_right.svg │ │ │ ├── netdata-press.svg │ │ │ ├── netdata.svg │ │ │ ├── netdataAssistant.svg │ │ │ ├── networking_stack.svg │ │ │ ├── node.svg │ │ │ ├── node_child.svg │ │ │ ├── node_default_l.svg │ │ │ ├── node_hollow.svg │ │ │ ├── node_import_export.svg │ │ │ ├── node_notification_l.svg │ │ │ ├── node_parent.svg │ │ │ ├── node_selected_l.svg │ │ │ ├── nodes.svg │ │ │ ├── nodes_hollow.svg │ │ │ ├── nodes_update.svg │ │ │ ├── none_selected.svg │ │ │ ├── notification.svg │ │ │ ├── notification_shortcut_disabled.svg │ │ │ ├── notification_shortcut_enabled.svg │ │ │ ├── notification_trigger.svg │ │ │ ├── okta.svg │ │ │ ├── openid.svg │ │ │ ├── os │ │ │ │ ├── alpine_linux.svg │ │ │ │ ├── amazon_linux.svg │ │ │ │ ├── arch_linux.svg │ │ │ │ ├── celarOS.svg │ │ │ │ ├── centos.svg │ │ │ │ ├── centos_colored.svg │ │ │ │ ├── coreOS.svg │ │ │ │ ├── debian.svg │ │ │ │ ├── debian_colored.svg │ │ │ │ ├── fedora.svg │ │ │ │ ├── freeBSD.svg │ │ │ │ ├── gentoo.svg │ │ │ │ ├── linux.svg │ │ │ │ ├── linux_colored.svg │ │ │ │ ├── linux_manjaro.svg │ │ │ │ ├── linux_mint.svg │ │ │ │ ├── macOSX.svg │ │ │ │ ├── oracle.svg │ │ │ │ ├── oracle_colored.svg │ │ │ │ ├── os.svg │ │ │ │ ├── os_press.svg │ │ │ │ ├── raspbian.svg │ │ │ │ ├── red_hat.svg │ │ │ │ ├── suse_linux.svg │ │ │ │ ├── ubuntu.svg │ │ │ │ ├── ubuntu_colored.svg │ │ │ │ └── windows.svg │ │ │ ├── padlock.svg │ │ │ ├── pan.svg │ │ │ ├── pan_tool.svg │ │ │ ├── pause_outline.svg │ │ │ ├── pause_solid.svg │ │ │ ├── pencil_outline.svg │ │ │ ├── pencil_solid.svg │ │ │ ├── pie_chart_skeleton.svg │ │ │ ├── pin.svg │ │ │ ├── pin_element.svg │ │ │ ├── play_outline.svg │ │ │ ├── play_solid.svg │ │ │ ├── plugins.svg │ │ │ ├── plus.svg │ │ │ ├── plus_mini_s.svg │ │ │ ├── pod.svg │ │ │ ├── pricing.svg │ │ │ ├── print.svg │ │ │ ├── privacy.svg │ │ │ ├── qr_code.svg │ │ │ ├── qualityOfService_solid.svg │ │ │ ├── question.svg │ │ │ ├── questionFilled.svg │ │ │ ├── ram.svg │ │ │ ├── rearrange.svg │ │ │ ├── reduce_size.svg │ │ │ ├── refresh.svg │ │ │ ├── reload.svg │ │ │ ├── reload2.svg │ │ │ ├── remove_node.svg │ │ │ ├── resize_handler.svg │ │ │ ├── rocket.svg │ │ │ ├── room.svg │ │ │ ├── room_home.svg │ │ │ ├── room_new.svg │ │ │ ├── room_overview.svg │ │ │ ├── sad.svg │ │ │ ├── save.svg │ │ │ ├── save2.svg │ │ │ ├── scheduled.svg │ │ │ ├── search.svg │ │ │ ├── search_press.svg │ │ │ ├── search_s.svg │ │ │ ├── select.svg │ │ │ ├── selected_area.svg │ │ │ ├── services │ │ │ │ ├── alarm.svg │ │ │ │ ├── apache.svg │ │ │ │ ├── apache_tomcat.svg │ │ │ │ ├── asterisk.svg │ │ │ │ ├── beanstalk.svg │ │ │ │ ├── bind.svg │ │ │ │ ├── containerTech.svg │ │ │ │ ├── coreDNS.svg │ │ │ │ ├── couchDB.svg │ │ │ │ ├── database.svg │ │ │ │ ├── dns.svg │ │ │ │ ├── dnsmasq.svg │ │ │ │ ├── docker_hub.svg │ │ │ │ ├── docker_hub_press.svg │ │ │ │ ├── dotnet.svg │ │ │ │ ├── eBPF.svg │ │ │ │ ├── elasticSearch.svg │ │ │ │ ├── example.svg │ │ │ │ ├── freeNAS.svg │ │ │ │ ├── haProxy.svg │ │ │ │ ├── httpCheck.svg │ │ │ │ ├── iceCast.svg │ │ │ │ ├── influxDB.svg │ │ │ │ ├── ipfs.svg │ │ │ │ ├── ipvs.svg │ │ │ │ ├── kubernetes.svg │ │ │ │ ├── lighthttpd.svg │ │ │ │ ├── lighthttpd2.svg │ │ │ │ ├── liteSpeed.svg │ │ │ │ ├── lxc.svg │ │ │ │ ├── mariaDB.svg │ │ │ │ ├── memCached.svg │ │ │ │ ├── mongoDB.svg │ │ │ │ ├── mySQL.svg │ │ │ │ ├── mySQL_press.svg │ │ │ │ ├── nginx.svg │ │ │ │ ├── nginx_local.svg │ │ │ │ ├── nginx_plus.svg │ │ │ │ ├── ntpd.svg │ │ │ │ ├── ntpd_press.svg │ │ │ │ ├── nvidia.svg │ │ │ │ ├── openStack.svg │ │ │ │ ├── openWrt.svg │ │ │ │ ├── pan.svg │ │ │ │ ├── pandas.svg │ │ │ │ ├── percona.svg │ │ │ │ ├── pfSense.svg │ │ │ │ ├── php_fpm.svg │ │ │ │ ├── postgreSQL.svg │ │ │ │ ├── prometheus.svg │ │ │ │ ├── proxySQL.svg │ │ │ │ ├── rabbitMQ.svg │ │ │ │ ├── random.svg │ │ │ │ ├── redis.svg │ │ │ │ ├── rethinkDB.svg │ │ │ │ ├── retroShare.svg │ │ │ │ ├── selected_area.svg │ │ │ │ ├── sendgrid.svg │ │ │ │ ├── services.svg │ │ │ │ ├── smartdlog.svg │ │ │ │ ├── solr.svg │ │ │ │ ├── squid.svg │ │ │ │ ├── summary_statistic.svg │ │ │ │ ├── systemd.svg │ │ │ │ ├── traefik.svg │ │ │ │ ├── varnish.svg │ │ │ │ ├── webLog.svg │ │ │ │ ├── webLog_nginx.svg │ │ │ │ ├── x509_check.svg │ │ │ │ └── xen.svg │ │ │ ├── settings.svg │ │ │ ├── settings_h.svg │ │ │ ├── share.svg │ │ │ ├── sign_in.svg │ │ │ ├── sort_ascending.svg │ │ │ ├── sort_descending.svg │ │ │ ├── sort_indicator.svg │ │ │ ├── sorting_asc.svg │ │ │ ├── sorting_desc.svg │ │ │ ├── sorting_vertical.svg │ │ │ ├── space.svg │ │ │ ├── space_new.svg │ │ │ ├── spaces_v2.svg │ │ │ ├── stacked_bar_chart.svg │ │ │ ├── stacked_chart.svg │ │ │ ├── stock_config.svg │ │ │ ├── switch_off.svg │ │ │ ├── system_overview.svg │ │ │ ├── system_overview_press.svg │ │ │ ├── text_add.svg │ │ │ ├── thumb_down.svg │ │ │ ├── thumb_up.svg │ │ │ ├── tiny_buttons.svg │ │ │ ├── top.svg │ │ │ ├── training.svg │ │ │ ├── trashcan.svg │ │ │ ├── triangle.svg │ │ │ ├── triangle_down.svg │ │ │ ├── universe.svg │ │ │ ├── unknownError.svg │ │ │ ├── unreachable.svg │ │ │ ├── unreachableNode.svg │ │ │ ├── update.svg │ │ │ ├── update_pending.svg │ │ │ ├── upload.svg │ │ │ ├── user.svg │ │ │ ├── user_config.svg │ │ │ ├── user_press.svg │ │ │ ├── users.svg │ │ │ ├── value.svg │ │ │ ├── view_list.svg │ │ │ ├── views │ │ │ │ ├── single_node_view.svg │ │ │ │ └── single_node_view_press.svg │ │ │ ├── virtualization.svg │ │ │ ├── warning.svg │ │ │ ├── warning_triangle.svg │ │ │ ├── warning_triangle_hollow.svg │ │ │ ├── weights_compare.svg │ │ │ ├── weights_drill_down.svg │ │ │ ├── x.svg │ │ │ ├── zoom_in.svg │ │ │ ├── zoom_out.svg │ │ │ └── zoom_reset.svg │ │ ├── components │ │ │ ├── index.js │ │ │ └── loader.js │ │ ├── icon.js │ │ ├── icon.stories.js │ │ ├── iconsList.js │ │ ├── iconsList.stories.js │ │ ├── index.d.ts │ │ ├── index.js │ │ └── styled.js │ ├── input │ │ ├── README.md │ │ ├── index.js │ │ ├── input.d.ts │ │ ├── input.js │ │ ├── input.mock.js │ │ ├── input.stories.js │ │ ├── input.test.js │ │ ├── multiRange │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ ├── index.stories.js │ │ │ ├── index.test.js │ │ │ └── styled.js │ │ ├── range │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ ├── range.stories.js │ │ │ ├── range.test.js │ │ │ └── styled.js │ │ ├── styled.js │ │ ├── use-focused-state.js │ │ ├── use-input-value.d.ts │ │ ├── use-input-value.js │ │ ├── use-touched-state.d.ts │ │ └── use-touched-state.js │ ├── intersection │ │ ├── README.md │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.stories.js │ │ └── index.test.js │ ├── modal │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.stories.js │ │ └── index.test.js │ ├── pill │ │ ├── alertMastercard.d.ts │ │ ├── alertMastercard.js │ │ ├── alertMastercard.test.js │ │ ├── icon.d.ts │ │ ├── icon.js │ │ ├── icon.test.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.stories.js │ │ ├── mastercard.d.ts │ │ ├── mastercard.js │ │ ├── mastercard.test.js │ │ ├── mastercardPill.d.ts │ │ ├── mastercardPill.js │ │ ├── mastercardPill.test.js │ │ ├── mixins │ │ │ ├── background.js │ │ │ ├── colors.js │ │ │ ├── height.js │ │ │ ├── padding.js │ │ │ └── width.js │ │ ├── pill.test.js │ │ └── styled.js │ ├── progressBar │ │ ├── README.md │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.stories.js │ │ └── index.test.js │ ├── radio-button │ │ ├── README.md │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.storiess.js │ │ ├── index.test.js │ │ ├── mixins │ │ │ ├── disabled.js │ │ │ └── disabled.test.js │ │ └── styled.js │ ├── search │ │ └── index.js │ ├── select │ │ ├── index.d.ts │ │ ├── index.js │ │ └── index.stories.js │ ├── sidebar │ │ ├── README.md │ │ ├── index.js │ │ ├── portal-sidebar.test.js │ │ ├── portaled-sidebar.d.ts │ │ ├── portaled-sidebar.js │ │ ├── sidebar.js │ │ ├── sidebar.storiess.js │ │ ├── sidebar.test.js │ │ └── styled.js │ ├── table │ │ ├── body │ │ │ ├── header │ │ │ │ ├── cell.js │ │ │ │ ├── filter │ │ │ │ │ ├── comparison.js │ │ │ │ │ ├── dropdown.js │ │ │ │ │ ├── index.js │ │ │ │ │ ├── search.js │ │ │ │ │ └── select.js │ │ │ │ ├── index.js │ │ │ │ ├── info.js │ │ │ │ ├── resizeHandler.js │ │ │ │ └── sorting.js │ │ │ ├── index.js │ │ │ └── row.js │ │ ├── components │ │ │ ├── action.js │ │ │ └── pagination.js │ │ ├── header │ │ │ ├── actions │ │ │ │ ├── action.js │ │ │ │ ├── columnVisibility │ │ │ │ │ ├── columnsMenu.js │ │ │ │ │ └── index.js │ │ │ │ ├── index.js │ │ │ │ └── useActions.js │ │ │ ├── groupBy.js │ │ │ └── index.js │ │ ├── helpers │ │ │ ├── downloadCsv.js │ │ │ └── filterFns.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── provider.js │ │ ├── table.js │ │ ├── table.storiess.js │ │ ├── useColumns │ │ │ ├── index.js │ │ │ ├── useRowActions.js │ │ │ └── useRowSelection.js │ │ ├── useExpanding.js │ │ ├── useGrouping.js │ │ ├── usePaginating.js │ │ ├── usePinning.js │ │ ├── useSearching.js │ │ ├── useSelecting.js │ │ ├── useSizing.js │ │ ├── useSorting.js │ │ └── useVisibility.js │ ├── tabs │ │ ├── README.md │ │ ├── __snapshots__ │ │ │ └── tabs.test.js.snap │ │ ├── index.js │ │ ├── styled.js │ │ ├── tab.d.ts │ │ ├── tab.js │ │ ├── tabs-hooks.js │ │ ├── tabs.d.ts │ │ ├── tabs.js │ │ ├── tabs.storiess.js │ │ └── tabs.test.js │ ├── templates │ │ ├── box │ │ │ ├── README.md │ │ │ ├── box.js │ │ │ ├── box.test.js │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ └── index.stories.js │ │ ├── flex │ │ │ ├── README.md │ │ │ ├── flex.js │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ ├── index.stories.js │ │ │ └── index.test.js │ │ ├── layer │ │ │ ├── README.md │ │ │ ├── backdropContainer.js │ │ │ ├── container.js │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ ├── index.stories.js │ │ │ ├── index.test.js │ │ │ └── mixins │ │ │ │ ├── backdropBlur.js │ │ │ │ ├── backdropBlur.test.js │ │ │ │ ├── getMarginDimensions.js │ │ │ │ └── getMarginDimensions.test.js │ │ └── mixins │ │ │ ├── alignContent.js │ │ │ ├── alignContent.test.js │ │ │ ├── alignItems.js │ │ │ ├── alignItems.test.js │ │ │ ├── background.js │ │ │ ├── background.test.js │ │ │ ├── border.js │ │ │ ├── border.test.js │ │ │ ├── direction.js │ │ │ ├── direction.test.js │ │ │ ├── flex.js │ │ │ ├── flex.test.js │ │ │ ├── gap.js │ │ │ ├── gap.test.js │ │ │ ├── height.js │ │ │ ├── height.test.js │ │ │ ├── index.d.ts │ │ │ ├── justifyContent.js │ │ │ ├── justifyContent.test.js │ │ │ ├── overflow.js │ │ │ ├── overflow.test.js │ │ │ ├── pseudos.js │ │ │ ├── pseudos.test.js │ │ │ ├── width.js │ │ │ ├── width.test.js │ │ │ ├── wrap.js │ │ │ └── wrap.test.js │ ├── toggle │ │ ├── README.md │ │ ├── __snapshots__ │ │ │ └── toggle.test.js.snap │ │ ├── index.js │ │ ├── styled.js │ │ ├── toggle.d.ts │ │ ├── toggle.js │ │ ├── toggle.stories.js │ │ ├── toggle.storiess.js │ │ └── toggle.test.js │ └── typography │ │ ├── README.md │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.test.js │ │ ├── list.js │ │ ├── mixins │ │ ├── index.d.ts │ │ ├── textAlign.js │ │ ├── textAlign.test.js │ │ ├── textDecoration.js │ │ ├── textDecoration.test.js │ │ ├── truncate.js │ │ ├── truncate.test.js │ │ ├── whiteSpace.js │ │ ├── whiteSpace.test.js │ │ ├── wordBreak.js │ │ └── wordBreak.test.js │ │ ├── typography.js │ │ └── typography.stories.js ├── global-styles.js ├── hooks │ ├── useColor │ │ ├── index.js │ │ └── index.test.js │ ├── useDebounce │ │ └── index.js │ ├── useDebouncedValue │ │ └── index.js │ ├── useDropElement │ │ ├── index.js │ │ └── index.test.js │ ├── useForwardRef │ │ ├── index.js │ │ └── index.test.js │ ├── useIntersection │ │ └── index.js │ ├── useKeyboardEsc │ │ ├── index.js │ │ └── index.test.js │ ├── useMeasure │ │ └── index.js │ ├── useMountedRef │ │ └── index.js │ ├── useOutsideClick │ │ ├── index.js │ │ └── index.test.js │ ├── usePrevious │ │ └── index.js │ ├── useToggle │ │ ├── index.js │ │ └── index.test.js │ └── useUpdateEffect │ │ └── index.js ├── index.js ├── media.js ├── mixins │ ├── alignSelf.js │ ├── alignSelf.test.js │ ├── controlFocused.js │ ├── controlReset.js │ ├── cursor.js │ ├── cursor.test.js │ ├── index.js │ ├── margin.js │ ├── margin.test.js │ ├── opacity.js │ ├── opacity.test.js │ ├── padding.js │ ├── padding.test.js │ ├── position.js │ ├── position.test.js │ ├── round.js │ ├── round.test.js │ ├── set-ref │ │ └── index.js │ ├── textTransform.js │ ├── textTransform.test.js │ ├── types.d.ts │ ├── utils.js │ ├── uuid │ │ ├── index.js │ │ └── index.test.js │ ├── webkitVisibleScrollbar.js │ ├── zIndex.js │ └── zIndex.test.js ├── organisms │ ├── documentation │ │ ├── README.md │ │ ├── dashboard │ │ │ ├── index.js │ │ │ ├── mouse.js │ │ │ ├── section.js │ │ │ └── touch.js │ │ ├── general.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.stories.js │ │ └── search │ │ │ ├── discourse │ │ │ ├── api.js │ │ │ └── index.js │ │ │ ├── index.js │ │ │ ├── input.js │ │ │ ├── provider.js │ │ │ ├── results.js │ │ │ └── utils.js │ ├── navigation │ │ ├── hooks │ │ │ ├── useNavigationArrows.js │ │ │ ├── useNavigationScroll.js │ │ │ └── useOnTabsResize.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.stories.js │ │ ├── sortable │ │ │ ├── arrow.js │ │ │ ├── container.js │ │ │ ├── index.js │ │ │ └── item.js │ │ ├── tab │ │ │ ├── index.js │ │ │ ├── tabSeparator.js │ │ │ ├── use-styles-tab.js │ │ │ └── use-styles-tab.test.js │ │ └── tabs │ │ │ └── index.js │ ├── news │ │ ├── README.md │ │ ├── container.js │ │ ├── header.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── index.stories.js │ │ ├── item │ │ │ ├── anchor.js │ │ │ ├── image.js │ │ │ └── index.js │ │ └── useFetchNews.js │ └── topbar │ │ └── index.js ├── theme │ ├── README.md │ ├── dark │ │ ├── colors.js │ │ └── index.js │ ├── default │ │ ├── colors.js │ │ ├── constants.js │ │ └── index.js │ ├── index.d.ts │ ├── index.js │ ├── rawColors.js │ └── utils.js └── utils │ ├── assertions.js │ ├── capitalizeFirstLetter.js │ ├── capitalizeFirstLetter.test.js │ ├── index.js │ ├── mergeRefs.js │ └── useContextSelector │ └── index.js ├── utils ├── index.js └── readme.js ├── webpack.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .vscode/ 3 | .jest-test-results.json 4 | .jest-tmp 5 | .idea 6 | node_modules 7 | public 8 | lib 9 | coverage/ 10 | dist 11 | coverage 12 | storybook-static/ 13 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | trailingComma: "es5", 3 | semi: false, 4 | tabWidth: 2, 5 | printWidth: 100, 6 | useTabs: false, 7 | singleQuote: false, 8 | arrowParens: "avoid", 9 | } 10 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | const isES6 = process.env.BABEL_ENV === "es6" 2 | const isTest = process.env.NODE_ENV === "test" 3 | 4 | module.exports = { 5 | presets: [ 6 | ["@babel/env", { loose: true, modules: isES6 ? false : "commonjs" }], 7 | "@babel/preset-react", 8 | ], 9 | plugins: [ 10 | ["styled-components", { ssr: !isTest, displayName: !isTest }], 11 | "@babel/plugin-transform-spread", 12 | "@babel/plugin-proposal-object-rest-spread", 13 | [ 14 | "module-resolver", 15 | { 16 | alias: { 17 | "@": "./src", 18 | }, 19 | }, 20 | ], 21 | ].filter(Boolean), 22 | env: { 23 | test: { 24 | presets: ["@babel/env"], 25 | plugins: ["@babel/transform-runtime"], 26 | }, 27 | }, 28 | } 29 | -------------------------------------------------------------------------------- /jest/setup.js: -------------------------------------------------------------------------------- 1 | class ResizeObserver { 2 | observe() {} 3 | unobserve() {} 4 | disconnect() {} 5 | } 6 | 7 | window.ResizeObserver = ResizeObserver 8 | -------------------------------------------------------------------------------- /jest/setupForEach.js: -------------------------------------------------------------------------------- 1 | import "jest-styled-components" 2 | 3 | afterEach(() => jest.restoreAllMocks()) 4 | afterEach(() => jest.clearAllMocks()) 5 | afterEach(() => jest.clearAllTimers()) 6 | 7 | jest.setTimeout(10000) 8 | jest.retryTimes(2) 9 | 10 | Element.prototype.getOriginalBoundingClientRect = Element.prototype.getBoundingClientRect 11 | Element.prototype.getBoundingClientRect = jest.fn(() => { 12 | return { 13 | width: 120, 14 | height: 120, 15 | top: 0, 16 | left: 0, 17 | bottom: 0, 18 | right: 0, 19 | } 20 | }) 21 | -------------------------------------------------------------------------------- /jest/testUtilities/index.js: -------------------------------------------------------------------------------- 1 | import "@testing-library/jest-dom/jest-globals" 2 | 3 | export { default as renderWithProviders } from "./renderWithProviders" 4 | export { default as renderHookWithProviders } from "./renderHookWithProviders" 5 | 6 | import userEvent from "@testing-library/user-event" 7 | export const user = () => userEvent.setup() 8 | export { userEvent } 9 | 10 | export * from "@testing-library/react" 11 | -------------------------------------------------------------------------------- /jest/testUtilities/renderHookWithProviders.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { renderHook } from "." 3 | import { ThemeProvider } from "styled-components" 4 | import { DefaultTheme } from "@/theme/default" 5 | 6 | export default (hook, { theme = DefaultTheme, ...rest } = {}) => 7 | renderHook(hook, { 8 | wrapper: props => , 9 | ...rest, 10 | }) 11 | -------------------------------------------------------------------------------- /jest/testUtilities/renderWithProviders.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { render } from "." 3 | import { ThemeProvider } from "styled-components" 4 | import { DefaultTheme } from "@/theme/default" 5 | 6 | export default (Component, { theme = DefaultTheme, ...rest } = {}) => 7 | render(Component, { 8 | wrapper: props => , 9 | ...rest, 10 | }) 11 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "exclude": ["node_modules", "./fixtures/*"], 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "paths": { 6 | "@/*": ["./src/*"] 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/__mocks__/filemock.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | const Mock = () => <>test 4 | 5 | export default Mock 6 | -------------------------------------------------------------------------------- /src/components/animation/index.d.ts: -------------------------------------------------------------------------------- 1 | import { FC, ReactNode } from "react" 2 | 3 | export interface AnimationProps { 4 | open?: boolean 5 | duration?: number 6 | persist?: boolean 7 | children: ReactNode | (() => ReactNode) 8 | [rest: string]: any 9 | } 10 | 11 | declare const Animation: FC 12 | 13 | export { Animation } 14 | 15 | export default Animation 16 | -------------------------------------------------------------------------------- /src/components/animation/makeAnimations.js: -------------------------------------------------------------------------------- 1 | import {keyframes, css} from 'styled-components'; 2 | 3 | export default ({toggle, timing = '', speed = 200, transformOrigin}) => { 4 | const makeAnimations = keyframe => css` 5 | ${transformOrigin && `transform-origin: ${transformOrigin};`} 6 | animation: ${keyframe} ${speed}ms ${timing}; 7 | `; 8 | return { 9 | entering: makeAnimations(keyframes`from { ${toggle} }`), 10 | exiting: makeAnimations(keyframes`to { ${toggle} }`) 11 | }; 12 | }; 13 | -------------------------------------------------------------------------------- /src/components/button/constants.js: -------------------------------------------------------------------------------- 1 | export const DEFAULT = "default" 2 | export const HOLLOW = "hollow" 3 | export const BORDER_LESS = "borderless" 4 | -------------------------------------------------------------------------------- /src/components/button/index.js: -------------------------------------------------------------------------------- 1 | export { Button } from "./button" 2 | export { default as IconButton } from "./iconButton" 3 | export { ButtonGroup } from "./buttonGroup" 4 | -------------------------------------------------------------------------------- /src/components/checkbox/hooks.js: -------------------------------------------------------------------------------- 1 | import { useCallback } from "react" 2 | 3 | export const useCheckboxesList = (values, handlers) => { 4 | const checked = values.every(isChecked => isChecked) 5 | const isIndeterminate = !checked && values.includes(false) && values.includes(true) 6 | 7 | const switchAllCheckboxes = useCallback(() => { 8 | if (checked) { 9 | handlers.forEach(handler => handler(false)) 10 | } else { 11 | handlers.forEach(handler => handler(true)) 12 | } 13 | }, [checked, handlers]) 14 | 15 | return [checked, isIndeterminate, switchAllCheckboxes] 16 | } 17 | -------------------------------------------------------------------------------- /src/components/checkbox/index.js: -------------------------------------------------------------------------------- 1 | export { Checkbox } from "./checkbox" 2 | export { useCheckboxesList } from "./hooks" 3 | -------------------------------------------------------------------------------- /src/components/collapsible/index.d.ts: -------------------------------------------------------------------------------- 1 | import { ReactNode } from "react" 2 | import { FlexProps } from "../templates/flex" 3 | 4 | export interface CollapsibleProps { 5 | open?: boolean 6 | duration?: number 7 | persist?: boolean 8 | children: ReactNode | (() => ReactNode) 9 | [rest: string]: any 10 | } 11 | 12 | declare const Collapsible: React.FC 13 | 14 | export { Collapsible } 15 | 16 | export default Collapsible 17 | -------------------------------------------------------------------------------- /src/components/confirmation-dialog/confirmation-dialog.d.ts: -------------------------------------------------------------------------------- 1 | import { FC, SyntheticEvent } from "react" 2 | 3 | type OnClickType = (e: SyntheticEvent) => void 4 | 5 | export interface ConfirmationDialogProps { 6 | confirmLabel?: string 7 | confirmWidth?: string 8 | "data-ga"?: string 9 | "data-testid"?: string 10 | declineLabel?: string 11 | declineWidth?: string 12 | handleConfirm: OnClickType 13 | handleDecline?: OnClickType 14 | hideIcon?: boolean 15 | iconName?: string 16 | isConfirmDisabled?: boolean 17 | isConfirmPositive?: boolean 18 | message: JSX.Element | string 19 | title: string 20 | } 21 | 22 | declare const ConfirmationDialog: FC 23 | 24 | export { ConfirmationDialog } 25 | 26 | export default ConfirmationDialog 27 | -------------------------------------------------------------------------------- /src/components/confirmation-dialog/index.js: -------------------------------------------------------------------------------- 1 | export { default as ConfirmationDialog } from "./confirmation-dialog" 2 | -------------------------------------------------------------------------------- /src/components/drops/drop/index.d.ts: -------------------------------------------------------------------------------- 1 | import { FlexProps } from "../../templates/flex" 2 | import { AlignProps, StretchProps } from "../mixins" 3 | 4 | export interface DropProps extends FlexProps, AlignProps, StretchProps { 5 | backdrop?: boolean 6 | backdropProps?: any 7 | canHideTarget?: boolean 8 | children: any 9 | hideShadow?: boolean 10 | onClickOutside?: Function 11 | onEsc?: Function 12 | target: object 13 | [key: string]: any 14 | } 15 | 16 | declare const Drop: React.FC 17 | 18 | export { Drop } 19 | 20 | export default Drop 21 | -------------------------------------------------------------------------------- /src/components/drops/mixins/dropAlignMap.js: -------------------------------------------------------------------------------- 1 | export default { 2 | top: { bottom: "top" }, 3 | left: { right: "left" }, 4 | right: { left: "right" }, 5 | bottom: { top: "bottom" }, 6 | } 7 | -------------------------------------------------------------------------------- /src/components/drops/mixins/getAncestors.js: -------------------------------------------------------------------------------- 1 | export default node => { 2 | const ancestors = [] 3 | 4 | node = node.parentNode 5 | while (node) { 6 | ancestors.push(node) 7 | node = node.parentNode 8 | } 9 | 10 | return ancestors 11 | } 12 | -------------------------------------------------------------------------------- /src/components/drops/mixins/isAncestor.js: -------------------------------------------------------------------------------- 1 | import getAncestors from "./getAncestors" 2 | 3 | export default (parent, target) => getAncestors(target).some(node => node === parent) 4 | -------------------------------------------------------------------------------- /src/components/drops/mixins/useDescribedId.js: -------------------------------------------------------------------------------- 1 | import { useMemo } from "react" 2 | import uuid from "@/mixins/uuid" 3 | 4 | export default describedby => useMemo(() => describedby || uuid(), []) 5 | -------------------------------------------------------------------------------- /src/components/drops/popover/README.md: -------------------------------------------------------------------------------- 1 | ## Popover component 2 | 3 | A popover flavored drop that is activating hovering a target element. 4 | The drop remains open while the cursor is hovering either the target or the drop content. 5 | 6 | ### Props: 7 | 8 | ```typescript 9 | interface PopoverProps { 10 | plain: boolean 11 | open: boolean 12 | align: "top" | "right" | "bottom" | "left" 13 | dropProps: DropProps 14 | content: any 15 | children: any 16 | [key: string]: any 17 | } 18 | ``` 19 | 20 | ### Typical usage: 21 | 22 | ```JSX 23 | export const SimplePopover = props => { 24 | const ref = useRef() 25 | 26 | return ( 27 | 28 | Target 29 | 30 | ) 31 | } 32 | ``` 33 | -------------------------------------------------------------------------------- /src/components/drops/popover/index.d.ts: -------------------------------------------------------------------------------- 1 | import { ReactNode } from "react" 2 | import { DropProps } from "../drop" 3 | 4 | export interface TooltipProps { 5 | plain?: boolean 6 | open?: boolean 7 | align?: "top" | "right" | "bottom" | "left" 8 | dropProps?: DropProps 9 | content: ReactNode | (() => ReactNode) 10 | children: any 11 | [key: string]: any 12 | } 13 | 14 | declare const Tooltip: React.FC 15 | 16 | export { Tooltip } 17 | 18 | export default Tooltip 19 | -------------------------------------------------------------------------------- /src/components/drops/tooltip/README.md: -------------------------------------------------------------------------------- 1 | ## Tooltip component 2 | 3 | A tooltip flavored drop that is activating hovering a target element. 4 | 5 | ### Props: 6 | 7 | ```typescript 8 | interface TooltipProps { 9 | plain: boolean 10 | open: boolean 11 | align: "top" | "right" | "bottom" | "left" 12 | dropProps: DropProps 13 | content: any 14 | children: any 15 | [key: string]: any 16 | } 17 | ``` 18 | 19 | ### Typical usage: 20 | 21 | ```JSX 22 | export const SimpleTooltip = props => { 23 | const ref = useRef() 24 | 25 | return ( 26 | 27 | Target 28 | 29 | ) 30 | } 31 | ``` 32 | -------------------------------------------------------------------------------- /src/components/drops/tooltip/index.d.ts: -------------------------------------------------------------------------------- 1 | import { ReactNode, FC } from "react" 2 | import { DropProps } from "../drop" 3 | 4 | export interface PopoverProps { 5 | plain?: boolean 6 | open?: boolean 7 | align?: "top" | "right" | "bottom" | "left" 8 | dropProps?: DropProps 9 | content: ReactNode | (() => ReactNode) 10 | children: any 11 | allowHoverOnTooltip?: boolean 12 | [key: string]: any 13 | } 14 | 15 | declare const Popover: FC 16 | 17 | export { Popover } 18 | 19 | export default Popover 20 | -------------------------------------------------------------------------------- /src/components/icon/assets/add_node.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/add_user.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/aggregation_avg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/aggregation_max.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/aggregation_med.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/aggregation_min.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/aggregation_sum.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/aggregation_sum_abs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/alarm.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/alarm_c.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/alarm_w.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/alarms_new.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/area_chart.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/around_clock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/arrow-s_down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/arrow-s_left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/arrow_down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/arrow_left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/arrow_w_line_left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/arrow_w_line_right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/arrows_vertical.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/bar_chart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/bookmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/bullet_one.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/bullet_three.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/bullet_two.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/calendar_full.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/calendar_full_press.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/chart_added.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/chart_bars.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/chart_pie.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/charts.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/checkmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/checkmark_partial_s.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/chevron_double.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/chevron_down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/chevron_down_thin.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/chevron_expand.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/chevron_left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/chevron_left_small.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/chevron_left_start.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/chevron_right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/chevron_right_end.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/chevron_right_s.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/chevron_right_small.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/chevron_up_thin.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/close_circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/cluster.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/cluster_spaces.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/collapse.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/collect.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/community.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/connectivity_status_offline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/connectivity_status_stale.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/container.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/controller_kind.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/copy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/cpu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/cross_s.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/dashboard.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/dashboards.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/disk.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/documentation.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/dot.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/dots_2x3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/download.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/drag_horizontal.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/icon/assets/drag_vertical.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/icon/assets/error.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/components/icon/assets/exclamation.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/expand.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/favorites.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/filter.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/filterList.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/firewall_solid.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/force_play.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/force_play_outline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/go_to_node.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/grid.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/group_by.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/h1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/h2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/hamburger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/icon/assets/heatmap_chart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/help.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/hide.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/holder.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/importExport.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/information_press.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/integrations/pagerduty.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/integrations/pagerduty_colored.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/ipNetworking.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/ipNetworkingPress.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/last_week.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/line_chart2.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/icon/assets/loading.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/components/icon/assets/logo_s.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/long_arrow_up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/magnify.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/minimize_s.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/misc_select.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/monitoring.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/more.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/nav_arrow_goto.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/nav_dots.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/nav_left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/nav_right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/netdata-press.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/netdataAssistant.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/node.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/components/icon/assets/node_child.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/icon/assets/node_hollow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/node_parent.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/icon/assets/nodes_hollow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/none_selected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/os/alpine_linux.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/os/coreOS.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/os/linux_manjaro.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/icon/assets/os/macOSX.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/os/oracle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/os/oracle_colored.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/os/windows.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/icon/assets/padlock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/pause_outline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/pause_solid.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/pencil_outline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/pencil_solid.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/pin_element.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/play_outline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/play_solid.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/plus_mini_s.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/pod.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/print.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/question.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/questionFilled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/ram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/rearrange.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/reload.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/reload2.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/resize_handler.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/room.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/components/icon/assets/room_home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/room_new.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/save.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/save2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/search_press.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/search_s.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/select.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/services/containerTech.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/services/lighthttpd.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/services/lighthttpd2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/services/lxc.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/services/openStack.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/services/pandas.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/services/percona.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/services/pfSense.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/services/rabbitMQ.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/services/selected_area.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/services/sendgrid.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/services/solr.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/services/summary_statistic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/services/systemd.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/icon/assets/services/varnish.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/icon/assets/services/webLog_nginx.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/sort_ascending.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/sort_descending.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/sorting_asc.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/sorting_desc.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/sorting_vertical.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/space_new.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/stacked_chart.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/switch_off.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/system_overview_press.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/text_add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/thumb_down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/thumb_up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/top.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/triangle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/components/icon/assets/triangle_down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/components/icon/assets/unreachable.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/update.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/upload.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/user.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/user_press.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/users.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/value.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/icon/assets/view_list.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/virtualization.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/weights_drill_down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/assets/x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/icon/components/index.js: -------------------------------------------------------------------------------- 1 | export { LoaderIcon } from "./loader" 2 | -------------------------------------------------------------------------------- /src/components/icon/icon.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { iconsList } from "./iconsList" 3 | import { StyledIcon } from "./styled" 4 | 5 | const getSize = filename => { 6 | if (filename.endsWith("_s")) { 7 | return "small" 8 | } 9 | if (filename.endsWith("_l")) { 10 | return "large" 11 | } 12 | return "medium" 13 | } 14 | 15 | export const Icon = ({ name, size, ref, ...rest }) => { 16 | const iconSymbol = iconsList[name] 17 | 18 | if (!iconSymbol) { 19 | return null 20 | } 21 | 22 | const iconSize = size || getSize(name) 23 | 24 | return ( 25 | 26 | 27 | 28 | ) 29 | } 30 | -------------------------------------------------------------------------------- /src/components/icon/icon.stories.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { iconsList } from "./iconsList" 3 | import { Icon } from "." 4 | 5 | export const Basic = args => 6 | 7 | export default { 8 | component: Icon, 9 | args: { 10 | name: Object.keys(iconsList)[0], 11 | size: "small", 12 | disabled: false, 13 | }, 14 | argTypes: { 15 | name: { 16 | options: Object.keys(iconsList), 17 | control: { type: "select" }, 18 | }, 19 | size: { 20 | options: ["small", "medium", "large"], 21 | control: { type: "radio" }, 22 | }, 23 | disabled: { control: "boolean" }, 24 | }, 25 | } 26 | -------------------------------------------------------------------------------- /src/components/icon/index.d.ts: -------------------------------------------------------------------------------- 1 | import { FC } from "react" 2 | import { AlignSelfProps, ColorType, MarginProps, RefType } from "@/mixins/types" 3 | 4 | export interface IconProps extends MarginProps, AlignSelfProps { 5 | className?: string 6 | color?: ColorType 7 | disabled?: boolean 8 | "data-testid"?: string 9 | height?: string 10 | hoverColor?: ColorType 11 | name: string 12 | onClick?: (arg?: any) => void 13 | ref?: RefType 14 | size?: "small" | "medium" | "large" 15 | title?: string 16 | width?: string 17 | } 18 | 19 | declare const Icon: FC 20 | 21 | export { Icon } 22 | 23 | export default Icon 24 | -------------------------------------------------------------------------------- /src/components/icon/index.js: -------------------------------------------------------------------------------- 1 | import * as IconComponents from "./components" 2 | 3 | export { IconComponents } 4 | export { iconsList } from "./iconsList" 5 | export * from "./icon" 6 | -------------------------------------------------------------------------------- /src/components/input/index.js: -------------------------------------------------------------------------------- 1 | export * from "./input" 2 | export { default as MultiRangeInput } from "./multiRange" 3 | export { useTouchedState } from "./use-touched-state" 4 | export { useFocusedState } from "./use-focused-state" 5 | export { useInputValue } from "./use-input-value" 6 | -------------------------------------------------------------------------------- /src/components/input/input.test.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { renderWithProviders } from "testUtilities" 3 | import { TextInputMock } from "./input.mock" 4 | 5 | describe("TextInput test", () => { 6 | it(" * should render with required props", () => { 7 | const { container } = renderWithProviders() 8 | const result = container.querySelectorAll("input") 9 | expect(result).not.toBeNull() 10 | }) 11 | }) 12 | -------------------------------------------------------------------------------- /src/components/input/multiRange/index.d.ts: -------------------------------------------------------------------------------- 1 | import { FC, SyntheticEvent } from "react" 2 | 3 | export interface MultiRangeInputProps { 4 | "data-testid"?: string 5 | initMax?: number 6 | initMin?: number 7 | max?: number 8 | min?: number 9 | onChange: ({ max, min }) => void 10 | onClick?: (e: SyntheticEvent) => void 11 | onInput?: ({ max, min }) => void 12 | step?: number 13 | TextComponent?: FC 14 | } 15 | 16 | declare const MultiRangeInput: FC 17 | 18 | export { MultiRangeInput } 19 | 20 | export default MultiRangeInput 21 | -------------------------------------------------------------------------------- /src/components/input/range/index.d.ts: -------------------------------------------------------------------------------- 1 | import { ChangeEvent, FC, SyntheticEvent } from "react" 2 | 3 | export interface RangeInputProps { 4 | "data-testid"?: string 5 | max?: number 6 | min?: number 7 | onChange: (e: ChangeEvent) => void 8 | onClick?: (e: SyntheticEvent) => void 9 | onInput?: (e: SyntheticEvent) => void 10 | step?: number 11 | value: number 12 | } 13 | 14 | declare const RangeInput: FC 15 | 16 | export { RangeInput } 17 | 18 | export default RangeInput 19 | -------------------------------------------------------------------------------- /src/components/input/range/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { InputRange as StyledInputRange } from "./styled" 3 | 4 | const InputRange = ({ max = 100, min = 0, step = 1, value = 0, ref, ...rest }) => ( 5 | 15 | ) 16 | 17 | export default InputRange 18 | -------------------------------------------------------------------------------- /src/components/input/range/range.test.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import RangeInput from "./index" 3 | import { renderWithProviders, screen } from "testUtilities" 4 | 5 | const setup = props => renderWithProviders() 6 | 7 | describe("InputRange component", () => { 8 | test("should render component", () => { 9 | setup() 10 | expect(screen.getByTestId("rangeInput")).toBeInTheDocument() 11 | }) 12 | }) 13 | -------------------------------------------------------------------------------- /src/components/input/use-focused-state.js: -------------------------------------------------------------------------------- 1 | import { useState, useCallback } from "react" 2 | 3 | export const useFocusedState = ({ defaultState = false, onBlur, onFocus }) => { 4 | const [focused, setFocused] = useState(defaultState) 5 | 6 | const handleFocus = useCallback( 7 | e => { 8 | if (!focused) { 9 | setFocused(true) 10 | } 11 | if (onFocus) { 12 | onFocus(e) 13 | } 14 | }, 15 | [onFocus, focused] 16 | ) 17 | const handleBlur = useCallback( 18 | e => { 19 | setFocused(false) 20 | if (onBlur) { 21 | onBlur(e) 22 | } 23 | }, 24 | [onBlur] 25 | ) 26 | 27 | return [focused, handleFocus, handleBlur] 28 | } 29 | -------------------------------------------------------------------------------- /src/components/input/use-input-value.d.ts: -------------------------------------------------------------------------------- 1 | import { ChangeEvent } from "react" 2 | 3 | export interface UseInputValueProps { 4 | maxChars?: number 5 | onChange?: (e: ChangeEvent) => void 6 | value?: string 7 | } 8 | 9 | declare const useInputValue: (props: UseInputValueProps) => 10 | [ 11 | string, 12 | (e: ChangeEvent) => void, 13 | string, 14 | boolean, 15 | { 16 | setIsDirty: (state: boolean) => void, 17 | setValue: (state: string) => void, 18 | resetValue: () => void 19 | } 20 | ] 21 | 22 | export { useInputValue } 23 | 24 | export default useInputValue 25 | -------------------------------------------------------------------------------- /src/components/input/use-touched-state.d.ts: -------------------------------------------------------------------------------- 1 | import { FocusEvent } from "react" 2 | 3 | export interface UseTouchedStateProps { 4 | onBlur?: (e: FocusEvent) => void 5 | defaultState?: boolean 6 | } 7 | 8 | declare const useTouchedState: (props: UseTouchedStateProps) => 9 | [ 10 | boolean, 11 | (e: FocusEvent) => void, 12 | (state: boolean) => void 13 | ] 14 | 15 | export { useTouchedState } 16 | 17 | export default useTouchedState 18 | -------------------------------------------------------------------------------- /src/components/input/use-touched-state.js: -------------------------------------------------------------------------------- 1 | import { useState, useCallback } from "react" 2 | 3 | export const useTouchedState = ({ onBlur, defaultState = false }) => { 4 | const [touchedState, setTouchedState] = useState(defaultState) 5 | const handleBlur = useCallback( 6 | e => { 7 | if (!touchedState) { 8 | setTouchedState(true) 9 | } 10 | if (onBlur) { 11 | onBlur(e) 12 | } 13 | }, 14 | [onBlur, touchedState] 15 | ) 16 | 17 | return [touchedState, handleBlur, setTouchedState] 18 | } 19 | -------------------------------------------------------------------------------- /src/components/intersection/README.md: -------------------------------------------------------------------------------- 1 | ## Popover component 2 | 3 | A component that displays the fallback until it is visible to the viewport. 4 | It uses the IntersectionObserver. 5 | 6 | ### Props: 7 | 8 | ```typescript 9 | interface IntersectionProps { 10 | root: object 11 | rootMargin: string 12 | threshold: number 13 | fallback: ReactNode | (() => ReactNode) 14 | children: ReactNode | (() => ReactNode) 15 | [key: string]: any 16 | } 17 | ``` 18 | 19 | ### Typical usage: 20 | 21 | ```JSX 22 | export const Component = () => { 23 | return ( 24 | 25 | This is visible inside the viewport 26 | 27 | ) 28 | } 29 | ``` 30 | -------------------------------------------------------------------------------- /src/components/intersection/index.d.ts: -------------------------------------------------------------------------------- 1 | import { ReactNode } from "react" 2 | import { FlexProps } from "../templates/flex" 3 | 4 | export interface IntersectionProps extends FlexProps { 5 | root: object 6 | rootMargin: string 7 | threshold: number 8 | fallback: ReactNode | (() => ReactNode) 9 | children: ReactNode | (() => ReactNode) 10 | [key: string]: any 11 | } 12 | 13 | declare const Intersection: React.FC 14 | 15 | export { Intersection } 16 | 17 | export default Intersection 18 | -------------------------------------------------------------------------------- /src/components/intersection/index.stories.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Flex from "@/components/templates/flex" 3 | import Intersection from "." 4 | 5 | export const Basic = () => ( 6 | 7 | 8 | Visible inside the viewport. Scroll down and see the inspect element 9 | 10 | 11 | ) 12 | 13 | export default { 14 | component: Intersection, 15 | } 16 | -------------------------------------------------------------------------------- /src/components/pill/alertMastercard.d.ts: -------------------------------------------------------------------------------- 1 | import { FC } from "react" 2 | import { MasterCardProps } from "./mastercard" 3 | 4 | declare const AlertMasterCard: FC 5 | 6 | export { AlertMasterCard } 7 | 8 | export default AlertMasterCard 9 | -------------------------------------------------------------------------------- /src/components/pill/icon.d.ts: -------------------------------------------------------------------------------- 1 | import { FC } from "react" 2 | import { PillFlavour } from "./index" 3 | import { IconProps } from "../icon/index" 4 | 5 | export interface PillIconProps extends IconProps { 6 | icon?: string 7 | hollow?: boolean 8 | flavour?: PillFlavour 9 | } 10 | 11 | declare const PillIcon: FC 12 | 13 | export { PillIcon } 14 | 15 | export default PillIcon 16 | -------------------------------------------------------------------------------- /src/components/pill/icon.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Icon } from "@/components/icon" 3 | import { getPillColor } from "./mixins/colors" 4 | 5 | const sizes = { 6 | default: "14px", 7 | large: "16px", 8 | } 9 | 10 | const PillIcon = ({ icon, color, hollow, flavour, size, ...rest }) => { 11 | if (!icon) return null 12 | if (typeof icon !== "string") return icon 13 | 14 | return ( 15 | 23 | ) 24 | } 25 | 26 | export default PillIcon 27 | -------------------------------------------------------------------------------- /src/components/pill/mastercardPill.d.ts: -------------------------------------------------------------------------------- 1 | import { FC } from "react" 2 | import { PillProps } from "./index" 3 | 4 | export interface MasterCardPillProps extends PillProps { 5 | text?: string 6 | } 7 | 8 | declare const MasterCardPill: FC 9 | 10 | export { MasterCardPill } 11 | 12 | export default MasterCardPill 13 | -------------------------------------------------------------------------------- /src/components/pill/mastercardPill.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Pill from "./index" 3 | 4 | const MasterCardPill = ({ background, icon, text, ref, ...rest }) => ( 5 | 13 | {!icon && (text || "-")} 14 | 15 | ) 16 | 17 | export default MasterCardPill 18 | -------------------------------------------------------------------------------- /src/components/pill/mixins/background.js: -------------------------------------------------------------------------------- 1 | import { getMasterCardColor, getPillColor } from "./colors" 2 | 3 | export const getMasterCardBackground = (background, flavour) => 4 | background || getMasterCardColor(flavour) 5 | 6 | const getPillBackground = ({ background, flavour = "neutral", hollow, semi }) => { 7 | if (background) return background 8 | if (hollow) return semi ? getPillColor("hollow", flavour) : "transparent" 9 | 10 | return getPillColor("background", flavour) 11 | } 12 | 13 | export default getPillBackground 14 | -------------------------------------------------------------------------------- /src/components/pill/mixins/height.js: -------------------------------------------------------------------------------- 1 | const pillHeights = { 2 | default: "18px", 3 | large: "22px", 4 | } 5 | 6 | const getPillHeight = (height, size, tiny) => { 7 | if (height) return height 8 | if (tiny) return "8px" 9 | return pillHeights[size] || pillHeights.default 10 | } 11 | 12 | export default getPillHeight 13 | -------------------------------------------------------------------------------- /src/components/pill/mixins/padding.js: -------------------------------------------------------------------------------- 1 | const paddings = { 2 | default: [0.5, 2], 3 | large: [1, 2.5], 4 | } 5 | 6 | const getPillPadding = (padding, size, tiny) => { 7 | if (padding) return padding 8 | if (tiny) return [0.25, 0.5] 9 | return paddings[size] || paddings.default 10 | } 11 | 12 | export default getPillPadding 13 | -------------------------------------------------------------------------------- /src/components/pill/mixins/width.js: -------------------------------------------------------------------------------- 1 | const getPillWidth = (width, tiny) => { 2 | if (width) return width 3 | return tiny && "auto" 4 | } 5 | 6 | export default getPillWidth 7 | -------------------------------------------------------------------------------- /src/components/progressBar/index.d.ts: -------------------------------------------------------------------------------- 1 | import { FC } from "react" 2 | 3 | export interface Value { 4 | color?: string 5 | width?: string 6 | [key: string]: any 7 | } 8 | 9 | export interface ProgressBarProps { 10 | background?: string 11 | className?: string 12 | color?: string 13 | "data-testid"?: string 14 | containerWidth?: string 15 | height?: number 16 | value?: Value[] 17 | width?: string 18 | [s: string]: any 19 | } 20 | 21 | declare const ProgressBar: FC 22 | 23 | export { ProgressBar } 24 | 25 | export default ProgressBar 26 | -------------------------------------------------------------------------------- /src/components/progressBar/index.stories.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Flex from "@/components/templates/flex" 3 | import ProgressBar from "." 4 | 5 | export const Basic = () => ( 6 | 7 | 8 | 9 | ) 10 | 11 | export const WithValue = () => ( 12 | 13 | 20 | 21 | ) 22 | 23 | export default { 24 | component: ProgressBar, 25 | } 26 | -------------------------------------------------------------------------------- /src/components/radio-button/index.d.ts: -------------------------------------------------------------------------------- 1 | import { MarginProps, AlignSelfProps } from "../../mixins/types" 2 | 3 | export interface RadioButtonProps extends MarginProps, AlignSelfProps { 4 | label?: React.ReactNode 5 | checked?: boolean 6 | disabled?: boolean 7 | name?: string 8 | iconProps?: { 9 | [key: string]: any 10 | } 11 | children?: React.ReactNode 12 | } 13 | 14 | declare const RadioButton: React.FC 15 | 16 | export { RadioButton } 17 | 18 | export default RadioButton 19 | -------------------------------------------------------------------------------- /src/components/radio-button/mixins/disabled.js: -------------------------------------------------------------------------------- 1 | export default ({ disabled }) => 2 | ` 3 | pointer-events: ${disabled ? "none" : "auto"}; 4 | cursor: ${disabled ? "default" : "pointer"}; 5 | ` 6 | -------------------------------------------------------------------------------- /src/components/radio-button/mixins/disabled.test.js: -------------------------------------------------------------------------------- 1 | import disabled from "./disabled" 2 | 3 | it("renders", () => { 4 | expect(disabled({})).toBe(` 5 | pointer-events: auto; 6 | cursor: pointer; 7 | `) 8 | }) 9 | 10 | it("renders disabled", () => { 11 | expect(disabled({ disabled: true })).toBe(` 12 | pointer-events: none; 13 | cursor: default; 14 | `) 15 | }) 16 | -------------------------------------------------------------------------------- /src/components/select/index.d.ts: -------------------------------------------------------------------------------- 1 | import { FC } from "react" 2 | import { Props } from "react-select" 3 | 4 | export interface SelectProps extends Props { 5 | "data-ga"?: string; 6 | "data-testid"?: string; 7 | } 8 | 9 | declare const Select: FC 10 | 11 | export { Select } 12 | 13 | export default Select 14 | -------------------------------------------------------------------------------- /src/components/sidebar/index.js: -------------------------------------------------------------------------------- 1 | export { Sidebar } from "./sidebar" 2 | export { PortalSidebar } from "./portaled-sidebar" 3 | -------------------------------------------------------------------------------- /src/components/sidebar/portaled-sidebar.d.ts: -------------------------------------------------------------------------------- 1 | import { FC, ReactNode } from "react" 2 | 3 | export interface PortalSidebarProps { 4 | className?: string 5 | closeOnEsc?: boolean 6 | closeOnOverlayClick?: boolean 7 | "data-testid"?: string 8 | onClose?: () => {} 9 | right?: boolean 10 | Wrapper: ReactNode 11 | [s: string]: any 12 | } 13 | 14 | declare const PortalSidebar: FC 15 | 16 | export { PortalSidebar } 17 | 18 | export default PortalSidebar 19 | -------------------------------------------------------------------------------- /src/components/sidebar/sidebar.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { SidebarBox, ComponentBox, InfoBox } from "./styled" 3 | 4 | export const Sidebar = ({ info, children, className, right = false }) => ( 5 | 6 | 7 | {children} 8 | 9 | {info} 10 | 11 | ) 12 | -------------------------------------------------------------------------------- /src/components/table/body/header/filter/dropdown.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import Select from "@/components/select" 3 | 4 | const DropdownFilter = ({ 5 | "data-ga": dataGA, 6 | "data-testid": dataTestId, 7 | onChange, 8 | value, 9 | options, 10 | isMulti, 11 | styles, 12 | }) => ( 13 |