From f4bf41fc4c4f32545c5c1dc23ab5fce43c7ba74e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1n=20UB?= <22903142+adrian-ub@users.noreply.github.com> Date: Fri, 27 Sep 2024 22:17:26 -0500 Subject: [PATCH] docs: new website --- docs/.gitignore | 3 + docs/.vscode/simple-query.code-snippets | 18 - docs/README.md | 47 + docs/astro.config.mjs | 169 +- docs/package.json | 53 +- .../fonts/GeistVariableVF.woff2 | Bin docs/src/assets/logo.svg | 28 - docs/src/components/ComponentPreview.astro | 63 - docs/src/components/ComponentSource.astro | 63 - docs/src/components/Footer.astro | 16 + docs/src/components/Header.astro | 44 + docs/src/components/Logo.astro | 61 + docs/src/components/Navbar.astro | 38 + docs/src/components/PageNavigation.astro | 64 + docs/src/components/SelectStyle/Item.astro | 17 - docs/src/components/SelectStyle/Select.astro | 142 -- docs/src/components/SelectStyle/index.ts | 4 - .../SelectStyle/rehype-select-style.ts | 118 -- docs/src/components/Sidebar.astro | 67 + docs/src/components/Toc.astro | 66 + .../component-preview/ComponentPreview.astro | 90 + .../component-preview/ComponentSource.astro | 62 + .../component-preview/RawCode.astro | 17 + .../component-preview.ts | 0 .../component-preview/select/Select.astro | 148 ++ .../select/SelectContent.astro | 10 + .../component-preview/select/index.ts | 6 + docs/src/components/copy-button.ts | 36 + docs/src/components/mdx/Callout.astro | 13 + docs/src/components/mdx/a.astro | 5 + docs/src/components/mdx/h1.astro | 7 + docs/src/components/mdx/h2.astro | 10 + docs/src/components/mdx/h3.astro | 10 + docs/src/components/mdx/h4.astro | 10 + docs/src/components/mdx/h5.astro | 10 + docs/src/components/mdx/h6.astro | 10 + docs/src/components/mdx/index.ts | 45 + docs/src/components/mdx/li.astro | 7 + docs/src/components/mdx/linked-card.astro | 10 + docs/src/components/mdx/ol.astro | 7 + docs/src/components/mdx/p.astro | 7 + docs/src/components/mdx/pre.astro | 24 + docs/src/components/mdx/step-item.astro | 10 + docs/src/components/mdx/step.astro | 10 + docs/src/components/mdx/ul.astro | 7 + .../components/page-header/PageActions.astro | 8 + .../components/page-header/PageHeader.astro | 7 + .../page-header/PageHeaderDescription.astro | 8 + .../page-header/PageHeaderHeading.astro | 7 + docs/src/components/page-header/index.ts | 11 + .../components/starlight/ContentPanel.astro | 4 - docs/src/components/starlight/Hero.astro | 51 - .../starlight/MarkdownContent.astro | 5 - .../starlight/MobileMenuToggle.astro | 67 - docs/src/components/starlight/PageFrame.astro | 56 - .../components/starlight/PageSidebar.astro | 41 - docs/src/components/starlight/PageTitle.astro | 64 - .../src/components/starlight/Pagination.astro | 38 - docs/src/components/starlight/Search.astro | 476 ----- docs/src/components/starlight/Sidebar.astro | 14 - .../components/starlight/SidebarSublist.astro | 64 - docs/src/components/starlight/SiteTitle.astro | 41 - .../components/starlight/SocialIcons.astro | 32 - .../starlight/TwoColumnContent.astro | 18 - .../components/starlight/header/Header.astro | 37 - .../components/starlight/header/MainNav.astro | 94 - docs/src/components/tabs/Tabs.astro | 94 + docs/src/components/tabs/TabsContent.astro | 21 + docs/src/components/tabs/TabsList.astro | 7 + docs/src/components/tabs/TabsTrigger.astro | 20 + docs/src/components/tabs/index.ts | 11 + docs/src/config/docs.ts | 149 ++ docs/src/config/site.ts | 14 +- docs/src/constants.ts | 1 - docs/src/content/config.ts | 27 +- docs/src/content/docs/{docs => }/cli.mdx | 0 .../docs/{docs => }/components-json.mdx | 9 +- .../src/content/docs/components/accordion.mdx | 100 + .../docs/{docs => }/components/alert.mdx | 36 +- .../docs/{docs => }/components/avatar.mdx | 35 +- .../docs/{docs => }/components/badge.mdx | 39 +- .../content/docs/components/breadcrumb.mdx | 37 + .../docs/{docs => }/components/button.mdx | 39 +- .../docs/{docs => }/components/input.mdx | 39 +- .../src/content/docs/components/separator.mdx | 49 + docs/src/content/docs/components/skeleton.mdx | 56 + docs/src/content/docs/components/switch.mdx | 53 + .../docs/{docs => }/components/table.mdx | 44 +- .../docs/{docs => }/components/tabs.mdx | 44 +- .../docs/{docs => }/components/typography.mdx | 0 .../docs/docs/components/accordion.mdx | 87 - .../docs/docs/components/breadcrumb.mdx | 29 - .../docs/docs/components/separator.mdx | 39 - .../content/docs/docs/components/skeleton.mdx | 46 - .../content/docs/docs/components/switch.mdx | 42 - docs/src/content/docs/docs/index.mdx | 16 - .../docs/docs/installation/angular.mdx | 85 - .../content/docs/docs/installation/astro.mdx | 134 -- .../content/docs/docs/installation/index.mdx | 35 - docs/src/content/docs/index.mdx | 29 +- .../src/content/docs/installation/angular.mdx | 95 + docs/src/content/docs/installation/index.mdx | 36 + docs/src/content/docs/{docs => }/theming.mdx | 10 +- docs/src/env.d.ts | 1 - docs/src/fonts/font-face.css | 5 - docs/src/layouts/DocsLayout.astro | 125 ++ docs/src/layouts/RootLayout.astro | 101 + docs/src/layouts/main.css | 134 ++ docs/src/pages/docs/[...slug].astro | 23 + docs/src/pages/index.astro | 40 + docs/src/registry/new-york/ui/tabs.ts | 13 +- docs/src/schemas/badge.ts | 33 - docs/src/schemas/prevNextLink.ts | 30 - docs/src/schemas/sidebar.ts | 124 -- docs/src/style/markdown.css | 315 --- docs/src/tailwind.css | 109 - docs/src/utils/base.ts | 15 - docs/src/utils/createPathFormatter.ts | 61 - docs/src/utils/format-path.ts | 7 - docs/src/utils/i18n.ts | 231 -- docs/src/utils/navigation.ts | 475 ----- docs/src/utils/path.ts | 58 - docs/src/utils/routing.ts | 153 -- docs/src/utils/slugs.ts | 140 -- docs/src/utils/validateLogoImports.ts | 24 - docs/src/virtual.d.ts | 24 - docs/tailwind.config.mjs | 9 +- .../dark.json} | 2 +- docs/tsconfig.app.json | 20 +- docs/tsconfig.json | 17 +- pnpm-lock.yaml | 1865 +++++++++-------- 131 files changed, 3575 insertions(+), 4981 deletions(-) delete mode 100644 docs/.vscode/simple-query.code-snippets create mode 100644 docs/README.md rename docs/{src => public}/fonts/GeistVariableVF.woff2 (100%) delete mode 100644 docs/src/assets/logo.svg delete mode 100644 docs/src/components/ComponentPreview.astro delete mode 100644 docs/src/components/ComponentSource.astro create mode 100644 docs/src/components/Footer.astro create mode 100644 docs/src/components/Header.astro create mode 100644 docs/src/components/Logo.astro create mode 100644 docs/src/components/Navbar.astro create mode 100644 docs/src/components/PageNavigation.astro delete mode 100644 docs/src/components/SelectStyle/Item.astro delete mode 100644 docs/src/components/SelectStyle/Select.astro delete mode 100644 docs/src/components/SelectStyle/index.ts delete mode 100644 docs/src/components/SelectStyle/rehype-select-style.ts create mode 100644 docs/src/components/Sidebar.astro create mode 100644 docs/src/components/Toc.astro create mode 100644 docs/src/components/component-preview/ComponentPreview.astro create mode 100644 docs/src/components/component-preview/ComponentSource.astro create mode 100644 docs/src/components/component-preview/RawCode.astro rename docs/src/components/{ => component-preview}/component-preview.ts (100%) create mode 100644 docs/src/components/component-preview/select/Select.astro create mode 100644 docs/src/components/component-preview/select/SelectContent.astro create mode 100644 docs/src/components/component-preview/select/index.ts create mode 100644 docs/src/components/copy-button.ts create mode 100644 docs/src/components/mdx/Callout.astro create mode 100644 docs/src/components/mdx/a.astro create mode 100644 docs/src/components/mdx/h1.astro create mode 100644 docs/src/components/mdx/h2.astro create mode 100644 docs/src/components/mdx/h3.astro create mode 100644 docs/src/components/mdx/h4.astro create mode 100644 docs/src/components/mdx/h5.astro create mode 100644 docs/src/components/mdx/h6.astro create mode 100644 docs/src/components/mdx/index.ts create mode 100644 docs/src/components/mdx/li.astro create mode 100644 docs/src/components/mdx/linked-card.astro create mode 100644 docs/src/components/mdx/ol.astro create mode 100644 docs/src/components/mdx/p.astro create mode 100644 docs/src/components/mdx/pre.astro create mode 100644 docs/src/components/mdx/step-item.astro create mode 100644 docs/src/components/mdx/step.astro create mode 100644 docs/src/components/mdx/ul.astro create mode 100644 docs/src/components/page-header/PageActions.astro create mode 100644 docs/src/components/page-header/PageHeader.astro create mode 100644 docs/src/components/page-header/PageHeaderDescription.astro create mode 100644 docs/src/components/page-header/PageHeaderHeading.astro create mode 100644 docs/src/components/page-header/index.ts delete mode 100644 docs/src/components/starlight/ContentPanel.astro delete mode 100644 docs/src/components/starlight/Hero.astro delete mode 100644 docs/src/components/starlight/MarkdownContent.astro delete mode 100644 docs/src/components/starlight/MobileMenuToggle.astro delete mode 100644 docs/src/components/starlight/PageFrame.astro delete mode 100644 docs/src/components/starlight/PageSidebar.astro delete mode 100644 docs/src/components/starlight/PageTitle.astro delete mode 100644 docs/src/components/starlight/Pagination.astro delete mode 100644 docs/src/components/starlight/Search.astro delete mode 100644 docs/src/components/starlight/Sidebar.astro delete mode 100644 docs/src/components/starlight/SidebarSublist.astro delete mode 100644 docs/src/components/starlight/SiteTitle.astro delete mode 100644 docs/src/components/starlight/SocialIcons.astro delete mode 100644 docs/src/components/starlight/TwoColumnContent.astro delete mode 100644 docs/src/components/starlight/header/Header.astro delete mode 100644 docs/src/components/starlight/header/MainNav.astro create mode 100644 docs/src/components/tabs/Tabs.astro create mode 100644 docs/src/components/tabs/TabsContent.astro create mode 100644 docs/src/components/tabs/TabsList.astro create mode 100644 docs/src/components/tabs/TabsTrigger.astro create mode 100644 docs/src/components/tabs/index.ts create mode 100644 docs/src/config/docs.ts delete mode 100644 docs/src/constants.ts rename docs/src/content/docs/{docs => }/cli.mdx (100%) rename docs/src/content/docs/{docs => }/components-json.mdx (96%) create mode 100644 docs/src/content/docs/components/accordion.mdx rename docs/src/content/docs/{docs => }/components/alert.mdx (55%) rename docs/src/content/docs/{docs => }/components/avatar.mdx (53%) rename docs/src/content/docs/{docs => }/components/badge.mdx (53%) create mode 100644 docs/src/content/docs/components/breadcrumb.mdx rename docs/src/content/docs/{docs => }/components/button.mdx (63%) rename docs/src/content/docs/{docs => }/components/input.mdx (51%) create mode 100644 docs/src/content/docs/components/separator.mdx create mode 100644 docs/src/content/docs/components/skeleton.mdx create mode 100644 docs/src/content/docs/components/switch.mdx rename docs/src/content/docs/{docs => }/components/table.mdx (66%) rename docs/src/content/docs/{docs => }/components/tabs.mdx (62%) rename docs/src/content/docs/{docs => }/components/typography.mdx (100%) delete mode 100644 docs/src/content/docs/docs/components/accordion.mdx delete mode 100644 docs/src/content/docs/docs/components/breadcrumb.mdx delete mode 100644 docs/src/content/docs/docs/components/separator.mdx delete mode 100644 docs/src/content/docs/docs/components/skeleton.mdx delete mode 100644 docs/src/content/docs/docs/components/switch.mdx delete mode 100644 docs/src/content/docs/docs/index.mdx delete mode 100644 docs/src/content/docs/docs/installation/angular.mdx delete mode 100644 docs/src/content/docs/docs/installation/astro.mdx delete mode 100644 docs/src/content/docs/docs/installation/index.mdx create mode 100644 docs/src/content/docs/installation/angular.mdx create mode 100644 docs/src/content/docs/installation/index.mdx rename docs/src/content/docs/{docs => }/theming.mdx (97%) delete mode 100644 docs/src/fonts/font-face.css create mode 100644 docs/src/layouts/DocsLayout.astro create mode 100644 docs/src/layouts/RootLayout.astro create mode 100644 docs/src/layouts/main.css create mode 100644 docs/src/pages/docs/[...slug].astro create mode 100644 docs/src/pages/index.astro delete mode 100644 docs/src/schemas/badge.ts delete mode 100644 docs/src/schemas/prevNextLink.ts delete mode 100644 docs/src/schemas/sidebar.ts delete mode 100644 docs/src/style/markdown.css delete mode 100644 docs/src/tailwind.css delete mode 100644 docs/src/utils/base.ts delete mode 100644 docs/src/utils/createPathFormatter.ts delete mode 100644 docs/src/utils/format-path.ts delete mode 100644 docs/src/utils/i18n.ts delete mode 100644 docs/src/utils/navigation.ts delete mode 100644 docs/src/utils/path.ts delete mode 100644 docs/src/utils/routing.ts delete mode 100644 docs/src/utils/slugs.ts delete mode 100644 docs/src/utils/validateLogoImports.ts delete mode 100644 docs/src/virtual.d.ts rename docs/{src/lib/highlighter-theme.json => theme/dark.json} (99%) diff --git a/docs/.gitignore b/docs/.gitignore index 6240da8..16d54bb 100644 --- a/docs/.gitignore +++ b/docs/.gitignore @@ -19,3 +19,6 @@ pnpm-debug.log* # macOS-specific files .DS_Store + +# jetbrains setting folder +.idea/ diff --git a/docs/.vscode/simple-query.code-snippets b/docs/.vscode/simple-query.code-snippets deleted file mode 100644 index 09979bf..0000000 --- a/docs/.vscode/simple-query.code-snippets +++ /dev/null @@ -1,18 +0,0 @@ -{ - "query target": { - "scope": "typescriptreact,javascriptreact", - "prefix": "$:target", - "body": [ - "data-target={$('$1')}" - ] - }, - "query ready block": { - "scope": "typescript,javascript", - "prefix": "$:ready", - "body": [ - "$.ready(async () => {", - " $1", - "});" - ] - } -} \ No newline at end of file diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..e34a99b --- /dev/null +++ b/docs/README.md @@ -0,0 +1,47 @@ +# Astro Starter Kit: Minimal + +```sh +npm create astro@latest -- --template minimal +``` + +[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal) +[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal) +[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json) + +> πŸ§‘β€πŸš€ **Seasoned astronaut?** Delete this file. Have fun! + +## πŸš€ Project Structure + +Inside of your Astro project, you'll see the following folders and files: + +```text +/ +β”œβ”€β”€ public/ +β”œβ”€β”€ src/ +β”‚ └── pages/ +β”‚ └── index.astro +└── package.json +``` + +Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. + +There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. + +Any static assets, like images, can be placed in the `public/` directory. + +## 🧞 Commands + +All commands are run from the root of the project, from a terminal: + +| Command | Action | +| :------------------------ | :----------------------------------------------- | +| `npm install` | Installs dependencies | +| `npm run dev` | Starts local dev server at `localhost:4321` | +| `npm run build` | Build your production site to `./dist/` | +| `npm run preview` | Preview your build locally, before deploying | +| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` | +| `npm run astro -- --help` | Get help using the Astro CLI | + +## πŸ‘€ Want to learn more? + +Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index 5ca0355..ef1b6ef 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -1,97 +1,104 @@ import angular from '@analogjs/astro-angular' -import starlight from '@astrojs/starlight' +import mdx from '@astrojs/mdx' +import sitemap from '@astrojs/sitemap' import tailwind from '@astrojs/tailwind' +import { transformerMetaHighlight } from '@shikijs/transformers' import { defineConfig } from 'astro/config' -import AutoImport from 'astro-auto-import' + +import { visit } from 'unist-util-visit' import { siteConfig } from './src/config/site' +import blackout from './theme/dark.json' -import theme from './src/lib/highlighter-theme.json' +// FunciΓ³n recursiva para extraer todos los valores de texto +function extractText(node) { + if (node.type === 'text') { + return node.value + } + if (node.children) { + return node.children.map(extractText).join('') + } + return '' +} // https://astro.build/config export default defineConfig({ site: siteConfig.url, + trailingSlash: 'never', integrations: [ - starlight({ - title: siteConfig.name, - titleDelimiter: '-', - expressiveCode: { - themes: [theme], - styleOverrides: { - textMarkers: { - markHue: 'rgba(63,63,70,.5)', - }, - }, - }, - logo: { src: './src/assets/logo.svg' }, - favicon: '/favicon.ico', - social: { - 'github': siteConfig.links.github, - 'x.com': siteConfig.links.twitter, - }, - sidebar: [ - { - label: 'Getting Started', - items: [ - { - label: 'Introduction', - slug: 'docs', - }, - { - label: 'Installation', - slug: 'docs/installation', - }, - { - label: 'components.json', - slug: 'docs/components-json', - }, - { - label: 'Theming', - slug: 'docs/theming', - }, - { - label: 'CLI', - slug: 'docs/cli', - }, - { - label: 'Typography', - slug: 'docs/components/typography', - }, - ], - }, - { - label: 'Components', - autogenerate: { - directory: 'docs/components', - }, - }, - ], - customCss: ['./src/fonts/font-face.css', './src/tailwind.css'], - components: { - Header: './src/components/starlight/header/Header.astro', - SiteTitle: './src/components/starlight/SiteTitle.astro', - SocialIcons: './src/components/starlight/SocialIcons.astro', - Search: './src/components/starlight/Search.astro', - Hero: './src/components/starlight/Hero.astro', - ContentPanel: './src/components/starlight/ContentPanel.astro', - PageTitle: './src/components/starlight/PageTitle.astro', - MarkdownContent: './src/components/starlight/MarkdownContent.astro', - TwoColumnContent: './src/components/starlight/TwoColumnContent.astro', - Sidebar: './src/components/starlight/Sidebar.astro', - Pagination: './src/components/starlight/Pagination.astro', - MobileMenuToggle: './src/components/starlight/MobileMenuToggle.astro', - PageFrame: './src/components/starlight/PageFrame.astro', - PageSidebar: './src/components/starlight/PageSidebar.astro', - }, + mdx(), + angular(), + tailwind({ + applyBaseStyles: false, }), - AutoImport({ - imports: [ - '@/components/ComponentPreview.astro', - '@/components/ComponentSource.astro', - ], + sitemap({ + serialize(item) { + if (item.url === siteConfig.url) { + item.changefreq = 'daily' + item.lastmod = new Date() + item.priority = 1 + } + else { + item.changefreq = 'daily' + item.lastmod = new Date() + item.priority = 0.9 + } + return item + }, }), - tailwind(), - angular(), ], + markdown: { + shikiConfig: { + theme: blackout, + transformers: [transformerMetaHighlight()], + }, + rehypePlugins: [ + () => (tree) => { + visit(tree, 'element', (node) => { + if (node.tagName !== 'pre') + return + + const [codeEl] = node.children + + if (codeEl.tagName !== 'code') + return + + const rawString = extractText(codeEl) + + node.properties = node.properties || {} + node.properties.rawString = rawString + }) + }, + () => (tree) => { + visit(tree, 'element', (node) => { + if (node.tagName !== 'pre') + return + + const rawString = node.properties.rawString + + // npm install. + if (rawString?.startsWith('npm install')) { + node.properties.npmCommand = rawString + node.properties.yarnCommand = rawString.replace('npm install', 'yarn add') + node.properties.pnpmCommand = rawString.replace('npm install', 'pnpm add') + } + + // npx create. + if (rawString?.startsWith('npx create-')) { + node.properties.npmCommand = rawString + node.properties.yarnCommand = rawString.replace('npx create-', 'yarn create ') + node.properties.pnpmCommand = rawString.replace('npx create-', 'pnpm create ') + } + + // npx. + if (rawString?.startsWith('npx') && !rawString.startsWith('npx create-')) { + node.properties.npmCommand = rawString + node.properties.yarnCommand = rawString + node.properties.pnpmCommand = rawString.replace('npx', 'pnpm dlx') + } + }) + }, + ], + }, redirects: { '/docs/components': '/docs/components/accordion', }, diff --git a/docs/package.json b/docs/package.json index 4821bc7..99928a8 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,59 +1,54 @@ { - "name": "docs", + "name": "playground", "type": "module", "version": "0.0.1", - "private": true, "scripts": { "dev": "astro dev", "start": "astro dev", - "build": "astro build", + "build": "astro check && astro build", "preview": "astro preview", "astro": "astro" }, "dependencies": { - "@analogjs/astro-angular": "^1.7.2", - "@angular-devkit/build-angular": "^18.2.1", - "@angular/animations": "^18.2.1", + "@analogjs/astro-angular": "^1.8.1", + "@angular/animations": "^18.2.5", "@angular/cdk": "^18.2.1", - "@angular/common": "^18.2.1", - "@angular/compiler": "^18.2.1", - "@angular/compiler-cli": "^18.2.1", - "@angular/core": "^18.2.1", - "@angular/forms": "^18.2.1", - "@angular/language-service": "^18.2.1", - "@angular/platform-browser": "^18.2.1", - "@angular/platform-browser-dynamic": "^18.2.1", - "@angular/platform-server": "^18.2.1", + "@angular/common": "^18.2.5", + "@angular/core": "^18.2.5", "@astrojs/check": "^0.9.3", - "@astrojs/starlight": "^0.26.1", - "@astrojs/starlight-tailwind": "^2.0.3", - "@astrojs/tailwind": "^5.1.0", + "@astrojs/mdx": "^3.1.7", + "@astrojs/sitemap": "^3.1.6", + "@astrojs/tailwind": "^5.1.1", + "@astrojs/ts-plugin": "^1.10.2", "@ng-icons/core": "^29.0.0", "@ng-icons/lucide": "^29.0.0", - "@ng-icons/radix-icons": "^29.0.0", - "@pagefind/default-ui": "^1.1.0", + "@ng-icons/radix-icons": "^29.5.0", "@radix-ng/primitives": "^0.10.0", - "astro": "^4.14.5", - "astro-auto-import": "^0.4.2", + "astro": "^4.15.9", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "hast": "^1.0.0", "hast-util-select": "^6.0.2", - "lodash.template": "^4.5.0", "rehype": "^13.0.1", "rxjs": "^7.8.1", - "sharp": "^0.32.5", "tailwind-merge": "^2.4.0", - "tailwindcss": "^3.4.4", + "tailwindcss": "^3.4.13", + "tailwindcss-animate": "^1.0.7", "tslib": "^2.7.0", - "typescript": "^5.5.3", "unist-util-visit": "^5.0.0", - "vfile": "^6.0.2", "zone.js": "~0.14.10" }, "devDependencies": { + "@angular-devkit/build-angular": "^18.2.5", + "@angular/cli": "^18.2.6", + "@angular/compiler": "^18.2.5", + "@angular/compiler-cli": "^18.2.5", + "@angular/language-service": "^18.2.5", + "@angular/platform-browser": "^18.2.5", + "@angular/platform-browser-dynamic": "^18.2.5", + "@angular/platform-server": "^18.2.5", + "@shikijs/transformers": "^1.20.0", "@types/hast": "^3.0.4", - "@types/lodash.template": "^4.5.1", - "prettier": "^3.3.3" + "typescript": "~5.5.0" } } diff --git a/docs/src/fonts/GeistVariableVF.woff2 b/docs/public/fonts/GeistVariableVF.woff2 similarity index 100% rename from docs/src/fonts/GeistVariableVF.woff2 rename to docs/public/fonts/GeistVariableVF.woff2 diff --git a/docs/src/assets/logo.svg b/docs/src/assets/logo.svg deleted file mode 100644 index 393d335..0000000 --- a/docs/src/assets/logo.svg +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/src/components/ComponentPreview.astro b/docs/src/components/ComponentPreview.astro deleted file mode 100644 index 653bafa..0000000 --- a/docs/src/components/ComponentPreview.astro +++ /dev/null @@ -1,63 +0,0 @@ ---- -import { existsSync, readFileSync } from 'node:fs' -import path from 'node:path' -import process from 'node:process' -import { cn } from '@/lib/utils' - -import { styles } from '@/registry/styles' - -import { Code, TabItem, Tabs } from '@astrojs/starlight/components' -import { ComponentPeviewComponent } from './component-preview' -import { SelectStyle, SelectStyleItem, syncKey } from './SelectStyle' - -export interface Props { - name: string - class?: 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`) - let pathCode: string - let code: string | null - - if (existsSync(filename)) { - pathCode = `../registry/${style.name}/example/${name}.ts` - code = readFileSync(`${filename}`) - .toString() - .replace(/export\s+default\s+(?:\S.*)?;\s*/, '') - .replace(/@\/registry\/.*\/ui/g, '@/components/ui') - } - else { - pathCode = '' - code = null - } - - return { - style, - code, - path: pathCode, - } - }), -) ---- - -
- - - - { - components.map(({ style, path }) => ( - {path ? :

Not found

}
- )) - } -
-
- - - {components.map(({ style, code }) => {code ? :

Not found

}
)} -
-
-
-
diff --git a/docs/src/components/ComponentSource.astro b/docs/src/components/ComponentSource.astro deleted file mode 100644 index 7000f3a..0000000 --- a/docs/src/components/ComponentSource.astro +++ /dev/null @@ -1,63 +0,0 @@ ---- -import { readFileSync } from 'node:fs' -import path from 'node:path' -import process from 'node:process' -import { styles } from '@/registry/styles' -import { ui } from '@/registry/ui' -import { Code } from '@astrojs/starlight/components' - -import { SelectStyle, SelectStyleItem, syncKey } from './SelectStyle' - -export interface Props { - name: string -} - -const { name } = Astro.props - -const componentUi = ui.find(value => value.name === name) - -const allComponents = componentUi?.files.flatMap((file) => { - return styles.map((style) => { - const filename = path.join( - process.cwd(), - 'src', - 'registry', - style.name, - file, - ) - - let code: string | null - - try { - code = readFileSync(`${filename}`) - .toString() - .replace(/export\s+default\s+(?:\S.*)?;\s*/, '') - .replace(/@\/registry\/.*\/ui/g, '@/components/ui') - } - catch { - code = null - } - - return { - style, - code, - } - }) -}); ---- - - - { - allComponents?.map(({ code, style }) => ( - - {code -? ( - - ) -: ( -

Not found

- )} -
- )) - } -
diff --git a/docs/src/components/Footer.astro b/docs/src/components/Footer.astro new file mode 100644 index 0000000..619a7c0 --- /dev/null +++ b/docs/src/components/Footer.astro @@ -0,0 +1,16 @@ +--- +import { siteConfig } from '@/config/site' +--- + + diff --git a/docs/src/components/Header.astro b/docs/src/components/Header.astro new file mode 100644 index 0000000..d731bc4 --- /dev/null +++ b/docs/src/components/Header.astro @@ -0,0 +1,44 @@ +--- +import { siteConfig } from '@/config/site' +import { buttonVariants } from '@/registry/new-york/ui/button' + +import Navbar from './Navbar.astro' + +const { pathname } = Astro.url +--- + +
+
+ + +
+
+ +
+ +
+ +
+
diff --git a/docs/src/components/Logo.astro b/docs/src/components/Logo.astro new file mode 100644 index 0000000..891e19d --- /dev/null +++ b/docs/src/components/Logo.astro @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/src/components/Navbar.astro b/docs/src/components/Navbar.astro new file mode 100644 index 0000000..dd624fc --- /dev/null +++ b/docs/src/components/Navbar.astro @@ -0,0 +1,38 @@ +--- +import { docsConfig } from '@/config/docs' +import { siteConfig } from '@/config/site' +import { cn } from '@/lib/utils' +import Logo from './Logo.astro' + +export type Props = { + pathname: string +} + +const { pathname } = Astro.props +--- + + diff --git a/docs/src/components/PageNavigation.astro b/docs/src/components/PageNavigation.astro new file mode 100644 index 0000000..1114d74 --- /dev/null +++ b/docs/src/components/PageNavigation.astro @@ -0,0 +1,64 @@ +--- +import { docsConfig, type TNavItem, type TNavItemWithChildren } from '@/config/docs' +import { cn } from '@/lib/utils' +import { buttonVariants } from '@/registry/new-york/ui/button' + +const { pathname } = Astro.url + +function flatten(links: TNavItemWithChildren[]): TNavItem[] { + return links + .reduce((flat, link) => { + return flat.concat(link.items?.length ? flatten(link.items) : link) + }, []) + .filter(link => !link?.disabled) +} + +function getPagerForDoc(slug: string) { + const flattenedLinks = [null, ...flatten(docsConfig.sidebarNav), null] + let activeIndex: number + if (!slug) { + activeIndex = 1 + } + else { + activeIndex = flattenedLinks.findIndex(link => `${slug}` === link?.href) + } + + const prev = activeIndex !== 0 ? flattenedLinks[activeIndex - 1] : null + const next = activeIndex !== flattenedLinks.length - 1 ? flattenedLinks[activeIndex + 1] : null + return { + prev, + next, + } +} + +const pager = getPagerForDoc(pathname) +--- + +
+ { + pager.prev?.href +? ( + + + + Previous page + + {pager.prev.title} + + ) +: null + } + { + pager.next?.href +? ( + + {pager.next.title} + + + Next page + + + ) +: null + } +
diff --git a/docs/src/components/SelectStyle/Item.astro b/docs/src/components/SelectStyle/Item.astro deleted file mode 100644 index 387d0f0..0000000 --- a/docs/src/components/SelectStyle/Item.astro +++ /dev/null @@ -1,17 +0,0 @@ ---- -import { SelectStyleItemTagname } from './rehype-select-style' - -interface Props { - label: string -} - -const { label } = Astro.props - -if (!label) { - throw new Error('Missing prop `label` on `` component.') -} ---- - - - - diff --git a/docs/src/components/SelectStyle/Select.astro b/docs/src/components/SelectStyle/Select.astro deleted file mode 100644 index b35921b..0000000 --- a/docs/src/components/SelectStyle/Select.astro +++ /dev/null @@ -1,142 +0,0 @@ ---- -import { processPanels } from './rehype-select-style' - -interface Props { - syncKey?: string - hiddenSelect?: boolean -} - -const { syncKey, hiddenSelect = false } = Astro.props -const panelHtml = await Astro.slots.render('default') -const { html, panels } = processPanels(panelHtml); ---- - - - { - !hiddenSelect && ( -
-
- {panels && ( - - )} -
-
-
- -
-
-
- ) - } - - { - hiddenSelect && ( -
- {panels && ( - - )} -
-
- -
-
-
- ) - } -
- - - - diff --git a/docs/src/components/SelectStyle/index.ts b/docs/src/components/SelectStyle/index.ts deleted file mode 100644 index 90e42c3..0000000 --- a/docs/src/components/SelectStyle/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { default as SelectStyleItem } from './Item.astro' -export { default as SelectStyle } from './Select.astro' - -export const syncKey = 'SelectStyle' diff --git a/docs/src/components/SelectStyle/rehype-select-style.ts b/docs/src/components/SelectStyle/rehype-select-style.ts deleted file mode 100644 index c187436..0000000 --- a/docs/src/components/SelectStyle/rehype-select-style.ts +++ /dev/null @@ -1,118 +0,0 @@ -import { select } from 'hast-util-select' -import { rehype } from 'rehype' -import { CONTINUE, SKIP, visit } from 'unist-util-visit' -import type { Element } from 'hast' - -interface Panel { - panelId: string - tabId: string - label: string -} - -declare module 'vfile' { - interface DataMap { - panels: Panel[] - } -} - -export const SelectStyleItemTagname = 'ub-registry-style' - -// https://github.com/adobe/react-spectrum/blob/99ca82e87ba2d7fdd54f5b49326fd242320b4b51/packages/%40react-aria/focus/src/FocusScope.tsx#L256-L275 -const focusableElementSelectors = [ - 'input:not([disabled]):not([type=hidden])', - 'select:not([disabled])', - 'textarea:not([disabled])', - 'button:not([disabled])', - 'a[href]', - 'area[href]', - 'summary', - 'iframe', - 'object', - 'embed', - 'audio[controls]', - 'video[controls]', - '[contenteditable]', - '[tabindex]:not([disabled])', -] - .map(selector => `${selector}:not([hidden]):not([tabindex="-1"])`) - .join(',') - -let count = 0 -function getIDs(): { panelId: string, tabId: string } { - const id = count++ - return { panelId: `tab-panel-${id}`, tabId: `tab-${id}` } -} - -/** - * Rehype processor to extract tab panel data and turn each - * `` into a `
` with the necessary - * attributes. - */ -const tabsProcessor = rehype() - .data('settings', { fragment: true }) - .use(() => { - return (tree: Element, file) => { - file.data.panels = [] - let isFirst = true - visit(tree, 'element', (node) => { - if (node.tagName !== SelectStyleItemTagname || !node.properties) { - return CONTINUE - } - - const { dataLabel } = node.properties - const ids = getIDs() - const panel: Panel = { - ...ids, - label: String(dataLabel), - } - file.data.panels?.push(panel) - - // Remove `` props - delete node.properties.dataLabel - // Turn into `
` with required attributes - node.tagName = 'section' - node.properties.id = ids.panelId - node.properties['aria-labelledby'] = ids.tabId - node.properties.role = 'tabpanel' - - const focusableChild = select(focusableElementSelectors, node) - // If the panel does not contain any focusable elements, include it in - // the tab sequence of the page. - if (!focusableChild) { - node.properties.tabindex = 0 - } - - // Hide all panels except the first - // TODO: make initially visible tab configurable - if (isFirst) { - isFirst = false - } - else { - node.properties.hidden = true - } - - // Skip over the tab panel’s children. - return SKIP - }) - } - }) - -/** - * Process tab panel items to extract data for the tab links and format - * each tab panel correctly. - * @param html Inner HTML passed to the `` component. - */ -export function processPanels(html: string): { - /** Data for each tab panel. */ - panels: Panel[] | undefined - /** Processed HTML for the tab panels. */ - html: string -} { - const file = tabsProcessor.processSync({ value: html }) - return { - /** Data for each tab panel. */ - panels: file.data.panels, - /** Processed HTML for the tab panels. */ - html: file.toString(), - } -} diff --git a/docs/src/components/Sidebar.astro b/docs/src/components/Sidebar.astro new file mode 100644 index 0000000..4cc1a80 --- /dev/null +++ b/docs/src/components/Sidebar.astro @@ -0,0 +1,67 @@ +--- +import { docsConfig } from '@/config/docs' +import { cn } from '@/lib/utils' + +const { pathname } = Astro.props; +--- + +
+ { + docsConfig.sidebarNav.map(item => ( +
+

{item.title}

+
+ {item.items.map(subItem => + subItem.disabled +? ( + + {subItem.title} + {subItem.label && ( + + {subItem.label} + + )} + + ) +: ( + + {subItem.title} + {subItem.label && ( + + {subItem.label} + + )} + + ), + )} +
+
+ )) + } +
diff --git a/docs/src/components/Toc.astro b/docs/src/components/Toc.astro new file mode 100644 index 0000000..d5fed5e --- /dev/null +++ b/docs/src/components/Toc.astro @@ -0,0 +1,66 @@ +--- +import { cn } from '@/lib/utils' +import type { MarkdownHeading } from 'astro' + +type Props = { + data: MarkdownHeading[] +} + +const { data } = Astro.props +const { pathname } = Astro.url +--- + + + + diff --git a/docs/src/components/component-preview/ComponentPreview.astro b/docs/src/components/component-preview/ComponentPreview.astro new file mode 100644 index 0000000..6ccce1b --- /dev/null +++ b/docs/src/components/component-preview/ComponentPreview.astro @@ -0,0 +1,90 @@ +--- +import { existsSync, readFileSync } from 'node:fs' +import path from 'node:path' +import process from 'node:process' +import { cn } from '@/lib/utils' +import { styles } from '@/registry/styles' + +import { CopyButton } from '../copy-button' + +import { Tabs, TabsContent, TabsList, TabsTrigger } from '../tabs' + +import { ComponentPeviewComponent } from './component-preview' +import RawCode from './RawCode.astro' +import { Select, SelectContent, syncKey } from './select' + +export interface Props { + name: string + class?: string +} +const { name } = Astro.props + +const sortedStyleByNewYork = styles.toSorted((a, b) => (a.name === 'new-york' ? -1 : b.name === 'new-york' ? 1 : 0)) + +const components = await Promise.all( + [...sortedStyleByNewYork].map(async (style) => { + const filename = path.join(process.cwd(), 'src', 'registry', style.name, 'example', `${name}.ts`) + let pathCode: string + let code: string | null + + if (existsSync(filename)) { + pathCode = `../registry/${style.name}/example/${name}.ts` + code = readFileSync(`${filename}`) + .toString() + .replace(/@\/registry\/.*\/ui/g, '@/components/ui') + .replace(/export\s+default\s+(?:\S.*)?\s*/, '') + } + else { + pathCode = '' + code = null + } + + return { + style, + code, + pathCode, + } + }), +) +--- + +
+ + + Preview + Code + + + + + + + + + +
diff --git a/docs/src/components/component-preview/ComponentSource.astro b/docs/src/components/component-preview/ComponentSource.astro new file mode 100644 index 0000000..ede4a33 --- /dev/null +++ b/docs/src/components/component-preview/ComponentSource.astro @@ -0,0 +1,62 @@ +--- +import { readFileSync } from 'node:fs' +import path from 'node:path' +import process from 'node:process' +import { styles } from '@/registry/styles' +import { ui } from '@/registry/ui' +import { Code as CodeAstro } from 'astro/components' +import blackout from '../../../theme/dark.json' +import { CopyButton } from '../copy-button' + +import { Select, SelectContent, syncKey } from './select' + +export interface Props { + name: string +} + +const { name } = Astro.props + +const componentUi = ui.find(value => value.name === name) + +const allComponents = componentUi?.files.flatMap((file) => { + return styles.map((style) => { + const filename = path.join(process.cwd(), 'src', 'registry', style.name, file) + + let code: string | null + + try { + code = readFileSync(`${filename}`) + .toString() + .replace(/export\s+default\s+(?:\S.*)?;\s*/, '') + .replace(/@\/registry\/.*\/ui/g, '@/components/ui') + } + catch { + code = null + } + + return { + style, + code, + } + }) +}) +--- + + diff --git a/docs/src/components/component-preview/RawCode.astro b/docs/src/components/component-preview/RawCode.astro new file mode 100644 index 0000000..dbabd33 --- /dev/null +++ b/docs/src/components/component-preview/RawCode.astro @@ -0,0 +1,17 @@ +--- +import { Code as CodeAstro } from 'astro/components' +import blackout from '../../../theme/dark.json' + +import { CopyButton } from '../copy-button' + +export interface Props { + code: string +} + +const { code } = Astro.props +--- + +
+ + +
diff --git a/docs/src/components/component-preview.ts b/docs/src/components/component-preview/component-preview.ts similarity index 100% rename from docs/src/components/component-preview.ts rename to docs/src/components/component-preview/component-preview.ts diff --git a/docs/src/components/component-preview/select/Select.astro b/docs/src/components/component-preview/select/Select.astro new file mode 100644 index 0000000..78d3825 --- /dev/null +++ b/docs/src/components/component-preview/select/Select.astro @@ -0,0 +1,148 @@ +--- +export interface Props { + defaultValue?: string + syncKey?: string + hideSelect?: boolean +} + +const { hideSelect } = Astro.props +--- + + + { + !hideSelect && ( +
+
+ +
+
+
+ +
+
+
+ ) + } + + {hideSelect && } +
+ + + + diff --git a/docs/src/components/component-preview/select/SelectContent.astro b/docs/src/components/component-preview/select/SelectContent.astro new file mode 100644 index 0000000..17366af --- /dev/null +++ b/docs/src/components/component-preview/select/SelectContent.astro @@ -0,0 +1,10 @@ +--- +export interface Props { + value: string + label: string +} +--- + + + + diff --git a/docs/src/components/component-preview/select/index.ts b/docs/src/components/component-preview/select/index.ts new file mode 100644 index 0000000..656b72f --- /dev/null +++ b/docs/src/components/component-preview/select/index.ts @@ -0,0 +1,6 @@ +import Select from './Select.astro' +import SelectContent from './SelectContent.astro' + +const syncKey = 'SelectStyle' + +export { Select, SelectContent, syncKey } diff --git a/docs/src/components/copy-button.ts b/docs/src/components/copy-button.ts new file mode 100644 index 0000000..352345a --- /dev/null +++ b/docs/src/components/copy-button.ts @@ -0,0 +1,36 @@ +import { cn } from '@/lib/utils' +import { UbButtonDirective } from '@/registry/new-york/ui/button' +import { Clipboard } from '@angular/cdk/clipboard' +import { Component, computed, inject, input, signal } from '@angular/core' + +@Component({ + standalone: true, + selector: 'copy-button', + imports: [UbButtonDirective], + template: ` + + `, +}) +export class CopyButton { + private cilpbard = inject(Clipboard) + class = input('') + withMeta = input(false) + rawString = input.required() + protected computedClass = computed(() => cn('p-1 rounded-md absolute top-4 right-4 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 transition-colors h-6 w-6', this.class(), this.withMeta() && 'top-16')) + protected isCopied = signal(false) + + copy(): void { + this.cilpbard.copy(this.rawString()) + this.isCopied.set(true) + setTimeout(() => { + this.isCopied.set(false) + }, 2000) + } +} diff --git a/docs/src/components/mdx/Callout.astro b/docs/src/components/mdx/Callout.astro new file mode 100644 index 0000000..ae8bab8 --- /dev/null +++ b/docs/src/components/mdx/Callout.astro @@ -0,0 +1,13 @@ +--- +import { cn } from '@/lib/utils' +--- + + diff --git a/docs/src/components/mdx/a.astro b/docs/src/components/mdx/a.astro new file mode 100644 index 0000000..d245fd6 --- /dev/null +++ b/docs/src/components/mdx/a.astro @@ -0,0 +1,5 @@ +--- +const props = Astro.props; +--- + + diff --git a/docs/src/components/mdx/h1.astro b/docs/src/components/mdx/h1.astro new file mode 100644 index 0000000..c1001f0 --- /dev/null +++ b/docs/src/components/mdx/h1.astro @@ -0,0 +1,7 @@ +--- +const props = Astro.props; +--- + +

+ +

diff --git a/docs/src/components/mdx/h2.astro b/docs/src/components/mdx/h2.astro new file mode 100644 index 0000000..0fb96ac --- /dev/null +++ b/docs/src/components/mdx/h2.astro @@ -0,0 +1,10 @@ +--- +const props = Astro.props; +--- + +

+ +

diff --git a/docs/src/components/mdx/h3.astro b/docs/src/components/mdx/h3.astro new file mode 100644 index 0000000..8ea37b8 --- /dev/null +++ b/docs/src/components/mdx/h3.astro @@ -0,0 +1,10 @@ +--- +const props = Astro.props; +--- + +

+ +

diff --git a/docs/src/components/mdx/h4.astro b/docs/src/components/mdx/h4.astro new file mode 100644 index 0000000..59617d3 --- /dev/null +++ b/docs/src/components/mdx/h4.astro @@ -0,0 +1,10 @@ +--- +const props = Astro.props; +--- + +

+ +

diff --git a/docs/src/components/mdx/h5.astro b/docs/src/components/mdx/h5.astro new file mode 100644 index 0000000..b052070 --- /dev/null +++ b/docs/src/components/mdx/h5.astro @@ -0,0 +1,10 @@ +--- +const props = Astro.props; +--- + +
+ +
diff --git a/docs/src/components/mdx/h6.astro b/docs/src/components/mdx/h6.astro new file mode 100644 index 0000000..296ccd7 --- /dev/null +++ b/docs/src/components/mdx/h6.astro @@ -0,0 +1,10 @@ +--- +const props = Astro.props; +--- + +
+ +
diff --git a/docs/src/components/mdx/index.ts b/docs/src/components/mdx/index.ts new file mode 100644 index 0000000..fcca4a7 --- /dev/null +++ b/docs/src/components/mdx/index.ts @@ -0,0 +1,45 @@ +import ComponentPreview from '../component-preview/ComponentPreview.astro' +import ComponentSource from '../component-preview/ComponentSource.astro' +import { Tabs, TabsContent, TabsList, TabsTrigger } from '../tabs' +import a from './a.astro' +import Callout from './Callout.astro' +import h1 from './h1.astro' +import h2 from './h2.astro' +import h3 from './h3.astro' +import h4 from './h4.astro' +import h5 from './h5.astro' +import h6 from './h6.astro' +import li from './li.astro' +import LinkedCard from './linked-card.astro' +import ol from './ol.astro' +import p from './p.astro' + +import pre from './pre.astro' +import Step from './step.astro' +import StepItem from './step-item.astro' +import ul from './ul.astro' + +export const components = { + a, + h1, + h2, + h3, + h4, + h5, + h6, + p, + pre, + ul, + li, + ol, + Step, + StepItem, + LinkedCard, + Tabs, + TabsContent, + TabsList, + TabsTrigger, + ComponentPreview, + ComponentSource, + Callout, +} diff --git a/docs/src/components/mdx/li.astro b/docs/src/components/mdx/li.astro new file mode 100644 index 0000000..9cb8b8c --- /dev/null +++ b/docs/src/components/mdx/li.astro @@ -0,0 +1,7 @@ +--- +const props = Astro.props; +--- + +
  • + +
  • diff --git a/docs/src/components/mdx/linked-card.astro b/docs/src/components/mdx/linked-card.astro new file mode 100644 index 0000000..1fa5f9e --- /dev/null +++ b/docs/src/components/mdx/linked-card.astro @@ -0,0 +1,10 @@ +--- +const props = Astro.props; +--- + + + + diff --git a/docs/src/components/mdx/ol.astro b/docs/src/components/mdx/ol.astro new file mode 100644 index 0000000..8913224 --- /dev/null +++ b/docs/src/components/mdx/ol.astro @@ -0,0 +1,7 @@ +--- +const props = Astro.props; +--- + +
      + +
    diff --git a/docs/src/components/mdx/p.astro b/docs/src/components/mdx/p.astro new file mode 100644 index 0000000..f0da8d6 --- /dev/null +++ b/docs/src/components/mdx/p.astro @@ -0,0 +1,7 @@ +--- +const props = Astro.props; +--- + +

    + +

    diff --git a/docs/src/components/mdx/pre.astro b/docs/src/components/mdx/pre.astro new file mode 100644 index 0000000..d2318cb --- /dev/null +++ b/docs/src/components/mdx/pre.astro @@ -0,0 +1,24 @@ +--- +import { cn } from '@/lib/utils' +import { CopyButton } from '../copy-button' +// import PackageManagerCopyButton from "../package-manager-copy-button"; + +type Props = { + rawString: string + npmCommand: string + yarnCommand: string + pnpmCommand: string + withMeta: boolean + class?: string +} + +const { rawString, npmCommand, pnpmCommand, yarnCommand, withMeta, class: className, ...rest } = Astro.props +--- + +
    +
    + + {rawString && !npmCommand ? : null} + + {npmCommand && yarnCommand && pnpmCommand ? (
    {/* */}
    ) : null} +
    diff --git a/docs/src/components/mdx/step-item.astro b/docs/src/components/mdx/step-item.astro new file mode 100644 index 0000000..8ea37b8 --- /dev/null +++ b/docs/src/components/mdx/step-item.astro @@ -0,0 +1,10 @@ +--- +const props = Astro.props; +--- + +

    + +

    diff --git a/docs/src/components/mdx/step.astro b/docs/src/components/mdx/step.astro new file mode 100644 index 0000000..db395e3 --- /dev/null +++ b/docs/src/components/mdx/step.astro @@ -0,0 +1,10 @@ +--- +const props = Astro.props; +--- + +
    + +
    diff --git a/docs/src/components/mdx/ul.astro b/docs/src/components/mdx/ul.astro new file mode 100644 index 0000000..056fdc4 --- /dev/null +++ b/docs/src/components/mdx/ul.astro @@ -0,0 +1,7 @@ +--- +const props = Astro.props; +--- + +
      + +
    diff --git a/docs/src/components/page-header/PageActions.astro b/docs/src/components/page-header/PageActions.astro new file mode 100644 index 0000000..d5c2258 --- /dev/null +++ b/docs/src/components/page-header/PageActions.astro @@ -0,0 +1,8 @@ +--- +import { cn } from '@/lib/utils'; + +--- + +
    + +
    diff --git a/docs/src/components/page-header/PageHeader.astro b/docs/src/components/page-header/PageHeader.astro new file mode 100644 index 0000000..6ff0f33 --- /dev/null +++ b/docs/src/components/page-header/PageHeader.astro @@ -0,0 +1,7 @@ +--- +import { cn } from '@/lib/utils' +--- + +
    + +
    diff --git a/docs/src/components/page-header/PageHeaderDescription.astro b/docs/src/components/page-header/PageHeaderDescription.astro new file mode 100644 index 0000000..1d9e1e2 --- /dev/null +++ b/docs/src/components/page-header/PageHeaderDescription.astro @@ -0,0 +1,8 @@ +--- +import { cn } from '@/lib/utils'; + +--- + +

    + +

    diff --git a/docs/src/components/page-header/PageHeaderHeading.astro b/docs/src/components/page-header/PageHeaderHeading.astro new file mode 100644 index 0000000..3e82ae3 --- /dev/null +++ b/docs/src/components/page-header/PageHeaderHeading.astro @@ -0,0 +1,7 @@ +--- +import { cn } from '@/lib/utils' +--- + +

    + +

    diff --git a/docs/src/components/page-header/index.ts b/docs/src/components/page-header/index.ts new file mode 100644 index 0000000..3daf018 --- /dev/null +++ b/docs/src/components/page-header/index.ts @@ -0,0 +1,11 @@ +import PageActions from './PageActions.astro' +import PageHeader from './PageHeader.astro' +import PageHeaderDescription from './PageHeaderDescription.astro' +import PageHeaderHeading from './PageHeaderHeading.astro' + +export { + PageActions, + PageHeader, + PageHeaderDescription, + PageHeaderHeading, +} diff --git a/docs/src/components/starlight/ContentPanel.astro b/docs/src/components/starlight/ContentPanel.astro deleted file mode 100644 index eee597f..0000000 --- a/docs/src/components/starlight/ContentPanel.astro +++ /dev/null @@ -1,4 +0,0 @@ ---- ---- - - diff --git a/docs/src/components/starlight/Hero.astro b/docs/src/components/starlight/Hero.astro deleted file mode 100644 index e8fac81..0000000 --- a/docs/src/components/starlight/Hero.astro +++ /dev/null @@ -1,51 +0,0 @@ ---- -import { cn } from '@/lib/utils' - -import { buttonVariants } from '@/registry/new-york/ui/button' -import type { Props } from '@astrojs/starlight/props' -import { PAGE_TITLE_ID } from '../../constants' - -const { data } = Astro.props.entry -const { title = data.title, tagline, actions = [] } = data.hero || {}; ---- - -
    -

    - { - tagline && ( -

    - ) - } - { - actions.length > 0 && ( -

    - {actions.map(({ text, link, ...attrs }) => ( - - // - ))} -
    - ) - } -

    diff --git a/docs/src/components/starlight/MarkdownContent.astro b/docs/src/components/starlight/MarkdownContent.astro deleted file mode 100644 index 1b7ff2c..0000000 --- a/docs/src/components/starlight/MarkdownContent.astro +++ /dev/null @@ -1,5 +0,0 @@ ---- -import '../../style/markdown.css'; ---- - -
    diff --git a/docs/src/components/starlight/MobileMenuToggle.astro b/docs/src/components/starlight/MobileMenuToggle.astro deleted file mode 100644 index 7400fb6..0000000 --- a/docs/src/components/starlight/MobileMenuToggle.astro +++ /dev/null @@ -1,67 +0,0 @@ ---- -import { cn } from '@/lib/utils' -import { buttonVariants } from '@/registry/new-york/ui/button' - -import { Icon } from '@astrojs/starlight/components' -import type { Props } from '@astrojs/starlight/props' - -const { labels } = Astro.props; ---- - - - - - - - - diff --git a/docs/src/components/starlight/PageFrame.astro b/docs/src/components/starlight/PageFrame.astro deleted file mode 100644 index c08feeb..0000000 --- a/docs/src/components/starlight/PageFrame.astro +++ /dev/null @@ -1,56 +0,0 @@ ---- -import type { Props } from '@astrojs/starlight/props' -import MobileMenuToggle from './MobileMenuToggle.astro' - -const { hasSidebar, labels } = Astro.props; ---- - -
    -
    - -
    -
    - { - hasSidebar -? ( -
    -
    - - -
    -
    - ) -: ( - - ) - } -
    -
    -
    -
    - - diff --git a/docs/src/components/starlight/PageSidebar.astro b/docs/src/components/starlight/PageSidebar.astro deleted file mode 100644 index 6e4ced4..0000000 --- a/docs/src/components/starlight/PageSidebar.astro +++ /dev/null @@ -1,41 +0,0 @@ ---- -import MobileTableOfContents from '@astrojs/starlight/components/MobileTableOfContents.astro' - -import TableOfContents from '@astrojs/starlight/components/TableOfContents.astro' -import type { Props } from '@astrojs/starlight/props' ---- - -{ - Astro.props.toc && ( - <> -
    - -
    - - - ) -} - - diff --git a/docs/src/components/starlight/PageTitle.astro b/docs/src/components/starlight/PageTitle.astro deleted file mode 100644 index 7a68d38..0000000 --- a/docs/src/components/starlight/PageTitle.astro +++ /dev/null @@ -1,64 +0,0 @@ ---- -import { cn } from '@/lib/utils' - -import { badgeVariants } from '@/registry/new-york/ui/badge' - -import { radixChevronRight, radixExternalLink } from '@ng-icons/radix-icons' -import type { Props } from '@astrojs/starlight/props' - -import { PAGE_TITLE_ID } from '../../constants'; ---- - -
    -
    Docs
    - -
    {Astro.props.entry.data.title}
    -
    - -
    -

    - {Astro.props.entry.data.title} -

    - { - Astro.props.entry.data.description && ( -

    - - {Astro.props.entry.data.description} - -

    - ) - } -
    - -{ - Astro.props.entry.data.links -? ( -
    - {Astro.props.entry.data.links.doc && ( - - Docs - - - )} - {Astro.props.entry.data.links.api && ( - - API Reference - - - )} -
    - ) -: null -} diff --git a/docs/src/components/starlight/Pagination.astro b/docs/src/components/starlight/Pagination.astro deleted file mode 100644 index 132eec4..0000000 --- a/docs/src/components/starlight/Pagination.astro +++ /dev/null @@ -1,38 +0,0 @@ ---- -import { cn } from '@/lib/utils' - -import { buttonVariants } from '@/registry/default/ui/button' -import { radixChevronLeft, radixChevronRight } from '@ng-icons/radix-icons' - -import type { Props } from '@astrojs/starlight/props' - -const { dir, pagination } = Astro.props -const { prev, next } = pagination; ---- - -
    - { - prev && ( - - ) - } - { - next && ( - - ) - } -
    diff --git a/docs/src/components/starlight/Search.astro b/docs/src/components/starlight/Search.astro deleted file mode 100644 index f7375b1..0000000 --- a/docs/src/components/starlight/Search.astro +++ /dev/null @@ -1,476 +0,0 @@ ---- -import { cn } from '@/lib/utils' -import { buttonVariants } from '@/registry/new-york/ui/button' -import project from 'virtual:starlight/project-context' - -import type { Props } from '@astrojs/starlight/props' -import '@pagefind/default-ui/css/ui.css' - -const { labels } = Astro.props - -const pagefindTranslations = { - placeholder: labels['search.label'], - ...Object.fromEntries( - Object.entries(labels) - .filter(([key]) => key.startsWith('pagefind.')) - .map(([key, value]) => [key.replace('pagefind.', ''), value]), - ), -}; ---- - - - - - -
    - { - /* TODO: Make the layout of this button flexible to accommodate different word lengths. Currently hard-coded for English: β€œCancel” */ - } - - { - import.meta.env.DEV -? ( -
    -

    {labels['search.devWarning']}

    -
    - ) -: ( -
    - - ) - } -
    -
    -
    - -{ - /** - * This is intentionally inlined to avoid briefly showing an invalid shortcut. - * Purposely using the deprecated `navigator.platform` property to detect Apple devices, as the - * user agent is spoofed by some browsers when opening the devtools. - */ -} - - - - - - - diff --git a/docs/src/components/starlight/Sidebar.astro b/docs/src/components/starlight/Sidebar.astro deleted file mode 100644 index 4e6e294..0000000 --- a/docs/src/components/starlight/Sidebar.astro +++ /dev/null @@ -1,14 +0,0 @@ ---- -import MobileMenuFooter from '@astrojs/starlight/components/MobileMenuFooter.astro' - -import type { Props } from '@astrojs/starlight/props' -import SidebarSublist from './SidebarSublist.astro' - -const { sidebar } = Astro.props; ---- - - - -
    - -
    diff --git a/docs/src/components/starlight/SidebarSublist.astro b/docs/src/components/starlight/SidebarSublist.astro deleted file mode 100644 index 8db451b..0000000 --- a/docs/src/components/starlight/SidebarSublist.astro +++ /dev/null @@ -1,64 +0,0 @@ ---- -import { cn } from '@/lib/utils' -import { Badge } from '@astrojs/starlight/components' -import type { SidebarEntry } from '../../utils/navigation' - -interface Props { - sublist: SidebarEntry[] - nested?: boolean -} - -const { sublist } = Astro.props; ---- - -
    - { - sublist.map(entry => - entry.type === 'link' -? ( - - {entry.label} - {entry.badge && ( - - )} - - ) -: ( -
    -

    - {entry.label} - {entry.badge && ( - - )} -

    - - {entry.entries.length && ( -
    - -
    - )} -
    - ), - ) - } -
    diff --git a/docs/src/components/starlight/SiteTitle.astro b/docs/src/components/starlight/SiteTitle.astro deleted file mode 100644 index 5acfe66..0000000 --- a/docs/src/components/starlight/SiteTitle.astro +++ /dev/null @@ -1,41 +0,0 @@ ---- -import config from 'virtual:starlight/user-config' -import { logos } from 'virtual:starlight/user-images' -import type { Props } from '@astrojs/starlight/props' - -const { siteTitle, siteTitleHref } = Astro.props; ---- - - - { - config.logo && logos.dark && ( - <> - {config.logo.alt} - {/* Show light alternate if a user configure both light and dark logos. */} - {!('src' in config.logo) && ( - {config.logo.alt} - )} - - ) - } - - diff --git a/docs/src/components/starlight/SocialIcons.astro b/docs/src/components/starlight/SocialIcons.astro deleted file mode 100644 index 3ad8811..0000000 --- a/docs/src/components/starlight/SocialIcons.astro +++ /dev/null @@ -1,32 +0,0 @@ ---- -import { cn } from '@/lib/utils' -import { buttonVariants } from '@/registry/new-york/ui/button' -import { Icon } from '@astrojs/starlight/components' -import config from 'virtual:starlight/user-config' - -type Platform = keyof NonNullable -type SocialConfig = NonNullable[Platform]> -const links = Object.entries(config.social || {}) as [Platform, SocialConfig][]; ---- - -{ - links.length > 0 && ( - <> - {links.map(([platform, { label, url }]) => ( - -
    - - {label} -
    -
    - ))} - - ) -} diff --git a/docs/src/components/starlight/TwoColumnContent.astro b/docs/src/components/starlight/TwoColumnContent.astro deleted file mode 100644 index 7e56ae8..0000000 --- a/docs/src/components/starlight/TwoColumnContent.astro +++ /dev/null @@ -1,18 +0,0 @@ ---- -import type { Props } from '@astrojs/starlight/props'; ---- - -
    -
    - -
    - { - Astro.props.toc && ( - - ) - } -
    diff --git a/docs/src/components/starlight/header/Header.astro b/docs/src/components/starlight/header/Header.astro deleted file mode 100644 index d1f0f33..0000000 --- a/docs/src/components/starlight/header/Header.astro +++ /dev/null @@ -1,37 +0,0 @@ ---- -import LanguageSelect from '@astrojs/starlight/components/LanguageSelect.astro' -import ThemeSelect from '@astrojs/starlight/components/ThemeSelect.astro' - -import config from 'virtual:starlight/user-config' -import type { Props } from '@astrojs/starlight/props' -import Search from '../Search.astro' -import SocialIcons from '../SocialIcons.astro' -import MainNav from './MainNav.astro' - -/** - * Render the `Search` component if Pagefind is enabled or the default search component has been overridden. - */ -const shouldRenderSearch - = config.pagefind - || config.components.Search !== '@astrojs/starlight/components/Search.astro'; ---- - -
    -
    - -
    -
    - {shouldRenderSearch && } -
    - -
    -
    -
    diff --git a/docs/src/components/starlight/header/MainNav.astro b/docs/src/components/starlight/header/MainNav.astro deleted file mode 100644 index c8d18dc..0000000 --- a/docs/src/components/starlight/header/MainNav.astro +++ /dev/null @@ -1,94 +0,0 @@ ---- -import SiteTitle from '@/components/starlight/SiteTitle.astro' -import { cn } from '@/lib/utils' - -import type { Props } from '@astrojs/starlight/props' - -const pathname = new URL(Astro.request.url).pathname.slice(1); ---- - - - -
    diff --git a/docs/src/components/tabs/Tabs.astro b/docs/src/components/tabs/Tabs.astro new file mode 100644 index 0000000..a5aefbc --- /dev/null +++ b/docs/src/components/tabs/Tabs.astro @@ -0,0 +1,94 @@ +--- +import { cn } from '@/lib/utils' + +export interface Props { + defaultValue?: string + class?: string +} +const { defaultValue } = Astro.props +--- + + +
    + +
    +
    + + diff --git a/docs/src/components/tabs/TabsContent.astro b/docs/src/components/tabs/TabsContent.astro new file mode 100644 index 0000000..a933010 --- /dev/null +++ b/docs/src/components/tabs/TabsContent.astro @@ -0,0 +1,21 @@ +--- +import { cn } from '@/lib/utils' + +export interface Props { + value: string + class?: string +} + +const { value } = Astro.props +--- + + + + diff --git a/docs/src/components/tabs/TabsList.astro b/docs/src/components/tabs/TabsList.astro new file mode 100644 index 0000000..0aa3a7e --- /dev/null +++ b/docs/src/components/tabs/TabsList.astro @@ -0,0 +1,7 @@ +--- +import { cn } from '@/lib/utils' +--- + +
    + +
    diff --git a/docs/src/components/tabs/TabsTrigger.astro b/docs/src/components/tabs/TabsTrigger.astro new file mode 100644 index 0000000..0b0a10c --- /dev/null +++ b/docs/src/components/tabs/TabsTrigger.astro @@ -0,0 +1,20 @@ +--- +import { cn } from '@/lib/utils' + +export interface Props { + value: string + class?: string +} +const { value } = Astro.props +--- + + + + diff --git a/docs/src/components/tabs/index.ts b/docs/src/components/tabs/index.ts new file mode 100644 index 0000000..19d76ad --- /dev/null +++ b/docs/src/components/tabs/index.ts @@ -0,0 +1,11 @@ +import Tabs from './Tabs.astro' +import TabsContent from './TabsContent.astro' +import TabsList from './TabsList.astro' +import TabsTrigger from './TabsTrigger.astro' + +export { + Tabs, + TabsContent, + TabsList, + TabsTrigger, +} diff --git a/docs/src/config/docs.ts b/docs/src/config/docs.ts new file mode 100644 index 0000000..582d90f --- /dev/null +++ b/docs/src/config/docs.ts @@ -0,0 +1,149 @@ +export interface TNavItem { + title: string + href?: string + disabled?: boolean + label?: string +} + +export type TSidebarNavItem = TNavItem & { + items: TSidebarNavItem[] +} + +export type TNavItemWithChildren = TNavItem & { + items: TNavItemWithChildren[] +} + +export interface TDocsConfig { + mainNav: TNavItem[] + sidebarNav: TSidebarNavItem[] +} + +export const docsConfig: TDocsConfig = { + mainNav: [ + { + title: 'Docs', + href: '/docs', + }, + { + title: 'Components', + href: '/docs/components/accordion', + }, + ], + sidebarNav: [ + { + title: 'Getting Started', + items: [ + { + title: 'Introduction', + href: '/docs', + items: [], + }, + { + title: 'Installation', + href: '/docs/installation', + items: [], + }, + { + title: 'components.json', + href: '/docs/components-json', + items: [], + }, + { + title: 'Theming', + href: '/docs/theming', + items: [], + }, + { + title: 'Dark mode', + href: '/docs/dark-mode', + disabled: true, + label: 'Soon', + items: [], + }, + { + title: 'CLI', + href: '/docs/cli', + items: [], + }, + { + title: 'Typography', + href: '/docs/components/typography', + items: [], + }, + ], + }, + { + title: 'Installation', + items: [{ + title: 'Angular', + href: '/docs/installation/angular', + items: [], + }], + }, + { + title: 'Components', + items: [ + { + title: 'Accordion', + href: '/docs/components/accordion', + items: [], + }, + { + title: 'Alert', + href: '/docs/components/alert', + items: [], + }, + { + title: 'Avatar', + href: '/docs/components/avatar', + items: [], + }, + { + title: 'Badge', + href: '/docs/components/badge', + items: [], + }, + { + title: 'Breadcrumb', + href: '/docs/components/breadcrumb', + items: [], + }, + { + title: 'Button', + href: '/docs/components/button', + items: [], + }, + { + title: 'Input', + href: '/docs/components/input', + items: [], + }, + { + title: 'Separator', + href: '/docs/components/separator', + items: [], + }, + { + title: 'Skeleton', + href: '/docs/components/skeleton', + items: [], + }, + { + title: 'Switch', + href: '/docs/components/switch', + items: [], + }, + { + title: 'Table', + href: '/docs/components/table', + items: [], + }, + { + title: 'Tabs', + href: '/docs/components/tabs', + items: [], + }, + ], + }, + ], +} diff --git a/docs/src/config/site.ts b/docs/src/config/site.ts index e83095a..45cc5f6 100644 --- a/docs/src/config/site.ts +++ b/docs/src/config/site.ts @@ -1,13 +1,13 @@ export const siteConfig = { - name: 'shadcn-ng', + title: 'shadcn-gn', url: 'https://ui.adrianub.dev', - ogImage: 'https://ui.adrianub.dev/og.jpg', - description: - 'Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.', + description: 'Beautifully designed components built with your choice of UI and CSS frameworks.', links: { - twitter: 'https://twitter.com/adrianub', + twitter: 'https://twitter.com/AdrianUB', github: 'https://github.com/adrian-ub/shadcn-ng', + shadcn: { + twitter: 'https://twitter.com/shadcn', + github: 'https://github.com/shadcn/ui', + }, }, } - -export type SiteConfig = typeof siteConfig diff --git a/docs/src/constants.ts b/docs/src/constants.ts deleted file mode 100644 index f8e40be..0000000 --- a/docs/src/constants.ts +++ /dev/null @@ -1 +0,0 @@ -export const PAGE_TITLE_ID = '_top' diff --git a/docs/src/content/config.ts b/docs/src/content/config.ts index 0e5301c..e43bd51 100644 --- a/docs/src/content/config.ts +++ b/docs/src/content/config.ts @@ -1,17 +1,18 @@ -import { docsSchema } from '@astrojs/starlight/schema' import { defineCollection, z } from 'astro:content' -export const collections = { - docs: defineCollection({ - schema: docsSchema({ - extend: z.object({ - links: z - .object({ - doc: z.string().optional(), - api: z.string().optional(), - }) - .optional(), - }), - }), +const docsCollection = defineCollection({ + schema: z.object({ + title: z.string(), + description: z.string(), + links: z + .object({ + doc: z.string().optional(), + api: z.string().optional(), + }) + .optional(), }), +}) + +export const collections = { + docs: docsCollection, } diff --git a/docs/src/content/docs/docs/cli.mdx b/docs/src/content/docs/cli.mdx similarity index 100% rename from docs/src/content/docs/docs/cli.mdx rename to docs/src/content/docs/cli.mdx diff --git a/docs/src/content/docs/docs/components-json.mdx b/docs/src/content/docs/components-json.mdx similarity index 96% rename from docs/src/content/docs/docs/components-json.mdx rename to docs/src/content/docs/components-json.mdx index 783700a..87de0df 100644 --- a/docs/src/content/docs/docs/components-json.mdx +++ b/docs/src/content/docs/components-json.mdx @@ -3,17 +3,16 @@ title: components.json description: Configuration for your project. --- -import { Aside } from "@astrojs/starlight/components"; The `components.json` file holds configuration for your project. We use it to understand how your project is set up and how to generate components customized for your project. - + You can create a `components.json` file in your project by running the following command: @@ -121,10 +120,10 @@ The CLI uses these values and the `paths` config from your `tsconfig.json` or `j Path aliases have to be set up in your `tsconfig.json` or `jsconfig.json` file. - + ### aliases.utils diff --git a/docs/src/content/docs/components/accordion.mdx b/docs/src/content/docs/components/accordion.mdx new file mode 100644 index 0000000..7689c2e --- /dev/null +++ b/docs/src/content/docs/components/accordion.mdx @@ -0,0 +1,100 @@ +--- +title: Accordion +description: A vertically stacked set of interactive headings that each reveal a section of content. +links: + doc: https://www.radix-ng.com/?path=/docs/primitives-accordion--docs +--- + + + +## Installation + + + + + CLI + Manual + + + + +```bash frame="code" +npx shadcn-ng@latest add accordion +``` + + + + + + + +Install the following dependencies: + +```bash +npm install @ng-icons/core @ng-icons/lucide +``` + +Copy and paste the following code into your project. + + + +Update the import paths to match your project setup. + +Update `tailwind.config.js` + +Add the following animations to your `tailwind.config.js` file: + +```js {5-18} +/** @type {import('tailwindcss').Config} */ +module.exports = { + theme: { + extend: { + keyframes: { + "accordion-down": { + from: { height: "0" }, + to: { height: "var(--radix-accordion-content-height)" }, + }, + "accordion-up": { + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: "0" }, + }, + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", + }, + }, + }, +} +``` + + + + + + + +## Usage + +```ts +import { + UbAccordionDirective, + UbAccordionItemDirective, + UbAccordionTriggerDirective, + UbAccordionContentDirective +} from '@/components/ui/accordion.directive'; +``` + +```html +
    +
    + Is it accessible? +
    + Yes. It adheres to the WAI-ARIA design pattern. +
    +
    +
    +``` diff --git a/docs/src/content/docs/docs/components/alert.mdx b/docs/src/content/docs/components/alert.mdx similarity index 55% rename from docs/src/content/docs/docs/components/alert.mdx rename to docs/src/content/docs/components/alert.mdx index 1607bb3..a2694c3 100644 --- a/docs/src/content/docs/docs/components/alert.mdx +++ b/docs/src/content/docs/components/alert.mdx @@ -3,29 +3,33 @@ title: Alert description: Displays a callout for user attention. --- -import { Tabs, TabItem } from "@astrojs/starlight/components"; -import { Steps } from "@astrojs/starlight/components"; - ## Installation - - ```bash frame="code" - npx shadcn-ng@latest add alert - ``` - + +CLI +Manual + + + + +```bash frame="code" +npx shadcn-ng@latest add alert +``` + + + + +Copy and paste the following code into your project. - - - 1. Copy and paste the following code into your project. - + - 2. Update the import paths to match your project setup. - +Update the import paths to match your project setup. + - + ## Usage @@ -38,7 +42,7 @@ import { } from "@/components/ui/alert.directive"; ``` -```angular-html +```html
    Heads up!
    diff --git a/docs/src/content/docs/docs/components/avatar.mdx b/docs/src/content/docs/components/avatar.mdx similarity index 53% rename from docs/src/content/docs/docs/components/avatar.mdx rename to docs/src/content/docs/components/avatar.mdx index 6989ea1..26ff591 100644 --- a/docs/src/content/docs/docs/components/avatar.mdx +++ b/docs/src/content/docs/components/avatar.mdx @@ -5,29 +5,32 @@ links: doc: https://www.radix-ng.com/?path=/docs/primitives-avatar--docs --- -import { Tabs, TabItem } from "@astrojs/starlight/components"; -import { Steps } from "@astrojs/starlight/components"; - ## Installation - - ```bash frame="code" - npx shadcn-ng@latest add avatar - ``` - + +CLI +Manual + + + +```bash frame="code" +npx shadcn-ng@latest add avatar +``` + + + + +Copy and paste the following code into your project. - - - 1. Copy and paste the following code into your project. - + - 2. Update the import paths to match your project setup. - +Update the import paths to match your project setup. + - + ## Usage @@ -40,7 +43,7 @@ import { } from '@/components/ui/avatar.directive' ``` -```angular-html +```html @adrianub UB diff --git a/docs/src/content/docs/docs/components/badge.mdx b/docs/src/content/docs/components/badge.mdx similarity index 53% rename from docs/src/content/docs/docs/components/badge.mdx rename to docs/src/content/docs/components/badge.mdx index 9bf754c..53142bc 100644 --- a/docs/src/content/docs/docs/components/badge.mdx +++ b/docs/src/content/docs/components/badge.mdx @@ -3,29 +3,36 @@ title: Badge description: Displays a badge or a component that looks like a badge. --- -import { Steps } from "@astrojs/starlight/components"; -import { Tabs, TabItem, Code } from "@astrojs/starlight/components"; - ## Installation - - ```bash frame="code" - npx shadcn-ng@latest add badge - ``` - - - - 1. Copy and paste the following code into your project. - + +CLI +Manual + + + +```bash frame="code" +npx shadcn-ng@latest add badge +``` + + + + + + +Copy and paste the following code into your project. + + + +Update the import paths to match your project setup. - 2. Update the import paths to match your project setup. - + - + ## Usage @@ -34,7 +41,7 @@ import { Tabs, TabItem, Code } from "@astrojs/starlight/components"; import { UbBadgeDirective } from "@/components/ui/badge.directive"; ``` -```angular-html +```html
    Badge
    ``` diff --git a/docs/src/content/docs/components/breadcrumb.mdx b/docs/src/content/docs/components/breadcrumb.mdx new file mode 100644 index 0000000..2426ca0 --- /dev/null +++ b/docs/src/content/docs/components/breadcrumb.mdx @@ -0,0 +1,37 @@ +--- +title: Breadcrumb +description: Displays the path to the current resource using a hierarchy of links. +--- + + + +## Installation + + + +CLI +Manual + + + + +```bash frame="code" +npx shadcn-ng@latest add breadcrumb +``` + + + + + + + +Copy and paste the following code into your project. + + + +Update the import paths to match your project setup. + + + + + diff --git a/docs/src/content/docs/docs/components/button.mdx b/docs/src/content/docs/components/button.mdx similarity index 63% rename from docs/src/content/docs/docs/components/button.mdx rename to docs/src/content/docs/components/button.mdx index e5333ab..c94a6c9 100644 --- a/docs/src/content/docs/docs/components/button.mdx +++ b/docs/src/content/docs/components/button.mdx @@ -3,29 +3,36 @@ title: Button description: Displays a button or a component that looks like a button. --- -import { Tabs, TabItem } from "@astrojs/starlight/components"; -import { Steps } from "@astrojs/starlight/components"; - ## Installation - - ```bash frame="code" - npx shadcn-ng@latest add button - ``` - - - - 1. Copy and paste the following code into your project. - + +CLI +Manual + + + +```bash frame="code" +npx shadcn-ng@latest add button +``` + + + + + + +Copy and paste the following code into your project. + + + +Update the import paths to match your project setup. - 2. Update the import paths to match your project setup. - + - + ## Usage @@ -34,7 +41,7 @@ import { Steps } from "@astrojs/starlight/components"; import { UbButtonDirective } from "@/components/ui/button.directive"; ``` -```angular-html +```html ``` diff --git a/docs/src/content/docs/docs/components/input.mdx b/docs/src/content/docs/components/input.mdx similarity index 51% rename from docs/src/content/docs/docs/components/input.mdx rename to docs/src/content/docs/components/input.mdx index 8b932b9..e12f963 100644 --- a/docs/src/content/docs/docs/components/input.mdx +++ b/docs/src/content/docs/components/input.mdx @@ -3,29 +3,38 @@ title: Input description: Displays a form input field or a component that looks like an input field. --- -import { Tabs, TabItem } from "@astrojs/starlight/components"; -import { Steps } from "@astrojs/starlight/components"; - ## Installation - - ```bash frame="code" - npx shadcn-ng@latest add input - ``` - - - - 1. Copy and paste the following code into your project. - + +CLI +Manual + + + + +```bash frame="code" +npx shadcn-ng@latest add input +``` + + + + + + + +Copy and paste the following code into your project. + + + +Update the import paths to match your project setup. - 2. Update the import paths to match your project setup. - + - + ## Usage diff --git a/docs/src/content/docs/components/separator.mdx b/docs/src/content/docs/components/separator.mdx new file mode 100644 index 0000000..101c4d0 --- /dev/null +++ b/docs/src/content/docs/components/separator.mdx @@ -0,0 +1,49 @@ +--- +title: Separator +description: Visually or semantically separates content. +--- + + + +## Installation + + + + + +CLI +Manual + + + + +```bash frame="code" +npx shadcn-ng@latest add separator +``` + + + + + + +Copy and paste the following code into your project. + + + +Update the import paths to match your project setup. + + + + + + + +## Usage + +```ts +import { UbSeparatorDirective } from "@/components/ui/separator.directive"; +``` + +```html +
    +``` diff --git a/docs/src/content/docs/components/skeleton.mdx b/docs/src/content/docs/components/skeleton.mdx new file mode 100644 index 0000000..5d4908d --- /dev/null +++ b/docs/src/content/docs/components/skeleton.mdx @@ -0,0 +1,56 @@ +--- +title: Skeleton +description: Use to show a placeholder while content is loading. +component: true +--- + + + +## Installation + + + + + +CLI +Manual + + + + +```bash frame="code" +npx shadcn-ng@latest add skeleton +``` + + + + + + +Copy and paste the following code into your project. + + + +Update the import paths to match your project setup. + + + + + + + +## Usage + +```ts +import { UbSkeletonDirective } from "@/components/ui/sekeleton.directive"; +``` + +```html +
    +``` + +## Examples + +### Card + + diff --git a/docs/src/content/docs/components/switch.mdx b/docs/src/content/docs/components/switch.mdx new file mode 100644 index 0000000..00144ad --- /dev/null +++ b/docs/src/content/docs/components/switch.mdx @@ -0,0 +1,53 @@ +--- +title: Switch +description: A control that allows the user to toggle between checked and not checked. +links: + doc: https://www.radix-ng.com/?path=/docs/primitives-switch--docs +--- + + + +## Installation + + + + + +CLI +Manual + + + + + +```bash frame="code" +npx shadcn-ng@latest add switch +``` + + + + + + + +Copy and paste the following code into your project. + + + +Update the import paths to match your project setup. + + + + + + + +## Usage + +```ts +import { SwitchDirective } from '@/components/ui/switch.directive' +``` + +```html +