cclkit4svelte 0.1.4 → 0.1.5

package/README.md

@@ -1,4 +1,6 @@
 # ccl-component-kit4svelte
+[![Release Storybook to GitHubPages](https://github.com/reiji1020/ccl-component-kit4svelte/actions/workflows/storybook-release.yaml/badge.svg?branch=main)](https://github.com/reiji1020/ccl-component-kit4svelte/actions/workflows/storybook-release.yaml)
+[![Publish Package to npmjs](https://github.com/reiji1020/ccl-component-kit4svelte/actions/workflows/publish-package.yaml/badge.svg?branch=main)](https://github.com/reiji1020/ccl-component-kit4svelte/actions/workflows/publish-package.yaml)
 
 CANDY CHUPS Labのサイトで使うコンポーネントのキットです。
 元々Reactコンポーネントで開発していたのをSvelteに移行しました。
@@ -7,7 +9,7 @@ CANDY CHUPS Labのサイトで使うコンポーネントのキットです。
 
 ## Figma
 
-<https://www.figma.com/files/project/71337935/CCL_Component?fuid=1036675751093311196>
+https://www.figma.com/files/project/71337935/CCL_Component?fuid=1036675751093311196>
 
 ## 利用用途
 
@@ -29,14 +31,14 @@ or
 
 ## 本ライブラリの開発について
 
-コンポーネントライブラリの開発には、Node.jsのVersion18以降の環境が必要です。パッケージマネージャにはnpmを使用します。詳細なバージョンについては`package.json`に記載をしていますのでご確認ください。
+コンポーネントライブラリの開発には、Node.jsのVersion20以降の環境が必要です。パッケージマネージャにはnpmを使用します。詳細なバージョンについては`package.json`に記載をしていますのでご確認ください。
 
 Node.jsのバージョン切り替えには[Volta](https://volta.sh/)をおすすめします。
 
 ```zsh
 volta install node
 # or
-volta install node@18
+volta install node@20
 
 node -v
 #任意のNodeのバージョンが表示されればOK
@@ -65,7 +67,7 @@ Everything you need to build a Svelte project, powered by [`create-svelte`](http
 
 ## Figma
 
-<https://www.figma.com/files/project/71337935/CCL_Component?fuid=1036675751093311196>
+https://www.figma.com/files/project/71337935/CCL_Component?fuid=1036675751093311196>
 
 ## Usage
 
@@ -87,14 +89,14 @@ or
 
 ## About the development of this library
 
-The development of component libraries requires a Node.js environment with Version 18 or higher. Use npm as the package manager. Please check the `package.json` for detailed version information.
+The development of component libraries requires a Node.js environment with Version 20 or higher. Use npm as the package manager. Please check the `package.json` for detailed version information.
 
 We recommend [Volta](https://volta.sh/) for switching Node.js versions.
 
 ```zsh
 volta install node
 # or
-volta install node@18
+volta install node@20
 
 node -v
 #Once the desired Node version is displayed, it is OK.

package/dist/Button.svelte

@@ -3,7 +3,7 @@ export let label;
 </script>
 
 <!--汎用ボタン-->
-<button class="buttonWrapper" style="background: var({bgColor})"><span class="btLabel">{label}</span></button>
+<button class="buttonWrapper" style="--bgColor: var({bgColor})"><span class="btLabel">{label}</span></button>
 
 <style>
     .buttonWrapper {
@@ -11,6 +11,7 @@ export let label;
         border-radius: 50px;
         border: none;
         padding: 15px 45px;
+        background: var(--bgColor);
     }
     .btLabel {
         flex-direction: column;

package/dist/Footer.svelte

@@ -5,18 +5,20 @@ const year = date.getFullYear();
 
 <!--汎用フッター-->
 <footer>
-    <div class="wrapper" style="background: var({bgColor});">
+    <div class="wrapper" style="--bgColor: var({bgColor});">
         <span class="copy">Copyright © 2015-{year} CANDY CHUPS Lab. All Rights Reserved.</span>
     </div>
 </footer>
 
 <style>
+
     .wrapper {
         display: flex;
         padding: 0 298px;
         height: 30px;
         justify-content: center;
         align-items: center;
+        background: var(--bgColor);
     }
 
     .copy {

package/dist/Header.svelte

@@ -4,7 +4,7 @@ export let height;
 
 <!--汎用ヘッダー-->
 <header>
-    <div class="wrapper" style="background: var({bgColor}); height: var({height})">
+    <div class="wrapper" style="--bgColor: var({bgColor}); --height: var({height})">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 768">
             <title>CANDY CHUPS Lab.</title>
             <path class="a"
@@ -45,6 +45,8 @@ export let height;
         padding: 0 298px;
         justify-content: center;
         align-items: center;
+        background: var(--bgColor);
+        height: var(--height);
     }
 
     svg {

package/dist/Thumbnail.svelte

@@ -0,0 +1,23 @@
+<script>export let imageSize;
+export let borderColor;
+export let src;
+export let altText;
+</script>
+
+<div class="ThumbnailWrapper" style="--imageSize: {imageSize}">
+    <img src={src} alt={altText} class="Thumbnail" style="--borderColor: var({borderColor})" />
+</div>
+
+<style>
+    .ThumbnailWrapper {
+        height: var(--imageSize);
+        width: var(--imageSize);
+    }
+
+    .Thumbnail {
+        height: var(--imageSize);
+        width: var(--imageSize);
+        border-radius: 320px;
+        border: 5px solid var(--borderColor);
+    }
+</style>

package/dist/Thumbnail.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+             * サムネイル画像の大きさ
+             * @type number
+             */ imageSize: string;
+        /**
+             * 枠線の色
+             * @default --strawberry-pink
+             * @type string
+             */ borderColor: string;
+        /**
+             * 画像ソース
+             * @type string
+             */ src: string;
+        /**
+             * alt属性に指定する値
+             * @type string
+             */ altText: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ThumbnailProps = typeof __propDef.props;
+export type ThumbnailEvents = typeof __propDef.events;
+export type ThumbnailSlots = typeof __propDef.slots;
+export default class Thumbnail extends SvelteComponentTyped<ThumbnailProps, ThumbnailEvents, ThumbnailSlots> {
+}
+export {};

package/dist/const/variables.css

@@ -8,7 +8,7 @@
     --grape-purple: #9707DB;
     --wrap-grey: #5F5F60;
     /*Pastel*/
-    --peach-yellow: #FFB4C3;
+    --peach-pink: #FFB4C3;
     --lemon-yellow: #FFF27A;
     --sugar-blue: #AEE4FF;
     --matcha-green: #D8FF85;

package/dist/index.d.ts

@@ -2,3 +2,4 @@ import './const/variables.css';
 export { default as Header } from './Header.svelte';
 export { default as Button } from './Button.svelte';
 export { default as Footer } from './Footer.svelte';
+export { default as Thumbnail } from './Thumbnail.svelte';

package/dist/index.js

@@ -3,3 +3,4 @@ import './const/variables.css'; // カスタムプロパティ読み込み用
 export { default as Header } from './Header.svelte';
 export { default as Button } from './Button.svelte';
 export { default as Footer } from './Footer.svelte';
+export { default as Thumbnail } from './Thumbnail.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cclkit4svelte",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "author": "reiji1020 <sk@reiji1020.info>",
   "license": "MIT",
   "type": "module",
@@ -14,38 +14,6 @@
   },
   "homepage": "https://github.com/reiji1020/ccl-component-kit4svelte#readme",
   "description": "Component kit for CANDY CHUPS Lab.",
-  "release": {
-    "plugins": [
-      "@semantic-release/commit-analyzer",
-      "@semantic-release/release-notes-generator",
-      [
-        "@semantic-release/changelog",
-        {
-          "changelogFile": "docs/CHANGELOG.md"
-        }
-      ],
-      "@semantic-release/npm",
-      [
-        "@semantic-release/git",
-        {
-          "assets": ["docs/CHANGELOG.md"]
-        }
-      ]
-    ],
-    "main": [
-      "main"
-    ]
-  },
-  "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
-  },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "dev": "vite dev",
@@ -66,8 +34,8 @@
     }
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.6.0",
-    "@commitlint/config-conventional": "^18.6.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
     "@storybook/addon-actions": "^7.6.10",
     "@storybook/addon-essentials": "^7.6.3",
     "@storybook/addon-interactions": "^7.6.3",