feat: icon component

* feat: icon component boilerplate is created * chore(storybook): use dist build directly in storybook ui * feat: icon component implemented * fix: firefox sometimes fails with concurrent tests * chore: build script refactored * chore: dependencies are updated * chore(design): linter fixes Co-authored-by: Murat Çorlu <[email protected]>
Asim-Tahir · May 26, 2022 · ae69926 · ae69926
1 parent a82bc24
commit ae69926
Show file tree

Hide file tree

Showing 27 changed files with 462 additions and 101 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,30  1,17 @@
-const path = require('path');
-
 module.exports = {
   logLevel: 'debug',
-  stories: [
-    '../*.md',
-    '../docs/**/*.stories.mdx',
-    '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)',
-  ],
   stories: ['../*.md', '../docs/**/*.stories.mdx', '../src/**/*.stories.mdx'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-docs',
     '@storybook/addon-essentials',
     '@storybook/addon-a11y',
-    '@storybook/addon-docs',
   ],
   features: {
     postcss: false,
     interactionsDebugger: true,
     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;
-  },
   staticDirs: ['../dist'],
 };
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0  1,2 @@
 <link rel="stylesheet" href="/themes/default.css" />
 <script type="module" src="/grace.js"></script>
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,6  1,5 @@
 import { setCustomElementsManifest } from '@storybook/web-components';
 import customElements from '../src/custom-elements.json';
-import '../dist/themes/default.css';
 
 setCustomElementsManifest(customElements);
 

diff --git a/docs/design-system/iconography.stories.mdx b/docs/design-system/iconography.stories.mdx
@@ -1,11  1,21 @@
-import { Meta, Title, IconGallery, IconItem } from '@storybook/addon-docs/';
 import { Meta, Title, IconGallery, IconItem } from '@storybook/addon-docs';
 
-<Meta title="Design System/Iconography" />
 <Meta
   title="Design System/Iconography"
   parameters={{
     viewMode: 'docs',
     previewTabs: {
       canvas: {
         hidden: true,
       },
     },
   }}
 />
 
 # Iconography
 
 <IconGallery>
-  <IconItem name="mobile">
-    <p>Test</p>
   <IconItem name="info">
     <gr-icon name="info"></gr-icon>
   </IconItem>
-</IconGallery>
 </IconGallery>
diff --git a/docs/design-system/typography.stories.mdx b/docs/design-system/typography.stories.mdx
@@ -1,4  1,4 @@
-import { Meta, Typeset } from '@storybook/addon-docs/blocks';
 import { Meta, Typeset } from '@storybook/addon-docs';
 
 <Meta
   title="Design System/Typography"

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,9  5,7 @@
   "main": "dist/grace.js",
   "module": "dist/grace.js",
   "files": [
-    "dist/",
-    ".prettierrc.json",
-    ".eslintrc.json"
     "dist/"
   ],
   "author": {
     "name": "Trendyol Tech",
@@ -23,7  21,7 @@
     "prep:custom-elements": "wca analyze 'src/components/**/!(*.test).ts' --format json --outFile ./src/custom-elements.json",
     "prebuild": "npm run prep",
     "build": "node scripts/build.js",
-    "preserve": "npm run prep",
     "build:dev": "node scripts/build.js",
     "serve": "node scripts/build.js --serve",
     "storybook:axe:prod": "npm run storybook:prod && npm run axe-storybook --build-dir=storybook-static/",
     "storybook:axe:dev": "npm-run-all -s storybook:axe:dev:chromium storybook:axe:dev:firefox",
@@ -90,6  88,7 @@
     "@web/test-runner-playwright": "^0.8.6",
     "@webcomponents/webcomponentsjs": "^2.5.0",
     "chromatic": "^6.5.4",
     "del": "^6.1.0",
     "esbuild": "^0.14.39",
     "esbuild-plugin-lit-css": "^2.0.0",
     "eslint": "^8.12.0",
Original file line number	Diff line number	Diff line change
		@@ -0,0 1,2 @@
		<link rel="stylesheet" href="/themes/default.css" />
		<script type="module" src="/grace.js"></script>