init

.editorconfig

@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */

.gitignore

@@ -0,0 +1,20 @@
+## editors
+/.idea
+/.vscode
+
+## system files
+.DS_Store
+
+## npm
+/node_modules/
+/npm-debug.log
+
+## testing
+/coverage/
+
+## temp folders
+/.tmp/
+
+# build
+/_site/
+/dist/

.storybook/main.js

@@ -0,0 +1,6 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.{js,mdx}'],
+  esDevServer: {
+    // custom es-dev-server options
+  },
+};

.storybook/preview.js

@@ -0,0 +1,30 @@
+import {
+  addParameters,
+  addDecorator,
+  setCustomElements,
+  withA11y
+} from '@open-wc/demoing-storybook';
+
+async function run() {
+  const customElements = await (
+    await fetch(new URL('../custom-elements.json', import.meta.url))
+  ).json();
+  setCustomElements(customElements);
+
+  addDecorator(withA11y);
+
+  addParameters({
+    a11y: {
+      config: {},
+      options: {
+        checks: { 'color-contrast': { options: { noScroll: true } } },
+        restoreScroll: true
+      }
+    },
+    docs: {
+      iframeHeight: '200px'
+    }
+  });
+}
+
+run();

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 lit-weather
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,103 @@
+# \<lit-weather>
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+```bash
+npm i lit-weather
+```
+
+## Usage
+```html
+<script type="module">
+  import 'lit-weather/lit-weather.js';
+</script>
+
+<lit-weather></lit-weather>
+```
+
+## Linting with ESLint, Prettier, and Types
+To scan the project for linting errors, run
+```bash
+npm run lint
+```
+
+You can lint with ESLint and Prettier individually as well
+```bash
+npm run lint:eslint
+```
+```bash
+npm run lint:prettier
+```
+
+To automatically fix many linting errors, run
+```bash
+npm run format
+```
+
+You can format using ESLint and Prettier individually as well
+```bash
+npm run format:eslint
+```
+```bash
+npm run format:prettier
+```
+
+## Testing with Karma
+To run the suite of karma tests, run
+```bash
+npm run test
+```
+or to run them in compatibility mode for legacy browsers
+```bash
+npm run test:compatibility
+```
+
+To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run
+
+```bash
+npm run test:watch
+```
+or
+```bash
+npm run test:compatibility
+```
+
+## Testing with Karma via BrowserStack
+To run the suite of karma tests in BrowserStack, run
+```bash
+npm run test:bs
+```
+
+## Managing Test Snapshots
+You can manage the test snapshots using
+```bash
+npm run test:update-snapshots
+```
+or
+```bash
+npm run test:prune-snapshots
+```
+
+## Demoing with Storybook
+To run a local instance of Storybook for your component, run
+```bash
+npm run storybook
+```
+
+To build a production version of Storybook, run
+```bash
+npm run storybook:build
+```
+
+
+## Local Demo with `es-dev-server`
+```bash
+npm start
+```
+To run a local development server that serves the basic demo located in `demo/index.html`
+
+```bash
+npm start:compatibility
+```
+To run a local development server in compatibility mode for older browsers that serves the basic demo located in `demo/index.html`

custom-elements.json

@@ -0,0 +1,32 @@
+{
+  "version": 2,
+  "tags": [
+    {
+      "name": "lit-weather",
+      "description": "A component with a title and an action counter",
+      "properties": [
+        {
+          "name": "title",
+          "type": "String",
+          "description": "The title of your component",
+          "default": "Hey there"
+        },
+        {
+          "name": "counter",
+          "type": "Number",
+          "description": "An action counter",
+          "default": 0
+        }
+      ],
+      "events": [],
+      "slots": [],
+      "cssProperties": [
+        {
+          "name": "--lit-weather-text-color",
+          "description": "Main Text Color",
+          "type": "Color"
+        }
+      ]
+    }
+  ]
+}

demo/index.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      body {
+        max-width: 700px;
+        margin: 50px auto;
+        background: #ffffff;
+      }
+    </style>
+  </head>
+  <body>
+    <demo-element></demo-element>
+
+    <script type="module">
+      import { LitElement, html } from 'lit-element';
+      import '../lit-weather.js';
+
+      class DemoElement extends LitElement {
+        render() {
+          return html`
+            <style>
+              lit-weather {
+                padding: 20px 16px 24px 16px;
+                border: 1px solid #dfe1e5;
+                border-radius: 8px;
+              }
+
+              input {
+                margin-bottom: 50px;
+              }
+            </style>
+
+            <input
+              .value="${this.value}"
+              @change="${e => {
+                this.value = e.srcElement.value;
+              }}"
+            />
+            <button @click="${this.refresh}">Refresh</button>
+
+            <lit-weather
+              .query="${this.value}"
+              .apiKey=${`dbb6d88373f5de18206bd0c7c4249bed`}
+            ></lit-weather>
+          `;
+        }
+
+        static get properties() {
+          return {
+            value: { type: String },
+            value2: { type: String },
+          };
+        }
+
+        constructor() {
+          super();
+          this.value = 'Santa Barbara';
+        }
+
+        refresh() {
+          this.shadowRoot.querySelector('lit-weather').refresh();
+        }
+      }
+
+      customElements.define('demo-element', DemoElement);
+    </script>
+  </body>
+</html>

index.js

@@ -0,0 +1 @@
+export { LitWeather } from './src/LitWeather.js';

karma.bs.config.js

@@ -0,0 +1,16 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const merge = require('deepmerge');
+const { bsSettings } = require('@open-wc/testing-karma-bs');
+const createBaseConfig = require('./karma.conf.js');
+
+module.exports = config => {
+  config.set(
+    merge(bsSettings(config), createBaseConfig(config), {
+      browserStack: {
+        project: 'your-name',
+      },
+    }),
+  );
+
+  return config;
+};

karma.conf.js

@@ -0,0 +1,24 @@
+/* eslint-disable import/no-extraneous-dependencies */
+const { createDefaultConfig } = require('@open-wc/testing-karma');
+const merge = require('deepmerge');
+
+module.exports = config => {
+  config.set(
+    merge(createDefaultConfig(config), {
+      files: [
+        // runs all files ending with .test in the test folder,
+        // can be overwritten by passing a --grep flag. examples:
+        //
+        // npm run test -- --grep test/foo/bar.test.js
+        // npm run test -- --grep test/bar/*
+        { pattern: config.grep ? config.grep : 'test/**/*.test.js', type: 'module' },
+      ],
+
+      esm: {
+        nodeResolve: true,
+      },
+      // you can overwrite/extend the config further
+    }),
+  );
+  return config;
+};

lit-weather.js

@@ -0,0 +1,3 @@
+import { LitWeather } from './src/LitWeather.js';
+
+window.customElements.define('lit-weather', LitWeather);