demo: add dynamic sections in demo

EmaSuriano · Oct 16, 2022 · b32b8b6 · b32b8b6
1 parent 467f625
commit b32b8b6
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
  },
  "scripts": {
  "build": "yarn workspace react-scroll-section build",
- "build:watch": "yarn workspace react-scroll-section build --watch",
+ "build:watch": "yarn workspace react-scroll-section build --watch --minify false",
  "start": "yarn workspace demo dev",
  "build:demo": "yarn build && yarn workspace demo build",
  "release": "yarn build && yarn workspace react-scroll-section release",

diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -11,6 +11,7 @@
  "dependencies": {
  "@types/styled-components": "^5.1.26",
  "prop-types": "^15.8.1",
+ "randomcolor": "^0.6.2",
  "react": "17.0.2",
  "react-dom": "17.0.2",
  "react-github-corner": "^2.5.0",
@@ -19,6 +20,7 @@
  "styled-components": "5.3.6"
  },
  "devDependencies": {
+ "@types/randomcolor": "^0.5.6",
  "@types/react": "18.0.21",
  "@types/react-dom": "18.0.6",
  "@types/react-toggle": "^4.0.3",

diff --git a/packages/demo/src/App.tsx b/packages/demo/src/App.tsx
@@ -1,16 +1,28 @@
 import { useState } from 'react';
 import { ScrollingProvider, Section } from 'react-scroll-section';
+import randomColor from 'randomcolor';
 import ModeToggle, { Mode } from './ModeToggle';
 import { DynamicMenu, StaticMenu } from './Menu';
 import { Footer, Menu, SectionContainer } from './Builders';
 import logo from './logo.svg';
 
 function App() {
  const [mode, setMode] = useState<Mode>('dynamic');
+ const [sections, setSections] = useState<string[]>([]);
 
  return (
  <ScrollingProvider>
- <Menu>{mode === 'static' ? <StaticMenu /> : <DynamicMenu />}</Menu>
+ <Menu>
+ {mode === 'static' ? (
+ <StaticMenu />
+ ) : (
+ <DynamicMenu
+ onAdd={() =>
+ setSections((prev) => [...prev, `Section ${sections.length + 1}`])
+ }
+ />
+ )}
+ </Menu>
 
  <Section id="home">
  <SectionContainer>
@@ -22,29 +34,47 @@ function App() {
  </Section>
 
  <Section id="about">
- <SectionContainer background="accent2">
+ <SectionContainer background={randomColor({ seed: 'about' })}>
  <span role="img" aria-label="hands up">
  🙋‍♂️
  </span>
  </SectionContainer>
  </Section>
 
  <Section id="projects">
- <SectionContainer background="accent3">
+ <SectionContainer background={randomColor({ seed: 'projects' })}>
  <span role="img" aria-label="computer">
  💻
  </span>
  </SectionContainer>
  </Section>
 
  <Section id="contact">
- <SectionContainer>
+ <SectionContainer background={randomColor({ seed: 'contact' })}>
  <span role="img" aria-label="letter">
  💌
  </span>
  </SectionContainer>
  </Section>
 
+ {sections.map((name) => (
+ <Section key={name} id={name}>
+ <SectionContainer background={randomColor({ seed: name })}>
+ <span>
+ {name}{' '}
+ <sup
+ aria-label="Remove section"
+ onClick={() =>
+ setSections((prev) => prev.filter((id) => id !== name))
+ }
+ >
+ x
+ </sup>
+ </span>
+ </SectionContainer>
+ </Section>
+ ))}
+
  <Footer>
  <ModeToggle mode={mode} onChange={setMode} />
  <a href="https://www.netlify.com">

diff --git a/packages/demo/src/Builders.tsx b/packages/demo/src/Builders.tsx
@@ -27,7 +27,7 @@ export const Item = styled.li<{ selected: boolean }>`
 `;
 
 export const SectionContainer = styled.section<{
- background?: keyof DefaultTheme;
+ background?: string;
 }>`
  min-height: 100vh;
  min-width: 320px;
@@ -39,15 +39,20 @@ export const SectionContainer = styled.section<{
  text-align: center;
  scroll-behavior: smooth;
  position: 'relative';
- background: ${(props) => props.theme[props.background || 'background']};
+ background: ${(props) => props.background || props.theme.background};
 
  & h1 {
  font-size: 2em;
  }
 
- & span[role='img'] {
+ & span {
  font-size: 4em;
  }
+
+ & sup {
+ font-size: 0.5em;
+ cursor: pointer;
+ }
 `;
 
 export const Footer = styled.div`

diff --git a/packages/demo/src/Menu.tsx b/packages/demo/src/Menu.tsx
@@ -1,7 +1,11 @@
 import { Item } from './Builders';
 import { useScrollSection, useScrollSections } from 'react-scroll-section';
 
-export const DynamicMenu = () => {
+type Props = {
+ onAdd: () => void;
+};
+
+export const DynamicMenu = ({ onAdd }: Props) => {
  const sections = useScrollSections();
 
  return (
@@ -11,6 +15,9 @@ export const DynamicMenu = () => {
  {id.toUpperCase()}
  </Item>
  ))}
+ <Item selected={false} onClick={onAdd} aria-label="Add section">
+ +
+ </Item>
  </>
  );
 };

diff --git a/yarn.lock b/yarn.lock
@@ -539,6 +539,11 @@
  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
+"@types/randomcolor@^0.5.6":
+ version "0.5.6"
+ resolved "https://registry.yarnpkg.com/@types/randomcolor/-/randomcolor-0.5.6.tgz#c1085077c4ae0f6af60e0ad229d14721b9b3b58c"
+ integrity sha512-lKkW8DGUQpZldTrwa+HM5rY+7eTyaHOMTsnj9ewt7AAwXuMPwBmkLlfh8+SXdgOhBW9iNI4x4zRjQ/TQZkdycQ==
+
 "@types/[email protected]":
  version "18.0.6"
  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.6.tgz#36652900024842b74607a17786b6662dd1e103a1"
@@ -2237,6 +2242,11 @@ queue-microtask@^1.2.2:
  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+randomcolor@^0.6.2:
+ version "0.6.2"
+ resolved "https://registry.yarnpkg.com/randomcolor/-/randomcolor-0.6.2.tgz#7a57362ae1a1278439aeed2c15e5deb8ea33f56d"
+ integrity sha512-Mn6TbyYpFgwFuQ8KJKqf3bqqY9O1y37/0jgSK/61PUxV4QfIMv0+K2ioq8DfOjkBslcjwSzRfIDEXfzA9aCx7A==
+
 [email protected]:
  version "17.0.2"
  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"