wingsuit-designsystem / wingsuit

Twig for Storybook
GNU General Public License v2.0
90 stars 16 forks source link

Using data source files with story.wingsuit.yml #183

Closed jowan closed 2 years ago

jowan commented 2 years ago

Is there a way to use a data file e.g ./data.json with wingsuit ? Modelling the data as yml in an object type field can get pretty unwieldy pretty quickly. I do it with Twig and Storybook ok, but would really like a way of doing it within the story.wingsuit.yml, e.g


my_pattern:
  namespace: "Templates/Utilities"
  use: "@templates/utilities/my-pattern.twig"
  label: My Pattern

  fields:
    data:
      type: datafile
      label: Data
      preview: './my-data.json'

any thoughts ?

jowan commented 2 years ago

So I solved this in the story (seems obvs now). I just loop through my wingsuit object, find the field, and get data from somewhere, which in my case is a file. Ideally I'd make a generic function so that if ever I encouter a field with a certain reserved parameter name e.g dataFilePath then i'd look for that file, process it and load it back in.

So something like this:

import './index';

const patternDefinition = require('./jc-modal-row.wingsuit.yml');

patternDefinition.my_pattern_id.fields.my_object_field_name.preview.forEach(function callbackFn(row, index) {
  // get my data from row.dataFilePath
  const newRow = row.dataFilePath;
  patternDefinition.jc_modal_row.fields.incidents.preview[index] = newRow;
});

export const wingsuit = {
  patternDefinition,
};