Stories

Abyss utilizes Storybook as a frontend workshop for building out your Parcels in isolation.

Every Parcel you create needs a .stories file for setup and configuration. Below is the expected structure for stories. We define stories according to the Component Story Format (CSF), an ES6 module-based standard that is easy to write and portable between tools.

├── .abyss
|   ├── environments.json
|   └── settings.json
├── public
├── src
|   ├── apps
|   |   ├── MyParcel
|   |   |   ├── index.js
|   |   |   ├── MyParcel.jsx
|   |   |   └── MyParcel.stories.jsx
|   └── common
└── package.json

The key ingredients are the default export that describes the component, and named exports that describe the stories. Read more about stories and their various configurations here: Stories. Each default export requires both the component and parcel prop.

• The component property is the React component you are creating for your Parcel.
• The parcel property is the desired name of the Parcel. It must be in kebab-case format.

// MyParcel.stories.jsx

import React from 'react';

import { MyParcel } from './MyParcel';

export default {
  // Title of the Story
  title: 'MyParcel',
  // Title of the Parcel element tag
  parcel: 'my-parcel'
  // Parcel React component
  component: MyParcel,
};

const Template = (args) => {
  return <MyParcel {...args} />;
};

export const Primary = Template.bind({});

Because of the Component Story Format we are able to take the work you've done creating a Parcel component in Storybook and convert that into a reusable web component.

ThemeProvider

Every Parcel must be wrapped in a ThemeProvider to retain Abyss theming. This ensures that all Abyss components within your Parcel have access to the design tokens and styles they need to render correctly.

import React from 'react';
import {
  ThemeProvider,
  StyleRootProvider,
} from '@uhg-abyss/web/ui/ThemeProvider';
import { createTheme } from '@uhg-abyss/web/tools/theme';
import { Button } from '@uhg-abyss/web/ui/Button';

const theme = createTheme('uhc');

export const MyParcel = () => {
  return (
    <StyleRootProvider
      useShadowDom
      theme={theme}
      cacheOptions={{ key: 'my-parcel' }}
    >
      <ThemeProvider theme={theme}>
        <div>
          <Button>My Parcel</Button>
        </div>
      </ThemeProvider>
    </StyleRootProvider>
  );
};

Note: It's recommended for teams to use Shadow DOM with Parcels for style isolation and safe integration. Read more about Shadow DOM.