✨ created json-resume web component (#1)

* 🤡 add example package

* 📝 adjust repo name

* ✅ add chromatic and UI tests

Author: scottnath

.github/workflows/chromatic.yml

@@ -0,0 +1,30 @@
+# Workflow name
+name: 'Chromatic'
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+      - name: Install dependencies
+        run: yarn install
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@latest
+        # Chromatic GitHub Action options
+        with:
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          onlyChanged: true

.github/workflows/ui-tests.yml

@@ -0,0 +1,24 @@
+name: 'UI Tests'
+
+on: push
+
+jobs:
+  # Run interaction and accessibility tests
+  interaction-and-accessibility:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+      - name: Install dependencies
+        run: yarn install
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Build Storybook
+        run: npm run build-storybook
+      - name: Serve Storybook and run tests
+        run: |
+          npx --yes concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+          "npx --yes http-server ./storybook-static --port 2001 --silent" \
+          "npx wait-on http://127.0.0.1:2001 && npx test-storybook  --url http://127.0.0.1:2001"

.storybook/main.ts

@@ -0,0 +1,36 @@
+import type { StorybookConfig } from '@storybook/web-components-vite'
+import path from 'path'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@chromatic-com/storybook',
+    'storybook-addon-render-modes'
+  ],
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  async viteFinal(config, options) {
+    // Ensures that the cache directory is inside the project directory
+    config.cacheDir = path.join(__dirname, '../node_modules/.vite-storybook')
+    config.resolve = {
+      ...config.resolve,
+      alias: {
+        '@': path.resolve(__dirname, '../src/'),
+      },
+    }
+    config.define = {
+      ...config.define,
+      'process.env': process.env,
+    }
+    return config
+  },
+}
+export default config

.storybook/preview.ts

@@ -0,0 +1,50 @@
+import type { Preview } from '@storybook/web-components'
+import { setCustomElementsManifest } from "@storybook/web-components";
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+import customElements from "../custom-elements.json";
+
+setCustomElementsManifest(customElements);
+
+const customViewports = {
+  minimum: {
+    name: 'minimum',
+    styles: {
+      width: '400px',
+      height: '100%'
+    },
+  },
+  medium: {
+    name: 'medium',
+    styles: {
+      width: '600px',
+      height: '100%'
+    },
+  },
+};
+
+const personSchemaWrapper = content => {
+  return `<article itemscope itemtype="https://schema.org/Person">${content}</article>`
+}
+global.psw = personSchemaWrapper
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      expanded: true,
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    layout: 'fullscreen',
+    viewport: {
+      viewports: {
+        ...MINIMAL_VIEWPORTS,
+        ...customViewports,
+      },
+    },
+  },
+}
+
+export default preview

README.md

@@ -1,16 +1,53 @@
-# jsonresume-web-component
+# jsonresume-component
 
-A web component (using LitElement) which presents resume content stored in [JSON Resume][jsonresume] format. The HTML structure uses the methods in [jsonresume-theme-microdata][jtm] to generate HTML which includes structured data as microdata in HTML attributes.
+`<json-resume>` is a web component (using LitElement) which presents resume content stored in [JSON Resume][jsonresume] format. The HTML structure uses the components from [jsonresume-theme-microdata][jtm] to generate HTML which includes structured data as microdata in HTML attributes.
 
-## Installation
+
+## NPM / Node.js usage
+
+### Install dependencies
+
+```sh
+npm i jsonresume-component
+```
 
 ```javascript
-npm i jsonresume-web-component
+import { JsonResume } from 'jsonresume-component/src/index.js';
+```
+
+```html
+<JsonResume gist_id="9e7a7ceb9425336c6aa08d58afb63b8d"></JsonResume>
+```
+
+## Browser usage
+
+**note:** requires installing `lit` and `@lit/task`.
+
+### Add jsonresume-component and dependencies
+
+```html
+<script type="importmap">
+  {
+    "imports": {
+      "lit": "https://esm.run/lit",
+      "@lit/task": "https://esm.run/@lit/task"
+    }
+  }
+</script>
+<script type="module">
+  import 'https://esm.run/jsonresume-component'
+</script>
+```
+
+### Use the web component by giving it your `gist` ID
+
+```html
+<json-resume gist_id="9e7a7ceb9425336c6aa08d58afb63b8d"></json-resume>
 ```
 
 ## A modified JSON Resume schema
 
-The JSON structure follows an extension of the [JSON Resume][jsonresume] schema with added schema structure for microdata `itemtype` on some content types, `basics.pronouns`, and `meta.sectionTitles` which allows changing the content of the resume section titles. See the [jsonresume-theme-microdata][jtm] README for details on this adjusted structure.
+The JSON structure follows an extension of the [JSON Resume][jsonresume] schema with added schema structure for microdata `itemtype` on some content types, `basics.pronouns`, and `meta.themeOptions` which allows changing the content of the resume section titles, colors, and other theme opts. See the [jsonresume-theme-microdata][jtm] README for details on this adjusted structure.
 
 
 [microdata-html]: /blahg/microdata-with-html/