From aecfb0ddaaa2e33cfbaa982d3cff601ed77b48bd Mon Sep 17 00:00:00 2001 From: Elijah Duffy Date: Sun, 13 Apr 2025 18:09:32 -0600 Subject: [PATCH] fix ui package, use sv to create recreated package using sv, marking correctly as a library. seems I was missing some sveltekit tooling somewhere along the way otherwise. --- .gitignore | 24 ++++++ .npmrc | 1 + .prettierignore | 6 ++ .prettierrc | 15 ++++ README.md | 58 ++++++++++++++ eslint.config.js | 37 ++++++++- index.ts | 17 ---- package.json | 75 ++++++++++++++---- src/app.css | 2 + src/app.d.ts | 13 +++ src/app.html | 12 +++ {components => src/lib}/Button.svelte | 2 +- {components => src/lib}/CenterBox.svelte | 0 {components => src/lib}/Combobox.svelte | 12 +-- .../lib}/FramelessButton.svelte | 0 {components => src/lib}/Label.svelte | 0 {components => src/lib}/Link.svelte | 0 {components => src/lib}/PhoneInput.svelte | 0 {components => src/lib}/PinInput.svelte | 2 +- {components => src/lib}/RadioGroup.svelte | 10 +-- {components => src/lib}/Select.svelte | 0 {components => src/lib}/Spinner.svelte | 0 {components => src/lib}/StateMachine.svelte | 12 +-- {components => src/lib}/StyledRawInput.svelte | 0 {components => src/lib}/TextInput.svelte | 0 {components => src/lib}/TimezoneInput.svelte | 0 {components => src/lib}/ToggleGroup.svelte | 0 {components => src/lib}/ToggleSelect.svelte | 0 src/lib/index.ts | 18 +++++ src/routes/+layout.svelte | 7 ++ src/routes/+page.svelte | 3 + static/favicon.png | Bin 0 -> 1571 bytes svelte.config.js | 18 +++++ tsconfig.json | 14 +++- vite.config.ts | 7 ++ 35 files changed, 310 insertions(+), 55 deletions(-) create mode 100644 .gitignore create mode 100644 .npmrc create mode 100644 .prettierignore create mode 100644 .prettierrc create mode 100644 README.md delete mode 100644 index.ts create mode 100644 src/app.css create mode 100644 src/app.d.ts create mode 100644 src/app.html rename {components => src/lib}/Button.svelte (98%) rename {components => src/lib}/CenterBox.svelte (100%) rename {components => src/lib}/Combobox.svelte (97%) rename {components => src/lib}/FramelessButton.svelte (100%) rename {components => src/lib}/Label.svelte (100%) rename {components => src/lib}/Link.svelte (100%) rename {components => src/lib}/PhoneInput.svelte (100%) rename {components => src/lib}/PinInput.svelte (98%) rename {components => src/lib}/RadioGroup.svelte (72%) rename {components => src/lib}/Select.svelte (100%) rename {components => src/lib}/Spinner.svelte (100%) rename {components => src/lib}/StateMachine.svelte (96%) rename {components => src/lib}/StyledRawInput.svelte (100%) rename {components => src/lib}/TextInput.svelte (100%) rename {components => src/lib}/TimezoneInput.svelte (100%) rename {components => src/lib}/ToggleGroup.svelte (100%) rename {components => src/lib}/ToggleSelect.svelte (100%) create mode 100644 src/lib/index.ts create mode 100644 src/routes/+layout.svelte create mode 100644 src/routes/+page.svelte create mode 100644 static/favicon.png create mode 100644 svelte.config.js create mode 100644 vite.config.ts 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 0000000000000000000000000000000000000000..825b9e65af7c104cfb07089bb28659393b4f2097 GIT binary patch literal 1571 zcmV+;2Hg3HP)Px)-AP12RCwC$UE6KzI1p6{F2N z1VK2vi|pOpn{~#djwYcWXTI_im_u^TJgMZ4JMOsSj!0ma>B?-(Hr@X&W@|R-$}W@Z zgj#$x=!~7LGqHW?IO8+*oE1MyDp!G=L0#^lUx?;!fXv@l^6SvTnf^ac{5OurzC#ZMYc20lI%HhX816AYVs1T3heS1*WaWH z%;x>)-J}YB5#CLzU@GBR6sXYrD>Vw(Fmt#|JP;+}<#6b63Ike{Fuo!?M{yEffez;| zp!PfsuaC)>h>-AdbnwN13g*1LowNjT5?+lFVd#9$!8Z9HA|$*6dQ8EHLu}U|obW6f z2%uGv?vr=KNq7YYa2Roj;|zooo<)lf=&2yxM@e`kM$CmCR#x>gI>I|*Ubr({5Y^rb zghxQU22N}F51}^yfDSt786oMTc!W&V;d?76)9KXX1 z+6Okem(d}YXmmOiZq$!IPk5t8nnS{%?+vDFz3BevmFNgpIod~R{>@#@5x9zJKEHLHv!gHeK~n)Ld!M8DB|Kfe%~123&Hz1Z(86nU7*G5chmyDe ziV7$pB7pJ=96hpxHv9rCR29%bLOXlKU<_13_M8x)6;P8E1Kz6G<&P?$P^%c!M5`2` zfY2zg;VK5~^>TJGQzc+33-n~gKt{{of8GzUkWmU110IgI0DLxRIM>0US|TsM=L|@F z0Bun8U!cRB7-2apz=y-7*UxOxz@Z0)@QM)9wSGki1AZ38ceG7Q72z5`i;i=J`ILzL z@iUO?SBBG-0cQuo+an4TsLy-g-x;8P4UVwk|D8{W@U1Zi z!M)+jqy@nQ$p?5tsHp-6J304Q={v-B>66$P0IDx&YT(`IcZ~bZfmn11#rXd7<5s}y zBi9eim&zQc0Dk|2>$bs0PnLmDfMP5lcXRY&cvJ=zKxI^f0%-d$tD!`LBf9^jMSYUA zI8U?CWdY@}cRq6{5~y+)#h1!*-HcGW@+gZ4B};0OnC~`xQOyH19z*TA!!BJ%9s0V3F?CAJ{hTd#*tf+ur-W9MOURF-@B77_-OshsY}6 zOXRY=5%C^*26z?l)1=$bz30!so5tfABdSYzO+H=CpV~aaUefmjvfZ3Ttu9W&W3Iu6 zROlh0MFA5h;my}8lB0tAV-Rvc2Zs_CCSJnx@d`**$idgy-iMob4dJWWw|21b4NB=LfsYp0Aeh{Ov)yztQi;eL4y5 zMi>8^SzKqk8~k?UiQK^^-5d8c%bV?$F8%X~czyiaKCI2=UH