Skip to content

Commit fef898f

Browse files
AllanMichayAllanMichay
committed
feat(*): automate parser listing
1 parent e7b91ae commit fef898f

File tree

9 files changed

+116
-12
lines changed

9 files changed

+116
-12
lines changed

‎.github/workflows/parser-listing.yml

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
name: 'Parser Listing'
2+
on:
3+
push:
4+
branches:
5+
- master
6+
pull_request:
7+
types: ['ready_for_review', 'opened', 'synchronize', 'reopened']
8+
env:
9+
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
10+
jobs:
11+
list:
12+
runs-on: ubuntu-latest
13+
if: github.event.pull_request.draft == false
14+
steps:
15+
- uses: actions/checkout@main
16+
- name: Extract branch name
17+
shell: bash
18+
run: echo "branch=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}" >> $GITHUB_OUTPUT
19+
id: extract_branch
20+
- name: Install
21+
run: yarn install --frozen-lockfile
22+
- name: Create Listing
23+
run: yarn list-parsers
24+
- uses: technote-space/get-diff-action@v6
25+
with:
26+
FILES: |
27+
SUMMARY.md

‎SUMMARY.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
| Parser | Description | Usage Example |
2+
| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
3+
| camelcasify | Apply camelcase function on specific keys from a design token. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/camelcasify/README.md#usage) |
4+
| convert-font | Convert font in several formats. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/convert-font/README.md#usage) |
5+
| filter | Filter tokens and assets by their name using a regular expression. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/filter/README.md#usage) |
6+
| inline-css-variables-in-svg | Replace all the `stroke` and `fill` attribute raw color value by its corresponding design token as a CSS variable. If no design token match, the raw value will be left as is. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/inline-css-variables-in-svg/README.md#usage) |
7+
| kebabcasify | Apply kebabcase function on specific keys from a design token. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/kebabcasify/README.md#usage) |
8+
| link-design-tokens | Have design tokens referencing other ones. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/link-design-tokens/README.md#usage) |
9+
| name-assets-files-by-pattern | Set a structured filename on your assets. It won't rename your asset but only add a new `filename` property on the asset object. The filename structure uses [mustache](https://github.com/janl/mustache.js#templates) as a template engine. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/name-assets-files-by-pattern/README.md#usage) |
10+
| omit | Omit keys from a design token not given in parameters. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/omit/README.md#usage) |
11+
| pascalcasify | Apply pascalcase function on specific keys from a design token. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/pascalcasify/README.md#usage) |
12+
| pick | Get only specific keys from a design token given in params. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/pick/README.md#usage) |
13+
| prefix-by | Concatenate two strings. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/prefix-by/README.md#usage) |
14+
| px-to-rem | Convert the value of a measurement design token from pixel to rem. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/px-to-rem/README.md#usage) |
15+
| replace-string | Replace any string matched by a regex by a new string. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/replace-string/README.md#usage) |
16+
| round-number | Round any measurement design token with specific precision. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/round-number/README.md#usage) |
17+
| snakecasify | Apply snakecase function on specific keys from a design token. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/snakecasify/README.md#usage) |
18+
| sort-by | Loop on several design tokens and sort them according to their respective key values. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/sort-by/README.md#usage) |
19+
| suffix-by | Concatenate two strings. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/suffix-by/README.md#usage) |
20+
| svg-to-jsx | Wrap SVG files within a JSX component. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/svg-to-jsx/README.md#usage) |
21+
| svgo | Optimize vectors using [svgo](https://github.com/svg/svgo). | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/svgo/README.md#usage) |
22+
| to-css-custom-properties | Transform design tokens in CSS Custom Properties. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/to-css-custom-properties/README.md#usage) |
23+
| to-css-font-import | Create CSS `@font-face` rules to import your font files. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/to-css-font-import/README.md#usage) |
24+
| to-css-text-style | Create text styles as CSS classes. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/to-css-text-style/README.md#usage) |
25+
| to-dsp | Create a [Design System Package (DSP)](https://github.com/AdobeXD/design-system-package-dsp). | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/to-dsp/README.md#usage) |
26+
| to-flutter | Format design tokens to create a theme compatible with the [Flutter specification](https://docs.flutter.dev/cookbook/design/themes). | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/to-flutter/README.md#usage) |
27+
| to-jss | Transform design tokens in JSS. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/to-jss/README.md#usage) |
28+
| to-react-native | Transform design tokens to a JavaScript `theme` object compatible with [React Native](https://reactnative.dev/). | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/to-react-native/README.md#usage) |
29+
| to-scss-map | Generate `.scss` files containing Scss map and function / mixin to access the values of the tokens. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/to-scss-map/README.md#usage) |
30+
| to-scss-mixin-text-style | Create text styles formatted as [SCSS mixins](https://sass-lang.com/documentation/at-rules/mixin). | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/to-scss-mixin-text-style/README.md#usage) |
31+
| to-scss-variables | Transform design tokens in SCSS variables. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/to-scss-variables/README.md#usage) |
32+
| to-style-dictionary | Generate [Style Dictionary](https://amzn.github.io/style-dictionary/#/) configuration files for all your design tokens coming from Specify. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/to-style-dictionary/README.md#usage) |
33+
| to-tailwind | Format design tokens to create a theme compatible with the [TailwindCSS specification](https://tailwindcss.com/docs/theme). | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/to-tailwind/README.md#usage) |
34+
| to-theme-ui | Format design tokens to create a theme compatible with the [theme-ui specification](https://theme-ui.com/theme-spec). | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/to-theme-ui/README.md#usage) |
35+
| to-typescript-definition | Format design tokens to create their corresponding TypeScript types. | [Example](https://github.com/Specifyapp/parsers/blob/master/parsers/to-typescript-definition/README.md#usage) |

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"test": "jest --coverage --runInBand",
4444
"generate:seeds": "ts-node ./tests/helper/generate.seed.ts",
4545
"format": "prettier '**/*' -u -w",
46-
"prepare": "git config --local core.hooksPath .hooks"
46+
"prepare": "git config --local core.hooksPath .hooks",
47+
"list-parsers": "node ./scripts/list-parsers.js"
4748
}
4849
}

‎parsers/sort-by/README.md

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
# Sort By
22

33
## Description
4-
This parser helps loop on several design tokens and sort them according to their respective key values.
4+
5+
This parser helps you loop on several design tokens and sort them according to their respective key values.
56

67
Learn more about how to configure Specify in the API documentation: [https://specifyapp.com/developers](https://specifyapp.com/developers).
78

@@ -160,16 +161,16 @@ type output = Array<{ [key: string]: any }>;
160161
"value": {
161162
"unit": "px",
162163
"measure": 8
163-
},
164+
}
164165
},
165166
{
166167
"name": "base-space-01",
167168
"type": "measurement",
168169
"value": {
169170
"unit": "px",
170171
"measure": 4
171-
},
172-
},
172+
}
173+
}
173174
]
174175
```
175176

@@ -183,15 +184,15 @@ type output = Array<{ [key: string]: any }>;
183184
"value": {
184185
"unit": "px",
185186
"measure": 4 // <---
186-
},
187+
}
187188
},
188189
{
189190
"name": "base-space-02",
190191
"type": "measurement",
191192
"value": {
192193
"unit": "px",
193194
"measure": 8 // <---
194-
},
195-
},
195+
}
196+
}
196197
]
197198
```

‎parsers/to-flutter/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## Description
44

5-
Format design tokens to create a theme compatible with the [Flutter specification](https://docs.flutter.dev/cookbook/design/themes).
5+
This parser helps you format design tokens to create a theme compatible with the [Flutter specification](https://docs.flutter.dev/cookbook/design/themes).
66

77
Learn more about how to configure Specify in the API documentation: [https://specifyapp.com/developers](https://specifyapp.com/developers).
88

‎parsers/to-tailwind/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## Description
44

5-
Format design tokens to create a theme compatible with the [TailwindCSS specification](https://tailwindcss.com/docs/theme).
5+
This parser helps you format design tokens to create a theme compatible with the [TailwindCSS specification](https://tailwindcss.com/docs/theme).
66
The theme is also compatible with [WindiCSS](https://windicss.org/).
77

88
This parser creates a file containing the whole theme. It can then be used in the `tailwind.config.js`.

‎parsers/to-theme-ui/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## Description
44

5-
Format design tokens to create a theme compatible with the [theme-ui specification](https://theme-ui.com/theme-spec).
5+
This parser helps you format design tokens to create a theme compatible with the [theme-ui specification](https://theme-ui.com/theme-spec).
66

77
Learn more about how to configure Specify in the API documentation: [https://specifyapp.com/developers](https://specifyapp.com/developers).
88

‎parsers/to-typescript-definition/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
## Description
44

5-
Format design tokens to create their corresponding TypeScript types.
5+
This parser helps you format design tokens to create their corresponding TypeScript types.
66

77
This parser generates TypeScript types corresponding to [Specify Token types](https://docs.specifyapp.com/concepts/token-types). All types respective values match the name of your design tokens returned by Specify.
88

‎scripts/list-parsers.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
const fs = require('fs');
2+
const path = require('path');
3+
4+
const directoryPath = path.join(__dirname, '../', 'parsers');
5+
let parsers = [];
6+
const fileNames = fs.readdirSync(directoryPath);
7+
8+
const directories = fileNames.filter(fileName => !fileName.includes('.ts'));
9+
10+
parsers = directories.map(directory => {
11+
const readmeParserPath = path.join(__dirname, '../', 'parsers', directory, 'README.md');
12+
const parserContent = fs.readFileSync(readmeParserPath, { encoding: 'utf8', flag: 'r' });
13+
14+
const parserDescription = parserContent.match(/This parser helps you (.*)/)[1];
15+
const capitalizedParserDescription =
16+
parserDescription.charAt(0).toUpperCase() + parserDescription.slice(1);
17+
const exampleLink = `https://github.com/Specifyapp/parsers/blob/master/parsers/${directory}/README.md#usage`;
18+
19+
return {
20+
title: directory,
21+
description: capitalizedParserDescription,
22+
exampleLink,
23+
};
24+
});
25+
26+
const markdownHeader = `| Parser | Description | Usage Example |
27+
|---|---|---|`;
28+
29+
const parsersMarkdown = parsers.reduce((acc, currentParser) => {
30+
const { title, description, exampleLink } = currentParser;
31+
if (!acc) {
32+
return `${markdownHeader}
33+
| ${title} | ${description} | [Example](${exampleLink}) |`;
34+
}
35+
return `${acc}
36+
| ${title} | ${description} | [Example](${exampleLink}) |`;
37+
}, '');
38+
39+
const summaryFilePath = path.join(__dirname, '../', 'SUMMARY.md');
40+
fs.writeFileSync(summaryFilePath, parsersMarkdown, { encoding: 'utf8', flag: 'w' });

0 commit comments

Comments
 (0)