From 8c5ece2e0a6d3dfd614023ba79c0f5a3b8a89529 Mon Sep 17 00:00:00 2001 From: Grant Steffen Date: Wed, 1 May 2024 19:28:25 -0500 Subject: [PATCH 1/5] Add Billing Full block --- docs/blocks/administration/Billing.mdx | 200 ++++++++++++++++++++ docs/blocks/administration/BillingFull.tsx | 158 ++++++++++++++++ docs/blocks/administration/Introduction.mdx | 1 + package-lock.json | 4 +- src/elements/Button/ButtonTheme.ts | 2 +- 5 files changed, 362 insertions(+), 3 deletions(-) create mode 100644 docs/blocks/administration/Billing.mdx create mode 100644 docs/blocks/administration/BillingFull.tsx diff --git a/docs/blocks/administration/Billing.mdx b/docs/blocks/administration/Billing.mdx new file mode 100644 index 00000000..fe003e3b --- /dev/null +++ b/docs/blocks/administration/Billing.mdx @@ -0,0 +1,200 @@ +import { Meta, Unstyled } from '@storybook/addon-docs'; +import { BillingFull } from './BillingFull' ; +import { Tabs, TabPanel, TabList, Tab } from '../../../src/layout/Tabs'; + + + +# Billing + + + + + + Demo + + + Code + + + +
+ +
+ + +```tsx +import React, { FC } from 'react'; +import { motion } from 'framer-motion'; +import { + Card, + Tab, + TabList, + Tabs, + TabPanel, + Stack, + Divider +} from '../../../src/layout'; +import { Button, Chip } from '../../../src/elements'; + +import { motion } from 'framer-motion'; +import React, { FC } from 'react'; + +import { Button, Chip } from '../../../src/elements'; +import { + Card, + Divider, + Stack, + Tab, + TabList, + TabPanel, + Tabs +} from '../../../src/layout'; + +export const BillingFull: FC = () => ( + + +
+
+

Billing

+

+ Easily manage your account, view invoices, and track payments + conveniently in one place. Explore flexible subscription options and + manage your billing preferences effortlessly. +

+
+ + + Account Details + Users + Billing + Integrations + Notifications + + + +
+ Plan +
+ + + Premium + + Annual + + +
+ $1000 + + /Year + +
+ + + + Billing period +
+ Monthly + + (renews Mar 15, 2024) + +
+ + +
+ + Seats + Remaining Seats +
+ + +
+
+
+
5
+ of 25 seats used +
+ +
+
+ +
+ + +); +``` + + + diff --git a/docs/blocks/administration/BillingFull.tsx b/docs/blocks/administration/BillingFull.tsx new file mode 100644 index 00000000..b00ca6c5 --- /dev/null +++ b/docs/blocks/administration/BillingFull.tsx @@ -0,0 +1,158 @@ +import { motion } from 'framer-motion'; +import React, { FC } from 'react'; + +import { Button, Chip } from '../../../src/elements'; +import { + Card, + Divider, + Stack, + Tab, + TabList, + TabPanel, + Tabs +} from '../../../src/layout'; + +export const BillingFull: FC = () => ( + + +
+
+

Billing

+

+ Easily manage your account, view invoices, and track payments + conveniently in one place. Explore flexible subscription options and + manage your billing preferences effortlessly. +

+
+ + + Account Details + Users + Billing + Integrations + Notifications + + + +
+ Plan +
+ + + Premium + + Annual + + +
+ $1000 + + /Year + +
+ + + + Billing period +
+ Monthly + + (renews Mar 15, 2024) + +
+ + +
+ + Seats + Remaining Seats +
+ + +
+
+
+
5
+ of 25 seats used +
+ +
+
+ +
+ + +); diff --git a/docs/blocks/administration/Introduction.mdx b/docs/blocks/administration/Introduction.mdx index 3c56cc83..60d236e5 100644 --- a/docs/blocks/administration/Introduction.mdx +++ b/docs/blocks/administration/Introduction.mdx @@ -8,3 +8,4 @@ We offer the following blocks to help you build your administration pages: - Profile - Pricing +- Billing diff --git a/package-lock.json b/package-lock.json index 4ef887b5..8934340f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "reablocks", - "version": "7.5.0", + "version": "7.5.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "reablocks", - "version": "7.5.0", + "version": "7.5.1", "license": "Apache-2.0", "dependencies": { "@marko19907/string-to-color": "^1.0.0", diff --git a/src/elements/Button/ButtonTheme.ts b/src/elements/Button/ButtonTheme.ts index 9845c99e..676660b2 100644 --- a/src/elements/Button/ButtonTheme.ts +++ b/src/elements/Button/ButtonTheme.ts @@ -77,7 +77,7 @@ const baseTheme: Partial = { } }, sizes: { - small: 'text-xs px-5px py-0.5 leading-[normal]', + small: 'text-sm px-5px py-0.5 leading-[normal]', medium: 'text-base px-2.5 py-1.5 leading-[normal]', large: 'text-xl px-5 py-2.5 leading-[normal]' } From 7a7de6d8ff9dd09afb6ed0bd7fe4ce65fd0956e1 Mon Sep 17 00:00:00 2001 From: Grant Steffen Date: Thu, 2 May 2024 11:06:57 -0500 Subject: [PATCH 2/5] Update Chip custom theme story --- src/elements/Chip/Chip.story.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/elements/Chip/Chip.story.tsx b/src/elements/Chip/Chip.story.tsx index 3f57262b..1a771905 100644 --- a/src/elements/Chip/Chip.story.tsx +++ b/src/elements/Chip/Chip.story.tsx @@ -107,42 +107,42 @@ const DemoIcon = () => ( export const CustomTheme = () => { const customTheme: ChipTheme = { ...chipTheme, - base: 'rounded-full', + base: `${chipTheme.base} rounded-full`, colors: { ...chipTheme?.colors, secondary: { ...chipTheme.colors.secondary, variants: { ...chipTheme.colors.secondary.variants, - filled: 'bg-panel-content text-panel' + filled: `${chipTheme?.colors?.secondary?.variants?.filled} bg-panel-content text-panel` } }, info: { ...chipTheme.colors.info, variants: { ...chipTheme.colors.info.variants, - filled: 'bg-info/10 border-info' + filled: `${chipTheme?.colors?.info?.variants?.filled} text-panel-content bg-info/10 border-info` } }, error: { ...chipTheme.colors.error, variants: { ...chipTheme.colors.error.variants, - filled: 'bg-error/10 border-error' + filled: `${chipTheme?.colors?.error?.variants?.filled} text-panel-content bg-error/10 border-error` } }, warning: { ...chipTheme.colors.warning, variants: { ...chipTheme.colors.warning.variants, - filled: 'bg-warning/10 border-warning' + filled: `${chipTheme?.colors?.warning?.variants?.filled} text-panel-content bg-warning/10 border-warning` } }, success: { ...chipTheme.colors.success, variants: { ...chipTheme.colors.success.variants, - filled: 'bg-success/10 border-success' + filled: `${chipTheme?.colors?.success?.variants?.filled} text-panel-content bg-success/10 border-success` } } } From 8f0b268a314cd2ebeb05eb1dfa5da1ee61a4d287 Mon Sep 17 00:00:00 2001 From: Grant Steffen Date: Thu, 2 May 2024 11:08:37 -0500 Subject: [PATCH 3/5] Add Pay And Billing block --- docs/blocks/administration/Billing.mdx | 313 +++++++++++++++++++ docs/blocks/administration/PayAndBilling.tsx | 279 +++++++++++++++++ tailwind.config.ts | 2 +- 3 files changed, 593 insertions(+), 1 deletion(-) create mode 100644 docs/blocks/administration/PayAndBilling.tsx diff --git a/docs/blocks/administration/Billing.mdx b/docs/blocks/administration/Billing.mdx index fe003e3b..a4ed2850 100644 --- a/docs/blocks/administration/Billing.mdx +++ b/docs/blocks/administration/Billing.mdx @@ -1,5 +1,6 @@ import { Meta, Unstyled } from '@storybook/addon-docs'; import { BillingFull } from './BillingFull' ; +import { PayAndBilling } from './PayAndBilling' ; import { Tabs, TabPanel, TabList, Tab } from '../../../src/layout/Tabs'; @@ -198,3 +199,315 @@ export const BillingFull: FC = () => ( +
+ + + + + Demo + + + Code + + + +
+ +
+ + +```tsx +import { motion } from 'framer-motion'; +import React, { FC } from 'react'; +import { + Button, + Chip, + ChipTheme, + chipTheme as defaultChipTheme +} from '../../../src/elements'; +import { Card, Divider, Stack } from '../../../src/layout'; +import { Tooltip } from '../../../src/layers'; + +import { motion } from 'framer-motion'; +import React, { FC } from 'react'; +import { + Button, + Chip, + ChipTheme, + chipTheme as defaultChipTheme +} from '../../../src/elements'; +import { Card, Divider, Stack } from '../../../src/layout'; +import { Tooltip } from '../../../src/layers'; + +export const PayAndBilling: FC = () => { + const chipTheme: ChipTheme = { + ...defaultChipTheme, + base: `${defaultChipTheme?.base} rounded-full`, + colors: { + ...defaultChipTheme?.colors, + info: { + ...defaultChipTheme.colors.info, + variants: { + ...defaultChipTheme?.colors?.info?.variants, + filled: `${defaultChipTheme?.colors?.info?.variants?.filled} text-panel-content bg-info/10 border-info` + } + }, + success: { + ...defaultChipTheme.colors.success, + variants: { + ...defaultChipTheme?.colors?.success?.variants, + filled: `${defaultChipTheme?.colors?.success?.variants?.filled} text-panel-content bg-success/10 border-success` + } + } + } + }; + + return ( + + +
+
+
+

Pay & Billing

+

+ Manage your plan and payments +

+
+ + + + +
+ +
+ Current plan + +
+
+ +
+ + Monthly plan + +
+ $1000{' '} + + /Month + +
+
+ + + + + } + color="info" + > + Auto Renew + + + Active + + + + +
+ + Renews on + + Mar 15, 2024 +
+ +
+
+ Usage + + Your usage is renewed every month + +
+
+ +
+ + + +
+
+ Design Credits + + + + + +
+ 100 of 500 +
+ + +
+ + +
+ + + +
+
+ Design Credits + + + + + +
+ 33 of 50 +
+ + +
+ + +
+ + + +
+
+ Design Credits + + + + + +
+ 47 of 125 +
+ + +
+ +
+
+ + + ); +}; +``` + + + diff --git a/docs/blocks/administration/PayAndBilling.tsx b/docs/blocks/administration/PayAndBilling.tsx new file mode 100644 index 00000000..17d7447a --- /dev/null +++ b/docs/blocks/administration/PayAndBilling.tsx @@ -0,0 +1,279 @@ +import { motion } from 'framer-motion'; +import React, { FC } from 'react'; +import { + Button, + Chip, + ChipTheme, + chipTheme as defaultChipTheme +} from '../../../src/elements'; +import { Card, Divider, Stack } from '../../../src/layout'; +import { Tooltip } from '../../../src/layers'; + +export const PayAndBilling: FC = () => { + const chipTheme: ChipTheme = { + ...defaultChipTheme, + base: `${defaultChipTheme?.base} rounded-full`, + colors: { + ...defaultChipTheme?.colors, + info: { + ...defaultChipTheme.colors.info, + variants: { + ...defaultChipTheme?.colors?.info?.variants, + filled: `${defaultChipTheme?.colors?.info?.variants?.filled} text-panel-content bg-info/10 border-info` + } + }, + success: { + ...defaultChipTheme.colors.success, + variants: { + ...defaultChipTheme?.colors?.success?.variants, + filled: `${defaultChipTheme?.colors?.success?.variants?.filled} text-panel-content bg-success/10 border-success` + } + } + } + }; + + return ( + + +
+
+
+

Pay & Billing

+

+ Manage your plan and payments +

+
+ + + + +
+ +
+ Current plan + +
+
+ +
+ + Monthly plan + +
+ $1000{' '} + + /Month + +
+
+ + + + + } + color="info" + > + Auto Renew + + + Active + + + + +
+ + Renews on + + Mar 15, 2024 +
+ +
+
+ Usage + + Your usage is renewed every month + +
+
+ +
+ + + +
+
+ Design Credits + + + + + +
+ 100 of 500 +
+ + +
+ + +
+ + + +
+
+ Design Credits + + + + + +
+ 33 of 50 +
+ + +
+ + +
+ + + +
+
+ Design Credits + + + + + +
+ 47 of 125 +
+ + +
+ +
+
+ + + ); +}; diff --git a/tailwind.config.ts b/tailwind.config.ts index 7ae6b1b5..f3eca2e5 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -306,7 +306,7 @@ const config: Config = { // Panel backgrounds, such as cards, tables, popovers, dialogs, dropdown menus, etc. DEFAULT: colorPalette['black-pearl'], content: colorPalette['athens-gray'], - 'secondary-content': colorPalette.gray[600], + 'secondary-content': colorPalette['waterloo'], accent: colorPalette['charade'] }, surface: { From 09cadaf9a55b0dc9b5ee58a1c153b9f3ce3f1bf1 Mon Sep 17 00:00:00 2001 From: Grant Steffen Date: Thu, 2 May 2024 19:07:24 -0500 Subject: [PATCH 4/5] Update biling imports --- docs/blocks/administration/Billing.mdx | 40 ++++++-------------------- 1 file changed, 9 insertions(+), 31 deletions(-) diff --git a/docs/blocks/administration/Billing.mdx b/docs/blocks/administration/Billing.mdx index a4ed2850..d90e5974 100644 --- a/docs/blocks/administration/Billing.mdx +++ b/docs/blocks/administration/Billing.mdx @@ -33,23 +33,10 @@ import { Tabs, TabPanel, Stack, - Divider -} from '../../../src/layout'; -import { Button, Chip } from '../../../src/elements'; - -import { motion } from 'framer-motion'; -import React, { FC } from 'react'; - -import { Button, Chip } from '../../../src/elements'; -import { - Card, Divider, - Stack, - Tab, - TabList, - TabPanel, - Tabs -} from '../../../src/layout'; + Button, + Chip +} from 'reablocks'; export const BillingFull: FC = () => ( { const chipTheme: ChipTheme = { From c3e8278393085d4e88703018a0f9ab1fe853aad8 Mon Sep 17 00:00:00 2001 From: Grant Steffen Date: Thu, 2 May 2024 19:08:04 -0500 Subject: [PATCH 5/5] Update blocks intro doc --- docs/blocks/Introduction.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/blocks/Introduction.mdx b/docs/blocks/Introduction.mdx index e3854ae5..8bd41812 100644 --- a/docs/blocks/Introduction.mdx +++ b/docs/blocks/Introduction.mdx @@ -20,3 +20,4 @@ We offer the following blocks: - Authentication - Profile - Pricing + - Billing \ No newline at end of file