Build themeable React & React Native applications with your Bumbag 👝

Overview

Warning This library is currently unmaintained. You may want to look at a similar alternative like Chakra UI, Material UI or Mantine. 😊

Bumbag

Build themeable React & React Native applications with your Bumbag.

Getting started

Visit the Bumbag docs to get started with Bumbag.

Join our community

Join our discord server to get the latest updates, chat with other Bumbag enthusiasts, and see what's happening in the community!

Contributing

Feel like contributing? That's awesome! We have a Contributing guide to help you out

Comments
  • Autosuggest in Firefox: Uncaught TypeError: element.focus is not a function

    Autosuggest in Firefox: Uncaught TypeError: element.focus is not a function

    I installed a standard Create React App and used the Autosuggest snippet from the Docs in App.js. I tried the App in Firefox 79 on MacOS 10.15.6, and while it basically works, I get the errors below when I "play around" with the Autosuggest input. It's hard to describe, because I haven't figured out a way to 100% reproduce the problem. But I click in the Autosuggest, click on a suggestion, type something, click outside etc. The only thing that is always triggering the error is a click, be it outside the component, inside the input field or on a suggestion, it doesn't matter. Sometimes the error occurs with the first interactions after loading, sometimes everything is stable for a longer time, but I if this is nothing specific to my setup, I'm sure you will see the error quickly when trying the Autosuggest in Firefox. (Safari and Chromium Edge work fine.)

    Below are the tow erros messages, one shows up in the console only, but sometimes (I didn't see any pattern) I get a "full page crash" error with some more details.

    Error in the console only

    Uncaught TypeError: element.focus is not a function onMouseDown Dialog.js:65 useDisclosureRef Dialog.js:69 React 6 commitHookEffectListMount commitPassiveHookEffects callCallback invokeGuardedCallbackDev invokeGuardedCallback flushPassiveEffectsImpl unstable_runWithPriority scheduler.development.js:653 React 4 runWithPriority$1 flushPassiveEffects performSyncWorkOnRoot flushSyncCallbackQueueImpl unstable_runWithPriority scheduler.development.js:653 React 6 runWithPriority$1 flushSyncCallbackQueueImpl flushSyncCallbackQueue discreteUpdates$1 discreteUpdates dispatchDiscreteEvent Dialog.js:65 onMouseDown Dialog.js:65 (Async: EventListener.handleEvent) useDisclosureRef Dialog.js:69 React 6 commitHookEffectListMount commitPassiveHookEffects callCallback invokeGuardedCallbackDev invokeGuardedCallback flushPassiveEffectsImpl unstable_runWithPriority scheduler.development.js:653 React 3 runWithPriority$1 flushPassiveEffects performSyncWorkOnRoot performSyncWorkOnRoot self-hosted:982 flushSyncCallbackQueueImpl React unstable_runWithPriority scheduler.development.js:653 React 6 runWithPriority$1 flushSyncCallbackQueueImpl flushSyncCallbackQueue discreteUpdates$1 discreteUpdates dispatchDiscreteEvent bind_applyFunctionN self-hosted:1133 dispatchDiscreteEvent self-hosted:1096

    This is the full page error I sometimes get:

    TypeError: element.focus is not a function onMouseDown node_modules/reakit/es/Dialog/Dialog.js:65

    62 | var onMouseDown = function onMouseDown(event) { 63 | var element = event.currentTarget; 64 | event.preventDefault();

    65 | element.focus(); | ^ 66 | }; 67 | 68 | var disclosure = ((_options$unstable_dis = options.unstable_disclosureRef) === null || _options$unstable_dis === void 0 ? void 0 : _options$unstable_dis.current) || ref.current;

    EventListener.handleEvent*useDisclosureRef/< node_modules/reakit/es/Dialog/Dialog.js:69

    66 | }; 67 | 68 | var disclosure = ((_options$unstable_dis = options.unstable_disclosureRef) === null || _options$unstable_dis === void 0 ? void 0 : _options$unstable_dis.current) || ref.current;

    69 | disclosure === null || disclosure === void 0 ? void 0 : disclosure.addEventListener("mousedown", onMouseDown); | ^ 70 | return function () { 71 | return disclosure === null || disclosure === void 0 ? void 0 : disclosure.removeEventListener("mousedown", onMouseDown); 72 | };

    commitHookEffectListMount node_modules/react-dom/cjs/react-dom.development.js:19731

    19728 | if ((effect.tag & tag) === tag) { 19729 | // Mount 19730 | var create = effect.create;

    19731 | effect.destroy = create(); | ^ 19732 | 19733 | { 19734 | var destroy = effect.destroy;

    commitPassiveHookEffects node_modules/react-dom/cjs/react-dom.development.js:19769

    19766 | // before calling any create functions. The current approach only serializes 19767 | // these for a single fiber. 19768 | commitHookEffectListUnmount(Passive$1 | HasEffect, finishedWork);

    19769 | commitHookEffectListMount(Passive$1 | HasEffect, finishedWork); | ^ 19770 | break; 19771 | } 19772 | }

    callCallback node_modules/react-dom/cjs/react-dom.development.js:188

    185 | window.event = windowEvent; 186 | } 187 |

    188 | func.apply(context, funcArgs); | ^ 189 | didError = false; 190 | } // Create a global error event handler. We use this to capture the value 191 | // that was thrown. It's possible that this error handler will fire more

    invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js:237

    234 | // errors, it will trigger our global error handler. 235 | 236 | evt.initEvent(evtType, false, false);

    237 | fakeNode.dispatchEvent(evt); | ^ 238 | 239 | if (windowEventDescriptor) { 240 | Object.defineProperty(window, 'event', windowEventDescriptor);

    invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js:292

    289 | function invokeGuardedCallback(name, func, context, a, b, c, d, e, f) { 290 | hasError = false; 291 | caughtError = null;

    292 | invokeGuardedCallbackImpl$1.apply(reporter, arguments); 293 | } 294 | /** 295 | * Same as invokeGuardedCallback, but instead of returning an error, it stores

    flushPassiveEffectsImpl node_modules/react-dom/cjs/react-dom.development.js:22853

    22850 | while (_effect2 !== null) { 22851 | { 22852 | setCurrentFiber(_effect2);

    22853 | invokeGuardedCallback(null, commitPassiveHookEffects, null, _effect2); | ^ 22854 | 22855 | if (hasCaughtError()) { 22856 | if (!(_effect2 !== null)) {

    unstable_runWithPriority node_modules/scheduler/cjs/scheduler.development.js:653

    650 | currentPriorityLevel = priorityLevel; 651 | 652 | try {

    653 | return eventHandler(); | ^ 654 | } finally { 655 | currentPriorityLevel = previousPriorityLevel; 656 | }

    runWithPriority$1 node_modules/react-dom/cjs/react-dom.development.js:11039

    11036 | 11037 | function runWithPriority$1(reactPriorityLevel, fn) { 11038 | var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);

    11039 | return Scheduler_runWithPriority(priorityLevel, fn); 11040 | } 11041 | function scheduleCallback(reactPriorityLevel, callback, options) { 11042 | var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);

    flushPassiveEffects node_modules/react-dom/cjs/react-dom.development.js:22820

    22817 | if (pendingPassiveEffectsRenderPriority !== NoPriority) { 22818 | var priorityLevel = pendingPassiveEffectsRenderPriority > NormalPriority ? NormalPriority : pendingPassiveEffectsRenderPriority; 22819 | pendingPassiveEffectsRenderPriority = NoPriority;

    22820 | return runWithPriority$1(priorityLevel, flushPassiveEffectsImpl); 22821 | } 22822 | } 22823 |

    performSyncWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js:21737

    21734 | } 21735 | } 21736 |

    21737 | flushPassiveEffects(); // If the root or expiration time have changed, throw out the existing stack | ^ 21738 | // and prepare a fresh one. Otherwise we'll continue where we left off. 21739 | 21740 | if (root !== workInProgressRoot || expirationTime !== renderExpirationTime$1) {

    flushSyncCallbackQueueImpl/< node_modules/react-dom/cjs/react-dom.development.js:11089

    11086 | var callback = queue[i]; 11087 | 11088 | do {

    11089 | callback = callback(_isSync); | ^ 11090 | } while (callback !== null); 11091 | } 11092 | });

    unstable_runWithPriority node_modules/scheduler/cjs/scheduler.development.js:653

    650 | currentPriorityLevel = priorityLevel; 651 | 652 | try {

    653 | return eventHandler(); | ^ 654 | } finally { 655 | currentPriorityLevel = previousPriorityLevel; 656 | }

    runWithPriority$1 node_modules/react-dom/cjs/react-dom.development.js:11039

    11036 | 11037 | function runWithPriority$1(reactPriorityLevel, fn) { 11038 | var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);

    11039 | return Scheduler_runWithPriority(priorityLevel, fn); 11040 | } 11041 | function scheduleCallback(reactPriorityLevel, callback, options) { 11042 | var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);

    flushSyncCallbackQueueImpl node_modules/react-dom/cjs/react-dom.development.js:11084

    11081 | try { 11082 | var _isSync = true; 11083 | var queue = syncQueue;

    11084 | runWithPriority$1(ImmediatePriority, function () { | ^ 11085 | for (; i < queue.length; i++) { 11086 | var callback = queue[i]; 11087 |

    flushSyncCallbackQueue node_modules/react-dom/cjs/react-dom.development.js:11072

    11069 | Scheduler_cancelCallback(node); 11070 | } 11071 |

    11072 | flushSyncCallbackQueueImpl(); 11073 | } 11074 | 11075 | function flushSyncCallbackQueueImpl() {

    discreteUpdates$1 node_modules/react-dom/cjs/react-dom.development.js:21893

    21890 | 21891 | if (executionContext === NoContext) { 21892 | // Flush the immediate callbacks that were scheduled during this batch

    21893 | flushSyncCallbackQueue(); 21894 | } 21895 | } 21896 | }

    discreteUpdates node_modules/react-dom/cjs/react-dom.development.js:806

    803 | isInsideEventHandler = true; 804 | 805 | try {

    806 | return discreteUpdatesImpl(fn, a, b, c, d); | ^ 807 | } finally { 808 | isInsideEventHandler = prevIsInsideEventHandler; 809 |

    dispatchDiscreteEvent node_modules/react-dom/cjs/react-dom.development.js:4168

    4165 | 4166 | function dispatchDiscreteEvent(topLevelType, eventSystemFlags, container, nativeEvent) { 4167 | flushDiscreteUpdatesIfNeeded(nativeEvent.timeStamp);

    4168 | discreteUpdates(dispatchEvent, topLevelType, eventSystemFlags, container, nativeEvent); 4169 | } 4170 | 4171 | function dispatchUserBlockingUpdate(topLevelType, eventSystemFlags, container, nativeEvent) {

    EventListener.handleEvent*addEventCaptureListener node_modules/react-dom/cjs/react-dom.development.js:4030

    4027 | element.addEventListener(eventType, listener, false); 4028 | } 4029 | function addEventCaptureListener(element, eventType, listener) {

    4030 | element.addEventListener(eventType, listener, true); 4031 | } 4032 | 4033 | // do it in two places, which duplicates logic

    trapEventForPluginEventSystem node_modules/react-dom/cjs/react-dom.development.js:4160

    4157 | var rawEventName = getRawEventName(topLevelType); 4158 | 4159 | if (capture) {

    4160 | addEventCaptureListener(container, rawEventName, listener); | ^ 4161 | } else { 4162 | addEventBubbleListener(container, rawEventName, listener); 4163 | }

    trapCapturedEvent node_modules/react-dom/cjs/react-dom.development.js:4136

    4133 | trapEventForPluginEventSystem(element, topLevelType, false); 4134 | } 4135 | function trapCapturedEvent(topLevelType, element) {

    4136 | trapEventForPluginEventSystem(element, topLevelType, true); 4137 | } 4138 | 4139 | function trapEventForPluginEventSystem(container, topLevelType, capture) {

    legacyListenToTopLevelEvent node_modules/react-dom/cjs/react-dom.development.js:3613

    3610 | 3611 | case TOP_FOCUS: 3612 | case TOP_BLUR:

    3613 | trapCapturedEvent(TOP_FOCUS, mountAt); | ^ 3614 | trapCapturedEvent(TOP_BLUR, mountAt); // We set the flag for a single dependency later in this function, 3615 | // but this ensures we mark both as attached rather than just one. 3616 |

    legacyListenToEvent node_modules/react-dom/cjs/react-dom.development.js:3601

    3598 | 3599 | for (var i = 0; i < dependencies.length; i++) { 3600 | var dependency = dependencies[i];

    3601 | legacyListenToTopLevelEvent(dependency, mountAt, listenerMap); 3602 | } 3603 | } 3604 | function legacyListenToTopLevelEvent(topLevelType, mountAt, listenerMap) {

    ensureListeningTo node_modules/react-dom/cjs/react-dom.development.js:5761

    5758 | function ensureListeningTo(rootContainerElement, registrationName) { 5759 | var isDocumentOrFragment = rootContainerElement.nodeType === DOCUMENT_NODE || rootContainerElement.nodeType === DOCUMENT_FRAGMENT_NODE; 5760 | var doc = isDocumentOrFragment ? rootContainerElement : rootContainerElement.ownerDocument;

    5761 | legacyListenToEvent(registrationName, doc); 5762 | } 5763 | 5764 | function getOwnerDocumentFromRootContainer(rootContainerElement) {

    setInitialProperties node_modules/react-dom/cjs/react-dom.development.js:5995

    5992 | trapBubbledEvent(TOP_INVALID, domElement); // For controlled components we always need to ensure we're listening 5993 | // to onChange. Even if there is no listener. 5994 |

    5995 | ensureListeningTo(rootContainerElement, 'onChange'); | ^ 5996 | break; 5997 | 5998 | case 'option':

    finalizeInitialChildren node_modules/react-dom/cjs/react-dom.development.js:7499

    7496 | parentInstance.appendChild(child); 7497 | } 7498 | function finalizeInitialChildren(domElement, type, props, rootContainerInstance, hostContext) {

    7499 | setInitialProperties(domElement, type, props, rootContainerInstance); 7500 | return shouldAutoFocusHostComponent(type, props); 7501 | } 7502 | function prepareUpdate(domElement, type, oldProps, newProps, rootContainerInstance, hostContext) {

    completeWork node_modules/react-dom/cjs/react-dom.development.js:18978

    18975 | // Make sure such renderers get scheduled for later work. 18976 | 18977 |

    18978 | if (finalizeInitialChildren(instance, type, newProps, rootContainerInstance)) { | ^ 18979 | markUpdate(workInProgress); 18980 | } 18981 | }

    completeUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:22192

    22189 | next = completeWork(current, workInProgress, renderExpirationTime$1); 22190 | } else { 22191 | startProfilerTimer(workInProgress);

    22192 | next = completeWork(current, workInProgress, renderExpirationTime$1); // Update render duration assuming we didn't error. | ^ 22193 | 22194 | stopProfilerTimerIfRunningAndRecordDelta(workInProgress, false); 22195 | }

    performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:22165

    22162 | 22163 | if (next === null) { 22164 | // If this doesn't spawn new work, complete the current work.

    22165 | next = completeUnitOfWork(unitOfWork); | ^ 22166 | } 22167 | 22168 | ReactCurrentOwner$2.current = null;

    workLoopSync node_modules/react-dom/cjs/react-dom.development.js:22130

    22127 | function workLoopSync() { 22128 | // Already timed out, so perform work without checking if we need to yield. 22129 | while (workInProgress !== null) {

    22130 | workInProgress = performUnitOfWork(workInProgress); 22131 | } 22132 | } 22133 | /** @noinline */

    performSyncWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js:21756

    21753 | 21754 | do { 21755 | try {

    21756 | workLoopSync(); | ^ 21757 | break; 21758 | } catch (thrownValue) { 21759 | handleError(root, thrownValue);

    scheduleUpdateOnFiber node_modules/react-dom/cjs/react-dom.development.js:21188

    21185 | // root inside of batchedUpdates should be synchronous, but layout updates 21186 | // should be deferred until the end of the batch. 21187 |

    21188 | performSyncWorkOnRoot(root); | ^ 21189 | } else { 21190 | ensureRootIsScheduled(root); 21191 | schedulePendingInteractions(root, expirationTime);

    updateContainer node_modules/react-dom/cjs/react-dom.development.js:24373

    24370 | } 24371 | 24372 | enqueueUpdate(current$1, update);

    24373 | scheduleWork(current$1, expirationTime); 24374 | return expirationTime; 24375 | } 24376 | function getPublicRootInstance(container) {

    legacyRenderSubtreeIntoContainer/< node_modules/react-dom/cjs/react-dom.development.js:24758

    24755 | 24756 | 24757 | unbatchedUpdates(function () {

    24758 | updateContainer(children, fiberRoot, parentComponent, callback); | ^ 24759 | }); 24760 | } else { 24761 | fiberRoot = root._internalRoot;

    unbatchedUpdates node_modules/react-dom/cjs/react-dom.development.js:21903

    21900 | executionContext |= LegacyUnbatchedContext; 21901 | 21902 | try {

    21903 | return fn(a); | ^ 21904 | } finally { 21905 | executionContext = prevExecutionContext; 21906 |

    legacyRenderSubtreeIntoContainer node_modules/react-dom/cjs/react-dom.development.js:24757

    24754 | } // Initial mount should not be batched. 24755 | 24756 |

    24757 | unbatchedUpdates(function () { | ^ 24758 | updateContainer(children, fiberRoot, parentComponent, callback); 24759 | }); 24760 | } else {

    render node_modules/react-dom/cjs/react-dom.development.js:24840

    24837 | } 24838 | } 24839 |

    24840 | return legacyRenderSubtreeIntoContainer(null, element, container, false, callback); 24841 | } 24842 | function unstable_renderSubtreeIntoContainer(parentComponent, element, containerNode, callback) { 24843 | if (!isValidContainer(containerNode)) {

    ./src/index.js src/index.js:8

    5 | 6 | import App from "./App"; 7 |

    8 | ReactDOM.render( 9 | <React.StrictMode> 10 | 11 |

    webpack_require /Users/wwb/Projekte/Ignore/bumbag/webpack/bootstrap:784

    781 | }; 782 | 783 | // Execute the module function

    784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 785 | 786 | // Flag the module as loaded 787 | module.l = true;

    fn /Users/wwb/Projekte/Ignore/bumbag/webpack/bootstrap:150

    147 | ); 148 | hotCurrentParents = []; 149 | }

    150 | return webpack_require(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return {

    1 http://localhost:3000/static/js/main.chunk.js:271:18 webpack_require /Users/wwb/Projekte/Ignore/bumbag/webpack/bootstrap:784

    781 | }; 782 | 783 | // Execute the module function

    784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 785 | 786 | // Flag the module as loaded 787 | module.l = true;

    checkDeferredModules /Users/wwb/Projekte/Ignore/bumbag/webpack/bootstrap:45

    42 | } 43 | if(fulfilled) { 44 | deferredModules.splice(i--, 1);

    45 | result = webpack_require(webpack_require.s = deferredModule[0]); | ^ 46 | } 47 | } 48 |

    webpackJsonpCallback /Users/wwb/Projekte/Ignore/bumbag/webpack/bootstrap:32

    29 | deferredModules.push.apply(deferredModules, executeModules || []); 30 | 31 | // run deferred modules when all chunks ready

    32 | return checkDeferredModules(); | ^ 33 | }; 34 | function checkDeferredModules() { 35 | var result;

    (anonymous function) http://localhost:3000/static/js/main.chunk.js:1:75

    bug 
    opened by makkabi 11
  • CSS Warning id's not match on client server.

    CSS Warning id's not match on client server.

    Trying out nextjs with new isSSR, I get this, am I missing something?

    react-dom.development.js?d1ee:88 Warning: Prop `id` did not match. Server: "id-f38874" Client: "id-f71d4d"
        in div (created by ForwardRef(Box))
        in ForwardRef(Box)
        in Unknown (created by Disclosure.Content)
        in Disclosure.Content
        in div (created by ForwardRef(Box))
        in ForwardRef(Box)
        in Unknown (created by PageWithHeader)
        in PageWithHeader (at pages/index.tsx:4)
        in div (created by ForwardRef(Box))
        in ForwardRef(Box)
        in Unknown (created by Box)
        in Box (created by Provider)
        in PageProvider (created by Provider)
        in ToastProvider (created by Provider)
        in IdProvider (created by Provider)
        in ColorModeProvider (created by Provider)
        in ThemeProvider (created by Provider)
        in Provider (at pages/index.tsx:3)
        in MyApp (at _app.tsx:8)
        in div (created by ForwardRef(Box))
        in ForwardRef(Box)
        in Unknown (created by Box)
        in Box (created by Provider)
        in PageProvider (created by Provider)
        in ToastProvider (created by Provider)
        in IdProvider (created by Provider)
        in div (created by ColorModeProvider)
        in ColorModeProvider (created by Provider)
        in ThemeProvider (created by Provider)
        in Provider (at _app.tsx:7)
        in App
        in ErrorBoundary (created by ReactDevOverlay)
        in ReactDevOverlay (created by Container)
        in Container (created by AppContainer)
        in AppContainer
        in Root
    
    bug good first issue 
    opened by agustif 11
  • Twice rendering with nextjs

    Twice rendering with nextjs

    Describe the bug The application is rendering twice when isSSR is enabled in BumbagProvider.

    To Reproduce follow the getting started and:

    Screen_Shot_2020-11-19_at_11 14 38_AM

    Screen_Shot_2020-11-19_at_11 17 15_AM

    Screen_Shot_2020-11-19_at_11 14 18_AM

    Expected behavior

    The useEffect should run once

    bug 
    opened by xbeakmanx 7
  • Enhance typescript type for better autocompletion.

    Enhance typescript type for better autocompletion.

    Is your feature request related to a problem? Please describe.

    Multiple type definitions of Component props.

    For example onChange props of Input component

    Screenshot from 2020-08-12 14-08-33

    The Input props: export type InputProps = BoxProps & LocalInputProps; There are two type of onChange from BoxProps and LocalInputProps

    This will make typescript confuse about autocompletion. Screenshot from 2020-08-12 23-24-29

    Describe the solution you'd like Remove duplication type from inheritance props (BoxProps)

    type IntersectionType = keyof LocalInputProps & keyof BoxProps;
    
    export type InputProps = Omit<BoxProps, IntersectionType> & LocalInputProps;
    

    Result: Screenshot from 2020-08-12 23-23-31

    Additional context Another issue related to the literal string union ("circle").

    Screenshot from 2020-08-12 23-44-05

    There are no options for Intellisense: Screenshot from 2020-08-12 23-45-41

    Solution and result: Use simple hack from community

    Screenshot from 2020-08-12 23-56-46

    Screenshot from 2020-08-12 23-56-28

    enhancement 
    opened by sondh0127 6
  • Does not work in Gatsby

    Does not work in Gatsby

    Reproduction is simple, start a new gatsby starter project then follow the gatsby instructions on the website. Getting this error:

    TypeError: theme.modes is undefined
    useLocalStorage
    node_modules/bumbag/es/utils/useLocalStorage.js:14
    
      11 | var _useTheme = useTheme(),
      12 |     theme = _useTheme.theme;
      13 | 
    > 14 | var isEnabled = theme.modes.enableLocalStorage;
      15 | var get = useCallback(function (key) {
      16 |   if (!isEnabled) return;
      17 | 
    
    • Bumbag 1.0.2
    • Bumbag Gatsby Plugin 1.02
    • Gatsby 2.24.30
    question 
    opened by robotmayo 6
  • Bumbag cannot be run without Cookies Enabled

    Bumbag cannot be run without Cookies Enabled

    Describe the bug

    If you are using bumbag in an iframe in incognito mode (which by default disables cookies from third parties) it crashes. I believe this is because one of the dependencies uses localStorage.

    To Reproduce

    • Disable cookies
    • go to the bumbag.style website :D
    Pasted Graphic 1 good first issue hacktoberfest 
    opened by benedictong-localz 5
  • Styles don't seem to work with statically rendered next.js

    Styles don't seem to work with statically rendered next.js

    Describe the bug

    All components are blacked out in production next.js build (see below)

    Screen Shot 2021-03-11 at 23 06 14

    This does not happen in development. Refreshing the page loads the styles correctly.

    The image above is from bumbag v1.7.5 but I have upgraded to 1.8.0 and the issue persists, however the inputs are not blacked out, just unstyled.

    To Reproduce

    1. Create a next.js build
    2. statically export the build like so: https://nextjs.org/docs/advanced-features/static-html-export

    Expected behavior

    The styles are not blacked out

    Device information (please complete the following information):

    • Device: Macbook pro 13 in
    • OS, version: MacOS catalina 10.15.7
    • Browser, version: Chrome version 89.0.4389.82
    bug 
    opened by Chrischuck 4
  • Menu with options

    Menu with options

    Is your feature request related to a problem? Please describe.

    It isn't clear how or there isn't a component yet to make a menu that contains options that could be selected menu with options

    Describe the solution you'd like

    If it's already possible with the current components we could add an example for it in the Docs, If it's not possible with the current set of components we could consider adding a component that handles this use-case.

    enhancement feature request 
    opened by hazem3500 4
  • Fix the border styles of Group component with a single child

    Fix the border styles of Group component with a single child

    Found the reason for it: https://github.com/bumbag/bumbag-ui/blob/f3c27d0a16e1ccda569a9d7bb41bf97164fabb93/packages/bumbag/src/Group/styles.ts#L32

    The reason is that there is only one child so all 4 borders get removed because :first-child and :last-child both match if there is only one child.

    This SO answer has a good way to solve this: https://stackoverflow.com/a/12198561

    I also prepared a codepen to see the plain combination of CSS selectors I used: https://codepen.io/darksmile92/pen/918d944b148508069fba407bc2c06ce3

    This is my first contribution to your codebase, please let me know if I should fix any styling or something else :)

    Sorry for the mess with the quotes, sublime decided the roll its own linting -.-

    opened by DarkSmile92 4
  • Type definition not available

    Type definition not available

    Type definition is not available -

    VSCode Typescript Hint:

    Could not find a declaration file for module 'bumbag'. '[PATH_TO_DIR]/node_modules/bumbag/lib/index.js' implicitly has an 'any' type. Try npm install @types/bumbag if it exists or add a new declaration (.d.ts) file containing declare module 'bumbag';ts(7016)

    Error:

    error - ./pages/_app.tsx
    Attempted import error: 'Provider' is not exported from 'bumbag' (imported as 'BumbagProvider').
    
    opened by ericjiang97 4
  • Component style reset by bb-Box when NODE_ENV=production

    Component style reset by bb-Box when NODE_ENV=production

    Component style reset by bb-Box when NODE_ENV=production

    After this change, the order of bb-Box moved to the bottom, according to this, it reset components' style

    Refer to the repo

    1. Go to this link
    2. The style of the button got reset by bb-Box

    Expected behavior Button's style should based on bb-Box, not reset by bb-Box

    Screenshots button

    Device information (please complete the following information):

    • Device:
    • OS, version: Win 10
    • Browser, version: Chrome 89
    opened by sam-chuang 3
  • Bump minimatch from 3.0.4 to 3.1.2 in /native-playground

    Bump minimatch from 3.0.4 to 3.1.2 in /native-playground

    Bumps minimatch from 3.0.4 to 3.1.2.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies javascript 
    opened by dependabot[bot] 1
  • Bump minimatch from 3.0.4 to 3.1.2

    Bump minimatch from 3.0.4 to 3.1.2

    Bumps minimatch from 3.0.4 to 3.1.2.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies javascript 
    opened by dependabot[bot] 1
  • Bump react-native-reanimated from 2.2.0 to 2.10.0

    Bump react-native-reanimated from 2.2.0 to 2.10.0

    Bumps react-native-reanimated from 2.2.0 to 2.10.0.

    Release notes

    Sourced from react-native-reanimated's releases.

    2.10.0

    🚀 Main changes

    • Added useAnimatedKeyboard() hook
    • Added useFrameCallback() hook
    • Added support for React Native 0.70
    • Added support for react-native-v8 (building from source only)
    • Detect multiple versions of Reanimated.
    • And many different fixes.

    Build: https://github.com/software-mansion/react-native-reanimated/actions/runs/2889631689

    Full Changelog: https://github.com/software-mansion/react-native-reanimated/compare/2.9.1...2.10.0

    2.9.1

    What's Changed

    Build: https://github.com/software-mansion/react-native-reanimated/actions/runs/2595830511

    🙌 Thank you for your contributions!

    2.9.0

    What's Changed

    Package contains binaries for react-native in version from 0.65 to 0.69

    Build: https://github.com/software-mansion/react-native-reanimated/actions/runs/2590392729

    🙌 Thank you for your contributions!

    2.8.0

    What's Changed

    New Contributors

    @​dylmye @​jiulongw @​lukmccall

    Full Changelog: https://github.com/software-mansion/react-native-reanimated/compare/2.7.0...2.8.0

    🙌 Thank you for your contributions!

    2.7.0

    What's Changed

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by piaskowyk, a new releaser for react-native-reanimated since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies javascript 
    opened by dependabot[bot] 1
  • Bump react-native-reanimated from 2.2.0 to 2.10.0 in /native-playground

    Bump react-native-reanimated from 2.2.0 to 2.10.0 in /native-playground

    Bumps react-native-reanimated from 2.2.0 to 2.10.0.

    Release notes

    Sourced from react-native-reanimated's releases.

    2.10.0

    🚀 Main changes

    • Added useAnimatedKeyboard() hook
    • Added useFrameCallback() hook
    • Added support for React Native 0.70
    • Added support for react-native-v8 (building from source only)
    • Detect multiple versions of Reanimated.
    • And many different fixes.

    Build: https://github.com/software-mansion/react-native-reanimated/actions/runs/2889631689

    Full Changelog: https://github.com/software-mansion/react-native-reanimated/compare/2.9.1...2.10.0

    2.9.1

    What's Changed

    Build: https://github.com/software-mansion/react-native-reanimated/actions/runs/2595830511

    🙌 Thank you for your contributions!

    2.9.0

    What's Changed

    Package contains binaries for react-native in version from 0.65 to 0.69

    Build: https://github.com/software-mansion/react-native-reanimated/actions/runs/2590392729

    🙌 Thank you for your contributions!

    2.8.0

    What's Changed

    New Contributors

    @​dylmye @​jiulongw @​lukmccall

    Full Changelog: https://github.com/software-mansion/react-native-reanimated/compare/2.7.0...2.8.0

    🙌 Thank you for your contributions!

    2.7.0

    What's Changed

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by piaskowyk, a new releaser for react-native-reanimated since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies javascript 
    opened by dependabot[bot] 1
  • Typing issues when using breakpoint properties in global styles

    Typing issues when using breakpoint properties in global styles

    When passing breakpoint object properties into the bumbag global theme provider, typescript complains as below:

    image

    Example code setup to reproduce:

    const theme = {
      Toast: {
        styles: {
          base: {
            maxWidth: {
              default: "400px",
              "max-mobile": "300px",
            },
          },
        },
      },
    };
    
    const App = () => {
      return (
        <BumbagProvider theme={theme}>
            <Component />
            <ToastManager />
        </BumbagProvider>
      );
    };
    

    Expected behavior

    No typescript compilation error.

    Using non-native version 2.7.21

    opened by Johoseph 0
  • iOS Safari Dialog scrolling issue

    iOS Safari Dialog scrolling issue

    Describe the bug

    When testing my site on iOS, scrolling is not working inside the dialog box. I've attempted to spend some time to debug this without much luck. Seems like a possible bug with Safari, maybe there is a hack around it? Figured I'd post it if anyone has some ideas on this.

    To Reproduce

    launch a dialog box in safari mobile, click here to access a playroom to demo this issue on your phone

    Expected behavior

    Should be able to scroll on any device.

    Screenshots

    Device information (please complete the following information):

    • Device: iPhone 13 Pro max & iPhone SE 2
    • OS, version: iOS 15, iOS16
    • Browser, version:
    opened by Shaun2D2 0
Releases(v2.7.5)
Owner
jxom
@rainbow-me @wagmi-dev
jxom
Arco-design-pro - An out-of-the-box solution to quickly build enterprise-level applications based on Arco Design

Arco Design Pro An out-of-the-box solution to quickly build enterprise-level app

null 256 Nov 29, 2022
⚛️Preact-PWA - a boilerplate to build fast progressive web applications with Preact & Vitejs

⚛️ pheralb/preact-pwa is a boilerplate to build fast progressive web applications with Preact & Vitejs. ?? Demo - Cloudflare Pages. ?? Gett

Pablo Hdez 6 Oct 29, 2022
In this course you learn how to use MUI components in your React applications

React + MUI In this course you learn how to use MUI components in your React applications. But, what is MUI? MUI offers a comprehensive suite of UI to

AmirHossein Mohammadi 5 Jul 25, 2022
A companion app written with React and Tauri to help manage your applications on AppCenter.

Tauri AppCenter Companion A companion app written with React and Tauri to help you manage your apps on appcenter. The idea is to provide a simple way

Zenox 9 Oct 16, 2022
Boilerplate for React Native applications

Boilerplate for React Native applications, built with Mobx as a state manager and Native Base as a component library.

Nathan S. Santos 8 Jun 25, 2022
Build your website with Notion for free

Fruition: Free, Open Source Toolkit For Customizing Your Notion Pages Use cases: perfect for your portfolio, blog, landing page, and business site Fea

Stephen Ou 1.3k Nov 27, 2022
Nextacular 19 Dec 1, 2022
React-Mini-Projects - Simple React mini-applications

React Mini Projects A Fully Responsive React Application contain these mini apps : Todo App Movie App Budget App Flash Card App Factor App This app wa

Morteza Rezaienia 1 Jan 1, 2022
GlueStick is a command line interface for quickly developing universal web applications using React and Redux.

Deprecation Notice GlueStick is now archived. It was one of the first React-in-a-box projects and helped TrueCar quickly migrate to React. With the Re

TrueCar Inc 359 Jul 31, 2022
🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.

??️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.

Alan Alickovic 15.3k Nov 30, 2022
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

marmelab 21.1k Dec 6, 2022
An out-of-box UI solution for enterprise applications as a React boilerplate.

An out-of-box UI solution for enterprise applications as a React boilerplate.

xyj 11 Nov 9, 2022
An out-of-box UI solution for enterprise applications as a React boilerplate.

An out-of-box UI solution for enterprise applications as a React boilerplate.

Ant Design Team 33.3k Dec 1, 2022
A universal boilerplate for building web applications w/ TypeScript, React, Redux, Server Side Rendering and more.

Vortigern Vortigern is our opinionated boilerplate for crafting universal web applications by using modern technologies like TypeScript, React and Red

Barbar Startup Factory 641 Nov 11, 2022
Great boilerplate for fast creating React/Redux Applications.

react-redux-boilerplate Great boilerplate for fast creating React/Redux Applications.

Anton Izmailov 24 Mar 20, 2021
Great boilerplate for fast creating React/Redux Applications.

react-redux-boilerplate Great boilerplate for fast creating React/Redux Applications

Anton Izmailov 24 Mar 20, 2021
🚀 Create highly scalable and universal React microservices/applications within seconds.

Creating scalable, universal and well tested JavaScript application for enterprise companies with many teams and products is a hard task. We at Immowe

Immowelt Group 148 Nov 30, 2022
Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client

TsToolbox Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client (inspired by ReKit) ⚠ ⚠ ⚠ Work in Progress ⚠

Daniel Nikravesh 7 Apr 14, 2022
Boilerplate for building applications with a React frontend and a C++ gRPC backend

Boilerplate for building applications with a React frontend and a C++ gRPC backend. How To Run Backend Install Bazel Bazel is for building the backend

null 3 Oct 16, 2022