Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved API for tabs by making brn an hostdirective of hlm #75

Closed
wants to merge 4 commits into from
Closed

Improved API for tabs by making brn an hostdirective of hlm #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
93e921f
feat(tabs): improved API by integrating brn to hlm
elite-benni Dec 12, 2023
ce57ec5
refactor(tabs): tabs brn-taps.component is a directive, brn-taps-list…
elite-benni Dec 12, 2023
7fad230
refactor(tabs): extra function for setting contentfor and triggerFor…
elite-benni Dec 12, 2023
62b2d69
refactor(tabs): brn-tabs value is set by Input brnTabs
elite-benni Dec 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 12 additions & 20 deletions apps/app/src/app/pages/(components)/components/(tabs)/tabs--vertical.preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,14 @@ import {
} from '@spartan-ng/ui-card-helm';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
import {
BrnTabsComponent,
BrnTabsContentDirective,
BrnTabsListComponent,
BrnTabsTriggerDirective,
} from '@spartan-ng/ui-tabs-brain';
import { BrnTabsDirective } from '@spartan-ng/ui-tabs-brain';
import { HlmTabsContentDirective, HlmTabsListDirective, HlmTabsTriggerDirective } from '@spartan-ng/ui-tabs-helm';

@Component({
selector: 'spartan-tabs-vertical',
standalone: true,
imports: [
BrnTabsComponent,
BrnTabsListComponent,
BrnTabsTriggerDirective,
BrnTabsContentDirective,
BrnTabsDirective,

HlmTabsListDirective,
HlmTabsTriggerDirective,
Expand All @@ -48,13 +40,13 @@ import { HlmTabsContentDirective, HlmTabsListDirective, HlmTabsTriggerDirective
class: 'block w-full max-w-lg min-h-[400px]',
},
template: `
<brn-tabs class="mx-auto flex max-w-3xl flex-row space-x-2" orientation="vertical" value="account">
<brn-tabs-list hlmTabsList orientation="vertical" aria-label="tabs example">
<button class="w-full" hlmTabsTrigger brnTabsTrigger="account">Account</button>
<button class="w-full" hlmTabsTrigger brnTabsTrigger="password">Password</button>
<button class="w-full" hlmTabsTrigger brnTabsTrigger="danger">Danger Zone</button>
</brn-tabs-list>
<div hlmTabsContent brnTabsContent="account">
<div brnTabs="account" class="mx-auto flex max-w-3xl flex-row space-x-2" orientation="vertical">
<div hlmTabsList hlm orientation="vertical" aria-label="tabs example">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How do you feel about turning this into ?
I think that would be even cleaner!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh sorry I did not see your comment.
What do you mean by "turning into ?"

<button class="w-full" hlmTabsTrigger="account">Account</button>
<button class="w-full" hlmTabsTrigger="password">Password</button>
<button class="w-full" hlmTabsTrigger="danger">Danger Zone</button>
</div>
<div hlmTabsContent="account">
<section hlmCard>
<div hlmCardHeader>
<h3 hlmCardTitle>Account</h3>
Expand All @@ -75,7 +67,7 @@ import { HlmTabsContentDirective, HlmTabsListDirective, HlmTabsTriggerDirective
</div>
</section>
</div>
<div hlmTabsContent brnTabsContent="password">
<div hlmTabsContent="password">
<section hlmCard>
<div hlmCardHeader>
<h3 hlmCardTitle>Password</h3>
Expand All @@ -96,7 +88,7 @@ import { HlmTabsContentDirective, HlmTabsListDirective, HlmTabsTriggerDirective
</div>
</section>
</div>
<div hlmTabsContent brnTabsContent="danger">
<div hlmTabsContent="danger">
<section hlmCard>
<div hlmCardHeader>
<h3 hlmCardTitle>Delete Account</h3>
Expand All @@ -107,7 +99,7 @@ import { HlmTabsContentDirective, HlmTabsListDirective, HlmTabsTriggerDirective
</div>
</section>
</div>
</brn-tabs>
</div>
`,
})
export class TabsVerticalPreviewComponent {}
Expand Down
225 changes: 108 additions & 117 deletions apps/app/src/app/pages/(components)/components/(tabs)/tabs.preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Component } from '@angular/core';
import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import {
HlmCardContentDirective,
Expand All @@ -11,22 +10,14 @@ import {
} from '@spartan-ng/ui-card-helm';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
import {
BrnTabsComponent,
BrnTabsContentDirective,
BrnTabsListComponent,
BrnTabsTriggerDirective,
} from '@spartan-ng/ui-tabs-brain';
import { BrnTabsDirective } from '@spartan-ng/ui-tabs-brain';
import { HlmTabsContentDirective, HlmTabsListDirective, HlmTabsTriggerDirective } from '@spartan-ng/ui-tabs-helm';

@Component({
selector: 'spartan-tabs-preview',
standalone: true,
imports: [
BrnTabsComponent,
BrnTabsListComponent,
BrnTabsTriggerDirective,
BrnTabsContentDirective,
BrnTabsDirective,

HlmTabsListDirective,
HlmTabsTriggerDirective,
Expand All @@ -42,18 +33,17 @@ import { HlmTabsContentDirective, HlmTabsListDirective, HlmTabsTriggerDirective
HlmLabelDirective,
HlmInputDirective,
HlmButtonDirective,
HlmBadgeDirective,
],
host: {
class: 'block w-full max-w-lg',
},
template: `
<brn-tabs class="w-full" value="account">
<brn-tabs-list hlmTabsList class="grid w-full grid-cols-2" aria-label="tabs example">
<button hlmTabsTrigger brnTabsTrigger="account">Account</button>
<button hlmTabsTrigger brnTabsTrigger="password">Password</button>
</brn-tabs-list>
<div hlmTabsContent brnTabsContent="account">
<div brnTabs="account" class="w-full">
<div hlmTabsList class="grid w-full grid-cols-2" aria-label="tabs example">
<button hlmTabsTrigger="account">Account</button>
<button hlmTabsTrigger="password">Password</button>
</div>
<div hlmTabsContent="account">
<section hlmCard>
<div hlmCardHeader>
<h3 hlmCardTitle>Account</h3>
Expand All @@ -74,7 +64,7 @@ import { HlmTabsContentDirective, HlmTabsListDirective, HlmTabsTriggerDirective
</div>
</section>
</div>
<div hlmTabsContent brnTabsContent="password">
<div hlmTabsContent="password">
<section hlmCard>
<div hlmCardHeader>
<h3 hlmCardTitle>Password</h3>
Expand All @@ -95,130 +85,131 @@ import { HlmTabsContentDirective, HlmTabsListDirective, HlmTabsTriggerDirective
</div>
</section>
</div>
</brn-tabs>
</div>
`,
})
export class TabsPreviewComponent {}

export const defaultCode = `
import { Component } from '@angular/core';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import {
BrnTabsComponent,
BrnTabsContentDirective,
BrnTabsListComponent,
BrnTabsTriggerDirective
} from '@spartan-ng/ui-tabs-brain';
import { HlmTabsContentDirective, HlmTabsListDirective, HlmTabsTriggerDirective } from '@spartan-ng/ui-tabs-helm';
import {
HlmCardContentDirective,
HlmCardDescriptionDirective,
HlmCardDirective,
HlmCardFooterDirective, HlmCardHeaderDirective, HlmCardTitleDirective
HlmCardContentDirective,
HlmCardDescriptionDirective,
HlmCardDirective,
HlmCardFooterDirective,
HlmCardHeaderDirective,
HlmCardTitleDirective,
} from '@spartan-ng/ui-card-helm';
import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
import {
BrnTabsDirective,
BrnTabsContentDirective,
BrnTabsListDirective,
BrnTabsTriggerDirective,
} from '@spartan-ng/ui-tabs-brain';
import { HlmTabsContentDirective, HlmTabsListDirective, HlmTabsTriggerDirective } from '@spartan-ng/ui-tabs-helm';

@Component({
selector: 'spartan-tabs-preview',
standalone: true,
imports: [
BrnTabsComponent,
BrnTabsListComponent,
BrnTabsTriggerDirective,
BrnTabsContentDirective,
selector: 'spartan-tabs-preview',
standalone: true,
imports: [
BrnTabsDirective,

HlmTabsListDirective,
HlmTabsTriggerDirective,
HlmTabsContentDirective,
HlmTabsListDirective,
HlmTabsTriggerDirective,
HlmTabsContentDirective,

HlmCardContentDirective,
HlmCardDescriptionDirective,
HlmCardDirective,
HlmCardFooterDirective,
HlmCardHeaderDirective,
HlmCardTitleDirective,
HlmCardContentDirective,
HlmCardDescriptionDirective,
HlmCardDirective,
HlmCardFooterDirective,
HlmCardHeaderDirective,
HlmCardTitleDirective,

HlmLabelDirective,
HlmInputDirective,
HlmButtonDirective,
HlmBadgeDirective,
],
template: \`
<brn-tabs class='block max-w-3xl mx-auto' value='account'>
<brn-tabs-list hlmTabsList class='grid w-full grid-cols-2' aria-label='tabs example'>
<button hlmTabsTrigger brnTabsTrigger='account'>Account</button>
<button hlmTabsTrigger brnTabsTrigger='password'>Password</button>
</brn-tabs-list>
<div hlmTabsContent brnTabsContent='account'>
<section hlmCard>
<div hlmCardHeader>
<h3 hlmCardTitle>Account</h3>
<p hlmCardDescription>
Make changes to your account here. Click save when you're done.
</p>
</div>
<p hlmCardContent>
<label class='block my-4' hlmLabel>Name
<input class='w-full mt-1.5' value='Pedro Duarte' hlmInput>
</label>
<label class='block my-4' hlmLabel>Username
<input class='w-full mt-1.5' placeholder='@peduarte' hlmInput>
</label>
</p>
<div hlmCardFooter>
<button hlmBtn>Save Changes</button>
</div>
</section>
</div>
<div hlmTabsContent brnTabsContent='password'>
<section hlmCard>
<div hlmCardHeader>
<h3 hlmCardTitle>Password</h3>
<p hlmCardDescription>
Change your password here. After saving, you'll be logged out.
</p>
</div>
<p hlmCardContent>
<label class='block my-4' hlmLabel>Old Password
<input class='w-full mt-1.5' type='password' hlmInput>
</label>
<label class='block my-4' hlmLabel>New Password
<input class='w-full mt-1.5' type='password' hlmInput>
</label>
</p>
<div hlmCardFooter>
<button hlmBtn>Save Password</button>
</div>
</section>
</div>
</brn-tabs>
\`,
HlmLabelDirective,
HlmInputDirective,
HlmButtonDirective,
],
host: {
class: 'block w-full max-w-lg',
},
template: \`
<div brnTabs="account" class="w-full">
<div hlmTabsList class="grid w-full grid-cols-2" aria-label="tabs example">
<button hlmTabsTrigger="account">Account</button>
<button hlmTabsTrigger="password">Password</button>
</div>
<div hlmTabsContent="account">
<section hlmCard>
<div hlmCardHeader>
<h3 hlmCardTitle>Account</h3>
<p hlmCardDescription>Make changes to your account here. Click save when you're done.</p>
</div>
<p hlmCardContent>
<label class="my-4 block" hlmLabel>
Name
<input class="mt-1.5 w-full" value="Pedro Duarte" hlmInput />
</label>
<label class="my-4 block" hlmLabel>
Username
<input class="mt-1.5 w-full" placeholder="@peduarte" hlmInput />
</label>
</p>
<div hlmCardFooter>
<button hlmBtn>Save Changes</button>
</div>
</section>
</div>
<div hlmTabsContent="password">
<section hlmCard>
<div hlmCardHeader>
<h3 hlmCardTitle>Password</h3>
<p hlmCardDescription>Change your password here. After saving, you'll be logged out.</p>
</div>
<p hlmCardContent>
<label class="my-4 block" hlmLabel>
Old Password
<input class="mt-1.5 w-full" type="password" hlmInput />
</label>
<label class="my-4 block" hlmLabel>
New Password
<input class="mt-1.5 w-full" type="password" hlmInput />
</label>
</p>
<div hlmCardFooter>
<button hlmBtn>Save Password</button>
</div>
</section>
</div>
</div>
\`,
})
export class TabsPreviewComponent {}

`;

export const defaultImports = `
import {
BrnTabsComponent,
BrnTabsContentDirective,
BrnTabsListComponent,
BrnTabsTriggerDirective
BrnTabsDirective,
BrnTabsContentDirective,
BrnTabsListDirective,
BrnTabsTriggerDirective,
} from '@spartan-ng/ui-tabs-brain';
import { HlmTabsContentDirective, HlmTabsListDirective, HlmTabsTriggerDirective } from '@spartan-ng/ui-tabs-helm';
`;
export const defaultSkeleton = `
<brn-tabs class='block max-w-3xl mx-auto' value='account'>
<brn-tabs-list hlmTabsList class='grid w-full grid-cols-2' aria-label='tabs example'>
<button hlmTabsTrigger brnTabsTrigger='account'>Account</button>
<button hlmTabsTrigger brnTabsTrigger='password'>Password</button>
</brn-tabs-list>
<div hlmTabsContent brnTabsContent='account'>
<div brnTabs='account' class='block max-w-3xl mx-auto'>
<div hlmTabsList class='grid w-full grid-cols-2' aria-label='tabs example'>
<button hlmTabsTrigger='account'>Account</button>
<button hlmTabsTrigger='password'>Password</button>
</div>
<div hlmTabsContent='account'>
Make your account here
</div>
<div hlmTabsContent brnTabsContent='password'>
<div hlmTabsContent='password'>
Change your password here
</div>
</brn-tabs>
</div>
`;
19 changes: 1 addition & 18 deletions apps/app/src/app/shared/code/code.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,4 @@
import { booleanAttribute, Component, inject, Input, ViewEncapsulation } from '@angular/core';
import {
BrnTabsComponent,
BrnTabsContentDirective,
BrnTabsListComponent,
BrnTabsTriggerDirective,
} from '@spartan-ng/ui-tabs-brain';
import { HlmTabsContentDirective } from '@spartan-ng/ui-tabs-helm';
import { marked } from 'marked';
import { gfmHeadingId } from 'marked-gfm-heading-id';
import { markedHighlight } from 'marked-highlight';
Expand All @@ -30,17 +23,7 @@ declare const Prism: typeof import('prismjs');
@Component({
selector: 'spartan-code',
standalone: true,
imports: [
BrnTabsComponent,
BrnTabsListComponent,
BrnTabsTriggerDirective,
HlmTabsContentDirective,
BrnTabsContentDirective,
HlmScrollAreaComponent,
HlmButtonDirective,
HlmIconComponent,
NgIf,
],
imports: [HlmScrollAreaComponent, HlmButtonDirective, HlmIconComponent, NgIf],
providers: [provideIcons({ radixClipboard, radixCheck })],
host: {
class: 'spartan-scroll relative block font-mono rounded-md text-sm text-white bg-zinc-950 dark:bg-zinc-900',
Expand Down
Loading
Loading