From cdaee561dc7b675c8a743fc5c4a0129c00141347 Mon Sep 17 00:00:00 2001 From: Syauqizaidan Khairan Khalaf Date: Wed, 29 Nov 2023 02:52:51 +0700 Subject: [PATCH 1/5] feat(typography): editing letter spacing value to be exact the same as the figma --- packages/typography/src/lib/text.tsx | 50 ++++++++++++++-------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/typography/src/lib/text.tsx b/packages/typography/src/lib/text.tsx index b1d881c..7df1f60 100644 --- a/packages/typography/src/lib/text.tsx +++ b/packages/typography/src/lib/text.tsx @@ -8,14 +8,14 @@ type TextStyle = Record -const styleMap: TextStyle = { +const styleMap: TextStyle = { "display": { defaults: { fontWeight: "font-bold", @@ -23,9 +23,9 @@ const styleMap: TextStyle = { size: 1 }, styles: [ - { fontSize: "text-[11.6rem]", lineHeight: "leading-[13.2rem]", letterSpacing: "tracking-[3.5px]", mb: 'mb-5' }, - { fontSize: "text-[9rem]", lineHeight: "leading-[10.62rem]", letterSpacing: "tracking-[3.5px]", mb: 'mb-5' }, - { fontSize: "text-[7.5rem]", lineHeight: "leading-[8.37rem]", letterSpacing: "tracking-[3.5px]", mb: 'mb-5' }, + { fontSize: "text-[11.6rem]", lineHeight: "leading-[13.2rem]", letterSpacing: "tracking-[-3.5px]", mb: 'mb-5' }, + { fontSize: "text-[9rem]", lineHeight: "leading-[10.62rem]", letterSpacing: "tracking-[-3.5px]", mb: 'mb-5' }, + { fontSize: "text-[7.5rem]", lineHeight: "leading-[8.37rem]", letterSpacing: "tracking-[-3.5px]", mb: 'mb-5' }, { fontSize: "text-[6rem]", lineHeight: "leading-[6.87rem]", letterSpacing: "tracking-[2.5px]", mb: 'mb-5' }, ] }, @@ -36,12 +36,12 @@ const styleMap: TextStyle = { size: 1 }, styles: [ - { fontSize: "text-[4.5rem]", lineHeight: "leading-[5.62rem]", letterSpacing: "tracking-[2.3px]", mb: 'mb-4' }, - { fontSize: "text-[4rem]", lineHeight: "leading-[5rem]", letterSpacing: "tracking-[2.3px]", mb: 'mb-4' }, - { fontSize: "text-[3rem]", lineHeight: "leading-[3.75rem]", letterSpacing: "tracking-[2.3px]", mb: 'mb-4' }, - { fontSize: "text-[2.25rem]", lineHeight: "leading-[3.12rem]", letterSpacing: "tracking-[1px]", mb: 'mb-3' }, - { fontSize: "text-[2rem]", lineHeight: "leading-[2.75rem]", letterSpacing: "tracking-[0.5px]", mb: 'mb-3' }, - { fontSize: "text-[1.5rem]", lineHeight: "leading-[2.25rem]", letterSpacing: "tracking-[0.4px]", mb: 'mb-3' }, + { fontSize: "text-[4.5rem]", lineHeight: "leading-[5.62rem]", letterSpacing: "tracking-[-2.3px]", mb: 'mb-4' }, + { fontSize: "text-[4rem]", lineHeight: "leading-[5rem]", letterSpacing: "tracking-[-2.3px]", mb: 'mb-4' }, + { fontSize: "text-[3rem]", lineHeight: "leading-[3.75rem]", letterSpacing: "tracking-[-2.3px]", mb: 'mb-4' }, + { fontSize: "text-[2.25rem]", lineHeight: "leading-[3.12rem]", letterSpacing: "tracking-[-1px]", mb: 'mb-3' }, + { fontSize: "text-[2rem]", lineHeight: "leading-[2.75rem]", letterSpacing: "tracking-[-0.5px]", mb: 'mb-3' }, + { fontSize: "text-[1.5rem]", lineHeight: "leading-[2.25rem]", letterSpacing: "tracking-[-0.4px]", mb: 'mb-3' }, ] }, "short-desc": { @@ -51,10 +51,10 @@ const styleMap: TextStyle = { size: 1 }, styles: [ - { fontSize: "text-[1.875rem]", lineHeight: "leading-[2.687rem]", letterSpacing: "tracking-[0.5px]" }, - { fontSize: "text-[1.75rem]", lineHeight: "leading-[2.687rem]", letterSpacing: "tracking-[0.5px]" }, - { fontSize: "text-[1.625rem]", lineHeight: "leading-[2.5rem]", letterSpacing: "tracking-[0.5px]" }, - { fontSize: "text-[1.5rem]", lineHeight: "leading-[2.25rem]", letterSpacing: "tracking-[0.5px]" }, + { fontSize: "text-[1.875rem]", lineHeight: "leading-[2.687rem]", letterSpacing: "tracking-[-0.5px]" }, + { fontSize: "text-[1.75rem]", lineHeight: "leading-[2.687rem]", letterSpacing: "tracking-[-0.5px]" }, + { fontSize: "text-[1.625rem]", lineHeight: "leading-[2.5rem]", letterSpacing: "tracking-[-0.5px]" }, + { fontSize: "text-[1.5rem]", lineHeight: "leading-[2.25rem]", letterSpacing: "tracking-[-0.5px]" }, ] }, "paragraph": { @@ -64,12 +64,12 @@ const styleMap: TextStyle = { size: 1 }, styles: [ - { fontSize: "text-[1.375rem]", lineHeight: "leading-[2.187rem]", letterSpacing: "tracking-[0.3px]", mb: 'mb-2' }, - { fontSize: "text-[1.25rem]", lineHeight: "leading-[2rem]", letterSpacing: "tracking-[0.3px]", mb: 'mb-2' }, - { fontSize: "text-[1.125rem]", lineHeight: "leading-[1.87rem]", letterSpacing: "tracking-[0.3px]", mb: 'mb-2' }, - { fontSize: "text-[1rem]", lineHeight: "leading-[1.75rem]", letterSpacing: "tracking-[0.3px]", mb: 'mb-2' }, - { fontSize: "text-[0.87rem]", lineHeight: "leading-[1.5rem]", letterSpacing: "tracking-[0.2px]", mb: 'mb-2' }, - { fontSize: "text-[0.75rem]", lineHeight: "leading-[1.25rem]", letterSpacing: "tracking-[0.2px]", mb: 'mb-2' }, + { fontSize: "text-[1.375rem]", lineHeight: "leading-[2.187rem]", letterSpacing: "tracking-[-0.3px]", mb: 'mb-2' }, + { fontSize: "text-[1.25rem]", lineHeight: "leading-[2rem]", letterSpacing: "tracking-[-0.3px]", mb: 'mb-2' }, + { fontSize: "text-[1.125rem]", lineHeight: "leading-[1.87rem]", letterSpacing: "tracking-[-0.3px]", mb: 'mb-2' }, + { fontSize: "text-[1rem]", lineHeight: "leading-[1.75rem]", letterSpacing: "tracking-[-0.3px]", mb: 'mb-2' }, + { fontSize: "text-[0.87rem]", lineHeight: "leading-[1.5rem]", letterSpacing: "tracking-[-0.2px]", mb: 'mb-2' }, + { fontSize: "text-[0.75rem]", lineHeight: "leading-[1.25rem]", letterSpacing: "tracking-[-0.2px]", mb: 'mb-2' }, ] }, } @@ -91,15 +91,15 @@ export const Text: React.FC = ({ color = styleMap[type].defaults.color, italic = false, children -}: TextProps) => { - const styles = Object.values(styleMap[type].styles[size-1]).join(' ') +}: TextProps) => { + const styles = Object.values(styleMap[type].styles[size - 1]).join(' ') const additionalClasses = [ - `bootwind-text bootwind-text-${type}`, + `bootwind-text bootwind-text-${type}`, italic ? 'italic' : '', weight, color ].join(' ') - + const classes = `${additionalClasses} ${styles}` return ( From 411e7a47de199afa51b859676b740af62ebde549 Mon Sep 17 00:00:00 2001 From: Syauqizaidan Khairan Khalaf Date: Wed, 29 Nov 2023 03:41:50 +0700 Subject: [PATCH 2/5] feat(core:colors&gradients): adding gradients stories and cleaning up storybook controls unused --- packages/core/src/stories/Colors.stories.tsx | 22 ++--- .../core/src/stories/Gradients.stories.tsx | 91 +++++++++++++++++++ 2 files changed, 101 insertions(+), 12 deletions(-) create mode 100644 packages/core/src/stories/Gradients.stories.tsx diff --git a/packages/core/src/stories/Colors.stories.tsx b/packages/core/src/stories/Colors.stories.tsx index b8960c5..2258292 100644 --- a/packages/core/src/stories/Colors.stories.tsx +++ b/packages/core/src/stories/Colors.stories.tsx @@ -1,17 +1,7 @@ import { Meta } from '@storybook/react'; -import Title from '@bootwind/title'; - export default { title: 'Components/Core/Colors', - argTypes: { - variant: { - control: { type: 'radio', options: ['primary', 'secondary', 'ghost'] }, - }, - size: { - control: { type: 'radio', options: ['sm', 'md', 'lg', 'xl'] }, - }, - }, } as Meta; export const AllColors = () => { @@ -42,8 +32,16 @@ export const AllColors = () => { const levels = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] return ( -
- +
+
+
+
+
+

+ primary +

+
+
{colors.map(color => { return (
diff --git a/packages/core/src/stories/Gradients.stories.tsx b/packages/core/src/stories/Gradients.stories.tsx new file mode 100644 index 0000000..9868dc5 --- /dev/null +++ b/packages/core/src/stories/Gradients.stories.tsx @@ -0,0 +1,91 @@ +import { Meta } from '@storybook/react'; + +export default { + title: 'Components/Core/Gradients', +} as Meta; + +export const AllGradients = () => { + + return ( +
+

All the gradients use bg-gradient-to-b tailwind classes and the color from - to is below the gradients box.

+
+
+
+

+ fuchsia-500 → indigo-600 +

+
+
+
+

+ indigo-500 → indigo-800 +

+
+
+
+

+ pink-500 → indigo-600 +

+
+
+
+

+ sky-400 → purple-500 +

+
+
+
+

+ violet-400 → purple-700 +

+
+
+
+

+ blue-400 → blue-600 +

+
+
+ +
+
+
+

+ emerald-400 → lime-700 +

+
+
+
+

+ yellow-200 → lime-700 +

+
+
+
+

+ green-400 → blue-500 +

+
+
+
+

+ blue-500 → pink-500 +

+
+
+
+

+ orange-500 → pink-600 +

+
+
+
+

+ fuchsia-700 → red-500 +

+
+
+
+ ) +} From 014812341e18a9d5b2a052dff5bd5ff0baf2a498 Mon Sep 17 00:00:00 2001 From: Syauqizaidan Khairan Khalaf Date: Wed, 29 Nov 2023 04:17:09 +0700 Subject: [PATCH 3/5] feat(core): adding blur, shadow, grid system, backdrop blur and change naming table pagination --- .../core/src/stories/BackdropBlur.stories.tsx | 70 ++++ packages/core/src/stories/Blur.stories.tsx | 66 ++++ .../core/src/stories/GridSystem.stories.tsx | 336 ++++++++++++++++++ packages/core/src/stories/Shadows.stories.tsx | 60 ++++ .../examples/TablePagination.stories.tsx | 2 +- 5 files changed, 533 insertions(+), 1 deletion(-) create mode 100644 packages/core/src/stories/BackdropBlur.stories.tsx create mode 100644 packages/core/src/stories/Blur.stories.tsx create mode 100644 packages/core/src/stories/GridSystem.stories.tsx create mode 100644 packages/core/src/stories/Shadows.stories.tsx diff --git a/packages/core/src/stories/BackdropBlur.stories.tsx b/packages/core/src/stories/BackdropBlur.stories.tsx new file mode 100644 index 0000000..54d3f19 --- /dev/null +++ b/packages/core/src/stories/BackdropBlur.stories.tsx @@ -0,0 +1,70 @@ +import { Meta } from '@storybook/react'; + +export default { + title: 'Components/Core/Backdrop Blur', +} as Meta; + +export const AllBackdropBlur = () => { + + return ( +
+

All the backrop blur used by default tailwind classes https://tailwindcss.com/docs/backdrop-blur

+
+
+
+

+ blur-none +

+
+
+
+

+ blur-sm +

+
+
+
+

+ blur +

+
+
+
+

+ blur-md +

+
+
+
+

+ blur-lg +

+
+
+
+

+ blur-xl +

+
+
+
+

+ blur-2xl +

+
+
+
+
+
+

+ blur-3xl +

+
+
+
+ ) +} diff --git a/packages/core/src/stories/Blur.stories.tsx b/packages/core/src/stories/Blur.stories.tsx new file mode 100644 index 0000000..76fc280 --- /dev/null +++ b/packages/core/src/stories/Blur.stories.tsx @@ -0,0 +1,66 @@ +import { Meta } from '@storybook/react'; + +export default { + title: 'Components/Core/Blur', +} as Meta; + +export const AllBlur = () => { + + return ( +
+

All the blur used by default tailwind classes https://tailwindcss.com/docs/blur

+
+
+
+

+ blur-none +

+
+
+
+

+ blur-sm +

+
+
+
+

+ blur +

+
+
+
+

+ blur-md +

+
+
+
+

+ blur-lg +

+
+
+
+

+ blur-xl +

+
+
+
+

+ blur-2xl +

+
+
+
+
+
+

+ blur-3xl +

+
+
+
+ ) +} diff --git a/packages/core/src/stories/GridSystem.stories.tsx b/packages/core/src/stories/GridSystem.stories.tsx new file mode 100644 index 0000000..23e96e2 --- /dev/null +++ b/packages/core/src/stories/GridSystem.stories.tsx @@ -0,0 +1,336 @@ +import { Meta } from '@storybook/react'; + +export default { + title: 'Components/Core/Grid System', +} as Meta; + +export const AllGridSystem = () => { + + return ( +
+

All the grid used by default tailwind classes https://tailwindcss.com/docs/flex

+
+
+
+
+
Size 1 of 1
+
+
+
+
1/1
+
+
+
+
+
+
Size 1 of 2
+
+
+
+
1/2
+
+
+
1/2
+
+
+
+
+
+
Size 1 of 3
+
+
+
+
1/3
+
+
+
1/3
+
+
+
1/3
+
+
+
+
+
+
Size 1 of 4
+
+
+
+
1/4
+
+
+
1/4
+
+
+
1/4
+
+
+
1/4
+
+
+
+
+
+
Size 1 of 5
+
+
+
+
1/5
+
+
+
1/5
+
+
+
1/5
+
+
+
1/5
+
+
+
1/5
+
+
+
+
+
+
Size 1 of 6
+
+
+
+
1/6
+
+
+
1/6
+
+
+
1/6
+
+
+
1/6
+
+
+
1/6
+
+
+
1/6
+
+
+
+
+
+
Size 1 of 7
+
+
+
+
1/7
+
+
+
1/7
+
+
+
1/7
+
+
+
1/7
+
+
+
1/7
+
+
+
1/7
+
+
+
1/7
+
+
+
+
+
+
Size 1 of 8
+
+
+
+
1/8
+
+
+
1/8
+
+
+
1/8
+
+
+
1/8
+
+
+
1/8
+
+
+
1/8
+
+
+
1/8
+
+
+
1/8
+
+
+
+
+
+
Size 1 of 9
+
+
+
+
1/9
+
+
+
1/9
+
+
+
1/9
+
+
+
1/9
+
+
+
1/9
+
+
+
1/9
+
+
+
1/9
+
+
+
1/9
+
+
+
1/9
+
+
+
+
+
+
Size 1 of 10
+
+
+
+
1/10
+
+
+
1/10
+
+
+
1/10
+
+
+
1/10
+
+
+
1/10
+
+
+
1/10
+
+
+
1/10
+
+
+
1/10
+
+
+
1/10
+
+
+
1/10
+
+
+
+
+
+
Size 1 of 11
+
+
+
+
1/11
+
+
+
1/11
+
+
+
1/11
+
+
+
1/11
+
+
+
1/11
+
+
+
1/11
+
+
+
1/11
+
+
+
1/11
+
+
+
1/11
+
+
+
1/11
+
+
+
1/11
+
+
+
+
+
+
Size 1 of 12
+
+
+
+
1/12
+
+
+
1/12
+
+
+
1/12
+
+
+
1/12
+
+
+
1/12
+
+
+
1/12
+
+
+
1/12
+
+
+
1/12
+
+
+
1/12
+
+
+
1/12
+
+
+
1/12
+
+
+
1/12
+
+
+
+
+
+
+ ) +} diff --git a/packages/core/src/stories/Shadows.stories.tsx b/packages/core/src/stories/Shadows.stories.tsx new file mode 100644 index 0000000..9e4b539 --- /dev/null +++ b/packages/core/src/stories/Shadows.stories.tsx @@ -0,0 +1,60 @@ +import { Meta } from '@storybook/react'; + +export default { + title: 'Components/Core/Shadows', +} as Meta; + +export const AllShadows = () => { + + return ( +
+

All the shadows used by default tailwind classes https://tailwindcss.com/docs/box-shadow

+
+
+
+

+ shadow-sm +

+
+
+
+

+ shadow +

+
+
+
+

+ shadow-md +

+
+
+
+

+ shadow-lg +

+
+
+
+

+ shadow-xl +

+
+
+
+

+ shadow-2xl +

+
+
+
+

+ shadow-inner +

+
+
+ + +
+ ) +} diff --git a/packages/ui/src/stories/examples/TablePagination.stories.tsx b/packages/ui/src/stories/examples/TablePagination.stories.tsx index fc15625..1b71942 100644 --- a/packages/ui/src/stories/examples/TablePagination.stories.tsx +++ b/packages/ui/src/stories/examples/TablePagination.stories.tsx @@ -17,7 +17,7 @@ const columns = [ ]; export default { - title: 'Examples/TablePagination', + title: 'Examples/Table with Pagination', component: Pagination, argTypes: {}, } as Meta; From 090ddcb48595fc6b6b5eb61a0c7bf92c1388fe07 Mon Sep 17 00:00:00 2001 From: Syauqizaidan Khairan Khalaf Date: Wed, 29 Nov 2023 04:22:46 +0700 Subject: [PATCH 4/5] feat(core): adding containers and spacing stories --- .../core/src/stories/Container.stories.tsx | 32 ++++ packages/core/src/stories/Spacing.stories.tsx | 157 ++++++++++++++++++ 2 files changed, 189 insertions(+) create mode 100644 packages/core/src/stories/Container.stories.tsx create mode 100644 packages/core/src/stories/Spacing.stories.tsx diff --git a/packages/core/src/stories/Container.stories.tsx b/packages/core/src/stories/Container.stories.tsx new file mode 100644 index 0000000..b6ce24a --- /dev/null +++ b/packages/core/src/stories/Container.stories.tsx @@ -0,0 +1,32 @@ +import { Meta } from '@storybook/react'; + +export default { + title: 'Components/Core/Container', +} as Meta; + +export const AllContainer = () => { + + return ( +
+

All the container used by default tailwind classes https://tailwindcss.com/docs/container

+ +
+
+
sm (640px)
+
+
+
md (768px)
+
+
+
lg (1024px)
+
+
+
xl (1280px)
+
+
+
2xl (1536px)
+
+
+
+ ) +} diff --git a/packages/core/src/stories/Spacing.stories.tsx b/packages/core/src/stories/Spacing.stories.tsx new file mode 100644 index 0000000..7116d1a --- /dev/null +++ b/packages/core/src/stories/Spacing.stories.tsx @@ -0,0 +1,157 @@ +import { Meta } from '@storybook/react'; + +export default { + title: 'Components/Core/Spacing', +} as Meta; + +export const AllSpacing = () => { + + return ( +
+

All the spacing used by default tailwind classes https://tailwindcss.com/docs/theme#spacing

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0px
+
1px
+
0.125rem
+
0.25rem
+
0.375rem
+
0.5rem
+
0.625rem
+
0.75rem
+
0.875rem
+
1rem
+
1.25rem
+
1.5rem
+
1.75rem
+
2rem
+
2.25rem
+
2.5rem
+
2.75rem
+
3rem
+
3.5rem
+
4rem
+
5rem
+
6rem
+
7rem
+
8rem
+
9rem
+
10rem
+
11rem
+
12rem
+
13rem
+
14rem
+
15rem
+
16rem
+
18rem
+
20rem
+
24rem
+
0px
+
1px
+
2px
+
4px
+
6px
+
8px
+
10px
+
12px
+
14px
+
16px
+
20px
+
24px
+
28px
+
32px
+
36px
+
40px
+
44px
+
48px
+
56px
+
64px
+
80px
+
96px
+
112px
+
128px
+
144px
+
160px
+
176px
+
192px
+
208px
+
224px
+
240px
+
256px
+
288px
+
320px
+
384px
+
+
+ ) +} From 615b34e3f9dd090129e2008fa957eac2c59b3dfa Mon Sep 17 00:00:00 2001 From: Syauqizaidan Khairan Khalaf Date: Wed, 29 Nov 2023 04:40:34 +0700 Subject: [PATCH 5/5] feat(breadcrumbs): adjusting inline flex for text and icon breadcrumbs --- packages/breadcrumb/src/lib/breadcrumb.tsx | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/packages/breadcrumb/src/lib/breadcrumb.tsx b/packages/breadcrumb/src/lib/breadcrumb.tsx index 9627844..95fd05c 100644 --- a/packages/breadcrumb/src/lib/breadcrumb.tsx +++ b/packages/breadcrumb/src/lib/breadcrumb.tsx @@ -12,9 +12,9 @@ export const Breadcrumbs: React.FC = ({ children, items, class return (