From bd1b9e533d36216ca5c428cc9f41cec3f18a04e5 Mon Sep 17 00:00:00 2001 From: literat Date: Mon, 9 Dec 2024 18:45:43 +0100 Subject: [PATCH 1/3] Style(common, codemods, analytics, design-tokens): Fix docs by markdown linter --- .remarkignore | 5 ----- .remarkrc.mjs | 13 ++++++++++++- configs/jest-config-spirit/README.md | 11 ++++++++++- configs/prettier-config-spirit/README.md | 5 ++++- configs/stylelint-config-spirit/README.md | 5 ++++- packages/analytics/README.md | 2 +- packages/codemods/CONTRIBUTING.md | 6 +++--- packages/demo/README.md | 3 +++ packages/design-tokens/README.md | 12 ++++++++++-- packages/web/DEPRECATIONS.md | 3 +++ packages/web/README.md | 7 ++----- 11 files changed, 52 insertions(+), 20 deletions(-) diff --git a/.remarkignore b/.remarkignore index 1dee1c84dd..a5104f5e7a 100644 --- a/.remarkignore +++ b/.remarkignore @@ -8,11 +8,6 @@ build # Temporary disabled packages # we will fix them incrementally -analytics -codemods -common -configs -design-tokens demo docs examples diff --git a/.remarkrc.mjs b/.remarkrc.mjs index afcca290e0..75c1aff7fc 100644 --- a/.remarkrc.mjs +++ b/.remarkrc.mjs @@ -35,7 +35,18 @@ export default { [ 'remark-lint-heading-capitalization', { - lowerCaseWords: ['eu/spirit', '@lmc', 'spirit/node', 'spirit/jsdom', 'v1', 'v2', 'v3'], + lowerCaseWords: [ + 'eu/spirit', + '@lmc', + 'spirit/node', + 'spirit/jsdom', + 'analytics', + 'codemods', + 'common', + 'v1', + 'v2', + 'v3', + ], }, ], ], diff --git a/configs/jest-config-spirit/README.md b/configs/jest-config-spirit/README.md index e9f8281970..3ca4a20490 100644 --- a/configs/jest-config-spirit/README.md +++ b/configs/jest-config-spirit/README.md @@ -1,8 +1,11 @@ + + + # jest-config-spirit > Jest configuration and preset for Spirit Design System -## Getting started +## Getting Started This preset is part of this monorepo only and thus it is accessible for every package. @@ -14,10 +17,16 @@ yarn add jest-config-spirit ## ⚙️ Configurations + + + ### `jest-preset-spirit/node` The default Jest configuration for Node.js projects. + + + ### `jest-preset-spirit/jsdom` The extension of the default preset for projects that require a browser-like (DOM) environment. diff --git a/configs/prettier-config-spirit/README.md b/configs/prettier-config-spirit/README.md index 2866daac57..f59707097d 100644 --- a/configs/prettier-config-spirit/README.md +++ b/configs/prettier-config-spirit/README.md @@ -1,8 +1,11 @@ + + + # prettier-config-spirit > Prettier configuration and preset for Spirit Design System -## Getting started +## Getting Started This preset is part of this monorepo only and thus it is accessible for every package. diff --git a/configs/stylelint-config-spirit/README.md b/configs/stylelint-config-spirit/README.md index e43207c14c..57bed994d9 100644 --- a/configs/stylelint-config-spirit/README.md +++ b/configs/stylelint-config-spirit/README.md @@ -1,8 +1,11 @@ + + + # stylelint-config-spirit > Stylelint configuration and preset for Spirit Design System -## Getting started +## Getting Started This preset is part of this monorepo only and thus it is accessible for every package. diff --git a/packages/analytics/README.md b/packages/analytics/README.md index 25390ade40..5e92e374ab 100644 --- a/packages/analytics/README.md +++ b/packages/analytics/README.md @@ -35,7 +35,7 @@ By default, the output will be saved into the `.scanner` directory, but you can spirit-analytics --output path/to/folder ``` -The [react-scanner] requires a [config file][react-scanner-config] to make it work, `spirit-analytics` has a default config inside, but if you need to, you can use your own config: +The [react-scanner][react-scanner] requires a [config file][react-scanner-config] to make it work, `spirit-analytics` has a default config inside, but if you need to, you can use your own config: ```shell spirit-analytics --config path/to/config diff --git a/packages/codemods/CONTRIBUTING.md b/packages/codemods/CONTRIBUTING.md index e26e7b897b..12b3b287a4 100644 --- a/packages/codemods/CONTRIBUTING.md +++ b/packages/codemods/CONTRIBUTING.md @@ -15,9 +15,9 @@ Codemods adhere to a clear and organized naming convention, following the kebab This naming convention ensures consistency and ease of understanding, facilitating seamless integration and maintenance of codemods within the project. -### Example naming +### Example Naming -``` +```text -.ts | | | └─⫸ Codemod purpose @@ -29,7 +29,7 @@ This naming convention ensures consistency and ease of understanding, facilitati The file structure below outlines a standard organization for codemods within the project: -``` +```text ─── src └── transforms └── v2 diff --git a/packages/demo/README.md b/packages/demo/README.md index 5091cabe06..a7974e9581 100644 --- a/packages/demo/README.md +++ b/packages/demo/README.md @@ -1,3 +1,6 @@ + + + # @lmc-eu/spirit-demo > Scripts, Styles and Partials for showcase apps of Spirit Design System. diff --git a/packages/design-tokens/README.md b/packages/design-tokens/README.md index 9c63d2f51e..ff315a839f 100644 --- a/packages/design-tokens/README.md +++ b/packages/design-tokens/README.md @@ -1,3 +1,6 @@ + + + # @lmc-eu/spirit-design-tokens > Design tokens for Spirit Design System. @@ -154,9 +157,12 @@ module: { -##### Using the sass-embedded Library + + + +#### Using the `sass-embedded` Library -If you're using `sass-embedded`, you can specify the API as `legacy`, `modern`, or `modern-compiler`. More information can be found in [sass documentation](sass-embedded). +If you're using `sass-embedded`, you can specify the API as `legacy`, `modern`, or `modern-compiler`. More information can be found in [sass documentation][sass-embedded]. We recommend using the `modern-compiler` option. Please note that this change also requires updating `includePaths` to `loadPaths`. @@ -300,6 +306,8 @@ With `@` prefix:
How do I derive design tokens for my own design system? + + **Creating a custom design system derived from Spirit? Great to hear that! 🎉** While it's perfectly OK to develop custom components that may not find their way diff --git a/packages/web/DEPRECATIONS.md b/packages/web/DEPRECATIONS.md index 4296d6a90b..4824922c7f 100644 --- a/packages/web/DEPRECATIONS.md +++ b/packages/web/DEPRECATIONS.md @@ -6,6 +6,9 @@ This document lists all deprecations that will be removed in the next major vers ## Deprecations + + + ### Collapse `data-spirit-is-disposable` The `data-spirit-more` attribute was removed, please use `data-spirit-is-disposable` instead. diff --git a/packages/web/README.md b/packages/web/README.md index 529ca13de6..478a558524 100644 --- a/packages/web/README.md +++ b/packages/web/README.md @@ -1,10 +1,8 @@ - - + + # @lmc-eu/spirit-web - - > CSS implementation of Spirit Design System. ## Install @@ -260,7 +258,6 @@ Check your browser console to see if you are using any of the deprecated functio See the [LICENSE][license] file for information. [all-deprecations]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/DEPRECATIONS.md -[configuring-load-path]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens#configuring-load-path [deprecations]: https://github.com/lmc-eu/spirit-design-system/blob/main/static/deprecations-browser-console.png?raw=true [design-tokens-usage]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens#basic-usage [design-tokens-load-path]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/design-tokens#in-sass From d99c1710622c55ae14a6e98b5c6bbdf7e2aa9409 Mon Sep 17 00:00:00 2001 From: literat Date: Mon, 9 Dec 2024 21:06:48 +0100 Subject: [PATCH 2/3] Style(exporters, docs, examples): Fix docs by markdown linter refs #DS-1100 --- .remarkignore | 3 - .remarkrc.mjs | 2 + docs/postmortems/0000-00-00-template.md | 2 +- .../2024-02-05-deprecated-icon-rendering.md | 4 +- examples/next-with-app-router/README.md | 2 +- examples/next-with-pages-router/README.md | 2 +- exporters/assets/README.md | 4 +- exporters/js/README.md | 4 +- exporters/scss/README.md | 4 +- exporters/tokens/README.md | 4 +- package.json | 1 + yarn.lock | 55 +++++++++++++++++++ 12 files changed, 71 insertions(+), 16 deletions(-) diff --git a/.remarkignore b/.remarkignore index a5104f5e7a..698429b158 100644 --- a/.remarkignore +++ b/.remarkignore @@ -8,10 +8,7 @@ build # Temporary disabled packages # we will fix them incrementally -demo docs -examples -exporters form-validations icons web-twig diff --git a/.remarkrc.mjs b/.remarkrc.mjs index 75c1aff7fc..826b826a8d 100644 --- a/.remarkrc.mjs +++ b/.remarkrc.mjs @@ -4,6 +4,8 @@ export default { ...config, plugins: [ ...config.plugins, + 'remark-frontmatter', + // Values should increment by one from the first item // @see: https://github.com/remarkjs/remark-lint/tree/main/packages/remark-lint-ordered-list-marker-value ['remark-lint-ordered-list-marker-value', 'ordered'], diff --git a/docs/postmortems/0000-00-00-template.md b/docs/postmortems/0000-00-00-template.md index e9862c31c5..9dac8aa0c8 100644 --- a/docs/postmortems/0000-00-00-template.md +++ b/docs/postmortems/0000-00-00-template.md @@ -55,7 +55,7 @@ issues and Pull Requests in the "Bug" column with the appropriate owners --> - Item B - Item C -## Timeline (all times in CET/CEST) +## Timeline (all Times in CET/CEST) 2024-01-01 diff --git a/docs/postmortems/2024-02-05-deprecated-icon-rendering.md b/docs/postmortems/2024-02-05-deprecated-icon-rendering.md index 83ee0ef968..8d91f24bad 100644 --- a/docs/postmortems/2024-02-05-deprecated-icon-rendering.md +++ b/docs/postmortems/2024-02-05-deprecated-icon-rendering.md @@ -46,7 +46,7 @@ This problem was detected multiple times by the developers and the support quest Also, the message appeared in the browser console and the server logs: -``` +```bash Warning: Icon component is not supported in SSR without use of `html-react-parser`. Please install missing peer dependency. ``` @@ -88,7 +88,7 @@ issues and Pull Requests in the "Bug" column with the appropriate owners --> - Usage of the `warning` utility everywhere the deprecation is raised and the condition about the `production` environment ensures that the deprecation messages are raised only in the development environment. -## Timeline (all times in CET/CEST) +## Timeline (all Times in CET/CEST) 2023-12-27 diff --git a/examples/next-with-app-router/README.md b/examples/next-with-app-router/README.md index e9039dd1e3..0069ade1f9 100644 --- a/examples/next-with-app-router/README.md +++ b/examples/next-with-app-router/README.md @@ -1,4 +1,4 @@ -# Example Next.js application with app router +# Example Next.js Application with App Router This application is used to demonstrate the configuration of a Next.js application with an App router for use with the Spirit Design System. diff --git a/examples/next-with-pages-router/README.md b/examples/next-with-pages-router/README.md index 50111fda49..beddbd8427 100644 --- a/examples/next-with-pages-router/README.md +++ b/examples/next-with-pages-router/README.md @@ -1,4 +1,4 @@ -# Example Next.js application with pages router +# Example Next.js Application with Pages Router This application is used to demonstrate the configuration of a Next.js application with an App router for use with the Spirit Design System. diff --git a/exporters/assets/README.md b/exporters/assets/README.md index 52ec98fc0b..7a810e2ef7 100644 --- a/exporters/assets/README.md +++ b/exporters/assets/README.md @@ -2,13 +2,13 @@ The Spirit Assets Exporter allows you to **export a list of images** in such a way that it can be immediately used in your production codebase. This specific exporter exports assets in generic fashion, as SVG format, without any additional formatting or generated support files. -### Exporter Output +## Exporter Output This exporter will render image assets defined inside one specific brand and will produce flat structure: ⚠️ We only output assets from `icons` directory. -### Naming +## Naming The names of icons will be constructed from the original name. diff --git a/exporters/js/README.md b/exporters/js/README.md index 8ba1ed1546..4008665222 100644 --- a/exporters/js/README.md +++ b/exporters/js/README.md @@ -2,7 +2,7 @@ [Supernova][supernova-studio] JS exporter made for Spirit Design System developed by [Alma Career (formerly LMC)][alma-career]. -## Token operations +## Token Operations This exported does several operations with tokens: @@ -26,7 +26,7 @@ Font Family Ebony has a different font weight mapping in Figma and in Adobe Font Tokens are sorted alphabetically by origin (Figma) name or by name (Supernova). Except Measures - sorted by name number and Other - sorted by value. -## Outputs: +## Outputs - borders.ts - colors.ts diff --git a/exporters/scss/README.md b/exporters/scss/README.md index 448fe23f4d..2d1d62d3e3 100644 --- a/exporters/scss/README.md +++ b/exporters/scss/README.md @@ -2,7 +2,7 @@ [Supernova][supernova-studio] SCSS exporter made for Spirit Design System developed by [Alma Career (formerly LMC)][alma-career]. -## Token operations +## Token Operations This exported does several operations with tokens: @@ -26,7 +26,7 @@ Font Family Ebony has a different font weight mapping in Figma and in Adobe Font Tokens are sorted alphabetically by origin (Figma) name or by name (Supernova). Except Measures - sorted by name number and Other - sorted by value. -## Outputs: +## Outputs - \_borders.scss - \_colors.scss diff --git a/exporters/tokens/README.md b/exporters/tokens/README.md index 55244b39cd..b10118934b 100644 --- a/exporters/tokens/README.md +++ b/exporters/tokens/README.md @@ -2,7 +2,7 @@ [Supernova][supernova-studio] tokens exporter made for Spirit Design System developed by [Alma Career (formerly LMC)][alma-career]. -## Token operations +## Token Operations This exported does several operations with tokens: @@ -26,7 +26,7 @@ Font Family Ebony has a different font weight mapping in Figma and in Adobe Font Tokens are sorted alphabetically by origin (Figma) name or by name (Supernova). Except Measures - sorted by name number and Other - sorted by value. -## Outputs: +## Outputs - \_borders.scss - \_colors.scss diff --git a/package.json b/package.json index e7d7cf1991..030c1f12df 100644 --- a/package.json +++ b/package.json @@ -93,6 +93,7 @@ "react": "18.3.1", "react-dom": "18.3.1", "remark-cli": "12.0.1", + "remark-frontmatter": "^5.0.0", "remark-lint-heading-capitalization": "1.2.0", "sass-loader": "14.2.1", "style-loader": "4.0.0", diff --git a/yarn.lock b/yarn.lock index 0b63cfa300..edd96de0d3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16382,6 +16382,15 @@ __metadata: languageName: node linkType: hard +"fault@npm:^2.0.0": + version: 2.0.1 + resolution: "fault@npm:2.0.1" + dependencies: + format: "npm:^0.2.0" + checksum: 10/c9b30f47d95769177130a9409976a899ed31eb598450fbad5b0d39f2f5f56d5f4a9ff9257e0bee8407cb0fc3ce37165657888c6aa6d78472e403893104329b72 + languageName: node + linkType: hard + "fb-watchman@npm:^2.0.0": version: 2.0.2 resolution: "fb-watchman@npm:2.0.2" @@ -16860,6 +16869,13 @@ __metadata: languageName: node linkType: hard +"format@npm:^0.2.0": + version: 0.2.2 + resolution: "format@npm:0.2.2" + checksum: 10/5f878b8fc1a672c8cbefa4f293bdd977c822862577d70d53456a48b4169ec9b51677c0c995bf62c633b4e5cd673624b7c273f57923b28735a6c0c0a72c382a4a + languageName: node + linkType: hard + "formdata-polyfill@npm:^4.0.10": version: 4.0.10 resolution: "formdata-polyfill@npm:4.0.10" @@ -21681,6 +21697,20 @@ __metadata: languageName: node linkType: hard +"mdast-util-frontmatter@npm:^2.0.0": + version: 2.0.1 + resolution: "mdast-util-frontmatter@npm:2.0.1" + dependencies: + "@types/mdast": "npm:^4.0.0" + devlop: "npm:^1.0.0" + escape-string-regexp: "npm:^5.0.0" + mdast-util-from-markdown: "npm:^2.0.0" + mdast-util-to-markdown: "npm:^2.0.0" + micromark-extension-frontmatter: "npm:^2.0.0" + checksum: 10/afd9486af6ea74a94d84a225c367ab810ad4439683ecafc1ce9fc7bb0ecacaafac82e0af529974489c145824b242509f9387f833fc01a14a83a978049772ef80 + languageName: node + linkType: hard + "mdast-util-heading-style@npm:^3.0.0": version: 3.0.0 resolution: "mdast-util-heading-style@npm:3.0.0" @@ -21971,6 +22001,18 @@ __metadata: languageName: node linkType: hard +"micromark-extension-frontmatter@npm:^2.0.0": + version: 2.0.0 + resolution: "micromark-extension-frontmatter@npm:2.0.0" + dependencies: + fault: "npm:^2.0.0" + micromark-util-character: "npm:^2.0.0" + micromark-util-symbol: "npm:^2.0.0" + micromark-util-types: "npm:^2.0.0" + checksum: 10/55873937494e9bfe1cc8cba3c8710e14e85ad0c9f3bb859d367268fc2204f3fe2eb70f9f83e496de0d3ea79c468fe6df879f9d475c716644c2daa90056cc8374 + languageName: node + linkType: hard + "micromark-factory-destination@npm:^2.0.0": version: 2.0.0 resolution: "micromark-factory-destination@npm:2.0.0" @@ -26128,6 +26170,18 @@ __metadata: languageName: node linkType: hard +"remark-frontmatter@npm:^5.0.0": + version: 5.0.0 + resolution: "remark-frontmatter@npm:5.0.0" + dependencies: + "@types/mdast": "npm:^4.0.0" + mdast-util-frontmatter: "npm:^2.0.0" + micromark-extension-frontmatter: "npm:^2.0.0" + unified: "npm:^11.0.0" + checksum: 10/5d859f336e9cd6f6ed02139a76781b35a8cabbbb240d30dd8048e1c74d7b8e8335b98f27290c9787baab3bc5eb935347a046fa85ad307cf0f7ea6c1ecfde8dc4 + languageName: node + linkType: hard + "remark-lint-blockquote-indentation@npm:^4.0.0": version: 4.0.0 resolution: "remark-lint-blockquote-indentation@npm:4.0.0" @@ -28481,6 +28535,7 @@ __metadata: react: "npm:18.3.1" react-dom: "npm:18.3.1" remark-cli: "npm:12.0.1" + remark-frontmatter: "npm:^5.0.0" remark-lint-heading-capitalization: "npm:1.2.0" sass-loader: "npm:14.2.1" style-loader: "npm:4.0.0" From c240e5a30fdf9df084e5f9b870f1415071aaf082 Mon Sep 17 00:00:00 2001 From: literat Date: Mon, 9 Dec 2024 21:18:57 +0100 Subject: [PATCH 3/3] Style(icons): Fix docs by markdown linter refs #DS-1100 --- .remarkignore | 1 - packages/icons/README.md | 20 ++++++++++++-------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/.remarkignore b/.remarkignore index 698429b158..4232226f56 100644 --- a/.remarkignore +++ b/.remarkignore @@ -10,6 +10,5 @@ build # we will fix them incrementally docs form-validations -icons web-twig web-react diff --git a/packages/icons/README.md b/packages/icons/README.md index ff93a99e8b..8de71ee073 100644 --- a/packages/icons/README.md +++ b/packages/icons/README.md @@ -1,12 +1,15 @@ + + + # @lmc-eu/spirit-icons > Icons of Spirit Design System. ## Install -🙋🏻‍♂️ **Hold on! Do you already use [`spirit-web`]?** Then you don't need to +🙋🏻‍♂️ **Hold on! Do you already use [`spirit-web`][spirit-web]?** Then you don't need to install this package because `spirit-icons` is installed automatically -as a dependency of [`spirit-web`]. +as a dependency of [`spirit-web`][spirit-web]. If you want to use just `spirit-icons` alone in your project, run: @@ -28,13 +31,13 @@ or themself. ## Usage -### SVG files +### SVG Files You can use SVG files directly from `@lmc-eu/spirit-icons/svg` directory by importing them or copying them to your app structure. ### React -You can import SVG files directly from `@lmc-eu/spirit-icons/svg` directory in React components using a library like [React SVGR](https://react-svgr.com/). +You can import SVG files directly from `@lmc-eu/spirit-icons/svg` directory in React components using a library like [React SVGR][react-svgr]. Example configuration for Webpack: @@ -64,7 +67,7 @@ import WarningIcon from '@lmc-eu/spirit-icons/react/WarningIcon'; ; ``` -### Icons paths +### Icons Paths Alternatively you can use an `icons` object which consists of an icon name and SVG content. Thus you can fabricate your icon yourself. @@ -99,7 +102,8 @@ export default nextConfig; This configuration is not required if you are using the Next.js App Router. -For more information, please see the [Next.js documentation][nextjs-transpilePackages]. +For more information, please see the [Next.js documentation][nextjs-transpile-packages]. -[`spirit-web`]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web -[nextjs-transpilePackages]: https://nextjs.org/docs/pages/api-reference/next-config-js/transpilePackages +[spirit-web]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web +[nextjs-transpile-packages]: https://nextjs.org/docs/pages/api-reference/next-config-js/transpilePackages +[react-svgr]: https://react-svgr.com/