mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
Eric Liu
parent
a5e98de4a7
commit
925bfba548
11 changed files with 7242 additions and 0 deletions
|
|
@ -3,6 +3,7 @@
|
||||||
"env": {
|
"env": {
|
||||||
"es6": true,
|
"es6": true,
|
||||||
"browser": true,
|
"browser": true,
|
||||||
|
"node": true,
|
||||||
"jest": true
|
"jest": true
|
||||||
},
|
},
|
||||||
"parserOptions": {
|
"parserOptions": {
|
||||||
|
|
|
||||||
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
Loading…
Add table
Add a link
Reference in a new issue