wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

initial migrations to 7

Browse source
This commit is contained in:
Jon McClure 2023-04-26 15:07:27 +01:00
parent a9ad3475ad
commit 0ec2a58a34
49 changed files with 3676 additions and 51876 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.storybook/Theme.js → .storybook/Theme.ts
View file

@ -1,4 +1,4 @@
import { create } from '@storybook/theming'; import { create } from '@storybook/theming/create';
export default create({ export default create({
base: 'light', base: 'light',

43
.storybook/main.cjs
View file

@ -1,43 +0,0 @@
const { mergeConfig } = require('vite');
const preprocess = require('../bin/preprocess/index.cjs');
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.svelte"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
],
"framework": "@storybook/svelte",
"core": {
"builder": "@storybook/builder-vite"
},
"features": {
"storyStoreV7": false,
"previewMdx2": false, // Until this is fixed: https://github.com/storybookjs/storybook/issues/18556
},
typescript: {
check: false,
},
async viteFinal(config, { configType }) {
return mergeConfig(config, {
base: configType === 'PRODUCTION' ? 'https://reuters-graphics.github.io/graphics-components/' : '/',
css: {
preprocessorOptions: { scss: preprocess.scss },
},
resolve: {
alias: {
'@reuters-graphics/graphics-components': './src',
'$lib': './src',
'$docs': './src/docs',
},
},
});
},
svelteOptions: {
preprocess: preprocess.sveltePreprocess,
},
}

35
.storybook/main.ts Normal file
View file

@ -0,0 +1,35 @@
import type { StorybookConfig } from '@storybook/svelte-vite';
import { mergeConfig } from 'vite';
import { scss } from '../bin/preprocess/index.js';
const config: StorybookConfig = {
"stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.svelte"],
"addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/addon-mdx-gfm", '@storybook/addon-svelte-csf'],
"framework": '@storybook/svelte-vite',
typescript: {
check: false
},
async viteFinal(config, {
configType
}) {
return mergeConfig(config, {
base: configType === 'PRODUCTION' ? 'https://reuters-graphics.github.io/graphics-components/' : '/',
css: {
preprocessorOptions: {
scss
}
},
resolve: {
alias: {
'@reuters-graphics/graphics-components': './src',
'$lib': './src',
'$docs': './src/docs'
}
},
});
},
docs: {
autodocs: true
}
};
export default config;

3
.storybook/manager.js → .storybook/manager.ts
View file

@ -1,4 +1,4 @@
import { addons } from '@storybook/addons'; import { addons } from '@storybook/manager-api';
import theme from './Theme'; import theme from './Theme';
addons.setConfig({ addons.setConfig({
@ -8,7 +8,6 @@ addons.setConfig({
panelPosition: 'bottom', panelPosition: 'bottom',
enableShortcuts: true, enableShortcuts: true,
showToolbar: true, showToolbar: true,
theme: undefined,
selectedPanel: undefined, selectedPanel: undefined,
initialActive: 'sidebar', initialActive: 'sidebar',
sidebar: { sidebar: {

52
.storybook/preview.scss
View file

@ -39,32 +39,36 @@ div.sbdocs-content {
} }
} }
p.sbdocs-p, ul.sbdocs-ul, li.sbdocs-li {
font-size: 18px;
line-height: 29px;
@include font-display;
.highlight {
background-color: rgb(254, 254, 160);
padding: 0 4px;
}
.bold {
font-weight: bold;
}
}
a.sbdocs-a {
@include font-display;
color: $tr-muted-blue;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.sbdocs { .sbdocs {
@include font-display; @include font-display;
h1 {
@include font-display;
}
p, ul, li {
font-size: 18px;
line-height: 29px;
@include font-display;
.highlight {
background-color: rgb(254, 254, 160);
padding: 0 4px;
}
.bold {
font-weight: bold;
}
}
a {
@include font-display;
color: $tr-muted-blue;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
&:not(.sbdocs-preview) { &:not(.sbdocs-preview) {
code { code {
font-size: 90%; font-size: 90%;
@ -88,8 +92,6 @@ a.sbdocs-a {
} }
} }
div.reset-article { div.reset-article {
width: calc(100% + 30px); width: calc(100% + 30px);
margin-left: -15px; margin-left: -15px;

2
.storybook/preview.js → .storybook/preview.ts
View file

@ -67,4 +67,4 @@ export const parameters = {
} }
}; };
export const decorators = [() => ({ Component: Wrapper })]; export const decorators = [() => Wrapper];

4
bin/buildPackage/process/svelte.js
View file

@ -2,8 +2,8 @@ import { DIST, LIB } from './../locations.js';
import fs from 'fs-extra'; import fs from 'fs-extra';
import path from 'path'; import path from 'path';
import preprocess from '../../preprocess/index.cjs';
import { preprocess as svelte } from 'svelte/compiler'; import { preprocess as svelte } from 'svelte/compiler';
import { sveltePreprocess } from '../../preprocess/index.js';
const stripLangTags = (source) => const stripLangTags = (source) =>
source source
@ -13,7 +13,7 @@ const stripLangTags = (source) =>
export default async (file) => { export default async (file) => {
const filename = path.join(LIB, file); const filename = path.join(LIB, file);
let source = fs.readFileSync(filename, 'utf8'); let source = fs.readFileSync(filename, 'utf8');
source = (await svelte(source, preprocess.sveltePreprocess, { filename })).code source = (await svelte(source, sveltePreprocess, { filename })).code
const writePath = path.join(DIST, file); const writePath = path.join(DIST, file);
fs.ensureDirSync(path.dirname(writePath)); fs.ensureDirSync(path.dirname(writePath));
fs.writeFileSync(writePath, stripLangTags(source)); fs.writeFileSync(writePath, stripLangTags(source));

10
bin/newComponent/template/YourComponent/YourComponent.stories.svelte
View file

@ -13,9 +13,7 @@
// @ts-ignore // @ts-ignore
import SharkImg from './stories/shark.jpg'; import SharkImg from './stories/shark.jpg';
const meta = { const metaProps = {
title: 'Components/YourComponent',
component: YourComponent,
...withComponentDocs(componentDocs), ...withComponentDocs(componentDocs),
// https://storybook.js.org/docs/svelte/essentials/controls // https://storybook.js.org/docs/svelte/essentials/controls
argTypes: { argTypes: {
@ -27,7 +25,11 @@
}; };
</script> </script>
<Meta {...meta} /> <Meta
title='Components/YourComponent'
component={YourComponent}
{...metaProps}
/>
<Template let:args> <Template let:args>
<YourComponent {...args} /> <YourComponent {...args} />

15
bin/preprocess/index.cjs → bin/preprocess/index.js
View file

@ -1,11 +1,11 @@
const autoprefixer = require('autoprefixer'); import autoprefixer from 'autoprefixer';
const preprocess = require('svelte-preprocess'); import preprocess from 'svelte-preprocess';
const scss = { export const scss = {
includePaths: ['src/', 'node_modules/bootstrap/scss/'], includePaths: ['src/', 'node_modules/bootstrap/scss/'],
importer: [ importer: [
(url) => { (url) => {
if (/^\$lib/.test(url)){ return { file: `src/${url.replace('$lib', '')}` }; } if (/^\$lib/.test(url)) { return { file: `src/${url.replace('$lib', '')}` }; }
// Redirect tilde-prefixed imports to node_modules // Redirect tilde-prefixed imports to node_modules
if (/^~/.test(url)) { return { file: `node_modules/${url.replace('~', '')}` }; } if (/^~/.test(url)) { return { file: `node_modules/${url.replace('~', '')}` }; }
return null; return null;
@ -14,7 +14,7 @@ const scss = {
quietDeps: true, quietDeps: true,
}; };
const sveltePreprocess = preprocess({ export const sveltePreprocess = preprocess({
preserve: ['ld+json'], preserve: ['ld+json'],
typescript: true, typescript: true,
scss, scss,
@ -22,8 +22,3 @@ const sveltePreprocess = preprocess({
plugins: [autoprefixer], plugins: [autoprefixer],
}, },
}); });
module.exports = {
scss,
sveltePreprocess
}

44296
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

91
package.json
View file

@ -6,10 +6,10 @@
"homepage": "https://reuters-graphics.github.io/graphics-components", "homepage": "https://reuters-graphics.github.io/graphics-components",
"repository": "https://github.com/reuters-graphics/graphics-components", "repository": "https://github.com/reuters-graphics/graphics-components",
"scripts": { "scripts": {
"start": "start-storybook -p 3000", "start": "storybook dev -p 3000",
"new": "node ./bin/newComponent/index.cjs", "new": "node ./bin/newComponent/index.cjs",
"build:package": "node ./bin/buildPackage/index.js", "build:package": "node ./bin/buildPackage/index.js",
"build:docs": "build-storybook -o docs && touch ./docs/.nojekyll", "build:docs": "storybook build -o docs && touch ./docs/.nojekyll",
"build": "npm-run-all build:package build:docs", "build": "npm-run-all build:package build:docs",
"prepublishOnly": "npm run build:package", "prepublishOnly": "npm run build:package",
"postversion": "git push origin && git push origin --tags" "postversion": "git push origin && git push origin --tags"
@ -20,59 +20,62 @@
"dist" "dist"
], ],
"engines": { "engines": {
"node": ">=16.7" "node": ">=16.19"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.18.9", "@babel/core": "^7.21.4",
"@babel/eslint-parser": "^7.15.4", "@babel/eslint-parser": "^7.21.3",
"@babel/eslint-plugin": "^7.14.5", "@babel/eslint-plugin": "^7.19.1",
"@babel/preset-env": "^7.15.6", "@babel/preset-env": "^7.21.4",
"@evilmartians/lefthook": "^1.0.1", "@evilmartians/lefthook": "^1.3.10",
"@reuters-graphics/eslint-config": "^0.0.2", "@reuters-graphics/eslint-config": "^0.0.2",
"@storybook/addon-actions": "6.5.9", "@storybook/addon-actions": "^7.0.7",
"@storybook/addon-essentials": "6.5.9", "@storybook/addon-essentials": "^7.0.7",
"@storybook/addon-interactions": "6.5.9", "@storybook/addon-interactions": "^7.0.7",
"@storybook/addon-links": "6.5.9", "@storybook/addon-links": "^7.0.7",
"@storybook/addon-svelte-csf": "^2.0.6", "@storybook/addon-mdx-gfm": "^7.0.7",
"@storybook/builder-vite": "^0.2.1", "@storybook/addon-svelte-csf": "^3.0.2",
"@storybook/mdx2-csf": "^0.0.3", "@storybook/manager-api": "^7.0.7",
"@storybook/svelte": "6.5.9", "@storybook/mdx2-csf": "^1.0.0",
"@storybook/testing-library": "^0.0.13", "@storybook/svelte": "^7.0.7",
"@storybook/theming": "6.5.9", "@storybook/svelte-vite": "^7.0.7",
"@sveltejs/vite-plugin-svelte": "^1.0.1", "@storybook/testing-library": "^0.1.0",
"@tsconfig/svelte": "^3.0.0", "@storybook/theming": "^7.0.7",
"@sveltejs/vite-plugin-svelte": "^2.0.4",
"@tsconfig/svelte": "^4.0.1",
"@types/proper-url-join": "^2.1.1", "@types/proper-url-join": "^2.1.1",
"@types/react-syntax-highlighter": "^15.5.4", "@types/react-syntax-highlighter": "^15.5.6",
"@typescript-eslint/eslint-plugin": "^5.33.1", "@typescript-eslint/eslint-plugin": "^5.58.0",
"@typescript-eslint/parser": "^5.32.0", "@typescript-eslint/parser": "^5.58.0",
"autoprefixer": "^10.2.5", "autoprefixer": "^10.4.14",
"babel-loader": "^8.2.5", "babel-loader": "^9.1.2",
"change-case": "^4.1.2", "change-case": "^4.1.2",
"esbuild-plugin-alias": "^0.2.1", "eslint": "^8.38.0",
"esbuild-register": "^3.3.3", "eslint-config-prettier": "^8.8.0",
"eslint": "^8.16.0", "eslint-plugin-n": "^15.7.0",
"eslint-config-prettier": "^8.3.0", "eslint-plugin-storybook": "^0.6.11",
"eslint-plugin-n": "^15.2.4",
"eslint-plugin-storybook": "^0.6.1",
"eslint-plugin-svelte3": "^4.0.0", "eslint-plugin-svelte3": "^4.0.0",
"fs-extra": "^10.1.0", "fs-extra": "^11.1.1",
"kleur": "^4.1.5", "kleur": "^4.1.5",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"postcss": "^8.4.14", "postcss": "^8.4.22",
"postcss-load-config": "^4.0.1", "postcss-load-config": "^4.0.1",
"prettier": "^2.3.2", "prettier": "^2.8.7",
"prettier-plugin-svelte": "^2.4.0", "prettier-plugin-svelte": "^2.10.0",
"prompts": "^2.4.2", "prompts": "^2.4.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-syntax-highlighter": "^15.5.0", "react-syntax-highlighter": "^15.5.0",
"rimraf": "^3.0.2", "rimraf": "^5.0.0",
"sass": "^1.54.0", "sass": "^1.62.0",
"svelte": "^3.49.0", "storybook": "^7.0.7",
"svelte-loader": "^3.1.3", "svelte": "^3.58.0",
"svelte-preprocess": "^4.10.7", "svelte-loader": "^3.1.7",
"svelte2tsx": "^0.5.13", "svelte-preprocess": "^5.0.3",
"svelte2tsx": "^0.6.11",
"tiny-glob": "^0.2.9", "tiny-glob": "^0.2.9",
"typescript": "^4.7.4", "typescript": "^5.0.4",
"vite": "^3.0.4" "vite": "^4.3.2"
}, },
"dependencies": { "dependencies": {
"@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-brands-svg-icons": "^5.15.4",
@ -237,4 +240,4 @@
".": "./dist/index.js" ".": "./dist/index.js"
}, },
"svelte": "./dist/index.js" "svelte": "./dist/index.js"
} }

16
src/components/Article/Article.stories.svelte
View file

@ -1,4 +1,4 @@
<script> <script lang="ts">
import { Meta, Template, Story } from '@storybook/addon-svelte-csf'; import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
// Don't lose the "?raw" in markdown imports! // Don't lose the "?raw" in markdown imports!
@ -13,16 +13,14 @@
import { import {
withComponentDocs, withComponentDocs,
withStoryDocs, withStoryDocs,
} from '$lib/docs/utils/withParams.js'; } from '../../docs/utils/withParams.js';
const meta = {
title: 'Layout/Article',
component: Article,
...withComponentDocs(componentDocs),
};
</script> </script>
<Meta {...meta} /> <Meta
title="Layout/Article"
component="{Article}"
{...withComponentDocs(componentDocs)}
/>
<Template let:args> <Template let:args>
<Article {...args} /> <Article {...args} />

6
src/components/BeforeAfter/BeforeAfter.stories.svelte
View file

@ -20,9 +20,7 @@
withStoryDocs, withStoryDocs,
} from '$lib/docs/utils/withParams.js'; } from '$lib/docs/utils/withParams.js';
const meta = { const metaProps = {
title: 'Components/BeforeAfter',
component: BeforeAfter,
...withComponentDocs(componentDocs), ...withComponentDocs(componentDocs),
argTypes: { argTypes: {
handleColour: { control: 'color' }, handleColour: { control: 'color' },
@ -34,7 +32,7 @@
}; };
</script> </script>
<Meta {...meta} /> <Meta title="Components/BeforeAfter" component="{BeforeAfter}" {...metaProps} />
<Template let:args> <Template let:args>
<BeforeAfter {...args} /> <BeforeAfter {...args} />

7
src/components/Block/Block.stories.svelte
View file

@ -13,11 +13,8 @@
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js'; import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
const meta = { const metaProps = {
title: 'Layout/Block',
component: Block,
...withComponentDocs(componentDocs), ...withComponentDocs(componentDocs),
// https://storybook.js.org/docs/svelte/essentials/controls
argTypes: { argTypes: {
width: { width: {
control: 'select', control: 'select',
@ -35,7 +32,7 @@
}; };
</script> </script>
<Meta {...meta} /> <Meta title="Layout/Block" component="{Block}" {...metaProps} />
<Template let:args> <Template let:args>
<Article id="block-demo-article"> <Article id="block-demo-article">

12
src/components/BodyText/BodyText.stories.svelte
View file

@ -7,15 +7,13 @@
import BodyText from './BodyText.svelte'; import BodyText from './BodyText.svelte';
import { withComponentDocs } from '$lib/docs/utils/withParams.js'; import { withComponentDocs } from '$lib/docs/utils/withParams.js';
const meta = {
title: 'Components/BodyText',
component: BodyText,
...withComponentDocs(componentDocs),
};
</script> </script>
<Meta {...meta} /> <Meta
title="Components/BodyText"
component="{BodyText}"
{...withComponentDocs(componentDocs)}
/>
<Template let:args> <Template let:args>
<BodyText {...args} /> <BodyText {...args} />

10
src/components/DatawrapperChart/DatawrapperChart.stories.svelte
View file

@ -13,9 +13,7 @@
withStoryDocs, withStoryDocs,
} from '$lib/docs/utils/withParams.js'; } from '$lib/docs/utils/withParams.js';
const meta = { const metaProps = {
title: 'Components/DatawrapperChart',
component: DatawrapperChart,
...withComponentDocs(componentDocs), ...withComponentDocs(componentDocs),
argTypes: { argTypes: {
width: { width: {
@ -26,7 +24,11 @@
}; };
</script> </script>
<Meta {...meta} /> <Meta
title="Components/DatawrapperChart"
component="{DatawrapperChart}"
{...metaProps}
/>
<Template let:args> <Template let:args>
<DatawrapperChart {...args} /> <DatawrapperChart {...args} />

10
src/components/DocumentCloud/DocumentCloud.stories.svelte
View file

@ -9,9 +9,7 @@
import { withComponentDocs } from '$docs/utils/withParams.js'; import { withComponentDocs } from '$docs/utils/withParams.js';
const meta = { const metaProps = {
title: 'Components/DocumentCloud',
component: DocumentCloud,
...withComponentDocs(componentDocs), ...withComponentDocs(componentDocs),
argTypes: { argTypes: {
width: { width: {
@ -22,7 +20,11 @@
}; };
</script> </script>
<Meta {...meta} /> <Meta
title="Components/DocumentCloud"
component="{DocumentCloud}"
{...metaProps}
/>
<Template let:args> <Template let:args>
<DocumentCloud {...args} /> <DocumentCloud {...args} />

24
src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte
View file

@ -6,26 +6,22 @@
import EmbedPreviewerLink from './EmbedPreviewerLink.svelte'; import EmbedPreviewerLink from './EmbedPreviewerLink.svelte';
import { import { withComponentDocs } from '$lib/docs/utils/withParams.js';
withComponentDocs
} from '$lib/docs/utils/withParams.js';
const meta = {
title: 'Utilities/EmbedPreviewerLink',
component: EmbedPreviewerLink,
...withComponentDocs(componentDocs),
};
</script> </script>
<Meta {...meta} /> <Meta
title="Utilities/EmbedPreviewerLink"
component="{EmbedPreviewerLink}"
{...withComponentDocs(componentDocs)}
/>
<Template let:args> <Template let:args>
<EmbedPreviewerLink {...args} /> <EmbedPreviewerLink {...args} />
</Template> </Template>
<Story <Story
name="Default" name="Default"
args={{ args="{{
dev: true dev: true,
}} }}"
/> />

30
src/components/FeaturePhoto/FeaturePhoto.stories.svelte
View file

@ -18,20 +18,22 @@
withStoryDocs, withStoryDocs,
} from '$lib/docs/utils/withParams.js'; } from '$lib/docs/utils/withParams.js';
const meta = { const metaProps = {
title: 'Components/FeaturePhoto',
component: FeaturePhoto,
...withComponentDocs(componentDocs), ...withComponentDocs(componentDocs),
argTypes: { argTypes: {
width: { width: {
control: 'select', control: 'select',
options: ['normal', 'wide', 'wider', 'widest', 'fluid'], options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
}, },
} },
}; };
</script> </script>
<Meta {...meta} /> <Meta
title="Components/FeaturePhoto"
component="{FeaturePhoto}"
{...metaProps}
/>
<Template let:args> <Template let:args>
<FeaturePhoto {...args} /> <FeaturePhoto {...args} />
@ -39,31 +41,31 @@
<Story <Story
name="Default" name="Default"
args={{ args="{{
src: sharkSrc, src: sharkSrc,
altText: 'A shark!', altText: 'A shark!',
width: 'normal', width: 'normal',
caption: 'Carcharodon carcharias - REUTERS' caption: 'Carcharodon carcharias - REUTERS',
}} }}"
/> />
<Story <Story
name="🚀 QUICKIT" name="🚀 QUICKIT"
args={{ args="{{
src: sharkSrc, src: sharkSrc,
altText: 'A shark!', altText: 'A shark!',
width: 'normal', width: 'normal',
caption: 'Carcharodon carcharias - REUTERS' caption: 'Carcharodon carcharias - REUTERS',
}} }}"
{...withStoryDocs(quickitDocs)} {...withStoryDocs(quickitDocs)}
/> />
<Story <Story
name="Missing altText" name="Missing altText"
args={{ args="{{
src: sharkSrc, src: sharkSrc,
width: 'normal', width: 'normal',
caption: 'Carcharodon carcharias - REUTERS' caption: 'Carcharodon carcharias - REUTERS',
}} }}"
{...withStoryDocs(missingAltTextDocs)} {...withStoryDocs(missingAltTextDocs)}
/> />

20
src/components/Framer/Framer.stories.svelte
View file

@ -6,18 +6,14 @@
import Framer from './Framer.svelte'; import Framer from './Framer.svelte';
import { import { withComponentDocs } from '$lib/docs/utils/withParams.js';
withComponentDocs
} from '$lib/docs/utils/withParams.js';
const meta = {
title: 'Utilities/Framer',
component: Framer,
...withComponentDocs(componentDocs),
};
</script> </script>
<Meta {...meta} /> <Meta
title="Utilities/Framer"
component="{Framer}"
{...withComponentDocs(componentDocs)}
/>
<Template let:args> <Template let:args>
<Framer {...args} /> <Framer {...args} />
@ -25,9 +21,9 @@
<Story <Story
name="Default" name="Default"
args={{ args="{{
embeds: [ embeds: [
'https://graphics.reuters.com/USA-CONGRESS/FUNDRAISING/zjvqkawjlvx/embeds/en/embed/?zzz', 'https://graphics.reuters.com/USA-CONGRESS/FUNDRAISING/zjvqkawjlvx/embeds/en/embed/?zzz',
], ],
}} }}"
/> />

43
src/components/GraphicBlock/GraphicBlock.stories.svelte
View file

@ -21,11 +21,8 @@
// @ts-ignore // @ts-ignore
import PlaceholderImg from './stories/placeholder.png'; import PlaceholderImg from './stories/placeholder.png';
const meta = { const metaProps = {
title: 'Components/GraphicBlock',
component: GraphicBlock,
...withComponentDocs(componentDocs), ...withComponentDocs(componentDocs),
// https://storybook.js.org/docs/svelte/essentials/controls
argTypes: { argTypes: {
width: { width: {
control: 'select', control: 'select',
@ -39,7 +36,11 @@
}; };
</script> </script>
<Meta {...meta} /> <Meta
title="Components/GraphicBlock"
component="{GraphicBlock}"
{...metaProps}
/>
<Template let:args> <Template let:args>
<GraphicBlock {...args}> <GraphicBlock {...args}>
@ -54,15 +55,14 @@
args="{{ args="{{
width: 'normal', width: 'normal',
title: 'Bacon ipsum dolor amet t-bone', title: 'Bacon ipsum dolor amet t-bone',
description: "Pork loin t-bone jowl prosciutto, short loin flank kevin tri-tip cupim pig pork. Meatloaf tri-tip frankfurter short ribs, cupim brisket bresaola chislic tail jerky burgdoggen pancetta.", description:
notes: "Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)" 'Pork loin t-bone jowl prosciutto, short loin flank kevin tri-tip cupim pig pork. Meatloaf tri-tip frankfurter short ribs, cupim brisket bresaola chislic tail jerky burgdoggen pancetta.',
notes:
'Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)',
}}" }}"
/> />
<Story <Story name="🚀 QUICKIT" {...withStoryDocs(quickitDocs)}>
name="🚀 QUICKIT"
{...withStoryDocs(quickitDocs)}
>
<GraphicBlock <GraphicBlock
width="normal" width="normal"
title="Earthquake in Haiti" title="Earthquake in Haiti"
@ -73,13 +73,8 @@
</GraphicBlock> </GraphicBlock>
</Story> </Story>
<Story <Story name="Custom text" {...withStoryDocs(customTextDocs)}>
name="Custom text" <GraphicBlock width="normal">
{...withStoryDocs(customTextDocs)}
>
<GraphicBlock
width="normal"
>
<div slot="title"> <div slot="title">
<h5>My smaller title</h5> <h5>My smaller title</h5>
</div> </div>
@ -92,10 +87,7 @@
</GraphicBlock> </GraphicBlock>
</Story> </Story>
<Story <Story name="Ai2svelte" {...withStoryDocs(ai2svelteDocs)}>
name="Ai2svelte"
{...withStoryDocs(ai2svelteDocs)}
>
<GraphicBlock <GraphicBlock
width="normal" width="normal"
title="Earthquake in Haiti" title="Earthquake in Haiti"
@ -106,10 +98,7 @@
</GraphicBlock> </GraphicBlock>
</Story> </Story>
<Story <Story name="ARIA" {...withStoryDocs(ariaDocs)}>
name="ARIA"
{...withStoryDocs(ariaDocs)}
>
<GraphicBlock <GraphicBlock
width="normal" width="normal"
title="Earthquake in Haiti" title="Earthquake in Haiti"
@ -132,4 +121,4 @@
opacity: 0.4; opacity: 0.4;
} }
} }
</style> </style>

12
src/components/Headline/Headline.stories.svelte
View file

@ -19,15 +19,13 @@
withComponentDocs, withComponentDocs,
withStoryDocs, withStoryDocs,
} from '$lib/docs/utils/withParams.js'; } from '$lib/docs/utils/withParams.js';
const meta = {
title: 'Components/Headline',
component: Headline,
...withComponentDocs(componentDocs),
};
</script> </script>
<Meta {...meta} /> <Meta
title="Components/Headline"
component="{Headline}"
{...withComponentDocs(componentDocs)}
/>
<Template let:args> <Template let:args>
<Headline {...args} /> <Headline {...args} />

23
src/components/Hero/Hero.stories.svelte
View file

@ -9,19 +9,14 @@
import Hero from './Hero.svelte'; import Hero from './Hero.svelte';
import { import { withComponentDocs } from '$lib/docs/utils/withParams.js';
withComponentDocs,
withStoryDocs,
} from '$lib/docs/utils/withParams.js';
const meta = {
title: 'Components/Hero',
component: Hero,
...withComponentDocs(componentDocs),
};
</script> </script>
<Meta {...meta} /> <Meta
title="Components/Hero"
component="{Hero}"
{...withComponentDocs(componentDocs)}
/>
<Template let:args> <Template let:args>
<Hero {...args} /> <Hero {...args} />
@ -29,9 +24,9 @@
<Story <Story
name="Default" name="Default"
args={{ args="{{
section: 'World News', section: 'World News',
hed: 'Reuters Graphics interactive', hed: 'Reuters Graphics interactive',
imgSrc: polarImgSrc, imgSrc: polarImgSrc,
}} }}"
/> />

22
src/components/NoteText/NoteText.stories.svelte
View file

@ -6,18 +6,14 @@
import NoteText from './NoteText.svelte'; import NoteText from './NoteText.svelte';
import { import { withComponentDocs } from '$lib/docs/utils/withParams.js';
withComponentDocs
} from '$lib/docs/utils/withParams.js';
const meta = {
title: 'Components/NoteText',
component: NoteText,
...withComponentDocs(componentDocs),
};
</script> </script>
<Meta {...meta} /> <Meta
title="Components/NoteText"
component="{NoteText}"
{...withComponentDocs(componentDocs)}
/>
<Template let:args> <Template let:args>
<NoteText {...args} /> <NoteText {...args} />
@ -25,13 +21,13 @@
<Story <Story
name="Default" name="Default"
args={{ args="{{
text: `## Source text: `## Source
[European Forest Fire Information System](https://effis.jrc.ec.europa.eu/); Reuters research [European Forest Fire Information System](https://effis.jrc.ec.europa.eu/); Reuters research
#### Credits #### Credits
Jane Doe & John Doe` Jane Doe & John Doe`,
}} }}"
/> />

12
src/components/PaddingReset/PaddingReset.stories.svelte
View file

@ -8,15 +8,13 @@
import Block from '../Block/Block.svelte'; import Block from '../Block/Block.svelte';
import { withComponentDocs } from '$lib/docs/utils/withParams.js'; import { withComponentDocs } from '$lib/docs/utils/withParams.js';
const meta = {
title: 'Utilities/PaddingReset',
component: PaddingReset,
...withComponentDocs(componentDocs),
};
</script> </script>
<Meta {...meta} /> <Meta
title="Utilities/PaddingReset"
component="{PaddingReset}"
{...withComponentDocs(componentDocs)}
/>
<Template let:args> <Template let:args>
<Block width="fluid"> <Block width="fluid">

11
src/components/PhotoCarousel/PhotoCarousel.stories.svelte
View file

@ -15,11 +15,8 @@
const photos = photosJson.map((p) => ({ ...p, altText: p.caption })); const photos = photosJson.map((p) => ({ ...p, altText: p.caption }));
const meta = { const metaProps = {
title: 'Components/PhotoCarousel',
component: PhotoCarousel,
...withComponentDocs(componentDocs), ...withComponentDocs(componentDocs),
// https://storybook.js.org/docs/svelte/essentials/controls
argTypes: { argTypes: {
width: { width: {
control: 'select', control: 'select',
@ -29,7 +26,11 @@
}; };
</script> </script>
<Meta {...meta} /> <Meta
title="Components/PhotoCarousel"
component="{PhotoCarousel}"
{...metaProps}
/>
<Template let:args> <Template let:args>
<PhotoCarousel {...args} /> <PhotoCarousel {...args} />

6
src/components/PhotoPack/PhotoPack.stories.svelte
View file

@ -13,9 +13,7 @@
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js'; import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
const meta = { const metaProps = {
title: 'Components/PhotoPack',
component: PhotoPack,
...withComponentDocs(componentDocs), ...withComponentDocs(componentDocs),
argTypes: { argTypes: {
width: { width: {
@ -121,7 +119,7 @@
const altTextLayouts = [{ breakpoint: 450, rows: [2] }]; const altTextLayouts = [{ breakpoint: 450, rows: [2] }];
</script> </script>
<Meta {...meta} /> <Meta title="Components/PhotoPack" component="{PhotoPack}" {...metaProps} />
<Template let:args> <Template let:args>
<PhotoPack {...args} /> <PhotoPack {...args} />

20
src/components/PymChild/PymChild.stories.svelte
View file

@ -6,24 +6,18 @@
import PymChild from './PymChild.svelte'; import PymChild from './PymChild.svelte';
import { import { withComponentDocs } from '$lib/docs/utils/withParams.js';
withComponentDocs
} from '$lib/docs/utils/withParams.js';
const meta = {
title: 'Utilities/PymChild',
component: PymChild,
...withComponentDocs(componentDocs),
};
</script> </script>
<Meta {...meta} /> <Meta
title="Utilities/PymChild"
component="{PymChild}"
{...withComponentDocs(componentDocs)}
/>
<Template let:args> <Template let:args>
<PymChild {...args} /> <PymChild {...args} />
<div>Nothing to see here. 😎</div> <div>Nothing to see here. 😎</div>
</Template> </Template>
<Story <Story name="Default" />
name="Default"
/>

12
src/components/ReferralBlock/ReferralBlock.stories.svelte
View file

@ -1,7 +1,6 @@
<script> <script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf'; import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
// Don't lose the "?raw" in markdown imports!
// @ts-ignore // @ts-ignore
import componentDocs from './stories/docs/component.md?raw'; import componentDocs from './stories/docs/component.md?raw';
@ -9,11 +8,8 @@
import { withComponentDocs } from '$docs/utils/withParams.js'; import { withComponentDocs } from '$docs/utils/withParams.js';
const meta = { const metaProps = {
title: 'Components/ReferralBlock',
component: ReferralBlock,
...withComponentDocs(componentDocs), ...withComponentDocs(componentDocs),
// https://storybook.js.org/docs/svelte/essentials/controls
argTypes: { argTypes: {
width: { width: {
control: 'select', control: 'select',
@ -39,7 +35,11 @@
}; };
</script> </script>
<Meta {...meta} /> <Meta
title="Components/ReferralBlock"
component="{ReferralBlock}"
{...metaProps}
/>
<Template let:args> <Template let:args>
<ReferralBlock {...args} /> <ReferralBlock {...args} />

13
src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte
View file

@ -8,16 +8,13 @@
import ReutersGraphicsLogo from './ReutersGraphicsLogo.svelte'; import ReutersGraphicsLogo from './ReutersGraphicsLogo.svelte';
import { withComponentDocs } from '$docs/utils/withParams.js'; import { withComponentDocs } from '$docs/utils/withParams.js';
const meta = {
title: 'Components/ReutersGraphicsLogo',
component: ReutersGraphicsLogo,
...withComponentDocs(componentDocs),
// https://storybook.js.org/docs/svelte/essentials/controls
};
</script> </script>
<Meta {...meta} /> <Meta
title="Components/ReutersGraphicsLogo"
component="{ReutersGraphicsLogo}"
{...withComponentDocs(componentDocs)}
/>
<Template let:args> <Template let:args>
<ReutersGraphicsLogo {...args} /> <ReutersGraphicsLogo {...args} />

16
src/components/ReutersLogo/ReutersLogo.stories.svelte
View file

@ -6,27 +6,21 @@
import ReutersLogo from './ReutersLogo.svelte'; import ReutersLogo from './ReutersLogo.svelte';
import { import { withComponentDocs } from '$lib/docs/utils/withParams.js';
withComponentDocs
} from '$lib/docs/utils/withParams.js';
const meta = { const metaProps = {
title: 'Components/ReutersLogo',
component: ReutersLogo,
...withComponentDocs(componentDocs), ...withComponentDocs(componentDocs),
argTypes: { argTypes: {
logoColour: { control: 'color' }, logoColour: { control: 'color' },
textColour: { control: 'color' }, textColour: { control: 'color' },
} },
}; };
</script> </script>
<Meta {...meta} /> <Meta title="Components/ReutersLogo" component="{ReutersLogo}" {...metaProps} />
<Template let:args> <Template let:args>
<ReutersLogo {...args} /> <ReutersLogo {...args} />
</Template> </Template>
<Story <Story name="Default" />
name="Default"
/>

12
src/components/SEO/SEO.stories.svelte
View file

@ -12,15 +12,13 @@
withComponentDocs, withComponentDocs,
withStoryDocs, withStoryDocs,
} from '$lib/docs/utils/withParams.js'; } from '$lib/docs/utils/withParams.js';
const meta = {
title: 'Components/SEO',
component: SEO,
...withComponentDocs(componentDocs),
};
</script> </script>
<Meta {...meta} /> <Meta
title="Components/SEO"
component="{SEO}"
{...withComponentDocs(componentDocs)}
/>
<Template let:args> <Template let:args>
<SEO {...args} /> <SEO {...args} />

6
src/components/Scroller/Scroller.stories.svelte
View file

@ -57,9 +57,7 @@
], ],
}; };
const meta = { const metaProps = {
title: 'Components/Scroller',
component: Scroller,
...withComponentDocs(componentDocs), ...withComponentDocs(componentDocs),
argTypes: { argTypes: {
steps: { control: false }, steps: { control: false },
@ -79,7 +77,7 @@
}; };
</script> </script>
<Meta {...meta} /> <Meta title="Components/Scroller" component="{Scroller}" {...metaProps} />
<Template let:args> <Template let:args>
<Scroller {...args} /> <Scroller {...args} />

20
src/components/Sharer/Sharer.stories.svelte
View file

@ -6,23 +6,17 @@
import Sharer from './Sharer.svelte'; import Sharer from './Sharer.svelte';
import { import { withComponentDocs } from '$lib/docs/utils/withParams.js';
withComponentDocs
} from '$lib/docs/utils/withParams.js';
const meta = {
title: 'Utilities/Sharer',
component: Sharer,
...withComponentDocs(componentDocs),
};
</script> </script>
<Meta {...meta} /> <Meta
title="Utilities/Sharer"
component="{Sharer}"
{...withComponentDocs(componentDocs)}
/>
<Template let:args> <Template let:args>
<Sharer {...args} /> <Sharer {...args} />
</Template> </Template>
<Story <Story name="Default" />
name="Default"
/>

10
src/components/SimpleTimeline/SimpleTimeline.stories.svelte
View file

@ -8,9 +8,7 @@
import { withComponentDocs } from '$docs/utils/withParams.js'; import { withComponentDocs } from '$docs/utils/withParams.js';
const meta = { const metaProps = {
title: 'Components/SimpleTimeline',
component: SimpleTimeline,
...withComponentDocs(componentDocs), ...withComponentDocs(componentDocs),
argTypes: { argTypes: {
symbolColour: { control: 'color' }, symbolColour: { control: 'color' },
@ -94,7 +92,11 @@
]; ];
</script> </script>
<Meta {...meta} /> <Meta
title="Components/SimpleTimeline"
component="{SimpleTimeline}"
{...metaProps}
/>
<Template let:args> <Template let:args>
<SimpleTimeline {...args} /> <SimpleTimeline {...args} />

14
src/components/SiteFooter/SiteFooter.stories.svelte
View file

@ -16,12 +16,6 @@
withStoryDocs, withStoryDocs,
} from '$lib/docs/utils/withParams.js'; } from '$lib/docs/utils/withParams.js';
const meta = {
title: 'Components/SiteFooter',
component: SiteFooter,
...withComponentDocs(componentDocs),
};
const customReferrals = [ const customReferrals = [
{ {
url: 'https://graphics.reuters.com/world-coronavirus-tracker-and-maps/', url: 'https://graphics.reuters.com/world-coronavirus-tracker-and-maps/',
@ -40,7 +34,11 @@
]; ];
</script> </script>
<Meta {...meta} /> <Meta
title="Components/SiteFooter"
component="{SiteFooter}"
{...withComponentDocs(componentDocs)}
/>
<Template let:args> <Template let:args>
<div> <div>
@ -48,7 +46,7 @@
</div> </div>
</Template> </Template>
<Story name="Default" /> <Story name="Default" id="site-footer--default" />
<Story name="Customised theme" {...withStoryDocs(darkThemeDocs)}> <Story name="Customised theme" {...withStoryDocs(darkThemeDocs)}>
<div> <div>

6
src/components/SiteHeader/SiteHeader.stories.svelte
View file

@ -14,9 +14,7 @@
withStoryDocs, withStoryDocs,
} from '$lib/docs/utils/withParams.js'; } from '$lib/docs/utils/withParams.js';
const meta = { const metaProps = {
title: 'Components/SiteHeader',
component: SiteHeader,
...withComponentDocs(componentDocs), ...withComponentDocs(componentDocs),
argsTypes: { argsTypes: {
themes: { control: { disable: true } }, themes: { control: { disable: true } },
@ -24,7 +22,7 @@
}; };
</script> </script>
<Meta {...meta} /> <Meta title="Components/SiteHeader" component="{SiteHeader}" {...metaProps} />
<Template let:args> <Template let:args>
<div> <div>

12
src/components/SiteHeadline/SiteHeadline.stories.svelte
View file

@ -13,12 +13,6 @@
withStoryDocs, withStoryDocs,
} from '$lib/docs/utils/withParams.js'; } from '$lib/docs/utils/withParams.js';
const meta = {
title: 'Components/SiteHeadline',
component: SiteHeadline,
...withComponentDocs(componentDocs),
};
const content = { const content = {
Section: 'Global News', Section: 'Global News',
SectionUrl: '', SectionUrl: '',
@ -29,7 +23,11 @@
}; };
</script> </script>
<Meta {...meta} /> <Meta
title="Components/SiteHeadline"
component="{SiteHeadline}"
{...withComponentDocs(componentDocs)}
/>
<Template let:args> <Template let:args>
<SiteHeadline {...args} /> <SiteHeadline {...args} />

15
src/components/Spinner/Spinner.stories.svelte
View file

@ -6,26 +6,23 @@
import Spinner from './Spinner.svelte'; import Spinner from './Spinner.svelte';
import { import { withComponentDocs } from '$lib/docs/utils/withParams.js';
withSource,
withComponentDocs
} from '$lib/docs/utils/withParams.js';
const meta = { const metaProps = {
title: 'Components/Spinner',
component: Spinner,
...withComponentDocs(componentDocs), ...withComponentDocs(componentDocs),
argTypes: { argTypes: {
colour: { control: 'color' }, colour: { control: 'color' },
ringWidth: { control: { type: 'range', min: 2, max: 20, step: 1 } }, ringWidth: { control: { type: 'range', min: 2, max: 20, step: 1 } },
width: { control: { type: 'range', min: 5, max: 100, step: 5 } }, width: { control: { type: 'range', min: 5, max: 100, step: 5 } },
speed: { control: { type: 'range', min: 0.2, max: 1.0, step: 0.1 } }, speed: { control: { type: 'range', min: 0.2, max: 1.0, step: 0.1 } },
containerPadding: { control: { type: 'range', min: 5, max: 100, step: 5 } }, containerPadding: {
control: { type: 'range', min: 5, max: 100, step: 5 },
},
}, },
}; };
</script> </script>
<Meta {...meta} /> <Meta title="Components/Spinner" component="{Spinner}" {...metaProps} />
<Template let:args> <Template let:args>
<Spinner {...args} /> <Spinner {...args} />

8
src/components/Table/Table.stories.svelte
View file

@ -27,17 +27,13 @@
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js'; import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
// You can import JSON you need in stories directly in code!
// @ts-ignore // @ts-ignore
import pressFreedom from './stories/pressFreedom.json'; import pressFreedom from './stories/pressFreedom.json';
import homeRuns from './stories/homeRuns.json'; import homeRuns from './stories/homeRuns.json';
import richestWomen from './stories/richestWomen.json'; import richestWomen from './stories/richestWomen.json';
const meta = { const metaProps = {
title: 'Components/Table',
component: Table,
...withComponentDocs(componentDocs), ...withComponentDocs(componentDocs),
// https://storybook.js.org/docs/svelte/essentials/controls
argTypes: { argTypes: {
width: { width: {
control: 'select', control: 'select',
@ -47,7 +43,7 @@
}; };
</script> </script>
<Meta {...meta} /> <Meta title="Components/Table" component="{Table}" {...metaProps} />
<Template let:args> <Template let:args>
<Table {...args} /> <Table {...args} />

6
src/components/Theme/Theme.stories.svelte
View file

@ -20,9 +20,7 @@
withStoryDocs, withStoryDocs,
} from '$lib/docs/utils/withParams.js'; } from '$lib/docs/utils/withParams.js';
const meta = { const metaProps = {
title: 'Theming/Theme',
component: Theme,
...withComponentDocs(componentDocs), ...withComponentDocs(componentDocs),
argTypes: { argTypes: {
base: { base: {
@ -34,7 +32,7 @@
}; };
</script> </script>
<Meta {...meta} /> <Meta title="Theming/Theme" component="{Theme}" {...metaProps} />
<Template let:args> <Template let:args>
<div class="reset-article"> <div class="reset-article">

12
src/components/ToolsHeader/ToolsHeader.stories.svelte
View file

@ -8,15 +8,13 @@
import ToolsHeader from './ToolsHeader.svelte'; import ToolsHeader from './ToolsHeader.svelte';
import { withComponentDocs } from '$docs/utils/withParams.js'; import { withComponentDocs } from '$docs/utils/withParams.js';
const meta = {
title: 'Utilities/ToolsHeader',
component: ToolsHeader,
...withComponentDocs(componentDocs),
};
</script> </script>
<Meta {...meta} /> <Meta
title="Utilities/ToolsHeader"
component="{ToolsHeader}"
{...withComponentDocs(componentDocs)}
/>
<Template let:args> <Template let:args>
<div> <div>

12
src/components/Video/Video.stories.svelte
View file

@ -21,15 +21,13 @@
withComponentDocs, withComponentDocs,
withStoryDocs, withStoryDocs,
} from '$lib/docs/utils/withParams.js'; } from '$lib/docs/utils/withParams.js';
const meta = {
title: 'Components/Video',
component: Video,
...withComponentDocs(componentDocs),
};
</script> </script>
<Meta {...meta} /> <Meta
title="Components/Video"
component="{Video}"
{...withComponentDocs(componentDocs)}
/>
<Template let:args> <Template let:args>
<Video {...args} /> <Video {...args} />

12
src/components/Visible/Visible.stories.svelte
View file

@ -9,15 +9,13 @@
import Visible from './Visible.svelte'; import Visible from './Visible.svelte';
import { withSource, withComponentDocs } from '$lib/docs/utils/withParams.js'; import { withSource, withComponentDocs } from '$lib/docs/utils/withParams.js';
const meta = {
title: 'Components/Visible',
component: Visible,
...withComponentDocs(componentDocs),
};
</script> </script>
<Meta {...meta} /> <Meta
title="Components/Visible"
component="{Visible}"
{...withComponentDocs(componentDocs)}
/>
<Template let:args> <Template let:args>
<Visible {...args} let:visible> <Visible {...args} let:visible>

4
src/docs/guides/graphics-kit.stories.mdx
View file

@ -14,9 +14,7 @@ import quickitImg from './imgs/quickit.png';
If you haven't, check out ["Using Reuters Graphics Components" in the Graphics Kit docs](https://reuters-graphics.github.io/docs_graphics-kit/for_developers/graphics-components/) to get a general idea of how to use components. If you haven't, check out ["Using Reuters Graphics Components" in the Graphics Kit docs](https://reuters-graphics.github.io/docs_graphics-kit/for_developers/graphics-components/) to get a general idea of how to use components.
<span class="highlight"> Look <span class="highlight">for <strong>🚀 QUICKIT</strong> stories</span> (Quick Kit 🤣🙄) for some of our most commonly used components. These stories
Look for <strong>🚀 QUICKIT</strong> stories
</span> (Quick Kit 🤣🙄) for some of our most commonly used components. These stories
include easy copy/paste snippets as well as Google Doc block examples that should include easy copy/paste snippets as well as Google Doc block examples that should
shortcut getting a component working in the Graphics Kit. shortcut getting a component working in the Graphics Kit.

14
svelte.config.js Normal file
View file

@ -0,0 +1,14 @@
import autoprefixer from 'autoprefixer';
import preprocess from 'svelte-preprocess';
const config = {
preprocess: preprocess({
preserve: ['ld+json'],
scss: { quietDeps: true },
postcss: {
plugins: [autoprefixer],
},
}),
};
export default config;

18
tsconfig.json
View file

@ -1,29 +1,37 @@
{ {
"extends": "@tsconfig/svelte/tsconfig.json",
"compilerOptions": { "compilerOptions": {
"module": "es2020", "module": "esnext",
"target": "es2019", "target": "esnext",
"declaration": true, "declaration": true,
"isolatedModules": true, "isolatedModules": true,
"esModuleInterop": true, "esModuleInterop": true,
"moduleResolution": "node",
"resolveJsonModule": true, "resolveJsonModule": true,
"allowJs": true, "allowJs": true,
"checkJs": true, "checkJs": true,
"emitDeclarationOnly": true, "emitDeclarationOnly": true,
"baseUrl": ".", "baseUrl": ".",
"rootDir": ".",
"outDir": "dist", "outDir": "dist",
"paths": { "paths": {
"$lib": ["src"], "$lib": ["src"],
"$lib/*": ["src/*"], "$lib/*": ["src/*"],
"$docs": ["src/docs"], "$docs": ["src/docs"],
"$docs/*": ["src/docs/*"] "$docs/*": ["src/docs/*"]
} },
"verbatimModuleSyntax": true,
"sourceMap": true,
"strict": false,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}, },
"include": [ "include": [
"src/**/*.js", "src/**/*.js",
"src/**/*.ts", "src/**/*.ts",
"src/**/*.svelte", "src/**/*.svelte",
"bin/**/*.{js,cjs}" "bin/**/*.{js,cjs}",
"*.ts",
"*.js"
], ],
"exclude": ["dist"] "exclude": ["dist"]
} }

13
vite.config.ts
View file

@ -1,9 +1,9 @@
import { scss, sveltePreprocess } from './bin/preprocess/index.cjs'; import { defineConfig } from 'vite';
import { scss } from './bin/preprocess/index.js';
import { svelte } from '@sveltejs/vite-plugin-svelte'; import { svelte } from '@sveltejs/vite-plugin-svelte';
/** @type {import('vite').UserConfig} */ /** @type {import('vite').UserConfig} */
const config = { const config = defineConfig({
base: 'https://reuters-graphics.github.io/graphics-components/', base: 'https://reuters-graphics.github.io/graphics-components/',
css: { css: {
preprocessorOptions: { scss }, preprocessorOptions: { scss },
@ -16,11 +16,8 @@ const config = {
}, },
}, },
plugins: [ plugins: [
svelte({ svelte({}),
configFile: false,
preprocess: sveltePreprocess,
}),
], ],
}; });
export default config; export default config;

10480
yarn.lock
View file

File diff suppressed because it is too large Load diff