raider/rtpunish-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add build script

Browse source
This commit is contained in:
Kevin Kandlbinder 2024-11-12 15:12:19 +00:00
parent 1160a04d23
commit aa89362a0f
24 changed files with 509 additions and 461 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
.forgejo/workflows/build.yaml Normal file
View file

@ -0,0 +1,41 @@
jobs:
build:
runs-on: ubuntu-latest
name: Build application
steps:
- uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 22
- name: Get NPM cache directory
id: npm-cache-dir
shell: bash
run: echo "dir=$(npm config get cache)" >> ${GITHUB_OUTPUT}
- uses: actions/cache@v4
name: Cache NPM
id: npm-cache
with:
path: ${{ steps.npm-cache-dir.outputs.dir }}
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- run: npm ci
name: Install dependencies
- run: npm lint
name: Lint code
- run: npm build
name: Build project
- run: npm test
name: Test project
- run: npm build-storybook
name: Build storybook
- uses: actions/upload-artifact@v4
name: Upload build directories
with:
name: build-artifacts
path: |
dist/
build/
.svelte-kit/
storybook-static/

2
.gitignore vendored
View file

@ -21,3 +21,5 @@ Thumbs.db
# Vite
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
/storybook-static

23
.storybook/main.js
View file

@ -1,20 +1,15 @@
/** @type { import('@storybook/sveltekit').StorybookConfig } */
const config = {
"stories": [
"../src/**/*.mdx",
"../src/**/*.stories.@(js|ts|svelte)"
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts|svelte)'],
addons: [
'@storybook/addon-svelte-csf',
'@storybook/addon-essentials',
'@chromatic-com/storybook',
'@storybook/addon-interactions'
],
"addons": [
"@storybook/addon-svelte-csf",
"@storybook/addon-essentials",
"@chromatic-com/storybook",
"@storybook/addon-interactions"
],
"framework": {
"name": "@storybook/sveltekit",
"options": {}
framework: {
name: '@storybook/sveltekit',
options: {}
}
};
export default config;

8
.storybook/preview.js
View file

@ -4,10 +4,10 @@ const preview = {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
date: /Date$/i
}
}
}
};
export default preview;

4
.vscode/extensions.json vendored
View file

@ -1,5 +1,3 @@
{
"recommendations": [
"inlang.vs-code-extension"
]
"recommendations": ["inlang.vs-code-extension"]
}

31
src/app.css
View file

@ -18,28 +18,33 @@
--color-secondary-900: #a8a4ea;
--color-accent: var(--color-primary-500);
--color-accent-contrast: #fff;
--color-border: rgba(0, 0, 0, .1);
--color-border: rgba(0, 0, 0, 0.1);
--color-surface: #ececec;
--color-dark-surface: rgba(26, 37, 22, .9);
--color-dark-surface: rgba(26, 37, 22, 0.9);
--color-dark-surface-text: white;
--color-dark-surface-text-dim: #808080;
--color-light-surface: rgba(255, 255, 255, .9);
--color-light-surface: rgba(255, 255, 255, 0.9);
--color-light-surface-text: var(--color-text);
--color-accent-surface: var(--color-accent);
--color-accent-surface-text: var(--color-accent-contrast);
--color-highlight-accent: rgba(255, 145, 49, .2);
--color-highlight-blue: rgba(10, 10, 255, .2);
--color-highlight-white: rgba(200, 200, 200, .2);
--color-highlight-grey: rgba(100, 100, 100, .2);
--color-highlight-yellow: rgba(255, 230, 10, .2);
--color-highlight-green: rgba(10, 255, 10, .2);
--color-highlight-red: rgba(255, 10, 10, .2);
--color-highlight-pink: rgba(255, 128, 255, .2);
--color-highlight-purple: rgba(204, 30, 152, .2);
--color-highlight-accent: rgba(255, 145, 49, 0.2);
--color-highlight-blue: rgba(10, 10, 255, 0.2);
--color-highlight-white: rgba(200, 200, 200, 0.2);
--color-highlight-grey: rgba(100, 100, 100, 0.2);
--color-highlight-yellow: rgba(255, 230, 10, 0.2);
--color-highlight-green: rgba(10, 255, 10, 0.2);
--color-highlight-red: rgba(255, 10, 10, 0.2);
--color-highlight-pink: rgba(255, 128, 255, 0.2);
--color-highlight-purple: rgba(204, 30, 152, 0.2);
--color-text: black;
--color-background: var(--color-base);
--nav-space: 95px;
--fill-pattern: repeating-linear-gradient( var(--layout-slant), var(--color-base) 0, var(--color-primary-500) .5px 3px, var(--color-base) 3.5px 12px );
--fill-pattern: repeating-linear-gradient(
var(--layout-slant),
var(--color-base) 0,
var(--color-primary-500) 0.5px 3px,
var(--color-base) 3.5px 12px
);
--filter-gray: grayscale(1);
}

10
src/lib/components/ActionCard.svelte
View file

@ -1,13 +1,13 @@
<script lang="ts">
import type { Action } from "$lib/types";
import { Coins } from "lucide-svelte";
import type { Action } from '$lib/types';
import { Coins } from 'lucide-svelte';
import * as m from '$lib/paraglide/messages.js';
export let action: Action;
const onclick = (ev: MouseEvent) => {
ev.preventDefault();
}
};
</script>
<button class="action-card" {onclick}>
@ -29,7 +29,7 @@
align-items: flex-start;
.body-part {
opacity: .75;
opacity: 0.75;
}
.type {
@ -43,7 +43,7 @@
display: flex;
justify-content: center;
gap: 5px;
opacity: .75;
opacity: 0.75;
> :global(svg) {
color: var(--color-accent);

2
src/lib/components/StoreGrid.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts">
import type { Action } from "$lib/types";
import type { Action } from '$lib/types';
import ActionCard from './ActionCard.svelte';
export let actions: Action[];
</script>

6
src/lib/types.ts
View file

@ -1,17 +1,17 @@
/**
* An action to execute.
*/
export type ActionType = "shock"|"vibrate";
export type ActionType = 'shock' | 'vibrate';
/**
* A body part an action can affect.
*/
export type BodyPartKey = "throat"|"thigh"|"ankle"|"upper_arm";
export type BodyPartKey = 'throat' | 'thigh' | 'ankle' | 'upper_arm';
/**
* Time in seconds or burst.
*/
export type Time = number|"burst";
export type Time = number | 'burst';
/**
* Entry in the coinshop.

2
src/routes/+layout.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts">
import { i18n } from '$lib/i18n';
import { ParaglideJS } from '@inlang/paraglide-sveltekit';
import "../app.css";
import '../app.css';
import '@fontsource-variable/roboto-flex/full.css';

26
src/routes/+page.svelte
View file

@ -1,25 +1,25 @@
<script lang="ts">
import StoreGrid from "$lib/components/StoreGrid.svelte";
import type { Action } from "$lib/types.js";
import StoreGrid from '$lib/components/StoreGrid.svelte';
import type { Action } from '$lib/types.js';
const exampleEntries: Action[] = [
{
id: "abcd",
type: "shock",
bodyPart: "thigh",
id: 'abcd',
type: 'shock',
bodyPart: 'thigh',
cost: 12,
subject: "raider",
time: "burst"
subject: 'raider',
time: 'burst'
},
{
id: "efgh",
type: "shock",
bodyPart: "ankle",
id: 'efgh',
type: 'shock',
bodyPart: 'ankle',
cost: 8,
subject: "raider",
time: "burst"
subject: 'raider',
time: 'burst'
}
]
];
</script>
<h1>Punish Raider</h1>

6
src/stories/Button.stories.svelte
View file

@ -12,11 +12,11 @@
backgroundColor: { control: 'color' },
size: {
control: { type: 'select' },
options: ['small', 'medium', 'large'],
},
options: ['small', 'medium', 'large']
}
},
args: {
onClick: fn(),
onClick: fn()
}
});
</script>

37
src/stories/Configure.mdx
View file

@ -1,21 +1,22 @@
import { Meta } from "@storybook/blocks";
import { Meta } from '@storybook/blocks';
import Github from "./assets/github.svg";
import Discord from "./assets/discord.svg";
import Youtube from "./assets/youtube.svg";
import Tutorials from "./assets/tutorials.svg";
import Styling from "./assets/styling.png";
import Context from "./assets/context.png";
import Assets from "./assets/assets.png";
import Docs from "./assets/docs.png";
import Share from "./assets/share.png";
import FigmaPlugin from "./assets/figma-plugin.png";
import Testing from "./assets/testing.png";
import Accessibility from "./assets/accessibility.png";
import Theming from "./assets/theming.png";
import AddonLibrary from "./assets/addon-library.png";
import Github from './assets/github.svg';
import Discord from './assets/discord.svg';
import Youtube from './assets/youtube.svg';
import Tutorials from './assets/tutorials.svg';
import Styling from './assets/styling.png';
import Context from './assets/context.png';
import Assets from './assets/assets.png';
import Docs from './assets/docs.png';
import Share from './assets/share.png';
import FigmaPlugin from './assets/figma-plugin.png';
import Testing from './assets/testing.png';
import Accessibility from './assets/accessibility.png';
import Theming from './assets/theming.png';
import AddonLibrary from './assets/addon-library.png';
export const RightArrow = () => <svg
export const RightArrow = () => (
<svg
viewBox="0 0 14 14"
width="8px"
height="14px"
@ -30,6 +31,7 @@ export const RightArrow = () => <svg
>
<path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
</svg>
);
<Meta title="Configure your project" />
@ -38,6 +40,7 @@ export const RightArrow = () => <svg
# Configure your project
Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
</div>
<div className="sb-section">
<div className="sb-section-item">
@ -84,6 +87,7 @@ export const RightArrow = () => <svg
# Do more with Storybook
Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
</div>
<div className="sb-section">
@ -203,6 +207,7 @@ export const RightArrow = () => <svg
target="_blank"
>Discover tutorials<RightArrow /></a>
</div>
</div>
<style>

4
src/stories/Header.stories.svelte
View file

@ -11,12 +11,12 @@
tags: ['autodocs'],
parameters: {
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
layout: 'fullscreen',
layout: 'fullscreen'
},
args: {
onLogin: fn(),
onLogout: fn(),
onCreateAccount: fn(),
onCreateAccount: fn()
}
});
</script>

8
src/stories/Page.stories.svelte
View file

@ -10,12 +10,14 @@
component: Page,
parameters: {
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
layout: 'fullscreen',
},
layout: 'fullscreen'
}
});
</script>
<Story name="Logged In" play={async ({ canvasElement }) => {
<Story
name="Logged In"
play={async ({ canvasElement }) => {
const canvas = within(canvasElement);
const loginButton = canvas.getByRole('button', { name: /Log in/i });
await expect(loginButton).toBeInTheDocument();