First commit

lwc.config.json

@@ -0,0 +1,10 @@
+{
+  "modules": [
+    {
+      "npm": "lightning-base-components"
+    },
+    {
+      "dir": "src"
+    }
+  ]
+}

package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@wcd/zeray-debug.lwc-kwbmswd8",
+  "version": "0.0.0",
+  "scripts": {
+    "serve": "npx wcd-cli@latest serve X6pwItWNKwL2QsMlIzX5 --open"
+  }
+}

src/app.css

@@ -0,0 +1,12 @@
+h1 {
+    color: rgb(0, 112, 210);
+}
+p {
+    font-family: 'Salesforce Sans', Arial, sans-serif;
+    color: rgb(62, 62, 60);
+}
+.app {
+    background-color: #fafaf9;
+    height: 100vh;
+    overflow: scroll;
+}

src/app.html

@@ -0,0 +1,30 @@
+<template>
+	<div class="app slds-p-around_x-large">
+		<h1 class="slds-text-heading_large">{title}</h1>
+		<h3>Write JavaScript, HTML, and CSS code, and preview the output in the interactive code editor.</h3>
+
+		<!-- Using an if statement -->
+		<template if:true={showFeatures}>
+			<div class="slds-p-top_large">
+				<h2 class="slds-text-heading_medium">Features</h2>
+
+				<!-- Using a for statement -->
+				<template for:each={features} for:item='feature'>
+					<c-child label={feature.label} key={feature.label}>
+
+						<!-- Specifying the 'icon' slot for c-child -->
+						<lightning-icon icon-name={feature.icon} size="x-small" slot="icon"></lightning-icon>
+					</c-child>
+				</template>
+			</div>
+		</template>
+
+		<h2 class="slds-text-heading_medium slds-p-top_large">Resources</h2>
+		<a
+			href="https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.get_started_introduction">
+			Developer Guide
+		</a><br/>
+		<a href="https://developer.salesforce.com/docs/component-library/overview/components">Component Reference</a>
+
+	</div>
+</template>

src/app.js

@@ -0,0 +1,27 @@
+import { LightningElement } from "lwc";
+
+export default class App extends LightningElement {
+  title = "Welcome to Lightning Web Components!";
+
+  showFeatures = true;
+
+  /**
+   * Getter for the features property
+   */
+  get features() {
+    return [
+      {
+        label: "Learn in the browser.",
+        icon: "utility:edit",
+      },
+      {
+        label: "View changes to code instantly with Live Compilation.",
+        icon: "utility:refresh",
+      },
+      {
+        label: "Style your components with SLDS.",
+        icon: "utility:brush",
+      },
+    ];
+  }
+}

src/child.html

@@ -0,0 +1,5 @@
+<template>
+	<div class="slds-m-horizontal_xx-small slds-m-bottom_x-small">
+		<slot name="icon"></slot> <span class="slds-p-left_small">{label}</span>
+	</div>
+</template>

src/child.js

@@ -0,0 +1,9 @@
+import { LightningElement, api } from "lwc";
+
+/**
+ * Show an item
+ */
+export default class Child extends LightningElement {
+  @api
+  label = "";
+}

src/index.stories.js

@@ -0,0 +1,6 @@
+import "@lwc/synthetic-shadow";
+import "https://unpkg.com/@salesforce-ux/[email protected]/assets/styles/salesforce-lightning-design-system.min.css";
+import { createElement } from "lwc";
+import App from "./app";
+
+export const story = () => createElement("c-app", { is: App });