diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..294b385 --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +node_modules + +# Output +.output +.vercel +.netlify +.wrangler +/.svelte-kit +/build +/dist + +# OS +.DS_Store +Thumbs.db + +# Env +.env +.env.* +!.env.example +!.env.test + +# Vite +vite.config.js.timestamp-* +vite.config.ts.timestamp-* diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..b6f27f1 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +engine-strict=true diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..6562bcb --- /dev/null +++ b/.prettierignore @@ -0,0 +1,6 @@ +# Package Managers +package-lock.json +pnpm-lock.yaml +yarn.lock +bun.lock +bun.lockb diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..7ebb855 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,15 @@ +{ + "useTabs": true, + "singleQuote": true, + "trailingComma": "none", + "printWidth": 100, + "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"], + "overrides": [ + { + "files": "*.svelte", + "options": { + "parser": "svelte" + } + } + ] +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..9410ac8 --- /dev/null +++ b/README.md @@ -0,0 +1,58 @@ +# Svelte library + +Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv). + +Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging). + +## Creating a project + +If you're seeing this, you've probably already done this step. Congrats! + +```bash +# create a new project in the current directory +npx sv create + +# create a new project in my-app +npx sv create my-app +``` + +## Developing + +Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: + +```bash +npm run dev + +# or start the server and open the app in a new browser tab +npm run dev -- --open +``` + +Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app. + +## Building + +To build your library: + +```bash +npm run package +``` + +To create a production version of your showcase app: + +```bash +npm run build +``` + +You can preview the production build with `npm run preview`. + +> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment. + +## Publishing + +Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)). + +To publish your library to [npm](https://www.npmjs.com): + +```bash +npm publish +``` diff --git a/eslint.config.js b/eslint.config.js index 9cadde2..ef07d32 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -1,3 +1,36 @@ -import { config } from '@repo/eslint-config/index.js'; +import prettier from 'eslint-config-prettier'; +import js from '@eslint/js'; +import { includeIgnoreFile } from '@eslint/compat'; +import svelte from 'eslint-plugin-svelte'; +import globals from 'globals'; +import { fileURLToPath } from 'node:url'; +import ts from 'typescript-eslint'; +import svelteConfig from './svelte.config.js'; -export default config; +const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url)); + +export default ts.config( + includeIgnoreFile(gitignorePath), + js.configs.recommended, + ...ts.configs.recommended, + ...svelte.configs.recommended, + prettier, + ...svelte.configs.prettier, + { + languageOptions: { + globals: { ...globals.browser, ...globals.node } + }, + rules: { 'no-undef': 'off' } + }, + { + files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'], + languageOptions: { + parserOptions: { + projectService: true, + extraFileExtensions: ['.svelte'], + parser: ts.parser, + svelteConfig + } + } + } +); diff --git a/index.ts b/index.ts deleted file mode 100644 index ad9aef4..0000000 --- a/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -export { default as Button } from './components/Button.svelte'; -export { default as CenterBox } from './components/CenterBox.svelte'; -export { default as Combobox } from './components/Combobox.svelte'; -export { default as FramelessButton } from './components/FramelessButton.svelte'; -export { default as Label } from './components/Label.svelte'; -export { default as Link } from './components/Link.svelte'; -export { default as PhoneInput } from './components/PhoneInput.svelte'; -export { default as PinInput } from './components/PinInput.svelte'; -export { default as RadioGroup } from './components/RadioGroup.svelte'; -export { default as Select } from './components/Select.svelte'; -export { default as Spinner } from './components/Spinner.svelte'; -export { default as StateMachine, type StateMachinePage } from './components/StateMachine.svelte'; -export { default as StyledRawInput } from './components/StyledRawInput.svelte'; -export { default as TextInput } from './components/TextInput.svelte'; -export { default as TimezoneInput } from './components/TimezoneInput.svelte'; -export { default as ToggleGroup } from './components/ToggleGroup.svelte'; -export { default as ToggleSelect } from './components/ToggleSelect.svelte'; diff --git a/package.json b/package.json index 35a828a..2b9a3d4 100644 --- a/package.json +++ b/package.json @@ -1,32 +1,75 @@ { "name": "@repo/ui", - "version": "0.0.0", + "version": "0.0.1", + "scripts": { + "dev": "vite dev", + "build": "vite build && npm run prepack", + "preview": "vite preview", + "prepare": "svelte-kit sync || echo ''", + "prepack": "svelte-kit sync && svelte-package && publint", + "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", + "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", + "format": "prettier --write .", + "lint": "prettier --check . && eslint ." + }, + "files": [ + "dist", + "!dist/**/*.test.*", + "!dist/**/*.spec.*" + ], + "sideEffects": [ + "**/*.css" + ], + "svelte": "./dist/index.js", + "types": "./dist/index.d.ts", "type": "module", - "module": "index.ts", - "main": "index.ts", "exports": { + "./internal": { + "types": "./src/lib/index.ts", + "svelte": "./src/lib/index.ts" + }, ".": { - "types": "./index.ts", - "svelte": "./index.ts" + "types": "./dist/index.d.ts", + "svelte": "./dist/index.js" } }, - "scripts": { - "lint": "eslint ." - }, - "devDependencies": { - "@repo/eslint-config": "workspace:*", - "@repo/tailwindcss-config": "workspace:*", - "@repo/typescript-config": "workspace:*", - "eslint": "^9.24.0", - "svelte": "^5.25.3", - "@sveltejs/kit": "^2.20.2" + "peerDependencies": { + "svelte": "^5.0.0" }, "dependencies": { "@repo/validate": "workspace:*", "@jsrob/svelte-portal": "^0.2.1", "country-state-city": "^3.2.1", "libphonenumber-js": "^1.12.6", + "match-sorter": "^8.0.0", "melt": "^0.12.0", "phosphor-svelte": "^3.0.1" - } + }, + "devDependencies": { + "@eslint/compat": "^1.2.5", + "@eslint/js": "^9.18.0", + "@sveltejs/adapter-auto": "^4.0.0", + "@sveltejs/kit": "^2.16.0", + "@sveltejs/package": "^2.0.0", + "@sveltejs/vite-plugin-svelte": "^5.0.0", + "@tailwindcss/forms": "^0.5.9", + "@tailwindcss/vite": "^4.0.0", + "eslint": "^9.18.0", + "eslint-config-prettier": "^10.0.1", + "eslint-plugin-svelte": "^3.0.0", + "globals": "^16.0.0", + "prettier": "^3.4.2", + "prettier-plugin-svelte": "^3.3.3", + "prettier-plugin-tailwindcss": "^0.6.11", + "publint": "^0.3.2", + "svelte": "^5.0.0", + "svelte-check": "^4.0.0", + "tailwindcss": "^4.0.0", + "typescript": "^5.0.0", + "typescript-eslint": "^8.20.0", + "vite": "^6.2.5" + }, + "keywords": [ + "svelte" + ] } diff --git a/src/app.css b/src/app.css new file mode 100644 index 0000000..ffb96a1 --- /dev/null +++ b/src/app.css @@ -0,0 +1,2 @@ +@import 'tailwindcss'; +@plugin '@tailwindcss/forms'; diff --git a/src/app.d.ts b/src/app.d.ts new file mode 100644 index 0000000..da08e6d --- /dev/null +++ b/src/app.d.ts @@ -0,0 +1,13 @@ +// See https://svelte.dev/docs/kit/types#app.d.ts +// for information about these interfaces +declare global { + namespace App { + // interface Error {} + // interface Locals {} + // interface PageData {} + // interface PageState {} + // interface Platform {} + } +} + +export {}; diff --git a/src/app.html b/src/app.html new file mode 100644 index 0000000..f22aeaa --- /dev/null +++ b/src/app.html @@ -0,0 +1,12 @@ + + + + + + + %sveltekit.head% + + +
%sveltekit.body%
+ + diff --git a/components/Button.svelte b/src/lib/Button.svelte similarity index 98% rename from components/Button.svelte rename to src/lib/Button.svelte index c967b72..62360b4 100644 --- a/components/Button.svelte +++ b/src/lib/Button.svelte @@ -80,7 +80,7 @@ {#if loading}
-
+
{/if} diff --git a/components/CenterBox.svelte b/src/lib/CenterBox.svelte similarity index 100% rename from components/CenterBox.svelte rename to src/lib/CenterBox.svelte diff --git a/components/Combobox.svelte b/src/lib/Combobox.svelte similarity index 97% rename from components/Combobox.svelte rename to src/lib/Combobox.svelte index 9876cdc..630d3b4 100644 --- a/components/Combobox.svelte +++ b/src/lib/Combobox.svelte @@ -246,8 +246,8 @@ {#if open}
@@ -436,7 +436,7 @@ {#if (value && value.infotext) || (highlighted && useHighlighted && highlighted.infotext)}
{#if item.checked} diff --git a/components/Select.svelte b/src/lib/Select.svelte similarity index 100% rename from components/Select.svelte rename to src/lib/Select.svelte diff --git a/components/Spinner.svelte b/src/lib/Spinner.svelte similarity index 100% rename from components/Spinner.svelte rename to src/lib/Spinner.svelte diff --git a/components/StateMachine.svelte b/src/lib/StateMachine.svelte similarity index 96% rename from components/StateMachine.svelte rename to src/lib/StateMachine.svelte index a83044a..c4cc1cb 100644 --- a/components/StateMachine.svelte +++ b/src/lib/StateMachine.svelte @@ -328,7 +328,7 @@ {/snippet}
@@ -360,7 +360,7 @@ lg:max-h-[60rem] lg:min-h-[30rem] lg:flex-row lg:items-center dark:sm:bg-gray-900" > -
+
{@render progress()}
@@ -385,10 +385,10 @@ {#key index}
+ import '../app.css'; + + let { children } = $props(); + + +{@render children()} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte new file mode 100644 index 0000000..9c42926 --- /dev/null +++ b/src/routes/+page.svelte @@ -0,0 +1,3 @@ +

Welcome to your library project

+

Create your package using @sveltejs/package and preview/showcase your work with SvelteKit

+

Visit svelte.dev/docs/kit to read the documentation

diff --git a/static/favicon.png b/static/favicon.png new file mode 100644 index 0000000..825b9e6 Binary files /dev/null and b/static/favicon.png differ diff --git a/svelte.config.js b/svelte.config.js new file mode 100644 index 0000000..1295460 --- /dev/null +++ b/svelte.config.js @@ -0,0 +1,18 @@ +import adapter from '@sveltejs/adapter-auto'; +import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; + +/** @type {import('@sveltejs/kit').Config} */ +const config = { + // Consult https://svelte.dev/docs/kit/integrations + // for more information about preprocessors + preprocess: vitePreprocess(), + + kit: { + // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list. + // If your environment is not supported, or you settled on a specific environment, switch out the adapter. + // See https://svelte.dev/docs/kit/adapters for more information about adapters. + adapter: adapter() + } +}; + +export default config; diff --git a/tsconfig.json b/tsconfig.json index 1a392e8..6f788f1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,3 +1,15 @@ { - "extends": ["@repo/typescript-config/svelte.json"] + "extends": "./.svelte-kit/tsconfig.json", + "compilerOptions": { + "allowJs": true, + "checkJs": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "sourceMap": true, + "strict": true, + "module": "NodeNext", + "moduleResolution": "NodeNext" + } } diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..2d35c4f --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,7 @@ +import tailwindcss from '@tailwindcss/vite'; +import { sveltekit } from '@sveltejs/kit/vite'; +import { defineConfig } from 'vite'; + +export default defineConfig({ + plugins: [tailwindcss(), sveltekit()] +});