Merge pull request #3 from tildeio/reorg

Re-organize render code for shorter files

Author: gitKrystan

src/css-classes.ts

@@ -0,0 +1,79 @@
+import { Perk, PerkValue } from './types/data';
+
+/**
+ * The values listed here are used as CSS classes. See source link for more
+ * information.
+ */
+export const CLASSES = {
+  /**
+   * The element displayed while the grid is loading.
+   * Only used in custom-element.
+   */
+  loading: 'epg_loading' as const,
+  /**
+   * The element displayed if there is an error while loading the grid/
+   * Only used in custom-element.
+   */
+  error: 'epg_error' as const,
+  /** The parent grid element, once loaded with no error */
+  grid: 'epg_grid' as const,
+  /**
+   * If the grid element has this class, the element should be displayed as a
+   * grid rather than as a list.
+   */
+  displayAsGrid: 'epg_display-as-grid' as const,
+  /** The grid header rowgroup element */
+  header: 'epg_header' as const,
+  /** The grid body rowgroup element */
+  body: 'epg_body' as const,
+  /** The grid footer rowgroup element */
+  footer: 'epg_footer' as const,
+  /** All rowgroup elements */
+  rowgroup: 'epg_rowgroup' as const,
+  /** All row elements */
+  row: 'epg_row' as const,
+  /** All columnheader elements */
+  columnheader: 'epg_columnheader' as const,
+  /** All rowheader elements */
+  rowheader: 'epg_rowheader' as const,
+  /** All gridcell, columnheader, and rowheader elements */
+  cell: 'epg_cell' as const,
+  /** All gridcell and columnheader elements related to a Package */
+  package: 'epg_package' as const,
+  /** All gridcell and rowheader elements related to a Perk */
+  perk: 'epg_perk' as const,
+  /** Lists of perks within the package header elements */
+  packagePerkList: 'epg_package-perk-list' as const,
+  /** All Package Name or Perk Description elements */
+  descriptor: 'epg_descriptor' as const,
+  attributes: {
+    /** All Package/Park attribute elements */
+    container: 'epg_attributes' as const,
+    /** All Package/Park "sold-out" attribute elements */
+    soldOut: 'epg_attributes-sold-out' as const,
+    /** All Package/Park "limited" attribute elements */
+    limited: 'epg_attributes-limited' as const,
+  },
+  /**
+   * @param perk
+   * @param value A {@link PerkValue} or undefined. If undefined, the value is falsy.
+   * @returns A string of classes for selecting a perk value.
+   *
+   * @example
+   * ```js
+   * CLASSES.perkValue(mySimplePerk, false);
+   * #=> 'epg_perk-value epg_perk-value-simple epg_perk-value-falsy'
+   *
+   * CLASSES.perkValue(myQuantityPerk, 1);
+   * #=> 'epg_perk-value epg_perk-value-quantity epg_perk-value-truthy'
+   *
+   * CLASSES.perkValue(myFreeformPerk, undefined);
+   * #=> 'epg_perk-value epg_perk-value-freeform epg_perk-value-falsy'
+   * ```
+   */
+  perkValue(perk: Perk, value: PerkValue | undefined): string {
+    return `epg_perk-value epg_perk-value-${perk.type} epg_perk-value-${
+      value ? 'truthy' : 'falsy'
+    }`;
+  },
+};

src/custom-element.ts

@@ -1,21 +1,10 @@
+import { CLASSES } from './css-classes';
 import { fetchData, PerkGridFetchError } from './fetch-data';
-import { render, CLASSES as GRID_CLASSES, DisplayOption } from './render';
+import { render } from './render';
+import { DisplayOption } from './render/types';
 import { PerkGridTypeError } from './types/utils';
 import { createElement } from './utils/rendering';
 
-/**
- * The values listed here are used as CSS classes. See source link for more
- * information.
- */
-export const CLASSES = {
-  /** See the './render' file for more details. */
-  ...GRID_CLASSES,
-  /** The element displayed while the grid is loading */
-  loading: 'epg_loading' as const,
-  /** The element displayed if there is an error while loading the grid */
-  error: 'epg_error' as const,
-};
-
 /**
  * The following dataset properties can be set on the `<perk-grid>` element by
  * including them as `data-` attributes on the element.
@@ -272,4 +261,4 @@ if (customElements.get('perk-grid')) {
   customElements.define('perk-grid', PerkGrid);
 }
 
-export {};
+export * from './css-classes';

src/index.ts

@@ -1,5 +1,6 @@
 import './index.css';
 
+export * from './css-classes';
 export * from './fetch-data';
 export * from './render';
 export * from './types/data';