mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
Update examples, update README documentation (#772)
* chore(examples): update example set-ups * chore: update readme docs
This commit is contained in:
Eric
GitHub
parent
d24c60856f
commit
0315a17d4a
97 changed files with 6778 additions and 15821 deletions
4
examples/webpack/.gitignore
vendored
4
examples/webpack/.gitignore
vendored
|
|
@ -1,5 +1,3 @@
|
|||
.DS_Store
|
||||
/build
|
||||
/node_modules
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
public
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
# webpack
|
||||
|
||||
> Example set-up using [webpack](https://github.com/webpack/webpack).
|
||||
|
||||
## Getting started
|
||||
|
||||
Scaffold a new project using [degit](https://github.com/Rich-Harris/degit):
|
||||
|
||||
```sh
|
||||
npx degit ibm/carbon-components-svelte#webpack svelte-app
|
||||
cd svelte-app
|
||||
yarn install
|
||||
```
|
||||
|
||||
## Available scripts
|
||||
|
||||
### `yarn dev`
|
||||
|
||||
Starts the app in development mode.
|
||||
|
||||
### `yarn build`
|
||||
|
||||
Builds the app for production.
|
||||
|
|
@ -1,22 +1,20 @@
|
|||
{
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "webpack-dev-server",
|
||||
"build": "NODE_ENV=production webpack"
|
||||
"dev": "webpack serve",
|
||||
"build": "rm -rf public && NODE_ENV=production webpack"
|
||||
},
|
||||
"devDependencies": {
|
||||
"carbon-components-svelte": "^0.12.0",
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"copy-webpack-plugin": "^6.1.0",
|
||||
"css-loader": "^4.2.2",
|
||||
"html-webpack-plugin": "^4.4.1",
|
||||
"mini-css-extract-plugin": "~0.9.0",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.4",
|
||||
"svelte": "^3.24.1",
|
||||
"svelte-loader": "^2.13.6",
|
||||
"webpack": "^4.44.1",
|
||||
"webpack-cli": "^3.3.12",
|
||||
"webpack-dev-server": "^3.11.0"
|
||||
"carbon-components-svelte": "^0.41.0",
|
||||
"carbon-preprocess-svelte": "^0.6.0",
|
||||
"css-loader": "^6.2.0",
|
||||
"esbuild-loader": "^2.11.0",
|
||||
"html-webpack-plugin": "5.3.1",
|
||||
"mini-css-extract-plugin": "^2.1.0",
|
||||
"svelte": "^3.35.0",
|
||||
"svelte-loader": "^3.0.0",
|
||||
"webpack": "^5.28.0",
|
||||
"webpack-cli": "^4.6.0",
|
||||
"webpack-dev-server": "^3.11.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB |
|
|
@ -1,15 +0,0 @@
|
|||
<!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>webpack</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,93 +1,6 @@
|
|||
<script>
|
||||
import {
|
||||
Content,
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
Grid,
|
||||
Row,
|
||||
Column,
|
||||
Tabs,
|
||||
TabContent,
|
||||
Tab,
|
||||
Select,
|
||||
SelectItem,
|
||||
} from "carbon-components-svelte";
|
||||
import Header from "./components/Header.svelte";
|
||||
import Theme from "./components/Theme.svelte";
|
||||
|
||||
let theme = "g10";
|
||||
import "carbon-components-svelte/css/white.css";
|
||||
import { Button } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<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 & 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>
|
||||
<Button>Primary button</Button>
|
||||
|
|
|
|||
|
|
@ -1,35 +0,0 @@
|
|||
<script>
|
||||
import {
|
||||
SkipToContent,
|
||||
Header,
|
||||
HeaderUtilities,
|
||||
HeaderGlobalAction,
|
||||
} from "carbon-components-svelte";
|
||||
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>
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
<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 />
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
import "carbon-components-svelte/css/all.css";
|
||||
import App from "./App.svelte";
|
||||
|
||||
const app = new App({ target: document.body });
|
||||
|
|
|
|||
|
|
@ -1,52 +1,73 @@
|
|||
const webpack = require("webpack");
|
||||
const path = require("path");
|
||||
const CopyPlugin = require("copy-webpack-plugin");
|
||||
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
|
||||
const { ESBuildMinifyPlugin } = require("esbuild-loader");
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
|
||||
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
||||
const path = require("path");
|
||||
const { optimizeImports } = require("carbon-preprocess-svelte");
|
||||
|
||||
const NODE_ENV = process.env.NODE_ENV || "development";
|
||||
const PROD = NODE_ENV === "production";
|
||||
|
||||
module.exports = {
|
||||
stats: "errors-only",
|
||||
mode: NODE_ENV,
|
||||
devtool: PROD ? false : "cheap-eval-source-map",
|
||||
devServer: { historyApiFallback: true },
|
||||
entry: { bundle: ["./src/index.js"] },
|
||||
entry: { "build/bundle": ["./src/index.js"] },
|
||||
resolve: {
|
||||
alias: { svelte: path.resolve("node_modules", "svelte") },
|
||||
alias: { svelte: path.dirname(require.resolve("svelte/package.json")) },
|
||||
extensions: [".mjs", ".js", ".svelte"],
|
||||
mainFields: ["svelte", "browser", "module", "main"],
|
||||
},
|
||||
output: { path: `${__dirname}/build`, filename: "[name].[chunkhash].js" },
|
||||
output: {
|
||||
publicPath: "/",
|
||||
path: path.join(__dirname, "/public"),
|
||||
filename: PROD ? "[name].[contenthash].js" : "[name].js",
|
||||
chunkFilename: "[name].[id].js",
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(svelte)$/,
|
||||
test: /\.svelte$/,
|
||||
use: {
|
||||
loader: "svelte-loader",
|
||||
options: { emitCss: true, hotReload: true },
|
||||
options: {
|
||||
preprocess: [optimizeImports()],
|
||||
hotReload: !PROD,
|
||||
compilerOptions: { dev: !PROD },
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
sideEffects: true,
|
||||
use: [
|
||||
{ loader: MiniCssExtractPlugin.loader, options: { hmr: !PROD } },
|
||||
"css-loader",
|
||||
],
|
||||
use: [MiniCssExtractPlugin.loader, "css-loader"],
|
||||
},
|
||||
{
|
||||
test: /node_modules\/svelte\/.*\.mjs$/,
|
||||
resolve: { fullySpecified: false },
|
||||
},
|
||||
],
|
||||
},
|
||||
mode: NODE_ENV,
|
||||
plugins: [
|
||||
new CleanWebpackPlugin(),
|
||||
new CopyPlugin({ patterns: [{ from: "public" }] }),
|
||||
new MiniCssExtractPlugin({
|
||||
filename: PROD ? "[name].[chunkhash].css" : "[name].css",
|
||||
}),
|
||||
new OptimizeCssAssetsPlugin({}),
|
||||
new HtmlWebpackPlugin({ template: "public/index.html" }),
|
||||
new HtmlWebpackPlugin({
|
||||
templateContent: `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
`,
|
||||
}),
|
||||
],
|
||||
stats: "errors-only",
|
||||
devtool: PROD ? false : "source-map",
|
||||
devServer: { hot: true, historyApiFallback: true },
|
||||
optimization: {
|
||||
minimizer: [new ESBuildMinifyPlugin({ target: "es2015" })],
|
||||
},
|
||||
};
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue