Skip to content

Commit

Permalink
fix: remove tab stories until I figure a way to solve it
Browse files Browse the repository at this point in the history
  • Loading branch information
@HamzaAmar
HamzaAmar committed Jul 1, 2024
1 parent 5cc100f commit ac31b8f
Show file tree
Hide file tree
Showing 6 changed files with 309 additions and 158 deletions.
291 changes: 146 additions & 145 deletions apps/stories/stories/skeleton.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,159 +1,160 @@
// import { Avatar, Button, Flex, Skeleton, Text, Grid } from '@pillar-ui/core'
// import { useBooleanState } from '@pillar-ui/hooks'
// import { Meta } from '@storybook/react'
// import React, { useEffect, useRef } from 'react'

import { Skeleton } from '@pillar-ui/core'
/* eslint-disable @next/next/no-img-element */
import {
Avatar,
Button,
Flex,
Skeleton,
Text,
Grid,
SkeletonText,
SkeletonButton,
SkeletonAvatar,
} from '@pillar-ui/core'
import { useBooleanState } from '@pillar-ui/hooks'
import { Meta } from '@storybook/react'
import React, { useEffect, useRef } from 'react'

// const meta: Meta<typeof Skeleton> = {
// title: 'Components/Skeleton',
// component: Skeleton,
// }

// export default meta

// function useLoading() {
// const { booleanValue: loading, setFalse } = useBooleanState(true)
// const timerRef = useRef<NodeJS.Timeout>()
const meta: Meta<typeof Skeleton> = {
title: 'Components/Skeleton',
component: Skeleton,
}

// useEffect(() => {
// const timerID = setTimeout(setFalse, 2000)
export default meta

// timerRef.current = timerID
function useLoading() {
const { booleanValue: loading, setFalse } = useBooleanState(true)
const timerRef = useRef<NodeJS.Timeout>()

// return () => {
// clearTimeout(timerRef.current)
// }
// }, [setFalse])
useEffect(() => {
const timerID = setTimeout(setFalse, 2000)

// return loading
// }
timerRef.current = timerID

// export const SkeletonAvatar = () => {
// const loading = useLoading()
// return (
// <Flex items="center" gap="md">
// <SkeletonAvatar size="xs" isLoading={loading}>
// <Avatar size="xs" variant="image" title="Hello" />
// </SkeletonAvatar>
// <SkeletonAvatar size="sm" isLoading={loading}>
// <Avatar size="sm" variant="image" title="Hello" />
// </SkeletonAvatar>
// <SkeletonAvatar size="md" isLoading={loading}>
// <Avatar size="md" variant="image" title="Hello" />
// </SkeletonAvatar>
// <SkeletonAvatar size="xl" isLoading={loading}>
// <Avatar size="xl" variant="image" title="Hello" />
// </SkeletonAvatar>
// <SkeletonAvatar size="2xl" isLoading={loading}>
// <Avatar size="2xl" variant="image" title="Hello" />
// </SkeletonAvatar>
// </Flex>
// )
// }
return () => {
clearTimeout(timerRef.current)
}
}, [setFalse])

// export const SkeletonTextLines = () => {
// const loading = useLoading()
// return (
// <Flex items="center" gap="md">
// <SkeletonText size="xs" isLoading={loading} lines={3}>
// <Text size="xs">hello world</Text>
// </SkeletonText>
// <SkeletonText size="sm" isLoading={loading} lines={3.5}>
// <Text size="sm">hello world</Text>
// </SkeletonText>
// <SkeletonText size="md" isLoading={loading} lines={2.3}>
// <Text size="md">hello world</Text>
// </SkeletonText>
// <SkeletonText size="xl" isLoading={loading} lines={3.3}>
// <Text size="xl">hello world</Text>
// </SkeletonText>
// <SkeletonText size="2xl" isLoading={loading} lines={1.13}>
// <Text size="2xl">hello world</Text>
// </SkeletonText>
// </Flex>
// )
// }
return loading
}

// export const SkeletonTextSizes = () => {
// const loading = useLoading()
// return (
// <Grid grid="1fr 1fr" gap="xl">
// <SkeletonText size="3xs" isLoading={loading}>
// <Text size="xs">hello world</Text>
// </SkeletonText>
// <SkeletonText size="2xs" isLoading={loading}>
// <Text size="xs">hello world</Text>
// </SkeletonText>
// <SkeletonText size="xs" isLoading={loading}>
// <Text size="xs">hello world</Text>
// </SkeletonText>
// <SkeletonText size="sm" isLoading={loading}>
// <Text size="sm">hello world</Text>
// </SkeletonText>
// <SkeletonText size="md" isLoading={loading}>
// <Text size="md">hello world</Text>
// </SkeletonText>
// <SkeletonText size="lg" isLoading={loading}>
// <Text size="md">hello world</Text>
// </SkeletonText>
// <SkeletonText size="xl" isLoading={loading}>
// <Text size="xl">hello world</Text>
// </SkeletonText>
// <SkeletonText size="2xl" isLoading={loading}>
// <Text size="2xl">hello world</Text>
// </SkeletonText>
// <SkeletonText size="3xl" isLoading={loading}>
// <Text size="2xl">hello world</Text>
// </SkeletonText>
// </Grid>
// )
// }
export const Avatars = () => {
const loading = useLoading()
return (
<Flex items="center" gap="md">
<SkeletonAvatar size="xs" isLoading={loading}>
<Avatar size="xs" variant="image" title="Hello" />
</SkeletonAvatar>
<SkeletonAvatar size="sm" isLoading={loading}>
<Avatar size="sm" variant="image" title="Hello" />
</SkeletonAvatar>
<SkeletonAvatar size="md" isLoading={loading}>
<Avatar size="md" variant="image" title="Hello" />
</SkeletonAvatar>
<SkeletonAvatar size="xl" isLoading={loading}>
<Avatar size="xl" variant="image" title="Hello" />
</SkeletonAvatar>
<SkeletonAvatar size="2xl" isLoading={loading}>
<Avatar size="2xl" variant="image" title="Hello" />
</SkeletonAvatar>
</Flex>
)
}

// export const SkeletonButton = () => {
// const loading = useLoading()
// return (
// <Flex items="center" gap="md">
// <SkeletonButton size="xs" isLoading={loading}>
// <Button size="xs">hello world</Button>
// </SkeletonButton>
// <SkeletonButton size="sm" isLoading={loading}>
// <Button size="sm">hello world</Button>
// </SkeletonButton>
// <SkeletonButton size="md" isLoading={loading}>
// <Button size="md">hello world</Button>
// </SkeletonButton>
// <SkeletonButton size="xl" isLoading={loading}>
// <Button size="xl">hello world</Button>
// </SkeletonButton>
// </Flex>
// )
// }
export const SkeletonTextLines = () => {
const loading = useLoading()
return (
<Flex items="center" gap="md">
<SkeletonText size="xs" isLoading={loading} lines={3}>
<Text size="xs">hello world</Text>
</SkeletonText>
<SkeletonText size="sm" isLoading={loading} lines={3.5}>
<Text size="sm">hello world</Text>
</SkeletonText>
<SkeletonText size="md" isLoading={loading} lines={2.3}>
<Text size="md">hello world</Text>
</SkeletonText>
<SkeletonText size="xl" isLoading={loading} lines={3.3}>
<Text size="xl">hello world</Text>
</SkeletonText>
<SkeletonText size="2xl" isLoading={loading} lines={1.13}>
<Text size="2xl">hello world</Text>
</SkeletonText>
</Flex>
)
}

// export const SkeletonBox = () => {
// const loading = useLoading()
// return (
// <Flex items="center" gap="md">
// <Skeleton height="300px" isLoading={loading}>
// <img src="https://picsum.photos/id/300/300/300" alt="" />
// </Skeleton>
// <Skeleton height="200px" isLoading={loading}>
// <img src="https://picsum.photos/id/300/300/200" alt="" />
// </Skeleton>
// <Skeleton height="150px" isLoading={loading}>
// <img src="https://picsum.photos/id/300/300/150" alt="" />
// </Skeleton>
// <Skeleton height="450px" isLoading={loading}>
// <img src="https://picsum.photos/id/300/300/450" alt="" />
// </Skeleton>
// </Flex>
// )
// }
export const SkeletonTextSizes = () => {
const loading = useLoading()
return (
<Grid grid="1fr 1fr" gap="xl">
<SkeletonText size="3xs" isLoading={loading}>
<Text size="xs">hello world</Text>
</SkeletonText>
<SkeletonText size="2xs" isLoading={loading}>
<Text size="xs">hello world</Text>
</SkeletonText>
<SkeletonText size="xs" isLoading={loading}>
<Text size="xs">hello world</Text>
</SkeletonText>
<SkeletonText size="sm" isLoading={loading}>
<Text size="sm">hello world</Text>
</SkeletonText>
<SkeletonText size="md" isLoading={loading}>
<Text size="md">hello world</Text>
</SkeletonText>
<SkeletonText size="lg" isLoading={loading}>
<Text size="md">hello world</Text>
</SkeletonText>
<SkeletonText size="xl" isLoading={loading}>
<Text size="xl">hello world</Text>
</SkeletonText>
<SkeletonText size="2xl" isLoading={loading}>
<Text size="2xl">hello world</Text>
</SkeletonText>
<SkeletonText size="3xl" isLoading={loading}>
<Text size="2xl">hello world</Text>
</SkeletonText>
</Grid>
)
}

const meta: Meta<typeof Skeleton> = {
title: 'Components/Skeleton',
component: Skeleton,
export const Buttons = () => {
const loading = useLoading()
return (
<Flex items="center" gap="md">
<SkeletonButton size="xs" isLoading={loading}>
<Button size="xs">hello world</Button>
</SkeletonButton>
<SkeletonButton size="sm" isLoading={loading}>
<Button size="sm">hello world</Button>
</SkeletonButton>
<SkeletonButton size="md" isLoading={loading}>
<Button size="md">hello world</Button>
</SkeletonButton>
<SkeletonButton size="xl" isLoading={loading}>
<Button size="xl">hello world</Button>
</SkeletonButton>
</Flex>
)
}

export default Meta
export const SkeletonBox = () => {
const loading = useLoading()
return (
<Flex items="center" gap="md">
<Skeleton height="300px" isLoading={loading}>
<img src="https://picsum.photos/id/300/300/300" alt="" />
</Skeleton>
<Skeleton height="200px" isLoading={loading}>
<img src="https://picsum.photos/id/300/300/200" alt="" />
</Skeleton>
<Skeleton height="150px" isLoading={loading}>
<img src="https://picsum.photos/id/300/300/150" alt="" />
</Skeleton>
<Skeleton height="450px" isLoading={loading}>
<img src="https://picsum.photos/id/300/300/450" alt="" />
</Skeleton>
</Flex>
)
}
9 changes: 1 addition & 8 deletions apps/stories/stories/tabs.stories.tsx → apps/stories/stories/tabs.storiesss.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@
// import type { TabProps } from '@pillar-ui/core'
// import { ArrowDown } from '@pillar-ui/icons'

import { Tabs } from '@pillar-ui/core'
import { Meta } from '@storybook/react'

// const meta: Meta<typeof Chips> = {
// title: 'Components/Tabs',
// component: Tabs,
Expand Down Expand Up @@ -138,8 +135,4 @@ import { Meta } from '@storybook/react'
// )
// }

const meta: Meta<typeof Tabs> = {
title: 'Components/Tabs',
component: Tabs,
}
export const Playground = {}
export const a = 1
6 changes: 3 additions & 3 deletions packages/pillar-core/src/core/skeleton/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { ForwardRefComponent } from '../../types/polymorphic.type'
///////////////////////////////////////////////////////////////////////////////////////////////////
*/

const SkeletonAvatar = forwardRef((props, ref) => {
export const SkeletonAvatar = forwardRef((props, ref) => {
const { size = 'xl', corner = 'full', children, isLoading = true, className, ...rest } = props
const classNames = classnames(`skeleton skeleton--avatar u_size-${size} u_corner-${corner}`, {
[className!]: !!className,
Expand All @@ -25,7 +25,7 @@ SkeletonAvatar.displayName = 'SkeletonAvatar'
///////////////////////////////////////////////////////////////////////////////////////////////////
*/

const SkeletonText = forwardRef((props, ref) => {
export const SkeletonText = forwardRef((props, ref) => {
const { size = 'md', lines = 2.5, className, children, isLoading = true, as: Tag = 'div', ...rest } = props
const ceilNumber = Math.ceil(lines)
const classNames = classnames(`skeleton skeleton--text u_size-${size}`, { [className!]: !!className })
Expand Down Expand Up @@ -59,7 +59,7 @@ SkeletonText.displayName = 'SkeletonAvatar'
///////////////////////////////////////////////////////////////////////////////////////////////////
*/

const SkeletonButton = forwardRef((props, ref) => {
export const SkeletonButton = forwardRef((props, ref) => {
const { size = 'md', as: Tag = 'div', className, isLoading, children, ...rest } = props
const classNames = classnames(`skeleton skeleton--btn btn__${size}`, { [className!]: !!className })
const content = <Tag ref={ref} className={classNames} {...rest} />
Expand Down
1 change: 0 additions & 1 deletion packages/pillar-core/src/core/tabs/index.ts
View file

This file was deleted.

Loading

0 comments on commit ac31b8f

Please sign in to comment.