build(linting): restore eslint rules (#795)

#791

.eslintrc.json

@@ -14,23 +14,17 @@
   },
   "plugins": ["@typescript-eslint", "eslint-plugin-react", "prettier"],
   "rules": {
-    "@stencil/ban-exported-const-enums": "warn",
     "@stencil/decorators-style": "warn",
     "@stencil/own-methods-must-be-private": "off",
     "@stencil/own-props-must-be-private": "off",
-    "@stencil/strict-mutable": "warn",
     "@stencil/prefer-vdom-listener": "warn",
     "@stencil/required-jsdoc": "off",
     "@stencil/strict-boolean-conditions": "off",
     "@typescript-eslint/ban-types": "warn",
     "@typescript-eslint/explicit-module-boundary-types": "warn",
     "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/no-inferrable-types": "warn",
-    "@typescript-eslint/no-use-before-define": ["warn", { "functions": false }],
-    "lines-between-class-members": ["warn", "always"],
+    "lines-between-class-members": ["error", "always"],
     "no-multiple-empty-lines": ["error", { "max": 1 }],
-    "no-var": "warn",
-    "prefer-const": "warn",
     "react/jsx-uses-react": "error",
     "react/jsx-uses-vars": "error"
   },

package.json

@@ -23,8 +23,8 @@
     "test": "npm run copy-icons && stencil test --spec --e2e",
     "test.watch": "npm run copy-icons && stencil test --spec --e2e --watchAll",
     "lint": "npm-run-all --parallel lint:*",
-    "lint:ts": "concurrently \"tslint --project tsconfig-tslint.json\" \"eslint --ext .ts,.tsx .\"",
-    "lint:styles": "stylelint \"src/**/*.scss\"",
+    "lint:ts": "concurrently \"tslint --fix --project tsconfig-tslint.json\" \"eslint --fix --ext .ts,.tsx .\"",
+    "lint:styles": "stylelint --fix \"src/**/*.scss\"",
     "posttest": "stencil build --prerender",
     "prettier": "npm-run-all --parallel prettier:*",
     "prettier:ts": "prettier --write \"src/**/*.ts?(x)\"",

src/components/calcite-accordion/calcite-accordion.tsx

@@ -22,7 +22,7 @@ export class CalciteAccordion {
   //--------------------------------------------------------------------------
 
   /** specify the theme of accordion, defaults to light */
-  @Prop({ mutable: true, reflect: true }) theme: "light" | "dark";
+  @Prop({ reflect: true }) theme: "light" | "dark";
 
   /** specify the scale of accordion, defaults to m */
   @Prop({ mutable: true, reflect: true }) scale: "s" | "m" | "l" = "m";

src/components/calcite-alert/calcite-alert.tsx

@@ -60,7 +60,7 @@ export class CalciteAlert {
   @Prop({ reflect: true, mutable: true }) color: "blue" | "green" | "red" | "yellow" = "blue";
 
   /** Select theme (light or dark) */
-  @Prop({ reflect: true, mutable: true }) theme: "light" | "dark";
+  @Prop({ reflect: true }) theme: "light" | "dark";
 
   /** specify the scale of the button, defaults to m */
   @Prop({ mutable: true, reflect: true }) scale: "s" | "m" | "l" = "m";

src/components/calcite-button/calcite-button.tsx

@@ -39,7 +39,7 @@ export class CalciteButton {
     | "transparent" = "solid";
 
   /** Select theme (light or dark) */
-  @Prop({ mutable: true, reflect: true }) theme: "light" | "dark";
+  @Prop({ reflect: true }) theme: "light" | "dark";
 
   /** specify the scale of the button, defaults to m */
   @Prop({ mutable: true, reflect: true }) scale: "s" | "m" | "l" = "m";

src/components/calcite-card/calcite-card.tsx

@@ -43,10 +43,10 @@ export class CalciteCard {
   @Prop({ reflect: true, mutable: true }) selected = false;
 
   /** Indicates whether the card is selectable. */
-  @Prop({ reflect: true, mutable: true }) selectable = false;
+  @Prop({ reflect: true }) selectable = false;
 
   /**  The theme of the card.*/
-  @Prop({ reflect: true, mutable: true }) theme: "light" | "dark";
+  @Prop({ reflect: true }) theme: "light" | "dark";
 
   //--------------------------------------------------------------------------
   //

src/components/calcite-card/resources.ts

@@ -8,10 +8,10 @@ export const CSS = {
   checkboxWrapper: "checkbox-wrapper"
 };
 
-export const enum SLOTS {
-  thumbnail = "thumbnail",
-  title = "title",
-  subtitle = "subtitle",
-  footerLeading = "footer-leading",
-  footerTrailing = "footer-trailing"
-}
+export const SLOTS = {
+  thumbnail: "thumbnail",
+  title: "title",
+  subtitle: "subtitle",
+  footerLeading: "footer-leading",
+  footerTrailing: "footer-trailing"
+};

src/components/calcite-chip/calcite-chip.tsx

@@ -32,7 +32,7 @@ export class CalciteChip {
   @Prop({ reflect: true }) icon?: string;
 
   /** Optionally show a button the user can click to dismiss the chip */
-  @Prop({ reflect: true, mutable: true }) dismissible?: boolean = false;
+  @Prop({ reflect: true }) dismissible?: boolean = false;
 
   // --------------------------------------------------------------------------
   //

src/components/calcite-color-hex-input/calcite-color-hex-input.tsx

@@ -70,27 +70,17 @@ export class CalciteColorHexInput {
   /**
    * The component's scale.
    */
-  @Prop({
-    reflect: true
-  })
-  scale: Exclude<Scale, "xs" | "xl"> = "m";
+  @Prop({ reflect: true }) scale: Exclude<Scale, "xs" | "xl"> = "m";
 
   /**
    * The component's theme.
    */
-  @Prop({
-    reflect: true
-  })
-  theme: Theme = "light";
+  @Prop({ reflect: true }) theme: Theme = "light";
 
   /**
    * The hex value.
    */
-  @Prop({
-    mutable: true,
-    reflect: true
-  })
-  value: string = normalizeHex(DEFAULT_COLOR.hex());
+  @Prop({ mutable: true, reflect: true }) value: string = normalizeHex(DEFAULT_COLOR.hex());
 
   @Watch("value")
   handleValueChange(value: string, oldValue: string): void {

src/components/calcite-dropdown/calcite-dropdown.tsx

@@ -32,7 +32,7 @@ export class CalciteDropdown {
   @Prop() maxItems = 0;
 
   /** specify the theme of the dropdown, defaults to light */
-  @Prop({ mutable: true, reflect: true }) theme: "light" | "dark";
+  @Prop({ reflect: true }) theme: "light" | "dark";
 
   /**
    * **read-only** The currently selected items
@@ -55,7 +55,7 @@ export class CalciteDropdown {
   if the selection-mode of the selected item's containing group is "none", the dropdown will always close
   */
 
-  @Prop({ mutable: true, reflect: true }) disableCloseOnSelect = false;
+  @Prop({ reflect: true }) disableCloseOnSelect = false;
 
   /** is the dropdown disabled  */
   @Prop({ reflect: true }) disabled?: boolean;

src/components/calcite-input-message/calcite-input-message.tsx

@@ -21,7 +21,7 @@ export class CalciteInputMessage {
   //
   //--------------------------------------------------------------------------
 
-  @Prop({ reflect: true, mutable: true }) active = false;
+  @Prop({ reflect: true }) active = false;
 
   /** optionally display an icon based on status */
   @Prop({ reflect: true }) icon: boolean;
@@ -33,7 +33,7 @@ export class CalciteInputMessage {
   @Prop({ mutable: true, reflect: true }) status: "invalid" | "valid" | "idle";
 
   /** specify the theme, defaults to light */
-  @Prop({ mutable: true, reflect: true }) theme: "light" | "dark";
+  @Prop({ reflect: true }) theme: "light" | "dark";
 
   /** specify the appearance of any slotted message - default (displayed under input), or floating (positioned absolutely under input) */
   @Prop({ mutable: true, reflect: true }) type: "default" | "floating" = "default";

src/components/calcite-input/calcite-input.tsx

@@ -37,7 +37,7 @@ export class CalciteInput {
   @Prop({ mutable: true, reflect: true }) status: "invalid" | "valid" | "idle";
 
   /** specify if the input is in loading state */
-  @Prop({ mutable: true, reflect: true }) loading = false;
+  @Prop({ reflect: true }) loading = false;
 
   /** specify the scale of the input, defaults to m */
   @Prop({ mutable: true, reflect: true }) scale: "s" | "m" | "l";
@@ -63,13 +63,13 @@ export class CalciteInput {
   @Prop({ reflect: true }) max?: number;
 
   /** optionally add prefix  **/
-  @Prop({ mutable: true }) prefixText?: string;
+  @Prop() prefixText?: string;
 
   /** optionally add suffix  **/
-  @Prop({ mutable: true }) suffixText?: string;
+  @Prop() suffixText?: string;
 
   /** for recognized input types, show an icon if applicable */
-  @Prop({ mutable: true, reflect: true }) icon: string | boolean = false;
+  @Prop({ reflect: true }) icon: string | boolean = false;
 
   /** specify the input type */
   @Prop({ mutable: true, reflect: true }) type:
@@ -95,7 +95,7 @@ export class CalciteInput {
     "vertical";
 
   /** specify the alignment of dropdown, defaults to left */
-  @Prop({ mutable: true, reflect: true }) theme: "light" | "dark";
+  @Prop({ reflect: true }) theme: "light" | "dark";
 
   /** is the input required */
   @Prop() required = false;

src/components/calcite-label/calcite-label.tsx

@@ -28,7 +28,7 @@ export class CalciteLabel {
   @Prop({ mutable: true, reflect: true }) scale: "s" | "m" | "l" = "m";
 
   /** specify theme of the label and its any child input / input messages */
-  @Prop({ mutable: true, reflect: true }) theme: "light" | "dark";
+  @Prop({ reflect: true }) theme: "light" | "dark";
 
   /** is the wrapped element positioned inline with the label slotted text */
   @Prop({ mutable: true, reflect: true }) layout: "inline" | "inline-space-between" | "default" =

src/components/calcite-link/calcite-link.tsx

@@ -31,7 +31,7 @@ export class CalciteLink {
   @Prop({ mutable: true, reflect: true }) color: "blue" | "dark" | "light" | "red" = "blue";
 
   /** Select theme (light or dark) */
-  @Prop({ mutable: true, reflect: true }) theme: "light" | "dark";
+  @Prop({ reflect: true }) theme: "light" | "dark";
 
   /** optionally pass a href - used to determine if the component should render as a link or an anchor */
   @Prop({ reflect: true }) href?: string;

src/components/calcite-notice/calcite-notice.tsx

@@ -45,7 +45,7 @@ export class CalciteNotice {
   @Prop({ reflect: false }) intlClose: string = TEXT.close;
 
   /** Select theme (light or dark) */
-  @Prop({ reflect: true, mutable: true }) theme: "light" | "dark";
+  @Prop({ reflect: true }) theme: "light" | "dark";
 
   /** specify the scale of the notice, defaults to m */
   @Prop({ mutable: true, reflect: true }) scale: "s" | "m" | "l" = "m";
@@ -54,7 +54,7 @@ export class CalciteNotice {
   @Prop({ mutable: true, reflect: true }) width: "auto" | "half" | "full" = "auto";
 
   /** Optionally show a button the user can click to dismiss the notice */
-  @Prop({ reflect: true, mutable: true }) dismissible?: boolean = false;
+  @Prop({ reflect: true }) dismissible?: boolean = false;
 
   /** If false, no icon will be shown in the notice */
   @Prop() icon = false;

src/components/calcite-radio-button/calcite-radio-button.tsx

@@ -65,8 +65,7 @@ export class CalciteRadioButton {
   }
 
   /** The id attribute of the radio button.  When omitted, a globally unique identifier is used. */
-  @Prop({ mutable: true, reflect: true }) guid: string =
-    this.el.id || `calcite-radio-button-${guid()}`;
+  @Prop({ reflect: true }) guid: string = this.el.id || `calcite-radio-button-${guid()}`;
 
   /** The radio button's hidden status.  When a radio button is hidden it is not focusable or checkable. */
   @Prop({ reflect: true }) hidden = false;

src/components/calcite-scrim/calcite-scrim.tsx

@@ -25,7 +25,7 @@ export class CalciteScrim {
   @Prop({ reflect: true }) loading = false;
 
   /** specify the theme of scrim, defaults to light */
-  @Prop({ mutable: true, reflect: true }) theme: "light" | "dark";
+  @Prop({ reflect: true }) theme: "light" | "dark";
 
   // --------------------------------------------------------------------------
   //

src/components/calcite-slider/calcite-slider.tsx

@@ -41,13 +41,13 @@ export class CalciteSlider {
   @Prop({ reflect: true }) theme: "light" | "dark";
 
   /** Disable and gray out the slider */
-  @Prop({ reflect: true, mutable: true }) disabled = false;
+  @Prop({ reflect: true }) disabled = false;
 
   /** Minimum selectable value */
-  @Prop({ reflect: true, mutable: true }) min = 0;
+  @Prop({ reflect: true }) min = 0;
 
   /** Maximum selectable value */
-  @Prop({ reflect: true, mutable: true }) max = 100;
+  @Prop({ reflect: true }) max = 100;
 
   /** Currently selected number (if single select) */
   @Prop({ reflect: true, mutable: true }) value: null | number = null;

src/components/calcite-split-button/calcite-split-button.tsx

@@ -13,7 +13,7 @@ export class CalciteSplitButton {
   @Prop({ mutable: true, reflect: true }) color: "blue" | "dark" | "light" | "red" = "blue";
 
   /** select theme (light or dark), defaults to light */
-  @Prop({ mutable: true, reflect: true }) theme: "light" | "dark";
+  @Prop({ reflect: true }) theme: "light" | "dark";
 
   /** specify the scale of the control, defaults to m */
   @Prop({ mutable: true, reflect: true }) scale: "s" | "m" | "l" = "m";

src/components/calcite-stepper-item/calcite-stepper-item.tsx

@@ -35,13 +35,13 @@ export class CalciteStepperItem {
   @Prop({ reflect: true, mutable: true }) active = false;
 
   /** has the step been completed */
-  @Prop({ reflect: true, mutable: true }) complete = false;
+  @Prop({ reflect: true }) complete = false;
 
   /** does the step contain an error that needs to be resolved by the user */
-  @Prop({ mutable: true }) error = false;
+  @Prop() error = false;
 
   /** is the step disabled and not navigable to by a user */
-  @Prop({ mutable: true }) disabled = false;
+  @Prop() disabled = false;
 
   /** pass a title for the stepper item */
   @Prop() itemTitle?: string;

src/components/calcite-stepper/calcite-stepper.tsx

@@ -34,7 +34,7 @@ export class CalciteStepper {
   //--------------------------------------------------------------------------
 
   /** specify the theme of stepper, defaults to light */
-  @Prop({ mutable: true, reflect: true }) theme: "light" | "dark";
+  @Prop({ reflect: true }) theme: "light" | "dark";
 
   /** specify the scale of stepper, defaults to m */
   @Prop({ mutable: true, reflect: true }) scale: "s" | "m" | "l" = "m";

src/components/calcite-switch/calcite-switch.tsx

@@ -37,7 +37,7 @@ export class CalciteSwitch {
   @Prop({ reflect: true, mutable: true }) scale: "s" | "m" | "l" = "m";
 
   /** The component's theme. */
-  @Prop({ reflect: true, mutable: true }) theme: "light" | "dark";
+  @Prop({ reflect: true }) theme: "light" | "dark";
 
   @Event() calciteSwitchChange: EventEmitter;
 

src/components/calcite-tab-title/calcite-tab-title.tsx

@@ -39,7 +39,7 @@ export class CalciteTabTitle {
    * Optionally include a unique name for the tab title,
    * be sure to also set this name on the associated tab.
    */
-  @Prop({ reflect: true, mutable: true }) tab?: string;
+  @Prop({ reflect: true }) tab?: string;
 
   /** Show this tab title as selected */
   @Prop({ reflect: true, mutable: true }) active = false;

src/components/calcite-tab/calcite-tab.tsx

@@ -38,7 +38,7 @@ export class CalciteTab {
    * Optionally include a unique name for this tab,
    * be sure to also set this name on the associated title.
    */
-  @Prop({ reflect: true, mutable: true }) tab: string;
+  @Prop({ reflect: true }) tab: string;
 
   /**
    * Show this tab

src/components/calcite-tree-item/calcite-tree-item.tsx

@@ -285,19 +285,19 @@ export class CalciteTreeItem {
   //--------------------------------------------------------------------------
 
   /** @internal Is the parent of this item expanded? */
-  @Prop({ mutable: true }) parentExpanded = false;
+  @Prop() parentExpanded = false;
 
   /** @internal What level of depth is this item at? */
-  @Prop({ mutable: true, reflect: true }) depth = -1;
+  @Prop({ reflect: true }) depth = -1;
 
   /** @internal Does this tree item have a tree inside it? */
-  @Prop({ mutable: true, reflect: true }) hasChildren: boolean = null;
+  @Prop({ reflect: true }) hasChildren: boolean = null;
 
   /** @internal Draw lines (set on parent) */
-  @Prop({ mutable: true, reflect: true }) lines: boolean;
+  @Prop({ reflect: true }) lines: boolean;
 
   /** @internal Scale of the parent tree, defaults to m */
-  @Prop({ mutable: true, reflect: true }) scale: "s" | "m";
+  @Prop({ reflect: true }) scale: "s" | "m";
 
   @State() private selectionMode: TreeSelectionMode;
 

src/components/calcite-tree/calcite-tree.tsx

@@ -28,7 +28,7 @@ export class CalciteTree {
   @Prop({ mutable: true, reflect: true }) lines = false;
 
   /** Select theme (light or dark) */
-  @Prop({ mutable: true, reflect: true }) theme: "light" | "dark";
+  @Prop({ reflect: true }) theme: "light" | "dark";
 
   /** Specify the scale of the tree, defaults to m */
   @Prop({ mutable: true, reflect: true }) scale: "s" | "m" = "m";
@@ -198,7 +198,7 @@ export class CalciteTree {
   //
   //--------------------------------------------------------------------------
   /** @internal If this tree is nested within another tree, set to false */
-  @Prop({ mutable: true, reflect: true }) root = true;
+  @Prop({ reflect: true }) root = true;
 
   //--------------------------------------------------------------------------
   //