Merge pull request #30 from significa/rewrite

new design: rewrite

.eslintignore

@@ -3,6 +3,7 @@ node_modules
 /build
 /.svelte-kit
 /package
+/dist
 .env
 .env.*
 !.env.example

.eslintrc.cjs

@@ -1,30 +1,30 @@
 module.exports = {
-	root: true,
-	parser: '@typescript-eslint/parser',
-	extends: [
-		'eslint:recommended',
-		'plugin:@typescript-eslint/recommended',
-		'prettier',
-		'plugin:storybook/recommended'
-	],
-	plugins: ['svelte3', '@typescript-eslint'],
-	ignorePatterns: ['*.cjs'],
-	overrides: [
-		{
-			files: ['*.svelte'],
-			processor: 'svelte3/svelte3'
-		}
-	],
-	settings: {
-		'svelte3/typescript': () => require('typescript')
-	},
-	parserOptions: {
-		sourceType: 'module',
-		ecmaVersion: 2020
-	},
-	env: {
-		browser: true,
-		es2017: true,
-		node: true
-	}
+  root: true,
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'plugin:storybook/recommended'
+  ],
+  plugins: ['svelte3', '@typescript-eslint'],
+  ignorePatterns: ['*.cjs'],
+  overrides: [
+    {
+      files: ['*.svelte'],
+      processor: 'svelte3/svelte3'
+    }
+  ],
+  settings: {
+    'svelte3/typescript': () => require('typescript')
+  },
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2020
+  },
+  env: {
+    browser: true,
+    es2017: true,
+    node: true
+  }
 };

.gitignore

@@ -1,10 +1,11 @@
 .DS_Store
 node_modules
 /build
+/dist
 /.svelte-kit
 /package
 .env
 .env.*
 !.env.example
-/coverage
-/storybook-static
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run validate

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run test

.npmrc

@@ -1,2 +1 @@
 engine-strict=true
-legacy-peer-deps=true

.prettierignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /build
+/dist
 /.svelte-kit
 /package
 .env

.prettierrc

@@ -1,9 +1,9 @@
 {
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"pluginSearchDirs": ["."],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+  "useTabs": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-svelte"],
+  "pluginSearchDirs": ["."],
+  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

.storybook/main.ts

@@ -0,0 +1,28 @@
+import type { StorybookConfig } from '@storybook/sveltekit';
+import path from 'path';
+import { mergeConfig } from 'vite';
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-a11y'],
+  framework: {
+    name: '@storybook/sveltekit',
+    options: {}
+  },
+  docs: {
+    autodocs: 'tag'
+  },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          $app: path.resolve(process.cwd(), './__mocks__/$app'),
+          $components: path.resolve(process.cwd(), './src/components'),
+          $lib: path.resolve(process.cwd(), './src/lib'),
+          $types: path.resolve(process.cwd(), './src/types'),
+          $styles: path.resolve(process.cwd(), './src/styles')
+        }
+      }
+    });
+  }
+};
+export default config;

.storybook/preview-head.html

@@ -1,3 +1,9 @@
+<style>
+  body {
+    font-family: var(--font-family-sans);
+  }
+</style>
+
 <script>
-	window.global = window;
+  window.global = window;
 </script>

.storybook/preview.ts

@@ -0,0 +1,34 @@
+import '../src/lib/styles/index.css';
+
+import ThemeDecorator from './theme-decorator.svelte';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/
+    }
+  }
+};
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    defaultValue: 'Light',
+    toolbar: {
+      icon: 'paintbrush',
+      items: ['Light', 'Dark', 'Yellow'],
+      dynamicTitle: true
+    }
+  }
+};
+
+export const decorators = [
+  (_, ctx) => {
+    return {
+      Component: ThemeDecorator,
+      props: { theme: ctx.globals.theme.toLowerCase() }
+    };
+  }
+];

.storybook/theme-decorator.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  export let theme: string;
+
+  $: {
+    const css = document.createElement('style');
+    css.appendChild(
+      document.createTextNode(
+        `* {
+          -webkit-transition: none !important;
+          -moz-transition: none !important;
+          -o-transition: none !important;
+          -ms-transition: none !important;
+          transition: none !important;
+        }`
+      )
+    );
+    document.head.appendChild(css);
+
+    // change theme
+    document.body.setAttribute('data-theme', theme);
+
+    // Calling getComputedStyle forces the browser to redraw
+    const _ = window.getComputedStyle(css).opacity;
+    document.head.removeChild(css);
+  }
+</script>
+
+<slot />

.vscode/extensions.json

@@ -1,4 +1,4 @@
 {
-	"recommendations": ["svelte.svelte-vscode", "phoenisx.cssvar"],
-	"unwantedRecommendations": []
+  "recommendations": ["svelte.svelte-vscode", "phoenisx.cssvar"],
+  "unwantedRecommendations": []
 }

.vscode/settings.json

@@ -1,7 +1,8 @@
 {
-	"cssvar.files": ["src/**/*.css"],
-	"editor.formatOnSave": true,
-	"editor.codeActionsOnSave": {
-		"source.fixAll": true
-	}
+  "cssvar.files": ["src/**/*.css"],
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  },
+  "eslint.validate": ["svelte"]
 }

README.md

@@ -5,16 +5,63 @@ Storybook preview available at [significa-svelte-ui.vercel.app](https://signific
 
 This package is published in the GitHub package registry as [@significa/significa-svelte-ui](https://github.com/significa/significa-svelte-ui/pkgs/npm/significa-svelte-ui).
 
-## Using the package
+# Using the package
 
 1. Generate a new github PAT (Classic Personal Access Token).
    Grant `read:packages` _Download packages from GitHub Package Registry_.
-2. Run `npm login --scope=@significa --registry=https://npm.pkg.github.com`.
-   In the interactive CLI set your GitHub handle as the username and the newly generated PAT as the password (email can be anything).
+2. Open your shell configuration file (`.zshrc`, `.bashrc`, etc.) and export your token at the end of the file: ` export GITHUB_ACCESS_TOKEN=access_token_here`
 
-More instructions in [Working with the npm registry](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry).
+_More instructions in [Working with the npm registry](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry)._
 
-## Development
+Install with `npm install --save-dev @significa/svelte-ui`
+
+## Import CSS
+
+In your main css file (`/src/styles/index.css` or similar), import our CSS:
+
+```css
+@import '@significa/svelte-ui/fonts.css';
+@import '@significa/svelte-ui/index.css';
+
+/* Your styles */
+```
+
+### VSCode setup
+
+Setting up VSCode to autocomplete with our available CSS variables:
+
+1. Add the "phoenisx.cssvar" extension. Optionally, add it to your project's `.vscode/extensions.json` file.
+2. In `.vscode/settings.json` add: `"cssvar.files": ["src/**/*.css", "node_modules/@significa/svelte-ui/dist/**/*.css"],`
+
+## CSS Mixins
+
+This library exports some mixins that can be helpful when developing UIs:
+
+<details>
+  <summary>Available mixins</summary>
+
+- elevated-links
+- visually-hidden
+- multi-line-clamp $amount: 2
+- hide-scrollbar
+</details>
+
+### Usage
+
+To use them with PostCSS, first install `postcss-mixins` and add to your PostCSS configuration:
+
+```js
+module.exports = {
+  plugins: [
+    // your plugins
+    require('postcss-mixins')({
+      mixinsFiles: [require.resolve('@significa/svelte-ui/mixins.css')]
+    })
+  ]
+};
+```
+
+# Development
 
 1. Ensure you are using the Node version in the [.nvmrc](./.nvmrc) file (ex: `nvm use`).
 2. Install the dependencies with `npm install`.