Merge pull request #5 from acrool/3-added-directional-control

3 added directional control

Author: imagine10255

.github/ISSUE_TEMPLATE/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,5 @@
+Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request. If it fixes a bug or resolves a feature request, be sure to link to that issue.
+
+The best way to propose a feature is to open an issue first and discuss your ideas there before implementing them.
+
+Always follow the [contribution guidelines](https://github.com/imagine10255/acrool-react-table/blob/master/CONTRIBUTING.md) when submitting a pull request.

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/workflows/deploy.yml

@@ -0,0 +1,46 @@
+name: Deploy Storybook to Pages
+
+on:
+  push:
+    tags:
+      - 'v[0-9]+.[0-9]+.[0-9]+'
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        working-directory: ./example
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Wait for npm publish
+        run: sleep 30  # 延遲30秒，可根據實際情況調整
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Replace local links with actual versions
+        run: |
+          sed -i 's#"@acrool/react-skeleton": "link:.."#"@acrool/react-toaster": "latest"#' package.json
+          sed -i 's#"react": "link:../node_modules/react"#"react": "^18.2.0"#' package.json
+          sed -i 's#"react-dom": "link:../node_modules/react-dom"#"react-dom": "^18.2.0"#' package.json
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build Storybook
+        run: yarn build-storybook
+
+      - name: Install Wrangler
+        run: yarn global add wrangler
+
+      - name: Deploy to Cloudflare Pages
+        run: wrangler pages deploy ./storybook-static --project-name=acrool-react-modal --branch main
+        env:
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [3.1.10-alpha.0](https://github.com/acrool/acrool-react-toaster/compare/v3.1.9...v3.1.10-alpha.0) (2024-10-16)
+
 ### [3.1.9](https://github.com/acrool/acrool-react-toaster/compare/v3.1.9-alpha.2...v3.1.9) (2024-09-14)
 
 ### [3.1.9-alpha.2](https://github.com/acrool/acrool-react-toaster/compare/v3.1.9-alpha.1...v3.1.9-alpha.2) (2024-08-07)

README.md

@@ -25,6 +25,8 @@
 ## Features
 
 - Supports 5 status colors: default, success, info, warning, danger
+- Support show limit
+- Support show position: top, bottom, left, center, right
 - Call via global method
 - Configurable disappearance delay seconds
 - Plug and unplug using `@acrool/react-portal` and `framer-motion`
@@ -59,7 +61,14 @@ const App = () => {
     return (
         <div>
             <BaseUsed/>
-            <ToasterPortal defaultTimeout={3000}/>
+            <ToasterPortal
+                defaultTimeout={3000}
+                limit={6}
+                position={{
+                    vertical: 'top',
+                    horizontal: 'center',
+                }}
+            />
         </div>
     );
 };

example/.storybook/main.ts

@@ -1,18 +1,22 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-  stories: ['../src/components/**/*.mdx', '../src/components/**/*.stories.@(ts|tsx)', '../_components/*.stories.@(ts|tsx)'],
-  staticDirs: ['../../public'],
+  stories: ['../src/components/**/*.mdx', '../src/components/**/*.stories.@(ts|tsx)'],
+  staticDirs: ['../public'],
   addons: [
     "@storybook/addon-onboarding",
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
+    "storybook-dark-mode",
   ],
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
+  typescript: {
+    reactDocgen: false,
+  },
 };
 export default config;

example/.storybook/preview.tsx

@@ -1,15 +1,19 @@
 import type { Preview } from "@storybook/react";
+import './reset.css';
 import '@acrool/react-toaster/dist/index.css';
+import { themes } from '@storybook/theming';
+
 import '@acrool/react-grid/dist/index.css';
-import '@acrool/react-table/dist/index.css';
-import '@acrool/react-table/dist/themes/game.css';
 import {GridThemeProvider} from "@acrool/react-grid";
 import React from "react";
-import {ToasterPortal} from '@acrool/react-toaster';
 
 
 const preview: Preview = {
   parameters: {
+      darkMode: {
+          dark: { ...themes.dark, appPreviewBg: '#000' },
+          light: { ...themes.dark, appPreviewBg: '#fff' }
+      },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -21,9 +25,6 @@ const preview: Preview = {
       (Story) => (
           <GridThemeProvider>
             <Story />
-
-              <ToasterPortal defaultTimeout={3000}/>
-
           </GridThemeProvider>
       ),
   ],

example/.storybook/reset.css

@@ -1,3 +1,123 @@
+*, *::before, *::after {box-sizing: border-box;-webkit-box-sizing: border-box;line-height: normal; }
+
+
+
+/*html {*/
+/*    scrollbar-face-color: #646464;*/
+/*    scrollbar-base-color: #646464;*/
+/*    scrollbar-3dlight-color: #646464;*/
+/*    scrollbar-highlight-color: #646464;*/
+/*    scrollbar-track-color: #000;*/
+/*    scrollbar-arrow-color: #000;*/
+/*    scrollbar-shadow-color: #646464;*/
+/*    scrollbar-dark-shadow-color: #646464;*/
+/*}*/
+
+/*::-webkit-scrollbar { width: 8px; height: 3px;}*/
+/*::-webkit-scrollbar-button {  background-color: #666;display: none }*/
+/*::-webkit-scrollbar-track {  background-color: #2b3035;}*/
+/*::-webkit-scrollbar-track-piece { background-color: #2b3035;}*/
+/*::-webkit-scrollbar-thumb { height: 50px; background-color: #1f1f1f; border-radius: 3px;}*/
+/*::-webkit-scrollbar-corner { background-color: #646464;}*/
+/*::-webkit-resizer { background-color: #666;}*/
+
+
+/* a */
+a{
+    text-shadow: none!important;
+    color: inherit;
+    transition: color .1s linear 0s,background-color .1s linear 0s,opacity .2s linear 0s!important;
+    font-weight: 500;
+    outline: 0!important;
+    text-decoration: none;
+}
+a:active {color: inherit;text-decoration: none;}
+a:not([href]) {text-decoration: none;}
+a:not([href]):hover {text-decoration: none;}
+a:focus, a:hover, a:active {
+    outline: 0!important;
+    text-decoration: none;
+}
+
+/* box */
+article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {display: block;}
+[tabindex="-1"]:focus:not(:focus-visible) {outline: 0 !important;}
+
+
+p {margin-top: 0;margin-bottom: 0;}
+abbr[title], abbr[data-original-title] {text-decoration: underline;-webkit-text-decoration: underline dotted;text-decoration: underline dotted;cursor: help;border-bottom: 0;-webkit-text-decoration-skip-ink: none;text-decoration-skip-ink: none;}
+address {margin-bottom: 1rem;font-style: normal;line-height: inherit;}
+
+/* list */
+ul{list-style-type: none;margin: 0;padding: 0;}
+ol, ul, dl {margin-top: 0;margin-bottom: 0;}
+ol ol, ul ul, ol ul, ul ol {margin-bottom: 0;}
+dt {font-weight: 700;}
+dd {margin-bottom: .5rem;margin-left: 0;}
+
+/* code */
+blockquote {margin: 0 0 1rem;}
+b, strong {font-weight: bolder;}
+small {font-size: 80%;}
+small, .small {font-size: 80%;font-weight: 400;}
+sub, sup {position: relative;font-size: 75%;line-height: 0;vertical-align: baseline;}
+sub {bottom: -.25em;}
+sup {top: -.5em;}
+mark, .mark {padding: 0.2em;background-color: #fcf8e3;}
+code {font-size: 87.5%;color: #e83e8c;}
+kbd {padding: 0.2rem 0.4rem;font-size: 87.5%;color: #fff;background-color: #212529;border-radius: 0.2rem;}
+kbd kbd {padding: 0;font-size: 100%;font-weight: 700;}
+pre {margin-top: 0;margin-bottom: 1rem;overflow: auto;}
+pre {display: block;font-size: 87.5%;color: #212529;}
+pre, code, kbd, samp {font-size: 1em;}
+pre code {font-size: inherit;color: inherit;word-break: normal;}
+a > code {color: inherit;}
+
+/* image */
+figure {margin: 0 0 1rem;}
+img {vertical-align: middle;border-style: none;}
+svg {overflow: hidden;vertical-align: middle;}
+
+/*table*/
+table {border-collapse: collapse;}
+caption {padding-top: 0.75rem;padding-bottom: 0.75rem;color: #6c757d;text-align: left;caption-side: bottom;}
+th {text-align: inherit;}
+
+/* form */
+label {display: inline-block;margin-bottom: 0;}
+input, button, select, optgroup, textarea {margin: 0;font-family: inherit;font-size: inherit;line-height: inherit;}
+button {border-radius: 0;background: none; border: none;}
+button:focus {outline: 1px dotted;outline: none;}
+button, input {overflow: visible;}
+button, select {text-transform: none;}
+select {word-wrap: normal;}
+button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;}
+button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) {cursor: pointer;}
+button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {padding: 0;border-style: none;}
+input[type="radio"], input[type="checkbox"] {box-sizing: border-box;padding: 0;}
+input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {-webkit-appearance: listbox;}
+textarea {overflow: auto;resize: vertical;}
+fieldset {min-width: 0;padding: 0;margin: 0;border: 0;}
+legend {display: block;width: 100%;max-width: 100%;padding: 0;margin-bottom: .5rem;font-size: 1.5rem;line-height: inherit;color: inherit;white-space: normal;}
+progress {vertical-align: baseline;}
+[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {height: auto;}
+[type="search"] {outline-offset: -2px;-webkit-appearance: none;}
+[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
+::-webkit-file-upload-button {font: inherit;-webkit-appearance: button;}
+output {display: inline-block;}
+summary {display: list-item;cursor: pointer;}
+template {display: none;}
+[hidden] {display: none !important;}
+input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active {
+    -webkit-animation-name: autofill;
+    -webkit-animation-fill-mode: both;
+    transition: background-color 5000s ease-in-out 0s;
+}
+/* 修復 chrome auto輸入之後的樣式 */
+@-webkit-keyframes autofill { to {background: none;} }
+
 :root {
-    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    /*noinspection CssUnresolvedCustomProperty*/
+    --vh100: calc(var(--vh, 1vh) * 100);
 }
+

example/_components/Toaster.stories.tsx

@@ -4,10 +4,12 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Acrool React Toaster</title>
+    <title>Acrool React Img</title>
+    <link rel="stylesheet" type="text/css" href="/static/styles/reset.css?v=3" />
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
+