Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: Theme Swap via Buttons #1

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
+82 −26
Open

Feat: Theme Swap via Buttons #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
135db4e
Added buttons to swap style themeing.
Zizzs Mar 20, 2023
723d8b6
Moved theme swap to use dynamic imports.
Zizzs Mar 21, 2023
70df674
Remove uneeded imports from App.scss.
Zizzs Mar 21, 2023
2330478
Merge branch 'main' into theme-swap
Zizzs Mar 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"sass": "^1.58.1",
"typescript": "^4.9.3",
"vite": "^4.1.0",
"vite-plugin-dynamic-import": "^1.2.7",
"vite-plugin-svgr": "^2.4.0"
},
"eslintConfig": {
Expand Down
3 changes: 0 additions & 3 deletions src/App.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
@import './variables.scss';
@import '@assemble-inc/base-ui';
// @import '@assemble-inc/asm-ui';
// @import '@assemble-inc/apple-ui';
@import '@assemble-inc/core/dist/styles/react-datepicker.css';

body {
Expand Down
43 changes: 42 additions & 1 deletion src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,53 @@ import './App.scss';
import Core from './pages/Core';
import Blueprint from './pages/Blueprint';
import Hero from './Hero';
import { useEffect, useState } from 'react';

function App() {
const [stylePath, setStylePath] = useState("base");

const handleButtonClick = (style: string) => {
setStylePath(style);
}

const cleanStyles = (currentStyle: string) => {
const currentStyleSheets = document.styleSheets;

if (currentStyleSheets) {
for (let i = 0; i <= currentStyleSheets.length; i++) {
if (currentStyleSheets[i]) {
if (!currentStyleSheets[i].href?.includes(currentStyle) && !currentStyleSheets[i].href?.includes('index')) {
currentStyleSheets[i].disabled = true;
} else {
currentStyleSheets[i].disabled = false;
}
}
}
}
}

useEffect(() => {

if (stylePath === 'base') {
import(`./styles/base-ui.scss`);
}

if (stylePath === 'apple') {
import(`./styles/apple-ui.scss`);
}

if (stylePath === 'asm') {
import(`./styles/asm-ui.scss`);
}

cleanStyles(stylePath);

}, [stylePath]);

return (
<div className="App">
<BrowserRouter>
<Header />
<Header changeStyles={handleButtonClick} />
<Hero />
<Routes>
<Route path="/" Component={Core} />
Expand Down
9 changes: 8 additions & 1 deletion src/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import ThemeSwitcher from './ThemeSwitcher';
import { Link, useLocation } from 'react-router-dom';
import { Button } from '@assemble-inc/core';

const Header = () => {
type HeaderProps = {
changeStyles: (style: string) => void;
}
const Header = ({ changeStyles }: HeaderProps) => {
const { pathname } = useLocation();

return (
Expand All @@ -16,6 +20,9 @@ const Header = () => {
</li>
</ul>
</nav>
<Button onClick={() => changeStyles('base')}>Base Styles</Button>
<Button onClick={() => changeStyles('asm')}>Assemble Styles</Button>
<Button onClick={() => changeStyles('apple')}>Apple Styles</Button>
<ThemeSwitcher disabled={pathname === '/blueprint'} />
</header>
);
Expand Down
40 changes: 20 additions & 20 deletions src/pages/Core.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,49 +208,49 @@ const Core = () => {
<Input
id="text"
value=""
onChange={() => {}}
onChange={() => { }}
type="text"
label="Text Input"
style={{ marginBottom: '20px' }}
/>
<Input id="url" value="" type="url" onChange={() => {}} label="Url Input" style={{ marginBottom: '20px' }} />
<Input id="url" value="" type="url" onChange={() => { }} label="Url Input" style={{ marginBottom: '20px' }} />
<Input
id="time"
value=""
onChange={() => {}}
onChange={() => { }}
type="time"
label="Time Input"
style={{ marginBottom: '20px' }}
/>
<Input
id="tel"
value=""
onChange={() => {}}
onChange={() => { }}
type="tel"
label="Telephone Input"
style={{ marginBottom: '20px' }}
/>
<Input
id="search"
value=""
onChange={() => {}}
onChange={() => { }}
type="search"
label="Search Input"
style={{ marginBottom: '20px' }}
/>
<SearchInput id="search2" onChange={() => {}} label="Search" style={{ marginBottom: '20px' }} value="" />
<SearchInput id="search2" onChange={() => { }} label="Search" style={{ marginBottom: '20px' }} value="" />
<Input
id="range"
value=""
onChange={() => {}}
onChange={() => { }}
type="range"
label="Range Input"
style={{ marginBottom: '20px' }}
/>
<Input
id="password"
value=""
onChange={() => {}}
onChange={() => { }}
type="password"
label="Password Input"
style={{ marginBottom: '20px' }}
Expand All @@ -259,55 +259,55 @@ const Core = () => {
<div>
<Input
id="num"
onChange={() => {}}
onChange={() => { }}
value=""
type="number"
label="Number Input"
style={{ marginBottom: '20px' }}
/>
<Input
id="email"
onChange={() => {}}
onChange={() => { }}
value=""
type="email"
label="Email Input"
style={{ marginBottom: '20px' }}
/>
<Input
id="month"
onChange={() => {}}
onChange={() => { }}
value=""
type="month"
label="Month Input"
style={{ marginBottom: '20px' }}
/>
<Input
id="week"
onChange={() => {}}
onChange={() => { }}
value=""
type="week"
label="Week Input"
style={{ marginBottom: '20px' }}
/>
<Input
id="date"
onChange={() => {}}
onChange={() => { }}
value=""
type="date"
label="Date Input"
style={{ marginBottom: '20px' }}
/>
<Input
id="datetime"
onChange={() => {}}
onChange={() => { }}
value=""
type="datetime-local"
label="Date Time Input"
style={{ marginBottom: '20px' }}
/>
<Input
id="color"
onChange={() => {}}
onChange={() => { }}
value=""
type="color"
label="Color Input"
Expand Down Expand Up @@ -353,7 +353,7 @@ const Core = () => {
<div>
<FormattedNumberInput
id="formnum"
onChange={() => {}}
onChange={() => { }}
label="Formatted Number Input"
initialValue=""
style={{ marginBottom: '20px' }}
Expand All @@ -376,21 +376,21 @@ const Core = () => {
<PhoneNumberInput
id="phone"
value=""
onChange={() => {}}
onChange={() => { }}
label="Phone Number Input"
style={{ marginBottom: '20px' }}
/>
<RadioButton
id=""
checked
value=""
onChange={() => {}}
onChange={() => { }}
label="Radio Button Input"
style={{ marginBottom: '20px' }}
/>
<RadioButtonGroup
id="radio-group"
onChange={() => {}}
onChange={() => { }}
selectedRadio=""
options={[
{ id: 'string', value: 'string', label: 'Radio!' },
Expand Down Expand Up @@ -489,7 +489,7 @@ const Core = () => {
<Alert
style={{ marginBottom: '1rem' }}
alert={{ type: 'warning', active: true, message: "I'm that alert named Luda, ALERT ALERT." }}
handleClose={() => {}}
handleClose={() => { }}
closeIcon={<CloseIcon />}
/>
<Alert
Expand Down
1 change: 1 addition & 0 deletions src/styles/apple-ui.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import '@assemble-inc/apple-ui';
1 change: 1 addition & 0 deletions src/styles/asm-ui.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import '@assemble-inc/asm-ui';
1 change: 1 addition & 0 deletions src/styles/base-ui.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import '@assemble-inc/base-ui';
9 changes: 8 additions & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2683,7 +2683,7 @@ fast-diff@^1.1.2:
resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==

fast-glob@^3.2.11, fast-glob@^3.2.9:
fast-glob@^3.2.11, fast-glob@^3.2.12, fast-glob@^3.2.9:
version "3.2.12"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
Expand Down Expand Up @@ -4228,6 +4228,13 @@ uuid@^9.0.0:
resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==

vite-plugin-dynamic-import@^1.2.7:
version "1.2.7"
resolved "https://registry.yarnpkg.com/vite-plugin-dynamic-import/-/vite-plugin-dynamic-import-1.2.7.tgz#d0bf7aef82edffe430fa0ecabc39f971784cff7b"
integrity sha512-n1fjBaYF8ByqORv7hpEaZQiQie8sNiWGU61DpYs+fgToGmzGIgThUI8BCnW3RICVK4gJC2sDNn7NK1RzTvRyEA==
dependencies:
fast-glob "^3.2.12"

vite-plugin-svgr@^2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/vite-plugin-svgr/-/vite-plugin-svgr-2.4.0.tgz#9b14953955e79893ea7718089b9777a494e38fc6"
Expand Down