feat: flowbite theme context provider #61

rluders · 2022-04-21T07:36:01Z

This PR adds some theme context provider to handle splitting the part of the code that handles the dark mode and to be able to support some other theme features in the future.

DISCLAIMER: THIS IS AN EXPERIMENT, WE ARE NOT SURE THAT IT BECOME PART OF FLOWBITE REACT YET.

This was heavily inspired by windmill-react.

@types/index.d.ts

bacali95 · 2022-04-21T13:23:16Z

src/components/Flowbite/index.tsx

+export type FlowbiteProps = PropsWithChildren<{
+  children: any;
+  dark?: boolean;
+  usePreferences?: boolean;


I think we should group the above two props because they are both related to the theme context.

What would the benefits be?

Later on, if we add more props to this component it might become unclear what every prop is doing.

src/components/Flowbite/index.tsx

bacali95 · 2022-04-21T13:25:02Z

src/contexts/ThemeContext.tsx

+
+interface ThemeContextInterface {
+  mode?: Mode;
+  toggleMode?: any;


Let's not use the type any anywhere and have always the exact type we need, for example here we need () => void

src/contexts/ThemeContext.tsx

src/hooks/useDarkMode.ts

bacali95 · 2022-04-21T13:33:17Z

src/hooks/useDarkMode.ts

+    if (!mode) return;
+    const newMode = mode == 'light' ? 'dark' : 'light';
+    document.documentElement.className = '';
+    document.documentElement.classList.add(newMode);


We can replace the above three lines by document.documentElement.classList.toggle('dark')

hoho, didn't know about this one.

But it will change a lot of the behaviour. 🤔

Yeah, I fact I could change it, but then it will not work as I'm expecting. I'll remove 3 lines here, and add a few more in other places. Don't see it as a 🏆.

I don't see changing these lines as an optimization, I see a bug here that needs to be fixed, because if you do this affectation document.documentElement.className = ''; you might be breaking some behavior in the product.

src/components/Flowbite/index.tsx

bacali95 · 2022-04-22T13:27:40Z

src/contexts/ThemeContext.tsx

-  children: React.ReactNode;
-  value?: any;
-}
+type ThemeProviderProps = ProviderProps<{}>;


Still we should replace {} with ThemeContextProps

rluders · 2022-05-03T08:55:47Z

NOTE: I'm a little bit busy this week, but once I have some free time I'll continue work on this.

tulup-conner · 2022-05-07T02:32:07Z

@rluders I am noticing a pattern with flowbite-react now that I'm using it. I create my own version of the flowbite-react component with className so I don't need to repeat it.

I have no idea if this is the best/ideal way to do this:

const flowbiteTheme = {
  components: {
    Sidebar: "fixed overflow-auto top-16 h-screen lg:sticky lg:block"
  }
}
...
<Flowbite theme={flowbiteTheme}>
  ...
  <Sidebar> // className inherits flowbiteTHeme.components.Sidebar
    ..
  </Sidebar>
</Flowbite>

rluders · 2022-05-07T07:15:06Z

@rluders I am noticing a pattern with flowbite-react now that I'm using it. I create my own version of the flowbite-react component with className so I don't need to repeat it.

I have no idea if this is the best/ideal way to do this:
const flowbiteTheme = {
  components: {
    Sidebar: "fixed overflow-auto top-16 h-screen lg:sticky lg:block"
  }
}
...
<Flowbite theme={flowbiteTheme}>
  ...
  <Sidebar> // className inherits flowbiteTHeme.components.Sidebar
    ..
  </Sidebar>
</Flowbite>

So, this is basically what I'm doing in this PR. Give the possibility to overwrite some component styles by creating themes. Not sure yet if we want to also put some filters to avoid some design system changes by the theme, but... I'm thinking about it, lets see how it all will work.

rluders · 2022-05-07T09:32:55Z

There are still pieces to validate on this experiment, some results from code review, others from improvements and features that I want to include into it.

So it is probably far to be completed. However, feel free to leave any early feedback.

rluders · 2022-05-08T12:01:03Z

@tulup-conner please, give it a try

tulup-conner

This is so exciting 💯 I actually haven't added Accordions to my site yet LOL but I will now. In the meantime I am excited to test the rest of the components.

src/docs/pages/ThemePage.tsx

src/lib/components/Accordion/AccordionTitle.tsx

tsconfig.json

src/lib/components/Flowbite/ThemeContext.tsx

rluders requested a review from bacali95 April 21, 2022 08:00

bacali95 requested changes Apr 21, 2022

View reviewed changes

bacali95 requested changes Apr 22, 2022

View reviewed changes

rluders mentioned this pull request Apr 25, 2022

Use custom colors from tailwind.config.js in color attribute #62

Closed

rluders force-pushed the flowbite-context branch from ca044fb to 90bf530 Compare May 6, 2022 15:19

rluders marked this pull request as draft May 7, 2022 09:33

Ricardo Lüders added 10 commits May 8, 2022 09:58

chore: ajust tsconfig and add @types

42344dd

feat: theme context provider

3173043

refactor: replace interface w/ type and renaming

216812d

feat: basic theme support

5d3c707

refactor: remove unecessary strict

48767c8

feat: basic theme support

cf01922

feat: demo page support content

504535f

chore: theme docs page

481315a

fix: use title as key isn't a good idea

91435a3

refactor: organizing theme component

0b02b7f

rluders force-pushed the flowbite-context branch from 62694b2 to 0b02b7f Compare May 8, 2022 09:28

Ricardo Lüders added 2 commits May 8, 2022 11:38

feat: adding themeProps

8ebab41

fix: theme mode switch

119b865

rluders marked this pull request as ready for review May 8, 2022 11:54

rluders requested a review from bacali95 May 8, 2022 11:55

fix: missing flowbite export

65e6a7d

tulup-conner reviewed May 8, 2022

View reviewed changes

Ricardo Lüders added 2 commits May 8, 2022 15:09

fix: remove extra text

6d3100b

fix: SyntaxHighlighter

c14af41

Ricardo Lüders added 3 commits May 8, 2022 15:14

style: classNames over cn

f44b06d

chore: exclude the right files from tsconfig

d8055b4

refactor: direct access localStorage

7bc8dba

rluders merged commit 7274f5e into themesberg:main May 8, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: flowbite theme context provider #61

feat: flowbite theme context provider #61

rluders commented Apr 21, 2022 •

edited

Loading

bacali95 Apr 21, 2022

rluders Apr 22, 2022

bacali95 Apr 22, 2022

bacali95 Apr 21, 2022

bacali95 Apr 21, 2022

rluders Apr 22, 2022

rluders Apr 22, 2022

rluders Apr 22, 2022

bacali95 Apr 22, 2022

bacali95 Apr 22, 2022

rluders commented May 3, 2022

tulup-conner commented May 7, 2022 •

edited

Loading

rluders commented May 7, 2022 •

edited

Loading

rluders commented May 7, 2022

rluders commented May 8, 2022

tulup-conner left a comment

feat: flowbite theme context provider #61

feat: flowbite theme context provider #61

Conversation

rluders commented Apr 21, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rluders commented May 3, 2022

tulup-conner commented May 7, 2022 • edited Loading

rluders commented May 7, 2022 • edited Loading

rluders commented May 7, 2022

rluders commented May 8, 2022

tulup-conner left a comment

Choose a reason for hiding this comment

rluders commented Apr 21, 2022 •

edited

Loading

tulup-conner commented May 7, 2022 •

edited

Loading

rluders commented May 7, 2022 •

edited

Loading