Skip to content
This repository was archived by the owner on May 20, 2024. It is now read-only.

Commit 7e49d13

Browse files
krystxfkrystxf
committed
example page, readme, package.json informations
1 parent 87594c7 commit 7e49d13

File tree

10 files changed

+237
-16
lines changed

10 files changed

+237
-16
lines changed

‎README.md‎

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,51 @@
22

33
Angular library inspired by [kbar React library](https://github.com/timc1/kbar)
44

5-
Press `ctrl` + `k` to show kbar menu for faster navigation on your site.
5+
Provides plug-n-play tool for efficient navigation on your website.
66

77
## Features
88

99
todo
1010

1111
## Usage
1212

13-
todo
13+
Add `KbarAngularModule` to `app.module.ts` to `imports` array
14+
15+
_to access components service, add `KbarAngularService` to `providers` array_
16+
17+
**component class**
18+
19+
```typescript
20+
actions = [
21+
{
22+
name: "Home",
23+
keywords: ["home"],
24+
perform: () => {
25+
document.location.href = "/";
26+
},
27+
},
28+
{
29+
name: "Console.log",
30+
keywords: ["log", "console"],
31+
perform: () => {
32+
console.log("Hello world!");
33+
},
34+
},
35+
];
36+
```
37+
38+
**component template**
39+
40+
```html
41+
<kbar [actions]="actions">
42+
<kbar-overlay />
43+
44+
<kbar-positioner>
45+
<kbar-search></kbar-search>
46+
<kbar-results></kbar-results>
47+
</kbar-positioner>
48+
</kbar>
49+
```
1450

1551
## Development
1652

‎angular.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,8 @@
6363
"projects/kbar-angular-example/src/assets"
6464
],
6565
"styles": [
66-
"projects/kbar-angular-example/src/styles.scss"
66+
"projects/kbar-angular-example/src/styles.scss",
67+
"projects/kbar-angular-example/src/variables.scss"
6768
],
6869
"scripts": []
6970
},

‎package.json‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,18 @@
11
{
22
"name": "kbar-angular",
3-
"version": "0.0.0",
3+
"version": "0.0.1-alpha",
4+
"description": "Angular component library for kbar - tool for efficient navigation in your app",
5+
"keywords": [
6+
"command bar",
7+
"search"
8+
],
9+
"node" : ">=16.0.0",
10+
"author": "Krystof Kratky <krystof.kratky2003@gmail.com>",
11+
"license": "GPL-3.0",
12+
"repository": {
13+
"type": "git",
14+
"url": "https://github.com/krystxf/kbar-angular"
15+
},
416
"scripts": {
517
"ng": "ng",
618
"example:start": "ng serve kbar-angular-example",

‎projects/kbar-angular-example/src/app/app.component.html‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
example app
2-
31
<kbar [actions]="actions">
42
<kbar-overlay />
53

@@ -8,3 +6,32 @@
86
<kbar-results></kbar-results>
97
</kbar-positioner>
108
</kbar>
9+
10+
<div class="wrapper" [ngClass]="{dark: darkMode, light: !darkMode}">
11+
<main class="content">
12+
<h1>kbar-angular</h1>
13+
<p>
14+
<a href="https://github.com/krystxf/kbar-angular" target="_blank">kbar</a> is a fully extensible command+k
15+
interface for your site.
16+
<br />
17+
<br />
18+
try it out by pressing <kbd>ctrl</kbd> + <kbd>k</kbd>
19+
</p>
20+
21+
<h2>Features</h2>
22+
// todo
23+
24+
<h2>Example</h2>
25+
<h3>component class</h3>
26+
<pre>
27+
<code [innerText]="CLASS_EXAMPLE"></code>
28+
</pre>
29+
<h3>component template</h3>
30+
<pre>
31+
<code [innerText]="TEMPLATE_EXAMPLE"></code>
32+
</pre>
33+
34+
<h2>Customization</h2>
35+
// todo
36+
</main>
37+
</div>

‎projects/kbar-angular-example/src/app/app.component.scss‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
@use "sass:map";
2+
@import "../variables.scss";
3+
4+
.dark {
5+
background-color: map.get($dark-theme, "bg");
6+
color: map.get($dark-theme, "text");
7+
8+
kbd,
9+
code {
10+
background-color: map.get($dark-theme, "kbd-bg");
11+
color: map.get($dark-theme, "kbd-text");
12+
}
13+
}
14+
15+
.light {
16+
background-color: map.get($light-theme, "bg");
17+
color: map.get($light-theme, "text");
18+
19+
kbd,
20+
code {
21+
background-color: map.get($light-theme, "kbd-bg");
22+
color: map.get($light-theme, "kbd-text");
23+
}
24+
}
25+
26+
.wrapper {
27+
width: 100%;
28+
min-height: 100vh;
29+
30+
transition: background-color 0.3s ease-in-out;
31+
transition: color 0.3s ease-in-out;
32+
}
33+
34+
.content {
35+
width: 100%;
36+
max-width: 800px;
37+
margin: 0 auto;
38+
padding: 20px;
39+
40+
h1 {
41+
font-size: 2rem;
42+
width: 100%;
43+
text-align: center;
44+
}
45+
46+
a {
47+
text-decoration: underline;
48+
font-weight: bold;
49+
}
50+
51+
img {
52+
--background: #fff;
53+
--foreground: #ccc;
54+
width: 100px;
55+
height: 100px;
56+
}
57+
}
58+
59+
kbd {
60+
padding: 4px 8px;
61+
border-radius: 5px;
62+
font-size: 1rem;
63+
font-family: monospace;
64+
}
65+
66+
code {
67+
display: block;
68+
padding: 4px 8px;
69+
border-radius: 5px;
70+
font-size: 1rem;
71+
font-family: monospace;
72+
}

‎projects/kbar-angular-example/src/app/app.component.ts‎

Lines changed: 47 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,61 @@ import { Component } from '@angular/core';
66
styleUrls: ['./app.component.scss'],
77
})
88
export class AppComponent {
9-
title = 'kbar-angular-example';
9+
darkMode: boolean = false;
1010

1111
actions = [
1212
{
13-
name: 'Home',
14-
keywords: ['home'],
13+
name: 'Go to Github',
14+
keywords: [
15+
'github',
16+
'repo',
17+
'repository',
18+
'source',
19+
'code',
20+
'documentation',
21+
],
22+
perform: () =>
23+
(document.location.href = 'https://github.com/krystxf/kbar-angular'),
24+
},
25+
{
26+
name: 'Light mode',
27+
keywords: ['light', 'mode'],
28+
perform: () => (this.darkMode = false),
29+
},
30+
{
31+
name: 'Dark mode',
32+
keywords: ['dark', 'mode'],
33+
perform: () => (this.darkMode = true),
34+
},
35+
];
36+
37+
CLASS_EXAMPLE = `
38+
actions = [
39+
{
40+
name: "Home",
41+
keywords: ["home"],
1542
perform: () => {
16-
document.location.href = '/';
43+
document.location.href = "/";
1744
},
1845
},
1946
{
20-
name: 'Console.log',
21-
keywords: ['log', 'console'],
47+
name: "Console.log",
48+
keywords: ["log", "console"],
2249
perform: () => {
23-
console.log('Hello world!');
50+
console.log("Hello world!");
2451
},
2552
},
26-
];
53+
];
54+
`;
55+
56+
TEMPLATE_EXAMPLE = `
57+
<kbar [actions]="actions">
58+
<kbar-overlay />
59+
60+
<kbar-positioner>
61+
<kbar-search></kbar-search>
62+
<kbar-results></kbar-results>
63+
</kbar-positioner>
64+
</kbar>
65+
`;
2766
}

‎projects/kbar-angular-example/src/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<title>kbar-angular Example</title>
66
<base href="/" />
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
89
<link rel="icon" type="image/x-icon" href="favicon.ico" />
910
</head>
1011
<body>

‎projects/kbar-angular-example/src/styles.scss‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,9 @@
1-
/* You can add global styles to this file, and also import other style files */
1+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");
2+
3+
html,
4+
body {
5+
margin: 0;
6+
padding: 0;
7+
8+
font-family: "Inter", sans-serif;
9+
}

‎projects/kbar-angular-example/src/variables.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
$dark-theme: (
2+
bg: #191919,
3+
text: #c8cbce,
4+
kbd-bg: #202020,
5+
kbd-text: #c8cbce,
6+
);
7+
8+
$light-theme: (
9+
bg: #ffffff,
10+
text: #191919,
11+
kbd-bg: #f7f6f3,
12+
kbd-text: #191919,
13+
);

‎projects/kbar-angular/package.json‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,18 @@
11
{
22
"name": "kbar-angular",
3-
"version": "0.0.1",
3+
"version": "0.0.1-alpha",
4+
"description": "Angular component library for kbar - tool for efficient navigation in your app",
5+
"keywords": [
6+
"command bar",
7+
"search"
8+
],
9+
"node" : ">=16.0.0",
10+
"author": "Krystof Kratky <krystof.kratky2003@gmail.com>",
11+
"license": "GPL-3.0",
12+
"repository": {
13+
"type": "git",
14+
"url": "https://github.com/krystxf/kbar-angular"
15+
},
416
"peerDependencies": {
517
"@angular/common": "^15.2.0",
618
"@angular/core": "^15.2.0",

0 commit comments

Comments
 (0)