@kwiz/fluentui 1.0.15 → 1.0.19

package/.github/workflows/npm-publish.yml

@@ -0,0 +1,34 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  push:
+    tags: 
+      - 'v*.*.*' # run every time we commit with a new version number
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm ci
+      - run: npm test
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.KWIZ_NPM_TOKEN}}

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 KWIZ Corp
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2024 KWIZ Corp
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,27 +1,27 @@
-# fluentui
-
-For local debugging, if you plan to use `npm link` - there is a known issue with react that will potentially break your application.
-
-To fix that, during dev, you'll have to link the react package in this project to load the react from node_modules in your caller application. For example:
-```
-npm link ..\\test-project\\node_modules\\react\\  ..\\..test-project\\node_modules\\@types\\react\\
-```
-
-To successfully use these controls you should create a context:
-
-```ts
-const root = React.useRef<HTMLDivElement>(null);
-const kwizFluentContext = useKWIZFluentContextProvider({
-    ctx: {
-        buttonShape: "rounded"
-    },
-    root
-});
-
-//...
-<KWIZFluentContext.Provider value={kwizFluentContext}>
-    <FluentProvider theme={webLightTheme} ref={root}>
-        {content}
-    </FluentProvider>
-</KWIZFluentContext.Provider>
+# fluentui
+
+For local debugging, if you plan to use `npm link` - there is a known issue with react that will potentially break your application.
+
+To fix that, during dev, you'll have to link the react package in this project to load the react from node_modules in your caller application. For example:
+```
+npm link ..\\test-project\\node_modules\\react\\  ..\\..test-project\\node_modules\\@types\\react\\
+```
+
+To successfully use these controls you should create a context:
+
+```ts
+const root = React.useRef<HTMLDivElement>(null);
+const kwizFluentContext = useKWIZFluentContextProvider({
+    ctx: {
+        buttonShape: "rounded"
+    },
+    root
+});
+
+//...
+<KWIZFluentContext.Provider value={kwizFluentContext}>
+    <FluentProvider theme={webLightTheme} ref={root}>
+        {content}
+    </FluentProvider>
+</KWIZFluentContext.Provider>
 ```

package/package.json

@@ -1,72 +1,72 @@
-{
-    "name": "@kwiz/fluentui",
-    "version": "1.0.15",
-    "description": "KWIZ common controls for FluentUI",
-    "module": "dist/index.js",
-    "types": "dist/index.d.ts",
-    "exports": {
-        ".": {
-            "types": "./dist/index.d.ts",
-            "import": "./dist/index.js",
-            "default": "./dist/index.js"
-        },
-        "./package.json": "./package.json"
-    },
-    "scripts": {
-        "watch": "tsc -watch",
-        "build": "npm run test && tsc",
-        "build-explain": "tsc --explainFiles",
-        "check-dependencies": "madge --circular ./src",
-        "create-link": "npm link",
-        "test": "node --import tsx --test src",
-        "link-local-kwiz": "npm link @kwiz/common",
-        "__update-kwiz-packages": "npm install @kwiz/common@latest",
-        "npm-v-patch": "npm version patch",
-        "npm-v-major": "npm version major",
-        "npm-publish": "npm publish --access public",
-        "reset-repo": "git fetch origin && git reset --hard origin/main"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/KWizCom/fluentui.git"
-    },
-    "keywords": [
-        "KWIZ",
-        "FluentUI"
-    ],
-    "author": "Shai Petel",
-    "contributors": [
-        "Shai Petel"
-    ],
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/KWizCom/fluentui/issues",
-        "email": "support@kwizcom.com"
-    },
-    "homepage": "https://github.com/KWizCom/fluentui#readme",
-    "private": false,
-    "engines": {
-        "node": ">=16"
-    },
-    "packageManager": "npm@9.5.1",
-    "devDependencies": {
-        "fs-extra": "^11.2.0",
-        "madge": "^6.1.0",
-        "tsx": "^4.7.1",
-        "typescript": "^5.3.3"
-    },
-    "dependencies": {
-        "@kwiz/common": "^1.0.58",
-        "esbuild": "^0.19.12",
-        "get-tsconfig": "^4.7.2",
-        "resolve-pkg-maps": "^1.0.0"
-    },
-    "peerDependencies": {
-        "@fluentui/react-components": ">=9.54.17 <10.0.0",
-        "@fluentui/react-datepicker-compat": "^0.4.53",
-        "@types/react": ">=16.14.0 <19.0.0",
-        "@types/react-dom": ">=16.9.0 <19.0.0",
-        "react": ">=16.14.0 <19.0.0",
-        "react-dom": ">=16.14.0 <19.0.0"
-    }
-}
+{
+    "name": "@kwiz/fluentui",
+    "version": "1.0.19",
+    "description": "KWIZ common controls for FluentUI",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
+            "default": "./dist/index.js"
+        },
+        "./package.json": "./package.json"
+    },
+    "scripts": {
+        "watch": "tsc -watch",
+        "build": "npm run test && tsc",
+        "build-explain": "tsc --explainFiles",
+        "check-dependencies": "madge --circular ./src",
+        "create-link": "npm link",
+        "test": "node --import tsx --test src",
+        "link-local-kwiz": "npm link @kwiz/common",
+        "__update-kwiz-packages": "npm install @kwiz/common@latest",
+        "npm-v-patch": "npm version patch",
+        "npm-v-major": "npm version major",
+        "npm-publish": "npm publish --access public",
+        "reset-repo": "git fetch origin && git reset --hard origin/main"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/KWizCom/fluentui.git"
+    },
+    "keywords": [
+        "KWIZ",
+        "FluentUI"
+    ],
+    "author": "Shai Petel",
+    "contributors": [
+        "Shai Petel"
+    ],
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/KWizCom/fluentui/issues",
+        "email": "support@kwizcom.com"
+    },
+    "homepage": "https://github.com/KWizCom/fluentui#readme",
+    "private": false,
+    "engines": {
+        "node": ">=16"
+    },
+    "packageManager": "npm@9.5.1",
+    "devDependencies": {
+        "fs-extra": "^11.2.0",
+        "madge": "^6.1.0",
+        "tsx": "^4.7.1",
+        "typescript": "^5.3.3"
+    },
+    "dependencies": {
+        "@kwiz/common": "^1.0.58",
+        "esbuild": "^0.19.12",
+        "get-tsconfig": "^4.7.2",
+        "resolve-pkg-maps": "^1.0.0"
+    },
+    "peerDependencies": {
+        "@fluentui/react-components": ">=9.54.17 <10.0.0",
+        "@fluentui/react-datepicker-compat": "^0.4.53",
+        "@types/react": ">=16.14.0 <19.0.0",
+        "@types/react-dom": ">=16.9.0 <19.0.0",
+        "react": ">=16.14.0 <19.0.0",
+        "react-dom": ">=16.14.0 <19.0.0"
+    }
+}

package/src/_modules/config.ts

@@ -1,9 +1,9 @@
-import { config } from "@kwiz/common";
-import { BuildNumber, ReleaseStatus } from "./constants";
-
-export const { logger: GetLogger } = config({
-    BuildNumber: BuildNumber,
-    IsLocalDev: false,
-    ReleaseStatus: ReleaseStatus,
-    ProjectName: "[fluentui]"
-});
+import { config } from "@kwiz/common";
+import { BuildNumber, ReleaseStatus } from "./constants";
+
+export const { logger: GetLogger } = config({
+    BuildNumber: BuildNumber,
+    IsLocalDev: false,
+    ReleaseStatus: ReleaseStatus,
+    ProjectName: "[fluentui]"
+});

package/src/_modules/constants.ts

@@ -1,3 +1,3 @@
-
-export var BuildNumber = 'unset';
-export const ReleaseStatus = "npm";
+
+export var BuildNumber = 'unset';
+export const ReleaseStatus = "npm";

package/src/controls/accordion.tsx

@@ -0,0 +1,48 @@
+import { Label, makeStyles } from "@fluentui/react-components";
+import { ChevronRightRegular } from "@fluentui/react-icons";
+import * as React from 'react';
+import { Horizontal } from "./horizontal";
+import { Vertical } from "./vertical";
+
+const useStyles = makeStyles({
+    opened: {
+        transform: "rotate(90deg)",
+        transition: "transform 200ms ease-out"
+    },
+    header: {
+        cursor: "pointer"
+    },
+    root: {
+        maxHeight: "100%"
+    },
+    body: {
+        overflow: "auto"
+    }
+});
+
+interface iProps {
+    /** optional: send the key for the group you want to open by default */
+    opened?: string;
+    groups: {
+        key: string;
+        title: string;
+        icon?: JSX.Element;
+        content: JSX.Element;
+    }[];
+}
+export const AccordionEX: React.FunctionComponent<iProps> = (props) => {
+    const classes = useStyles();
+    const [opened, setOpened] = React.useState(props.opened || props.groups[0].key);
+    return (<Vertical main css={[classes.root]}>
+        {props.groups.map(group => <React.Fragment key={group.key}>
+            <Horizontal css={[classes.header]} onClick={() => setOpened(group.key)}>
+                <ChevronRightRegular className={opened === group.key && classes.opened} />
+                <Label>{group.title}</Label>
+            </Horizontal>
+            {group.key === opened && <Vertical main css={[classes.body]}>
+                {group.content}
+            </Vertical>}
+        </React.Fragment>)}
+    </Vertical>
+    );
+}