From 224a05c464fceb86e5fb2bbc4b02a0e28ee6332a Mon Sep 17 00:00:00 2001 From: Sebastian Sebald Date: Wed, 12 Jun 2024 23:24:15 +0200 Subject: [PATCH] done! --- src/index.css | 6 +- .../_components/Tabs/Goto.tsx | 20 ++++++ .../_components/TabsGotoExample.tsx | 66 +++++++++++++++++++ src/routes/compound-component/index.mdx | 43 ++++++++---- 4 files changed, 119 insertions(+), 16 deletions(-) create mode 100644 src/routes/compound-component/_components/Tabs/Goto.tsx create mode 100644 src/routes/compound-component/_components/TabsGotoExample.tsx diff --git a/src/index.css b/src/index.css index 2e65b8d..5732b55 100644 --- a/src/index.css +++ b/src/index.css @@ -53,11 +53,13 @@ flex-basis: auto; } -.ch-codeblock .ch-code-button { +.ch-codeblock .ch-code-button, +.ch-codegroup .ch-editor-button { display: none; } -.ch-codeblock:hover .ch-code-button { +.ch-codeblock:hover .ch-code-button, +.ch-codegroup:hover .ch-editor-button { display: block; } diff --git a/src/routes/compound-component/_components/Tabs/Goto.tsx b/src/routes/compound-component/_components/Tabs/Goto.tsx new file mode 100644 index 0000000..b201192 --- /dev/null +++ b/src/routes/compound-component/_components/Tabs/Goto.tsx @@ -0,0 +1,20 @@ +import type { ReactNode } from 'react'; +import { useTabsContext } from './Context'; + +export interface GotoProps { + to: string; + children?: ReactNode; +} + +export const Goto = ({ to, children }: GotoProps) => { + const { setActiveTab } = useTabsContext(); + + return ( + setActiveTab(to)} + > + {children} + + ); +}; diff --git a/src/routes/compound-component/_components/TabsGotoExample.tsx b/src/routes/compound-component/_components/TabsGotoExample.tsx new file mode 100644 index 0000000..3d12bca --- /dev/null +++ b/src/routes/compound-component/_components/TabsGotoExample.tsx @@ -0,0 +1,66 @@ +import { MarigoldProvider } from '@marigold/components'; +import theme from '@marigold/theme-core'; + +import { Tabs } from './Tabs'; +import { Goto } from './Tabs/Goto'; + +const App = () => ( + + + + Description + Locations + Merchandise + + +
+ DJ Wobblemeister's Wobble Extravaganza +

+ Join us for an unforgettable night with DJ Wobblemeister, the + maestro of wobble beats and king of quirky dance moves. Expect an + evening filled with thumping bass, wobbly rhythms, and an + unparalleled light show. It's going to be a wobbly good time! +

+

+ Curious about the event details? Find out{' '} + when and where DJ Wobblemeister will be + turning up the wobble! Make sure to check out our exclusive{' '} + merchandise. Only available during the + tour! +

+
+ + +
+
    +
  • Wobbleville - June 20th
    • +
  • Bass City - June 25th
    • +
  • Quirkytown - July 1st
    • +
  • Beatsburgh - July 5th
    • +
+

+ Back to the description +

+
+ + +
+

+ Grab your exclusive DJ Wobblemeister merchandise at the concert! +

+
    +
  • Wobble Hats - $25
    • +
  • Quirky T-Shirts - $30
    • +
  • Bass Boosted Hoodies - $50
    • +
  • Glow-in-the-dark Wobble Wristbands - $10
    • +
+

+ Back to the description +

+
+ + + +); + +export default App; diff --git a/src/routes/compound-component/index.mdx b/src/routes/compound-component/index.mdx index ccff90d..6858c9b 100644 --- a/src/routes/compound-component/index.mdx +++ b/src/routes/compound-component/index.mdx @@ -8,8 +8,8 @@ import Preview from '@/components/Preview'; import SelectExample from './_components/SelectExample'; import TabsBasicExample from './_components/TabsBasicExample'; import TabsAnatomy from './_components/TabsAnatomy'; -import TabsExample from './_components/TabsExample'; import TabsActionExample from './_components/TabsActionExample'; +import TabsGotoExample from './_components/TabsGotoExample'; import TabsBaiscContent from './_components/tabs-basic.mdx'; import TabsCompoundComponentContent from './_components/tabs-compound-component.mdx'; @@ -261,29 +261,44 @@ the state of the `` component. The state is entirely encapsulated within t component, making it impossible to accommodate dynamic interactions like switching tabs from within the content. -Lucky for us, we won't encounter this issue when using compound components. +With compound components, implementing such a feature becomes straightforward. By utilizing the +tabs' context, which provides access to the shared state, we can create additional components +that both access and update this state, just like `` or `` do. - + - +```tsx Goto.tsx +// from ./_components/Tabs/Goto.tsx +``` ---- +```tsx App.tsx focus=24:30 +// from ./_components/TabsGotoExample.tsx +``` -However, by breaking down the component into smaller, more focused parts, + -we've made the code easier to understand and maintain. Before this -refactoring, achieving the same outcome would have required writing more -complex and tightly coupled code. +Here's our example showcasing the new `` component in action! - + -downsides of this implementation: we have a very ugly "data object" with all information and JSX as property inside it. this makes it hard(er) to work with the ... why? -add a new feature that jumps to a certain tab, making this almost like a wizard (using TabsContext) or something. +## Conclusion + +At first glance, building compound components might seem daunting and complex. +However, understanding this approach is essential for ["thinking in React"](https://react.dev/learn/thinking-in-react). +This pattern emphasizes the power of React's component model, enabling us +to create highly reusable and intuitive components. -!!! When it is not a good idea to use compound components!? +Compound components provide a robust approach to designing React components +where related functionality is grouped together under a common parent component. +This design pattern fosters better organization and maintainability by encapsulating +shared state and logic within the parent component, while allowing child components +to focus on specific responsibilities. -we demonstracted how powerful and convenient compound components can be for extending functionality and maintaining clean, scalable code. +Like shown in our examples, using this structure enhances code readability and makes +it easier to extend and customize components without directly modifying their +internals. In general, compound components are ideal for creating complex UI components +that require cohesive interaction and seamless integration of different functionalities.