-
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
810 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| { | ||
| "query target": { | ||
| "scope": "typescriptreact,javascriptreact", | ||
| "prefix": "$:target", | ||
| "body": [ | ||
| "data-target={$('$1')}" | ||
| ] | ||
| }, | ||
| "query ready block": { | ||
| "scope": "typescript,javascript", | ||
| "prefix": "$:ready", | ||
| "body": [ | ||
| "$.ready(async () => {", | ||
| " $1", | ||
| "});" | ||
| ] | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| --- | ||
| import path from "path"; | ||
| import { styles } from "@/registry/styles"; | ||
| import { readFileSync } from "fs"; | ||
| import { Tabs, TabItem, Code } from "@astrojs/starlight/components"; | ||
| export interface Props { | ||
| name: string; | ||
| } | ||
| const { name } = Astro.props; | ||
| const components = await Promise.all( | ||
| styles.map(async (style) => { | ||
| const filename = path.join( | ||
| process.cwd(), | ||
| "src", | ||
| "registry", | ||
| style.name, | ||
| "example", | ||
| `${name}.ts` | ||
| ); | ||
| const Component = (await import(/* @vite-ignore */ `${filename}`)).default; | ||
| const code = readFileSync(`${filename}`) | ||
| .toString() | ||
| .replace(/export\s+default\s+.*;\s*/, "") | ||
| .replace(/@\/registry\/.*\/ui/g, "@/components/ui"); | ||
| return { | ||
| style, | ||
| Component, | ||
| code, | ||
| }; | ||
| }) | ||
| ); | ||
| --- | ||
|
|
||
| <div class="not-content group relative my-4 flex flex-col space-y-2"> | ||
| <Tabs> | ||
| <TabItem label="Preview"> | ||
| <div | ||
| class="mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border" | ||
| > | ||
| <div class="flex items-center justify-between p-4"> | ||
| <select | ||
| class="flex items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>option]:line-clamp-1 h-7 w-[145px] text-xs [&_svg]:h-4 [&_svg]:w-4" | ||
| data-target={$("change-theme")} | ||
| > | ||
| { | ||
| styles.map(({ name, label }, index) => ( | ||
| <option value={name}>{label}</option> | ||
| )) | ||
| } | ||
| </select> | ||
| </div> | ||
|
|
||
| <div class="w-full" style="--radius: 0.5rem;"> | ||
| <div | ||
| class="preview flex min-h-[350px] w-full justify-center p-10 items-center" | ||
| > | ||
| { | ||
| components.map(({ Component, style }, index) => ( | ||
| <div | ||
| data-target={$("preview-" + style.name)} | ||
| hidden={index !== 0} | ||
| > | ||
| <Component /> | ||
| </div> | ||
| )) | ||
| } | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </TabItem> | ||
| <TabItem label="Code"> | ||
| <div> | ||
| { | ||
| components.map(({ code, style }, index) => ( | ||
| <div data-target={$("code-" + style.name)} hidden={index !== 0}> | ||
| <Code code={code} lang="angular-ts" /> | ||
| </div> | ||
| )) | ||
| } | ||
| </div> | ||
| </TabItem> | ||
| </Tabs> | ||
| </div> | ||
|
|
||
| <script> | ||
| import { styles } from "@/registry/styles"; | ||
|
|
||
| $.ready(async () => { | ||
| $("change-theme").addEventListener("change", (event) => { | ||
| const value = event.target.value; | ||
| hiddeComponents(); | ||
| $(`preview-${value}`).hidden = false; | ||
| $(`code-${value}`).hidden = false; | ||
| }); | ||
|
|
||
| function hiddeComponents() { | ||
| styles.forEach(({ name }) => { | ||
| $(`preview-${name}`).hidden = true; | ||
| $(`code-${name}`).hidden = true; | ||
| }); | ||
| } | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| --- | ||
| title: Alert | ||
| description: Displays a callout for user attention. | ||
| --- | ||
|
|
||
| import { Tabs, TabItem, Code } from "@astrojs/starlight/components"; | ||
| import { Steps } from "@astrojs/starlight/components"; | ||
| import ComponentPreview from "@/components/ComponentPreview.astro"; | ||
|
|
||
| <ComponentPreview name="alert-demo" /> | ||
|
|
||
| ## Installation | ||
|
|
||
| <Tabs> | ||
| <TabItem label="CLI"> | ||
| ```bash | ||
| npx shadcn-ng@latest add alert | ||
| ``` | ||
| </TabItem> | ||
|
|
||
| <TabItem label="Manual"> | ||
| <Steps> | ||
| 1. Copy and paste the following code into your project. | ||
|
|
||
| 2. Update the import paths to match your project setup. | ||
| </Steps> | ||
|
|
||
| </TabItem> | ||
| </Tabs> | ||
|
|
||
| ## Usage | ||
|
|
||
| ```ts | ||
| import { | ||
| UbAlertDirective, | ||
| UbAlertDescriptionDirective, | ||
| UbAlertTitleDirective, | ||
| } from "@/components/ui/alert.directive"; | ||
| ``` | ||
|
|
||
| ```angular-html | ||
| <div ubAlert> | ||
| <h5 ubAlertTitle>Heads up!</h5> | ||
| <div ubAlertDescription> | ||
| You can add components and dependencies to your app using the cli. | ||
| </div> | ||
| </div> | ||
| ``` |
Oops, something went wrong.