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

Merge pull request #101 from IBM/refactor-docs

Browse source 
refactor: set-up palimpsest for library documentation
This commit is contained in:
Eric Liu 2020-01-04 16:23:19 -08:00 • committed by GitHub
commit 68cdaf30de
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 7304 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.eslintrc.json
View file

@ -3,6 +3,7 @@
"env": { "env": {
"es6": true, "es6": true,
"browser": true, "browser": true,
"node": true,
"jest": true "jest": true
}, },
"parserOptions": { "parserOptions": {

5
package.json
View file

@ -18,6 +18,10 @@
"carbon-icons-svelte": "^10.8.2", "carbon-icons-svelte": "^10.8.2",
"flatpickr": "^4.6.3" "flatpickr": "^4.6.3"
}, },
"peerDependencies": {
"carbon-components": "^10.9.0",
"carbon-icons-svelte": "^10.8.2"
},
"devDependencies": { "devDependencies": {
"@babel/core": "^7.7.4", "@babel/core": "^7.7.4",
"@babel/preset-env": "^7.7.4", "@babel/preset-env": "^7.7.4",
@ -56,6 +60,7 @@
"email": "eric.young.liu@ibm.com" "email": "eric.young.liu@ibm.com"
} }
], ],
"sideEffects": false,
"engines": { "engines": {
"node": ">=10", "node": ">=10",
"yarn": ">=1" "yarn": ">=1"

5
palimpsest/.gitignore vendored Normal file
View file

@ -0,0 +1,5 @@
/node_modules
/build
.DS_Store
yarn-debug.log*
yarn-error.log*

41
palimpsest/README.md Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View file

File diff suppressed because it is too large Load diff

16
src/components/CodeSnippet/CodeSnippet.svelte
View file

@ -1,10 +1,12 @@
<script> <script>
let className = undefined; let className = undefined;
export { className as class }; export { className as class };
export let code = undefined;
export let copyButtonDescription = undefined; export let copyButtonDescription = undefined;
export let copyLabel = undefined; export let copyLabel = undefined;
export let feedback = undefined; export let feedback = undefined;
export let feedbackTimeout = undefined; export let feedbackTimeout = undefined;
export let id = Math.random();
export let light = false; export let light = false;
export let showLessText = 'Show less'; export let showLessText = 'Show less';
export let showMoreText = 'Show more'; export let showMoreText = 'Show more';
@ -18,7 +20,6 @@
import Copy from '../Copy'; import Copy from '../Copy';
import CopyButton from '../CopyButton'; import CopyButton from '../CopyButton';
const id = Math.random();
let codeRef = undefined; let codeRef = undefined;
let expanded = false; let expanded = false;
let showMoreLess = false; let showMoreLess = false;
@ -34,21 +35,20 @@
<Copy <Copy
aria-label={$$props['aria-label'] || copyLabel} aria-label={$$props['aria-label'] || copyLabel}
aria-describedby={id} aria-describedby={id}
class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
{feedback} {feedback}
{feedbackTimeout} {feedbackTimeout}
{style}> {style}>
<code {id}> <code {id}>
<slot /> <slot>{code}</slot>
</code> </code>
</Copy> </Copy>
{:else} {:else}
<div <div
on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
@ -61,16 +61,16 @@
aria-label={$$props['aria-label'] || copyLabel || 'code-snippet'}> aria-label={$$props['aria-label'] || copyLabel || 'code-snippet'}>
<code> <code>
<pre bind:this={codeRef}> <pre bind:this={codeRef}>
<slot /> <slot>{code}</slot>
</pre> </pre>
</code> </code>
</div> </div>
<CopyButton <CopyButton
on:click iconDescription={copyButtonDescription}
class={cx('--snippet-button')} class={cx('--snippet-button')}
on:click
{feedback} {feedback}
{feedbackTimeout} {feedbackTimeout} />
iconDescription={copyButtonDescription} />
{#if showMoreLess} {#if showMoreLess}
<Button <Button
kind="ghost" kind="ghost"

81
src/components/Search/Search.svelte
View file

@ -6,9 +6,10 @@
export let id = Math.random(); export let id = Math.random();
export let labelText = ''; export let labelText = '';
export let light = false; export let light = false;
export let placeholder = ''; export let placeholder = 'Search...';
export let size = small ? 'sm' : 'xl';
export let small = false; export let small = false;
export let size = small ? 'sm' : 'xl';
export let skeleton = false;
export let style = undefined; export let style = undefined;
export let type = 'text'; export let type = 'text';
export let value = ''; export let value = '';
@ -17,39 +18,53 @@
import Close20 from 'carbon-icons-svelte/lib/Close20'; import Close20 from 'carbon-icons-svelte/lib/Close20';
import Search16 from 'carbon-icons-svelte/lib/Search16'; import Search16 from 'carbon-icons-svelte/lib/Search16';
import { cx } from '../../lib'; import { cx } from '../../lib';
import SearchSkeleton from './Search.Skeleton.svelte';
let inputRef = undefined; let inputRef = undefined;
</script> </script>
<div {#if skeleton}
class={cx('--search', size && `--search--${size}`, light && '--search--light', className)} <SearchSkeleton
{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
on:click={() => { on:mouseover
value = ''; on:mouseenter
inputRef.focus(); on:mouseleave
}}> class={className}
<svelte:component this={size === 'xl' ? Close20 : Close16} /> {style}
</button> {small} />
</div> {/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}

2
src/components/Select/SelectItem.svelte
View file

@ -24,5 +24,5 @@
</script> </script>
<option class={cx('--select-option', className)} {value} {disabled} {hidden} {style} {selected}> <option class={cx('--select-option', className)} {value} {disabled} {hidden} {style} {selected}>
{text} {text || value}
</option> </option>