Skip to content

feat(www): implements the new CodeBlock #6055

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 22 commits into
base: master
Choose a base branch
from
Draft

feat(www): implements the new CodeBlock #6055

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
538b2bd
chore(www): update clay packages
matuzalemsteles May 8, 2025
264faef
feat(www): update renoun to the latest version and migrate the usage …
matuzalemsteles May 8, 2025
079b2be
feat(www): refactor the docs implementation to use the new Directory API
matuzalemsteles May 9, 2025
f83973b
feat(www): implements the new code block
matuzalemsteles May 9, 2025
07985f0
chore: fixes the icon bug in codesandbox
matuzalemsteles May 9, 2025
c1a482e
chore(www): add cache for request to lxc
matuzalemsteles May 9, 2025
51da247
fix(www): fixes bug when starting build
matuzalemsteles May 9, 2025
00dead2
fix(www): generates the css and icons build with the local package
matuzalemsteles May 9, 2025
c71d352
chore: format
matuzalemsteles May 9, 2025
e35f629
chore(www): remove patch-package package
matuzalemsteles May 9, 2025
3ec327f
fix(www): fixes bug when not resolving markup documents
matuzalemsteles May 9, 2025
2dc8191
chore: change tab indentation for mdx files for better readability of…
matuzalemsteles May 9, 2025
90f86c8
fix(www): fixes bug of pages with the same name
matuzalemsteles May 11, 2025
ff9191d
fix(@clayui/core): fixes bug when not showing the icons of the IconSe…
matuzalemsteles May 11, 2025
95ee83d
chore(www): add more dependencies in the code block
matuzalemsteles May 11, 2025
9982eca
feat(www): refactor the implementation of the APIReference component
matuzalemsteles May 13, 2025
32c08cf
chore(www): update icon path
matuzalemsteles May 13, 2025
1b2114b
fix(www): fixes bug when running build for deploy
matuzalemsteles May 13, 2025
18cabf4
chore(www): resolves code dependencies only when preview is enabled
matuzalemsteles May 13, 2025
e1c130a
fix(www): fixes bug where navigation bar appears on pages without the…
matuzalemsteles May 13, 2025
622b878
fix(www): fixes show code button bug
matuzalemsteles May 13, 2025
cd63e8d
chore(www): add credits to the createCodeSandbox method
matuzalemsteles May 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,6 @@ package-lock.json
/packages/clay-css/src/scss/bootstrap/**/*.scss
/packages/generator-clay-component/app/templates
yarn.lock
.next
.next
.netlify
out
15 changes: 13 additions & 2 deletions .prettierrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,16 @@
"singleQuote": true,
"tabWidth": 4,
"trailingComma": "es5",
"useTabs": true
}
"useTabs": true,
"overrides": [
{
"files": [
"*.mdx"
],
"options": {
"useTabs": false,
"tabWidth": 2
}
}
]
}
311 changes: 146 additions & 165 deletions packages/clay-alert/docs/alert.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/alerts/'
packageNpm: '@clayui/alert'
packageUse: "import Alert from '@clayui/alert';"
packageTypes:
[
'clay-alert/src/index.tsx',
'clay-alert/src/Footer.tsx',
'clay-alert/src/ToastContainer.tsx',
]
[
'clay-alert/src/index.tsx',
'clay-alert/src/Footer.tsx',
'clay-alert/src/ToastContainer.tsx',
]
---

## Display Types
Expand All @@ -21,30 +21,28 @@ import {Provider} from '@clayui/core';
import Alert from '@clayui/alert';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<Alert displayType="info" title="Info" role={null}>
This is an info message.
</Alert>

<Alert displayType="success" title="Success" role={null}>
This is a success message.
</Alert>

<Alert displayType="warning" title="Warning" role={null}>
This is a warning message.
</Alert>

<Alert displayType="danger" title="Danger" role={null}>
This is a danger message.
</Alert>
</div>
</Provider>
);
return (
<Provider spritemap="/icons.svg">
<div className="p-4">
<Alert displayType="info" title="Info" role={null}>
This is an info message.
</Alert>

<Alert displayType="success" title="Success" role={null}>
This is a success message.
</Alert>

<Alert displayType="warning" title="Warning" role={null}>
This is a warning message.
</Alert>

<Alert displayType="danger" title="Danger" role={null}>
This is a danger message.
</Alert>
</div>
</Provider>
);
}
```

Expand All @@ -59,60 +57,53 @@ import {Provider, Button} from '@clayui/core';
import Alert from '@clayui/alert';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<div className="c-mt-3">
<Alert
actions={
<Button.Group spaced>
<Button displayType="warning" small>
Replace
</Button>
<Button alert>Keep Both</Button>
</Button.Group>
}
displayType="warning"
onClose={() => {}}
title="Alert"
variant="inline"
>
A file with this name already exists.
</Alert>
</div>

<Alert
displayType="info"
title="Info"
variant="stripe"
role={null}
>
This is a stripe variant.
</Alert>

<div className="c-mt-3">
<Alert
displayType="success"
title="This is an inline variant."
variant="inline"
role={null}
/>
</div>

<div className="c-mt-3">
<Alert
displayType="danger"
title="This is a feedback variant."
variant="feedback"
role={null}
/>
</div>
</div>
</Provider>
);
return (
<Provider spritemap="/icons.svg">
<div className="p-4">
<div className="c-mt-3">
<Alert
actions={
<Button.Group spaced>
<Button displayType="warning" small>
Replace
</Button>
<Button alert>Keep Both</Button>
</Button.Group>
}
displayType="warning"
onClose={() => {}}
title="Alert"
variant="inline"
>
A file with this name already exists.
</Alert>
</div>

<Alert displayType="info" title="Info" variant="stripe" role={null}>
This is a stripe variant.
</Alert>

<div className="c-mt-3">
<Alert
displayType="success"
title="This is an inline variant."
variant="inline"
role={null}
/>
</div>

<div className="c-mt-3">
<Alert
displayType="danger"
title="This is a feedback variant."
variant="feedback"
role={null}
/>
</div>
</div>
</Provider>
);
}
```

Expand All @@ -125,24 +116,22 @@ import {Provider} from '@clayui/core';
import Alert from '@clayui/alert';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<Alert
displayType="info"
symbol="thumbs-up-full"
title="Info"
variant="stripe"
role={null}
>
This is a stripe variant.
</Alert>
</div>
</Provider>
);
return (
<Provider spritemap="/icons.svg">
<div className="p-4">
<Alert
displayType="info"
symbol="thumbs-up-full"
title="Info"
variant="stripe"
role={null}
>
This is a stripe variant.
</Alert>
</div>
</Provider>
);
}
```

Expand All @@ -153,21 +142,19 @@ import {Provider, Button} from '@clayui/core';
import Alert from '@clayui/alert';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<Alert displayType="info" title="With a Button" role={null}>
This is an alert with a button!
<Alert.Footer>
<Button alert>View</Button>
</Alert.Footer>
</Alert>
</div>
</Provider>
);
return (
<Provider spritemap="/icons.svg">
<div className="p-4">
<Alert displayType="info" title="With a Button" role={null}>
This is an alert with a button!
<Alert.Footer>
<Button alert>View</Button>
</Alert.Footer>
</Alert>
</div>
</Provider>
);
}
```

Expand All @@ -178,24 +165,22 @@ import {Provider, Button} from '@clayui/core';
import Alert from '@clayui/alert';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<Alert
actions={<Button alert>View</Button>}
displayType="info"
title="With a Button"
variant="inline"
role={null}
>
This is an alert with a button!
</Alert>
</div>
</Provider>
);
return (
<Provider spritemap="/icons.svg">
<div className="p-4">
<Alert
actions={<Button alert>View</Button>}
displayType="info"
title="With a Button"
variant="inline"
role={null}
>
This is an alert with a button!
</Alert>
</div>
</Provider>
);
}
```

Expand All @@ -208,42 +193,38 @@ import {Provider, Button} from '@clayui/core';
import Alert from '@clayui/alert';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
const [toastItems, setToastItems] = useState([]);

return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<div>
<Button
onClick={() =>
setToastItems([...toastItems, Math.random() * 100])
}
>
Add Alert
</Button>
</div>

<Alert.ToastContainer>
{toastItems.map((value) => (
<Alert
autoClose={5000}
key={value}
onClose={() => {
setToastItems((prevItems) =>
prevItems.filter((item) => item !== value)
);
}}
title="Hola:"
>
My value is {value}
</Alert>
))}
</Alert.ToastContainer>
</div>
</Provider>
);
const [toastItems, setToastItems] = useState([]);

return (
<Provider spritemap="/icons.svg">
<div className="p-4">
<div>
<Button
onClick={() => setToastItems([...toastItems, Math.random() * 100])}
>
Add Alert
</Button>
</div>

<Alert.ToastContainer>
{toastItems.map((value) => (
<Alert
autoClose={5000}
key={value}
onClose={() => {
setToastItems((prevItems) =>
prevItems.filter((item) => item !== value)
);
}}
title="Hola:"
>
My value is {value}
</Alert>
))}
</Alert.ToastContainer>
</div>
</Provider>
);
}
```
Loading
Loading