asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs: create docs workspace (#5174)

Browse Source 
* docs: migrate ui docs to docs universe

* created yarn workspace

* added eslint and tsconfig configurations

* fix eslint configurations

* fixed eslint configurations

* shared tailwind configurations

* added shared ui package

* added more shared components

* migrating more components

* made details components shared

* move InlineCode component

* moved InputText

* moved Loading component

* Moved Modal component

* moved Select components

* Moved Tooltip component

* moved Search components

* moved ColorMode provider

* Moved Notification components and providers

* used icons package

* use UI colors in api-reference

* moved Navbar component

* used Navbar and Search in UI docs

* added Feedback to UI docs

* general enhancements

* fix color mode

* added copy colors file from ui-preset

* added features and enhancements to UI docs

* move Sidebar component and provider

* general fixes and preparations for deployment

* update docusaurus version

* adjusted versions

* fix output directory

* remove rootDirectory property

* fix yarn.lock

* moved code component

* added vale for all docs MD and MDX

* fix tests

* fix vale error

* fix deployment errors

* change ignore commands

* add output directory

* fix docs test

* general fixes

* content fixes

* fix announcement script

* added changeset

* fix vale checks

* added nofilter option

* fix vale error
This commit is contained in:
Shahed Nasser
2023-09-21 20:57:15 +03:00
committed by GitHub
parent 19c5d5ba36
commit fa7c94b4cc
3209 changed files with 32188 additions and 31018 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
www/apps/ui/src/content/docs/components/code-block.mdx Normal file
View File

@@ -0,0 +1,77 @@
---
title: "Code Block"
description: "Allows you to render highlighted code snippets"
component: true
---
<ComponentExample name="code-block-demo" />
## Usage
---
```tsx
import { CodeBlock } from "@medusajs/ui"
```
```tsx
<CodeBlock
snippets={[
{
language: "tsx",
label: "Label",
code: "import { useProduct } from \"medusa-react\"",
},
]}
>
<CodeBlock.Header />
<CodeBlock.Body />
</CodeBlock>
```
## API Reference
---
### CodeBlock
This component is based on the `div` element and supports all props of this element.
<ComponentProps component="code-block" />
### CodeBlock.Header
This component is based on the `div` element and supports all props of this element.
<ComponentProps component="code-block-header" />
### CodeBlock.Header.Meta
This component is based on the `div` element and supports all props of this element.
### CodeBlock.Body
This component is based on the `div` element and supports all props of this element.
<ComponentProps component="code-block-body" />
## Examples
---
### Single snippet
If you want to only show a code sample for one language or API, you can choose to hide the snippet labels:
<ComponentExample name="code-block-single" />
### No Header
You could also choose to omit the header entirely:
<ComponentExample name="code-block-no-header" />
### No Line Numbers
<ComponentExample name="code-block-no-lines" />