Add storybook

.eslintrc.json

@@ -9,6 +9,7 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:@typescript-eslint/recommended-requiring-type-checking",
     "plugin:jest/recommended",
+    "plugin:storybook/recommended",
     "prettier"
   ],
   "ignorePatterns": ["assets", "test", "json-editor"],

.gitignore

@@ -34,3 +34,4 @@ __*
 src/**/*.js
 !src/**/assets/**/*.js
 !src/demos/**/*.js
+storybook-static/

.storybook/addons/theme/apply-theme.js

@@ -0,0 +1,22 @@
+import { useEffect } from '@storybook/addons';
+
+/*
+  A global decorator that applies the theme defined in globals.currentTheme
+*/
+
+const applyTheme = theme => {
+  Object.entries(theme).forEach(([key, value]) => {
+    document.documentElement.style.setProperty(key, value);
+  });
+};
+
+export const withTheme = (StoryFn, context) => {
+  const { globals } = context;
+  const currentTheme = globals.currentTheme;
+
+  useEffect(() => {
+    applyTheme(currentTheme);
+  }, [currentTheme]);
+
+  return StoryFn();
+};

.storybook/addons/theme/register.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { AddonPanel } from '@storybook/components';
+import { addons, types } from '@storybook/addons';
+import { ThemePicker } from './theme-picker';
+
+const ADDON_ID = 'theme-picker';
+const PANEL_ID = `${ADDON_ID}/panel`;
+
+addons.register(ADDON_ID, (api) => {
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
+    title: 'Theme',
+    render: ({ active, key }) => (
+      <AddonPanel active={active} key={key}>
+        <ThemePicker />
+      </AddonPanel>
+    ),
+  });
+});

.storybook/addons/theme/theme-picker.js

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { useGlobals } from '@storybook/api';
+import { Button,  } from '@storybook/components';
+import * as themes from './themes';
+
+/*
+  A panel that allows setting the theme defined in globals.currentTheme
+*/
+
+// TODO: there are better ways to do this....
+const containerStyle = {
+  padding: '10px',
+};
+
+const toolbarStyle = {
+  display: 'flex',
+  gap: '1rem',
+};
+
+const swatchesStyle = {
+  marginTop: '10px',
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+  gap: '5px',
+};
+
+const labelStyle = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '5px 10px',
+  border: 'solid 1px lightgray',
+};
+
+export const ThemePicker = _ => {
+  const [globals, updateGlobals] = useGlobals();
+
+  const [namedTheme, setNamedTheme] = useState(0);
+
+  const setColor = evt => {
+    const { name, value } = evt.target;
+    const currentTheme = { ...globals.currentTheme, [name]: value };
+    applyTheme(currentTheme);
+  }
+
+  const applyNamedTheme = themeName => {
+    const theme = themes[themeName];
+    setNamedTheme(themeName);
+    theme && applyTheme(theme);
+  };
+
+  const applyTheme = theme => {
+    updateGlobals({ currentTheme: theme })
+  }
+
+  const currentTheme = globals.currentTheme || {};
+
+  return (
+    <div className="theme-picker" style={containerStyle}>
+      <div className="theme-picker-toolbar" style={toolbarStyle}>
+        {Object.keys(themes).map((theme, idx) => {
+            const themeName = theme.replace('Theme', '');
+            return <Button key={idx} secondary outline small onClick={_ => applyNamedTheme(theme)}>{themeName}</Button>;
+          }
+        )}
+      </div>
+      <div className="theme-picker-swatches" style={swatchesStyle}>
+        {Object.keys(currentTheme).map((key, idx) => (
+          <label key={idx} style={labelStyle}>{key}: <input type="color" name={key} value={currentTheme[key]} onChange={setColor} /></label>
+        ))}
+      </div>
+    </div>
+  );
+};

.storybook/addons/theme/themes.js

@@ -0,0 +1,75 @@
+// TODO: this could just come from calcite-colors
+export const defaultTheme = {
+  '--calcite-ui-brand': '#007ac2', // **
+  '--calcite-ui-brand-hover': '#00619b', // **
+  '--calcite-ui-brand-press': '#004874', // **
+  '--calcite-ui-info': '#00619b',
+  '--calcite-ui-success': '#35ac46',
+  '--calcite-ui-warning': '#edd317',
+  '--calcite-ui-danger': '#d83020',
+  '--calcite-ui-danger-hover': '#a82b1e',
+  '--calcite-ui-danger-press': '#7c1d13',
+  '--calcite-ui-background': '#f8f8f8', // **
+  '--calcite-ui-foreground-1': '#ffffff', // **
+  '--calcite-ui-foreground-2': '#f3f3f3', // **
+  '--calcite-ui-foreground-3': '#eaeaea', // **
+  '--calcite-ui-text-1': '#151515', // **
+  '--calcite-ui-text-2': '#4a4a4a', // **
+  '--calcite-ui-text-3': '#6a6a6a', // **
+  '--calcite-ui-text-inverse': '#ffffff', // **
+  '--calcite-ui-text-link': '#00619b', // **
+  '--calcite-ui-border-1': '#cacaca', // **
+  '--calcite-ui-border-2': '#d4d4d4',
+  '--calcite-ui-border-3': '#dfdfdf',
+  '--calcite-ui-border-input': '#949494'
+};
+
+export const greenTheme = {
+  '--calcite-ui-brand': '#309c3d',
+  '--calcite-ui-brand-hover': '#367d3e',
+  '--calcite-ui-brand-press': '#367d3e',
+  '--calcite-ui-info': '#00619b',
+  '--calcite-ui-success': '#35ac46',
+  '--calcite-ui-warning': '#edd317',
+  '--calcite-ui-danger': '#d83020',
+  '--calcite-ui-danger-hover': '#a82b1e',
+  '--calcite-ui-danger-press': '#7c1d13',
+  '--calcite-ui-background': '#f3f7f3', // **
+  '--calcite-ui-foreground-1': '#f3f9f3',
+  '--calcite-ui-foreground-2': '#f3f3f3',
+  '--calcite-ui-foreground-3': '#eaeaea',
+  '--calcite-ui-text-1': '#367d3e', // **
+  '--calcite-ui-text-2': '#309c3d', // **
+  '--calcite-ui-text-3': '#2da43b', // **
+  '--calcite-ui-text-inverse': '#f3f7f3', // **
+  '--calcite-ui-text-link': '#367d3e', // **
+  '--calcite-ui-border-1': '#cacaca', // **
+  '--calcite-ui-border-2': '#d4d4d4',
+  '--calcite-ui-border-3': '#dfdfdf',
+  '--calcite-ui-border-input': '#949494'
+};
+
+export const redTheme = {
+  '--calcite-ui-brand': '#9e0000',
+  '--calcite-ui-brand-hover': '#850000',
+  '--calcite-ui-brand-press': '#850000',
+  '--calcite-ui-info': '#00619b',
+  '--calcite-ui-success': '#35ac46',
+  '--calcite-ui-warning': '#edd317',
+  '--calcite-ui-danger': '#d83020',
+  '--calcite-ui-danger-hover': '#a82b1e',
+  '--calcite-ui-danger-press': '#7c1d13',
+  '--calcite-ui-background': '#f3f7f3', // **
+  '--calcite-ui-foreground-1': '#ecbbbb',
+  '--calcite-ui-foreground-2': '#f3f3f3',
+  '--calcite-ui-foreground-3': '#eaeaea',
+  '--calcite-ui-text-1': '#841a1a', // **
+  '--calcite-ui-text-2': '#aa2222', // **
+  '--calcite-ui-text-3': '#d52a2a', // **
+  '--calcite-ui-text-inverse': '#f3f7f3', // **
+  '--calcite-ui-text-link': '#367d3e', // **
+  '--calcite-ui-border-1': '#cacaca', // **
+  '--calcite-ui-border-2': '#d4d4d4',
+  '--calcite-ui-border-3': '#dfdfdf',
+  '--calcite-ui-border-input': '#949494'
+};

.storybook/decorators/direction.js

@@ -0,0 +1,7 @@
+export const withDirection = (Story,context) => {
+  return (
+    `<div class="dir-el" dir="${context.globals.dir}">
+      ${Story(context)}
+    </div>`
+  )
+}

.storybook/decorators/locale.js

@@ -0,0 +1,7 @@
+export const withLocale = (Story,context) => {
+  return (
+    `<div class="lang-el" lang="${context.globals.locale}">
+      ${Story(context)}
+    </div>`
+  )
+}

.storybook/decorators/withRenderCallback.js

@@ -0,0 +1,12 @@
+import addons from "@storybook/addons";
+import { STORY_RENDERED } from "@storybook/core-events"
+
+export const withRenderCallback = (selector, callback) => {
+  return (Story, context) => {
+    const { args } = context;
+    addons.getChannel().once(STORY_RENDERED, () => {
+      callback(document.querySelector(selector), { args });
+    });
+    return Story();
+  };
+};

.storybook/main.js

@@ -0,0 +1,21 @@
+module.exports = {
+  stories: [
+    "../src/**/*.stories.@(mdx|ts|tsx)",
+    "../doc/**/*.stories.mdx"
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@pxtrn/storybook-addon-docs-stencil",
+    //"@storybook/addon-controls", // recommended replacement for @storybook/addon-knobs
+    "./addons/theme/register",
+    "@storybook/addon-a11y",
+    "@storybook/addon-knobs" // we don't use knobs but calcite-components does
+  ],
+  refs: {
+    calciteComponents: {
+      title: "Calcite Components",
+      url: "https://esri.github.io/calcite-components"
+    },
+  },
+}

.storybook/manager-head.html

@@ -0,0 +1 @@
+<link rel='icon' href='solutions-icon.svg'/>

.storybook/manager.js

@@ -0,0 +1,8 @@
+import { addons } from '@storybook/addons';
+import theme from './theme';
+
+// this is the storybook theme
+addons.setConfig({
+  theme,
+  enableShortcuts: false
+});

.storybook/preview-head.html

@@ -0,0 +1,15 @@
+<meta name="solutions-components-assets-url" content="solutions-components/assets/i18n">
+<style>
+  html,
+  body,
+  #root,
+  .lang-el,
+  .dir-el {
+    height: 100%;
+  }
+</style>
+<link
+  rel="stylesheet"
+  type="text/css"
+  href="https://unpkg.com/@esri/[email protected]/dist/calcite/calcite.css"
+/>

.storybook/preview.js

@@ -0,0 +1,81 @@
+import { withDirection } from './decorators/direction';
+import { withLocale } from './decorators/locale';
+import { withTheme } from './addons/theme/apply-theme';
+import { defineCustomElements } from '../dist/esm/loader';
+import { extractArgTypes, extractComponentDescription, setStencilDocJson } from '@pxtrn/storybook-addon-docs-stencil';
+import docJson from '../dist/docs.json';
+import { defaultTheme } from './addons/theme/themes';
+
+// get the URL that the application is deployed to
+// when running locally or when deployed to gh-pages
+const url = new URL(document.currentScript.src);
+url.pathname = url.pathname.startsWith('/solutions-components/') ? '/solutions-components/' : '/';
+
+// initialize hub components
+defineCustomElements(window, {
+  // NOTE: in this case /solutions-components refers to the subfolder
+  // where the assets are output during the build
+  // see this comment on why it's not just solutions-components
+  // https://github.com/ArcGIS/opendata-ui/blob/c0ead8e71203bb855202310fcda13fdc00631e6d/packages/opendata-ui/app/initializers/solutions-components.js#L7-L11
+  resourcesUrl: `${url.href}solutions-components/assets`
+});
+
+setStencilDocJson(docJson);
+
+export const parameters = {
+  options: {
+    storySort: {
+      order: [
+        'Guides',
+        ['License'],
+        'Components'
+      ]
+    },
+  },
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    hideNoControlsWarning: true,
+    matchers: {
+      color: /(background|fill|color)$/i,
+      date: /Date$/,
+    },
+  },
+  docs: {
+    extractArgTypes,
+    extractComponentDescription,
+  },
+}
+
+export const globalTypes = {
+  dir: {
+    name: 'Direction',
+    description: 'Direction css property on ancestor element',
+    defaultValue: 'ltr',
+    toolbar: {
+      icon: 'transfer',
+      items: ['ltr', 'rtl'],
+      showName: true,
+    },
+  },
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    defaultValue: 'en',
+    toolbar: {
+      icon: 'globe',
+      items: [
+        { value: 'en', right: '🇺🇸', title: 'English' },
+        { value: 'fr', right: '🇫🇷', title: 'Français' },
+        { value: 'es', right: '🇪🇸', title: 'Español' },
+        { value: 'zh-cn', right: '🇨🇳', title: '中文' },
+        { value: 'ko', right: '🇰🇷', title: '한국어' },
+      ],
+      showName: true,
+    },
+  },
+  currentTheme: {
+    defaultValue: defaultTheme
+  }
+};
+
+export const decorators = [ withDirection, withLocale, withTheme ];

.storybook/theme.js

@@ -0,0 +1,7 @@
+import { create } from '@storybook/theming';
+
+export default create({
+  base: 'light',
+  brandTitle: 'Solutions Components',
+  brandImage: 'solutions-icon.svg',
+});

CHANGELOG.md

@@ -6,6 +6,10 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+## [0.0.10] - December 16th 2021
+
+* Fixed distribution
+
 ## [0.0.9] - December 15th 2021
 
 * Updated configuration of `solution-configuration`
@@ -14,5 +18,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 [0.0.2]: https://github.com/Esri/solution.js/compare/3dc2e8e89cd42b447420b2c0cba988738d0c7195...v0.0.2 "v0.0.2"
 [0.0.9]: https://github.com/Esri/solution.js/compare/v0.0.2...v0.0.9 "v0.0.9"
-[Unreleased]: https://github.com/Esri/solution.js/compare/v0.0.5...HEAD "Unreleased Changes"
+[0.0.10]: https://github.com/Esri/solution.js/compare/v0.0.9...v0.0.10 "v0.0.10"
+[Unreleased]: https://github.com/Esri/solution.js/compare/v0.0.10...HEAD "Unreleased Changes"