Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-21 11:35:34 +01:00
Code Issues Projects Releases Wiki Activity

[PM-2276] Upgrade Storybook to v7 (#5258)

Browse Source
This commit is contained in:
Oscar Hinton 2023-05-26 15:58:06 +02:00 committed by GitHub
parent 1638a1d6f5
commit f7b372a0b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
72 changed files with 6340 additions and 16409 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.github/whitelist-capital-letters.txt vendored
View File

@ -24,7 +24,6 @@
./libs/angular/src/validators/notAllowedValueAsync.validator.ts
./libs/angular/src/services/theming/themeBuilder.ts
./libs/angular/src/interfaces/selectOptions.ts
./libs/components/src/stories/Introduction.stories.mdx
./libs/common/src/misc/nodeUtils.ts
./libs/common/src/misc/linkedFieldOption.decorator.ts
./libs/common/src/misc/serviceUtils.ts

5
.github/workflows/chromatic.yml vendored
View File

@ -32,11 +32,16 @@ jobs:
- name: Install Node dependencies
run: npm ci
# Manual build the storybook to resolve a chromatic/storybook bug related to TurboSnap
- name: Build Storybook
run: npm run build-storybook:ci
- name: Publish to Chromatic
uses: chromaui/action@a89b674adf766dbde41ad9ea2b2b60b91188a0f0
with:
token: ${{ secrets.GITHUB_TOKEN }}
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
storybookBuildDir: ./storybook-static
exitOnceUploaded: true
onlyChanged: true
externals: "[\"libs/components/**/*.scss\", \"libs/components/tailwind.config*.js\"]"

33
.storybook/main.js
View File

@ -1,33 +0,0 @@
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
module.exports = {
stories: [
"../libs/components/src/**/*.stories.mdx",
"../libs/components/src/**/*.stories.@(js|jsx|ts|tsx)",
"../apps/web/src/**/*.stories.mdx",
"../apps/web/src/**/*.stories.@(js|jsx|ts|tsx)",
"../bitwarden_license/bit-web/src/**/*.stories.mdx",
"../bitwarden_license/bit-web/src/**/*.stories.@(js|jsx|ts|tsx)",
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-a11y",
"storybook-addon-designs",
],
framework: "@storybook/angular",
core: {
builder: "webpack5",
disableTelemetry: true,
},
env: (config) => ({
...config,
FLAGS: JSON.stringify({
secretsManager: true,
}),
}),
webpackFinal: async (config, { configType }) => {
config.resolve.plugins = [new TsconfigPathsPlugin()];
return config;
},
};

53
.storybook/main.ts Normal file
View File

@ -0,0 +1,53 @@
import { StorybookConfig } from "@storybook/angular";
import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
import remarkGfm from "remark-gfm";
const config: StorybookConfig = {
stories: [
"../libs/components/src/**/*.mdx",
"../libs/components/src/**/*.stories.@(js|jsx|ts|tsx)",
"../apps/web/src/**/*.mdx",
"../apps/web/src/**/*.stories.@(js|jsx|ts|tsx)",
"../bitwarden_license/bit-web/src/**/*.mdx",
"../bitwarden_license/bit-web/src/**/*.stories.@(js|jsx|ts|tsx)",
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-a11y",
{
name: "@storybook/addon-docs",
options: {
mdxPluginOptions: {
mdxCompileOptions: {
remarkPlugins: [remarkGfm],
},
},
},
},
],
framework: {
name: "@storybook/angular",
options: {},
},
core: {
disableTelemetry: true,
},
env: (config) => ({
...config,
FLAGS: JSON.stringify({
secretsManager: true,
}),
}),
webpackFinal: async (config, { configType }) => {
if (config.resolve) {
config.resolve.plugins = [new TsconfigPathsPlugin()] as any;
}
return config;
},
docs: {
autodocs: true,
},
};
export default config;

38
.storybook/preview.js
View File

@ -1,38 +0,0 @@
import { setCompodocJson } from "@storybook/addon-docs/angular";
import { componentWrapperDecorator, addDecorator } from "@storybook/angular";
import docJson from "../documentation.json";
setCompodocJson(docJson);
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
options: {
storySort: {
order: ["Documentation", ["Introduction", "Colors", "Icons"], "Component Library"],
},
},
docs: { inlineStories: true },
};
// ng-template is used to scope any template reference variables and isolate the previews
const decorator = componentWrapperDecorator(
(story) => `
<ng-template #lightPreview>
<div class="theme_light tw-px-5 tw-py-10 tw-border-2 tw-border-solid tw-border-secondary-300 tw-bg-[#ffffff]">${story}</div>
</ng-template>
<ng-template #darkPreview>
<div class="theme_dark tw-mt-5 tw-px-5 tw-py-10 tw-bg-[#1f242e]">${story}</div>
</ng-template>
<ng-container *ngTemplateOutlet="lightPreview"></ng-container>
<ng-container *ngTemplateOutlet="darkPreview"></ng-container>
`
);
addDecorator(decorator);

39
.storybook/preview.tsx Normal file
View File

@ -0,0 +1,39 @@
import { setCompodocJson } from "@storybook/addon-docs/angular";
import { componentWrapperDecorator } from "@storybook/angular";
import type { Preview } from "@storybook/angular";
import docJson from "../documentation.json";
setCompodocJson(docJson);
const decorator = componentWrapperDecorator(
(story) => `
<ng-template #lightPreview>
<div class="theme_light tw-px-5 tw-py-10 tw-border-2 tw-border-solid tw-border-secondary-300 tw-bg-[#ffffff]">${story}</div>
</ng-template>
<ng-template #darkPreview>
<div class="theme_dark tw-mt-5 tw-px-5 tw-py-10 tw-bg-[#1f242e]">${story}</div>
</ng-template>
<ng-container *ngTemplateOutlet="lightPreview"></ng-container>
<ng-container *ngTemplateOutlet="darkPreview"></ng-container>`
);
const preview: Preview = {
decorators: [decorator],
parameters: {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
options: {
storySort: {
order: ["Documentation", ["Introduction", "Colors", "Icons"], "Component Library"],
},
},
docs: { source: { type: "dynamic", excludeDecorators: true } },
},
};
export default preview;

1
.storybook/tsconfig.json
View File

@ -7,6 +7,7 @@
"exclude": ["../src/test.setup.ts", "../apps/src/**/*.spec.ts", "../libs/**/*.spec.ts"],
"files": [
"./typings.d.ts",
"./preview.tsx",
"../libs/components/src/main.ts",
"../libs/components/src/polyfills.ts"
]

27
angular.json
View File

@ -135,20 +135,25 @@
}
},
"defaultConfiguration": "development"
}
}
},
"storybook": {
"projectType": "application",
"root": "libs/components",
"sourceRoot": "libs/components/src",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"builder": "@storybook/angular:start-storybook",
"options": {
"tsConfig": ".storybook/tsconfig.json",
"styles": ["libs/components/src/styles.scss", "libs/components/src/styles.css"],
"scripts": []
"configDir": ".storybook",
"browserTarget": "components:build",
"compodoc": true,
"compodocArgs": ["-p", "./tsconfig.json", "-e", "json", "-d", "."],
"port": 6006
}
},
"build-storybook": {
"builder": "@storybook/angular:build-storybook",
"options": {
"configDir": ".storybook",
"browserTarget": "components:build",
"compodoc": true,
"compodocArgs": ["-e", "json", "-d", "."],
"outputDir": "storybook-static"
}
}
}

7
apps/web/src/app/admin-console/organizations/shared/components/access-selector/access-selector.stories.ts
View File

@ -1,6 +1,7 @@
import { importProvidersFrom } from "@angular/core";
import { FormBuilder, FormsModule, ReactiveFormsModule } from "@angular/forms";
import { action } from "@storybook/addon-actions";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { applicationConfig, Meta, moduleMetadata, Story } from "@storybook/angular";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import {
@ -39,12 +40,14 @@ export default {
FormsModule,
TabsModule,
TableModule,
PreloadedEnglishI18nModule,
JslibModule,
IconButtonModule,
],
providers: [],
}),
applicationConfig({
providers: [importProvidersFrom(PreloadedEnglishI18nModule)],
}),
],
parameters: {},
argTypes: {

41
apps/web/src/app/layouts/product-switcher/product-switcher.stories.ts
View File

@ -1,6 +1,6 @@
import { Component, Directive, Input } from "@angular/core";
import { Component, Directive, Input, importProvidersFrom } from "@angular/core";
import { RouterModule } from "@angular/router";
import { Meta, Story, moduleMetadata } from "@storybook/angular";
import { Meta, Story, applicationConfig, moduleMetadata } from "@storybook/angular";
import { BehaviorSubject } from "rxjs";
import { JslibModule } from "@bitwarden/angular/jslib.module";
@ -49,11 +49,24 @@ export default {
StoryLayoutComponent,
StoryContentComponent,
],
imports: [
JslibModule,
MenuModule,
IconButtonModule,
LinkModule,
imports: [JslibModule, MenuModule, IconButtonModule, LinkModule, RouterModule],
providers: [
{ provide: OrganizationService, useClass: MockOrganizationService },
MockOrganizationService,
{
provide: I18nService,
useFactory: () => {
return new I18nMockService({
moreFromBitwarden: "More from Bitwarden",
switchProducts: "Switch Products",
});
},
},
],
}),
applicationConfig({
providers: [
importProvidersFrom(
RouterModule.forRoot(
[
{
@ -77,21 +90,9 @@ export default {
},
],
{ useHash: true }
)
),
],
providers: [
{ provide: OrganizationService, useClass: MockOrganizationService },
MockOrganizationService,
{
provide: I18nService,
useFactory: () => {
return new I18nMockService({
moreFromBitwarden: "More from Bitwarden",
switchProducts: "Switch Products",
});
},
},
],
}),
],
} as Meta;

14
apps/web/src/app/reports/shared/report-card/report-card.stories.ts
View File

@ -1,5 +1,6 @@
import { importProvidersFrom } from "@angular/core";
import { RouterTestingModule } from "@angular/router/testing";
import { Meta, Story, moduleMetadata } from "@storybook/angular";
import { Meta, Story, applicationConfig, moduleMetadata } from "@storybook/angular";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { BadgeModule, IconModule } from "@bitwarden/components";
@ -15,15 +16,12 @@ export default {
component: ReportCardComponent,
decorators: [
moduleMetadata({
imports: [
JslibModule,
BadgeModule,
IconModule,
RouterTestingModule,
PreloadedEnglishI18nModule,
],
imports: [JslibModule, BadgeModule, IconModule, RouterTestingModule],
declarations: [PremiumBadgeComponent],
}),
applicationConfig({
providers: [importProvidersFrom(PreloadedEnglishI18nModule)],
}),
],
args: {
title: "Exposed Passwords",

14
apps/web/src/app/reports/shared/report-list/report-list.stories.ts
View File

@ -1,5 +1,6 @@
import { importProvidersFrom } from "@angular/core";
import { RouterTestingModule } from "@angular/router/testing";
import { Meta, Story, moduleMetadata } from "@storybook/angular";
import { Meta, Story, applicationConfig, moduleMetadata } from "@storybook/angular";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { BadgeModule, IconModule } from "@bitwarden/components";
@ -17,15 +18,12 @@ export default {
component: ReportListComponent,
decorators: [
moduleMetadata({
imports: [
JslibModule,
BadgeModule,
RouterTestingModule,
PreloadedEnglishI18nModule,
IconModule,
],
imports: [JslibModule, BadgeModule, RouterTestingModule, IconModule],
declarations: [PremiumBadgeComponent, ReportCardComponent],
}),
applicationConfig({
providers: [importProvidersFrom(PreloadedEnglishI18nModule)],
}),
],
args: {
reports: Object.values(reports).map((report) => ({

21
apps/web/src/app/vault/components/vault-items/vault-items.stories.ts
View File

@ -1,6 +1,6 @@
import { Component } from "@angular/core";
import { importProvidersFrom } from "@angular/core";
import { RouterModule } from "@angular/router";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { applicationConfig, Meta, moduleMetadata, Story } from "@storybook/angular";
import { BehaviorSubject } from "rxjs";
import { AvatarUpdateService } from "@bitwarden/common/abstractions/account/avatar-update.service";
@ -28,11 +28,6 @@ import { Unassigned } from "../../individual-vault/vault-filter/shared/models/ro
import { VaultItemsComponent } from "./vault-items.component";
import { VaultItemsModule } from "./vault-items.module";
@Component({
template: "",
})
class EmptyComponent {}
const organizations = [...new Array(3).keys()].map(createOrganization);
const groups = [...Array(3).keys()].map(createGroupView);
const collections = [...Array(5).keys()].map(createCollectionView);
@ -46,11 +41,7 @@ export default {
component: VaultItemsComponent,
decorators: [
moduleMetadata({
imports: [
VaultItemsModule,
PreloadedEnglishI18nModule,
RouterModule.forRoot([{ path: "**", component: EmptyComponent }], { useHash: true }),
],
imports: [VaultItemsModule, RouterModule],
providers: [
{
provide: EnvironmentService,
@ -103,6 +94,12 @@ export default {
},
],
}),
applicationConfig({
providers: [
importProvidersFrom(RouterModule.forRoot([], { useHash: true })),
importProvidersFrom(PreloadedEnglishI18nModule),
],
}),
],
args: {
disabled: false,

19
bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.stories.ts
View File

@ -1,6 +1,6 @@
import { Component } from "@angular/core";
import { Component, importProvidersFrom } from "@angular/core";
import { RouterModule } from "@angular/router";
import { Meta, Story, moduleMetadata } from "@storybook/angular";
import { Meta, Story, applicationConfig, moduleMetadata } from "@storybook/angular";
import { BehaviorSubject } from "rxjs";
import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
@ -28,7 +28,13 @@ export default {
component: LayoutComponent,
decorators: [
moduleMetadata({
imports: [
imports: [RouterModule, LayoutModule, IconModule],
declarations: [StoryContentComponent],
providers: [{ provide: OrganizationService, useClass: MockOrganizationService }],
}),
applicationConfig({
providers: [
importProvidersFrom(
RouterModule.forRoot(
[
{
@ -57,13 +63,10 @@ export default {
},
],
{ useHash: true }
)
),
LayoutModule,
IconModule,
PreloadedEnglishI18nModule,
importProvidersFrom(PreloadedEnglishI18nModule),
],
declarations: [StoryContentComponent],
providers: [{ provide: OrganizationService, useClass: MockOrganizationService }],
}),
],
} as Meta;

26
bitwarden_license/bit-web/src/app/secrets-manager/overview/onboarding.stories.ts
View File

@ -1,5 +1,6 @@
import { importProvidersFrom } from "@angular/core";
import { RouterModule } from "@angular/router";
import { Meta, Story, moduleMetadata } from "@storybook/angular";
import { Meta, Story, applicationConfig, moduleMetadata } from "@storybook/angular";
import { delay, of, startWith } from "rxjs";
import { JslibModule } from "@bitwarden/angular/jslib.module";
@ -14,24 +15,15 @@ export default {
component: OnboardingComponent,
decorators: [
moduleMetadata({
imports: [
JslibModule,
RouterModule.forRoot(
[
{
path: "",
component: OnboardingComponent,
},
],
{ useHash: true }
),
LinkModule,
IconModule,
ProgressModule,
PreloadedEnglishI18nModule,
],
imports: [JslibModule, RouterModule, LinkModule, IconModule, ProgressModule],
declarations: [OnboardingTaskComponent],
}),
applicationConfig({
providers: [
importProvidersFrom(RouterModule.forRoot([], { useHash: true })),
importProvidersFrom(PreloadedEnglishI18nModule),
],
}),
],
} as Meta;

29
bitwarden_license/bit-web/src/app/secrets-manager/shared/header.stories.ts
View File

@ -1,6 +1,12 @@
import { Component, Injectable } from "@angular/core";
import { Component, Injectable, importProvidersFrom } from "@angular/core";
import { RouterModule } from "@angular/router";
import { Meta, Story, moduleMetadata, componentWrapperDecorator } from "@storybook/angular";
import {
Meta,
Story,
moduleMetadata,
componentWrapperDecorator,
applicationConfig,
} from "@storybook/angular";
import { BehaviorSubject, combineLatest, map } from "rxjs";
import { JslibModule } from "@bitwarden/angular/jslib.module";
@ -16,8 +22,8 @@ import {
NavigationModule,
TabsModule,
TypographyModule,
InputModule,
} from "@bitwarden/components";
import { InputModule } from "@bitwarden/components/src/input/input.module";
import { PreloadedEnglishI18nModule } from "@bitwarden/web-vault/app/tests/preloaded-english-i18n.module";
import { HeaderComponent } from "./header.component";
@ -68,15 +74,7 @@ export default {
moduleMetadata({
imports: [
JslibModule,
RouterModule.forRoot(
[
{
path: "",
component: HeaderComponent,
},
],
{ useHash: true }
),
RouterModule,
AvatarModule,
BreadcrumbsModule,
ButtonModule,
@ -87,7 +85,6 @@ export default {
TabsModule,
TypographyModule,
NavigationModule,
PreloadedEnglishI18nModule,
],
declarations: [HeaderComponent, MockProductSwitcher, MockDynamicAvatar],
providers: [
@ -100,6 +97,12 @@ export default {
},
],
}),
applicationConfig({
providers: [
importProvidersFrom(RouterModule.forRoot([], { useHash: true })),
importProvidersFrom(PreloadedEnglishI18nModule),
],
}),
],
} as Meta;

0
libs/components/src/async-actions/in-forms.stories.mdx → libs/components/src/async-actions/in-forms.mdx
View File

20
libs/components/src/async-actions/in-forms.stories.ts
View File

@ -1,7 +1,7 @@
import { Component } from "@angular/core";
import { FormsModule, ReactiveFormsModule, Validators, FormBuilder } from "@angular/forms";
import { action } from "@storybook/addon-actions";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
import { delay, of } from "rxjs";
import { ValidationService } from "@bitwarden/common/abstractions/validation.service";
@ -145,16 +145,18 @@ export default {
],
} as Meta;
const PromiseTemplate: Story<PromiseExampleComponent> = (args: PromiseExampleComponent) => ({
type Story = StoryObj<PromiseExampleComponent>;
export const UsingPromise: Story = {
render: (args) => ({
props: args,
template: `<app-promise-example></app-promise-example>`,
});
}),
};
export const UsingPromise = PromiseTemplate.bind({});
const ObservableTemplate: Story<PromiseExampleComponent> = (args: PromiseExampleComponent) => ({
export const UsingObservable: Story = {
render: (args) => ({
props: args,
template: `<app-observable-example></app-observable-example>`,
});
export const UsingObservable = ObservableTemplate.bind({});
}),
};

0
libs/components/src/async-actions/overview.stories.mdx → libs/components/src/async-actions/overview.mdx
View File

0
libs/components/src/async-actions/standalone.stories.mdx → libs/components/src/async-actions/standalone.mdx
View File

33
libs/components/src/async-actions/standalone.stories.ts
View File

@ -1,6 +1,6 @@
import { Component } from "@angular/core";
import { action } from "@storybook/addon-actions";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { delay, of } from "rxjs";
import { LogService } from "@bitwarden/common/abstractions/log.service";
@ -80,25 +80,24 @@ export default {
],
} as Meta;
const PromiseTemplate: Story<PromiseExampleComponent> = (args: PromiseExampleComponent) => ({
type PromiseStory = StoryObj<PromiseExampleComponent>;
type ObservableStory = StoryObj<ObservableExampleComponent>;
export const UsingPromise: PromiseStory = {
render: (args) => ({
props: args,
template: `<app-promise-example></app-promise-example>`,
});
}),
};
export const UsingPromise = PromiseTemplate.bind({});
const ObservableTemplate: Story<ObservableExampleComponent> = (
args: ObservableExampleComponent
) => ({
export const UsingObservable: ObservableStory = {
render: (args) => ({
template: `<app-observable-example></app-observable-example>`,
});
}),
};
export const UsingObservable = ObservableTemplate.bind({});
const RejectedPromiseTemplate: Story<ObservableExampleComponent> = (
args: ObservableExampleComponent
) => ({
export const RejectedPromise: ObservableStory = {
render: (args) => ({
template: `<app-rejected-promise-example></app-rejected-promise-example>`,
});
export const RejectedPromise = RejectedPromiseTemplate.bind({});
}),
};

43
libs/components/src/avatar/avatar.stories.ts
View File

@ -1,4 +1,4 @@
import { Meta, Story } from "@storybook/angular";
import { Meta, StoryObj } from "@storybook/angular";
import { AvatarComponent } from "./avatar.component";
@ -18,41 +18,46 @@ export default {
},
} as Meta;
const Template: Story<AvatarComponent> = (args: AvatarComponent) => ({
props: args,
});
type Story = StoryObj<AvatarComponent>;
export const Default = Template.bind({});
Default.args = {
export const Default: Story = {
args: {
color: "#175ddc",
},
};
export const Large = Template.bind({});
Large.args = {
export const Large: Story = {
args: {
size: "large",
},
};
export const Small = Template.bind({});
Small.args = {
export const Small: Story = {
args: {
size: "small",
},
};
export const LightBackground = Template.bind({});
LightBackground.args = {
export const LightBackground: Story = {
args: {
color: "#d2ffcf",
},
};
export const Border = Template.bind({});
Border.args = {
export const Border: Story = {
args: {
border: true,
},
};
export const ColorByID = Template.bind({});
ColorByID.args = {
id: 236478,
export const ColorByID: Story = {
args: {
id: "236478",
},
};
export const ColorByText = Template.bind({});
ColorByText.args = {
export const ColorByText: Story = {
args: {
text: "Jason Doe",
},
};

13
libs/components/src/badge-list/badge-list.stories.ts
View File

@ -1,4 +1,4 @@
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@ -38,16 +38,19 @@ export default {
},
} as Meta;
const ListTemplate: Story<BadgeListComponent> = (args: BadgeListComponent) => ({
type Story = StoryObj<BadgeListComponent>;
export const Default: Story = {
render: (args) => ({
props: args,
template: `
<bit-badge-list [badgeType]="badgeType" [maxItems]="maxItems" [items]="items"></bit-badge-list>
`,
});
}),
export const Default = ListTemplate.bind({});
Default.args = {
args: {
badgeType: "info",
maxItems: 3,
items: ["Badge 1", "Badge 2", "Badge 3", "Badge 4", "Badge 5"],
},
};

45
libs/components/src/badge/badge.stories.ts
View File

@ -1,5 +1,5 @@
import { CommonModule } from "@angular/common";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
import { BadgeDirective } from "./badge.directive";
@ -21,9 +21,12 @@ export default {
url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=1881%3A16956",
},
},
} as Meta;
} as Meta<BadgeDirective>;
const Template: Story<BadgeDirective> = (args: BadgeDirective) => ({
type Story = StoryObj<BadgeDirective>;
export const Primary: Story = {
render: (args) => ({
props: args,
template: `
<span class="tw-text-main">Span </span><span bitBadge [badgeType]="badgeType">Badge</span>
@ -32,32 +35,40 @@ const Template: Story<BadgeDirective> = (args: BadgeDirective) => ({
<br><br>
<span class="tw-text-main">Button </span><button bitBadge [badgeType]="badgeType">Badge</button>
`,
});
}),
};
export const Primary = Template.bind({});
Primary.args = {};
export const Secondary = Template.bind({});
Secondary.args = {
export const Secondary: Story = {
...Primary,
args: {
badgeType: "secondary",
},
};
export const Success = Template.bind({});
Success.args = {
export const Success: Story = {
...Primary,
args: {
badgeType: "success",
},
};
export const Danger = Template.bind({});
Danger.args = {
export const Danger: Story = {
...Primary,
args: {
badgeType: "danger",
},
};
export const Warning = Template.bind({});
Warning.args = {
export const Warning: Story = {
...Primary,
args: {
badgeType: "warning",
},
};
export const Info = Template.bind({});
Info.args = {
export const Info: Story = {
...Primary,
args: {
badgeType: "info",
},
};

18
libs/components/src/stories/banner-docs.stories.mdx → libs/components/src/banner/banner.mdx
View File

@ -1,6 +1,8 @@
import { Meta, Story } from "@storybook/addon-docs";
import { Meta, Story, Controls, Canvas, Primary } from "@storybook/addon-docs";
<Meta title="Documentation/Banner" />
import * as stories from "./banner.stories";
<Meta of={stories} />
# Banner
@ -15,6 +17,10 @@ persist across all pages a user navigates to.
- Avoid stacking multiple banners.
- Banners support a button link (text button).
<Primary />
<Controls />
## Types
Icons should remain consistent across these types. Do not change the icon without consulting
@ -24,25 +30,25 @@ Use the following guidelines to help choose the correct type of banner.
### Premium
<Story id="component-library-banner--premium" />
<Story of={stories.Premium} />
Used primarily to encourage user to upgrade to premium.
### Info
<Story id="component-library-banner--info" />
<Story of={stories.Info} />
Used to communicate release notes, server maintenance or other informative event.
### Warning
<Story id="component-library-banner--warning" />
<Story of={stories.Warning} />
Used to alert the user of outdated info or versions.
### Danger
<Story id="component-library-banner--danger" />
<Story of={stories.Danger} />
Rarely used, but may be used to alert users over critical messages or very outdated versions.

34
libs/components/src/banner/banner.stories.ts
View File

@ -1,4 +1,4 @@
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@ -39,9 +39,15 @@ export default {
argTypes: {
onClose: { action: "onClose" },
},
} as Meta;
} as Meta<BannerComponent>;
const Template: Story<BannerComponent> = (args: BannerComponent) => ({
type Story = StoryObj<BannerComponent>;
export const Premium: Story = {
args: {
bannerType: "premium",
},
render: (args: BannerComponent) => ({
props: args,
template: `
<bit-banner [bannerType]="bannerType" (onClose)="onClose($event)">
@ -49,24 +55,30 @@ const Template: Story<BannerComponent> = (args: BannerComponent) => ({
<button bitLink linkType="contrast">Button</button>
</bit-banner>
`,
});
}),
};
export const Premium = Template.bind({});
Premium.args = {
bannerType: "premium",
};
export const Info = Template.bind({});
Info.args = {
export const Info: Story = {
...Premium,
args: {
bannerType: "info",
},
};
export const Warning = Template.bind({});
Warning.args = {
export const Warning: Story = {
...Premium,
args: {
bannerType: "warning",
},
};
export const Danger = Template.bind({});
Danger.args = {
export const Danger: Story = {
...Premium,
args: {
bannerType: "danger",
},
};

40
libs/components/src/breadcrumbs/breadcrumbs.stories.ts
View File

@ -1,6 +1,6 @@
import { Component } from "@angular/core";
import { Component, importProvidersFrom } from "@angular/core";
import { RouterModule } from "@angular/router";
import { Meta, Story, moduleMetadata } from "@storybook/angular";
import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/angular";
import { IconButtonModule } from "../icon-button";
import { LinkModule } from "../link";
@ -26,16 +26,19 @@ export default {
decorators: [
moduleMetadata({
declarations: [BreadcrumbComponent],
imports: [
LinkModule,
MenuModule,
IconButtonModule,
RouterModule.forRoot([{ path: "**", component: EmptyComponent }], { useHash: true }),
imports: [LinkModule, MenuModule, IconButtonModule, RouterModule],
}),
applicationConfig({
providers: [
importProvidersFrom(
RouterModule.forRoot([{ path: "**", component: EmptyComponent }], { useHash: true })
),
],
}),
],
args: {
items: [],
show: 3,
},
argTypes: {
breadcrumbs: {
@ -45,7 +48,10 @@ export default {
},
} as Meta;
const Template: Story<BreadcrumbsComponent> = (args: BreadcrumbsComponent) => ({
type Story = StoryObj<BreadcrumbsComponent & { items: Breadcrumb[] }>;
export const TopLevel: Story = {
render: (args) => ({
props: args,
template: `
<h3 class="tw-text-main">Router links</h3>
@ -62,23 +68,26 @@ const Template: Story<BreadcrumbsComponent> = (args: BreadcrumbsComponent) => ({
</bit-breadcrumbs>
</p>
`,
});
}),
export const TopLevel = Template.bind({});
TopLevel.args = {
args: {
items: [{ icon: "bwi-star", name: "Top Level" }] as Breadcrumb[],
},
};
export const SecondLevel = Template.bind({});
SecondLevel.args = {
export const SecondLevel: Story = {
...TopLevel,
args: {
items: [
{ name: "Acme Vault", route: "/" },
{ icon: "bwi-collection", name: "Collection", route: "collection" },
] as Breadcrumb[],
},
};
export const Overflow = Template.bind({});
Overflow.args = {
export const Overflow: Story = {
...TopLevel,
args: {
items: [
{ name: "Acme Vault", route: "" },
{ icon: "bwi-collection", name: "Collection", route: "collection" },
@ -88,4 +97,5 @@ Overflow.args = {
{ icon: "bwi-collection", name: "Middle-Collection 4", route: "middle-collection-4" },
{ icon: "bwi-collection", name: "End Collection", route: "end-collection" },
] as Breadcrumb[],
},
};

22
libs/components/src/stories/button-docs.stories.mdx → libs/components/src/button/button.mdx
View File

@ -1,12 +1,18 @@
import { Meta, Story } from "@storybook/addon-docs";
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
<Meta title="Documentation/Button" />
import * as stories from "./button.stories";
<Meta of={stories} />
# Button
Buttons are interactive elements that can be triggered using a mouse, keyboard, or touch. They are
used to indicate actions that can be performed by a user such as submitting a form.
<Primary />
<Controls />
## Guidelines
### Choosing the `<a>` or `<button>`
@ -50,7 +56,7 @@ Both submit and async action buttons use a loading button state while an action
button is preforming a long running task in the background like a server API call, be sure to review
the [Async Actions Directive](?path=/story/component-library-async-actions-overview--page).
<Story id="component-library-button--loading" />
<Story of={stories.Loading} />
## Styles
@ -58,14 +64,14 @@ There are 3 main styles for the button: Primary, Secondary, and Danger.
### Primary
<Story id="component-library-button--primary" />
<Story of={stories.Primary} />
Use the primary button styling for all Primary call to actions. An action is "primary" if it relates
to the main purpose of a page. There should never be 2 primary styled buttons next to each other.
### Secondary
<Story id="component-library-button--secondary" />
<Story of={stories.Secondary} />
The secondary styling should be used for secondary calls to action. An action is "secondary" if it
relates indirectly to the purpose of a page. There may be multiple secondary buttons next to each
@ -73,7 +79,7 @@ other; however, generally there should only be 1 or 2 calls to action per page.
### Danger
<Story id="component-library-button--danger" />
<Story of={stories.Danger} />
Use the danger styling only in settings when the user may preform a permanent action.
@ -82,11 +88,11 @@ Use the danger styling only in settings when the user may preform a permanent ac
Both the disabled and loading states use the default state’s color with a 60% opacity or
`tw-opacity-60`.
<Story id="component-library-button--disabled" />
<Story of={stories.Disabled} />
## Block
Typically button widths expand with their text. In some causes though buttons may need to be block
where the width is fixed and the text wraps to 2 lines if exceeding the button’s width.
<Story id="component-library-button--block" />
<Story of={stories.Block} />

64
libs/components/src/button/button.stories.ts
View File

@ -1,4 +1,4 @@
import { Meta, Story } from "@storybook/angular";
import { Meta, StoryObj } from "@storybook/angular";
import { ButtonComponent } from "./button.component";
@ -16,53 +16,62 @@ export default {
url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=5115%3A26950",
},
},
} as Meta;
} as Meta<ButtonComponent>;
const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
type Story = StoryObj<ButtonComponent>;
export const Primary: Story = {
render: (args) => ({
props: args,
template: `
<button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block">Button</button>
<a bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" href="#" class="tw-ml-2">Link</a>
`,
});
export const Primary = Template.bind({});
Primary.args = {
}),
args: {
buttonType: "primary",
},
};
export const Secondary = Template.bind({});
Secondary.args = {
export const Secondary: Story = {
...Primary,
args: {
buttonType: "secondary",
},
};
export const Danger = Template.bind({});
Danger.args = {
export const Danger: Story = {
...Primary,
args: {
buttonType: "danger",
},
};
const AllStylesTemplate: Story = (args) => ({
export const Loading: Story = {
render: (args) => ({
props: args,
template: `
<button bitButton [disabled]="disabled" [loading]="loading" [block]="block" buttonType="primary" class="tw-mr-2">Primary</button>
<button bitButton [disabled]="disabled" [loading]="loading" [block]="block" buttonType="secondary" class="tw-mr-2">Secondary</button>
<button bitButton [disabled]="disabled" [loading]="loading" [block]="block" buttonType="danger" class="tw-mr-2">Danger</button>
`,
});
export const Loading = AllStylesTemplate.bind({});
Loading.args = {
}),
args: {
disabled: false,
loading: true,
},
};
export const Disabled = AllStylesTemplate.bind({});
Disabled.args = {
export const Disabled: Story = {
...Loading,
args: {
disabled: true,
loading: false,
},
};
const DisabledWithAttributeTemplate: Story = (args) => ({
export const DisabledWithAttribute: Story = {
render: (args) => ({
props: args,
template: `
<ng-container *ngIf="disabled">
@ -76,15 +85,15 @@ const DisabledWithAttributeTemplate: Story = (args) => ({
<button bitButton [loading]="loading" [block]="block" buttonType="danger" class="tw-mr-2">Danger</button>
</ng-container>
`,
});
export const DisabledWithAttribute = DisabledWithAttributeTemplate.bind({});
DisabledWithAttribute.args = {
}),
args: {
disabled: true,
loading: false,
},
};
const BlockTemplate: Story<ButtonComponent> = (args: ButtonComponent) => ({
export const Block: Story = {
render: (args: ButtonComponent) => ({
props: args,
template: `
<span class="tw-flex">
@ -95,9 +104,8 @@ const BlockTemplate: Story<ButtonComponent> = (args: ButtonComponent) => ({
<a bitButton [buttonType]="buttonType" block href="#" class="tw-ml-2">block Link</a>
</span>
`,
});
export const Block = BlockTemplate.bind({});
Block.args = {
}),
args: {
block: true,
},
};

32
libs/components/src/callout/callout.stories.ts
View File

@ -1,4 +1,4 @@
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@ -35,31 +35,39 @@ export default {
},
} as Meta;
const Template: Story<CalloutComponent> = (args: CalloutComponent) => ({
type Story = StoryObj<CalloutComponent>;
export const Success: Story = {
render: (args) => ({
props: args,
template: `
<bit-callout [type]="type" [title]="title">Content</bit-callout>
`,
});
export const Success = Template.bind({});
Success.args = {
}),
args: {
type: "success",
title: "Success",
},
};
export const Info = Template.bind({});
Info.args = {
export const Info: Story = {
...Success,
args: {
type: "info",
title: "Info",
},
};
export const Warning = Template.bind({});
Warning.args = {
export const Warning: Story = {
...Success,
args: {
type: "warning",
},
};
export const Danger = Template.bind({});
Danger.args = {
export const Danger: Story = {
...Success,
args: {
type: "danger",
},
};

27
libs/components/src/checkbox/checkbox.stories.ts
View File

@ -1,6 +1,6 @@
import { Component, Input } from "@angular/core";
import { FormsModule, ReactiveFormsModule, FormBuilder, Validators } from "@angular/forms";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/src/abstractions/i18n.service";
@ -69,25 +69,28 @@ export default {
},
} as Meta;
const DefaultTemplate: Story<ExampleComponent> = (args: ExampleComponent) => ({
type Story = StoryObj<ExampleComponent>;
export const Default: Story = {
render: (args) => ({
props: args,
template: `<app-example [checked]="checked" [disabled]="disabled"></app-example>`,
});
export const Default = DefaultTemplate.bind({});
Default.parameters = {
}),
parameters: {
docs: {
source: {
code: template,
},
},
};
Default.args = {
},
args: {
checked: false,
disabled: false,
},
};
const CustomTemplate: Story = (args) => ({
export const Custom: Story = {
render: (args) => ({
props: args,
template: `
<div class="tw-flex tw-flex-col tw-w-32">
@ -105,7 +108,5 @@ const CustomTemplate: Story = (args) => ({
</label>
</div>
`,
});
CustomTemplate.args = {};
export const Custom = CustomTemplate.bind({});
}),
};

2
libs/components/src/color-password/color-password.component.ts
View File

@ -23,7 +23,7 @@ enum CharacterType {
preserveWhitespaces: false,
})
export class ColorPasswordComponent {
@Input() private password: string = null;
@Input() password: string = null;
@Input() showCount = false;
characterStyles: Record<CharacterType, string[]> = {

38
libs/components/src/color-password/color-password.stories.ts
View File

@ -1,4 +1,4 @@
import { Meta, Story } from "@storybook/angular";
import { Meta, StoryObj } from "@storybook/angular";
import { ColorPasswordComponent } from "./color-password.component";
@ -19,34 +19,40 @@ export default {
},
} as Meta;
const Template: Story<ColorPasswordComponent> = (args: ColorPasswordComponent) => ({
type Story = StoryObj<ColorPasswordComponent>;
export const ColorPassword: Story = {
render: (args) => ({
props: args,
template: `
<bit-color-password class="tw-text-base" [password]="password" [showCount]="showCount"></bit-color-password>
`,
});
}),
};
const WrappedTemplate: Story<ColorPasswordComponent> = (args: ColorPasswordComponent) => ({
export const WrappedColorPassword: Story = {
render: (args) => ({
props: args,
template: `
<div class="tw-max-w-32">
<bit-color-password class="tw-text-base" [password]="password" [showCount]="showCount"></bit-color-password>
</div>
`,
});
export const ColorPassword = Template.bind({});
export const WrappedColorPassword = WrappedTemplate.bind({});
export const ColorPasswordCount = Template.bind({});
ColorPasswordCount.args = {
password: examplePassword,
showCount: true,
}),
};
export const WrappedColorPasswordCount = WrappedTemplate.bind({});
WrappedColorPasswordCount.args = {
export const ColorPasswordCount: Story = {
...ColorPassword,
args: {
password: examplePassword,
showCount: true,
},
};
export const WrappedColorPasswordCount: Story = {
...WrappedColorPassword,
args: {
password: examplePassword,
showCount: true,
},
};

8
libs/components/src/dialog/dialog.service.stories.ts
View File

@ -1,6 +1,6 @@
import { DIALOG_DATA, DialogModule, DialogRef } from "@angular/cdk/dialog";
import { Component, Inject } from "@angular/core";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@ -90,8 +90,6 @@ export default {
},
} as Meta;
const Template: Story<StoryDialogComponent> = (args: StoryDialogComponent) => ({
props: args,
});
type Story = StoryObj<StoryDialogComponent>;
export const Default = Template.bind({});
export const Default: Story = {};

60
libs/components/src/dialog/dialog/dialog.stories.ts
View File

@ -1,4 +1,4 @@
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@ -50,7 +50,10 @@ export default {
},
} as Meta;
const Template: Story<DialogComponent> = (args: DialogComponent) => ({
type Story = StoryObj<DialogComponent & { title: string }>;
export const Default: Story = {
render: (args: DialogComponent) => ({
props: args,
template: `
<bit-dialog [dialogSize]="dialogSize" [loading]="loading" [disablePadding]="disablePadding">
@ -70,40 +73,48 @@ const Template: Story<DialogComponent> = (args: DialogComponent) => ({
</ng-container>
</bit-dialog>
`,
});
export const Default = Template.bind({});
Default.args = {
}),
args: {
dialogSize: "default",
title: "Default",
},
};
export const Small = Template.bind({});
Small.args = {
export const Small: Story = {
...Default,
args: {
dialogSize: "small",
title: "Small",
},
};
export const LongTitle = Template.bind({});
LongTitle.args = {
export const LongTitle: Story = {
...Default,
args: {
dialogSize: "small",
title: "Long_Title_That_Should_Be_Truncated",
},
};
export const Large = Template.bind({});
Large.args = {
export const Large: Story = {
...Default,
args: {
dialogSize: "large",
title: "Large",
},
};
export const Loading = Template.bind({});
Loading.args = {
export const Loading: Story = {
...Default,
args: {
dialogSize: "large",
loading: true,
title: "Loading",
},
};
const TemplateScrolling: Story<DialogComponent> = (args: DialogComponent) => ({
export const ScrollingContent: Story = {
render: (args: DialogComponent) => ({
props: args,
template: `
<bit-dialog [dialogSize]="dialogSize" [loading]="loading" [disablePadding]="disablePadding">
@ -121,14 +132,14 @@ const TemplateScrolling: Story<DialogComponent> = (args: DialogComponent) => ({
</ng-container>
</bit-dialog>
`,
});
export const ScrollingContent = TemplateScrolling.bind({});
ScrollingContent.args = {
}),
args: {
dialogSize: "small",
},
};
const TemplateTabbed: Story<DialogComponent> = (args: DialogComponent) => ({
export const TabContent: Story = {
render: (args) => ({
props: args,
template: `
<bit-dialog [dialogSize]="dialogSize" [disablePadding]="disablePadding">
@ -146,14 +157,11 @@ const TemplateTabbed: Story<DialogComponent> = (args: DialogComponent) => ({
</ng-container>
</bit-dialog>
`,
});
export const TabContent = TemplateTabbed.bind({});
TabContent.args = {
}),
args: {
dialogSize: "large",
disablePadding: true,
};
TabContent.story = {
},
parameters: {
docs: {
storyDescription: `An example of using the \`bitTabGroup\` component within the Dialog. The content padding should be

8
libs/components/src/dialog/simple-configurable-dialog/simple-configurable-dialog.service.stories.ts
View File

@ -1,6 +1,6 @@
import { DialogModule } from "@angular/cdk/dialog";
import { Component } from "@angular/core";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { SimpleDialogType, SimpleDialogOptions } from "@bitwarden/angular/services/dialog";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@ -239,8 +239,6 @@ export default {
},
} as Meta;
const Template: Story<StoryDialogComponent> = (args: StoryDialogComponent) => ({
props: args,
});
type Story = StoryObj<StoryDialogComponent>;
export const Default = Template.bind({});
export const Default: Story = {};

8
libs/components/src/dialog/simple-dialog.service.stories.ts
View File

@ -1,6 +1,6 @@
import { DialogModule, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
import { Component, Inject } from "@angular/core";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@ -90,8 +90,6 @@ export default {
},
} as Meta;
const Template: Story<StoryDialogComponent> = (args: StoryDialogComponent) => ({
props: args,
});
type Story = StoryObj<StoryDialogComponent>;
export const Default = Template.bind({});
export const Default: Story = {};

30
libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts
View File

@ -1,4 +1,4 @@
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { ButtonModule } from "../../button";
import { DialogTitleContainerDirective } from "../directives/dialog-title-container.directive";
@ -22,7 +22,10 @@ export default {
},
} as Meta;
const Template: Story<SimpleDialogComponent> = (args: SimpleDialogComponent) => ({
type Story = StoryObj<SimpleDialogComponent & { useDefaultIcon: boolean }>;
export const Default: Story = {
render: (args) => ({
props: args,
template: `
<bit-simple-dialog>
@ -34,11 +37,11 @@ const Template: Story<SimpleDialogComponent> = (args: SimpleDialogComponent) =>
</ng-container>
</bit-simple-dialog>
`,
});
}),
};
export const Default = Template.bind({});
const TemplateWithIcon: Story<SimpleDialogComponent> = (args: SimpleDialogComponent) => ({
export const CustomIcon: Story = {
render: (args) => ({
props: args,
template: `
<bit-simple-dialog>
@ -51,11 +54,11 @@ const TemplateWithIcon: Story<SimpleDialogComponent> = (args: SimpleDialogCompon
</ng-container>
</bit-simple-dialog>
`,
});
}),
};
export const CustomIcon = TemplateWithIcon.bind({});
const TemplateScroll: Story<SimpleDialogComponent> = (args: SimpleDialogComponent) => ({
export const ScrollingContent: Story = {
render: (args: SimpleDialogComponent) => ({
props: args,
template: `
<bit-simple-dialog>
@ -74,9 +77,8 @@ const TemplateScroll: Story<SimpleDialogComponent> = (args: SimpleDialogComponen
</ng-container>
</bit-simple-dialog>
`,
});
export const ScrollingContent = TemplateScroll.bind({});
ScrollingContent.args = {
}),
args: {
useDefaultIcon: true,
},
};

8
libs/components/src/form-field/bit-validators.stories.ts
View File

@ -1,5 +1,5 @@
import { FormsModule, ReactiveFormsModule, FormBuilder } from "@angular/forms";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { StoryObj, Meta, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@ -46,11 +46,13 @@ const template = `
</bit-form-field>
</form>`;
export const ForbiddenCharacters: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) => ({
export const ForbiddenCharacters: StoryObj<BitFormFieldComponent> = {
render: (args: BitFormFieldComponent) => ({
props: {
formObj: new FormBuilder().group({
name: ["", forbiddenCharacters(["\\", "/", "@", "#", "$", "%", "^", "&", "*", "(", ")"])],
}),
},
template,
});
}),
};

11
libs/components/src/form-field/error-summary.stories.ts
View File

@ -1,5 +1,5 @@
import { UntypedFormBuilder, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@ -50,7 +50,8 @@ function submit() {
formObj.markAllAsTouched();
}
const Template: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) => ({
export const Default: StoryObj<BitFormFieldComponent> = {
render: (args) => ({
props: {
formObj: formObj,
submit: submit,
@ -72,7 +73,5 @@ const Template: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) =>
<bit-error-summary [formGroup]="formObj"></bit-error-summary>
</form>
`,
});
export const Default = Template.bind({});
Default.props = {};
}),
};

101
libs/components/src/form-field/form-field.stories.ts
View File

@ -7,7 +7,7 @@ import {
ValidatorFn,
Validators,
} from "@angular/forms";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@ -87,8 +87,10 @@ function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
function submit() {
defaultFormObj.markAllAsTouched();
}
type Story = StoryObj<BitFormFieldComponent>;
const Template: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) => ({
export const Default: Story = {
render: (args) => ({
props: {
formObj: defaultFormObj,
submit: submit,
@ -103,12 +105,11 @@ const Template: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) =>
</bit-form-field>
</form>
`,
});
}),
};
export const Default = Template.bind({});
Default.props = {};
const RequiredTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) => ({
export const Required: Story = {
render: (args) => ({
props: {
formObj: formObj,
...args,
@ -124,12 +125,11 @@ const RequiredTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldCompon
<input bitInput formControlName="required" placeholder="Placeholder" />
</bit-form-field>
`,
});
}),
};
export const Required = RequiredTemplate.bind({});
Required.props = {};
const HintTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) => ({
export const Hint: Story = {
render: (args: BitFormFieldComponent) => ({
props: {
formObj: formObj,
...args,
@ -141,12 +141,11 @@ const HintTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldComponent)
<bit-hint>Long hint text</bit-hint>
</bit-form-field>
`,
});
}),
};
export const Hint = HintTemplate.bind({});
Required.props = {};
const DisabledTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) => ({
export const Disabled: Story = {
render: (args) => ({
props: args,
template: `
<bit-form-field>
@ -154,12 +153,12 @@ const DisabledTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldCompon
<input bitInput placeholder="Placeholder" disabled />
</bit-form-field>
`,
});
}),
args: {},
};
export const Disabled = DisabledTemplate.bind({});
Disabled.args = {};
const GroupTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) => ({
export const InputGroup: Story = {
render: (args) => ({
props: args,
template: `
<bit-form-field>
@ -169,12 +168,12 @@ const GroupTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldComponent
<span bitSuffix>USD</span>
</bit-form-field>
`,
});
}),
args: {},
};
export const InputGroup = GroupTemplate.bind({});
InputGroup.args = {};
const ButtonGroupTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) => ({
export const ButtonInputGroup: Story = {
render: (args) => ({
props: args,
template: `
<bit-form-field>
@ -187,14 +186,12 @@ const ButtonGroupTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldCom
</button>
</bit-form-field>
`,
});
}),
args: {},
};
export const ButtonInputGroup = ButtonGroupTemplate.bind({});
ButtonInputGroup.args = {};
const DisabledButtonInputGroupTemplate: Story<BitFormFieldComponent> = (
args: BitFormFieldComponent
) => ({
export const DisabledButtonInputGroup: Story = {
render: (args) => ({
props: args,
template: `
<bit-form-field>
@ -208,12 +205,12 @@ const DisabledButtonInputGroupTemplate: Story<BitFormFieldComponent> = (
</button>
</bit-form-field>
`,
});
}),
args: {},
};
export const DisabledButtonInputGroup = DisabledButtonInputGroupTemplate.bind({});
DisabledButtonInputGroup.args = {};
const SelectTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) => ({
export const Select: Story = {
render: (args: BitFormFieldComponent) => ({
props: args,
template: `
<bit-form-field>
@ -224,12 +221,12 @@ const SelectTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldComponen
</select>
</bit-form-field>
`,
});
}),
args: {},
};
export const Select = SelectTemplate.bind({});
Select.args = {};
const AdvancedSelectTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) => ({
export const AdvancedSelect: Story = {
render: (args: BitFormFieldComponent) => ({
props: args,
template: `
<bit-form-field>
@ -240,12 +237,11 @@ const AdvancedSelectTemplate: Story<BitFormFieldComponent> = (args: BitFormField
</bit-select>
</bit-form-field>
`,
});
}),
};
export const AdvancedSelect = AdvancedSelectTemplate.bind({});
AdvancedSelectTemplate.args = {};
const TextareaTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldComponent) => ({
export const Textarea: Story = {
render: (args: BitFormFieldComponent) => ({
props: args,
template: `
<bit-form-field>
@ -253,7 +249,6 @@ const TextareaTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldCompon
<textarea bitInput rows="4"></textarea>
</bit-form-field>
`,
});
export const Textarea = TextareaTemplate.bind({});
Textarea.args = {};
}),
args: {},
};

77
libs/components/src/form-field/multi-select.stories.ts
View File

@ -7,7 +7,7 @@ import {
} from "@angular/forms";
import { NgSelectModule } from "@ng-select/ng-select";
import { action } from "@storybook/addon-actions";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@ -75,7 +75,10 @@ function submit(formObj: FormGroup) {
formObj.markAllAsTouched();
}
const MultiSelectTemplate: Story<MultiSelectComponent> = (args: MultiSelectComponent) => ({
type Story = StoryObj<MultiSelectComponent & { name: string; hint: string }>;
export const Loading: Story = {
render: (args) => ({
props: {
formObj: formObjFactory(),
submit: submit,
@ -100,25 +103,27 @@ const MultiSelectTemplate: Story<MultiSelectComponent> = (args: MultiSelectCompo
<button type="submit" bitButton buttonType="primary">Submit</button>
</form>
`,
});
export const Loading = MultiSelectTemplate.bind({});
Loading.args = {
baseItems: [],
}),
args: {
baseItems: [] as any,
name: "Loading",
hint: "This is what a loading multi-select looks like",
loading: "true",
loading: true,
},
};
export const Disabled = MultiSelectTemplate.bind({});
Disabled.args = {
export const Disabled: Story = {
...Loading,
args: {
name: "Disabled",
disabled: "true",
disabled: true,
hint: "This is what a disabled multi-select looks like",
},
};
export const Groups = MultiSelectTemplate.bind({});
Groups.args = {
export const Groups: Story = {
...Loading,
args: {
name: "Select groups",
hint: "Groups will be assigned to the associated member",
baseItems: [
@ -130,10 +135,12 @@ Groups.args = {
{ id: "6", listName: "Group 6", labelName: "Group 6", icon: "bwi-family" },
{ id: "7", listName: "Group 7", labelName: "Group 7", icon: "bwi-family" },
],
},
};
export const Members = MultiSelectTemplate.bind({});
Members.args = {
export const Members: Story = {
...Loading,
args: {
name: "Select members",
hint: "Members will be assigned to the associated group/collection",
baseItems: [
@ -162,7 +169,12 @@ Members.args = {
labelName: "Ashley Fletcher",
icon: "bwi-user",
},
{ id: "6", listName: "Rita Olson (rolson@mail.me)", labelName: "Rita Olson", icon: "bwi-user" },
{
id: "6",
listName: "Rita Olson (rolson@mail.me)",
labelName: "Rita Olson",
icon: "bwi-user",
},
{
id: "7",
listName: "Final listName (fname@mail.me)",
@ -170,10 +182,12 @@ Members.args = {
icon: "bwi-user",
},
],
},
};
export const Collections = MultiSelectTemplate.bind({});
Collections.args = {
export const Collections: Story = {
...Loading,
args: {
name: "Select collections",
hint: "Collections will be assigned to the associated member",
baseItems: [
@ -213,10 +227,12 @@ Collections.args = {
{ id: "6", listName: "Collection 6", labelName: "Collection 6", icon: "bwi-collection" },
{ id: "7", listName: "Collection 7", labelName: "Collection 7", icon: "bwi-collection" },
],
},
};
export const MembersAndGroups = MultiSelectTemplate.bind({});
MembersAndGroups.args = {
export const MembersAndGroups: Story = {
...Loading,
args: {
name: "Select groups and members",
hint: "Members/Groups will be assigned to the associated collection",
baseItems: [
@ -233,10 +249,12 @@ MembersAndGroups.args = {
icon: "bwi-user",
},
],
},
};
export const RemoveSelected = MultiSelectTemplate.bind({});
RemoveSelected.args = {
export const RemoveSelected: Story = {
...Loading,
args: {
name: "Select groups",
hint: "Groups will be removed from the list once the dropdown is closed",
baseItems: [
@ -248,10 +266,12 @@ RemoveSelected.args = {
{ id: "6", listName: "Group 6", labelName: "Group 6", icon: "bwi-family" },
{ id: "7", listName: "Group 7", labelName: "Group 7", icon: "bwi-family" },
],
removeSelectedItems: "true",
removeSelectedItems: true,
},
};
const StandaloneTemplate: Story<MultiSelectComponent> = (args: MultiSelectComponent) => ({
export const Standalone: Story = {
render: (args) => ({
props: {
...args,
onItemsConfirmed: actionsData.onItemsConfirmed,
@ -266,10 +286,8 @@ const StandaloneTemplate: Story<MultiSelectComponent> = (args: MultiSelectCompon
(onItemsConfirmed)="onItemsConfirmed($event)">
</bit-multi-select>
`,
});
export const Standalone = StandaloneTemplate.bind({});
Standalone.args = {
}),
args: {
baseItems: [
{ id: "1", listName: "Group 1", labelName: "Group 1", icon: "bwi-family" },
{ id: "2", listName: "Group 2", labelName: "Group 2", icon: "bwi-family" },
@ -279,5 +297,6 @@ Standalone.args = {
{ id: "6", listName: "Group 6", labelName: "Group 6", icon: "bwi-family" },
{ id: "7", listName: "Group 7", labelName: "Group 7", icon: "bwi-family" },
],
removeSelectedItems: "true",
removeSelectedItems: true,
},
};

35
libs/components/src/form-field/password-input-toggle.stories.ts
View File

@ -1,5 +1,5 @@
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@ -38,12 +38,11 @@ export default {
},
} as Meta;
const Template: Story<BitPasswordInputToggleDirective> = (
args: BitPasswordInputToggleDirective
) => ({
props: {
...args,
},
type Story = StoryObj<BitPasswordInputToggleDirective>;
export const Default: Story = {
render: (args) => ({
props: args,
template: `
<form>
<bit-form-field>
@ -53,17 +52,12 @@ const Template: Story<BitPasswordInputToggleDirective> = (
</bit-form-field>
</form>
`,
});
}),
};
export const Default = Template.bind({});
Default.props = {};
const TemplateBinding: Story<BitPasswordInputToggleDirective> = (
args: BitPasswordInputToggleDirective
) => ({
props: {
...args,
},
export const Binding: Story = {
render: (args) => ({
props: args,
template: `
<form>
<bit-form-field>
@ -78,9 +72,8 @@ const TemplateBinding: Story<BitPasswordInputToggleDirective> = (
</label>
</form>
`,
});
export const Binding = TemplateBinding.bind({});
Binding.props = {
}),
args: {
toggled: false,
},
};

13
libs/components/src/form/form.stories.ts
View File

@ -7,7 +7,7 @@ import {
ValidatorFn,
Validators,
} from "@angular/forms";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@ -81,7 +81,10 @@ function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
};
}
const FullExampleTemplate: Story = (args) => ({
type Story = StoryObj;
export const FullExample: Story = {
render: (args) => ({
props: {
formObj: exampleFormObj,
submit: () => exampleFormObj.markAllAsTouched(),
@ -139,9 +142,9 @@ const FullExampleTemplate: Story = (args) => ({
<button type="submit" bitButton buttonType="primary">Submit</button>
</form>
`,
});
}),
export const FullExample = FullExampleTemplate.bind({});
FullExample.args = {
args: {
countries,
},
};

20
libs/components/src/icon-button/icon-button.stories.ts
View File

@ -1,4 +1,4 @@
import { Meta, Story } from "@storybook/angular";
import { Meta, StoryObj } from "@storybook/angular";
import { BitIconButtonComponent, IconButtonType } from "./icon-button.component";
@ -31,7 +31,10 @@ export default {
},
} as Meta;
const Template: Story<BitIconButtonComponent> = (args: BitIconButtonComponent) => ({
type Story = StoryObj<BitIconButtonComponent>;
export const Default: Story = {
render: (args: BitIconButtonComponent) => ({
props: { ...args, buttonTypes },
template: `
<table class="tw-border-spacing-2 tw-text-center tw-text-main">
@ -85,14 +88,15 @@ const Template: Story<BitIconButtonComponent> = (args: BitIconButtonComponent) =
</tbody>
</table>
`,
});
export const Default = Template.bind({});
Default.args = {
}),
args: {
size: "default",
},
};
export const Small = Template.bind({});
Small.args = {
export const Small: Story = {
...Default,
args: {
size: "small",
},
};

22
libs/components/src/icon/icon.stories.ts
View File

@ -1,4 +1,4 @@
import { Meta, Story } from "@storybook/angular";
import { Meta, StoryObj } from "@storybook/angular";
import { BitIconComponent } from "./icon.component";
@ -10,18 +10,22 @@ export default {
},
} as Meta;
const Template: Story<BitIconComponent> = (args: BitIconComponent) => ({
type Story = StoryObj<BitIconComponent>;
export const ReportExposedPasswords: Story = {
render: (args) => ({
props: args,
template: `
<div class="tw-bg-primary-500 tw-p-5">
<bit-icon [icon]="icon" class="tw-text-primary-300"></bit-icon>
</div>
`,
});
export const ReportExposedPasswords = Template.bind({});
export const UnknownIcon = Template.bind({});
UnknownIcon.args = {
icon: "unknown",
}),
};
export const UnknownIcon: Story = {
...ReportExposedPasswords,
args: {
icon: "unknown" as any,
},
};

1
libs/components/src/index.ts
View File

@ -12,6 +12,7 @@ export * from "./dialog";
export * from "./form-field";
export * from "./icon-button";
export * from "./icon";
export * from "./input";
export * from "./link";
export * from "./menu";
export * from "./multi-select";

1
libs/components/src/input/index.ts Normal file
View File

@ -0,0 +1 @@
export * from "./input.module";

48
libs/components/src/link/link.stories.ts
View File

@ -1,4 +1,4 @@
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { AnchorLinkDirective, ButtonLinkDirective } from "./link.directive";
import { LinkModule } from "./link.module";
@ -24,7 +24,10 @@ export default {
},
} as Meta;
const ButtonTemplate: Story<ButtonLinkDirective> = (args: ButtonLinkDirective) => ({
type Story = StoryObj<ButtonLinkDirective>;
export const Buttons: Story = {
render: (args) => ({
props: args,
template: `
<div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-500': linkType === 'contrast' }">
@ -48,9 +51,14 @@ const ButtonTemplate: Story<ButtonLinkDirective> = (args: ButtonLinkDirective) =
</div>
</div>
`,
});
}),
args: {
linkType: "primary",
},
};
const AnchorTemplate: Story<AnchorLinkDirective> = (args: AnchorLinkDirective) => ({
export const Anchors: StoryObj<AnchorLinkDirective> = {
render: (args) => ({
props: args,
template: `
<div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-500': linkType === 'contrast' }">
@ -74,33 +82,28 @@ const AnchorTemplate: Story<AnchorLinkDirective> = (args: AnchorLinkDirective) =
</div>
</div>
`,
});
export const Buttons = ButtonTemplate.bind({});
Buttons.args = {
}),
args: {
linkType: "primary",
},
};
export const Anchors = AnchorTemplate.bind({});
Anchors.args = {
linkType: "primary",
};
const InlineTemplate: Story = (args) => ({
export const Inline: Story = {
render: (args) => ({
props: args,
template: `
<span class="tw-text-main">
On the internet paragraphs often contain <a bitLink href="#">inline links</a>, but few know that <button bitLink>buttons</button> can be used for similar purposes.
</span>
`,
});
export const Inline = InlineTemplate.bind({});
Inline.args = {
}),
args: {
linkType: "primary",
},
};
const DisabledTemplate: Story = (args) => ({
export const Disabled: Story = {
render: (args) => ({
props: args,
template: `
<button bitLink disabled linkType="primary" class="tw-mr-2">Primary</button>
@ -109,12 +112,11 @@ const DisabledTemplate: Story = (args) => ({
<button bitLink disabled linkType="contrast" class="tw-mr-2">Contrast</button>
</div>
`,
});
export const Disabled = DisabledTemplate.bind({});
Disabled.parameters = {
}),
parameters: {
controls: {
exclude: ["linkType"],
hideNoControlsWarning: true,
},
},
};

20
libs/components/src/menu/menu.stories.ts
View File

@ -1,5 +1,5 @@
import { OverlayModule } from "@angular/cdk/overlay";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { ButtonModule } from "../button/button.module";
@ -30,7 +30,10 @@ export default {
},
} as Meta;
const Template: Story<MenuTriggerForDirective> = (args: MenuTriggerForDirective) => ({
type Story = StoryObj<MenuTriggerForDirective>;
export const OpenMenu: Story = {
render: (args) => ({
props: args,
template: `
<bit-menu #myMenu="menuComponent">
@ -47,9 +50,10 @@ const Template: Story<MenuTriggerForDirective> = (args: MenuTriggerForDirective)
</div>
</div>
`,
});
const TemplateWithButton: Story<MenuTriggerForDirective> = (args: MenuTriggerForDirective) => ({
}),
};
export const ClosedMenu: Story = {
render: (args) => ({
props: args,
template: `
<div class="tw-h-40">
@ -63,7 +67,5 @@ const TemplateWithButton: Story<MenuTriggerForDirective> = (args: MenuTriggerFor
<bit-menu-divider></bit-menu-divider>
<button type="button" bitMenuItem>Button after divider</button>
</bit-menu>`,
});
export const OpenMenu = Template.bind({});
export const ClosedMenu = TemplateWithButton.bind({});
}),
};

14
libs/components/src/navigation/nav-group.stories.ts
View File

@ -1,5 +1,5 @@
import { RouterTestingModule } from "@angular/router/testing";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { StoryObj, Meta, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@ -36,7 +36,8 @@ export default {
},
} as Meta;
export const Default: Story<NavGroupComponent> = (args) => ({
export const Default: StoryObj<NavGroupComponent> = {
render: (args) => ({
props: args,
template: `
<bit-nav-group text="Hello World (Anchor)" [route]="['']" icon="bwi-filter" [open]="true">
@ -50,9 +51,11 @@ export const Default: Story<NavGroupComponent> = (args) => ({
<bit-nav-item text="Child C" icon="bwi-filter"></bit-nav-item>
</bit-nav-group>
`,
});
}),
};
export const Tree: Story<NavGroupComponent> = (args) => ({
export const Tree: StoryObj<NavGroupComponent> = {
render: (args) => ({
props: args,
template: `
<bit-nav-group text="Tree example" icon="bwi-collection" [open]="true">
@ -71,4 +74,5 @@ export const Tree: Story<NavGroupComponent> = (args) => ({
<bit-nav-item text="Level 1 - no children" route="#" icon="bwi-collection" variant="tree"></bit-nav-item>
</bit-nav-group>
`,
});
}),
};

38
libs/components/src/navigation/nav-item.stories.ts
View File

@ -1,5 +1,5 @@
import { RouterTestingModule } from "@angular/router/testing";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { StoryObj, Meta, moduleMetadata } from "@storybook/angular";
import { IconButtonModule } from "../icon-button";
@ -23,33 +23,40 @@ export default {
},
} as Meta;
const Template: Story<NavItemComponent> = (args: NavItemComponent) => ({
type Story = StoryObj<NavItemComponent>;
export const Default: Story = {
render: (args) => ({
props: args,
template: `
<bit-nav-item text="${args.text}" [route]="['']" icon="${args.icon}"></bit-nav-item>
`,
});
export const Default = Template.bind({});
Default.args = {
}),
args: {
text: "Hello World",
icon: "bwi-filter",
},
};
export const WithoutIcon = Template.bind({});
WithoutIcon.args = {
export const WithoutIcon: Story = {
...Default,
args: {
text: "Hello World",
icon: "",
},
};
export const WithoutRoute: Story<NavItemComponent> = (args: NavItemComponent) => ({
export const WithoutRoute: Story = {
render: (args: NavItemComponent) => ({
props: args,
template: `
<bit-nav-item text="Hello World" icon="bwi-collection"></bit-nav-item>
`,
});
}),
};
export const WithChildButtons: Story<NavItemComponent> = (args: NavItemComponent) => ({
export const WithChildButtons: Story = {
render: (args: NavItemComponent) => ({
props: args,
template: `
<bit-nav-item text="Hello World" [route]="['']" icon="bwi-collection">
@ -79,9 +86,11 @@ export const WithChildButtons: Story<NavItemComponent> = (args: NavItemComponent
></button>
</bit-nav-item>
`,
});
}),
};
export const MultipleItemsWithDivider: Story<NavItemComponent> = (args: NavItemComponent) => ({
export const MultipleItemsWithDivider: Story = {
render: (args: NavItemComponent) => ({
props: args,
template: `
<bit-nav-item text="Hello World" icon="bwi-collection"></bit-nav-item>
@ -90,4 +99,5 @@ export const MultipleItemsWithDivider: Story<NavItemComponent> = (args: NavItemC
<bit-nav-item text="Hello World" icon="bwi-collection"></bit-nav-item>
<bit-nav-item text="Hello World" icon="bwi-collection"></bit-nav-item>
`,
});
}),
};

14
libs/components/src/no-items/no-items.stories.ts
View File

@ -1,11 +1,13 @@
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { ButtonModule } from "../button";
import { NoItemsComponent } from "./no-items.component";
import { NoItemsModule } from "./no-items.module";
export default {
title: "Component Library/No Items",
component: NoItemsComponent,
decorators: [
moduleMetadata({
imports: [ButtonModule, NoItemsModule],
@ -13,7 +15,10 @@ export default {
],
} as Meta;
const Template: Story = (args) => ({
type Story = StoryObj<NoItemsComponent>;
export const Default: Story = {
render: (args) => ({
props: args,
template: `
<bit-no-items class="tw-text-main">
@ -30,6 +35,5 @@ const Template: Story = (args) => ({
</button>
</bit-no-items>
`,
});
export const Default = Template.bind({});
}),
};

21
libs/components/src/progress/progress.stories.ts
View File

@ -1,4 +1,4 @@
import { Meta, Story } from "@storybook/angular";
import { Meta, StoryObj } from "@storybook/angular";
import { ProgressComponent } from "./progress.component";
@ -18,22 +18,23 @@ export default {
},
} as Meta;
const Template: Story<ProgressComponent> = (args: ProgressComponent) => ({
props: args,
});
type Story = StoryObj<ProgressComponent>;
export const Empty = Template.bind({});
Empty.args = {
export const Empty: Story = {
args: {
barWidth: 0,
},
};
export const Full = Template.bind({});
Full.args = {
export const Full: Story = {
args: {
barWidth: 100,
},
};
export const CustomText = Template.bind({});
CustomText.args = {
export const CustomText: Story = {
args: {
barWidth: 25,
text: "Loading...",
},
};

22
libs/components/src/radio-button/radio-button.stories.ts
View File

@ -1,5 +1,5 @@
import { FormsModule, ReactiveFormsModule, FormControl, FormGroup } from "@angular/forms";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@ -34,9 +34,12 @@ export default {
url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=3930%3A16850&t=xXPx6GJYsJfuMQPE-4",
},
},
} as Meta;
} as Meta<RadioGroupComponent>;
const InlineTemplate: Story<RadioGroupComponent> = (args: RadioGroupComponent) => ({
type Story = StoryObj<RadioGroupComponent>;
export const Inline: Story = {
render: () => ({
props: {
formObj: new FormGroup({
radio: new FormControl(0),
@ -61,11 +64,11 @@ const InlineTemplate: Story<RadioGroupComponent> = (args: RadioGroupComponent) =
</bit-radio-group>
</form>
`,
});
}),
};
export const Inline = InlineTemplate.bind({});
const BlockTemplate: Story<RadioGroupComponent> = (args: RadioGroupComponent) => ({
export const Block: Story = {
render: () => ({
props: {
formObj: new FormGroup({
radio: new FormControl(0),
@ -93,6 +96,5 @@ const BlockTemplate: Story<RadioGroupComponent> = (args: RadioGroupComponent) =>
</bit-radio-group>
</form>
`,
});
export const Block = BlockTemplate.bind({});
}),
};

14
libs/components/src/search/search.stories.ts
View File

@ -1,5 +1,5 @@
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@ -29,12 +29,14 @@ export default {
],
} as Meta;
const Template: Story<SearchComponent> = (args: SearchComponent) => ({
type Story = StoryObj<SearchComponent>;
export const Default: Story = {
render: (args: SearchComponent) => ({
props: args,
template: `
<bit-search [(ngModel)]="searchText" [placeholder]="placeholder" [disabled]="disabled"></bit-search>
`,
});
export const Default = Template.bind({});
Default.args = {};
}),
args: {},
};

24
libs/components/src/select/select.stories.ts
View File

@ -1,4 +1,4 @@
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@ -37,7 +37,10 @@ export default {
},
} as Meta;
const DefaultTemplate: Story<MultiSelectComponent> = (args: MultiSelectComponent) => ({
type Story = StoryObj<MultiSelectComponent>;
export const Default: Story = {
render: (args) => ({
props: {
...args,
},
@ -47,12 +50,13 @@ const DefaultTemplate: Story<MultiSelectComponent> = (args: MultiSelectComponent
<bit-option value="value3" label="Value 3" icon="bwi-collection"></bit-option>
<bit-option value="value4" label="Value 4" icon="bwi-collection" disabled></bit-option>
</bit-select>`,
});
export const Default = DefaultTemplate.bind({});
Default.args = {};
export const Disabled = DefaultTemplate.bind({});
Disabled.args = {
disabled: true,
}),
args: {},
};
export const Disabled: Story = {
...Default,
args: {
disabled: true,
},
};

6
libs/components/src/stories/colors.stories.mdx → libs/components/src/stories/colors.mdx
View File

@ -67,7 +67,8 @@ export const Table = (args) => (
</table>
);
<style>{`
<style>
{`
table {
border-spacing: 0.5rem;
border-collapse: separate !important;
@ -85,7 +86,8 @@ td, th {
th {
border: none !important;
}
`}</style>
`}
</style>
# Colors

2
libs/components/src/stories/forms-docs.stories.mdx → libs/components/src/stories/forms.mdx
View File

@ -1,6 +1,6 @@
import { Meta, Story, Source } from "@storybook/addon-docs";
<Meta title="Documentation/Forms" />
<Meta title="Component Library/Form" />
# Forms

4
libs/components/src/stories/icons.stories.mdx → libs/components/src/stories/icons.mdx
View File

@ -1,6 +1,6 @@
<!-- Iconography.stories.mdx -->
{/* Iconography.stories.mdx */}
import { Meta } from "@storybook/addon-docs/";
import { Meta } from "@storybook/addon-docs";
<Meta title="Documentation/Icons" />

4
libs/components/src/stories/input-docs.stories.mdx → libs/components/src/stories/input.mdx
View File

@ -1,8 +1,8 @@
import { Meta } from "@storybook/addon-docs";
<Meta title="Documentation/bitInput" />
<Meta title="Component Library/Form/Input" />
# `bitInput`
# Input
`bitInput` is an Angular directive to be used on `<input>`, `<select>`, and `<textarea>` tags in
order to provide standardized TailwindCss styling, error handling, and more. It is meant to be used

6
libs/components/src/stories/Introduction.stories.mdx → libs/components/src/stories/introduction.mdx
View File

@ -2,7 +2,8 @@ import { Meta } from "@storybook/addon-docs";
<Meta title="Documentation/Introduction" />
<style>{`
<style>
{`
.subheading {
--mediumdark: '#999999';
font-weight: 900;
@ -77,7 +78,8 @@ import { Meta } from "@storybook/addon-docs";
font-size: 14px;
line-height: 20px;
}
`}</style>
`}
</style>
# Bitwarden Component Library

59
libs/components/src/stories/typography.stories.mdx
View File

@ -1,59 +0,0 @@
import { Meta, Story, Source } from "@storybook/addon-docs";
<Meta title="Documentation/Typography" />
# Typography
<Story id="component-library-typography--h-1" />
```html
<h1 bitTypography="h1">H1</h1>
```
<Story id="component-library-typography--h-2" />
```html
<h2 bitTypography="h2">H2</h2>
```
<Story id="component-library-typography--h-3" />
```html
<h3 bitTypography="h3">H3</h3>
```
<Story id="component-library-typography--h-4" />
```html
<h4 bitTypography="h4">H4</h4>
```
<Story id="component-library-typography--h-5" />
```html
<h5 bitTypography="h5">H5</h5>
```
<Story id="component-library-typography--h-6" />
```html
<h6 bitTypography="h6">H6</h6>
```
<Story id="component-library-typography--body-1" />
```html
<p bitTypography="body1">Body 1</p>
```
<Story id="component-library-typography--body-2" />
```html
<p bitTypography="body2">Body 2</h1>
```
<Story id="component-library-typography--helper" />
```html
<p bitTypography="helper">Helper Text</h1>
```

16
libs/components/src/stories/table-docs.stories.mdx → libs/components/src/table/table.mdx
View File

@ -1,15 +1,19 @@
import { Meta, Story, Source } from "@storybook/addon-docs";
import { Meta, Story, Source, Primary, Controls } from "@storybook/addon-docs";
<Meta title="Documentation/Table" />
import * as stories from "./table.stories";
<Meta of={stories} />
# Table
## Overview
The table component provides a comprehensive way to display, sort and filter data. It consists of
two portions, a UI component called `bit-table` and the underlying data source `TableDataSource`.
This documentation will initially focus on the UI portion before covering the data source.
<Primary />
<Controls />
## UI Component
The UI component consists of a couple of elements.
@ -29,10 +33,6 @@ The UI component consists of a couple of elements.
Netflix” for an edit option for a Netflix item.
- Use [Virtual Scrolling](#virtual-scrolling) for large data sets.
### Example
<Story id="component-library-table--default" />
### Usage
The below code is the minimum required to create a table. However we strongly advise you to use the

46
libs/components/src/table/table.stories.ts
View File

@ -1,5 +1,5 @@
import { ScrollingModule } from "@angular/cdk/scrolling";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { countries } from "../form/countries";
@ -27,7 +27,10 @@ export default {
},
} as Meta;
const Template: Story = (args) => ({
type Story = StoryObj;
export const Default: Story = {
render: (args) => ({
props: args,
template: `
<bit-table>
@ -57,11 +60,10 @@ const Template: Story = (args) => ({
</ng-template>
</bit-table>
`,
});
export const Default = Template.bind({});
Default.args = {
}),
args: {
alignRowContent: "baseline",
},
};
const data = new TableDataSource<{ id: number; name: string; other: string }>();
@ -72,7 +74,8 @@ data.data = [...Array(5).keys()].map((i) => ({
other: `other-${i}`,
}));
const DataSourceTemplate: Story = (args) => ({
export const DataSource: Story = {
render: (args) => ({
props: {
dataSource: data,
sortFn: (a: any, b: any) => a.id - b.id,
@ -95,9 +98,8 @@ const DataSourceTemplate: Story = (args) => ({
</ng-template>
</bit-table>
`,
});
export const DataSource = DataSourceTemplate.bind({});
}),
};
const data2 = new TableDataSource<{ id: number; name: string; other: string }>();
@ -107,7 +109,8 @@ data2.data = [...Array(100).keys()].map((i) => ({
other: `other-${i}`,
}));
const ScrollableTemplate: Story = (args) => ({
export const Scrollable: Story = {
render: (args) => ({
props: {
dataSource: data2,
sortFn: (a: any, b: any) => a.id - b.id,
@ -132,16 +135,16 @@ const ScrollableTemplate: Story = (args) => ({
</bit-table>
</cdk-virtual-scroll-viewport>
`,
});
export const Scrollable = ScrollableTemplate.bind({});
}),
};
const data3 = new TableDataSource<{ value: string; name: string }>();
// Chromatic has a max page size, lowering the number of entries to ensure we don't hit it
data3.data = countries.slice(0, 100);
const FilterableTemplate: Story = (args) => ({
export const Filterable: Story = {
render: (args) => ({
props: {
dataSource: data3,
sortFn: (a: any, b: any) => a.id - b.id,
@ -165,9 +168,8 @@ const FilterableTemplate: Story = (args) => ({
</bit-table>
</cdk-virtual-scroll-viewport>
`,
});
export const Filterable = FilterableTemplate.bind({});
}),
};
const data4 = new TableDataSource<{ name: string }>();
@ -175,7 +177,8 @@ data4.data = [...Array(5).keys()].map((i) => ({
name: i % 2 == 0 ? `name-${i}`.toUpperCase() : `name-${i}`.toLowerCase(),
}));
const VariableCaseTemplate: Story = (args) => ({
export const VariableCase: Story = {
render: (args) => ({
props: {
dataSource: data4,
},
@ -193,6 +196,5 @@ const VariableCaseTemplate: Story = (args) => ({
</ng-template>
</bit-table>
`,
});
export const VariableCase = VariableCaseTemplate.bind({});
}),
};

53
libs/components/src/tabs/tabs.stories.ts
View File

@ -1,7 +1,7 @@
import { CommonModule } from "@angular/common";
import { Component } from "@angular/core";
import { Component, importProvidersFrom } from "@angular/core";
import { RouterModule } from "@angular/router";
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { applicationConfig, Meta, moduleMetadata, StoryObj } from "@storybook/angular";
import { ButtonModule } from "../button";
import { FormFieldModule } from "../form-field";
@ -44,11 +44,11 @@ export default {
ItemThreeDummyComponent,
DisabledDummyComponent,
],
imports: [
CommonModule,
TabsModule,
ButtonModule,
FormFieldModule,
imports: [CommonModule, TabsModule, ButtonModule, FormFieldModule, RouterModule],
}),
applicationConfig({
providers: [
importProvidersFrom(
RouterModule.forRoot(
[
{ path: "", redirectTo: "active", pathMatch: "full" },
@ -58,6 +58,7 @@ export default {
{ path: "disabled", component: DisabledDummyComponent },
],
{ useHash: true }
)
),
],
}),
@ -70,7 +71,10 @@ export default {
},
} as Meta;
const ContentTabGroupTemplate: Story<TabGroupComponent> = (args: any) => ({
type Story = StoryObj<TabGroupComponent>;
export const ContentTabs: Story = {
render: (args: any) => ({
props: args,
template: `
<bit-tab-group label="Main Content Tabs" class="tw-text-main">
@ -87,11 +91,11 @@ const ContentTabGroupTemplate: Story<TabGroupComponent> = (args: any) => ({
</bit-tab>
</bit-tab-group>
`,
});
}),
};
export const ContentTabs = ContentTabGroupTemplate.bind({});
const NavTabGroupTemplate: Story<TabGroupComponent> = (args: TabGroupComponent) => ({
export const NavigationTabs: Story = {
render: (args: TabGroupComponent) => ({
props: args,
template: `
<bit-tab-nav-bar label="Main">
@ -104,18 +108,16 @@ const NavTabGroupTemplate: Story<TabGroupComponent> = (args: TabGroupComponent)
<router-outlet></router-outlet>
</div>
`,
});
}),
};
export const NavigationTabs = NavTabGroupTemplate.bind({});
const PreserveContentTabGroupTemplate: Story<TabGroupComponent> = (args: any) => ({
export const PreserveContentTabs: Story = {
render: (args: any) => ({
props: args,
template: `
<bit-tab-group label="Preserve Content Tabs" [preserveContent]="true" class="tw-text-main">
<bit-tab label="Text Tab">
<p>
Play the video in the other tab and switch back to hear the video is still playing.
</p>
<p>Play the video in the other tab and switch back to hear the video is still playing.</p>
</bit-tab>
<bit-tab label="Video Tab">
<iframe
@ -127,11 +129,11 @@ const PreserveContentTabGroupTemplate: Story<TabGroupComponent> = (args: any) =>
</bit-tab>
</bit-tab-group>
`,
});
}),
};
export const PreserveContentTabs = PreserveContentTabGroupTemplate.bind({});
const KeyboardNavTabGroupTemplate: Story<TabGroupComponent> = (args: any) => ({
export const KeyboardNavigation: Story = {
render: (args: any) => ({
props: args,
template: `
<bit-tab-group label="Keyboard Navigation Tabs" class="tw-text-main">
@ -156,6 +158,5 @@ const KeyboardNavTabGroupTemplate: Story<TabGroupComponent> = (args: any) => ({
</bit-tab-group>
<button bitButton buttonType="primary" class="tw-mt-5">External Button</button>
`,
});
export const KeyboardNavigation = KeyboardNavTabGroupTemplate.bind({});
}),
};

14
libs/components/src/toggle-group/toggle-group.stories.ts
View File

@ -1,4 +1,4 @@
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { BadgeModule } from "../badge";
@ -25,7 +25,10 @@ export default {
},
} as Meta;
const Template: Story<ToggleGroupComponent> = (args: ToggleGroupComponent) => ({
type Story = StoryObj<ToggleGroupComponent>;
export const Default: Story = {
render: (args) => ({
props: args,
template: `
<bit-toggle-group [(selected)]="selected" aria-label="People list filter">
@ -46,9 +49,8 @@ const Template: Story<ToggleGroupComponent> = (args: ToggleGroupComponent) => ({
</bit-toggle>
</bit-toggle-group>
`,
});
export const Default = Template.bind({});
Default.args = {
}),
args: {
selected: "all",
},
};

67
libs/components/src/typography/typography.mdx Normal file
View File

@ -0,0 +1,67 @@
import { Meta, Story, Source, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./typography.stories";
<Meta of={stories} />
# Typography
<Primary />
<Controls />
## Stories
<Story of={stories.H1} />
```html
<h1 bitTypography="h1">H1</h1>
```
<Story of={stories.H2} />
```html
<h2 bitTypography="h2">H2</h2>
```
<Story of={stories.H3} />
```html
<h3 bitTypography="h3">H3</h3>
```
<Story of={stories.H4} />
```html
<h4 bitTypography="h4">H4</h4>
```
<Story of={stories.H5} />
```html
<h5 bitTypography="h5">H5</h5>
```
<Story of={stories.H6} />
```html
<h6 bitTypography="h6">H6</h6>
```
<Story of={stories.Body1} />
```html
<p bitTypography="body1">Body 1</p>
```
<Story of={stories.Body2} />
```html
<p bitTypography="body2">Body 2</h1>
```
<Story of={stories.Helper} />
```html
<p bitTypography="helper">Helper Text</h1>
```

64
libs/components/src/typography/typography.stories.ts
View File

@ -1,4 +1,4 @@
import { Meta, Story } from "@storybook/angular";
import { Meta, StoryObj } from "@storybook/angular";
import { TypographyDirective } from "./typography.directive";
@ -10,61 +10,81 @@ export default {
},
} as Meta;
const Template: Story = (args) => ({
type Story = StoryObj<TypographyDirective & { text: string }>;
export const H1: Story = {
render: (args) => ({
props: args,
template: `<span [bitTypography]="bitTypography" class="tw-text-main">{{text}}</span>`,
});
export const H1 = Template.bind({});
H1.args = {
}),
args: {
bitTypography: "h1",
text: "h1. Page Title",
},
};
export const H2 = Template.bind({});
H2.args = {
export const H2: Story = {
...H1,
args: {
bitTypography: "h2",
text: "h2. Page Section",
},
};
export const H3 = Template.bind({});
H3.args = {
export const H3: Story = {
...H1,
args: {
bitTypography: "h3",
text: "h3. Page Section",
},
};
export const H4 = Template.bind({});
H4.args = {
export const H4: Story = {
...H1,
args: {
bitTypography: "h4",
text: "h4. Page Section",
},
};
export const H5 = Template.bind({});
H5.args = {
export const H5: Story = {
...H1,
args: {
bitTypography: "h5",
text: "h5. Page Section",
},
};
export const H6 = Template.bind({});
H6.args = {
export const H6: Story = {
...H1,
args: {
bitTypography: "h6",
text: "h6. Page Section",
},
};
export const Body1 = Template.bind({});
Body1.args = {
export const Body1: Story = {
...H1,
args: {
bitTypography: "body1",
text: "Body 1",
},
};
export const Body2 = Template.bind({});
Body2.args = {
export const Body2: Story = {
...H1,
args: {
bitTypography: "body2",
text: "Body 2",
},
};
export const Helper = Template.bind({});
Helper.args = {
export const Helper: Story = {
...H1,
args: {
bitTypography: "helper",
text: "Helper Text",
},
};

7
libs/components/tailwind.config.js
View File

@ -1,7 +1,12 @@
/* eslint-disable */
const config = require("./tailwind.config.base");
config.content = ["./libs/components/src/**/*.{html,ts,mdx}", "./.storybook/preview.js"];
config.content = [
"libs/components/src/**/*.{html,ts,mdx}",
"apps/web/src/**/*.{html,ts,mdx}",
"bitwarden_license/bit-web/src/**/*.{html,ts,mdx}",
".storybook/preview.tsx",
];
config.safelist = [
{
pattern: /tw-bg-(.*)/,

18586
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

28
package.json
View File

@ -23,9 +23,9 @@
"test:watch:all": "jest --watchAll",
"test:types": "node ./scripts/test-types.js",
"docs:json": "compodoc -p ./tsconfig.json -e json -d .",
"storybook": "npm run docs:json && start-storybook -p 6006",
"build-storybook": "npm run docs:json && build-storybook",
"chromatic": "chromatic --exit-zero-on-changes"
"storybook": "ng run components:storybook",
"build-storybook": "ng run components:build-storybook",
"build-storybook:ci": "ng run components:build-storybook --webpack-stats-json"
},
"workspaces": [
"apps/*",
@ -45,13 +45,11 @@
"@electron/rebuild": "3.2.13",
"@fluffy-spoon/substitute": "1.208.0",
"@ngtools/webpack": "15.2.8",
"@storybook/addon-a11y": "6.5.16",
"@storybook/addon-actions": "6.5.16",
"@storybook/addon-essentials": "6.5.16",
"@storybook/addon-links": "6.5.16",
"@storybook/angular": "6.5.16",
"@storybook/builder-webpack5": "6.5.16",
"@storybook/manager-webpack5": "6.5.16",
"@storybook/addon-a11y": "7.0.11",
"@storybook/addon-actions": "7.0.11",
"@storybook/addon-essentials": "7.0.11",
"@storybook/addon-links": "7.0.11",
"@storybook/angular": "7.0.11",
"@types/argon2-browser": "1.18.1",
"@types/chrome": "0.0.236",
"@types/duo_web_sdk": "2.7.1",
@ -73,6 +71,7 @@
"@types/node-ipc": "9.2.0",
"@types/papaparse": "5.3.7",
"@types/proper-lockfile": "4.1.2",
"@types/react": "16.14.41",
"@types/retry": "0.12.2",
"@types/zxcvbn": "4.4.1",
"@typescript-eslint/eslint-plugin": "5.59.7",
@ -122,11 +121,14 @@
"prettier": "2.8.8",
"prettier-plugin-tailwindcss": "0.3.0",
"process": "0.11.10",
"react": "18.2.0",
"react-dom": "18.2.0",
"regedit": "^3.0.3",
"remark-gfm": "^3.0.1",
"rimraf": "5.0.1",
"sass": "1.62.1",
"sass-loader": "13.3.0",
"storybook-addon-designs": "6.3.1",
"storybook": "7.0.11",
"style-loader": "3.3.3",
"tailwindcss": "3.3.2",
"ts-jest": "29.1.0",
@ -199,11 +201,13 @@
},
"overrides": {
"tailwindcss": "$tailwindcss",
"react": "18.2.0",
"@storybook/angular": {
"zone.js": "0.12.0"
}
},
"resolutions": {
"@types/react": "18.2.0"
},
"lint-staged": {
"*": "prettier --cache --ignore-unknown --write",
"*.ts": "eslint --cache --cache-strategy content --fix"