feat: build system converted to esbuild (#109)

* feat: build system converted to esbuild

esbuild is way faster and give good options for publishing ES Modules.

This commit also includes changes for using CSS files for component styles and having Rubik fpnt
locally via fontsource library.

* ci: build project before storybook deployment

* ci: action worklows are unified

* ci: github actions workflow rearrenged

Co-authored-by: Murat Çorlu <murat.corlu@trendyol.com>

Fixes #65 , #104, #102

.github/workflows/verify-and-preview.yml

@@ -0,0 +1,46 @@
+name: 'Verify and Preview'
+
+on:
+ pull_request:
+ branches: [ next ]
+ push:
+ branches: [ next ]
+
+jobs:
+ verify:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Check out code
+ uses: actions/checkout@v3
+ - name: Set Node env
+ uses: actions/setup-node@v3
+ with:
+ node-version: 16
+ - name: Install dependencies
+ run: npm ci
+ - name: Run linter check 
+ run: npm run lint
+ - name: Set testing environment
+ uses: microsoft/playwright-github-action@v1
+ - name: Run tests
+ run: npm run test
+
+ chromatic-deployment:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Check out code
+ uses: actions/checkout@v3
+ with:
+ fetch-depth: 0
+ - name: Set Node env
+ uses: actions/setup-node@v3
+ with:
+ node-version: 16
+ - name: Install dependencies
+ run: npm ci
+ - name: Build Grace
+ run: npm run build
+ - name: Publish to Chromatic
+ uses: chromaui/action@v1
+ with:
+ projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.npmignore

@@ -1,5 +1,6 @@
-test/
-coverage/
-jest.config.js
-storybook-static/
-.loki/
+docs/
+.github
+.husky
+.storybook
+*.mdx
+*.test.ts

.storybook/main.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
  logLevel: 'debug',
  stories: [
@@ -17,4 +19,12 @@ module.exports = {
  buildStoriesJson: true,
  },
  framework: '@storybook/web-components',
+ webpackFinal: async config => {
+ const gracePath = path.join(__dirname, '..', 'dist');
+ config.resolve.alias['@trendyol-js/grace'] = path.resolve(
+ gracePath,
+ 'grace.js'
+ );
+ return config;
+ },
 };

.storybook/preview.js

@@ -1,6 +1,6 @@
 import { setCustomElementsManifest } from '@storybook/web-components';
 import customElements from '../src/custom-elements.json';
-import '../src/themes/default.css';
+import '../dist/themes/default.css';
 
 setCustomElementsManifest(customElements);
 

.stylelintrc.json

@@ -1,4 +1,3 @@
 {
- "extends": "stylelint-config-standard",
- "customSyntax": "postcss-lit"
+ "extends": ["stylelint-config-standard", "stylelint-config-prettier"]
 }