Skip to content

Commit 0d7a1a4

Browse files
pimenovolegpimenovoleg
committed
chore: added Slider example
1 parent 5f02378 commit 0d7a1a4

25 files changed

+524
-411
lines changed

‎.editorconfig

+6-1
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,15 @@ root = true
44
[*]
55
charset = utf-8
66
indent_style = space
7-
indent_size = 2
7+
max_line_length = 120
8+
indent_size = 4
9+
end_of_line = lf
810
insert_final_newline = true
911
trim_trailing_whitespace = true
1012

1113
[*.md]
1214
max_line_length = off
1315
trim_trailing_whitespace = false
16+
17+
[*.yml]
18+
indent_size = 2

‎apps/origin-ui/src/app/app.routes.ts

+4
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,8 @@ export const appRoutes: Route[] = [
1313
path: 'inputs',
1414
loadComponent: () => import('./pages/inputs/page.component')
1515
},
16+
{
17+
path: 'sliders',
18+
loadComponent: () => import('./pages/sliders/page.component')
19+
},
1620
];

‎apps/origin-ui/src/app/demos/sliders/slider-01.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {Component} from "@angular/core";
2+
import {OriSlider} from "@origin-ui/components/slider";
3+
4+
5+
@Component({
6+
selector: "demo-slider-01",
7+
standalone:true,
8+
imports: [OriSlider],
9+
template: `
10+
<div class="space-y-4">
11+
<ori-slider [defaultValue]="[10]" [step]="10" />
12+
</div>
13+
`
14+
})
15+
export default class Slider01Component {}

‎apps/origin-ui/src/app/pages/index.component.ts

+9
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,15 @@ import {IllustrationComponent} from "../components/illustration.component";
6262
<lucide-angular [img]="ArrowRightIcon" size="16" class="-mr-1 ml-2 shrink-0 opacity-60"></lucide-angular>
6363
</a>
6464
</li>
65+
<li>
66+
<a
67+
href="/sliders"
68+
class="inline-flex w-full items-center justify-between whitespace-nowrap rounded-lg border border-border bg-background p-4 font-bold shadow-sm shadow-black/5 outline-offset-2 transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 disabled:pointer-events-none disabled:opacity-50 sm:h-14"
69+
>
70+
<span class="truncate">Slider</span>
71+
<lucide-angular [img]="ArrowRightIcon" size="16" class="-mr-1 ml-2 shrink-0 opacity-60"></lucide-angular>
72+
</a>
73+
</li>
6574
</ul>
6675
</nav>
6776
</div>

‎apps/origin-ui/src/app/pages/sliders/page.component.ts

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import {Component} from "@angular/core";
2+
import {AppPageHeaderComponent} from "../../components/page-header.component";
3+
import {DemoComponent} from "../../components/demo-component";
4+
5+
@Component({
6+
selector: 'app-page-inputs',
7+
standalone: true,
8+
imports: [AppPageHeaderComponent, DemoComponent],
9+
template: `
10+
<main>
11+
<div class="px-4 sm:px-6">
12+
<div class="mx-auto w-full max-w-6xl">
13+
<app-components-page-header title="Slider">
14+
A growing collection of {{ files.length }} slider components built with Angular and TailwindCSS.
15+
</app-components-page-header>
16+
17+
<div class="grid max-w-6xl grid-cols-1 overflow-hidden sm:grid-cols-2 lg:grid-cols-3 [&>*]:relative [&>*]:px-1 [&>*]:py-12 [&>*]:before:absolute [&>*]:before:bg-border/70 [&>*]:before:[block-size:100vh] [&>*]:before:[inline-size:1px] [&>*]:before:[inset-block-start:0] [&>*]:before:[inset-inline-start:-1px] [&>*]:after:absolute [&>*]:after:bg-border/70 [&>*]:after:[block-size:1px] [&>*]:after:[inline-size:100vw] [&>*]:after:[inset-block-start:-1px] [&>*]:after:[inset-inline-start:0] sm:[&>*]:px-8 xl:[&>*]:px-12">
18+
@for (item of files; track item) {
19+
<app-demo-component
20+
directory="sliders"
21+
[componentName]="item" />
22+
}
23+
</div>
24+
25+
</div>
26+
</div>
27+
</main>
28+
29+
`
30+
})
31+
export default class PageSlidersComponent {
32+
files = [
33+
"slider-01"
34+
];
35+
}

‎package.json

+73-73
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,75 @@
11
{
2-
"name": "@origin-ui/source",
3-
"version": "0.0.0",
4-
"license": "MIT",
5-
"private": true,
6-
"scripts": {
7-
"origin-ui:docs:serve": "nx run origin-ui:serve",
8-
"origin-ui:docs:build": "nx run origin-ui:build",
9-
"components:build": "nx run components:build"
10-
},
11-
"dependencies": {
12-
"@angular/animations": "~18.2.0",
13-
"@angular/common": "~18.2.0",
14-
"@angular/compiler": "~18.2.0",
15-
"@angular/core": "~18.2.0",
16-
"@angular/forms": "~18.2.0",
17-
"@angular/platform-browser": "~18.2.0",
18-
"@angular/platform-browser-dynamic": "~18.2.0",
19-
"@angular/platform-server": "~18.2.0",
20-
"@angular/router": "~18.2.0",
21-
"@angular/ssr": "~18.2.0",
22-
"@radix-ng/primitives": "^0.17.0",
23-
"class-variance-authority": "^0.7.1",
24-
"clsx": "^2.1.1",
25-
"express": "~4.18.2",
26-
"lucide-angular": "~0.462.0",
27-
"rxjs": "~7.8.0",
28-
"tailwind-merge": "^2.5.5",
29-
"zone.js": "~0.14.3"
30-
},
31-
"devDependencies": {
32-
"@angular-devkit/build-angular": "~18.2.0",
33-
"@angular-devkit/core": "~18.2.0",
34-
"@angular-devkit/schematics": "~18.2.0",
35-
"@angular/cli": "~18.2.0",
36-
"@angular/compiler-cli": "~18.2.0",
37-
"@angular/language-service": "~18.2.0",
38-
"@eslint/js": "^9.8.0",
39-
"@nx/angular": "20.1.4",
40-
"@nx/eslint": "20.1.4",
41-
"@nx/eslint-plugin": "20.1.4",
42-
"@nx/jest": "20.1.4",
43-
"@nx/js": "20.1.4",
44-
"@nx/web": "20.1.4",
45-
"@nx/workspace": "20.1.4",
46-
"@schematics/angular": "~18.2.0",
47-
"@swc-node/register": "~1.9.1",
48-
"@swc/core": "~1.5.7",
49-
"@swc/helpers": "~0.5.11",
50-
"@types/express": "4.17.14",
51-
"@types/jest": "^29.5.12",
52-
"@types/node": "18.16.9",
53-
"@typescript-eslint/utils": "^8.0.0",
54-
"angular-eslint": "^18.3.0",
55-
"autoprefixer": "^10.4.0",
56-
"eslint": "^9.8.0",
57-
"eslint-config-prettier": "^9.0.0",
58-
"jest": "^29.7.0",
59-
"jest-environment-jsdom": "^29.7.0",
60-
"jest-preset-angular": "~14.1.0",
61-
"jsonc-eslint-parser": "^2.1.0",
62-
"ng-packagr": "~18.2.0",
63-
"nx": "20.1.4",
64-
"postcss": "^8.4.5",
65-
"postcss-url": "~10.1.3",
66-
"prettier": "^2.6.2",
67-
"tailwindcss": "^3.0.2",
68-
"tailwindcss-animate": "^1.0.7",
69-
"ts-jest": "^29.1.0",
70-
"ts-node": "10.9.1",
71-
"tslib": "^2.3.0",
72-
"typescript": "~5.5.2",
73-
"typescript-eslint": "^8.0.0"
74-
}
2+
"name": "@origin-ui/source",
3+
"version": "0.0.0",
4+
"license": "MIT",
5+
"private": true,
6+
"scripts": {
7+
"origin-ui:docs:serve": "nx run origin-ui:serve",
8+
"origin-ui:docs:build": "nx run origin-ui:build",
9+
"components:build": "nx run components:build"
10+
},
11+
"dependencies": {
12+
"@angular/animations": "~18.2.0",
13+
"@angular/common": "~18.2.0",
14+
"@angular/compiler": "~18.2.0",
15+
"@angular/core": "~18.2.0",
16+
"@angular/forms": "~18.2.0",
17+
"@angular/platform-browser": "~18.2.0",
18+
"@angular/platform-browser-dynamic": "~18.2.0",
19+
"@angular/platform-server": "~18.2.0",
20+
"@angular/router": "~18.2.0",
21+
"@angular/ssr": "~18.2.0",
22+
"@radix-ng/primitives": "^0.18.1",
23+
"class-variance-authority": "^0.7.1",
24+
"clsx": "^2.1.1",
25+
"express": "~4.18.2",
26+
"lucide-angular": "~0.462.0",
27+
"rxjs": "~7.8.0",
28+
"tailwind-merge": "^2.5.5",
29+
"zone.js": "~0.14.3"
30+
},
31+
"devDependencies": {
32+
"@angular-devkit/build-angular": "~18.2.0",
33+
"@angular-devkit/core": "~18.2.0",
34+
"@angular-devkit/schematics": "~18.2.0",
35+
"@angular/cli": "~18.2.0",
36+
"@angular/compiler-cli": "~18.2.0",
37+
"@angular/language-service": "~18.2.0",
38+
"@eslint/js": "^9.8.0",
39+
"@nx/angular": "20.1.4",
40+
"@nx/eslint": "20.1.4",
41+
"@nx/eslint-plugin": "20.1.4",
42+
"@nx/jest": "20.1.4",
43+
"@nx/js": "20.1.4",
44+
"@nx/web": "20.1.4",
45+
"@nx/workspace": "20.1.4",
46+
"@schematics/angular": "~18.2.0",
47+
"@swc-node/register": "~1.9.1",
48+
"@swc/core": "~1.5.7",
49+
"@swc/helpers": "~0.5.11",
50+
"@types/express": "4.17.14",
51+
"@types/jest": "^29.5.12",
52+
"@types/node": "18.16.9",
53+
"@typescript-eslint/utils": "^8.0.0",
54+
"angular-eslint": "^18.3.0",
55+
"autoprefixer": "^10.4.0",
56+
"eslint": "^9.8.0",
57+
"eslint-config-prettier": "^9.0.0",
58+
"jest": "^29.7.0",
59+
"jest-environment-jsdom": "^29.7.0",
60+
"jest-preset-angular": "~14.1.0",
61+
"jsonc-eslint-parser": "^2.1.0",
62+
"ng-packagr": "~18.2.0",
63+
"nx": "20.1.4",
64+
"postcss": "^8.4.5",
65+
"postcss-url": "~10.1.3",
66+
"prettier": "^2.6.2",
67+
"tailwindcss": "^3.0.2",
68+
"tailwindcss-animate": "^1.0.7",
69+
"ts-jest": "^29.1.0",
70+
"ts-node": "10.9.1",
71+
"tslib": "^2.3.0",
72+
"typescript": "~5.5.2",
73+
"typescript-eslint": "^8.0.0"
74+
}
7575
}

‎packages/components/button/src/button.component.ts

+41-41
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
1-
import { cva, type VariantProps } from "class-variance-authority";
1+
import {cva, type VariantProps} from "class-variance-authority";
22
import {Component, computed, input} from "@angular/core";
33
import {cn} from "@origin-ui/components/utils";
44

55

66
const buttonVariants = cva(
7-
"inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
8-
{
9-
variants: {
10-
variant: {
11-
default: "bg-primary text-primary-foreground shadow-sm shadow-black/5 hover:bg-primary/90",
12-
destructive:
13-
"bg-destructive text-destructive-foreground shadow-sm shadow-black/5 hover:bg-destructive/90",
14-
outline:
15-
"border border-input bg-background shadow-sm shadow-black/5 hover:bg-accent hover:text-accent-foreground",
16-
secondary:
17-
"bg-secondary text-secondary-foreground shadow-sm shadow-black/5 hover:bg-secondary/80",
18-
ghost: "hover:bg-accent hover:text-accent-foreground",
19-
link: "text-primary underline-offset-4 hover:underline",
20-
},
21-
size: {
22-
default: "h-9 px-4 py-2",
23-
sm: "h-8 rounded-lg px-3 text-xs",
24-
lg: "h-10 rounded-lg px-8",
25-
icon: "h-9 w-9",
26-
},
7+
"inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
8+
{
9+
variants: {
10+
variant: {
11+
default: "bg-primary text-primary-foreground shadow-sm shadow-black/5 hover:bg-primary/90",
12+
destructive:
13+
"bg-destructive text-destructive-foreground shadow-sm shadow-black/5 hover:bg-destructive/90",
14+
outline:
15+
"border border-input bg-background shadow-sm shadow-black/5 hover:bg-accent hover:text-accent-foreground",
16+
secondary:
17+
"bg-secondary text-secondary-foreground shadow-sm shadow-black/5 hover:bg-secondary/80",
18+
ghost: "hover:bg-accent hover:text-accent-foreground",
19+
link: "text-primary underline-offset-4 hover:underline",
20+
},
21+
size: {
22+
default: "h-9 px-4 py-2",
23+
sm: "h-8 rounded-lg px-3 text-xs",
24+
lg: "h-10 rounded-lg px-8",
25+
icon: "h-9 w-9",
26+
},
27+
},
28+
defaultVariants: {
29+
variant: "default",
30+
size: "default",
31+
},
2732
},
28-
defaultVariants: {
29-
variant: "default",
30-
size: "default",
31-
},
32-
},
3333
);
3434

3535
type ButtonProps = VariantProps<typeof buttonVariants>;
@@ -38,26 +38,26 @@ type OriButtonSize = NonNullable<ButtonProps['size']>;
3838
type OriButtonVariant = NonNullable<ButtonProps['variant']>;
3939

4040
@Component({
41-
selector: "ori-button",
42-
standalone: true,
43-
template: `
44-
<button [class]="computedClass()"
45-
[attr.disabled]="disabled() === true || disabled() === '' ? true : null">
46-
<ng-content></ng-content>
47-
</button>`
41+
selector: "ori-button",
42+
standalone: true,
43+
template: `
44+
<button [class]="computedClass()"
45+
[attr.disabled]="disabled() === true || disabled() === '' ? true : null">
46+
<ng-content></ng-content>
47+
</button>`
4848
})
4949
class OriButtonComponent {
50-
readonly class = input<string>();
50+
readonly class = input<string>();
5151

52-
readonly disabled = input<boolean | ''>(false);
52+
readonly disabled = input<boolean | ''>(false);
5353

54-
readonly variant = input<OriButtonVariant>('default');
54+
readonly variant = input<OriButtonVariant>('default');
5555

56-
readonly size = input<OriButtonSize>('default');
56+
readonly size = input<OriButtonSize>('default');
5757

58-
protected computedClass = computed(() =>
59-
cn(buttonVariants({ variant: this.variant(), size: this.size(), class: this.class() }))
60-
);
58+
protected computedClass = computed(() =>
59+
cn(buttonVariants({variant: this.variant(), size: this.size(), class: this.class()}))
60+
);
6161
}
6262

63-
export { buttonVariants, OriButtonComponent, OriButtonSize, OriButtonVariant };
63+
export {buttonVariants, OriButtonComponent, OriButtonSize, OriButtonVariant};

0 commit comments

Comments
 (0)