Skip to content
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

Development #54

Merged
merged 3 commits into from
Oct 8, 2024
Merged

Development #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
22c3260
Add FileTree and Notes components, update Documents structure
rubixvi Oct 8, 2024
3293293
Update Documents structure: remove Alert and add Filetree and Notes e…
rubixvi Oct 8, 2024
44521fe
Merge branch 'development' of https://github.com/rubixvi/rubix-docume…
rubixvi Oct 8, 2024
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
84 changes: 84 additions & 0 deletions components/markup/filetree.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
"use client";

import { createContext, memo, useCallback, useContext, useState, ReactElement, ReactNode } from 'react';
import { FiFileText } from "react-icons/fi";
import { LuFolder, LuFolderClosed } from "react-icons/lu";

import cn from "clsx";

const ctx = createContext(0);

interface FolderProps {
name: string;
label?: ReactElement;
open?: boolean;
defaultOpen?: boolean;
onToggle?: (open: boolean) => void;
children: ReactNode;
}

interface FileProps {
name: string;
label?: ReactElement;
}

function useIndent() {
return useContext(ctx);
}


function Tree({ children }: { children: ReactNode }): ReactElement {
return (
<div className={cn("flex")}>
<ul className="border list-none !p-4 !py-1 !m-0">{children}</ul>
</div>
);
}

export const Folder = memo(({ label, name, open, defaultOpen = false, onToggle, children }: FolderProps) => {
const indent = useIndent();
const [isOpen, setIsOpen] = useState(defaultOpen);

const toggle = useCallback(() => {
onToggle?.(!isOpen);
setIsOpen(!isOpen);
}, [isOpen, onToggle]);

const isFolderOpen = open === undefined ? isOpen : open;

return (
<li className="list-none">
<div
onClick={toggle}
title={name}
className={cn("inline-flex items-center cursor-pointer py-1 text-xs hover:text-muted-foreground transition-all")}>
<span className="ml-1">
{isFolderOpen ? <LuFolderClosed size={14} /> : <LuFolder size={14} />}
</span>
<span className="ml-2">{label ?? name}</span>
</div>
{isFolderOpen && (
<ul className="list-none">
<ctx.Provider value={indent + 1}>{children}</ctx.Provider>
</ul>
)}
</li>
);
});

Folder.displayName = 'Folder';

export const File = memo(({ label, name }: FileProps) => (
<li className="list-none">
<div className="inline-flex items-center py-1 cursor-default text-xs hover:text-muted-foreground transition-all">
<span className="ml-1">
<FiFileText size={14} />
</span>
<span className="ml-2 mr-2">{label ?? name}</span>
</div>
</li>
));

File.displayName = 'File';

export default Tree;
80 changes: 0 additions & 80 deletions contents/docs/markup/alert/index.mdx
View file
Open in desktop

This file was deleted.

145 changes: 72 additions & 73 deletions contents/docs/markup/cards/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,76 +5,75 @@ description: This section provides an overview of Introduction.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam iste dolorum tempore consectetur explicabo tempora provident quia maxime, molestiae, facilis aperiam et, error illum vel ullam? Quis architecto dolore ullam

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

| Syntax | Description | Test Text |
| :------------ | :---------: | ----------: |
| Header | Title | Here's this |
| Paragraph | Text | And more |
| Strikethrough | | ~~Text~~ |

## Getting Started

To begin using the Documentation Template, follow these simple steps:

- Start by cloning the repository to your local machine.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quae iure nulla deserunt dolore quam pariatur minus sapiente accusantium. Optio, necessitatibus sequi. Veritatis, aspernatur? Possimus quis repellat eum vitae eveniet.

## Blockquotes

Blockquotes are useful for emphasizing key points or quoting external sources:

> "Documentation is a love letter that you write to your future self." - Damian Conway

Feel free to use blockquotes to highlight important information or quotes relevant to your documentation.

## Code Examples with switch

Here a custom tab component from shadcn ui is used.

<Tabs defaultValue="js" className="pt-5 pb-1">
<TabsList className="">
<TabsTrigger value="js">layout.jsx</TabsTrigger>
<TabsTrigger value="ts">layout.tsx</TabsTrigger>
</TabsList>
<TabsContent value="js">
```jsx {7} showLineNumbers
import ThemeProvider from './theme-provider'

export default function RootLayout({ children }) {
return (
<html>
<body className="container">
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
)}
````
</TabsContent>
<TabsContent value="ts">
```tsx {11} showLineNumbers
import ThemeProvider from './theme-provider'

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html>
<body className="container">
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
)
}
```
</TabsContent>
</Tabs>

## Conclusion

Thank you for choosing the Documentation Template for your project. Whether you're documenting software, APIs, or processes, we're here to support you in creating clear and effective documentation. Happy documenting!
## Small Card

<CardGrid>
<Card
title="Page Structure"
href="/docs/deep/deeper"
icon="alignJustify"
variant="small"
description="test description"
/>
<Card
title="Page Structure"
href="/docs/deep/deeper"
icon="alignJustify"
variant="small"
/>
<Card
title="Rubix Studios"
href="https://www.rubixstudios.com.au"
icon="alignJustify"
external={true}
variant="small"
/>
</CardGrid>

## Large Card

<CardGrid>
<Card
subtitle="Instructions"
title="Installation"
description="Get started with Documents using our quick start installation guide to get your project started."
href="/docs/introduction/installation"
/>
<Card
subtitle="Setup"
title="Site Settings"
description="Setting up your Documents projects layout, links and search engine optimisation."
href="/docs/introduction/setup"
/>
<Card
subtitle="Support"
title="Rubix Studios"
description="Australia's leading branding, marketing and web development company."
href="https://www.rubixstudios.com.au/"
external={true}
/>
</CardGrid>

## Image Card

<CardGrid>
<Card
title="Rubix Studios"
href="https://www.rubixstudios.com.au"
image="/images/og-image.png"
external={true}
variant="image"
/>
<Card
title="Rubix Studios"
href="https://www.rubixstudios.com.au"
image="/images/og-image.png"
variant="image"
/>
<Card
title="Rubix Studios"
href="https://www.rubixstudios.com.au"
image="/images/og-image.png"
variant="image"
/>
</CardGrid>
Loading
Loading