docs: improve content of docs and components for #767

[zoltanszogyenyi]

Description

This PR improves the documentation, copywriting and options of all of the component docs.

Fixes #767

Type of change

Please delete options that are not relevant.

• This change contains documentation update

Breaking changes

No breaking changes.

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

Test Configuration:

• Firmware version:
• Hardware:
• Toolchain:
• SDK:

Checklist:

List of pages:

• Accordion
• Alerts
• Avatar
• Badge
• Breadcrumb
• Buttons
• Button group
• Cards
• Carousel
• Dropdown
• Footer
• Forms
• List group
• Modal
• Navbar
• Pagination
• Progress
• Rating
• Sidebar
• Spinner
• Table
• Tabs (need help to pass state to last component .mdx file @tulup-conner fixed with props to mdx)
• Timeline
• Toast
• Tooltip

General:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules
• I have checked my code and corrected any misspellings

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
flowbite-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 31, 2023 0:30am

[tulup-conner]

@zoltanszogyenyi Once you're ready for me to review this set "Ready for review" and make me a Reviewer

[tulup-conner]

@zoltanszogyenyi BTW - Can you do me a favor and delete the CNAME file in this PR? It was only used for Github Pages

[zoltanszogyenyi]

Hey @tulup-conner,

Almost done with the docs - not sure how to pass state from tabs/index.tsx to tabs.mdx.

The page to send the state:

const TabsPage: FC = () => {
  const [activeTab, setActiveTab] = useState<number>(0);
  const tabsRef = useRef<TabsRef>(null);

  const state = {
    activeTab,
    setActiveTab,
    tabsRef,
  };

  return (
    <DocsContentLayout
      title="React Tabs - Flowbite"
      description="Get started with the tabs component from Flowbite React to show a list of tab items where you can switch between them using multiple styles, colors and layouts"
    >
      <TabsDocs {...state} />
    </DocsContentLayout>
  );
};

Here's the component that throws errors:

<CodePreview
code={`const Tabs: FC = () => {
const [activeTab, setActiveTab] = useState<number>(0);
const tabsRef = useRef<TabsRef>(null);

return (

<>
<Tabs.Group
aria-label="Default tabs"
style="default"
ref={tabsRef}
onActiveTabChange={tab => setActiveTab(tab)} >
<Tabs.Item active title="Profile">
Profile content
</Tabs.Item>
<Tabs.Item title="Dashboard">Dashboard content</Tabs.Item>
<Tabs.Item title="Settings">Settings content</Tabs.Item>
<Tabs.Item title="Contacts">Contacts content</Tabs.Item>
</Tabs.Group>
<div>Active tab: {activeTab}</div>
<Button.Group>
<Button color="gray" onClick={() => tabsRef.current?.setActiveTab(0)}>
Profile
</Button>
<Button color="gray" onClick={() => tabsRef.current?.setActiveTab(1)}>
Dashboard
</Button>
<Button color="gray" onClick={() => tabsRef.current?.setActiveTab(2)}>
Settings
</Button>
<Button color="gray" onClick={() => tabsRef.current?.setActiveTab(3)}>
Contacts
</Button>
</Button.Group>
</>
);
};`}
title="Set active tab programmatically" >
<Tabs.Group
aria-label="Default tabs"
style="default"
ref={tabsRef}
onActiveTabChange={(tab: SetStateAction<number>) => setActiveTab(tab)} >
<Tabs.Item active title="Profile">
Profile content
</Tabs.Item>
<Tabs.Item title="Dashboard">Dashboard content</Tabs.Item>
<Tabs.Item title="Settings">Settings content</Tabs.Item>
<Tabs.Item title="Contacts">Contacts content</Tabs.Item>
</Tabs.Group>
<div>Active tab: {activeTab}</div>
<Button.Group>
<Button color="gray" onClick={() => tabsRef.current?.setActiveTab(0)}>
Profile
</Button>
<Button color="gray" onClick={() => tabsRef.current?.setActiveTab(1)}>
Dashboard
</Button>
<Button color="gray" onClick={() => tabsRef.current?.setActiveTab(2)}>
Settings
</Button>
<Button color="gray" onClick={() => tabsRef.current?.setActiveTab(3)}>
Contacts
</Button>
</Button.Group>
</CodePreview>

Same thing for the Pagination, Forms, and Modal components. There I still have to create the mdx file with content.

Otherwise I'm super close to finishing this off and then to move to create other PRs.

Would be great if you could show me a way at least for the Tabs page.

Cheers,
Zoltan

[zoltanszogyenyi]

I managed to find a way to access them via the props variable directly from .mdx files - I will finish this today.

Found quite a few bugs along the way with components, already created one issue for the modal placement.

[zoltanszogyenyi]

Hey @tulup-conner,

I'm done with this PR - please review it and let's merge it asap so that the new content can be indexed.

There's lots to work on still, however, this is a pretty good start for creating better documentation and description for the components. All of the content is unique and hand-written so search engines will definitely pick up on this.

Cheers,
Zoltan

[tulup-conner]

@zoltanszogyenyi You need to rebase, then if it looks good you're safe to merge.

[zoltanszogyenyi]

@tulup-conner it's up to date with main now