lapikit 0.0.0-insiders.e06d168 → 0.0.0-insiders.e3186bc

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/bin/helper.js CHANGED
@@ -1,6 +1,3 @@
1
- import { promises as fs } from 'fs';
2
- import path from 'path';
3
-
4
1
  const color = {
5
2
  red: (text) => `\x1b[31m${text}\x1b[0m`,
6
3
  green: (text) => `\x1b[32m${text}\x1b[0m`,
@@ -60,38 +57,3 @@ export const terminal = (type = 'info', msg) => {
60
57
  else if (type === 'none') console.log(msg);
61
58
  else console.log(name, ansi.bold.blue('[info]'), msg);
62
59
  };
63
-
64
- export function getCssPathFromArgs() {
65
- const args = process.argv.slice(2);
66
- return args[1] || 'src/app.css';
67
- }
68
-
69
- export function getLapikitPathFromArgs() {
70
- const args = process.argv.slice(2);
71
- // Search argument after --plugin-path or -p
72
- const pluginPathIndex = args.findIndex((arg) => arg === '--plugin-path' || arg === '-p');
73
- if (pluginPathIndex !== -1 && args[pluginPathIndex + 1]) {
74
- return args[pluginPathIndex + 1];
75
- }
76
- return 'src/plugin';
77
- }
78
-
79
- export function validatePluginPath(pluginPath) {
80
- if (!pluginPath.startsWith('src/')) {
81
- return {
82
- valid: false,
83
- error: 'The path must start with "src/"'
84
- };
85
- }
86
- return { valid: true };
87
- }
88
-
89
- export async function envTypescript() {
90
- const directory = process.cwd();
91
- try {
92
- await fs.readFile(path.resolve(directory, 'tsconfig.json'), 'utf-8');
93
- return true;
94
- } catch {
95
- return false;
96
- }
97
- }
@@ -1,10 +1,21 @@
1
+ #kit-app,
2
+ .kit-application {
3
+ -webkit-text-size-adjust: 100%;
4
+ tab-size: 4;
5
+ line-height: 1.5;
6
+ box-sizing: border-box;
7
+ font-family: var(--kit-font-sans);
8
+ background-color: var(--kit-background-primary);
9
+ color: var(--kit-label-primary);
10
+ }
11
+
1
12
  .kit-overlay {
2
13
  position: fixed;
3
14
  top: 0;
4
15
  left: 0;
5
16
  height: 100%;
6
17
  width: 100%;
7
- background-color: color-mix(in oklab, var(--kit-state-shadow) 70%, transparent);
18
+ background-color: color-mix(in oklab, black 70%, transparent);
8
19
  z-index: 9000;
9
20
  cursor: default;
10
21
  }
@@ -1,14 +1,20 @@
1
1
  <script lang="ts">
2
- import { BROWSER } from 'esm-env';
3
- import type { Snippet } from 'svelte';
2
+ const BROWSER = typeof window !== 'undefined';
4
3
  import { useTheme } from '../../actions/use-theme.js';
5
4
  import { modalOpen, setOpenModal } from '../../stores/components.js';
6
5
 
6
+ import { viewport } from '../../stores/viewport.js';
7
+ import type { AppProps } from './types.js';
8
+
7
9
  let {
10
+ ref = $bindable(),
8
11
  children,
9
12
  themes,
10
- storageKey = '@lapikit/theme'
11
- }: { children: Snippet; themes?: string | string[]; storageKey?: string } = $props();
13
+ storageKey = '@lapikit/theme',
14
+ light,
15
+ dark,
16
+ ...rest
17
+ }: AppProps = $props();
12
18
 
13
19
  $effect.pre(() => {
14
20
  if (!BROWSER) return;
@@ -29,16 +35,45 @@
29
35
  useTheme(colorScheme);
30
36
  }
31
37
  }
38
+
39
+ // Met à jour le store viewport à l'init et sur resize
40
+ function updateViewport() {
41
+ viewport.set({
42
+ innerWidth: window.innerWidth,
43
+ outerWidth: window.outerWidth,
44
+ innerHeight: window.innerHeight,
45
+ outerHeight: window.outerHeight
46
+ });
47
+ }
48
+ updateViewport();
49
+ window.addEventListener('resize', updateViewport);
50
+ return () => {
51
+ window.removeEventListener('resize', updateViewport);
52
+ };
32
53
  });
33
54
  </script>
34
55
 
35
- {@render children?.()}
56
+ <div
57
+ id="kit-app"
58
+ bind:this={ref}
59
+ {...rest}
60
+ class={[
61
+ 'kit-application',
62
+ light && 'light',
63
+ dark && 'dark',
64
+ light && 'kit-theme--light',
65
+ dark && 'kit-theme--dark',
66
+ rest.class
67
+ ]}
68
+ >
69
+ {@render children?.()}
36
70
 
37
- <!-- svelte-ignore a11y_no_static_element_interactions -->
38
- {#if $modalOpen}
39
- <!-- svelte-ignore a11y_click_events_have_key_events -->
40
- <div
41
- class={['kit-overlay', $modalOpen === 'persistent' && 'kit-overlay--persistent']}
42
- onclick={() => $modalOpen !== 'persistent' && setOpenModal(false)}
43
- ></div>
44
- {/if}
71
+ <!-- svelte-ignore a11y_no_static_element_interactions -->
72
+ {#if $modalOpen}
73
+ <!-- svelte-ignore a11y_click_events_have_key_events -->
74
+ <div
75
+ class={['kit-overlay', $modalOpen === 'persistent' && 'kit-overlay--persistent']}
76
+ onclick={() => $modalOpen !== 'persistent' && setOpenModal(false)}
77
+ ></div>
78
+ {/if}
79
+ </div>
@@ -1,9 +1,4 @@
1
- import type { Snippet } from 'svelte';
2
- type $$ComponentProps = {
3
- children: Snippet;
4
- themes?: string | string[];
5
- storageKey?: string;
6
- };
7
- declare const App: import("svelte").Component<$$ComponentProps, {}, "">;
1
+ import type { AppProps } from './types.js';
2
+ declare const App: import("svelte").Component<AppProps, {}, "ref">;
8
3
  type App = ReturnType<typeof App>;
9
4
  export default App;
@@ -1,4 +1,10 @@
1
1
  import type { Snippet } from 'svelte';
2
- export interface AppProps {
2
+ import type { HTMLAttributes } from 'svelte/elements';
3
+ export interface AppProps extends HTMLAttributes<HTMLDivElement> {
4
+ ref?: HTMLDivElement;
3
5
  children?: Snippet;
6
+ themes?: string | string[];
7
+ storageKey?: string;
8
+ light?: boolean;
9
+ dark?: boolean;
4
10
  }
@@ -58,7 +58,7 @@
58
58
  }
59
59
 
60
60
  .kit-card[breakpoint]kit-card--variant-outline {
61
- --card-color: var(--base, var(--kit-label-primary));
61
+ --card-color: var(--card-background, var(--kit-label-primary));
62
62
  background-color: transparent;
63
63
  }
64
64
  .kit-card[breakpoint]kit-card--variant-outline::before {
@@ -71,7 +71,7 @@
71
71
  }
72
72
 
73
73
  .kit-card[breakpoint]kit-card--variant-text {
74
- --card-color: var(--base, var(--kit-label-primary));
74
+ --card-color: var(--card-background, var(--kit-label-primary));
75
75
  background-color: transparent;
76
76
  border: none;
77
77
  }
@@ -20,6 +20,8 @@
20
20
  color,
21
21
  background,
22
22
  noRipple,
23
+ width,
24
+ height,
23
25
  ...rest
24
26
  }: CardProps = $props();
25
27
 
@@ -58,6 +60,8 @@
58
60
  style:--card-background={assets.color(background)}
59
61
  style:--card-color={assets.color(color)}
60
62
  style:--card-shape={assets.shape(rounded)}
63
+ style:width
64
+ style:height
61
65
  >
62
66
  {@render children?.()}
63
67
  </svelte:element>
@@ -14,5 +14,7 @@ export interface CardProps extends Component {
14
14
  rounded?: string;
15
15
  color?: string;
16
16
  background?: string;
17
+ width?: string | number;
18
+ height?: string | number;
17
19
  }
18
20
  export {};
@@ -9,11 +9,11 @@
9
9
  }
10
10
 
11
11
  .kit-icon:before {
12
- color: var(--icon-color, currentColor);
12
+ color: var(--icon-color-state, var(--icon-color, currentColor)) !important;
13
13
  }
14
14
 
15
15
  .kit-icon svg {
16
- color: var(--icon-color, currentColor);
16
+ color: var(--icon-color-state, var(--icon-color, currentColor)) !important;
17
17
  }
18
18
 
19
19
  .kit-icon svg,
@@ -49,16 +49,16 @@
49
49
 
50
50
  /* state */
51
51
  .kit-icon.kit-icon--info {
52
- --base: var(--kit-accent-info);
52
+ --icon-color-state: var(--kit-accent-info);
53
53
  }
54
54
  .kit-icon.kit-icon--success {
55
- --base: var(--kit-accent-successs);
55
+ --icon-color-state: var(--kit-accent-success);
56
56
  }
57
57
  .kit-icon.kit-icon--warning {
58
- --base: var(--kit-accent-warning);
58
+ --icon-color-state: var(--kit-accent-warning);
59
59
  }
60
60
  .kit-icon.kit-icon--error {
61
- --base: var(--kit-accent-destructive);
61
+ --icon-color-state: var(--kit-accent-destructive);
62
62
  }
63
63
 
64
64
  /* disabled */
@@ -5,15 +5,30 @@
5
5
  max-height: 0px;
6
6
  opacity: var(--separator-opacity, 0.12);
7
7
  transition: inherit;
8
- border-color: var(--separator-color, var(--kit-state-shadow));
8
+ border-color: var(--separator-color, var(--kit-label-primary));
9
9
  border-style: solid;
10
10
  }
11
11
 
12
+ .kit-separator--inset:not(.kit-separator--orientation-vertical) {
13
+ max-width: calc(100% - 4.5rem);
14
+ margin-inline-start: 4.5rem;
15
+ }
16
+
17
+ .kit-separator--inset.kit-separator--orientation-vertical {
18
+ margin-bottom: 0.5rem;
19
+ margin-top: 0.5rem;
20
+ max-height: calc(100% - 1rem);
21
+ }
22
+
12
23
  .kit-separator:not(.kit-separator--orientation-vertical) {
24
+ width: 100%;
25
+ }
26
+
27
+ .kit-separator[breakpoint]kit-separator--orientation-horizontal {
13
28
  border-width: var(--separator-top-width, thin) 0 0 0;
14
29
  }
15
30
 
16
- .kit-separator--orientation-vertical {
31
+ .kit-separator[breakpoint]kit-separator--orientation-vertical {
17
32
  align-self: stretch;
18
33
  border-width: 0 thin 0 0;
19
34
  display: inline-flex;
@@ -25,18 +40,3 @@
25
40
  width: 0px;
26
41
  border-width: 0 var(--separator-right-width, thin) 0 0;
27
42
  }
28
-
29
- .kit-separator--inset:not(.kit-separator--orientation-vertical) {
30
- max-width: calc(100% - 4.5rem);
31
- margin-inline-start: 4.5rem;
32
- }
33
-
34
- .kit-separator--inset.kit-separator--orientation-vertical {
35
- margin-bottom: 0.5rem;
36
- margin-top: 0.5rem;
37
- max-height: calc(100% - 1rem);
38
- }
39
-
40
- .kit-separator:not(.kit-separator--orientation-vertical) {
41
- width: 100%;
42
- }
@@ -28,7 +28,7 @@
28
28
  orientation && assets.className('separator', 'orientation', orientation),
29
29
  rest.class
30
30
  ]}
31
- aria-orientation={orientation}
31
+ aria-orientation={typeof orientation === 'string' ? orientation : undefined}
32
32
  role="separator"
33
33
  style:--separator-color={assets.color(color)}
34
34
  style:--separator-opacity={opacity}
@@ -1,4 +1,5 @@
1
1
  import type { Base } from '../../internal/types/index.js';
2
+ type Orientation = 'horizontal' | 'vertical';
2
3
  export interface SeparatorProps extends Base {
3
4
  is?: 'div' | 'hr';
4
5
  light?: boolean;
@@ -7,5 +8,8 @@ export interface SeparatorProps extends Base {
7
8
  thickness?: string;
8
9
  opacity?: string | number;
9
10
  color?: string;
10
- orientation?: 'horizontal' | 'vertical';
11
+ orientation?: Orientation | {
12
+ [key: string]: Orientation;
13
+ };
11
14
  }
15
+ export {};
@@ -11,9 +11,6 @@
11
11
  }
12
12
 
13
13
  /* density */
14
- .kit-toolbar[breakpoint]kit-toolbar--density-default {
15
- border-radius: calc(var(--system-spacing) * 2.25);
16
- }
17
14
  .kit-toolbar[breakpoint]kit-toolbar--density-default:not([class*='toolbar--orientation-vertical']) {
18
15
  height: 3rem;
19
16
  padding-inline: calc(var(--system-spacing) * 1.5);
@@ -24,10 +21,6 @@
24
21
  padding: calc(var(--system-spacing) * 1.5) 0;
25
22
  }
26
23
 
27
- .kit-toolbar[breakpoint]kit-toolbar--density-compact {
28
- border-radius: calc(var(--system-spacing) * 1.75);
29
- }
30
-
31
24
  .kit-toolbar[breakpoint]kit-toolbar--density-compact:not([class*='toolbar--orientation-vertical']) {
32
25
  height: 2.625rem;
33
26
  padding-inline: calc(var(--system-spacing) * 0.75);
@@ -38,10 +31,6 @@
38
31
  padding: calc(var(--system-spacing) * 0.75) 0;
39
32
  }
40
33
 
41
- .kit-toolbar[breakpoint]kit-toolbar--density-comfortable {
42
- border-radius: calc(var(--system-spacing) * 3.5);
43
- }
44
-
45
34
  .kit-toolbar[breakpoint]kit-toolbar--density-comfortable:not(
46
35
  [class*='toolbar--orientation-vertical']
47
36
  ) {
@@ -27,7 +27,7 @@ export function ripple(el, options = {}) {
27
27
  options.duration = undefined;
28
28
  }
29
29
  if (options.component) {
30
- rippleContainer.style.setProperty('--system-ripple-radius', `var(--${options.component}-radius)`);
30
+ rippleContainer.style.setProperty('--system-ripple-radius', `var(--${options.component}-shape)`);
31
31
  }
32
32
  if (options.color) {
33
33
  rippleContainer.style.setProperty('--system-ripple-color', options.color);
@@ -1,6 +1,5 @@
1
- import { BROWSER } from 'esm-env';
2
1
  export function disabledScroll(state) {
3
- if (BROWSER) {
2
+ if (typeof window !== 'undefined' && typeof document !== 'undefined') {
4
3
  document.body.style.overflow = state ? 'hidden' : '';
5
4
  }
6
5
  }
@@ -2,3 +2,4 @@ export * from './breakpoints.js';
2
2
  export * from './devices.js';
3
3
  export * from './themes.js';
4
4
  export * from './components.js';
5
+ export * from './viewport.js';
@@ -2,3 +2,4 @@ export * from './breakpoints.js';
2
2
  export * from './devices.js';
3
3
  export * from './themes.js';
4
4
  export * from './components.js';
5
+ export * from './viewport.js';
@@ -0,0 +1,7 @@
1
+ export type Viewport = {
2
+ innerWidth: number;
3
+ outerWidth: number;
4
+ innerHeight: number;
5
+ outerHeight: number;
6
+ };
7
+ export declare const viewport: import("svelte/store").Writable<Viewport>;
@@ -0,0 +1,7 @@
1
+ import { writable } from 'svelte/store';
2
+ export const viewport = writable({
3
+ innerWidth: 0,
4
+ outerWidth: 0,
5
+ innerHeight: 0,
6
+ outerHeight: 0
7
+ });
@@ -0,0 +1,4 @@
1
+ declare module 'lapikit/styles' {
2
+ const styles: string;
3
+ export default styles;
4
+ }
@@ -0,0 +1,4 @@
1
+ declare module 'lapikit/themes' {
2
+ const themes: string;
3
+ export default themes;
4
+ }
package/package.json CHANGED
@@ -1,101 +1,107 @@
1
1
  {
2
- "name": "lapikit",
3
- "version": "0.0.0-insiders.e06d168",
4
- "license": "MIT",
5
- "publishConfig": {
6
- "access": "public"
7
- },
8
- "homepage": "https://lapikit.dev",
9
- "repository": {
10
- "type": "git",
11
- "url": "git+https://github.com/Nycolaide/lapikit.git",
12
- "directory": "packages/lapikit"
13
- },
14
- "scripts": {
15
- "dev": "vite dev",
16
- "build": "vite build && npm run prepack",
17
- "preview": "vite preview",
18
- "prepare": "svelte-kit sync || echo ''",
19
- "prepack": "svelte-kit sync && svelte-package && publint",
20
- "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
21
- "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
22
- "format": "prettier --write .",
23
- "lint": "prettier --check . && eslint .",
24
- "test:unit": "vitest",
25
- "test": "npm run test:unit -- --run"
26
- },
27
- "files": [
28
- "bin",
29
- "dist",
30
- "README.md",
31
- "LICENSE",
32
- "!dist/**/*.test.*",
33
- "!dist/**/*.spec.*"
34
- ],
35
- "sideEffects": [
36
- "**/*.css"
37
- ],
38
- "bin": {
39
- "lapikit": "bin/index.js"
40
- },
41
- "svelte": "./dist/index.js",
42
- "types": "./dist/index.d.ts",
43
- "type": "module",
44
- "exports": {
45
- ".": {
46
- "types": "./dist/index.d.ts",
47
- "svelte": "./dist/index.js"
48
- },
49
- "./components": {
50
- "svelte": "./dist/components/index.js",
51
- "default": "./dist/components/index.js"
52
- },
53
- "./vite": {
54
- "default": "./dist/internal/plugins/vite.js"
55
- },
56
- "./stores": {
57
- "default": "./dist/stores/index.js"
58
- },
59
- "./actions": {
60
- "default": "./dist/actions/index.js"
61
- },
62
- "./core/colors": {
63
- "default": "./dist/internal/core/standard-colors.js"
64
- },
65
- "./styles": "./dist/styles.css",
66
- "./themes": "./dist/themes.css"
67
- },
68
- "peerDependencies": {
69
- "svelte": "^5.0.0"
70
- },
71
- "devDependencies": {
72
- "@eslint/compat": "^1.2.5",
73
- "@eslint/js": "^9.18.0",
74
- "@sveltejs/adapter-auto": "^4.0.0",
75
- "@sveltejs/kit": "^2.16.0",
76
- "@sveltejs/package": "^2.0.0",
77
- "@sveltejs/vite-plugin-svelte": "^5.0.0",
78
- "@testing-library/jest-dom": "^6.6.3",
79
- "@testing-library/svelte": "^5.2.4",
80
- "eslint": "^9.18.0",
81
- "eslint-config-prettier": "^10.0.1",
82
- "eslint-plugin-svelte": "^3.0.0",
83
- "globals": "^16.0.0",
84
- "jsdom": "^26.0.0",
85
- "prettier": "^3.4.2",
86
- "prettier-plugin-svelte": "^3.3.3",
87
- "publint": "^0.3.2",
88
- "svelte": "^5.0.0",
89
- "svelte-check": "^4.0.0",
90
- "typescript": "^5.0.0",
91
- "typescript-eslint": "^8.20.0",
92
- "vite": "^6.2.5",
93
- "vitest": "^3.0.0"
94
- },
95
- "keywords": [
96
- "svelte"
97
- ],
98
- "dependencies": {
99
- "prompts": "^2.4.2"
100
- }
2
+ "name": "lapikit",
3
+ "version": "0.0.0-insiders.e3186bc",
4
+ "license": "MIT",
5
+ "publishConfig": {
6
+ "access": "public"
7
+ },
8
+ "homepage": "https://lapikit.dev",
9
+ "repository": {
10
+ "type": "git",
11
+ "url": "git+https://github.com/Nycolaide/lapikit.git",
12
+ "directory": "packages/lapikit"
13
+ },
14
+ "scripts": {
15
+ "dev": "vite dev",
16
+ "build": "vite build && npm run prepack",
17
+ "preview": "vite preview",
18
+ "prepare": "svelte-kit sync || echo ''",
19
+ "prepack": "svelte-kit sync && svelte-package && publint",
20
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
21
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
22
+ "format": "prettier --write .",
23
+ "lint": "prettier --check . && eslint .",
24
+ "test:unit": "vitest",
25
+ "test": "npm run test:unit -- --run"
26
+ },
27
+ "files": [
28
+ "bin",
29
+ "dist",
30
+ "README.md",
31
+ "LICENSE",
32
+ "!dist/**/*.test.*",
33
+ "!dist/**/*.spec.*"
34
+ ],
35
+ "sideEffects": [
36
+ "**/*.css"
37
+ ],
38
+ "bin": {
39
+ "lapikit": "bin/index.js"
40
+ },
41
+ "svelte": "./dist/index.js",
42
+ "types": "./dist/index.d.ts",
43
+ "type": "module",
44
+ "exports": {
45
+ ".": {
46
+ "types": "./dist/index.d.ts",
47
+ "svelte": "./dist/index.js"
48
+ },
49
+ "./components": {
50
+ "svelte": "./dist/components/index.js",
51
+ "default": "./dist/components/index.js"
52
+ },
53
+ "./vite": {
54
+ "default": "./dist/internal/plugins/vite.js"
55
+ },
56
+ "./stores": {
57
+ "default": "./dist/stores/index.js"
58
+ },
59
+ "./actions": {
60
+ "default": "./dist/actions/index.js"
61
+ },
62
+ "./core/colors": {
63
+ "default": "./dist/internal/core/standard-colors.js"
64
+ },
65
+ "./styles": {
66
+ "types": "./dist/styles.css.d.ts",
67
+ "default": "./dist/styles.css"
68
+ },
69
+ "./themes": {
70
+ "types": "./dist/themes.css.d.ts",
71
+ "default": "./dist/themes.css"
72
+ }
73
+ },
74
+ "peerDependencies": {
75
+ "svelte": "^5.0.0"
76
+ },
77
+ "devDependencies": {
78
+ "@eslint/compat": "^1.2.5",
79
+ "@eslint/js": "^9.18.0",
80
+ "@sveltejs/adapter-auto": "^4.0.0",
81
+ "@sveltejs/kit": "^2.16.0",
82
+ "@sveltejs/package": "^2.0.0",
83
+ "@sveltejs/vite-plugin-svelte": "^5.0.0",
84
+ "@testing-library/jest-dom": "^6.6.3",
85
+ "@testing-library/svelte": "^5.2.4",
86
+ "eslint": "^9.18.0",
87
+ "eslint-config-prettier": "^10.0.1",
88
+ "eslint-plugin-svelte": "^3.0.0",
89
+ "globals": "^16.0.0",
90
+ "jsdom": "^26.0.0",
91
+ "prettier": "^3.4.2",
92
+ "prettier-plugin-svelte": "^3.3.3",
93
+ "publint": "^0.3.2",
94
+ "svelte": "^5.0.0",
95
+ "svelte-check": "^4.0.0",
96
+ "typescript": "^5.0.0",
97
+ "typescript-eslint": "^8.20.0",
98
+ "vite": "^6.2.5",
99
+ "vitest": "^3.0.0"
100
+ },
101
+ "keywords": [
102
+ "svelte"
103
+ ],
104
+ "dependencies": {
105
+ "prompts": "^2.4.2"
106
+ }
101
107
  }
package/bin/lapikit.js DELETED
@@ -1,86 +0,0 @@
1
- #!/usr/bin/env node
2
- import { promises as fs } from 'fs';
3
- import path from 'path';
4
- import {
5
- ansi,
6
- terminal,
7
- envTypescript,
8
- getLapikitPathFromArgs,
9
- validatePluginPath
10
- } from './helper.js';
11
- import { preset } from './modules/preset.js';
12
- import { adapterCSSConfig, adapterViteConfig } from './modules/adapter.js';
13
- import { createPluginStructure, setupSvelteKitIntegration } from './modules/plugin.js';
14
-
15
- const [, , command] = process.argv;
16
- const typescriptEnabled = envTypescript();
17
-
18
- if (process.argv.includes('--help') || process.argv.includes('-h')) {
19
- terminal(
20
- 'info',
21
- `usage: ${ansi.color.yellow('npx lapikit init {cssPath} [--plugin-path {pluginPath}]')}\n\n ${ansi.variant.bold('options:')}\n
22
- - {cssPath}: (${ansi.color.cyan('src/app.css')}) customize path on your origin css file.
23
- - --plugin-path, -p: (${ansi.color.cyan('src/plugin')}) customize path for the plugin directory.\n\n`
24
- );
25
- process.exit(0);
26
- } else if (command === 'init') {
27
- console.log(' _ _ _ _ _ ');
28
- console.log(' | | (_) | (_) | ');
29
- console.log(' | | __ _ _ __ _| | ___| |_ ');
30
- console.log(" | | / _` | '_ \\| | |/ / | __|");
31
- console.log(' | |___| (_| | |_) | | <| | |_ ');
32
- console.log(' |______\\__,_| .__/|_|_|\\_\\_|\\__|');
33
- console.log(' | | ');
34
- console.log(' |_| \n');
35
-
36
- terminal('none', `${ansi.bold.blue('LAPIKIT')} - Component Library for Svelte\n\n`);
37
-
38
- // Get Path
39
- const pluginPath = getLapikitPathFromArgs();
40
- const pathValidation = validatePluginPath(pluginPath);
41
-
42
- if (!pathValidation.valid) {
43
- terminal('error', `Invalid path: ${pathValidation.error}`);
44
- process.exit(1);
45
- }
46
-
47
- const configPath = path.resolve(process.cwd(), 'lapikit.config.js');
48
- try {
49
- await fs.writeFile(configPath, preset.trim() + '\n', 'utf8');
50
- terminal('success', `has create lapikit.config.js on your project.`);
51
- } catch (error) {
52
- terminal('error', `failed to create configuration file:\n\n ${error}`);
53
- terminal(
54
- 'warn',
55
- `you can create lapikit.config.js manually, please visite https://lapikit.dev/docs/getting-started for more information`
56
- );
57
- }
58
-
59
- // Create plugin structure
60
- try {
61
- await createPluginStructure(pluginPath, typescriptEnabled);
62
- } catch (error) {
63
- terminal('error', `Create plugin structure not working : ${error.message}`);
64
- }
65
-
66
- // Setup SvelteKit integration
67
- try {
68
- await setupSvelteKitIntegration(pluginPath, typescriptEnabled);
69
- } catch (error) {
70
- terminal('error', `SvelteKit integration setup failed: ${error.message}`);
71
- }
72
-
73
- await adapterViteConfig(typescriptEnabled);
74
- await adapterCSSConfig();
75
-
76
- terminal(
77
- 'info',
78
- `${ansi.bold.blue('Thank to use lapikit, discover all posibility with lapikit on https://lapikit.dev')}\n\n`
79
- );
80
-
81
- console.log('Website: https://lapikit.dev');
82
- console.log('Github: https://github.com/nycolaide/lapikit');
83
- console.log('Support the developement: https://buymeacoffee.com/nycolaide');
84
- } else {
85
- terminal('error', `Command not recognized. Try 'npx lapikit -h'`);
86
- }
package/bin/legacy.js DELETED
@@ -1,34 +0,0 @@
1
- #!/usr/bin/env node
2
- import { promises as fs } from 'fs';
3
- import path from 'path';
4
- import { preset } from './modules/preset.js';
5
- import { ansi, terminal, envTypescript } from './helper.js';
6
- import { adapterCSSConfig, adapterViteConfig } from './modules/adapter.js';
7
-
8
- export async function legacyConfiguration(options) {
9
- const typescriptEnabled = envTypescript();
10
- const configPath = path.resolve(process.cwd(), 'lapikit.config.js');
11
-
12
- try {
13
- await fs.writeFile(configPath, preset.trim() + '\n', 'utf8');
14
- terminal('success', `has create lapikit.config.js on your project.`);
15
- } catch (error) {
16
- terminal('error', `failed to create configuration file:\n\n ${error}`);
17
- terminal(
18
- 'warn',
19
- `you can create lapikit.config.js manually, please visite https://lapikit.dev/docs/getting-started for more information`
20
- );
21
- }
22
-
23
- await adapterViteConfig(typescriptEnabled);
24
- await adapterCSSConfig(options);
25
-
26
- terminal(
27
- 'info',
28
- `${ansi.bold.blue('Thank to use lapikit, discover all posibility with lapikit on https://lapikit.dev')}\n\n`
29
- );
30
-
31
- console.log('Website: https://lapikit.dev');
32
- console.log('Github: https://github.com/nycolaide/lapikit');
33
- console.log('Support the developement: https://buymeacoffee.com/nycolaide');
34
- }
@@ -1,52 +0,0 @@
1
- import { promises as fs } from 'fs';
2
- import path from 'path';
3
- import { terminal } from '../helper.js';
4
-
5
- const importLapikitVite = `import { lapikit } from 'lapikit/vite';`;
6
- const importLapikitCss = `@import 'lapikit/css';`;
7
-
8
- export async function adapterViteConfig(typescript) {
9
- const viteConfigPath = path.resolve(process.cwd(), `vite.config.${typescript ? 'ts' : 'js'}`);
10
- try {
11
- let viteConfig = await fs.readFile(viteConfigPath, 'utf8');
12
-
13
- if (!viteConfig.includes(`${importLapikitVite}`))
14
- viteConfig = `${importLapikitVite}\n` + viteConfig;
15
-
16
- const pluginsRegex = /plugins:\s*\[([^\]]*)\]/;
17
- const match = viteConfig.match(pluginsRegex);
18
-
19
- if (match && !match[1].includes('lapikit()')) {
20
- const updatedPlugins = match[1].trim() ? `${match[1].trim()}, lapikit()` : `lapikit()`;
21
-
22
- viteConfig = viteConfig.replace(pluginsRegex, `plugins: [${updatedPlugins}]`);
23
- }
24
-
25
- await fs.writeFile(viteConfigPath, viteConfig, 'utf8');
26
-
27
- terminal('success', 'lapikit() has added on vite.config.(js|ts) successfully');
28
- } catch (error) {
29
- terminal(
30
- 'error',
31
- `lapikit() encountered a problem while editing vite.config.(js|ts):\n ${error}.\n\n`
32
- );
33
- }
34
- }
35
-
36
- export async function adapterCSSConfig(options) {
37
- const cssPath = options?.pathCSS || 'src/app.css';
38
- const resolvedPath = path.resolve(process.cwd(), cssPath);
39
- try {
40
- await fs.access(resolvedPath);
41
- let appCssContent = await fs.readFile(resolvedPath, 'utf8');
42
- appCssContent = `${importLapikitCss}\n\n` + appCssContent;
43
- await fs.writeFile(resolvedPath, appCssContent, 'utf8');
44
-
45
- terminal('success', `lapikit/css has added on ${cssPath}.`);
46
- } catch (error) {
47
- terminal(
48
- 'error',
49
- `lapikit/css encountered a problem while editing ${cssPath}:\n ${error.message}.\n\n`
50
- );
51
- }
52
- }
@@ -1,223 +0,0 @@
1
- import { promises as fs } from 'fs';
2
- import path from 'path';
3
- import { terminal } from '../helper.js';
4
-
5
- const lapikitTsTemplate = `import type { Config } from 'lapikit';
6
-
7
- /**
8
- * Custom configuration for Lapikit
9
- * @see https://lapikit.dev/docs/customize
10
- */
11
- const config: Config = {
12
- theme: {
13
- colorScheme: 'light',
14
- colors: {
15
- primary: '#3b82f6',
16
- secondary: '#6b7280'
17
- }
18
- }
19
- };
20
-
21
- export default config;
22
- `;
23
-
24
- const lapikitJsTemplate = `/**
25
- * Custom configuration for Lapikit
26
- * @see https://lapikit.dev/docs/customize
27
- * @type {import('lapikit').Config}
28
- */
29
- const config = {
30
- theme: {
31
- colorScheme: 'light',
32
- colors: {
33
- primary: '#3b82f6',
34
- secondary: '#6b7280'
35
- }
36
- }
37
- };
38
-
39
- export default config;
40
- `;
41
-
42
- export async function createPluginStructure(pluginPath, isTypescript) {
43
- const resolvedPluginPath = path.resolve(process.cwd(), pluginPath);
44
- const lapikitFileName = isTypescript ? 'lapikit.ts' : 'lapikit.js';
45
- const lapikitFilePath = path.join(resolvedPluginPath, lapikitFileName);
46
-
47
- try {
48
- // Verify plugin directory
49
- try {
50
- await fs.access(resolvedPluginPath);
51
- terminal('info', `The folder ${pluginPath} already exists.`);
52
- } catch {
53
- await fs.mkdir(resolvedPluginPath, { recursive: true });
54
- terminal('success', `Folder ${pluginPath} created successfully.`);
55
- }
56
-
57
- // Create lapikit.ts or lapikit.js
58
- const template = isTypescript ? lapikitTsTemplate : lapikitJsTemplate;
59
- await fs.writeFile(lapikitFilePath, template.trim() + '\n', 'utf8');
60
-
61
- terminal('success', `File ${lapikitFileName} created in ${pluginPath}.`);
62
- } catch (error) {
63
- terminal('error', `Error creating plugin structure: ${error.message}`);
64
- throw error;
65
- }
66
- }
67
-
68
- export async function setupSvelteKitIntegration(pluginPath, isTypescript) {
69
- const srcRoutesPath = path.resolve(process.cwd(), 'src/routes');
70
-
71
- try {
72
- // Check if the src/routes directory exists
73
- await fs.access(srcRoutesPath);
74
- terminal('info', 'Folder src/routes found, configuring SvelteKit...');
75
- } catch {
76
- terminal('info', 'Folder src/routes not found, no SvelteKit configuration needed.');
77
- return;
78
- }
79
-
80
- const layoutPath = path.join(srcRoutesPath, '+layout.svelte');
81
- const pagePath = path.join(srcRoutesPath, '+page.svelte');
82
-
83
- let targetFile = null;
84
- let targetFileName = '';
85
-
86
- try {
87
- await fs.access(layoutPath);
88
- targetFile = layoutPath;
89
- targetFileName = '+layout.svelte';
90
- } catch {
91
- try {
92
- await fs.access(pagePath);
93
- targetFile = pagePath;
94
- targetFileName = '+page.svelte';
95
- } catch {
96
- terminal('warn', 'No +layout.svelte or +page.svelte file found in src/routes.');
97
- return;
98
- }
99
- }
100
-
101
- // Read content
102
- let fileContent = await fs.readFile(targetFile, 'utf8');
103
-
104
- // Get Path
105
- const relativePath = path.relative(
106
- path.dirname(targetFile),
107
- path.resolve(process.cwd(), pluginPath)
108
- );
109
- const lapikitFileName = isTypescript ? 'lapikit' : 'lapikit.js';
110
- const configImportPath = `${relativePath}/${lapikitFileName}`.replace(/\\/g, '/');
111
-
112
- // Imports
113
- const createLapikitImport = `\n\timport { createLapikit } from 'lapikit';`;
114
- const configImport = `\timport config from '${configImportPath}';`;
115
-
116
- const scriptLang = isTypescript ? ' lang="ts"' : '';
117
- const effectCode = `\n\t$effect.pre(() => {\n\t\tcreateLapikit(config);\n\t});`;
118
-
119
- // search balise
120
- const scriptRegex = /<script(\s+lang="ts")?>([\s\S]*?)<\/script>/;
121
- const scriptMatch = fileContent.match(scriptRegex);
122
-
123
- if (scriptMatch) {
124
- // If have script balise , add import
125
- let scriptContent = scriptMatch[2];
126
-
127
- // Add imports if they don't already exist
128
- if (!scriptContent.includes('createLapikit')) {
129
- scriptContent = `${createLapikitImport}\n${configImport}\n${scriptContent}`;
130
- }
131
-
132
- // Add effect
133
- if (!scriptContent.includes('createLapikit(config)')) {
134
- scriptContent += effectCode;
135
- }
136
-
137
- // Replace script balise
138
- const newScript = `<script${scriptMatch[1] || scriptLang}>${scriptContent}\n</script>`;
139
- fileContent = fileContent.replace(scriptRegex, newScript);
140
- } else {
141
- // If no script tag exists, create one
142
- const newScript = `<script${scriptLang}>\n${createLapikitImport}\n${configImport}${effectCode}\n</script>\n\n`;
143
- fileContent = newScript + fileContent;
144
- }
145
-
146
- // Write the modified file
147
- await fs.writeFile(targetFile, fileContent, 'utf8');
148
- terminal('success', `Config added ${targetFileName}.`);
149
- }
150
-
151
- const [, , command] = process.argv;
152
- const typescriptEnabled = envTypescript();
153
- const args = process.argv.slice(2);
154
- const previewMode = args.includes('--preview');
155
-
156
- if (process.argv.includes('--help') || process.argv.includes('-h')) {
157
- terminal(
158
- 'info',
159
- `usage: ${ansi.color.yellow('npx lapikit init {cssPath} [--plugin-path {pluginPath}] [--preview]')}\n\n ${ansi.variant.bold('options:')}\n
160
- - {cssPath}: (${ansi.color.cyan('src/app.css')}) customize path on your origin css file.
161
- - --plugin-path, -p: (${ansi.color.cyan('src/plugin')}) customize path for the plugin directory.
162
- - --preview: active preview mode (plugin + SvelteKit integration)\n\n`
163
- );
164
- process.exit(0);
165
- } else if (command === 'init') {
166
- console.log(' _ _ _ _ _ ');
167
- console.log(' | | (_) | (_) | ');
168
- console.log(' | | __ _ _ __ _| | ___| |_ ');
169
- console.log(" | | / _` | '_ \\| | |/ / | __|");
170
- console.log(' | |___| (_| | |_) | | <| | |_ ');
171
- console.log(' |______\\__,_| .__/|_|_|\\_\\_|\\__|');
172
- console.log(' | | ');
173
- console.log(' |_| \n');
174
-
175
- terminal('none', `${ansi.bold.blue('LAPIKIT')} - Component Library for Svelte\n\n`);
176
-
177
- if (previewMode) {
178
- // Mode preview
179
- const pluginPath = getLapikitPathFromArgs();
180
- const pathValidation = validatePluginPath(pluginPath);
181
- if (!pathValidation.valid) {
182
- terminal('error', `Invalid path: ${pathValidation.error}`);
183
- process.exit(1);
184
- }
185
- try {
186
- await createPluginStructure(pluginPath, typescriptEnabled);
187
- } catch (error) {
188
- terminal('error', `Create plugin structure not working : ${error.message}`);
189
- }
190
- try {
191
- await setupSvelteKitIntegration(pluginPath, typescriptEnabled);
192
- } catch (error) {
193
- terminal('error', `SvelteKit integration setup failed: ${error.message}`);
194
- }
195
- } else {
196
- // Mode classic
197
- const configPath = path.resolve(process.cwd(), 'lapikit.config.js');
198
- try {
199
- await fs.writeFile(configPath, preset.trim() + '\n', 'utf8');
200
- terminal('success', `has create lapikit.config.js on your project.`);
201
- } catch (error) {
202
- terminal('error', `failed to create configuration file:\n\n ${error}`);
203
- terminal(
204
- 'warn',
205
- `you can create lapikit.config.js manually, please visite https://lapikit.dev/docs/getting-started for more information`
206
- );
207
- }
208
- await adapterCSSConfig();
209
- }
210
-
211
- await adapterViteConfig(typescriptEnabled);
212
-
213
- terminal(
214
- 'info',
215
- `${ansi.bold.blue('Thank to use lapikit, discover all posibility with lapikit on https://lapikit.dev')}\n\n`
216
- );
217
-
218
- console.log('Website: https://lapikit.dev');
219
- console.log('Github: https://github.com/nycolaide/lapikit');
220
- console.log('Support the developement: https://buymeacoffee.com/nycolaide');
221
- } else {
222
- terminal('error', `Command not recognized. Try 'npx lapikit -h'`);
223
- }
@@ -1,11 +0,0 @@
1
- export const preset = `
2
- /** @type {import('lapikit').Config} */
3
- export default {
4
- theme: {
5
- colorScheme: 'light',
6
- colors: {
7
- svelte: '#ff3e00'
8
- }
9
- }
10
- };
11
- `;