Merge branch 'main' into feature-icon-library

.github/pull_request_template.md

@@ -2,6 +2,7 @@
 
 - [ ] Bug fix
 - [ ] New component/feature
+- [ ] Component update
 - [ ] Documentation update
 - [ ] Other
 
@@ -15,3 +16,5 @@ Tell us what this PR does or link to any related issues that describe the goal h
 - [ ] Documented any new components or features
 - [ ] Added any changes in this PR to the `CHANGELOG.md` `Next` section
 - [ ] If this pull request includes a new component or feature, has it been exported from one of the library's entry points?
+- [ ] Does the component dispatch relevant interaction events? (ie: on:click, on:change, etc.)
+- [ ] Does the component directory include description and usage information in `.stories.svelte`?

.github/workflows/storybook-tests.yml

@@ -11,6 +11,8 @@ jobs:
           node-version: '20.x'
       - name: Install dependencies
         run: npm ci
+      - name: Run Vitest tests
+        run: npm test
       - name: Install Playwright
         run: npx playwright install --with-deps
       - name: Build Storybook

.storybook/main.js

@@ -6,7 +6,8 @@ const config = {
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     "@storybook/addon-svelte-csf",
-    "@storybook/addon-a11y"
+    "@storybook/addon-a11y",
+    "@etchteam/storybook-addon-github-link"
   ],
   framework: {
     name: "@storybook/sveltekit",

.storybook/preview-head.html

@@ -6,3 +6,4 @@
 />
 <link href="https://use.typekit.net/lqo0ftp.css" rel="stylesheet" />
 <link rel="shortcut icon" href="/favicon.ico" />
+<script src="https://unpkg.com/topojson-client@3"></script>

.storybook/preview.js

@@ -25,6 +25,8 @@ const preview = {
           "Components",
           "Layout",
           "Logos",
+          "Maps",
+          ["SVGMap"],
           "Utils",
           "Actions",
           "Stores"
@@ -33,6 +35,42 @@ const preview = {
     },
     docs: {
       source: { language: "svelte" }
+    },
+    viewport: {
+      viewports: {
+        small: {
+          name: "Small",
+          styles: {
+            width: "375px",
+            height: "667px"
+          }
+        },
+        medium: {
+          name: "Medium",
+          styles: {
+            width: "460px",
+            height: "800px"
+          }
+        },
+        large: {
+          name: "Large",
+          styles: {
+            width: "768px",
+            height: "100%"
+          }
+        },
+        xl: {
+          name: "XL",
+          styles: {
+            width: "1160px",
+            height: "100%"
+          }
+        }
+      }
+    },
+    githubLink: {
+      baseURL: "https://github.com/UrbanInstitute/dataviz-components/tree/main/src/lib/",
+      auto: false
     }
   },
   decorators: [() => Theme]

README.md

@@ -25,3 +25,15 @@ To build your library:
 ```bash
 npm run package
 ```
+
+### CLI-based command for creating new component boilerplate
+
+To create three boilerplate files for a new component (`ComponentName.svelte`, `ComponentName.stories.svelte`, and `ComponentName.docs.md`), run the following command:
+
+```bash
+npm run create-component
+```
+
+## Contributing to this library
+
+When contributing to this library, keep the following guidelines in mind. The [pull request template](https://github.com/UrbanInstitute/dataviz-components/blob/main/.github/pull_request_template.md) requires explanation of changes and provides a checklist of tasks to ensure clean code and documentation. Please name all branches in `kebab-case`, beginning with "patch", "feature", or "bugfix", and provide insightful commit messages.

bin/compileTheme.js

@@ -0,0 +1,20 @@
+import { compile } from "svelte/compiler";
+import { readFile, writeFile } from "fs/promises";
+import path from "path";
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const themePath = path.resolve(__dirname, "../src/lib/Theme/Theme.svelte");
+const outputPath = path.resolve(__dirname, "..", "dist/style", "theme.css");
+
+
+async function main() {
+  const themeSource = await readFile(themePath, "utf-8")
+  const { css } = compile(themeSource, {
+    cssHash: () => "tmpglobal"
+  });
+  const globalCss = css.code.replaceAll(".tmpglobal", "");
+  return writeFile(outputPath, globalCss);
+}
+
+main()

bin/createComponent/createComponent.js

@@ -0,0 +1,72 @@
+#!/usr/bin/env node
+import { input } from "@inquirer/prompts";
+import fs from "fs";
+import path from "path";
+import process from "process";
+import { createStory } from "./createStory.js";
+import { createDocs } from "./createDocs.js";
+
+// check if PascalCase https://www.w3resource.com/javascript-exercises/javascript-string-exercise-56.php
+function isPascalCase(str) {
+  return /^[A-Z][A-Za-z]*$/.test(str);
+}
+
+// check if name is valid
+function validateName(componentName) {
+  if (!componentName) {
+    return "Please enter a component name";
+  } else if (!isPascalCase(componentName)) {
+    return "Component name must be in PascalCase";
+  } else {
+    return true;
+  }
+}
+
+function createFiles(componentName) {
+  // validate file name
+  const validated = validateName(componentName);
+  if (validated !== true) {
+    return console.error(validated);
+  }
+
+  // declare dir
+  const dir = path.join(process.cwd(), "src", "lib", componentName);
+
+  // if directory exists show error, else create files
+  if (fs.existsSync(dir)) {
+    console.error("Directory already exists");
+  } else {
+    // create directory
+    fs.mkdirSync(dir, { recursive: true });
+
+    // create Component.svelte (blank)
+    const svelteFilePath = path.join(dir, `${componentName}.svelte`);
+    fs.writeFileSync(svelteFilePath, "", "utf8");
+
+    // create Component.docs.md
+    const docsFilePath = path.join(dir, `${componentName}.docs.md`);
+    fs.writeFileSync(docsFilePath, createDocs(componentName), "utf8");
+
+    // create Component.stories.svelte
+    const storyFilePath = path.join(dir, `${componentName}.stories.svelte`);
+    fs.writeFileSync(storyFilePath, createStory(componentName), "utf8");
+
+    // Confirmation text
+    console.log(`Boilerplate files created in ${dir}`);
+  }
+}
+
+async function main() {
+  // if there's an argument in the command, use it (but no more)
+  if (process.argv[2] && !process.argv[3]) {
+    createFiles(process.argv[2]);
+  } else {
+    // show input
+    await input({
+      message: "What is the name of your component? (ie: MyComponent)",
+      validate: validateName
+    }).then(createFiles);
+  }
+}
+
+main().catch(console.error);

bin/createComponent/createDocs.js

@@ -0,0 +1,8 @@
+export function createDocs(componentName) {
+  return `Esse ipsum deserunt dolor minim dolore sunt cillum.
+
+\`\`\`js
+import { ${componentName} } from "@urbaninstitute/dataviz-components";
+\`\`\`
+`;
+}

bin/createComponent/createStory.js

@@ -0,0 +1,32 @@
+export function createStory(componentName) {
+  return `<script context="module">
+  import TestingTree from "./TestingTree.svelte";
+  import docs from "./TestingTree.docs.md?raw";
+
+  export const meta = {
+    title: "Components/TestingTree",
+    component: TestingTree,
+    tags: ["autodocs"],
+    parameters: {
+      docs: {
+        description: {
+          component: docs
+        }
+      },
+      githubLink: {
+        url: "/TestingTree/TestingTree.svelte"
+      }
+    }
+  };
+</script>
+
+<script>
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+</script>
+
+<Template let:args>
+  <TestingTree {...args} />
+</Template>
+
+<Story name="Default" />`;
+}