feat: Add node example #228
Conversation
examples/advanced/node/README.md
Outdated
| * components/index.js Uses node module export/require to merge the property files together without Style Dictionary | ||
| * components/button/primary.js Extends a default set of properties | ||
| * properties/color/core.js Creates a color ramp programmatically based on base colors | ||
| * properties/color/background.js Shows different ways to reference other style dictionary values |
There was a problem hiding this comment.
| * properties/color/background.js Shows different ways to reference other style dictionary values | |
| * `properties/color/background.js` Shows different ways to reference other style dictionary values |
examples/advanced/node/config.js
Outdated
| }); | ||
|
|
||
| StyleDictionary.registerFormat({ | ||
| name: "testing", |
There was a problem hiding this comment.
generally, in the examples, I tend to use more meaningful names (eg. custom/android or custom/template/scss), so the code is easier to read and follow. Here for example you could use myRegisteredFormat
examples/advanced/node/config.js
Outdated
| // You can still add custom transforms and formats like you | ||
| // normally would and reference them in the config below. | ||
| StyleDictionary.registerTransform({ | ||
| name: 'test', |
There was a problem hiding this comment.
generally, in the examples, I prefer to use more meaningful names (eg. custom/android or custom/template/scss), so the code is easier to read and follow. Here for example you could use myRegisteredTransform
examples/advanced/node/config.js
Outdated
| // Same with formats, you can now just write them directly to this config | ||
| // object. The name of the format is the key. | ||
| format: { | ||
| myFormat: (dictionary, platform) => { |
There was a problem hiding this comment.
myFormat vs customTransform => myFormat / myTransform or customFormat / customTransform
|
|
||
| // Use a reduce function to take the array of keys in baseColor | ||
| // and map them to an object with the same keys. | ||
| module.exports = Object.keys(baseColors).reduce((ret, color) => { |
There was a problem hiding this comment.
@dbanksdesign I have added a few (minor) comments in the PR. I think is an amazing example of how powerful SD can be. 🙌 for your work. This leads me to a couple of observations:
- as you said, the name of the folder in the examples is not clear and meaningful enough :) maybe something like "javascript-modules" (but it may be misleading) or "config-properties-extensions-as-javascript-modules".
- I saw this in the code: and I was amazed and scared at the same time. scared because I don't have even idea that SD can do stuff like this, and what it means, so I imagine me making some small changes in the code and breaking behaviors like these without even knowing. the question I have is: is this kind of functionalities covered by tests? both functional and snapshots? can it be covered? I would try to do it but I don't think I can, I don't have such deep knowledge :(
Overall, I think this PR is fantastic.
|
Thanks for your comments! I spoke on the phone with @chazzmoney and he had similar concerns as you. We talked about simplifying those crazier there examples like in the property files. So rather than show a lot of different crazy ways, showing less and telling a more concise story. I'll clean it up and send a revision later this week. |
Co-Authored-By: dbanksdesign <dbanks.design@gmail.com>
Co-Authored-By: dbanksdesign <dbanks.design@gmail.com>
Co-Authored-By: dbanksdesign <dbanks.design@gmail.com>
|
Made some updates, @didoo @chazzmoney thoughts? |
| // | ||
| // properties: properties, | ||
| platforms: { | ||
| custom: { | ||
| // Using the custom transforms we defined above | ||
| transforms: ['customTransform', 'test'], | ||
| transforms: ['attribute/cti', 'myTransform', 'myRegisteredTransform', 'color/hex'], |
| buildPath: buildPath, | ||
| files: [{ | ||
| destination: 'variables.txt', | ||
| destination: 'variables.yml', |
|
@dbanksdesign I've left a couple of (positive) comments. For me is a GO, now. 👍 |
|
LGTM, hopefully people will look at this and start asking questions. |
* feat: add registerFilter method (#233) * doc: remove registerTemplate from examples (#232) * feat: add node example (#228) * feat: making include accept an array of globs, like source does (#227) * fix: the naming for Sass/Scss in documentation, tests, formats, fixes #213 (#222) * fix: handle showFileHeader option in androids formats templates, fixes #237 (#243)
Issue #, if available:
Description of changes: Adding a new example to show the power of using node modules as configuration and property files!
Need help on a more descriptive example name though...
By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.