feat: adding shared prettier config

.prettierrc.json

@@ -6,6 +6,15 @@
   "semi": true,
   "bracketSpacing": true,
   "arrowParens": "always",
-  "trailingComma": "none",
-  "bracketSameLine": true
+  "trailingComma": "es5",
+  "bracketSameLine": true,
+  "endOfLine": "lf",
+  "overrides": [
+    {
+      "files": "*.json",
+      "options": {
+        "trailingComma": "none"
+      }
+    }
+  ]
 }

.storybook/main.ts

@@ -8,11 +8,11 @@ const config: StorybookConfig = {
   addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/web-components-vite',
-    options: {}
+    options: {},
   },
   docs: {
-    autodocs: 'tag'
-  }
+    autodocs: 'tag',
+  },
 };
 
 export default config;

.storybook/preview.ts

@@ -9,10 +9,10 @@ const preview: Preview = {
     controls: {
       matchers: {
         color: /(background|color)$/i,
-        date: /Date$/
-      }
-    }
-  }
+        date: /Date$/,
+      },
+    },
+  },
 };
 
 export default preview;

README.md

@@ -22,8 +22,11 @@ npm install @linuxfoundation/lfx-ui-core
 
 ## Documentation
 
-- [Design Tokens](docs/design-tokens.md)
-- [Footer Component](docs/footer.md)
+- Configurations
+  - [Design Tokens](docs/design-tokens.md)
+  - [Prettier Configuration](docs/prettier-config.md)
+- Components
+  - [Footer Component](docs/footer.md)
 
 ## Contributing
 

docs/design-tokens.md

@@ -14,22 +14,22 @@ import { Aura } from 'primeng/themes/aura';
 import { lfxPreset } from '@linuxfoundation/lfx-ui-core';
 
 const customPreset = definePreset(Aura, {
-  primitive: lfxPreset.primitive
+  primitive: lfxPreset.primitive,
 });
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
   constructor(private config: PrimeNGConfig) {
     this.config.theme.set({
       preset: customPreset,
       options: {
         prefix: 'p',
-        darkModeSelector: '.dark-mode'
-      }
+        darkModeSelector: '.dark-mode',
+      },
     });
   }
 }
@@ -43,14 +43,14 @@ import { Aura } from 'primeng/themes/aura';
 import { lfxPreset } from '@linuxfoundation/lfx-ui-core';
 
 const MyPreset = definePreset(Aura, {
-  primitive: lfxPreset.primitive
+  primitive: lfxPreset.primitive,
 });
 
 const app = createApp(App);
 
 app.use(PrimeVue, {
   theme: {
-    preset: MyPreset
-  }
+    preset: MyPreset,
+  },
 });
 ```

docs/prettier-config.md

@@ -0,0 +1,37 @@
+# Prettier Configuration
+
+The Prettier configuration provides a consistent code style across the projects.
+
+## Configuration
+
+The configuration is defined in `src/core/prettier-config/index.ts`.
+
+## Usage
+
+To use the configuration, add it to your `.prettierrc.js` file in the root of your project:
+
+```javascript
+module.exports = require('@linuxfoundation/lfx-ui-core/prettier-config');
+```
+
+Add the `.prettierignore` file to the root of your project to ignore files from formatting.
+
+```bash
+**/*.*
+**/node_modules
+**/dist
+**/.angular/cache
+
+!src/**/*.html
+!src/**/*.ts
+!src/**/*.tsx
+!src/**/*.js
+!src/**/*.jsx
+!src/**/*.json
+!src/**/*.css
+!src/**/*.scss
+!src/**/*.md
+!src/**/*.mdx
+```
+
+> **Note:** The `.prettierignore` file must be present in the top-level directory of your workspace for these ignore patterns to take effect. If you open a workspace subfolder directly and it doesn't contain its own `.prettierignore` file, these ignore settings will not be applied.

package.json

@@ -48,5 +48,19 @@
     "dist",
     "dist/browser",
     "README.md"
-  ]
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./components": {
+      "import": "./dist/components/index.js",
+      "require": "./dist/components/index.js"
+    },
+    "./prettier-config": {
+      "import": "./dist/core/prettier-config/index.js",
+      "require": "./dist/core/prettier-config/index.js"
+    }
+  }
 }

src/components/footer/footer.stories.ts

@@ -9,9 +9,9 @@ const meta: Meta = {
   title: 'Components/Footer',
   component: 'lfx-footer',
   parameters: {
-    layout: 'fullscreen'
+    layout: 'fullscreen',
   },
-  render: () => html`<lfx-footer></lfx-footer>`
+  render: () => html`<lfx-footer></lfx-footer>`,
 };
 
 export default meta;

src/core/prettier-config/index.ts

@@ -1,18 +1,37 @@
 // Copyright The Linux Foundation and each contributor to LFX.
 // SPDX-License-Identifier: MIT
 
-import { Config } from 'prettier';
-
-const prettierConfig: Config = {
+const prettierConfig = {
+  // 160 is the default for the LF Design System
   printWidth: 160,
+  // Use single quotes for strings
   singleQuote: true,
+  // Use spaces instead of tabs
   useTabs: false,
+  // Set tab width to 2 spaces
   tabWidth: 2,
+  // Add semicolons at the end of statements
   semi: true,
+  // Add spaces inside brackets
   bracketSpacing: true,
+  // Add parentheses around arrow function parameters
   arrowParens: 'always',
-  trailingComma: 'none',
-  bracketSameLine: true
+  // Use ES5 trailing commas
+  trailingComma: 'es5',
+  // Put the closing bracket on the same line as the last element
+  bracketSameLine: true,
+  // Use LF line endings
+  endOfLine: 'lf',
+  // Override settings for specific file types
+  overrides: [
+    {
+      files: ['*.json'],
+      options: {
+        trailingComma: 'none',
+      },
+    },
+  ],
 };
 
 module.exports = prettierConfig;
+export type PrettierConfig = typeof prettierConfig;

src/scripts/build.ts

@@ -91,7 +91,6 @@ function generatePresetsIndex(): string {
 
 function generateIndex(): string {
   return `export * from './design/presets';
-export * from './core/prettier-config';
 export * from './components';`;
 }