Skip to content

Commit

Permalink
fix: the docs mistakes
Browse files Browse the repository at this point in the history
  • Loading branch information
@HamzaAmar
HamzaAmar committed May 20, 2024
1 parent 1a27b0a commit 9968163
Show file tree
Hide file tree
Showing 47 changed files with 402 additions and 670 deletions.
54 changes: 27 additions & 27 deletions apps/docs/content/components/accordion.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,22 +27,22 @@ function AccordionType() {
<>
<Accordion type="single">
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
veniam recusandae.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error
odio animi mollitia? Blanditiis
Expand All @@ -51,22 +51,22 @@ function AccordionType() {
</Accordion>
<Accordion type="multiple">
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
veniam recusandae.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error
odio animi mollitia? Blanditiis
Expand Down Expand Up @@ -97,22 +97,22 @@ function AccordionBase(props) {
return (
<Accordion {...props}>
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
veniam recusandae.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error odio
animi mollitia? Blanditiis
Expand Down Expand Up @@ -155,22 +155,22 @@ function AccordionBase(props) {
return (
<Accordion {...props}>
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
veniam recusandae.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error odio
animi mollitia? Blanditiis
Expand Down Expand Up @@ -210,22 +210,22 @@ function AccordionCollapsible() {
return (
<Accordion collapsible>
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
veniam recusandae.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error odio
animi mollitia? Blanditiis
Expand Down Expand Up @@ -253,22 +253,22 @@ function AccordionType() {
return (
<Accordion variant="solid">
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
veniam recusandae.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error odio
animi mollitia? Blanditiis
Expand All @@ -277,22 +277,22 @@ function AccordionType() {
</Accordion>
<Accordion variant="outline">
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
veniam recusandae.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error odio
animi mollitia? Blanditiis
Expand All @@ -301,22 +301,22 @@ function AccordionType() {
</Accordion>
<Accordion variant="soft">
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
veniam recusandae.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error odio
animi mollitia? Blanditiis
Expand Down Expand Up @@ -344,22 +344,22 @@ function AccordionBase(props){
return(
<Accordion {...props}>
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt hic debitis, neque accusamus atque
provident facilis vel ipsa illo officia aliquid dolore veritat iente at cum dolores.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos laborum distinctio officiis a eaque
perspiciatis itaque, fugiat quaerat! Natus beatae eius ullam sed repellendus aliquam provident quod fugiat
veniam recusandae.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item>
<Accordion.Button title="Hello" />
<Accordion.Button> Hello </Accordion.Button>
<Accordion.Panel>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, voluptates ratione doloremque quasi error odio
animi mollitia? Blanditiis
Expand Down
22 changes: 0 additions & 22 deletions apps/docs/content/components/alert.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,28 +223,6 @@ Example usage:
</Flex>
```

### Isomerphic Alert

The as prop allows you to customize the tag of the alert. The default tag is div, but you can use the as prop to change it to any other valid HTML tag, such as span or article.

Here is an example of how to display the alert as a span:

```tsx showLineNumbers title="Alert.tsx"
<Alert as='span' color="danger" title="hello" />
<Alert as='article' color="danger" title="hello" />
```

## Custom the style

We know that you may not always like the style of the alerts that we provide in our library. That's why we've given you the ability to customize the style of the alerts to your liking. You can use the style prop to set the background color, font, and other properties of the alert, and you can use the className prop to add custom CSS classes to the alert.

<AlertPlayGround.CustomStyle />

```tsx showLineNumbers title="Alert.tsx"
<Alert color="danger" title="hello" className="u_secondary" />
<Alert color="danger" title="hello" style={{ background: 'success' }} />
```

## Accessibility

Accessibility is a core feature of Pillar UI, extending to components like the Alert. Here's a guide on ensuring accessibility when employing the Alert component:
Expand Down
35 changes: 33 additions & 2 deletions apps/docs/content/components/blockquote.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ function CornerCorners() {
}
```

## Color
### Color

Type: Color (string)
Default: `primary`
Expand Down Expand Up @@ -94,7 +94,7 @@ function BlockquoteColor() {
}
```

## Size
### Size

Type: Size (string)
Default: `md`
Expand Down Expand Up @@ -136,6 +136,37 @@ function BlockquoteSize() {
}
```

<BlockquotePlayGround.Cite />

### Cite

The `Blockquote.Cite` subcomponent is a specialized element for attributing the quoted content to its source.

- `title` (string): The text of the citation (e.g., author name, source title).
- `align` (`start`| `center`| `end`) default `start`: Controls the horizontal alignment of the citation (`start`, `center`, or `end`; default is `start`).

** Example Usage **

<BlockquotePlayGround.Cite />

```tsx showLineNumbers title="Blockquote.tsx"
import { Blockquote } from '@pillar-ui/core'

function BlockquoteCite() {
return (
<div className="l_flow__md">
<Blockquote color="danger">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
{/* ... other text ... */}
<Blockquote.Cite title="Hello world" />
</Blockquote>

{/* ... other examples with alignment */}
</div>
)
}
```

## Use Case

The `blockquote` component is designed to create stylish and customizable blockquote elements in your web applications. It's useful for emphasizing quoted content in an elegant manner.
Expand Down
29 changes: 11 additions & 18 deletions apps/docs/content/components/button.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,25 +133,18 @@ Example usage:
<ButtonPlayGround.Variants />

```tsx showLineNumbers title="Button.tsx"
function ButtonVariants(){
return(
<Button variant='solid' >Hello World</Button>
<Button variant='soft' >Hello World</Button>
<Button variant='outline' >Hello World</Button>
<Button variant='text' >Hello World</Button>
<Button variant='link' >Hello World</Button>
<Button variant='mixed' >Hello World</Button>

// ===== Icon Button Section=====

// For the iconButton, only these three variants are supported.
<IconButton variant='solid' />
<IconButton variant='soft' />
<IconButton variant='outline' />
<IconButton variant='mixed' />
)
function ButtonVariants() {
return (
<>
<Button variant="solid">Hello World</Button>
<Button variant="soft">Hello World</Button>
<Button variant="outline">Hello World</Button>
<Button variant="text">Hello World</Button>
<Button variant="link">Hello World</Button>
<Button variant="mixed">Hello World</Button>
</>
)
}

```

### Icon
Expand Down
25 changes: 3 additions & 22 deletions apps/docs/src/component/core/colors/colors.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,7 @@ function ColorItem({ item, value }: ColorItem) {
}

return (
<Grid
as={Paper}
borderPosition="bottom"
borderColor="opacity-6"
pb="md"
items="center"
grid="4rem 1fr auto"
gap="sm"
bb="1px solid red"
>
<Grid as={Paper} border items="center" grid="4rem 1fr auto" gap="sm">
<Text size="sm">{item} </Text>
<div className="l_flow__sm">
<Grid justify="center" grid="repeat(12, 1fr) x auto 30px 30px" gap="xs">
Expand All @@ -48,20 +39,10 @@ function ColorItem({ item, value }: ColorItem) {
</Text>
))}
{light.map((color) => (
<Paper
b="1px solid var(--opacity-10)"
corner="xs"
style={{ background: `hsl(${color})` }}
key={`${color}-light`}
/>
<Paper corner="xs" style={{ background: `hsl(${color})` }} key={`${color}-light`} />
))}
{dark.map((color) => (
<Paper
b="1px solid var(--opacity-10)"
corner="xs"
style={{ height: '30px', background: `hsl(${color})` }}
key={`${color}-dark`}
/>
<Paper corner="xs" style={{ height: '30px', background: `hsl(${color})` }} key={`${color}-dark`} />
))}
</Grid>
</div>
Expand Down
Loading

0 comments on commit 9968163

Please sign in to comment.