Merge pull request #248 from silinternational/develop

Release 11.0.0

.github/workflows/deepfactor.yml

@@ -11,6 +11,6 @@ jobs:
         DF_RUN_TOKEN: ${{ secrets.DF_RUN_TOKEN }}
     steps:
     - name: Checkout
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
     - name: Scan with Deepfactor
       run: dfctl scan -s fs -a ${{ github.event.repository.name }} -c ${{ github.event.repository.name }} -V ${{ github.ref_name }} .

.github/workflows/gh-pages.yml

@@ -9,15 +9,15 @@ jobs:
   deploy:
     runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Setup Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: '18'
 
       - name: Cache dependencies
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

.github/workflows/release.yml

@@ -9,9 +9,9 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v1
+        uses: actions/checkout@v4
       - name: Setup Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: 18
       - name: Install dependencies

.storybook/main.js

@@ -1,44 +1,26 @@
-const path = require('path')
-
-module.exports = {
-  "stories": [
+/** @type { import('@storybook/svelte-vite').StorybookConfig } */
+const config = {
+  stories: [
     "../**/*.stories.mdx",
     "../**/*.stories.@(js|jsx|ts|tsx|svelte)"
   ],
-  "addons": [
+  addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
     "@storybook/addon-svelte-csf",
     "@storybook/preset-scss",
-    "@storybook/addon-postcss"
+    "@storybook/addon-mdx-gfm",
   ],
-  "svelteOptions": {
-    "emitCss": true,
-    "preprocess": require("svelte-preprocess")()
-  },
-  "core": {
-    "builder": "webpack5"
-  },
-  babel: async (options) => {
-    options.presets[0][1].loose = true
-    return options
-  },
-  webpackFinal: async (config, { configType }) => {
-    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
-    // You can change the configuration based on that.
-    // 'PRODUCTION' is used when building the static version of storybook.
-
-    // Make whatever fine-grained changes you need
-    config.resolve.fallback.crypto = false;
-    config.resolve.alias.svelte = path.resolve('node_modules', 'svelte')
-
-    // config.module.rules[0].use[0].options.presets[0][1].loose = true
-    // console.log('!!!!!!!!!!!!', JSON.stringify(config.module.rules[0].use[0].options, null, 4))
-    //  = [
-    //     '@babel/plugin-proposal-class-properties',
-    //     { loose: true }
-    // ]
 
-    return config;
+  framework: {
+    name: '@storybook/svelte-vite',
+    options: {
+      emitCss: true,
+    },
+},
+  docs: {
+    autodocs: true,
   },
-}
+}
+export default config

.storybook/preview.js

@@ -1,4 +1,4 @@
-import '!style-loader!css-loader!../components/global.css'
+import '../components/global.css'
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -16,8 +16,7 @@ loadIcons()
 function loadIcons() {
   const link = document.createElement('link')
 
-  link.href = 'https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet'
+  link.href = 'https://fonts.googleapis.com/css?family=Material+Icons&display=block'
   link.rel = 'stylesheet'
-
   document.head.appendChild(link)
-}
+}

README.md

@@ -4,7 +4,7 @@ Reusable Svelte components for some internal applications
 
 ## installation
 
-To install to your Svelte project, open your project's root directory in a terminal. Type or paste `npm i -D @silintl/ui-components` and press enter. Sass (depending on your bundler and plugins) and material-components-web are required to develop additional material web components in your app, but it may depend on your version of npm if they are necessary even if you don't (I haven't figured out which versions require them). Enter the commands `npm i -D material-components-web@14` and `npm i -D sass@1` (versions will vary if you use an older release of this library). You should already have svelte@3 installed if you are using this library.
+To install to your Svelte project, open your project's root directory in a terminal. Type or paste `npm i -D @silintl/ui-components` and press enter. Sass (depending on your bundler and plugins) and material-components-web are required to develop additional material web components in your app, but it may depend on your version of npm if they are necessary even if you don't (I haven't figured out which versions require them). Enter the commands `npm i -D material-components-web@14` and `npm i -D sass@1` (versions will vary if you use an older release of this library). You should already have svelte@4 installed if you are using this library.
 
 If you are using typescript you will need to run `npm i -D tslib` to avoid a material-components-web type error. This will already be installed if you have set up SvelteKit with typescript using `npm create svelte@latest app-name`.
 
@@ -69,7 +69,7 @@ and then import it to your sass entry point like \_index.scss. You may prefer to
 
 SvelteKit won't need a bundler as it uses Vite, but Svelte projects will need a bundler (rollup or webpack most likely) configuration. If you are using rollup your plugins in your "rollup.config.js" should look something like this taking special note of postcss and svelte:
 
-```
+```js
 import postcss from 'rollup-plugin-postcss';
 import autoPreprocess from 'svelte-preprocess';