Create style guide basics

.eslint.config.mjs

@@ -0,0 +1,63 @@
+// @ts-check
+
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import tsParser from '@typescript-eslint/parser';
+import eslintPluginSvelte from 'eslint-plugin-svelte';
+import svelteParser from 'svelte-eslint-parser';
+import svelteConfig from './svelte.config.mjs';
+import globals from 'globals';
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  ...tseslint.configs.strict,
+  ...tseslint.configs.stylistic,
+  ...eslintPluginSvelte.configs['flat/recommended'],
+  ...eslintPluginSvelte.configs['flat/prettier'],
+  {
+    rules: {
+      '@typescript-eslint/no-empty-function': 'off',
+      '@typescript-eslint/no-inferrable-types': 'off',
+      '@typescript-eslint/consistent-type-assertions': 'off',
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+        },
+      ],
+      'no-unused-vars': 'off',
+      indent: ['warn', 2],
+      'linebreak-style': ['error', 'unix'],
+      semi: 'warn',
+      '@typescript-eslint/ban-ts-comment': 'off',
+    },
+  },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+      },
+    },
+  },
+  {
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        extraFileExtensions: ['.svelte'],
+      },
+    },
+  },
+  {
+    files: ['**/*.svelte', '*.svelte'],
+    languageOptions: {
+      parser: svelteParser,
+      parserOptions: {
+        parser: tsParser,
+        svelteConfig,
+      },
+    },
+  }
+);

.eslintignore

@@ -0,0 +1,12 @@
+.DS_Store
+node_modules/
+.env
+.env.*
+!.env.example
+dist
+storybook-static
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+storybook-static
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.npmignore

@@ -0,0 +1,18 @@
+# Exclude Storybook-related files
+*.stories.svelte
+.storybook/*
+*.mdx
+
+# Exclude IDE/editor configuration files
+.idea/*
+
+# Exclude ESLint configuration
+.eslintrc.js
+.eslintignore
+
+# Exclude Prettier configuration
+.prettierignore
+.prettierrc
+
+# Exclude Stylelint configuration
+stylelint.config.js

.prettierignore

@@ -0,0 +1,12 @@
+.DS_Store
+node_modules
+.env
+.env.*
+!.env.example
+dist
+storybook-static
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.prettierrc.json

@@ -0,0 +1,15 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "endOfLine": "auto",
+  "jsxSingleQuote": false,
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+  "printWidth": 120,
+  "proseWrap": "always",
+  "quoteProps": "as-needed",
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false
+}

.storybook/CustomTheme.js

@@ -0,0 +1,10 @@
+import {create} from '@storybook/theming';
+
+export default create({
+    base: 'dark',
+    brandTitle: 'Svelte + Storybook + TailwindCSS',
+    brandUrl: 'https://svelte-storybook-tailwindcss.sveltehub.dev',
+    brandImage:
+        'https://sveltehub.dev/templates/storybook-tailwindcss/logo-white.png',
+    brandTarget: '_blank'
+});

.storybook/main.js

@@ -0,0 +1,18 @@
+/** @type { import('@storybook/svelte-vite').StorybookConfig } */
+const config = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
+    addons: [
+        '@storybook/addon-svelte-csf',
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-interactions'
+    ],
+    framework: {
+        name: '@storybook/svelte-vite',
+        options: {}
+    },
+    docs: {
+        autodocs: 'tag'
+    }
+};
+export default config;

.storybook/manager-header.html

@@ -0,0 +1 @@
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

.storybook/manager.js

@@ -0,0 +1,6 @@
+import {addons} from '@storybook/addons';
+import customTheme from './CustomTheme';
+
+addons.setConfig({
+    theme: customTheme
+});

.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600;700&display=swap');
+</style>
+<script>
+    window.global = window;
+</script>

.storybook/preview.js

@@ -0,0 +1,14 @@
+import '../src/styles/index.css';
+
+export const parameters = {
+  backgrounds: {
+    default: 'light'
+  },
+  actions: {argTypesRegex: '^on[A-Z].*'},
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/
+    }
+  }
+};

README.md

@@ -1,2 +1,10 @@
-# style-guide
-A style guide to be used for consistent styling across apps.
+# Frequency Style Guide
+
+## Svelte + Storybook + TailwindCSS
+
+### Quickstart
+
+```zsh
+npm i
+npm run storybook
+```