mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 19:01:05 +00:00
chnages to sidenav
This commit is contained in:
Adan Ulloa
parent
6be928a2d3
commit
a77127000d
186 changed files with 10791 additions and 833 deletions
5
palimpsest/.gitignore
vendored
Normal file
5
palimpsest/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
/node_modules
|
||||
/build
|
||||
.DS_Store
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
41
palimpsest/README.md
Normal file
41
palimpsest/README.md
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
# palimpsest
|
||||
|
||||
> pa·limp·sest
|
||||
|
||||
> writing material used one or more times after earlier writing has been erased – Merriam-Webster
|
||||
|
||||
The purpose of this app is to document and illustrate real world consumption of `carbon-components-svelte`.
|
||||
|
||||
## Getting Started
|
||||
|
||||
This app uses a linked copy of `carbon-components-svelte` to expedite local development.
|
||||
|
||||
First, run the following commands at the root of `carbon-components-svelte/`:
|
||||
|
||||
```bash
|
||||
yarn build
|
||||
yarn link
|
||||
```
|
||||
|
||||
Next, link the library to this folder.
|
||||
|
||||
```bash
|
||||
cd palimpsest
|
||||
yarn link "carbon-components-svelte"
|
||||
```
|
||||
|
||||
Finally, install this app's dependencies.
|
||||
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
||||
## Available Scripts
|
||||
|
||||
### `yarn start`
|
||||
|
||||
Runs the app in development mode with livereload enabled. Visit [http://localhost:8080](http://localhost:8080).
|
||||
|
||||
### `yarn build`
|
||||
|
||||
Builds the app in production mode.
|
||||
40
palimpsest/package.json
Normal file
40
palimpsest/package.json
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
{
|
||||
"name": "palimpsest",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server",
|
||||
"build": "NODE_ENV=production webpack"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.7.7",
|
||||
"@babel/preset-env": "^7.7.7",
|
||||
"autoprefixer": "^9.7.3",
|
||||
"carbon-components": "^10.9.0",
|
||||
"carbon-components-svelte": "../",
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"clipboard-copy": "^3.1.0",
|
||||
"copy-webpack-plugin": "^5.0.5",
|
||||
"css-loader": "^3.2.0",
|
||||
"file-loader": "^5.0.2",
|
||||
"fuse.js": "^3.4.6",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"mini-css-extract-plugin": "^0.8.0",
|
||||
"node-sass": "^4.13.0",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.3",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"sass-loader": "^8.0.0",
|
||||
"style-loader": "^1.0.0",
|
||||
"svelte": "^3.12.1",
|
||||
"svelte-loader": "2.13.6",
|
||||
"svelte-spa-router": "^2.0.0",
|
||||
"webpack": "^4.41.2",
|
||||
"webpack-cli": "^3.3.10",
|
||||
"webpack-dev-server": "^3.9.0"
|
||||
},
|
||||
"babel": {
|
||||
"presets": [
|
||||
"@babel/preset-env"
|
||||
]
|
||||
}
|
||||
}
|
||||
BIN
palimpsest/public/favicon.png
Normal file
BIN
palimpsest/public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
10
palimpsest/public/index.html
Normal file
10
palimpsest/public/index.html
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
<link rel="icon" href="./favicon.png" />
|
||||
<title>Carbon Components Svelte</title>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
11
palimpsest/src/App.svelte
Normal file
11
palimpsest/src/App.svelte
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<script>
|
||||
import Router from 'svelte-spa-router';
|
||||
import Component from './components/Component';
|
||||
import Header from './components/Header.svelte';
|
||||
import Home from './components/Home.svelte';
|
||||
import SideNav from './components/SideNav.svelte';
|
||||
</script>
|
||||
|
||||
<Header />
|
||||
<SideNav />
|
||||
<Router routes={{ '/': Home, '/c': Component, '/c/*': Component }} />
|
||||
BIN
palimpsest/src/assets/logo.png
Normal file
BIN
palimpsest/src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
109
palimpsest/src/components/ButtonTile.svelte
Normal file
109
palimpsest/src/components/ButtonTile.svelte
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
<script>
|
||||
export let href = undefined;
|
||||
export let kind = 'launch';
|
||||
export let iconLeft = undefined;
|
||||
export let iconRight = Launch20;
|
||||
|
||||
import Launch20 from 'carbon-icons-svelte/lib/Launch20';
|
||||
import ArrowRight20 from 'carbon-icons-svelte/lib/ArrowRight20';
|
||||
|
||||
$: iconRight = kind === 'link' ? ArrowRight20 : Launch20;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.link {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
border-right: 1px solid transparent;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 671px) {
|
||||
.link {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.link:focus {
|
||||
outline: 2px solid var(--cds-focus, #0f62fe);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
fill: var(--cds-ui-05);
|
||||
}
|
||||
|
||||
.icon--left {
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.icon--right {
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.bg {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
right: 1px;
|
||||
bottom: 1px;
|
||||
width: calc(100% - 1px);
|
||||
height: calc(100% - 1px);
|
||||
transition: 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
||||
background-color: var(--cds-ui-01);
|
||||
}
|
||||
|
||||
.button-tile:hover .bg {
|
||||
background-color: var(--cds-ui-03);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="button-tile bx--aspect-ratio bx--aspect-ratio--2x1">
|
||||
<div class="bx--aspect-ratio--object">
|
||||
{#if href}
|
||||
<a
|
||||
class="link"
|
||||
on:click
|
||||
target={kind === 'launch' ? '_blank' : undefined}
|
||||
rel={kind === 'launch' ? 'noopener noreferrer' : undefined}
|
||||
{href}>
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
{#if iconLeft}
|
||||
<div class="icon icon--left">
|
||||
<svelte:component this={iconLeft} />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="icon icon--right">
|
||||
<svelte:component this={iconRight} />
|
||||
</div>
|
||||
</a>
|
||||
{:else}
|
||||
<div role="button" tabindex="0" class="link" on:click {href}>
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
{#if iconLeft}
|
||||
<div class="icon icon--left">
|
||||
<svelte:component this={iconLeft} />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="icon icon--right">
|
||||
<svelte:component this={iconRight} />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="bg" />
|
||||
</div>
|
||||
</div>
|
||||
111
palimpsest/src/components/Component/Component.svelte
Normal file
111
palimpsest/src/components/Component/Component.svelte
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
<script context="module">
|
||||
import Accordion from '../carbon-components/Accordion';
|
||||
import CodeSnippet from '../carbon-components/CodeSnippet';
|
||||
|
||||
export const components = {
|
||||
Accordion,
|
||||
CodeSnippet
|
||||
};
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { afterUpdate, setContext } from 'svelte';
|
||||
import { Tabs, Tab } from 'carbon-components-svelte';
|
||||
import { push, location } from 'svelte-spa-router';
|
||||
import Router from 'svelte-spa-router';
|
||||
import ComponentTab from './ComponentTab.svelte';
|
||||
|
||||
const prefix = '/c';
|
||||
const urls = [{ path: '' }, { path: '/API' }, { path: '/kitchen-sink' }];
|
||||
|
||||
let selected = 0;
|
||||
let component = undefined;
|
||||
let prevComponent = undefined;
|
||||
|
||||
setContext('Component', {
|
||||
set: name => {
|
||||
component = name;
|
||||
}
|
||||
});
|
||||
|
||||
afterUpdate(() => {
|
||||
if (component !== prevComponent && prevComponent !== undefined) {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
prevComponent = component;
|
||||
});
|
||||
|
||||
$: baseUrl = component ? `#${prefix}/${component}` : $location;
|
||||
$: {
|
||||
switch (
|
||||
$location
|
||||
.split('/')
|
||||
.pop()
|
||||
.toLowerCase()
|
||||
) {
|
||||
case 'api':
|
||||
selected = 1;
|
||||
break;
|
||||
case 'kitchen-sink':
|
||||
selected = 2;
|
||||
break;
|
||||
default:
|
||||
selected = 0;
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
main {
|
||||
margin-top: 5rem;
|
||||
padding-left: 12rem;
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
main {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.bx--grid {
|
||||
max-width: 66rem;
|
||||
}
|
||||
|
||||
:global(body) {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
</style>
|
||||
|
||||
<main>
|
||||
<div class="bx--grid">
|
||||
<header class="bx--row">
|
||||
<div class="bx--col">
|
||||
<h1>{component}</h1>
|
||||
</div>
|
||||
</header>
|
||||
<div class="bx--row">
|
||||
<div class="bx--col bx--no-gutter">
|
||||
<Tabs
|
||||
type="container"
|
||||
bind:selected
|
||||
on:change={({ detail }) => {
|
||||
push(`${prefix}/${component}${urls[detail].path}`);
|
||||
}}>
|
||||
<Tab label="Preview" href={baseUrl} />
|
||||
<Tab label="API" href={`${baseUrl}/API`} />
|
||||
<!-- <Tab disabled label="Kitchen Sink" href={`${baseUrl}/kitchen-sink`} /> -->
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="bx--grid">
|
||||
<Router {prefix} routes={{ '/:name': ComponentTab, '/:name/:tab': ComponentTab }} />
|
||||
</section>
|
||||
</main>
|
||||
96
palimpsest/src/components/Component/ComponentAPI.svelte
Normal file
96
palimpsest/src/components/Component/ComponentAPI.svelte
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<script>
|
||||
export let props = [];
|
||||
|
||||
import {
|
||||
StructuredList,
|
||||
StructuredListBody,
|
||||
StructuredListHead,
|
||||
StructuredListRow,
|
||||
StructuredListCell,
|
||||
Tag,
|
||||
CodeSnippet
|
||||
} from 'carbon-components-svelte';
|
||||
import copy from 'clipboard-copy';
|
||||
|
||||
const propTypeColor = {
|
||||
string: 'green',
|
||||
number: 'blue',
|
||||
boolean: 'purple'
|
||||
};
|
||||
|
||||
function formatValue(value) {
|
||||
return typeof value === 'string' ? `"${value}"` : value;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bx--row {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.values {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
:global(.value) {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
:global(.value:not(:first-of-type)) {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.separator {
|
||||
color: var(--cds-text-03);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="bx--row">
|
||||
<StructuredList>
|
||||
<StructuredListHead>
|
||||
<StructuredListRow head>
|
||||
<StructuredListCell head>Prop</StructuredListCell>
|
||||
<StructuredListCell head>Type</StructuredListCell>
|
||||
<StructuredListCell head>Value</StructuredListCell>
|
||||
<StructuredListCell head>Description</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListHead>
|
||||
<StructuredListBody>
|
||||
{#each props as prop, i (prop.name)}
|
||||
<StructuredListRow>
|
||||
<StructuredListCell noWrap>{prop.name}</StructuredListCell>
|
||||
<StructuredListCell noWrap>
|
||||
<Tag type={propTypeColor[prop.type]}>
|
||||
<code>{prop.type}</code>
|
||||
</Tag>
|
||||
</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
<div class="values">
|
||||
{#each prop.value as value, j (value)}
|
||||
<CodeSnippet
|
||||
class="value"
|
||||
type="inline"
|
||||
code={formatValue(value)}
|
||||
on:click={() => {
|
||||
copy(formatValue(value));
|
||||
}} />
|
||||
{#if j < prop.value.length - 1}
|
||||
<span class="separator">|</span>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{#if prop.defaultValue}
|
||||
<div style="margin-top: .75rem">
|
||||
<strong>Default:</strong>
|
||||
<code>{formatValue(prop.defaultValue.value)}</code>
|
||||
</div>
|
||||
{/if}
|
||||
</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
{@html prop.description}
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
{/each}
|
||||
</StructuredListBody>
|
||||
</StructuredList>
|
||||
</div>
|
||||
110
palimpsest/src/components/Component/ComponentPreview.svelte
Normal file
110
palimpsest/src/components/Component/ComponentPreview.svelte
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
<script>
|
||||
export let minHeight = '11.5rem';
|
||||
export let light = false;
|
||||
export let code = '';
|
||||
|
||||
import copy from 'clipboard-copy';
|
||||
import { CodeSnippet } from 'carbon-components-svelte';
|
||||
import { theme } from '../../store';
|
||||
|
||||
$: code = code.trim().replace(/< \//g, '</');
|
||||
$: light = light && ['white', 'g10'].includes($theme);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.preview {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
|
||||
.preview.light {
|
||||
background-color: var(--cds-ui-01);
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.grid--row {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.grid--col:not(:last-of-type) {
|
||||
border-right: 1px dashed var(--cds-ui-03);
|
||||
}
|
||||
|
||||
.grid--col.light {
|
||||
background-color: var(--cds-ui-01);
|
||||
}
|
||||
|
||||
.grid--col--outer {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.grid--col--inner {
|
||||
flex: 1;
|
||||
background-color: var(--cds-ui-background);
|
||||
}
|
||||
|
||||
.grid--col--inner {
|
||||
border-left: 1px dashed var(--cds-ui-03);
|
||||
border-right: 1px dashed var(--cds-ui-03);
|
||||
}
|
||||
|
||||
.grid--col--inner.light {
|
||||
background-color: var(--cds-ui-01);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: inline-flex;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
min-height: 9rem;
|
||||
padding: 2rem 0 2rem 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="preview bx--row" class:light>
|
||||
<div class="grid">
|
||||
<div class="grid--row">
|
||||
{#each Array.from({ length: 8 }, (_, i) => i) as item, i (item)}
|
||||
<div class="grid--col bx--col" class:light>
|
||||
<div class="grid--col--outer">
|
||||
<div class="grid--col--inner" class:light />
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bx--col bx--no-gutter--left">
|
||||
<div class="wrapper" style={`min-height: ${minHeight}`}>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bx--row">
|
||||
<div class="bx--col-lg-4">
|
||||
<h3>Props</h3>
|
||||
<slot name="props" />
|
||||
</div>
|
||||
<div class="bx--col">
|
||||
<h3>Code</h3>
|
||||
<CodeSnippet type="multi" on:click={() => copy(code)} {code} />
|
||||
<slot name="code" />
|
||||
</div>
|
||||
</div>
|
||||
23
palimpsest/src/components/Component/ComponentTab.svelte
Normal file
23
palimpsest/src/components/Component/ComponentTab.svelte
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<script>
|
||||
export let params = {};
|
||||
|
||||
import { getContext } from 'svelte';
|
||||
import { components } from './Component.svelte';
|
||||
|
||||
const { set } = getContext('Component');
|
||||
|
||||
const paramMap = {
|
||||
Preview: 'Preview',
|
||||
API: 'API',
|
||||
'kitchen-sink': 'KitchenSink'
|
||||
};
|
||||
|
||||
$: tabName = params.tab || 'Preview';
|
||||
$: tab = paramMap[tabName];
|
||||
$: {
|
||||
set(params.name);
|
||||
document.title = `${params.name} · ${tabName}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:component this={components[params.name][tab]} />
|
||||
5
palimpsest/src/components/Component/index.js
Normal file
5
palimpsest/src/components/Component/index.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import Component from './Component.svelte';
|
||||
|
||||
export default Component;
|
||||
export { default as ComponentPreview } from './ComponentPreview.svelte';
|
||||
export { default as ComponentAPI } from './ComponentAPI.svelte';
|
||||
142
palimpsest/src/components/Header.svelte
Normal file
142
palimpsest/src/components/Header.svelte
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
<script>
|
||||
import { link } from 'svelte-spa-router';
|
||||
import { Icon } from 'carbon-components-svelte';
|
||||
import AppSwitcher20 from 'carbon-icons-svelte/lib/AppSwitcher20';
|
||||
import Menu20 from 'carbon-icons-svelte/lib/Menu20';
|
||||
import Close20 from 'carbon-icons-svelte/lib/Close20';
|
||||
import ThemePicker from '../components/ThemePicker.svelte';
|
||||
import { sideNavToggled, appSwitcherToggled } from '../store';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
padding: 0 1rem;
|
||||
background-color: var(--cds-ui-01);
|
||||
border-bottom: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
|
||||
.app-switcher {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
top: 2.5rem;
|
||||
right: 0;
|
||||
width: 16rem;
|
||||
height: calc(100% - 2.5rem);
|
||||
padding: 1rem;
|
||||
background-color: var(--cds-ui-01);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.app-switcher {
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.app-switcher.toggled {
|
||||
transform: translateX(0);
|
||||
transition: transform 110ms cubic-bezier(0.2, 0, 1, 0.9);
|
||||
will-change: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
margin-left: -1rem;
|
||||
margin-right: 0.5rem;
|
||||
background: none;
|
||||
border: 0;
|
||||
fill: var(--cds-ui-05);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu--right {
|
||||
margin-left: auto;
|
||||
margin-right: -1rem;
|
||||
}
|
||||
|
||||
.menu:focus {
|
||||
outline: 2px solid var(--cds-focus, #0f62fe);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bx--link {
|
||||
font-size: 1rem;
|
||||
color: var(--cds-text-01);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bx--link:hover {
|
||||
color: var(--cds-text-01);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.menu {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.theme {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<header>
|
||||
<nav>
|
||||
<button
|
||||
class="menu"
|
||||
on:click={() => {
|
||||
sideNavToggled.set(!$sideNavToggled);
|
||||
appSwitcherToggled.set(false);
|
||||
}}>
|
||||
<Icon render={$sideNavToggled ? Close20 : Menu20} />
|
||||
</button>
|
||||
<a
|
||||
class="bx--link"
|
||||
href="/"
|
||||
use:link
|
||||
on:click={() => {
|
||||
if ($sideNavToggled || $appSwitcherToggled) {
|
||||
sideNavToggled.set(false);
|
||||
appSwitcherToggled.set(false);
|
||||
}
|
||||
window.scrollTo(0, 0);
|
||||
}}>
|
||||
Carbon Components
|
||||
<strong>Svelte</strong>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="theme">
|
||||
<ThemePicker inline />
|
||||
</div>
|
||||
<button
|
||||
class="menu menu--right"
|
||||
on:click={() => {
|
||||
appSwitcherToggled.set(!$appSwitcherToggled);
|
||||
sideNavToggled.set(false);
|
||||
}}>
|
||||
<Icon render={$appSwitcherToggled ? Close20 : AppSwitcher20} />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="app-switcher" class:toggled={$appSwitcherToggled}>
|
||||
<ThemePicker />
|
||||
</div>
|
||||
92
palimpsest/src/components/Home.svelte
Normal file
92
palimpsest/src/components/Home.svelte
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<script>
|
||||
import LogoGithub32 from 'carbon-icons-svelte/lib/LogoGithub32';
|
||||
import Logo from '../assets/logo.png';
|
||||
import ButtonTile from './ButtonTile.svelte';
|
||||
|
||||
$: {
|
||||
document.title = `Carbon Components Svelte`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
main {
|
||||
margin-top: 5rem;
|
||||
padding-left: 12rem;
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
main {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bx--grid {
|
||||
max-width: 66rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width: 4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 2rem;
|
||||
font-size: 2rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
h1 span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<main>
|
||||
<div class="bx--grid">
|
||||
<div class="bx--row">
|
||||
<div class="bx--col">
|
||||
<img src={Logo} alt="Logo" class="logo" />
|
||||
<h1>
|
||||
<span>
|
||||
<strong>Carbon</strong>
|
||||
</span>
|
||||
<span>
|
||||
<strong>Components</strong>
|
||||
</span>
|
||||
<span>
|
||||
<strong>Svelte</strong>
|
||||
</span>
|
||||
</h1>
|
||||
<p>The Carbon Design System implemented in Svelte</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bx--row">
|
||||
<div class="bx--col">
|
||||
<h3>Packages</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bx--row bx--no-gutter">
|
||||
<div class="bx--no-gutter-sm bx--col-md-4 bx--col-lg-4">
|
||||
<ButtonTile iconLeft={LogoGithub32} href="https://github.com/IBM/carbon-components-svelte">
|
||||
Carbon Components Svelte
|
||||
</ButtonTile>
|
||||
</div>
|
||||
<div class="bx--no-gutter-sm bx--col-md-4 bx--col-lg-4">
|
||||
<ButtonTile iconLeft={LogoGithub32} href="https://github.com/IBM/carbon-icons-svelte">
|
||||
Carbon Icons Svelte
|
||||
</ButtonTile>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bx--row">
|
||||
<div class="bx--col">
|
||||
<h3>Components</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
142
palimpsest/src/components/SideNav.svelte
Normal file
142
palimpsest/src/components/SideNav.svelte
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
<script>
|
||||
import { link, location } from 'svelte-spa-router';
|
||||
import { Search } from 'carbon-components-svelte';
|
||||
import Fuse from 'fuse.js';
|
||||
import components from '../data/component-registry';
|
||||
import { sideNavToggled, appSwitcherToggled } from '../store';
|
||||
|
||||
const fuse = new Fuse(components, { shouldSort: false, threshold: 0.33, keys: ['name'] });
|
||||
|
||||
let value = '';
|
||||
|
||||
$: results = value.length > 1 ? fuse.search(value) : components;
|
||||
|
||||
$: {
|
||||
if ($sideNavToggled || $appSwitcherToggled) {
|
||||
document.body.classList.add('hidden');
|
||||
} else {
|
||||
document.body.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:global(body.hidden) {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
top: 2.5rem;
|
||||
left: 0;
|
||||
width: 12rem;
|
||||
height: calc(100% - 2.5rem);
|
||||
background-color: var(--cds-ui-01);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
nav {
|
||||
transform: translateX(-100%);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
nav.toggled {
|
||||
transform: translateX(0);
|
||||
transition: transform 110ms cubic-bezier(0.2, 0, 1, 0.9);
|
||||
will-change: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
z-index: 9998;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--cds-overlay-01);
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bx--link {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0.375rem 1rem;
|
||||
color: var(--cds-text-01);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.bx--link:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.bx--link:hover {
|
||||
background-color: var(--cds-ui-03);
|
||||
color: var(--cds-text-01);
|
||||
}
|
||||
|
||||
.bx--link.current {
|
||||
background-color: var(--cds-ui-03);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bx--link.current:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0.25rem;
|
||||
height: 100%;
|
||||
background-color: var(--cds-interactive-01);
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:window
|
||||
on:resize={() => {
|
||||
if (($sideNavToggled || $appSwitcherToggled) && window.matchMedia('(min-width: 768px)').matches) {
|
||||
sideNavToggled.set(false);
|
||||
appSwitcherToggled.set(false);
|
||||
}
|
||||
}} />
|
||||
|
||||
<nav class:toggled={$sideNavToggled}>
|
||||
<Search small id="search-components" labelText="Components" bind:value />
|
||||
<ul>
|
||||
{#each results as { name }, i (name)}
|
||||
<li>
|
||||
<a
|
||||
on:click={() => {
|
||||
if ($sideNavToggled) {
|
||||
sideNavToggled.set(false);
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
}}
|
||||
class="bx--link"
|
||||
class:current={$location.includes(`/c/${name}`)}
|
||||
href={`/c/${name}`}
|
||||
use:link>
|
||||
{name}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{#if $sideNavToggled || $appSwitcherToggled}
|
||||
<div
|
||||
class="overlay"
|
||||
on:click={() => {
|
||||
sideNavToggled.set(false);
|
||||
appSwitcherToggled.set(false);
|
||||
}} />
|
||||
{/if}
|
||||
23
palimpsest/src/components/ThemePicker.svelte
Normal file
23
palimpsest/src/components/ThemePicker.svelte
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<script>
|
||||
export let inline = false;
|
||||
|
||||
import { Select, SelectItem } from 'carbon-components-svelte';
|
||||
import { theme } from '../store';
|
||||
|
||||
$: {
|
||||
document.documentElement.setAttribute('carbon-theme', $theme);
|
||||
}
|
||||
</script>
|
||||
|
||||
<Select
|
||||
{inline}
|
||||
labelText="Theme"
|
||||
selected={$theme}
|
||||
on:change={({ detail }) => {
|
||||
theme.set(detail);
|
||||
}}>
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
<SelectItem value="g100" text="Gray 100" />
|
||||
</Select>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<script>
|
||||
import { ComponentAPI } from '../../Component';
|
||||
|
||||
const props = [
|
||||
{
|
||||
name: 'type',
|
||||
type: 'string',
|
||||
required: true,
|
||||
value: ['inline', 'single', 'multi'],
|
||||
defaultValue: { value: 'single' },
|
||||
description: `
|
||||
<div>
|
||||
<strong>Inline</strong> An inline <code>CodeSnippet</code> contains
|
||||
</div>
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'light',
|
||||
type: 'boolean',
|
||||
required: false,
|
||||
value: [],
|
||||
defaultValue: { value: false },
|
||||
description: `
|
||||
<div>Light variant</div>
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'code',
|
||||
type: 'string',
|
||||
required: true,
|
||||
value: [],
|
||||
defaultValue: { value: undefined },
|
||||
description: `
|
||||
<div>Light variant</div>
|
||||
`
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<ComponentAPI {props} />
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<script>
|
||||
import {
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
ToggleSmall,
|
||||
NumberInput,
|
||||
FormGroup
|
||||
} from 'carbon-components-svelte';
|
||||
import { ComponentPreview } from '../../Component';
|
||||
|
||||
$: items = [1, 2, 3, 4].map(id => ({ id, open: false }));
|
||||
|
||||
$: props = {
|
||||
count: 4,
|
||||
open: false,
|
||||
skeleton: false
|
||||
};
|
||||
|
||||
$: if (props.skeleton) {
|
||||
items = items.map(_ => ({ ..._, open: false }));
|
||||
}
|
||||
|
||||
$: code = `
|
||||
<script>
|
||||
import { Accordion, AccordionItem } from 'carbon-components-svelte';
|
||||
< /script>
|
||||
|
||||
<Accordion${props.skeleton ? ' skeleton' : ''}${props.skeleton ? ` count={${props.count}}` : ''}${
|
||||
props.open ? ` open` : ''
|
||||
}>
|
||||
${items
|
||||
.map(item => {
|
||||
return ` <AccordionItem title="Item ${item.id}"${item.open ? ' open' : ''}>Item ${
|
||||
item.id
|
||||
} content</AccordionItem>`;
|
||||
})
|
||||
.join('\n')}
|
||||
</Accordion>
|
||||
`;
|
||||
</script>
|
||||
|
||||
<ComponentPreview {code} minHeight="16rem">
|
||||
<Accordion {...props}>
|
||||
{#each items as { id }, i (id)}
|
||||
<AccordionItem title={`Item ${id}`} bind:open={items[i].open}>
|
||||
Item {id} content
|
||||
</AccordionItem>
|
||||
{/each}
|
||||
</Accordion>
|
||||
<div slot="props">
|
||||
<FormGroup legendText="Skeleton">
|
||||
<ToggleSmall id="toggle-skeleton" bind:toggled={props.skeleton} />
|
||||
</FormGroup>
|
||||
<FormGroup legendText="Skeleton row count">
|
||||
<NumberInput disabled={!props.skeleton} bind:value={props.count} />
|
||||
</FormGroup>
|
||||
<FormGroup legendText="Skeleton first item open">
|
||||
<ToggleSmall id="toggle-open" disabled={!props.skeleton} bind:toggled={props.open} />
|
||||
</FormGroup>
|
||||
</div>
|
||||
</ComponentPreview>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import Preview from './Preview.svelte';
|
||||
import API from './API.svelte';
|
||||
import KitchenSink from './KitchenSink.svelte';
|
||||
|
||||
const tabs = {
|
||||
Preview,
|
||||
API,
|
||||
KitchenSink
|
||||
};
|
||||
|
||||
export default tabs;
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<script>
|
||||
import { ComponentAPI } from '../../Component';
|
||||
|
||||
const props = [
|
||||
{
|
||||
name: 'type',
|
||||
type: 'string',
|
||||
required: true,
|
||||
value: ['inline', 'single', 'multi'],
|
||||
defaultValue: { value: 'single' },
|
||||
description: `
|
||||
<div>
|
||||
<strong>Inline</strong> An inline <code>CodeSnippet</code> contains
|
||||
</div>
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'light',
|
||||
type: 'boolean',
|
||||
required: false,
|
||||
value: [],
|
||||
defaultValue: { value: false },
|
||||
description: `
|
||||
<div>Light variant</div>
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'code',
|
||||
type: 'string',
|
||||
required: true,
|
||||
value: [],
|
||||
defaultValue: { value: undefined },
|
||||
description: `
|
||||
<div>Light variant</div>
|
||||
`
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<ComponentAPI {props} />
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<script>
|
||||
import {
|
||||
TextArea,
|
||||
TextInput,
|
||||
ToggleSmall,
|
||||
CodeSnippet,
|
||||
FormGroup,
|
||||
RadioButtonGroup,
|
||||
RadioButton
|
||||
} from 'carbon-components-svelte';
|
||||
import { ComponentPreview } from '../../Component';
|
||||
|
||||
$: props = {
|
||||
code: `
|
||||
This is a <CodeSnippet />
|
||||
`.trim(),
|
||||
light: false,
|
||||
type: 'single',
|
||||
skeleton: false,
|
||||
feedback: 'Copied!'
|
||||
};
|
||||
|
||||
$: code = `
|
||||
<script>
|
||||
import { CodeSnippet } from 'carbon-components-svelte';
|
||||
|
||||
$: code = \`${props.code}\`;
|
||||
< /script>
|
||||
|
||||
<CodeSnippet type="${props.type}"${props.light ? ' light' : ''} {code}${
|
||||
props.skeleton ? ' skeleton' : ''
|
||||
} feedback="${props.feedback}" />
|
||||
`;
|
||||
|
||||
$: if (props.type === 'inline') {
|
||||
props.skeleton = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<ComponentPreview light={props.light} {code}>
|
||||
<div>
|
||||
<CodeSnippet {...props} />
|
||||
</div>
|
||||
<div slot="props">
|
||||
<FormGroup legendText="Type">
|
||||
<RadioButtonGroup legend="Type" bind:selected={props.type}>
|
||||
<RadioButton value="inline" id="inline" labelText="inline" />
|
||||
<RadioButton value="single" id="single" labelText="single" />
|
||||
<RadioButton value="multi" id="multi" labelText="multi" />
|
||||
</RadioButtonGroup>
|
||||
</FormGroup>
|
||||
<FormGroup legendText="Light variant">
|
||||
<ToggleSmall id="toggle-light" bind:toggled={props.light} />
|
||||
</FormGroup>
|
||||
<FormGroup legendText="Code">
|
||||
{#if props.type === 'multi'}
|
||||
<TextArea bind:value={props.code} />
|
||||
{:else}
|
||||
<TextInput bind:value={props.code} />
|
||||
{/if}
|
||||
</FormGroup>
|
||||
<FormGroup legendText="Skeleton">
|
||||
<ToggleSmall
|
||||
id="toggle-skeleton"
|
||||
disabled={props.type === 'inline'}
|
||||
bind:toggled={props.skeleton} />
|
||||
</FormGroup>
|
||||
<FormGroup legendText="Feedback text">
|
||||
<TextInput placeholder="Enter text" bind:value={props.feedback} />
|
||||
</FormGroup>
|
||||
</div>
|
||||
</ComponentPreview>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import Preview from './Preview.svelte';
|
||||
import API from './API.svelte';
|
||||
import KitchenSink from './KitchenSink.svelte';
|
||||
|
||||
const tabs = {
|
||||
Preview,
|
||||
API,
|
||||
KitchenSink
|
||||
};
|
||||
|
||||
export default tabs;
|
||||
50
palimpsest/src/data/component-registry.js
Normal file
50
palimpsest/src/data/component-registry.js
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
const components = [
|
||||
{ name: 'Accordion' },
|
||||
{ name: 'Breadcrumb' },
|
||||
{ name: 'Button' },
|
||||
{ name: 'Checkbox' },
|
||||
{ name: 'CodeSnippet' },
|
||||
{ name: 'ComboBox' },
|
||||
{ name: 'ComposedModal' },
|
||||
{ name: 'ContentSwitcher' },
|
||||
{ name: 'CopyButton' },
|
||||
{ name: 'DataTable' },
|
||||
{ name: 'DatePicker' },
|
||||
{ name: 'Dropdown' },
|
||||
{ name: 'FileUploader' },
|
||||
{ name: 'Form' },
|
||||
{ name: 'Icon' },
|
||||
{ name: 'InlineLoading' },
|
||||
{ name: 'Link' },
|
||||
{ name: 'Loading' },
|
||||
{ name: 'Modal' },
|
||||
{ name: 'MultiSelect' },
|
||||
{ name: 'Notification' },
|
||||
{ name: 'NumberInput' },
|
||||
{ name: 'OrderedList' },
|
||||
{ name: 'OverflowMenu' },
|
||||
{ name: 'Pagination' },
|
||||
{ name: 'ProgressIndicator' },
|
||||
{ name: 'RadioButton' },
|
||||
{ name: 'RadioButtonGroup' },
|
||||
{ name: 'Search' },
|
||||
{ name: 'Select' },
|
||||
{ name: 'SkeletonPlaceholder' },
|
||||
{ name: 'SkeletonText' },
|
||||
{ name: 'Slider' },
|
||||
{ name: 'StructuredList' },
|
||||
{ name: 'Tabs' },
|
||||
{ name: 'Tag' },
|
||||
{ name: 'TextArea' },
|
||||
{ name: 'TextInput' },
|
||||
{ name: 'Tile' },
|
||||
{ name: 'TimePicker' },
|
||||
{ name: 'Toggle' },
|
||||
{ name: 'ToggleSmall' },
|
||||
{ name: 'Tooltip' },
|
||||
{ name: 'TooltipDefinition' },
|
||||
{ name: 'TooltipIcon' },
|
||||
{ name: 'UnorderedList' }
|
||||
];
|
||||
|
||||
export default components;
|
||||
6
palimpsest/src/index.js
Normal file
6
palimpsest/src/index.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import './style.scss';
|
||||
import App from './App.svelte';
|
||||
|
||||
const app = new App({ target: document.body });
|
||||
|
||||
export default app;
|
||||
5
palimpsest/src/store/index.js
Normal file
5
palimpsest/src/store/index.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import { writable } from 'svelte/store';
|
||||
|
||||
export const sideNavToggled = writable(false);
|
||||
export const appSwitcherToggled = writable(false);
|
||||
export const theme = writable('g10');
|
||||
37
palimpsest/src/style.scss
Normal file
37
palimpsest/src/style.scss
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
$feature-flags: (
|
||||
enable-css-custom-properties: true
|
||||
);
|
||||
|
||||
@import 'carbon-components/scss/globals/scss/_css--helpers.scss';
|
||||
@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/_mixins.scss';
|
||||
|
||||
:root {
|
||||
@include carbon--theme($carbon--theme--white, true);
|
||||
}
|
||||
|
||||
:root[carbon-theme='g10'] {
|
||||
@include carbon--theme($carbon--theme--g10, true);
|
||||
}
|
||||
|
||||
:root[carbon-theme='g90'] {
|
||||
@include carbon--theme($carbon--theme--g90, true);
|
||||
}
|
||||
|
||||
:root[carbon-theme='g100'] {
|
||||
@include carbon--theme($carbon--theme--g100, true);
|
||||
}
|
||||
|
||||
$css--font-face: true;
|
||||
$css--helpers: true;
|
||||
$css--body: true;
|
||||
$css--use-layer: true;
|
||||
$css--reset: true;
|
||||
$css--default-type: true;
|
||||
$css--plex: true;
|
||||
|
||||
@import 'carbon-components/scss/globals/scss/_css--reset.scss';
|
||||
@import 'carbon-components/scss/globals/scss/_css--font-face.scss';
|
||||
@import 'carbon-components/scss/globals/scss/_css--helpers.scss';
|
||||
@import 'carbon-components/scss/globals/scss/_css--body.scss';
|
||||
@import 'carbon-components/scss/globals/grid/_grid.scss';
|
||||
@import 'carbon-components/scss/globals/scss/styles.scss';
|
||||
78
palimpsest/webpack.config.js
Normal file
78
palimpsest/webpack.config.js
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||||
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const path = require('path');
|
||||
const CopyPlugin = require('copy-webpack-plugin');
|
||||
|
||||
const NODE_ENV = process.env.NODE_ENV || 'development';
|
||||
const IS_PROD = NODE_ENV === 'production';
|
||||
|
||||
module.exports = {
|
||||
stats: 'errors-only',
|
||||
devtool: IS_PROD ? false : 'cheap-eval-source-map',
|
||||
entry: { bundle: ['./src/index.js'] },
|
||||
resolve: {
|
||||
alias: { svelte: path.resolve('node_modules', 'svelte') },
|
||||
extensions: ['.mjs', '.js', '.svelte'],
|
||||
mainFields: ['svelte', 'browser', 'module', 'main']
|
||||
},
|
||||
output: { path: path.resolve(__dirname, 'build'), filename: '[name].[chunkhash].js' },
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.svelte$/,
|
||||
use: { loader: 'svelte-loader', options: { emitCss: true, hotReload: true } }
|
||||
},
|
||||
{
|
||||
test: [/\.s[ac]ss$/i, /\.css$/],
|
||||
use: [
|
||||
IS_PROD ? MiniCssExtractPlugin.loader : 'style-loader',
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
plugins: [
|
||||
require('autoprefixer')({
|
||||
overrideBrowserslist: ['last 1 version', 'ie >= 11']
|
||||
})
|
||||
]
|
||||
}
|
||||
},
|
||||
'sass-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|svg)$/i,
|
||||
use: [{ loader: 'file-loader' }]
|
||||
}
|
||||
]
|
||||
},
|
||||
mode: NODE_ENV,
|
||||
plugins: [
|
||||
new CleanWebpackPlugin(),
|
||||
new CopyPlugin([{ from: 'public' }]),
|
||||
new MiniCssExtractPlugin({ filename: '[name].[chunkhash].css' }),
|
||||
new OptimizeCssAssetsPlugin({}),
|
||||
new HtmlWebpackPlugin(
|
||||
Object.assign(
|
||||
{},
|
||||
{ inject: true, template: 'public/index.html' },
|
||||
IS_PROD
|
||||
? {
|
||||
minify: {
|
||||
removeComments: true,
|
||||
collapseWhitespace: true,
|
||||
useShortDoctype: true,
|
||||
removeEmptyElements: true,
|
||||
removeEmptyAttributes: true,
|
||||
removeStyleLinkTypeAttributes: true,
|
||||
keepClosingSlash: true,
|
||||
minifyURLs: true
|
||||
}
|
||||
}
|
||||
: undefined
|
||||
)
|
||||
)
|
||||
]
|
||||
};
|
||||
6981
palimpsest/yarn.lock
Normal file
6981
palimpsest/yarn.lock
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue