mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
Merge pull request #101 from IBM/refactor-docs
refactor: set-up palimpsest for library documentation
This commit is contained in:
Eric Liu
GitHub
commit
68cdaf30de
15 changed files with 7304 additions and 42 deletions
|
|
@ -3,6 +3,7 @@
|
|||
"env": {
|
||||
"es6": true,
|
||||
"browser": true,
|
||||
"node": true,
|
||||
"jest": true
|
||||
},
|
||||
"parserOptions": {
|
||||
|
|
|
|||
|
|
@ -18,6 +18,10 @@
|
|||
"carbon-icons-svelte": "^10.8.2",
|
||||
"flatpickr": "^4.6.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"carbon-components": "^10.9.0",
|
||||
"carbon-icons-svelte": "^10.8.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.7.4",
|
||||
"@babel/preset-env": "^7.7.4",
|
||||
|
|
@ -56,6 +60,7 @@
|
|||
"email": "eric.young.liu@ibm.com"
|
||||
}
|
||||
],
|
||||
"sideEffects": false,
|
||||
"engines": {
|
||||
"node": ">=10",
|
||||
"yarn": ">=1"
|
||||
|
|
|
|||
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.
|
||||
38
palimpsest/package.json
Normal file
38
palimpsest/package.json
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
{
|
||||
"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",
|
||||
"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-routing": "^1.4.0",
|
||||
"webpack": "^4.41.2",
|
||||
"webpack-cli": "^3.3.10",
|
||||
"webpack-dev-server": "^3.9.0"
|
||||
},
|
||||
"babel": {
|
||||
"presets": [
|
||||
"@babel/preset-env"
|
||||
]
|
||||
}
|
||||
}
|
||||
9
palimpsest/public/index.html
Normal file
9
palimpsest/public/index.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
<title>carbon-components-svelte</title>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
50
palimpsest/src/App.svelte
Normal file
50
palimpsest/src/App.svelte
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<script>
|
||||
import { Router, Link, Route } from 'svelte-routing';
|
||||
import copy from 'clipboard-copy';
|
||||
import { Search, Link as CarbonLink, CodeSnippet } from 'carbon-components-svelte';
|
||||
import ThemePicker from './components/ThemePicker.svelte';
|
||||
|
||||
let value = '';
|
||||
|
||||
$: code = `
|
||||
search component "${value}"
|
||||
`.trim();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
height: 2.5rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<Router>
|
||||
<nav>
|
||||
<Link to="/">Home</Link>
|
||||
<Link to="about">About</Link>
|
||||
</nav>
|
||||
<div>
|
||||
<Route path="about" component={ThemePicker} />
|
||||
<Route path="/">Home</Route>
|
||||
</div>
|
||||
</Router>
|
||||
|
||||
<header>
|
||||
<CarbonLink href="https://github.com/IBM/carbon-components-svelte">GitHub</CarbonLink>
|
||||
<div>
|
||||
<ThemePicker />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div style="width: 16rem">
|
||||
<Search id="search-components" labelText="Components" small bind:value />
|
||||
</div>
|
||||
|
||||
<CodeSnippet
|
||||
on:click={() => {
|
||||
copy(code);
|
||||
}}
|
||||
{code} />
|
||||
16
palimpsest/src/components/ThemePicker.svelte
Normal file
16
palimpsest/src/components/ThemePicker.svelte
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<script>
|
||||
import { Select, SelectItem } from 'carbon-components-svelte';
|
||||
|
||||
let selected = 'white';
|
||||
|
||||
$: {
|
||||
document.documentElement.setAttribute('carbon-theme', selected);
|
||||
}
|
||||
</script>
|
||||
|
||||
<Select inline labelText="Select Carbon Theme" bind:selected>
|
||||
<SelectItem value="white" text="White (light)" />
|
||||
<SelectItem value="g10" text="Gray 10 (light)" />
|
||||
<SelectItem value="g90" text="Gray 90 (dark)" />
|
||||
<SelectItem value="g100" text="Gray 100 (dark)" />
|
||||
</Select>
|
||||
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;
|
||||
41
palimpsest/src/style.scss
Normal file
41
palimpsest/src/style.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
$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/components/search/_search.scss';
|
||||
@import 'carbon-components/scss/components/select/_select.scss';
|
||||
@import 'carbon-components/scss/components/copy-button/_copy-button.scss';
|
||||
@import 'carbon-components/scss/components/code-snippet/_code-snippet.scss';
|
||||
74
palimpsest/webpack.config.js
Normal file
74
palimpsest/webpack.config.js
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
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'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
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
|
||||
)
|
||||
)
|
||||
]
|
||||
};
|
||||
6961
palimpsest/yarn.lock
Normal file
6961
palimpsest/yarn.lock
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,10 +1,12 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let code = undefined;
|
||||
export let copyButtonDescription = undefined;
|
||||
export let copyLabel = undefined;
|
||||
export let feedback = undefined;
|
||||
export let feedbackTimeout = undefined;
|
||||
export let id = Math.random();
|
||||
export let light = false;
|
||||
export let showLessText = 'Show less';
|
||||
export let showMoreText = 'Show more';
|
||||
|
|
@ -18,7 +20,6 @@
|
|||
import Copy from '../Copy';
|
||||
import CopyButton from '../CopyButton';
|
||||
|
||||
const id = Math.random();
|
||||
let codeRef = undefined;
|
||||
let expanded = false;
|
||||
let showMoreLess = false;
|
||||
|
|
@ -34,21 +35,20 @@
|
|||
<Copy
|
||||
aria-label={$$props['aria-label'] || copyLabel}
|
||||
aria-describedby={id}
|
||||
class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
|
||||
{feedback}
|
||||
{feedbackTimeout}
|
||||
{style}>
|
||||
<code {id}>
|
||||
<slot />
|
||||
<slot>{code}</slot>
|
||||
</code>
|
||||
</Copy>
|
||||
{:else}
|
||||
<div
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
|
|
@ -61,16 +61,16 @@
|
|||
aria-label={$$props['aria-label'] || copyLabel || 'code-snippet'}>
|
||||
<code>
|
||||
<pre bind:this={codeRef}>
|
||||
<slot />
|
||||
<slot>{code}</slot>
|
||||
</pre>
|
||||
</code>
|
||||
</div>
|
||||
<CopyButton
|
||||
on:click
|
||||
iconDescription={copyButtonDescription}
|
||||
class={cx('--snippet-button')}
|
||||
on:click
|
||||
{feedback}
|
||||
{feedbackTimeout}
|
||||
iconDescription={copyButtonDescription} />
|
||||
{feedbackTimeout} />
|
||||
{#if showMoreLess}
|
||||
<Button
|
||||
kind="ghost"
|
||||
|
|
|
|||
|
|
@ -6,9 +6,10 @@
|
|||
export let id = Math.random();
|
||||
export let labelText = '';
|
||||
export let light = false;
|
||||
export let placeholder = '';
|
||||
export let size = small ? 'sm' : 'xl';
|
||||
export let placeholder = 'Search...';
|
||||
export let small = false;
|
||||
export let size = small ? 'sm' : 'xl';
|
||||
export let skeleton = false;
|
||||
export let style = undefined;
|
||||
export let type = 'text';
|
||||
export let value = '';
|
||||
|
|
@ -17,39 +18,53 @@
|
|||
import Close20 from 'carbon-icons-svelte/lib/Close20';
|
||||
import Search16 from 'carbon-icons-svelte/lib/Search16';
|
||||
import { cx } from '../../lib';
|
||||
import SearchSkeleton from './Search.Skeleton.svelte';
|
||||
|
||||
let inputRef = undefined;
|
||||
</script>
|
||||
|
||||
<div
|
||||
class={cx('--search', size && `--search--${size}`, light && '--search--light', className)}
|
||||
{style}>
|
||||
<Search16 class={cx('--search-magnifier')} />
|
||||
<label class={cx('--label')} for={id}>{labelText}</label>
|
||||
<!-- svelte-ignore a11y-autofocus -->
|
||||
<input
|
||||
bind:this={inputRef}
|
||||
role="searchbox"
|
||||
class={cx('--search-input')}
|
||||
on:change
|
||||
on:input
|
||||
on:input={({ target }) => {
|
||||
value = target.value;
|
||||
}}
|
||||
{autofocus}
|
||||
{type}
|
||||
{id}
|
||||
{value}
|
||||
{placeholder} />
|
||||
<button
|
||||
type="button"
|
||||
aria-label={closeButtonLabelText}
|
||||
class={cx('--search-close', value === '' && '--search-close--hidden')}
|
||||
{#if skeleton}
|
||||
<SearchSkeleton
|
||||
on:click
|
||||
on:click={() => {
|
||||
value = '';
|
||||
inputRef.focus();
|
||||
}}>
|
||||
<svelte:component this={size === 'xl' ? Close20 : Close16} />
|
||||
</button>
|
||||
</div>
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
class={className}
|
||||
{style}
|
||||
{small} />
|
||||
{/if}
|
||||
|
||||
{#if !skeleton}
|
||||
<div
|
||||
class={cx('--search', size && `--search--${size}`, light && '--search--light', className)}
|
||||
{style}>
|
||||
<Search16 class={cx('--search-magnifier')} />
|
||||
<label class={cx('--label')} for={id}>{labelText}</label>
|
||||
<!-- svelte-ignore a11y-autofocus -->
|
||||
<input
|
||||
bind:this={inputRef}
|
||||
role="searchbox"
|
||||
class={cx('--search-input')}
|
||||
on:change
|
||||
on:input
|
||||
on:input={({ target }) => {
|
||||
value = target.value;
|
||||
}}
|
||||
{autofocus}
|
||||
{type}
|
||||
{id}
|
||||
{value}
|
||||
{placeholder} />
|
||||
<button
|
||||
type="button"
|
||||
aria-label={closeButtonLabelText}
|
||||
class={cx('--search-close', value === '' && '--search-close--hidden')}
|
||||
on:click
|
||||
on:click={() => {
|
||||
value = '';
|
||||
inputRef.focus();
|
||||
}}>
|
||||
<svelte:component this={size === 'xl' ? Close20 : Close16} />
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -24,5 +24,5 @@
|
|||
</script>
|
||||
|
||||
<option class={cx('--select-option', className)} {value} {disabled} {hidden} {style} {selected}>
|
||||
{text}
|
||||
{text || value}
|
||||
</option>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue