{"id":21869668,"url":"https://github.com/sydsutton/fs.fluentui","last_synced_at":"2025-04-04T13:08:20.220Z","repository":{"id":191441869,"uuid":"684181782","full_name":"sydsutton/FS.FluentUI","owner":"sydsutton","description":"V9 of Microsoft's FluentUI library, built for F# in the style of Feliz.","archived":false,"fork":false,"pushed_at":"2025-04-03T19:44:42.000Z","size":1970,"stargazers_count":77,"open_issues_count":1,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-04T12:32:04.109Z","etag":null,"topics":["fable","feliz","fluentui","fluentui-component","fluentuiv9","fsharp","v9"],"latest_commit_sha":null,"homepage":"https://github.com/sydsutton/FS.FluentUI","language":"F#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sydsutton.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-28T16:13:02.000Z","updated_at":"2025-03-24T21:01:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"e1b6e31c-ee81-4042-bc6e-fe06ea2fce1f","html_url":"https://github.com/sydsutton/FS.FluentUI","commit_stats":null,"previous_names":["sydsutton/fs.fluentui"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sydsutton%2FFS.FluentUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sydsutton%2FFS.FluentUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sydsutton%2FFS.FluentUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sydsutton%2FFS.FluentUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sydsutton","download_url":"https://codeload.github.com/sydsutton/FS.FluentUI/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247182389,"owners_count":20897381,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fable","feliz","fluentui","fluentui-component","fluentuiv9","fsharp","v9"],"created_at":"2024-11-28T06:08:42.703Z","updated_at":"2025-04-04T13:08:20.194Z","avatar_url":"https://github.com/sydsutton.png","language":"F#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FS.FluentUI\n\n## [V9 of Microsoft's FluentUI (React)](https://react.fluentui.dev/?path=/docs/concepts-introduction--page) made for F# in the style of Feliz\n\n[![NuGet version (FS.FluentUI)](https://img.shields.io/nuget/v/FS.FluentUI.svg?style=flat-square)](https://www.nuget.org/packages/FS.FluentUI/)\n[![NuGet Downloads](https://img.shields.io/nuget/dt/FS.FluentUI.svg)](https://www.nuget.org/packages/FS.FluentUI/)\n\n![DataGridGif](https://github.com/sydsutton/FS.FluentUI/assets/83406605/e98ec82f-b0b1-4ae3-ba3e-ea0a94b462ab)\n\n### Please see all F# component examples in the [FS.FluentUI Wiki](https://github.com/sydsutton/FS.FluentUI/wiki)\n### Please check [Microsoft's documentation](https://react.fluentui.dev/?path=/docs/concepts-introduction--page) for further component usage and descriptions\n\n## Overview\nFluent UI React Components is a set of UI components and utilities resulting from an effort to converge the set of React based component libraries in production today: @fluentui/react and @fluentui/react-northstar.\n\nEach component is designed to adhere to the following standards:\n* **Customizable**: Fluent-styled components by default, but easy to integrate your own brand and theme\n* **Performance**: Optimized for render performance\n* **Bundle size**: Refactored and slimmed down components that allow you to include the packages and dependencies you need\n* **Accessibility**: WCAG 2.1 compliant and tested by trusted testers\n* **Design to Code**: Stay up to date with Fluent Design Language changes via Design Tokens\n\n**NOTE:** Some components/ functions are incomplete or still considered `Preview Components` and/or `unstable` by Microsoft. Please feel free to send PR's in order to get this library as close to 100% as possible!\n\nPlace a `Fui.fluentProvider` at the root of your app and pass the theme in as a prop. You can use pre-determined themes, or create your own `BrandVariants` or `Tokens` to use for your theme. See the [wiki](https://github.com/sydsutton/FS.FluentUI/wiki/FluentProvider---BrandVariants) for specific examples.\n\n```fsharp\nopen Feliz\nopen Browser.Dom\nopen FS.FluentUI\nopen FS.FluentUI.V8toV9\n\nlet useStyles =\n    Fui.makeStyles\u003c{| toggleButtons: string |}\u003e [\n        \"toggleButtons\", [\n            style.height (length.px 300 )\n            style.width (length.px 300)\n            style.margin (length.px 50)\n            style.border (4, borderStyle.solid, \"purple\")\n        ]\n    ]\n\n[\u003cReactComponent\u003e]\nlet ToggleButtons () =\n    let isChecked1, setIsChecked1 = React.useState true\n    let isChecked2, setIsChecked2 = React.useState false\n\n    let styles = useStyles()\n\n    // The use of Fui.stack is preferential and is available through FS.FluentUI.V8toV9\n    Fui.stack [\n        stack.horizontal false\n        stack.horizontalAlign.center\n        stack.verticalAlign.center\n        stack.tokens [ stack.tokens.childrenGap 16 ]\n        stack.className styles.toggleButtons\n        stack.children [\n            Fui.toggleButton [\n                toggleButton.icon (Fui.icon.checkbox1Filled [])\n                toggleButton.checked' isChecked1\n                toggleButton.onClick (fun _ -\u003e setIsChecked1 (isChecked1 |\u003e not))\n                toggleButton.text \"Checked state\"\n            ]\n            Fui.toggleButton [\n                toggleButton.appearance.primary\n                toggleButton.checked' isChecked2\n                toggleButton.onClick (fun _ -\u003e setIsChecked2 (isChecked2 |\u003e not))\n                toggleButton.text \"Unchecked state\"\n            ]\n            Fui.toggleButton [\n                toggleButton.shape.circular\n                toggleButton.disabledFocusable true\n                toggleButton.text \"Disabled focusable\"\n            ]\n        ]\n    ]\n\nlet root = ReactDOM.createRoot (document.getElementById \"feliz-app\")\nroot.render (\n    Fui.fluentProvider [\n        fluentProvider.theme.webLightTheme\n        fluentProvider.children [\n            ToggleButtons ()\n        ]\n    ]\n)\n```\n\n![FSReadMe](https://github.com/sydsutton/FS.FluentUI/assets/83406605/990c4449-a1f3-44d8-836d-d3d2c7598b9d)\n\n## Installation\n\nCurrent NPM dependencies:\n\n* @fluentui/react-components\n* @fluentui/react-datepicker-compat\n* @fluentui/react-calendar-compat\n* @fluentui/react-timepicker-compat\n* @fluentui-contrib/react-data-grid-react-window\n* react-window\n\n#### NOTE: If you don't need to use a DatePicker, Calendar (or any Calendar-related functions listed below), TimePicker, VirtualizedDataGrid, or FixedSizeList (virtualized List) components then the only npm package you need is `@fluentui/react-components`. Feel free to pick and choose which packages you download according to what components you need or don't need, so long as you have `@fluentui/react-components` downloaded.\n\n#### Calendar-related functions that require `@fluentui/react-calendar-compat`: addDays, addMonths, addWeeks, addYears, setMonth, isInDateRangeArray, getYearStart, getYearEnd, getWeekNumbersInMonth, getWeekNumber, getStartDateOfWeek, getMonthStart, getMonthEnd, getEndDateOfWeek, getDateRangeArray, compareDates, compareDatePart\n\nInstall into your Client.fsproj project using [Femto](https://github.com/Zaid-Ajaj/Femto) (recommended)\n```bash\ncd ./{path to Client}\n\n# when using femto as a global CLI tool\nfemto install FS.FluentUI\n\n# when using femto as a local CLI tool\ndotnet femto install FS.FluentUI\n```\nThis will install the nuget package and afterwards automatically installs the required npm packages used by this binding.\n\n\u003e Femto will detect whether you are using paket and will install the package using paket into the dependency group of the project\n\nYou can install the library manually if you want by first installing the nuget package\n```bash\ncd ./{path to your project}\ndotnet add package FS.FluentUI\nnpm install @fluentui/react-components @fluentui/react-datepicker-compat @fluentui/react-calendar-compat @fluentui/react-timepicker-compat @fluentui-contrib/react-data-grid-react-window react-window\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsydsutton%2Ffs.fluentui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsydsutton%2Ffs.fluentui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsydsutton%2Ffs.fluentui/lists"}