lapikit 0.0.0-insiders.361b022 → 0.0.0-insiders.633c010
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/LICENSE +21 -0
- package/bin/helper.js +74 -0
- package/bin/lapikit.js +54 -0
- package/bin/modules/adapter.js +52 -0
- package/bin/modules/preset.js +11 -0
- package/dist/components/app/app.svelte +18 -0
- package/dist/components/app/app.svelte.d.ts +4 -0
- package/dist/components/app/types.d.ts +4 -0
- package/dist/components/app/types.js +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +2 -0
- package/dist/{server/modules → internal}/ansi.d.ts +0 -1
- package/dist/{server/modules → internal}/ansi.js +0 -11
- package/dist/{server/modules → internal}/colors.js +1 -1
- package/dist/internal/index.d.ts +2 -0
- package/dist/internal/index.js +2 -0
- package/dist/internal/terminal.d.ts +1 -0
- package/dist/internal/terminal.js +12 -0
- package/dist/internal/types.d.ts +57 -0
- package/dist/internal/types.js +1 -0
- package/dist/plugin/modules/config.d.ts +2 -0
- package/dist/plugin/modules/config.js +54 -0
- package/dist/plugin/modules/importer.js +15 -0
- package/dist/{server/vite.d.ts → plugin/vitejs.d.ts} +1 -6
- package/dist/plugin/vitejs.js +26 -0
- package/dist/preset.d.ts +2 -0
- package/dist/preset.js +80 -0
- package/dist/stores/index.d.ts +4 -0
- package/dist/stores/index.js +23 -0
- package/dist/style/css.d.ts +2 -0
- package/dist/style/css.js +31 -0
- package/dist/{styles → style}/normalize.css +2 -2
- package/dist/style/parser/color.d.ts +5 -0
- package/dist/{server/modules/themes.js → style/parser/color.js} +14 -31
- package/dist/style/parser/component.d.ts +2 -0
- package/dist/style/parser/component.js +115 -0
- package/dist/style/parser/device.d.ts +2 -0
- package/dist/style/parser/device.js +28 -0
- package/dist/style/parser/index.d.ts +4 -0
- package/dist/style/parser/index.js +4 -0
- package/dist/style/parser/variable.d.ts +2 -0
- package/dist/style/parser/variable.js +25 -0
- package/package.json +18 -5
- package/dist/server/modules/css.d.ts +0 -1
- package/dist/server/modules/css.js +0 -144
- package/dist/server/modules/devices.d.ts +0 -1
- package/dist/server/modules/devices.js +0 -43
- package/dist/server/modules/importer.js +0 -13
- package/dist/server/modules/themes.d.ts +0 -4
- package/dist/server/vite.js +0 -17
- package/dist/styles/variables.css +0 -7
- /package/dist/{server/modules → internal}/colors.d.ts +0 -0
- /package/dist/{server/modules → internal}/minify.d.ts +0 -0
- /package/dist/{server/modules → internal}/minify.js +0 -0
- /package/dist/{server → plugin}/modules/importer.d.ts +0 -0
- /package/dist/{server/modules → utils}/x11.d.ts +0 -0
- /package/dist/{server/modules → utils}/x11.js +0 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) Nycolaide <https://github.com/Nycolaide>.
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/bin/helper.js
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
const color = {
|
|
2
|
+
red: (text) => `\x1b[31m${text}\x1b[0m`,
|
|
3
|
+
green: (text) => `\x1b[32m${text}\x1b[0m`,
|
|
4
|
+
yellow: (text) => `\x1b[33m${text}\x1b[0m`,
|
|
5
|
+
blue: (text) => `\x1b[34m${text}\x1b[0m`,
|
|
6
|
+
purple: (text) => `\x1b[35m${text}\x1b[0m`,
|
|
7
|
+
cyan: (text) => `\x1b[36m${text}\x1b[0m`
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
const variant = {
|
|
11
|
+
bold: (text) => `\x1b[1m${text}\x1b[0m`,
|
|
12
|
+
underline: (text) => `\x1b[4m${text}\x1b[0m`,
|
|
13
|
+
inverse: (text) => `\x1b[7m${text}\x1b[0m`
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
const bold = {
|
|
17
|
+
red: (text) => `\x1b[1m\x1b[31m${text}\x1b[0m`,
|
|
18
|
+
green: (text) => `\x1b[1m\x1b[32m${text}\x1b[0m`,
|
|
19
|
+
yellow: (text) => `\x1b[1m\x1b[33m${text}\x1b[0m`,
|
|
20
|
+
blue: (text) => `\x1b[1m\x1b[34m${text}\x1b[0m`,
|
|
21
|
+
purple: (text) => `\x1b[1m\x1b[35m${text}\x1b[0m`,
|
|
22
|
+
cyan: (text) => `\x1b[1m\x1b[36m${text}\x1b[0m`
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
const inverse = {
|
|
26
|
+
red: (text) => `\x1b[7m\x1b[31m${text}\x1b[0m`,
|
|
27
|
+
green: (text) => `\x1b[7m\x1b[32m${text}\x1b[0m`,
|
|
28
|
+
yellow: (text) => `\x1b[7m\x1b[33m${text}\x1b[0m`,
|
|
29
|
+
blue: (text) => `\x1b[7m\x1b[34m${text}\x1b[0m`,
|
|
30
|
+
purple: (text) => `\x1b[7m\x1b[35m${text}\x1b[0m`,
|
|
31
|
+
cyan: (text) => `\x1b[7m\x1b[36m${text}\x1b[0m`
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
const underline = {
|
|
35
|
+
red: (text) => `\x1b[4m\x1b[31m${text}\x1b[0m`,
|
|
36
|
+
green: (text) => `\x1b[4m\x1b[32m${text}\x1b[0m`,
|
|
37
|
+
yellow: (text) => `\x1b[4m\x1b[33m${text}\x1b[0m`,
|
|
38
|
+
blue: (text) => `\x1b[4m\x1b[34m${text}\x1b[0m`,
|
|
39
|
+
purple: (text) => `\x1b[4m\x1b[35m${text}\x1b[0m`,
|
|
40
|
+
cyan: (text) => `\x1b[4m\x1b[36m${text}\x1b[0m`
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
export const ansi = {
|
|
44
|
+
color,
|
|
45
|
+
variant,
|
|
46
|
+
bold,
|
|
47
|
+
inverse,
|
|
48
|
+
underline
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
export const terminal = (type = 'info', msg) => {
|
|
52
|
+
const name = ansi.color.cyan('lapikit');
|
|
53
|
+
|
|
54
|
+
if (type === 'error') console.error(name, ansi.bold.red('[error]'), msg);
|
|
55
|
+
else if (type === 'warn') console.warn(name, ansi.bold.yellow('[warn]'), msg);
|
|
56
|
+
else if (type === 'success') console.warn(name, ansi.bold.green('[success]'), msg);
|
|
57
|
+
else if (type === 'none') console.log(msg);
|
|
58
|
+
else console.log(name, ansi.bold.blue('[info]'), msg);
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
export function getCssPathFromArgs() {
|
|
62
|
+
const args = process.argv.slice(2);
|
|
63
|
+
return args[1] || 'src/app.css';
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
export async function envTypescript() {
|
|
67
|
+
const directory = process.cwd();
|
|
68
|
+
try {
|
|
69
|
+
await fs.readFile(path.resolve(directory, 'tsconfig.json'), 'utf-8');
|
|
70
|
+
return true;
|
|
71
|
+
} catch {
|
|
72
|
+
return false;
|
|
73
|
+
}
|
|
74
|
+
}
|
package/bin/lapikit.js
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
import { promises as fs } from 'fs';
|
|
3
|
+
import path from 'path';
|
|
4
|
+
import { ansi, terminal, envTypescript } from './helper.js';
|
|
5
|
+
import { preset } from './modules/preset.js';
|
|
6
|
+
import { adapterCSSConfig, adapterViteConfig } from './modules/adapter.js';
|
|
7
|
+
|
|
8
|
+
const [, , command] = process.argv;
|
|
9
|
+
const typescriptEnabled = envTypescript();
|
|
10
|
+
|
|
11
|
+
if (process.argv.includes('--help') || process.argv.includes('-h')) {
|
|
12
|
+
terminal(
|
|
13
|
+
'info',
|
|
14
|
+
`usage: ${ansi.color.yellow('npx lapikit init {cssPath}')}\n\n ${ansi.variant.bold('options:')}\n
|
|
15
|
+
- {cssPath}: (${ansi.color.cyan('src/app.css')}) customize path on your origin css file.\n\n`
|
|
16
|
+
);
|
|
17
|
+
process.exit(0);
|
|
18
|
+
} else if (command === 'init') {
|
|
19
|
+
console.log(' _ _ _ _ _ ');
|
|
20
|
+
console.log(' | | (_) | (_) | ');
|
|
21
|
+
console.log(' | | __ _ _ __ _| | ___| |_ ');
|
|
22
|
+
console.log(" | | / _` | '_ \\| | |/ / | __|");
|
|
23
|
+
console.log(' | |___| (_| | |_) | | <| | |_ ');
|
|
24
|
+
console.log(' |______\\__,_| .__/|_|_|\\_\\_|\\__|');
|
|
25
|
+
console.log(' | | ');
|
|
26
|
+
console.log(' |_| \n');
|
|
27
|
+
|
|
28
|
+
terminal('none', `${ansi.bold.blue('LAPIKIT')} - Component Library for Svelte\n\n`);
|
|
29
|
+
|
|
30
|
+
const configPath = path.resolve(process.cwd(), 'lapikit.config.js');
|
|
31
|
+
try {
|
|
32
|
+
await fs.writeFile(configPath, preset.trim() + '\n', 'utf8');
|
|
33
|
+
terminal('success', `has create lapikit.config.js on your project.`);
|
|
34
|
+
} catch (error) {
|
|
35
|
+
terminal('error', `failed to create configuration file:\n\n ${error}`);
|
|
36
|
+
terminal(
|
|
37
|
+
'warn',
|
|
38
|
+
`you can create lapikit.config.js manually, please visite https://localhost:3000/docs for more information`
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
await adapterViteConfig(typescriptEnabled);
|
|
43
|
+
await adapterCSSConfig();
|
|
44
|
+
|
|
45
|
+
terminal(
|
|
46
|
+
'info',
|
|
47
|
+
`${ansi.bold.blue('Thank to use lapikit, discover all posibility with lapikit on https://localhost:3000/docs')}\n\n`
|
|
48
|
+
);
|
|
49
|
+
|
|
50
|
+
console.log('Github: https://github.com/nycolaide/lapikit');
|
|
51
|
+
console.log('Support the developement: https://buymeacoffee.com/nycolaide');
|
|
52
|
+
} else {
|
|
53
|
+
terminal('error', `Command not recognized. Try 'npx lapikit -h'`);
|
|
54
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { promises as fs } from 'fs';
|
|
2
|
+
import path from 'path';
|
|
3
|
+
import { getCssPathFromArgs, 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() {
|
|
37
|
+
const cssPath = getCssPathFromArgs();
|
|
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
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { BROWSER } from 'esm-env';
|
|
3
|
+
import type { AppProps } from './types.js';
|
|
4
|
+
import { updateThemeStore } from '../../stores/index.js';
|
|
5
|
+
let { children, ...rest }: AppProps = $props();
|
|
6
|
+
|
|
7
|
+
$effect.pre(() => {
|
|
8
|
+
if (!BROWSER) return;
|
|
9
|
+
const local = localStorage.getItem('@lapikit/theme');
|
|
10
|
+
console.log('DARKMODE local', local);
|
|
11
|
+
if (local !== null) updateThemeStore(local as 'dark' | 'light' | 'auto');
|
|
12
|
+
});
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
<p>application</p>
|
|
16
|
+
<div {...rest}>
|
|
17
|
+
{@render children?.()}
|
|
18
|
+
</div>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as App } from './app/app.svelte';
|
|
@@ -42,14 +42,3 @@ export const ansi = {
|
|
|
42
42
|
inverse,
|
|
43
43
|
underline
|
|
44
44
|
};
|
|
45
|
-
export const sendConsole = (type = 'info', msg) => {
|
|
46
|
-
const name = ansi.color.cyan('lapikit');
|
|
47
|
-
if (type === 'error')
|
|
48
|
-
console.error(name, ansi.bold.red('[error]'), msg);
|
|
49
|
-
else if (type === 'warn')
|
|
50
|
-
console.warn(name, ansi.bold.yellow('[warn]'), msg);
|
|
51
|
-
else if (type === 'success')
|
|
52
|
-
console.warn(name, ansi.bold.green('[success]'), msg);
|
|
53
|
-
else
|
|
54
|
-
console.log(name, ansi.bold.blue('[info]'), msg);
|
|
55
|
-
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const terminal: (type: "info" | "error" | "warn" | "success" | undefined, msg: string) => void;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ansi } from './ansi.js';
|
|
2
|
+
export const terminal = (type = 'info', msg) => {
|
|
3
|
+
const name = ansi.color.cyan('lapikit');
|
|
4
|
+
if (type === 'error')
|
|
5
|
+
console.error(name, ansi.bold.red('[error]'), msg);
|
|
6
|
+
else if (type === 'warn')
|
|
7
|
+
console.warn(name, ansi.bold.yellow('[warn]'), msg);
|
|
8
|
+
else if (type === 'success')
|
|
9
|
+
console.warn(name, ansi.bold.green('[success]'), msg);
|
|
10
|
+
else
|
|
11
|
+
console.log(name, ansi.bold.blue('[info]'), msg);
|
|
12
|
+
};
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
type IdElementType = string | undefined;
|
|
3
|
+
type ClassNameType = string | string[] | undefined;
|
|
4
|
+
type StylePropertiesType = string | undefined;
|
|
5
|
+
export interface Base {
|
|
6
|
+
id?: IdElementType;
|
|
7
|
+
class?: ClassNameType;
|
|
8
|
+
style?: StylePropertiesType;
|
|
9
|
+
[key: string]: any;
|
|
10
|
+
}
|
|
11
|
+
export interface Component extends Base {
|
|
12
|
+
children?: Snippet;
|
|
13
|
+
}
|
|
14
|
+
export type FontFamily = {
|
|
15
|
+
[key: string]: string | string[];
|
|
16
|
+
};
|
|
17
|
+
export type Colors = {
|
|
18
|
+
[key: string]: {
|
|
19
|
+
light: string;
|
|
20
|
+
dark: string;
|
|
21
|
+
} | string;
|
|
22
|
+
};
|
|
23
|
+
export type Thresholds = {
|
|
24
|
+
[key: string]: number | string;
|
|
25
|
+
};
|
|
26
|
+
export type Radius = {
|
|
27
|
+
[key: string]: number | string;
|
|
28
|
+
};
|
|
29
|
+
export interface Lapikit {
|
|
30
|
+
options: {
|
|
31
|
+
normalize: boolean;
|
|
32
|
+
minify: boolean;
|
|
33
|
+
};
|
|
34
|
+
theme: {
|
|
35
|
+
colorScheme: string;
|
|
36
|
+
colors: Colors;
|
|
37
|
+
};
|
|
38
|
+
breakpoints: {
|
|
39
|
+
mobileBreakpoint: string;
|
|
40
|
+
tabletBreakpoint: string;
|
|
41
|
+
laptopBreakpoint: string;
|
|
42
|
+
thresholds: Thresholds;
|
|
43
|
+
};
|
|
44
|
+
styles: {
|
|
45
|
+
spacing: string;
|
|
46
|
+
corner: {
|
|
47
|
+
active: boolean;
|
|
48
|
+
radius: Radius;
|
|
49
|
+
};
|
|
50
|
+
font: FontFamily;
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
type DeepOptional<T> = {
|
|
54
|
+
[P in keyof T]?: T[P] extends (infer U)[] ? DeepOptional<U>[] : T[P] extends object ? DeepOptional<T[P]> : T[P];
|
|
55
|
+
};
|
|
56
|
+
export type LapikitConfig = DeepOptional<Lapikit>;
|
|
57
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { config } from '../../preset.js';
|
|
2
|
+
export const parseConfig = (props) => {
|
|
3
|
+
if (!props)
|
|
4
|
+
return config;
|
|
5
|
+
const newConfig = { ...config };
|
|
6
|
+
if (props?.options) {
|
|
7
|
+
if (props.options.normalize !== undefined)
|
|
8
|
+
newConfig.options.normalize = props.options.normalize;
|
|
9
|
+
if (props.options.minify !== undefined)
|
|
10
|
+
newConfig.options.minify = props.options.minify;
|
|
11
|
+
}
|
|
12
|
+
if (props?.theme) {
|
|
13
|
+
if (props.theme.colorScheme !== undefined)
|
|
14
|
+
newConfig.theme.colorScheme = props.theme.colorScheme;
|
|
15
|
+
if (props.theme.colors) {
|
|
16
|
+
newConfig.theme.colors = {
|
|
17
|
+
...newConfig.theme.colors,
|
|
18
|
+
...props.theme.colors
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
if (props?.breakpoints) {
|
|
23
|
+
if (props.breakpoints.mobileBreakpoint !== undefined)
|
|
24
|
+
newConfig.breakpoints.mobileBreakpoint = props.breakpoints.mobileBreakpoint;
|
|
25
|
+
if (props.breakpoints.tabletBreakpoint !== undefined)
|
|
26
|
+
newConfig.breakpoints.tabletBreakpoint = props.breakpoints.tabletBreakpoint;
|
|
27
|
+
if (props.breakpoints.laptopBreakpoint !== undefined)
|
|
28
|
+
newConfig.breakpoints.laptopBreakpoint = props.breakpoints.laptopBreakpoint;
|
|
29
|
+
if (props.breakpoints.thresholds)
|
|
30
|
+
newConfig.breakpoints.thresholds = {
|
|
31
|
+
...newConfig.breakpoints.thresholds,
|
|
32
|
+
...props.breakpoints.thresholds
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
if (props?.styles) {
|
|
36
|
+
if (props.styles.spacing !== undefined)
|
|
37
|
+
newConfig.styles.spacing = props.styles.spacing;
|
|
38
|
+
if (props.styles.corner !== undefined) {
|
|
39
|
+
if (props.styles.corner.active !== undefined)
|
|
40
|
+
newConfig.styles.corner.active = props.styles.corner.active;
|
|
41
|
+
if (props.styles.corner.radius)
|
|
42
|
+
newConfig.styles.corner.radius = {
|
|
43
|
+
...newConfig.styles.corner.radius,
|
|
44
|
+
...props.styles.corner.radius
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
if (props.styles.font)
|
|
48
|
+
newConfig.styles.font = {
|
|
49
|
+
...newConfig.styles.font,
|
|
50
|
+
...props.styles.font
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
return newConfig;
|
|
54
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import path from 'path';
|
|
2
|
+
import fs from 'fs';
|
|
3
|
+
import { terminal, ansi } from '../../internal/index.js';
|
|
4
|
+
const app = process.cwd();
|
|
5
|
+
const pathConfig = path.resolve(app, 'lapikit.config.js');
|
|
6
|
+
export const importer = async () => {
|
|
7
|
+
if (!fs.existsSync(pathConfig)) {
|
|
8
|
+
terminal('error', `config file not found\n ${ansi.color.yellow('Could not find lapikit.config.js. See https://localhost/docs/kit/vite to learn more about the configuration file.')}\n\n${ansi.color.blue('for initializing a new lapikit config, run:')}\n ${ansi.variant.bold('npx lapikit init')} ${ansi.bold.yellow('(preview)')}\n\n`);
|
|
9
|
+
process.exit(1);
|
|
10
|
+
}
|
|
11
|
+
const timestamp = Date.now();
|
|
12
|
+
const fileUrl = `file://${pathConfig}?t=${timestamp}`;
|
|
13
|
+
const content = await import(fileUrl);
|
|
14
|
+
return content.default;
|
|
15
|
+
};
|
|
@@ -1,11 +1,6 @@
|
|
|
1
1
|
import type { ViteDevServer } from 'vite';
|
|
2
|
-
|
|
3
|
-
normalize?: boolean;
|
|
4
|
-
minify?: boolean;
|
|
5
|
-
}
|
|
6
|
-
export declare function lapikit(options?: LapikitPlugin): Promise<{
|
|
2
|
+
export declare function lapikit(): Promise<{
|
|
7
3
|
name: string;
|
|
8
4
|
configResolved(): Promise<void>;
|
|
9
5
|
configureServer(server: ViteDevServer): Promise<void>;
|
|
10
6
|
}>;
|
|
11
|
-
export {};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { importer } from './modules/importer.js';
|
|
2
|
+
import { processCSS } from '../style/css.js';
|
|
3
|
+
import { parseConfig } from './modules/config.js';
|
|
4
|
+
import { terminal } from '../internal/terminal.js';
|
|
5
|
+
export async function lapikit() {
|
|
6
|
+
return {
|
|
7
|
+
name: 'lapikit/vite.js',
|
|
8
|
+
async configResolved() {
|
|
9
|
+
const config = await importer();
|
|
10
|
+
const result = await parseConfig(config);
|
|
11
|
+
await processCSS(result);
|
|
12
|
+
terminal('info', 'lapikit is up!');
|
|
13
|
+
},
|
|
14
|
+
async configureServer(server) {
|
|
15
|
+
server.watcher.add('./lapikit.config.js');
|
|
16
|
+
server.watcher.on('change', async (filePath) => {
|
|
17
|
+
if (String(filePath).includes('lapikit.config.js')) {
|
|
18
|
+
const config = await importer();
|
|
19
|
+
const result = await parseConfig(config);
|
|
20
|
+
await processCSS(result);
|
|
21
|
+
terminal('info', 'lapikit config reloaded');
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
}
|
package/dist/preset.d.ts
ADDED
package/dist/preset.js
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
export const config = {
|
|
2
|
+
options: {
|
|
3
|
+
normalize: true, // true | false
|
|
4
|
+
minify: false // true | false
|
|
5
|
+
},
|
|
6
|
+
theme: {
|
|
7
|
+
colorScheme: 'dark', // 'light' | 'dark' | 'auto'
|
|
8
|
+
colors: {
|
|
9
|
+
primary: { light: 'oklch(45% 0.24 277.023)', dark: 'oklch(45% 0.24 277.023)' },
|
|
10
|
+
secondary: { light: 'oklch(65% 0.241 354.308)', dark: 'oklch(65% 0.241 354.308)' },
|
|
11
|
+
tertiary: { light: 'oklch(77% 0.152 181.912)', dark: 'oklch(77% 0.152 181.912)' },
|
|
12
|
+
neutral: { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
|
|
13
|
+
info: { light: 'oklch(74% 0.16 232.661)', dark: 'oklch(74% 0.16 232.661)' },
|
|
14
|
+
success: { light: 'oklch(76% 0.177 163.223)', dark: 'oklch(76% 0.177 163.223)' },
|
|
15
|
+
warning: { light: 'oklch(82% 0.189 84.429)', dark: 'oklch(82% 0.189 84.429)' },
|
|
16
|
+
error: { light: 'oklch(71% 0.194 13.428)', dark: 'oklch(71% 0.194 13.428)' },
|
|
17
|
+
base: { light: 'oklch(100% 0 0)', dark: 'oklch(25.33% 0.016 252.42)' },
|
|
18
|
+
surface: { light: 'oklch(98% 0 0)', dark: 'oklch(23.26% 0.014 253.1)' },
|
|
19
|
+
container: { light: 'oklch(95% 0 0)', dark: 'oklch(21.15% 0.012 254.09)' },
|
|
20
|
+
shadow: 'black'
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
breakpoints: {
|
|
24
|
+
mobileBreakpoint: 'sm',
|
|
25
|
+
tabletBreakpoint: 'md',
|
|
26
|
+
laptopBreakpoint: 'xl',
|
|
27
|
+
thresholds: {
|
|
28
|
+
none: 0, // 0px
|
|
29
|
+
xs: '28rem', //448px
|
|
30
|
+
sm: '40rem', //640px
|
|
31
|
+
md: '48rem', //768px
|
|
32
|
+
lg: '64rem', //1024px
|
|
33
|
+
xl: '80rem', //1280px
|
|
34
|
+
'2xl': '96rem', //1536px
|
|
35
|
+
'3xl': '112rem' //1792px
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
styles: {
|
|
39
|
+
spacing: '0.125rem', // 2px
|
|
40
|
+
corner: {
|
|
41
|
+
active: true, // true | false
|
|
42
|
+
radius: {
|
|
43
|
+
sm: '0.125rem', // 2px
|
|
44
|
+
md: '0.25rem', // 4px
|
|
45
|
+
lg: '0.5rem', // 8px
|
|
46
|
+
xl: '0.75rem', // 12px
|
|
47
|
+
'2xl': '1rem', // 16px
|
|
48
|
+
'3xl': '1.5rem', // 24px
|
|
49
|
+
full: '9999px' // 9999px
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
font: {
|
|
53
|
+
sans: [
|
|
54
|
+
'system-ui',
|
|
55
|
+
'-apple-system',
|
|
56
|
+
'BlinkMacSystemFont',
|
|
57
|
+
'Segoe UI',
|
|
58
|
+
'Roboto',
|
|
59
|
+
'Helvetica Neue',
|
|
60
|
+
'Arial',
|
|
61
|
+
'sans-serif',
|
|
62
|
+
'Apple Color Emoji',
|
|
63
|
+
'Segoe UI Emoji',
|
|
64
|
+
'Segoe UI Symbol'
|
|
65
|
+
],
|
|
66
|
+
mono: [
|
|
67
|
+
'SFMono-Regular',
|
|
68
|
+
'ui-monospace',
|
|
69
|
+
'SF Mono',
|
|
70
|
+
'Menlo',
|
|
71
|
+
'Monaco',
|
|
72
|
+
'Consolas',
|
|
73
|
+
'Liberation Mono',
|
|
74
|
+
'Courier New',
|
|
75
|
+
'monospace'
|
|
76
|
+
],
|
|
77
|
+
serif: ['Merriweather', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif']
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { type Writable } from 'svelte/store';
|
|
2
|
+
export declare const colorScheme: Writable<'auto' | 'dark' | 'light'>;
|
|
3
|
+
export declare function updateThemeStore(update: 'auto' | 'dark' | 'light'): void;
|
|
4
|
+
export declare function setColorScheme(scheme: 'auto' | 'dark' | 'light'): void;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { writable } from 'svelte/store';
|
|
2
|
+
// states
|
|
3
|
+
const _default = 'light';
|
|
4
|
+
const isBrowser = typeof window !== 'undefined';
|
|
5
|
+
export const colorScheme = writable(_default);
|
|
6
|
+
export function updateThemeStore(update) {
|
|
7
|
+
colorScheme.update(() => {
|
|
8
|
+
if (isBrowser) {
|
|
9
|
+
const ref = document.documentElement.classList;
|
|
10
|
+
if (update === 'auto')
|
|
11
|
+
ref.remove('light', 'dark');
|
|
12
|
+
else {
|
|
13
|
+
ref.remove(update === 'dark' ? 'light' : 'dark');
|
|
14
|
+
ref.add(update === 'dark' ? 'dark' : 'light');
|
|
15
|
+
}
|
|
16
|
+
localStorage.setItem('@lapikit/theme', update);
|
|
17
|
+
}
|
|
18
|
+
return update;
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
export function setColorScheme(scheme) {
|
|
22
|
+
updateThemeStore(scheme);
|
|
23
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { fileURLToPath } from 'url';
|
|
2
|
+
import { dirname } from 'path';
|
|
3
|
+
import fs from 'fs';
|
|
4
|
+
import fsPromises from 'fs/promises';
|
|
5
|
+
import path from 'path';
|
|
6
|
+
import { minify } from '../internal/minify.js';
|
|
7
|
+
import { colors, component, devices, variables } from './parser/index.js';
|
|
8
|
+
import { terminal } from '../internal/terminal.js';
|
|
9
|
+
const __filename = fileURLToPath(import.meta.url);
|
|
10
|
+
const __dirname = dirname(__filename);
|
|
11
|
+
const __components = path.resolve('src/components');
|
|
12
|
+
export const processCSS = async (config) => {
|
|
13
|
+
const _normalize = fs.readFileSync(path.resolve(__dirname, './normalize.css'), 'utf-8');
|
|
14
|
+
let styles = ``;
|
|
15
|
+
if (config.options.normalize)
|
|
16
|
+
styles += `${_normalize}\n`;
|
|
17
|
+
const colorScheme = colors(config);
|
|
18
|
+
const deviceDisplay = devices(config);
|
|
19
|
+
const variablesStyles = variables(config);
|
|
20
|
+
styles += `${colorScheme.root}\n`;
|
|
21
|
+
styles += `${variablesStyles}\n`;
|
|
22
|
+
styles += `${colorScheme.className}\n`;
|
|
23
|
+
styles += `${deviceDisplay}\n`;
|
|
24
|
+
if (fs.existsSync(__components) && fs.statSync(__components).isDirectory())
|
|
25
|
+
styles += component(config);
|
|
26
|
+
if (config.options.minify) {
|
|
27
|
+
styles = minify(styles);
|
|
28
|
+
terminal('success', 'css minified');
|
|
29
|
+
}
|
|
30
|
+
fsPromises.writeFile(path.resolve(__dirname, '../styles.css'), styles);
|
|
31
|
+
};
|
|
@@ -3,12 +3,12 @@ html {
|
|
|
3
3
|
tab-size: 4;
|
|
4
4
|
line-height: 1.5;
|
|
5
5
|
box-sizing: border-box;
|
|
6
|
-
font-family: var(--
|
|
6
|
+
font-family: var(--kit-font-family-sans);
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
pre,
|
|
10
10
|
code {
|
|
11
|
-
font-family: var(--
|
|
11
|
+
font-family: var(--kit-font-family-mono);
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
body {
|