mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore(examples): add svite example set-up

Browse source
This commit is contained in:
Eric Liu 2020-09-07 14:10:24 -07:00
commit a4aa2d9c77
11 changed files with 2927 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

2
examples/svite/.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
/dist
/node_modules

23
examples/svite/README.md Normal file
View file

@ -0,0 +1,23 @@
# svite
> Example set-up using [svite](https://github.com/dominikg/svite).
## Getting started
Use [degit](https://github.com/Rich-Harris/degit) to quickly scaffold a new project:
```sh
npx degit ibm/carbon-components-svelte/examples/svite carbon-svite
cd carbon-svite
yarn install
```
## Available scripts
### `yarn dev`
Runs the app in development mode.
### `yarn build`
Builds the app for production.

16
examples/svite/index.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>svite</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script type="module" src="/src/index.js"></script>
</body>
</html>

15
examples/svite/package.json Normal file
View file

@ -0,0 +1,15 @@
{
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "svite",
"build": "svite build"
},
"devDependencies": {
"carbon-components-svelte": "^0.11.0",
"svelte": "^3.24.1",
"svelte-hmr": "^0.10.2",
"svelte-preprocess": "^4.2.1",
"svite": "^0.6.0"
}
}

BIN
examples/svite/public/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.3 KiB

91
examples/svite/src/App.svelte Normal file
View file

@ -0,0 +1,91 @@
<script>
import { Content } from "carbon-components-svelte/src/UIShell";
import {
Breadcrumb,
BreadcrumbItem,
} from "carbon-components-svelte/src/Breadcrumb";
import { Grid, Row, Column } from "carbon-components-svelte/src/Grid";
import { Tabs, TabContent, Tab } from "carbon-components-svelte/src/Tabs";
import { Select, SelectItem } from "carbon-components-svelte/src/Select";
import Header from "./components/Header.svelte";
import Theme from "./components/Theme.svelte";
let theme = "g10";
</script>
<style global>
@import "carbon-components-svelte/css/all";
</style>
<Theme persist bind:theme>
<Header />
<Content style="background: none; padding: 1rem">
<Grid>
<Row>
<Column lg="{16}">
<Breadcrumb noTrailingSlash aria-label="Page navigation">
<BreadcrumbItem href="/">Getting started</BreadcrumbItem>
</Breadcrumb>
<h1 style="margin-bottom: 1.5rem">Design &amp; build with Carbon</h1>
</Column>
</Row>
<Row>
<Column noGutter>
<Tabs aria-label="Tab navigation">
<Tab label="About" />
<Tab label="Design" />
<Tab label="Develop" />
<div slot="content" class="tabbed-content">
<Grid as fullWidth let:props>
<TabContent {...props}>
<Row>
<Column md="{4}" lg="{7}">
<Select
labelText="Carbon theme"
bind:selected="{theme}"
style="margin-bottom: 1rem">
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
<p>
Carbon is IBM’s open-source design system for digital
products and experiences. With the IBM Design Language
as its foundation, the system consists of working code,
design tools and resources, human interface guidelines,
and a vibrant community of contributors.
</p>
</Column>
</Row>
</TabContent>
<TabContent {...props}>
<Row>
<Column md="{4}" lg="{7}">
<p>
Rapidly build beautiful and accessible experiences. The
Carbon kit contains all resources you need to get
started.
</p>
</Column>
</Row>
</TabContent>
<TabContent {...props}>
<Row>
<Column md="{4}" lg="{7}">
<p>
Carbon provides styles and components in Vanilla, React,
Angular, Vue and Svelte for anyone building on the web.
</p>
</Column>
</Row>
</TabContent>
</Grid>
</div>
</Tabs>
</Column>
</Row>
</Grid>
</Content>
</Theme>

35
examples/svite/src/components/Header.svelte Normal file
View file

@ -0,0 +1,35 @@
<script>
import {
SkipToContent,
Header,
HeaderUtilities,
HeaderGlobalAction,
} from "carbon-components-svelte/src/UIShell";
import Notification20 from "carbon-icons-svelte/lib/Notification20";
import UserAvatar20 from "carbon-icons-svelte/lib/UserAvatar20";
import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
import { getContext } from "svelte";
const ctx = getContext("Theme");
$: if (ctx) {
ctx.dark.subscribe((value) => {
console.log("dark mode?", value);
});
ctx.light.subscribe((value) => {
console.log("light mode?", value);
});
ctx.updateVar("--cds-productive-heading-06-font-size", "4rem");
}
</script>
<Header company="IBM" platformName="Carbon Components Svelte" href="/">
<div slot="skip-to-content">
<SkipToContent />
</div>
<HeaderUtilities>
<HeaderGlobalAction aria-label="Notifications" icon="{Notification20}" />
<HeaderGlobalAction aria-label="User Avatar" icon="{UserAvatar20}" />
<HeaderGlobalAction aria-label="App Switcher" icon="{AppSwitcher20}" />
</HeaderUtilities>
</Header>

55
examples/svite/src/components/Theme.svelte Normal file
View file

@ -0,0 +1,55 @@
<script>
export let persist = false;
export let persistKey = "theme";
export let theme = "white";
export const themes = ["white", "g10", "g90", "g100"];
import { onMount, afterUpdate, setContext } from "svelte";
import { writable, derived } from "svelte/store";
const isValidTheme = (value) => themes.includes(value);
const isDark = (value) =>
isValidTheme(value) && (value === "g90" || value === "g100");
const dark = writable(isDark(theme));
const light = derived(dark, (_) => !_);
setContext("Theme", {
updateVar: (name, value) => {
document.documentElement.style.setProperty(name, value);
},
dark,
light,
});
onMount(() => {
try {
const persisted_theme = localStorage.getItem(persistKey);
if (isValidTheme(persisted_theme)) {
theme = persisted_theme;
}
} catch (error) {
console.error(error);
}
});
afterUpdate(() => {
if (isValidTheme(theme)) {
document.documentElement.setAttribute("theme", theme);
if (persist) {
localStorage.setItem(persistKey, theme);
}
} else {
console.warn(
`"${theme}" is not a valid Carbon theme. Choose from available themes: ${JSON.stringify(
themes
)}`
);
}
});
$: dark.set(isDark(theme));
</script>
<slot />

5
examples/svite/src/index.js Normal file
View file

@ -0,0 +1,5 @@
import App from "./App.svelte";
const app = new App({ target: document.body });
export default app;

1
examples/svite/svelte.config.js Normal file
View file

@ -0,0 +1 @@
module.exports = { preprocess: [require("svelte-preprocess")()] };

2684
examples/svite/yarn.lock Normal file
View file

File diff suppressed because it is too large Load diff