diff --git a/apps/ui/.storybook/decorator.tsx b/apps/ui/.storybook/decorator.tsx
index 786e4ef..f13e3dd 100644
--- a/apps/ui/.storybook/decorator.tsx
+++ b/apps/ui/.storybook/decorator.tsx
@@ -1,57 +1,56 @@
-import React from 'react';
import { useEffect } from 'react';
export function withGlobalStyles(Story, context) {
- let { scheme } = context.globals;
+ let { scheme } = context.globals;
- useEffect(() => {
- if (scheme === 'dark') {
- document.documentElement.classList.add('dark');
- } else {
- document.documentElement.classList.remove('dark');
+ useEffect(() => {
+ if (scheme === 'dark') {
+ document.documentElement.classList.add('dark');
+ } else {
+ document.documentElement.classList.remove('dark');
+ }
+ }, [scheme]);
+
+ function Flex({ children, ...props }) {
+ return (
+
+ {children}
+
+ );
}
- }, [scheme]);
- function Flex({ children, ...props }) {
- return (
-
- {children}
-
- );
- }
+ if (scheme === 'light') {
+ return (
+
+
+
+ );
+ }
- if (scheme === 'light') {
- return (
-
-
-
- );
- }
+ if (scheme === 'dark') {
+ return (
+
+
+
+ );
+ }
- if (scheme === 'dark') {
return (
-
-
-
+
+
+
+
+
+
+
+
);
- }
-
- return (
-
-
-
-
-
-
-
-
- );
}
diff --git a/apps/ui/lib/components/Typography/Typography.stories.tsx b/apps/ui/lib/components/Typography/Typography.stories.tsx
index 923f67c..834b414 100644
--- a/apps/ui/lib/components/Typography/Typography.stories.tsx
+++ b/apps/ui/lib/components/Typography/Typography.stories.tsx
@@ -1,295 +1,292 @@
import { Text } from '../..';
export default {
- title: 'Components/Text',
- component: Text,
- parameters: {
- layout: 'centered',
- },
- tags: ['autodocs'],
- argTypes: {
- variant: {
- control: {
- type: 'select',
- options: [
- 'body-1',
- 'body-2',
- 'body-3',
- 'button-1',
- 'button-2',
- 'button-3',
- 'heading-1',
- 'heading-2',
- 'heading-3',
- 'heading-4',
- 'heading-5',
- 'heading-6',
- 'label-1',
- 'label-2',
- 'label-2-strong',
- 'label-3',
- 'subtitle-1',
- 'subtitle-2',
- 'subtitle-3',
- ],
- },
- defaultValue: 'body-1',
- description: 'The variant of the Text component.',
+ title: 'Components/Text',
+ component: Text,
+ parameters: {
+ layout: 'centered',
},
- alignment: {
- control: {
- type: 'select',
- options: ['left', 'right', 'center', 'justify'],
- },
- defaultValue: 'left',
- description: 'The text alignment of the Text component.',
+ tags: ['autodocs'],
+ argTypes: {
+ variant: {
+ control: {
+ type: 'select',
+ options: [
+ 'body-1',
+ 'body-2',
+ 'body-3',
+ 'button-1',
+ 'button-2',
+ 'button-3',
+ 'heading-1',
+ 'heading-2',
+ 'heading-3',
+ 'heading-4',
+ 'heading-5',
+ 'heading-6',
+ 'label-1',
+ 'label-2',
+ 'label-2-strong',
+ 'label-3',
+ 'subtitle-1',
+ 'subtitle-2',
+ 'subtitle-3',
+ ],
+ },
+ defaultValue: 'body-1',
+ description: 'The variant of the Text component.',
+ },
+ alignment: {
+ control: {
+ type: 'select',
+ options: ['left', 'right', 'center', 'justify'],
+ },
+ defaultValue: 'left',
+ description: 'The text alignment of the Text component.',
+ },
+ color: {
+ control: 'color',
+ defaultValue: '#2A2C35',
+ description: 'The color of the text in the Text component.',
+ },
+ asChild: {
+ control: 'text',
+ description:
+ 'The type of child element to render within the Text component.',
+ },
+ children: {
+ control: 'text',
+ description: 'The text content of the Text component.',
+ },
},
- color: {
- control: 'color',
- defaultValue: '#2A2C35',
- description: 'The color of the text in the Text component.',
- },
- asChild: {
- control: 'text',
- description:
- 'The type of child element to render within the Text component.',
- },
- children: {
- control: 'text',
- description: 'The text content of the Text component.',
- },
- },
};
-// Create a template for your Text component
-const Template = (args: any) => ;
-export const Default = Template.bind({});
-Default.args = {
- variant: 'heading-1',
- alignment: 'left',
- color: '#2A2C35',
- children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-};
+export const Default = () => (
+
+);
// Combined Story
export const AllVariants = () => {
- return (
- <>
- {/* Body-1 */}
-
-
- body-1
-
-
+ return (
+ <>
+ {/* Body-1 */}
+
+
+ body-1
+
+
- {/* Body-2 */}
-
-
- body-2
-
-
+ {/* Body-2 */}
+
+
+ body-2
+
+
- {/* Body-3 */}
-
-
- body-3
-
-
+ {/* Body-3 */}
+
+
+ body-3
+
+
- {/* Button-1 */}
-
-
- Button-1
-
-
+ {/* Button-1 */}
+
+
+ Button-1
+
+
- {/* Button-2 */}
-
-
- Button-2
-
-
+ {/* Button-2 */}
+
+
+ Button-2
+
+
- {/* Heading-1 */}
-
-
- Heading-1
-
-
+ {/* Heading-1 */}
+
+
+ Heading-1
+
+
- {/* Heading-2 */}
-
-
- Heading-2
-
-
+ {/* Heading-2 */}
+
+
+ Heading-2
+
+
- {/* Heading-3 */}
-
-
- Heading-3
-
-
+ {/* Heading-3 */}
+
+
+ Heading-3
+
+
- {/* Heading-4 */}
-
-
- Heading-4
-
-
+ {/* Heading-4 */}
+
+
+ Heading-4
+
+
- {/* Heading-5 */}
-
-
- Heading-5
-
-
+ {/* Heading-5 */}
+
+
+ Heading-5
+
+
- {/* Heading-6 */}
-
-
- Heading-6
-
-
+ {/* Heading-6 */}
+
+
+ Heading-6
+
+
- {/* Label-1 */}
-
-
- label-1
-
-
+ {/* Label-1 */}
+
+
+ label-1
+
+
- {/* Label-2 */}
-
-
- label-2
-
-
+ {/* Label-2 */}
+
+
+ label-2
+
+
- {/* Subtitle-1 */}
-
-
- subtitle-1
-
-
+ {/* Subtitle-1 */}
+
+
+ subtitle-1
+
+
- {/* Subtitle-2*/}
-
-
- subtitle-2
-
-
+ {/* Subtitle-2*/}
+
+
+ subtitle-2
+
+
- {/* Subtitle-3 */}
-
-
- subtitle-3
-
-
-
- );
+ {/* Subtitle-3 */}
+
+
+ subtitle-3
+
+
+
+ );
};
-export const ColorStory = Template.bind({});
-ColorStory.args = {
- variant: 'body-1',
- alignment: 'center',
- color: '#2a52be',
- children:
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-};
export const withTailwind = () => {
- return (
-
-
- With extensible tailwind classes
-
-
- );
+ return (
+
+
+ With extensible tailwind classes
+
+
+ );
};
export const withTailwindAndVariant = () => {
- return (
-
-
- with tailwind classes and variant
-
-
- );
+ return (
+
+
+ with tailwind classes and variant
+
+
+ );
};
export const withTailwindAndVariant2 = () => {
- return (
-
-
- with tailwind classes and variant
-
-
- );
+ return (
+
+
+ with tailwind classes and variant
+
+
+ );
};
-// Alignment Center
-export const AlignmentCenterStory = Template.bind({});
-AlignmentCenterStory.args = {
- variant: 'body-1',
- alignment: 'center',
- color: '#2A2C35',
- children:
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-};
+export const AlignmentCenter = () => (
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+);
// Alignment Left
-export const AlignmentLeftStory = Template.bind({});
-AlignmentLeftStory.args = {
- variant: 'body-1',
- alignment: 'left',
- color: '#2A2C35',
- children:
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
-};
+export const AlignmentLeft = () => (
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
+
+);
// Alignment Right
-export const AlignmentRightStory = Template.bind({});
-AlignmentRightStory.args = {
- variant: 'body-1',
- alignment: 'right',
- color: '#2A2C35',
- children:
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
-};
+export const AlignmentRight = () => (
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
+
+);
// Alignment Justify
-export const AlignmentJustifyStory = Template.bind({});
-AlignmentJustifyStory.args = {
- variant: 'body-1',
- alignment: 'justify',
- color: '#2A2C35',
- children:
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
-};
+export const AlignmentJustify = () => (
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
+
+);
-// story for maxLines
-export const Body2MaxLinesEllipsis = Template.bind({});
-Body2MaxLinesEllipsis.args = {
- variant: 'body-2',
- alignment: 'left',
- color: '#2A2C35',
- width: 400,
- children:
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
- maxLines: 2, // Limit the maximum lines
-};
+// Max Lines Example
+export const MaxLinesEllipsis = () => (
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
+
+);
-export const asChild = Template.bind({});
-asChild.args = {
- variant: 'body-1',
- asChild: true,
- alignment: 'center',
- color: '#2A2C35',
- children: This is heading 1
,
-};
+// As Child Example
+export const AsChildExample = () => (
+
+ This is heading 1
+
+);
\ No newline at end of file
diff --git a/apps/ui/tsconfig.json b/apps/ui/tsconfig.json
index 11ea0f5..ae72426 100644
--- a/apps/ui/tsconfig.json
+++ b/apps/ui/tsconfig.json
@@ -9,6 +9,7 @@
"declaration": true,
"declarationDir": "dist/lib",
"emitDeclarationOnly": true,
+ "noImplicitAny": false,
"baseUrl": ".",
"paths": {
"@/*": ["./lib/*"],