🎨 add some themes stories (#12)

* 🎨 add some themes stories

* 🐛 disable mode on them stories

* 🚀 add addon, adjust modes

* 🐛 easier mode disable

* 🤡 more examples, update fixtures

* 🎨 repo cleanup

Author: scottnath

.storybook/main.js

@@ -9,6 +9,7 @@ const config = {
     '@storybook/addon-interactions',
     '@storybook/addon-coverage',
     'storybook-addon-mock',
+    '@chromaui/addon-visual-tests',
   ],
   framework: {
     name: '@storybook/web-components-vite',

.storybook/modes.js

@@ -9,12 +9,16 @@ import { primerThemes } from './primer-preview';
 const defaultThemes = ['light', 'dark'];
 
 export const defaultModes = {};
+export const defaultModesDisabled = {};
 export const githubModes = {};
 
 for (const key of Object.keys(customViewports)) {
   defaultModes[key] = {
     viewport: key,
   };
+  defaultModesDisabled[key] = {
+    disabled: true,
+  };
   githubModes[key] = {
     viewport: key,
   };
@@ -23,6 +27,9 @@ for (const key of Object.keys(customViewports)) {
       viewport: key,
       theme: theme,
     };
+    defaultModesDisabled[`${theme} ${key}`] = {
+      disabled: true,
+    };
   };
   for (const theme of primerThemes) {
     githubModes[`primer ${theme.value} ${key}`] = {

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+
+
+<script defer data-domain="scottnath.com" src="https://plausible.io/js/script.js"></script>

README.md

@@ -9,8 +9,6 @@ Web components which display profile information from various websites
 
 ## Components
 
-## Modules
-
 <dl>
 <dt><a href="#module_GitHubUser">GitHubUser</a></dt>
 <dd><p>GitHub user profile web component</p>
@@ -41,12 +39,13 @@ GitHub user profile web component
 | login | <code>string</code> | User's GitHub login |
 | avatar_url | <code>string</code> | URL to user's avatar |
 | name | <code>string</code> | User's name |
-| [fetch] | <code>boolean</code> | when true, fetches user from [GitHub api](https://docs.github.com/en/rest/users/users#get-a-user) |
+| [fetch] | <code>boolean</code> | when true, fetches user from the [GitHub api](https://docs.github.com/en/rest/users/users#get-a-user) |
 | [username] | <code>string</code> | alias for `login` |
 | [bio] | <code>string</code> | User's biography content |
 | [following] | <code>string</code> | number of people user is following |
 | [followers] | <code>string</code> | number of followers |
 | [repos] | <code>string</code> | JSON stringified array of repositories |
+| [theme] | <code>string</code> | color theme for the component |
 
 **Example**  
 ```js
@@ -69,16 +68,17 @@ GitHub repository web component
 | Name | Type | Description |
 | --- | --- | --- |
 | full_name | <code>string</code> | repository org and name, as in `scottnath/profile-components` |
+| [fetch] | <code>boolean</code> | when true, fetches repo from the [GitHub api](https://docs.github.com/en/rest/repos/repos#get-a-repository) |
 | [name] | <code>string</code> | repo name |
 | [org] | <code>string</code> | repo owner organization's login, found at `<REST_RESPONSE>.organization.login` |
 | [description] | <code>string</code> | repo description |
 | [language] | <code>string</code> | programming language used in repo |
 | [stargazers_count] | <code>string</code> | number of stars |
 | [forks_count] | <code>string</code> | number of forks |
 | [subscribers_count] | <code>string</code> | number of watchers |
-| [fetch] | <code>boolean</code> | when true, fetches repo from [GitHub api](https://docs.github.com/en/rest/repos/repos#get-a-repository) |
 | [itemprop] | <code>string</code> | Itemprop content to go with a containing component's itemscope |
 | [no_org] | <code>string</code> | Do not include the repo owner or organization |
+| [theme] | <code>string</code> | color theme for the component |
 
 **Example**  
 ```js
@@ -101,14 +101,15 @@ dev.to user profile web component
 | Name | Type | Description |
 | --- | --- | --- |
 | username | <code>string</code> | User's dev.to username |
+| [fetch] | <code>boolean</code> | when true, fetches user and posts from the [Forem API](https://developers.forem.com/api/v0#tag/users/operation/getUser) |
 | [name] | <code>string</code> | The name of the user |
 | [summary] | <code>string</code> | The user's bio |
 | [joined_at] | <code>string</code> | The date the user joined |
 | [profile_image] | <code>string</code> | The URL of the user's profile image |
-| [fetch] | <code>boolean</code> | when true, fetches user and posts from api |
 | [post_count] | <code>number</code> | The number of posts the user has published |
 | [latest_post] | <code>string</code> | User's latest post content, JSON stringified |
 | [popular_post] | <code>string</code> | User's most popular post content, JSON stringified |
+| [theme] | <code>string</code> | color theme for the component |
 
 **Example**  
 ```js
@@ -135,7 +136,7 @@ dev.to post web component
 | url | <code>string</code> | Post URL |
 | cover_image | <code>string</code> | Post cover image URL |
 | social_image | <code>string</code> | Post social image URL |
-| [fetch] | <code>boolean</code> | when true, fetches post from api |
+| [fetch] | <code>boolean</code> | when true, fetches post from the [Forem API](https://developers.forem.com/api/v0#tag/articles/operation/getArticleById) |
 
 **Example**  
 ```js

chromatic.config.json

@@ -0,0 +1 @@
+{"projectId":"Project:64fb63fd226c27fbcd62f93a","projectToken":"chpt_97a8174bb6bd68e"}

custom-elements.json

@@ -35,6 +35,14 @@
               "name": "full_name",
               "kind": "field"
             },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "when true, fetches repo from the [GitHub api](https://docs.github.com/en/rest/repos/repos#get-a-repository)",
+              "name": "fetch",
+              "kind": "field"
+            },
             {
               "type": {
                 "text": "string"
@@ -93,26 +101,26 @@
             },
             {
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "when true, fetches repo from [GitHub api](https://docs.github.com/en/rest/repos/repos#get-a-repository)",
-              "name": "fetch",
+              "description": "Itemprop content to go with a containing component's itemscope",
+              "name": "itemprop",
               "kind": "field"
             },
             {
               "type": {
                 "text": "string"
               },
-              "description": "Itemprop content to go with a containing component's itemscope",
-              "name": "itemprop",
+              "description": "Do not include the repo owner or organization",
+              "name": "no_org",
               "kind": "field"
             },
             {
               "type": {
                 "text": "string"
               },
-              "description": "Do not include the repo owner or organization",
-              "name": "no_org",
+              "description": "color theme for the component",
+              "name": "theme",
               "kind": "field"
             }
           ],
@@ -196,7 +204,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "when true, fetches user from [GitHub api](https://docs.github.com/en/rest/users/users#get-a-user)",
+              "description": "when true, fetches user from the [GitHub api](https://docs.github.com/en/rest/users/users#get-a-user)",
               "name": "fetch",
               "kind": "field"
             },
@@ -239,6 +247,14 @@
               "description": "JSON stringified array of repositories",
               "name": "repos",
               "kind": "field"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "color theme for the component",
+              "name": "theme",
+              "kind": "field"
             }
           ],
           "superclass": {
@@ -293,6 +309,14 @@
               "name": "username",
               "kind": "field"
             },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "when true, fetches user and posts from the [Forem API](https://developers.forem.com/api/v0#tag/users/operation/getUser)",
+              "name": "fetch",
+              "kind": "field"
+            },
             {
               "type": {
                 "text": "string"
@@ -325,14 +349,6 @@
               "name": "profile_image",
               "kind": "field"
             },
-            {
-              "type": {
-                "text": "boolean"
-              },
-              "description": "when true, fetches user and posts from api",
-              "name": "fetch",
-              "kind": "field"
-            },
             {
               "type": {
                 "text": "number"
@@ -356,6 +372,14 @@
               "description": "User's most popular post content, JSON stringified",
               "name": "popular_post",
               "kind": "field"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "color theme for the component",
+              "name": "theme",
+              "kind": "field"
             }
           ],
           "superclass": {
@@ -446,7 +470,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "when true, fetches post from api",
+              "description": "when true, fetches post from the [Forem API](https://developers.forem.com/api/v0#tag/articles/operation/getArticleById)",
               "name": "fetch",
               "kind": "field"
             }

lib/cli.js

@@ -2,9 +2,9 @@
 
 import { Command } from 'commander';
 
-import { writeDevCssFile } from '../src/devto/utils/forem.js';
-import { writePrimerCssFile } from '../src/github/utils/primer.js';
-import { generateFixtures as genFixGitHub } from '../src/github/utils/fixtures.js';
+import { writeDevCssFile } from '../src/devto/helpers/forem.js';
+import { writePrimerCssFile } from '../src/github/helpers/primer.js';
+import { generateFixtures as genFixGitHub } from '../src/github/helpers/fixtures.js';
 import { generateFixtures as genFixDevTo } from '../src/devto/fixtures/utils.js';
 import { generateDocs } from './jsdoc.js';
 

lib/custom-elements-manifest.config.js

@@ -16,11 +16,4 @@ export default {
   dependencies: false,
   dev: false,
   packagejson: true,
-  plugins: [
-    readmePlugin({
-      from: getModulePaths().root,
-      to: 'custom-elements-readme.md',
-      omitSections: ['exports']
-    }),
-  ],
 }

lib/jsdoc.js

@@ -39,11 +39,12 @@ export const generateDocs = async () => {
         pathFromRoot('src/devto/user/index.js'),
         pathFromRoot('src/devto/post/index.js'),
       ],
+      // @todo automate changing `Modules` to `Components`
     },
     {
-      title: `GitHub profile components' utilities`,
-      dir: pathFromRoot('src/github/utils'),
-      files: pathFromRoot('src/github/utils/*.js'),
+      title: `GitHub profile components' helpers`,
+      dir: pathFromRoot('src/github/helpers'),
+      files: pathFromRoot('src/github/helpers/*.js'),
     },
     {
       title: 'GitHub utilities',
@@ -56,39 +57,11 @@ export const generateDocs = async () => {
         pathFromRoot('src/github/repository/content.js'),
         pathFromRoot('src/github/index.js'),
       ],
-      filename: 'UTILITIES.md',
     },
     {
-      title: 'GitHub repository details component',
-      dir: pathFromRoot('src/github/repository'),
-      files: [
-        pathFromRoot('src/github/repository/index.js'),
-        pathFromRoot('src/github/repository/content.js'),
-        pathFromRoot('src/github/repository/html.js'),
-      ],
-    },
-    {
-      title: `DEV profile components' utilities`,
-      dir: pathFromRoot('src/devto/utils'),
-      files: pathFromRoot('src/devto/utils/*.js'),
-    },
-    {
-      title: 'Dev user profile component',
-      dir: pathFromRoot('src/devto/user'),
-      files: [
-        pathFromRoot('src/devto/user/index.js'),
-        pathFromRoot('src/devto/user/content.js'),
-        pathFromRoot('src/devto/user/html.js'),
-      ],
-    },
-    {
-      title: 'DEV post component',
-      dir: pathFromRoot('src/devto/post'),
-      files: [
-        pathFromRoot('src/devto/post/index.js'),
-        pathFromRoot('src/devto/post/content.js'),
-        pathFromRoot('src/devto/post/html.js'),
-      ],
+      title: `DEV profile components' helpers`,
+      dir: pathFromRoot('src/devto/helpers'),
+      files: pathFromRoot('src/devto/helpers/*.js'),
     },
     {
       title: 'DEV utilities',
@@ -101,7 +74,6 @@ export const generateDocs = async () => {
         pathFromRoot('src/devto/post/content.js'),
         pathFromRoot('src/devto/index.js'),
       ],
-      filename: 'UTILITIES.md',
     },
   ]
   for (const toDoc of toDocs) {