From ac4064503a0c7abfb79e8069bedf7d0ccb82aceb Mon Sep 17 00:00:00 2001 From: Piyush Gupta <56182734+gupta-piyush19@users.noreply.github.com> Date: Thu, 6 Jun 2024 14:31:19 +0530 Subject: [PATCH] feat: adds alert component to storybook (#2736) Co-authored-by: Matthias Nannt --- apps/storybook/.storybook/preview.ts | 2 +- apps/storybook/src/index.css | 3 -- .../members/components/BulkInviteTab.tsx | 4 +- packages/tailwind-config/tailwind.config.js | 5 +- packages/ui/Alert/index.tsx | 6 +-- packages/ui/Alert/stories.tsx | 50 +++++++++++++++++++ 6 files changed, 56 insertions(+), 14 deletions(-) delete mode 100644 apps/storybook/src/index.css create mode 100644 packages/ui/Alert/stories.tsx diff --git a/apps/storybook/.storybook/preview.ts b/apps/storybook/.storybook/preview.ts index 8eee712bbd..4ed6d23aec 100644 --- a/apps/storybook/.storybook/preview.ts +++ b/apps/storybook/.storybook/preview.ts @@ -1,6 +1,6 @@ import type { Preview } from "@storybook/react"; -import "../src/index.css"; +import "../../web/app/globals.css"; const preview: Preview = { parameters: { diff --git a/apps/storybook/src/index.css b/apps/storybook/src/index.css deleted file mode 100644 index bd6213e1df..0000000000 --- a/apps/storybook/src/index.css +++ /dev/null @@ -1,3 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; \ No newline at end of file diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/(organization)/members/components/BulkInviteTab.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/(organization)/members/components/BulkInviteTab.tsx index ed44018a7a..d793d8bc68 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/(organization)/members/components/BulkInviteTab.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/(organization)/members/components/BulkInviteTab.tsx @@ -86,9 +86,9 @@ export const BulkInviteTab = ({ setOpen, onSubmit, canDoRoleManagement }: BulkIn
{!canDoRoleManagement && ( - + -

+

Warning: Please note that on the Free Plan, all organization members are automatically assigned the "Admin" role regardless of the role specified in the CSV file. diff --git a/packages/tailwind-config/tailwind.config.js b/packages/tailwind-config/tailwind.config.js index 68f8a3663d..e5e402cfca 100644 --- a/packages/tailwind-config/tailwind.config.js +++ b/packages/tailwind-config/tailwind.config.js @@ -35,25 +35,22 @@ module.exports = { dark: "#00C4B8", }, focus: "var(--formbricks-focus, #1982fc)", - error: "var(--formbricks-error, #d13a3a)", + error: "rgb(from var(--formbricks-error) r g b / )", brandnew: "var(--formbricks-brand, #038178)", borderColor: { primary: "var(--formbricks-border-primary, #e0e0e0)", secondary: "var(--formbricks-border-secondary, #0f172a)", disabled: "var(--formbricks-border-disabled, #ececec)", - error: "var(--formbricks-error, #d13a3a)", }, labelColor: { primary: "var(--formbricks-label-primary, #0f172a)", secondary: "var(--formbricks-label-secondary, #384258)", disabled: "var(--formbricks-label-disabled, #bdbdbd)", - error: "var(--formbricks-error, #d13a3a)", }, fill: { primary: "var(--formbricks-fill-primary, #fefefe)", secondary: "var(--formbricks-fill-secondary, #0f172a)", disabled: "var(--formbricks-fill-disabled, #e0e0e0)", - error: "var(--formbricks-error, #d13a3a)", }, }, keyframes: { diff --git a/packages/ui/Alert/index.tsx b/packages/ui/Alert/index.tsx index 87774db367..7065d5ddf4 100644 --- a/packages/ui/Alert/index.tsx +++ b/packages/ui/Alert/index.tsx @@ -4,14 +4,12 @@ import * as React from "react"; import { cn } from "@formbricks/lib/cn"; const alertVariants = cva( - "relative w-full rounded-lg border p-3 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11", + "relative w-full rounded-lg border p-3 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-3 [&>svg]:top-3 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-9", { variants: { variant: { default: "bg-background text-foreground", - destructive: - "text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive", - info: "text-slate-800 bg-brand/5", + error: "border-error/50 dark:border-error [&>svg]:text-error text-error", }, }, defaultVariants: { diff --git a/packages/ui/Alert/stories.tsx b/packages/ui/Alert/stories.tsx new file mode 100644 index 0000000000..8ca4e700a4 --- /dev/null +++ b/packages/ui/Alert/stories.tsx @@ -0,0 +1,50 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { AlertCircle } from "lucide-react"; + +import { Alert, AlertDescription, AlertTitle } from "./index"; + +const meta = { + title: "ui/Alert", + component: Alert, + tags: ["autodocs"], + argTypes: { + variant: { + control: "radio", + options: ["default", "error"], + }, + }, + args: { + variant: "default", + }, + render: (args) => ( + + This is an alert + This is a description + + ), +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; + +export const Error: Story = { + args: { + variant: "error", + }, +}; + +export const WithIcon: Story = { + args: { + variant: "error", + }, + render: (args) => ( + + + This is an alert + This is a description + + ), +};