Fixing scrollspy (#99)

prabhuignoto · Mar 1, 2022 · 24b5149 · 24b5149 · vercel · Mar 1, 2022
1 parent c1fe4dd
commit 24b5149
Show file tree

Hide file tree

Showing 20 changed files with 165 additions and 62 deletions.
diff --git a/packages/documentation/common/syntax-highlighter/index.tsx b/packages/documentation/common/syntax-highlighter/index.tsx
@@ -1,8 +1,11 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';
 import nightOwl from 'react-syntax-highlighter/dist/esm/styles/hljs/night-owl';
+import lioshi from 'react-syntax-highlighter/dist/esm/styles/hljs/lioshi';
+import { useRecoilValue } from 'recoil';
 import { Notification } from '../../../lib/components/notification/notification';
 import { CopyIcon } from '../../../lib/icons';
+import { themeState } from '../../atoms/home';
 import './syntax-highlighter.scss';
 
 interface CodeModel {
@@ -11,6 +14,11 @@ interface CodeModel {
 
 const SyntaxHighLighter: React.FunctionComponent<CodeModel> = ({ code }) => {
   const [showNotification, setShowNotification] = React.useState(false);
+  const theme = useRecoilValue(themeState);
+  const syntaxTheme = useMemo(
+    () => (theme.darkMode ? nightOwl : lioshi),
+    [theme.darkMode]
+  );
 
   const handleCopy = async () => {
     await navigator.clipboard.writeText(code);
@@ -45,7 +53,7 @@ const SyntaxHighLighter: React.FunctionComponent<CodeModel> = ({ code }) => {
       <SyntaxHighlighter
         language="typescript"
         customStyle={{ padding: '0.5rem' }}
-        style={{ ...nightOwl, height: '100%' }}
+        style={{ ...syntaxTheme, height: '100%' }}
       >
         {code}
       </SyntaxHighlighter>

diff --git a/packages/documentation/components/draggable/draggable-examples.tsx b/packages/documentation/components/draggable/draggable-examples.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { useRecoilValue } from 'recoil';
 import useDraggable from '../../../lib/components/common/effects/useDraggable';
-import { responsiveState } from '../../atoms/home';
+import { responsiveState, themeState } from '../../atoms/home';
 
 function useDimensions() {
   const [dimensions, setDimensions] = React.useState({ height: 0, width: 0 });
@@ -33,11 +33,13 @@ export function BoundToContainer() {
   const boundRef = useRef();
   useDraggable(ref, { boundTo: boundRef });
 
+  const theme = useRecoilValue(themeState);
   const dimensions = useDimensions();
 
   return (
     <div
       style={{
+        backgroundColor: theme.darkMode ? '#1e1e1e' : '#f6f6f6',
         height: `${dimensions.height}px`,
         padding: '1rem',
         width: `${dimensions.width}px`,
@@ -61,12 +63,14 @@ export function BoundToContainerHorizontal() {
   const ref = useRef();
   const boundRef = useRef();
   useDraggable(ref, { boundTo: boundRef, dragDirection: 'HORIZONTAL' });
+  const theme = useRecoilValue(themeState);
 
   const dimensions = useDimensions();
 
   return (
     <div
       style={{
+        backgroundColor: theme.darkMode ? '#1e1e1e' : '#fff',
         height: `${dimensions.height}px`,
         padding: '1rem',
         width: `${dimensions.width}px`,
@@ -88,13 +92,15 @@ export function BoundToContainerHorizontal() {
 
 export function BoundToContainerVertical() {
   const ref = useRef();
+  const theme = useRecoilValue(themeState);
   const boundRef = useRef();
   useDraggable(ref, { boundTo: boundRef, dragDirection: 'VERTICAL' });
   const dimensions = useDimensions();
 
   return (
     <div
       style={{
+        backgroundColor: theme.darkMode ? '#1e1e1e' : '#fff',
         height: `${dimensions.height}px`,
         padding: '1rem',
         width: `${dimensions.width}px`,
@@ -116,6 +122,7 @@ export function BoundToContainerVertical() {
 
 export function DraggableWidgets() {
   const boundRef = useRef();
+  const theme = useRecoilValue(themeState);
 
   useDraggable(boundRef, {
     boundTo: boundRef,
@@ -127,6 +134,7 @@ export function DraggableWidgets() {
   return (
     <div
       style={{
+        backgroundColor: theme.darkMode ? '#1e1e1e' : '#fff',
         height: `${dimensions.height}px`,
         padding: '1rem',
         width: `${dimensions.width}px`,

diff --git a/packages/documentation/components/position/position-examples.scss b/packages/documentation/components/position/position-examples.scss
@@ -3,11 +3,18 @@
 
 .rc-demo-position-outer-box {
   @extend %border-radius;
-  background: theme.$light-bg;
   height: 200px;
   margin-left: 50px;
   position: relative;
   width: 200px;
+
+  &.dark {
+    background: theme.$gunmetal-gray;
+  }
+
+  &:not(.dark) {
+    background: theme.$light-bg;
+  }
 }
 
 .rc-demo-position-inner-box {

diff --git a/packages/documentation/components/position/position-examples.tsx b/packages/documentation/components/position/position-examples.tsx
@@ -1,13 +1,17 @@
+import classNames from 'classnames';
 import React, { useCallback, useRef } from 'react';
+import { useRecoilValue } from 'recoil';
 import { Position } from '../../../lib/components/common/effects/use-position-model';
 import { usePosition } from '../../../lib/components/common/effects/usePosition';
+import { themeState } from '../../atoms/home';
 import './position-examples.scss';
 
 export const PositionComponent: React.FunctionComponent<{
   position: Position;
 }> = ({ position }) => {
   const container = useRef<HTMLDivElement>();
   const element = useRef<HTMLElement>();
+  const theme = useRecoilValue(themeState);
 
   const { position: cssPosition, onInit } = usePosition(
     container,
@@ -24,9 +28,15 @@ export const PositionComponent: React.FunctionComponent<{
   }, []);
 
   return (
-    <div className="rc-demo-position-outer-box" ref={onRef}>
+    <div
+      className={classNames(
+        'rc-demo-position-outer-box',
+        theme.darkMode ? 'dark' : ''
+      )}
+      ref={onRef}
+    >
       <span
-        className="rc-demo-position-inner-box"
+        className={classNames('rc-demo-position-inner-box')}
         style={{ ...cssPosition }}
         ref={element}
       ></span>

diff --git a/packages/documentation/components/scroll-spy/widgets.tsx b/packages/documentation/components/scroll-spy/widgets.tsx
@@ -3,8 +3,10 @@ import { useRecoilValue } from 'recoil';
 import { BlockQuote, ScrollSpy, Section } from '../../../lib/components';
 import { responsiveState, themeState } from '../../atoms/home';
 import { DemoWidget } from '../../common/demo-widget';
+
 const Para = () => {
   const theme = useRecoilValue(themeState);
+
   return (
     <p style={{ color: theme.darkMode ? '#fff' : '#000' }}>
       Nulla congue efficitur massa, at tempor enim mattis vitae. Suspendisse
@@ -66,7 +68,9 @@ function Widgets() {
               ]}
             >
               {Array.from({ length: 8 }).map((_, i) => (
-                <div key={i}>{Para}</div>
+                <div key={i}>
+                  <Para />
+                </div>
               ))}
             </ScrollSpy>
           </DemoWidget>
@@ -82,7 +86,9 @@ function Widgets() {
               links={['one', 'two', 'three', 'four', 'five']}
             >
               {Array.from({ length: 5 }).map((_, i) => (
-                <div key={i}>{Para}</div>
+                <div key={i}>
+                  <Para />
+                </div>
               ))}
             </ScrollSpy>
           </DemoWidget>

diff --git a/packages/documentation/home/app-settings/index.tsx b/packages/documentation/home/app-settings/index.tsx
@@ -18,7 +18,6 @@ import styles from './app-settings.module.scss';
 
 const themes: RadioGroupItemProps<ThemeType>[] = [
   {
-    checked: true,
     label: 'Default',
     value: 'default',
   },
@@ -31,6 +30,7 @@ const themes: RadioGroupItemProps<ThemeType>[] = [
     value: 'night-gray',
   },
   {
+    checked: true,
     label: 'Dark',
     value: 'dark',
   },
@@ -72,12 +72,6 @@ const AppSettings: React.FunctionComponent = () => {
       };
     }
 
-    // if (themeToUpdate.value === 'dark') {
-    //   document.body.style.backgroundColor = '#000';
-    // } else {
-    //   document.body.style.backgroundColor = '#f4f4f4';
-    // }
-
     updateAppTheme(selectedTheme);
   }, [theme]);
 

diff --git a/...home/browser-support/browser-support.scss → ...owser-support/browser-support.module.scss b/...home/browser-support/browser-support.scss → ...owser-support/browser-support.module.scss
@@ -1,4 +1,4 @@
-.browser-support-list {
+.list {
   display: flex;
   flex-wrap: wrap;
   list-style: none;
@@ -14,18 +14,25 @@
     margin: 0 1rem;
   }
 
-  .browser-support-name {
+  .name {
     color: var(--rc-primary-color-hex);
     font-size: 1rem;
     font-weight: 500;
     margin-top: 0.5rem;
   }
+}
 
-  .browser-support-icon {
-    align-items: center;
+.icon {
+  align-items: center;
+  color: var(--rc-primary-color-hex);
+  display: flex;
+  justify-content: center;
+
+  &.dark {
+    background: #000;
+  }
+
+  &:not(.dark) {
     background: #fff;
-    color: var(--rc-primary-color-hex);
-    display: flex;
-    justify-content: center;
   }
 }
diff --git a/packages/documentation/home/browser-support/index.tsx b/packages/documentation/home/browser-support/index.tsx
@@ -1,23 +1,40 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
+import classNames from 'classnames';
+import React, { useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
 import { BlockQuote, Section } from '../../../lib/components';
+import { themeState } from '../../atoms/home';
 import { supportedBrowsers } from '../../home/home-data';
-import './browser-support.scss';
+import styles from './browser-support.module.scss';
 
 function BrowserSupport() {
+  const theme = useRecoilValue(themeState);
+
+  const isDarkMode = useMemo(() => !!theme.darkMode, []);
+
   return (
     <Section title="Browser Support" size="md" useHash>
       <BlockQuote>
         react-creme is a modern UI Toolkit that is designed to work with the
-        most popular & modern web browsers.
+        most popular &amp; modern web browsers.
       </BlockQuote>
-      <ul className="browser-support-list">
+      <ul className={styles.list}>
         {supportedBrowsers.map((browser, index) => (
           <li key={index} className="browser-support-item">
-            <span className="browser-support-icon">
+            <span
+              className={classNames(styles.icon, {
+                [styles.dark]: isDarkMode,
+              })}
+            >
               <FontAwesomeIcon icon={browser.icon} size="4x" />
             </span>
-            <span className="browser-support-name">{browser.title}</span>
+            <span
+              className={classNames(styles.name, {
+                [styles.dark]: isDarkMode,
+              })}
+            >
+              {browser.title}
+            </span>
           </li>
         ))}
       </ul>

diff --git a/packages/documentation/home/home.scss b/packages/documentation/home/home.scss
@@ -45,7 +45,7 @@
   }
 
   &.dark {
-    // background-image: url('../images/pexels.jpeg');
+    background-image: url('../images/pexels.jpeg');
   }
 
   img {

diff --git a/packages/documentation/home/index.tsx b/packages/documentation/home/index.tsx
@@ -36,8 +36,8 @@ const Home: React.FunctionComponent = () => {
             compare.
           </BlockQuote>
           <Code>
-            {Object.keys(packages.peerDependencies)
-              .map(key => `${key}@${packages.peerDependencies[key]}`)
+            {Object.keys(packages.dependencies)
+              .map(key => `${key}@${packages.dependencies[key]}`)
               .join('\n')}
           </Code>
         </Section>

diff --git a/packages/lib/components/carousel/carousel-track.module.scss b/packages/lib/components/carousel/carousel-track.module.scss
@@ -15,22 +15,28 @@
 }
 
 .track_item {
-  border: 1px solid theme.$secondary;
   border-radius: 50%;
   height: 10px;
   margin: 4px;
   width: 10px;
+
+  &.dark:not(.track_item_selected) {
+    background-color: theme.$gunmetal-gray;
+  }
+
+  &.track_item_selected {
+    background-color: theme.$primary;
+  }
+
+  &:not(.dark):not(.track_item_selected) {
+    background-color: theme.$alto;
+  }
 }
 
 .track_item:hover {
   cursor: pointer;
 }
 
-.track_item_selected {
-  background: theme.$primary;
-  border: 1px solid theme.$primary;
-}
-
 .icon {
   @extend %icon-md;
 }

diff --git a/packages/lib/components/carousel/carousel-track.tsx b/packages/lib/components/carousel/carousel-track.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import React, { useMemo } from 'react';
+import { isDark } from '../common/utils';
 import { CarouselButton } from './carousel-button';
 import { CarouselTrackProps } from './carousel-model';
 import styles from './carousel-track.module.scss';
@@ -16,6 +17,8 @@ const CarouselTrack: React.FunctionComponent<CarouselTrackProps> = ({
   hideNext,
   focusable,
 }: CarouselTrackProps) => {
+  const isDarkMode = useMemo(() => isDark(), []);
+
   const carouselTrackClass = useMemo(
     () =>
       classNames([
@@ -57,6 +60,7 @@ const CarouselTrack: React.FunctionComponent<CarouselTrackProps> = ({
             className={classNames([
               styles.track_item,
               index === activeIndex ? styles.track_item_selected : '',
+              isDarkMode ? styles.dark : '',
             ])}
             onClick={() => handleSelection(index)}
           ></li>
-Original file line number
+Diff line change
@@ Expand Up / @@ -45,7 +45,7 @@ @@
       }
       &.dark {
-        // background-image: url('../images/pexels.jpeg');
+        background-image: url('../images/pexels.jpeg');
       }
       img {
@@ Expand Down @@