Merge pull request #329 from hjalmers/ivy-rebuild

Ivy rebuild

.eslintrc.json

@@ -0,0 +1,41 @@
+{
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates",
+        "plugin:prettier/recommended"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "gt",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "angular-generic",
+            "style": "kebab-case"
+          }
+        ],
+        "prettier/prettier": "error"
+      }
+    },
+    {
+      "files": ["*.html"],
+      "rules": {}
+    }
+  ],
+  "plugins": [
+    "@angular-eslint",
+    "prettier",
+    "html"
+  ]
+}

.github/workflows/main.yml

@@ -15,7 +15,7 @@ jobs:
         id: branch
 
       - name: Install dependencies
-        run: npm ci
+        run: npm ci --legacy-peer-deps
 
       - name: Build library
         run: npm run build

.prettierrc

@@ -1,8 +1,15 @@
 {
-  "printWidth": 120,
-  "singleQuote": true,
-  "useTabs": false,
-  "tabWidth": 2,
-  "semi": true,
-  "bracketSpacing": true
+  "extends": ["prettier"],
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": "error",
+    "arrow-body-style": "off",
+    "prefer-arrow-callback": "off",
+    "printWidth": 120,
+    "singleQuote": true,
+    "useTabs": false,
+    "tabWidth": 2,
+    "semi": true,
+    "bracketSpacing": true
+  }
 }

.storybook/main.js

@@ -1,11 +1,17 @@
 module.exports = {
   stories: [
-    '../projects/docs/src/stories/**/*.stories.mdx',
-    '../projects/docs/src/stories/**/*.stories.@(js|jsx|ts|tsx)',
+    "../projects/docs/src/stories/**/*.stories.mdx",
+    "../projects/docs/src/stories/**/*.stories.@(js|jsx|ts|tsx)",
   ],
-  addons: ['@storybook/addon-docs', '@storybook/addon-links', '@storybook/addon-essentials'],
-  framework: '@storybook/angular',
+  addons: [
+    "@storybook/addon-docs",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "storybook-addon-themes",
+  ],
+  framework: "@storybook/angular",
+  staticDirs: ["../.storybook/assets"],
   core: {
-    builder: 'webpack5',
+    builder: "webpack5",
   },
 };

.storybook/manager.js

@@ -0,0 +1,12 @@
+// import scss using scss-loader file
+import "!style-loader!css-loader!postcss-loader!sass-loader!./manager.scss";
+
+// set default theme
+document.body.setAttribute("data-theme", "theme-bootstrap");
+
+import { addons } from "@storybook/addons";
+import theme from "./theme";
+
+addons.setConfig({
+  theme,
+});

.storybook/manager.scss

@@ -0,0 +1,23 @@
+// load global styles used by storybook
+@use "themes/swimbird";
+@use "themes/bootstrap/css-variables" as bootstrap;
+
+body[data-theme="theme-bootstrap"] {
+  @include bootstrap.add-variables;
+}
+
+body[data-theme="theme-sb-dark"] {
+  @include swimbird.dark-theme;
+}
+body[data-theme="theme-sb-light"] {
+  @include swimbird.light-theme;
+}
+@include swimbird.add-typography;
+
+body {
+  background: var(--sb-body-bg) !important;
+
+  div#storybook-explorer-tree * {
+    color: var(--sb-body-color);
+  }
+}

.storybook/preview-head.html

@@ -1,7 +1,5 @@
 <!-- .storybook/preview-head.html -->
-<link rel="stylesheet" href="https://unpkg.com/@sebgroup/[email protected]/css/bootstrap.min.css" type="text/css" />
-<link rel="stylesheet" href="https://unpkg.com/@sebgroup/[email protected]/css/seb-fonts.min.css" type="text/css" />
-<link rel="stylesheet" href="https://unpkg.com/@highlightjs/[email protected]/styles/color-brewer.min.css">
-
-
-
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/@highlightjs/[email protected]/styles/color-brewer.min.css"
+/>

.storybook/preview.js

@@ -1,20 +1,32 @@
-import { setCompodocJson } from '@storybook/addon-docs/angular';
-import docJson from '../documentation.json';
+import { setCompodocJson } from "@storybook/addon-docs/angular";
+import docJson from "../documentation.json";
+
 setCompodocJson(docJson);
 
 export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
+  actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
   docs: { inlineStories: true },
+  themes: {
+    //default: "Swimbird - Dark",
+    default: "Bootstrap",
+    clearable: false,
+    list: [
+      //{ name: "Swimbird - Dark", class: "theme-sb-dark", color: "#00aced" },
+      //{ name: "Swimbird - Light", class: "theme-sb-light", color: "#00aced" },
+      {
+        name: "Bootstrap",
+        class: "theme-bootstrap",
+        color: "var(--bs-primary)",
+      },
+    ],
+    onChange: (theme) => {
+      document.body.setAttribute("data-theme", theme.class);
+    },
+  },
 };
-
-// workaround for https://github.com/nrwl/nx/issues/7054
-import GlobalStyles from '!postcss-loader!sass-loader!./scss-loader.scss';
-const storybookStyles = document.createElement('style');
-storybookStyles.innerHTML = GlobalStyles;
-document.body.appendChild(storybookStyles);

.storybook/scss-loader.scss

@@ -1,3 +1,49 @@
 // load global styles used by storybook
+@use 'themes/swimbird' with (
+  $font-path: '/static/media/.storybook/assets/'
+);
+@use 'bootstrap/scss/bootstrap-grid' with (
+  $enable-negative-margins: true
+);
+
 @use 'projects/core/src/lib/scss' as generic-table;
 @include generic-table.styles;
+
+@include swimbird.add-typography;
+
+.theme-bootstrap {
+    @import 'themes/bootstrap';
+}
+
+.theme-sb-dark {
+  @include swimbird.dark-theme
+}
+
+.theme-sb-light {
+  @include swimbird.light-theme
+}
+//@import 'bootstrap/scss/tables';
+
+
+
+.sbdocs {
+  &.sbdocs-wrapper, &.sbdocs-h1, &.sbdocs-h2, &.sbdocs-h3, &.sbdocs-p, &.sbdocs-p > code {
+    background: var(--sb-body-bg);
+    color: var(--sb-body-color);
+  }
+}
+docs-tabs pre, .sbdocs-pre .prismjs {
+  background-image: linear-gradient(0deg, var(--sb-code-even) 25%, var(--sb-code-odd) 25%, var(--sb-code-odd) 50%, var(--sb-code-even) 50%, var(--sb-code-even) 75%, var(--sb-code-odd) 75%, var(--sb-code-odd) 100%) !important;
+  background-size: 84px 84px !important;
+  padding: 21px 1rem !important;
+  font-family: var(--bs-font-monospace);
+  font-size: 0.875em;
+}
+
+.sbdocs-pre .prismjs {
+  font-size: 14px;
+  line-height: 21px;
+  * {
+    font-family: var(--bs-font-monospace) !important;
+  }
+}

.storybook/theme.js

@@ -0,0 +1,9 @@
+import { create } from "@storybook/theming";
+
+export default create({
+  base: "light",
+  brandTitle: "Angular Generic Table",
+  brandUrl: "https://github.com/hjalmers/angular-generic-table",
+  brandImage: "logo.svg",
+  brandTarget: "_self",
+});