diff --git a/apps/stories/stories/IconButton.stories.tsx b/apps/stories/stories/IconButton.stories.tsx deleted file mode 100644 index 73b70519..00000000 --- a/apps/stories/stories/IconButton.stories.tsx +++ /dev/null @@ -1,141 +0,0 @@ -import React, { CSSProperties } from 'react' -import { IconButton, Flex, Paper } from '@pillar-ui/core' -import { Meta, StoryObj } from '@storybook/react' -import { ThumbUp } from '@pillar-ui/icons' - -const meta: Meta = { - title: 'Components/IconButton', -} - -export default meta - -export function IconButtonsColors() { - return ( - - } color="su" /> - } color="w" /> - } color="d" /> - } color="se" /> - } color="b" /> - } color="p" /> - } color="i" /> - - ) -} - -export function IconButtonsSizes() { - return ( - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - ) -} - -export function IconButtonsCorners() { - return ( - - } color="su" /> - } color="d" /> - } color="se" /> - } color="b" /> - } color="p" /> - - ) -} -const VARIANTS = ['shadow', 'solid', 'mixed', 'soft', 'outline', 'link', 'text'] as const - -export function IconButtonsVariants() { - return ( -
- {VARIANTS.map((variant) => ( - - } variant={variant} color="su" /> - } variant={variant} color="w" /> - } variant={variant} color="d" /> - } variant={variant} color="se" /> - } variant={variant} color="b" /> - } variant={variant} color="p" /> - - ))} -
- ) -} - -export function ButtonCornerDefaults() { - return ( -
- - - } color="p" /> - - - } color="p" /> - - - } color="p" /> - - - } color="p" /> - - } color="p" /> - - - - - } color="p" /> - - - } color="p" /> - - - } color="p" /> - - - } color="p" /> - - } color="p" /> - - - - } color="p" /> - - - } color="p" /> - - - } color="p" /> - - - } color="p" /> - - } color="p" /> - - - - - } color="p" /> - - - } color="p" /> - - - } color="p" /> - - - } color="p" /> - - } color="p" /> - -
- ) -} - -export const Playground: StoryObj = {} diff --git a/apps/stories/stories/InputPassword.stories.tsx b/apps/stories/stories/InputPassword.stories.tsx deleted file mode 100644 index b050074c..00000000 --- a/apps/stories/stories/InputPassword.stories.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import React from 'react' -import type { Meta } from '@storybook/react' -import { Close, OpenSource, Lock, LockOff, User } from '@pillar-ui/icons' -import { Flex, FormController, InputPassword } from '@pillar-ui/core' - -const meta: Meta = { - title: 'Components/Form/InputPassword', - component: InputPassword, - args: { - 'aria-label': 'Nice', - placeholder: 'Type your Name', - }, -} as Meta - -export default meta -export const FilledInput = () => { - return ( - - - - - - - - - - } placeholder="Placeholder" /> - - ) -} - -export const OutlineInput = () => { - return ( - - - - - - - - - - } placeholder="Placeholder" /> - - ) -} - -export const BorderedInput = () => { - return ( - - - - - - - - - - - ) -} - -export const CornerInput = () => { - return ( - - - - - - - - - - ) -} - -export const SizeInput = () => { - return ( - - - - - - ) -} - -export const ColorInput = () => { - return ( - - - - - - - - - ) -} - -export const InputPasswordCustomIcon = () => { - return ( - - } hiddenIcon={} /> - } hiddenIcon={} /> - - - } - hiddenIcon={} - /> - - - ) -} - -export const Playground = {} diff --git a/apps/stories/stories/alert.stories.tsx b/apps/stories/stories/alert.stories.tsx index 47a155af..e35c7421 100644 --- a/apps/stories/stories/alert.stories.tsx +++ b/apps/stories/stories/alert.stories.tsx @@ -1,7 +1,7 @@ import React, { CSSProperties, useState } from 'react' -import { Meta, StoryObj } from '@storybook/react' +import { Meta } from '@storybook/react' import { Alert, Button, Flex, Heading } from '@pillar-ui/core' -import { Check, CircleCheck, CircleInfo, CircleWarning } from '@pillar-ui/icons' +import { CircleInfo, CircleWarning } from '@pillar-ui/icons' const meta: Meta = { title: 'Components/Alert', @@ -11,6 +11,9 @@ const meta: Meta = { message: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima illum quidem facilis harum velit veritatis! Voluptatum, quos ipsa! Magnam exercitationem repellat, aspernatur porro optio tempore vero dolorem suscipit vitae delectus.', }, + argTypes: { + color: ['red', 'blue'], + }, } export default meta @@ -25,7 +28,7 @@ function AlertBase({ export const AlertColors = () => { return ( - + @@ -88,6 +91,10 @@ export const AlertSizes = () => { message="Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet pariatur voluptatem suscipit deleniti similique, corrupti harum hic eaque quis, cumque, tenetur sunt rerum odit! Neque aspernatur voluptate consectetur assumenda commodi." size="8" /> + + + + ) } @@ -102,6 +109,10 @@ export const AlertCorner = () => { + + + + ) } @@ -181,43 +192,3 @@ export const AlertTitleIcon = () => { ) } - -export const AlertCustomStyle = () => { - return ( - - - - - - - - - - - ) -} - -export const AlertIsomerphic = () => { - return ( - - - - - ) -} - -export function AlertCornerDefaults() { - return ( -
- Alert Corner 20px corner - - - - - - -
- ) -} - -export const Playground: StoryObj = {} diff --git a/apps/stories/stories/avatar.stories.tsx b/apps/stories/stories/avatar.stories.tsx index 05242345..fc990217 100644 --- a/apps/stories/stories/avatar.stories.tsx +++ b/apps/stories/stories/avatar.stories.tsx @@ -1,7 +1,7 @@ import React, { CSSProperties, useRef, useState } from 'react' import { Avatar, Flex, Paper, Button, AvatarGroup } from '@pillar-ui/core' import { Meta, StoryFn } from '@storybook/react' -import { DotsHorizontal } from '@pillar-ui/icons' +import { DotsHorizontal, Exclamation, Users } from '@pillar-ui/icons' const meta: Meta = { title: 'Components/Avatar', @@ -70,33 +70,13 @@ export const AvatarRefForwarded = () => { export function AvatarsCorners() { return (
- - - - - - - - - - - - - - - - - - - - - + @@ -110,6 +90,14 @@ export function AvatarsCorners() { + + +

WIth CSS Variables

+ + + + +
) } @@ -186,32 +174,10 @@ export function AvatarsVariants() { ) } -export function AvatarGroupVariants() { - return ( -
- - - - - - - - - - - - - - - -
- ) -} - -export function AvatarGroupLimit() { +export function AvatarGroupSettings() { return (
- + @@ -223,35 +189,7 @@ export function AvatarGroupLimit() { - - - - - - - - - - - - - - - - -
- ) -} - -export function AvatarGroupCustom() { - return ( -
- }> - - - } image="https://picsum.photos/id/123/100/100" title="Hello" /> - - + } color="d" variant="dashed" layout="grid"> @@ -270,84 +208,6 @@ export function AvatarPolymorphic() { ) } -export function AvatarCustomStyle() { - return ( -
- - -
- ) -} - -export function AvatarCornerDefaults() { - return ( -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- ) -} - const Template: StoryFn = ({ ...args }) => export const Playground = { diff --git a/apps/stories/stories/button.stories.tsx b/apps/stories/stories/button.stories.tsx index e05a9ce0..dd9b3ae2 100644 --- a/apps/stories/stories/button.stories.tsx +++ b/apps/stories/stories/button.stories.tsx @@ -1,5 +1,5 @@ import React, { CSSProperties } from 'react' -import { Button, Flex, Paper, Text } from '@pillar-ui/core' +import { Button, Flex, IconButton, Paper, Text } from '@pillar-ui/core' import { Meta, StoryObj } from '@storybook/react' import { Ballon, Bluetooth, Eight, Eye, Facebook, Github, Plus, ThumbDown, ThumbUp, X } from '@pillar-ui/icons' @@ -15,32 +15,28 @@ const VARIANTS = ['shadow', 'solid', 'mixed', 'soft', 'outline', 'link', 'text'] export const Playground: StoryObj = {} -export function HtmlButton() { - return ( - - - - - - - - - - - ) -} - export function ButtonsColors() { return ( - - - - - - - - - +
+ + + + + + + + + + + } color="su" /> + } color="w" /> + } color="d" /> + } color="se" /> + } color="b" /> + } color="p" /> + } color="i" /> + +
) } @@ -65,32 +61,14 @@ export function ButtonsIcons() { return (
{SIZES.map((size) => ( -
- - {size} Button - - - - - - - - - - - - -
+ + + + ))}
) @@ -99,42 +77,15 @@ export function ButtonsIcons() { export function ButtonsTransforms() { return (
-

with Props

- - - - - -

with Global Capitalize

- - - - - -

with Global lowercase

- - - - - -

with Global uppercase

- - - - - -

Default

- - - - - + + +
) } @@ -164,6 +115,19 @@ export function ButtonsVariants() { ))} + +
+ {VARIANTS.map((variant) => ( + + } variant={variant} color="su" /> + } variant={variant} color="w" /> + } variant={variant} color="d" /> + } variant={variant} color="se" /> + } variant={variant} color="b" /> + } variant={variant} color="p" /> + + ))} +
) } @@ -173,64 +137,29 @@ export function ButtonsCorners() {

Regular

- - - - - - - - - + + + + + + + + + - - - + + + -

Specify the button Corner circle

- - - - - - - - - -

Specify the button Corner Medium

- - - - - - - - + + } corner="0" /> + } corner="3" /> + } corner="2" /> + } corner="3" /> + } corner="4" /> + } corner="5" /> + } corner="full" />
) @@ -238,26 +167,29 @@ export function ButtonsCorners() { export function ButtonSizes() { return ( - - - - - - - - +
+ + + + + + + + + + + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + +
) } @@ -373,115 +305,18 @@ export function ButtonsLength() { ) } -export function ButtonCornerDefaults() { +export function ButtonDefaults() { return (
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- ) -} - -export function ButtonTransformDefaults() { - return ( -
- - - - - - - -
- ) -} -export function ButtonSizeDefaults() { - return ( -
- - - - - - - - - - - - +
+ +
+
+ +
+
+ +
) } diff --git a/apps/stories/stories/input.stories.tsx b/apps/stories/stories/input.stories.tsx index 9e60bf7e..dfc0146f 100644 --- a/apps/stories/stories/input.stories.tsx +++ b/apps/stories/stories/input.stories.tsx @@ -1,7 +1,17 @@ import React from 'react' import type { Meta } from '@storybook/react' import { User } from '@pillar-ui/icons' -import { Flex, Input, Button } from '@pillar-ui/core' +import { + Flex, + Input, + Button, + InputFile, + InputNumber, + InputSearch, + InputPassword, + Textarea, + PinInput, +} from '@pillar-ui/core' const meta: Meta = { title: 'Components/Form/Input', @@ -14,14 +24,26 @@ const meta: Meta = { export default meta -export const FilledInput = () => { +export const InputTypes = () => { + return ( + + + + + + +