Exporting defined groups

[acrossell-hedgehog]

Forgive me if this is currently possible and I've missed something but...

I'd love to be able to export predefined groups of components. For example;

Export all and only form components or header bars. Currently, it seems I would have to amend my config each time I want to target specific component groups?

[hipstersmoothie]

Yeah this is something I want too. Right now we have 44 stories and growing. This makes a huge file export. It would be cool if we could have story2sketch make a file for each top level story (kind).

For a grouping api it could look something like this

Generate a separate asketch file for each kind:

{
  "byKind": true
}

Define the groups, unmatched kinds maybe go to default.akstech.json:

{
  "byKind": {
    "button": [/regex/, 'string'],
    "styles": "styles"
  }
}

[chrisvxd]

It sounds like you're talking about two different things:

1. @acrossell-hedgehog you seem to be looking for a way to export an entire "kind" (i.e. "form") without needing to specify each story every time you add a story to that kind in storybook. You don't seem concerned about the file output size.
2. @hipstersmoothie you're looking for a way to split the output file into multiple smaller files.

There's some overlap, but I think you're both looking for different things.

Please 👍 if I'm correct, and I'll split this into two relevant tickets.

[acrossell-hedgehog]

Hi Chris,

@hipstersmoothie 's solution is exactly what I'm looking for. The main reason being that every import into Sketch overwrites all of the preexisting components, meaning they all have to repinned for scaling/resizing in Sketch. If they were split into files then this task's required effort would be significantly reduced. Being able to group and export stories based on that group.

stories: [
    group: 'Buttons'
    {
      kind: 'components/buttons/ButtonPrimary',
      stories: [
        {
          name: 'without props',
        },
      ],
    },
    {
      kind: 'components/buttons/ButtonSecondary',
      stories: [
        {
          name: 'without props',
        },
      ],
    },
    {
      kind: 'components/buttons/ButtonText',
      stories: [
        {
          name: 'without props',
        },
      ],
    },

group: 'Fields'
    {
      kind: 'components/fields/text',
      stories: [
        {
          name: 'without props',
        },
      ],
    },
    {
      kind: 'components/fields/number',
      stories: [
        {
          name: 'without props',
        },
      ],
    },
    {
      kind: 'components/fields/email',
      stories: [
        {
          name: 'without props',
        },
      ],
    },

[chrisvxd]

I see! I'm not sure @hipstersmoothie's solution is going to work for above use case since it's focussed on a zero-config approach, grouping by kind. Above, you're grouping different kinds.

@hipstersmoothie thoughts?

[acrossell-hedgehog]

Apologies for any lack of congruence... I'm a designer so this is all slightly alien to me.

I believe I saw on the HTML to Sketch repo that someone has implemented resizing which would mitigate this issue. But I still don't see it on the official feature list so I may have misunderstood. Either way, it would still be great to export to separate files as we tend to use separate files for our Sketch libraries.

[hipstersmoothie]

Something like that shouldn't be too big of a lift. I could probably use this feature as well. My current implementation breaks up the files a bit and the above API would help.

[chrisvxd]

What are you thinking? Would be keen to discuss the API before you put too much time into it. On 5 Apr 2019, 08:17 +0100, Andrew Lisowski notifications@github.com, wrote:

Something like that shouldn't be too big of a lift. I could probably use this feature as well. My current implementation breaks up the files a bit and the above API would help. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[hipstersmoothie]

you could do it by add a group to the stories section

{
      kind: 'components/buttons/ButtonPrimary',
      group: 'form-elements',
      stories: [
        {
          name: 'without props',
        },
      ],
    }

this doesn't account for people not using the stories section though. I would need to think more to find something more generic. I could be another config option like I talk about above in my first comment

[chrisvxd]

@hipstersmoothie I like the kind functionality you've added. I'm not totally sold on using a regex.

What about the following API:

• outputBy (kind | group): output file based on kind or group
• layoutBy (kind | group): layout file based on kind or group

And adding an optional group key to the stories API as above?

[hipstersmoothie]

yeah that seems like a doable API. does storybook define the groups or it that on the story2sketch user?

I can implement this in my current PR but it seems like it is getting a little big at that point. Maybe I could just change my current code to fit your above API and implement group sorting in a follow up PR

[chrisvxd]

@hipstersmoothie My thinking is if using group, the user defines the group as you / @acrossell-hedgehog described:

    {
      kind: 'components/buttons/ButtonPrimary',
      group: 'form-elements',
      stories: [
        {
          name: 'without props',
        },
      ],
    }

Re your PR, if you update it to match above then I'll proceed with review :)

[chrisvxd]

@acrossell-hedgehog I've merged some new changes to master, thanks to @hipstersmoothie and some additional changes to support exactly what you're talking about.

I've added it to the docs, see this section: https://github.com/chrisvxd/story2sketch#split-output-into-multiple-files-based-on-custom-group

Released in v1.5.0.

Let me know if that looks good to you.

[acrossell-hedgehog]

Hi Chris,

I've just gotten around to trying this and I'm still getting output to a single file. Is my config correct?

module.exports = {
  // output: "design",
  outputBy: "group",
  url: 'http://localhost:9009/iframe.html',
  concurrency: 2,
  symbolGutter: 200,
  fixPseudo: true,
  pageTitle: 'Story2Sketch',
  viewports: {
    standard: {
      width: 320,
      height: 1136,
      symbolPrefix: 'Desktop/',
    },
  },
  stories: [
    //Buttons
    //----------//
    {
      group: "buttons", // This is the elements group
      kind: 'Elements/Buttons/ButtonPrimary', //This is the path defined in the story.js
      stories: [
        {
          name: 'without props',
        },
      ],
    },
    {
      group: "buttons",
      kind: 'Elements/Buttons/ButtonSecondary',
      stories: [
        {
          name: 'without props',
        },
      ],
    },
    {
      group: "buttons",
      kind: 'Elements/Buttons/ButtonTertiary',
      stories: [
        {
          name: 'without props',
        },
      ],
    },

    //Typography
    //----------//
    {
      group: "typography", // This is the elements group
      kind: 'Elements/Text/H1', //This is the path defined in the story.js
      stories: [
        {
          name: 'without props',
        },
      ],
    },
    {
      group: "typography", // This is the elements group
      kind: 'Elements/Text/H4', //This is the path defined in the story.js
      stories: [
        {
          name: 'without props',
        },
      ],
    },
    {
      group: "typography", // This is the elements group
      kind: 'Elements/Text/H4', //This is the path defined in the story.js
      stories: [
        {
          name: 'without props',
        },
      ],
    },
    {
      group: "typography", // This is the elements group
      kind: 'Elements/Text/H4', //This is the path defined in the story.js
      stories: [
        {
          name: 'without props',
        },
      ],
    },
  ],
}

[chrisvxd]

@acrossell-hedgehog You need to specify an output directory via the output parameter. If you uncomment that line, and ensure the design directory exists, it should work.

[acrossell-hedgehog]

Thanks for the quick response @chrisvxd

I tried that but no luck. I'm getting this error.

Processing 7 stories... [#######] 100% (7/7) 0.0s remaining (node:2617) UnhandledPromiseRejectionWarning: Error: EISDIR: illegal operation on a directory, open '/Users/alexrossell/Desktop/Repos/react-base/design'

output: "design",
  outputBy: "group",
  layoutBy: "group",
  url: 'http://localhost:9009/iframe.html',
  concurrency: 2,
  symbolGutter: 200,
  fixPseudo: true,
  pageTitle: 'Story2Sketch',
  viewports: {
    standard: {
      width: 320,
      height: 1136,
      symbolPrefix: 'Desktop/',
    },
  },

[chrisvxd]

@acrossell-hedgehog sorry for slow response. Two things:

1. That error is from node, and it looks like it can't find the path. Are you executing story2sketch from the same directory?
2. Remove layoutBy as it's incompatible with outputBy, but this shouldn't be causing the above error.

[acrossell-hedgehog]

No problem @chrisvxd, really appreciate your efforts here.

No, I was running from the root of the project. Running from the design dir processes the stories but is outputting a single file titled "design", it has no extension.

[chrisvxd]

Right, try using the relative path to the file from where you're running story2sketch. Here's a trick:

    output: `${process.cwd()}/design`,

Note those are backticks, not single quotes.

---

Edit, scrap that. Misread your comment. Root of project is correct 👍 so not sure why it's not working.

[acrossell-hedgehog]

"story2sketch": "^1.5.0"

^^ Correct version yeah?

[chrisvxd]

@acrossell-hedgehog yup. Can you try with an absolute path to the dir?

I suppose it could also be a permission problem.

[acrossell-hedgehog]

Sorted @chrisvxd, thanks for all your help!

[chrisvxd]

@acrossell-hedgehog excellent! What was the problem in the end?

[acrossell-hedgehog]

I updated node and removed and reinstalled story2sketch.

The sketch files it's generating are spot on Chris. Many many thanks :)

[chrisvxd]

Awesome! Really glad it's working 😁