microsoft / fluentui-react-native Goto Github PK

The library needs a demo app to include in the readme/getting started instructions. The purpose of this demo app is to give folks a quick way to download and use our package in a prepackaged environment, for people that don't have an existing react-native app to add our package to. Examples:

• https://developer.microsoft.com/en-us/fluentui#/get-started#option-1-quick-start
• https://github.com/microsoft/fluentui-apple/blob/master/ios/README.md#demo-app

The Separator control needs better documentation added to its Separator.mdx documentation file. It doesn't need to be very complicated, but it does need API, prop, and usage documentation.

Add README.md file in the directory.

The CI Loop should trigger builds on pull requests into master. There is additional work here to run code formatting and linting to make sure our repo stays clean.

We have a few win32 components in another repo. This issue just tracks moving them here.

This should have:

• build loop
• test loop
• ideally some of the fabric goodness like the package size monitor

The repo should have scripts for creating new component packages with the correct structure.

The Pressable component needs better documentation added to its Pressable.mdx documentation file. It doesn't need to be very complicated, but it does need API, prop, and usage documentation.

Currently all builds are full builds...which is fine right now as they only take about 20 seconds total. As the repo grows this will be problematic.

interface IFooSlotProps {
   root: { someRequiredString: string; someOptionalString?: string };
}

export const MyFooComponent = compose<IFooProps, IFooSlotProps>({
    ...restOfComposeOptions,
    render: (Slots: ISlots<IFooSlotProps>, data: IFooRenderData, ...children: React.Component[]) : JSX.Element => { 
        return <Slots.root />
    }
})

In the example above the JSX for <Slots.root /> fails to compile because it's missing someRequiredString, even though it should have been baked into the slot props as part of usePrepareProps.

Jason suggested fixing this might be as simple as adding a Partial<> around TProps in _createSlotRenderFunction

Hello, I'm trying to use some snippets from the tester code but I can't seem to find where the fluentui-react-native/stack exists

This repo should be called fluent-ui-react-native for consistency with the fluent-ui-react sister repo (not fluentui-react-native).

Currently none of the packages are being published or really tracked for versions. We need to add publishing support and change management support, likely using beachball.

The Fabric Web folks have a Box in their ThemeProvider to apply the background color to the region covered by the ThemeProvider. It seems like we might want to do this as well with a View. See ThemeProvider and Box here:

https://github.com/microsoft/fluent-ui-react-staging/tree/master/packages/react-theming/src/components

The Text control needs better documentation added to its Text.mdx documentation file. It doesn't need to be very complicated, but it does need API, prop, and usage documentation.

Right now we send an event when the platform theme changes and custom theme definitions can be functional rather than a static JSON object, but the functional theme definition only takes a parent theme and the theme object has no obvious place for the Office theme setting.

A simple solution is simply providing a "name" to the theme object which the platform theme can fill in. This work isn't hard, it's more of a "how exactly do we want this API to look" type question than anything.

Is there plans to support drop downs soon?

Look at the customize syntax to see if settings objects can be specified directly without expanding the types too much.

Currently the build scripts are extremely rudimentary. We should do the following:

• Hook up just to manage scripts
• Get jest running successfully, yarn test gives an error now
• Make the build option include jest
• Produce distribution bundles

I just added a bunch of stuff around the Native Module, Theme Provider, and hooks for the Theme Context.

It'd be good to go back and do a pass at documenting everything.

The FocusTrapZone control needs better documentation added to its FocusTrapZone.mdx documentation file. It doesn't need to be very complicated, but it does need API, prop, and usage documentation.

There is a likely bug in immutable merge with array handling. Initially the checks for typeof entry === 'object' were calls to an _isPlainObject function which would omit arrays. It isn't this simple though because styles can be arrays or plain objects.

The routine ultimately needs to exclude arrays (allow the last value to win) except in the case where there is a handler function defined.

This should be validated by new test cases in the unit tests...once jest is running correctly.

A size auditor to check against bundle size change (as fabric-react does) would be really nice to have.

All exported controls from packages like experimental-web-controls should also export example usages of the controls. This makes it easier to map those directly into demo apps and more fully document them.

A potential folder structure may look something like

-- Controls-Package
---- Example-Control
------ index.ts
------ examples
------- base
------ styles
------ types
------ example-control.tsx
------ tests

The Button control needs better documentation added to its Button.mdx documentation file. It doesn't need to be very complicated, but it does need API, prop, and usage documentation.

There's a couple different issues that can be improved with the expo playground in apps/playground.

• Even though App.tsx / package.json has no dependency on @uifabricshared packages, if you don't build the other packages in the repo the metro.config.js crashes.
• If you do add a dependency on one of the other packages, you'll need to either manually npm run build on those packages or add a tsc watch
• yarn start/Expo start is plenty fine, (or yarn build from the root) but maybe a build script should be added to package.json as well.

Symbols seem copy-able in the babel transpilation down to ES5. Currently I'm deleting the old theme settings cache in resolvePartialTheme

@JasonVMo FYI.

We should make a pass through the various packages to ensure we are using references such as "react-native": "^0.60" rather than specific versions. This should be done for everything in the repo.

We need an easy API for consumers of primitive components to create StyleSheets that can reference theme values and regenerate in response to theme changes.

We're publishing to a public npm feed, anyway, so how private is it?

Have we crossed whatever threshold we needed that justifies making it public?

https://github.com/microsoft/fluentui-react-native/tree/master/apps/fluent-tester

Current instructions:
Then go into apps\fluent-tester folder:
cd apps\fluent-tester
Build the FluentUI Tester bundle:
yarn bundle
Launch the FluentUI Tester app:
yarn run-win32

But they should be cd apps\fluent-tester\win32

This is the new industry standard and also lets us use a number of additional community plugins that only target JS

Basically this:

type foo = IExtractSlotProps<{ slotProps: { root: ViewProps } }>;

// foo.root is object not ViewProps

We have just tasks for api-extraction, but it is not currently configured.

Right now this is a stub but there should be an implementation for these platforms. This will be necessary for getting our button code to run correctly on those platforms.

Failures in beachball may not fail the CI jobs. Upgrading to 1.15.1 will fix this.

Repro:

1. cd apps\win32
2. yarn bundle
3. yarn run-win32
   (FluentUI Tester App Appears)
4. Click small rectangular button in top right
   (Debug menu appears)
5. Check Use Web Debugger CheckBox
   (App crashes)

Note:
Use Live Reload also doesn't work, but there is no crash

Welcome Build 2020 participants! Did you get a chance to try out the Fluent UI React Native library
or watch our Build 2020 talk? If so, we want to hear your feedback! The library is still in its early stages, but we wanted to show developers the direction we're taking things, and get early feedback on how we can make this even more useful to you moving forward.

Feel free to leave feedback on any of the following (and please keep feedback constructive and respectful):

• Likes
• Dislikes
• Bugs
• Areas for improvement

Thank you,
The Fluent UI React Native team

Now that #16 is closed, this issue will track incremental updates to the set of tslint rules we follow.

According to Fluent design website, the Windows Button should look like this:

But currently, it looks like this:

Creating this issue to track this inconsistency. Please let me know if you have any questions.

Adopting the new versions of @uifabricshared libraries forced me to introduce this work around to some components:

compose(
  ...otherstuff,
  settings,
  slots: {
    root: ReactNative.View,
    content: ReactNative.Text
  },
  styles: {
    root: [],        // Empty array 
    content: [foregroundColorTokens, textTokens]
  }
);

Without the empty array of style operations, the root slot settings get dropped from the final slot props.

The FocusTrapZone control needs better documentation added to its FocusTrapZone.mdx documentation file. It doesn't need to be very complicated, but it does need API, prop, and usage documentation.

immutable-merge is incredibly core to most of the work that goes on in this repository, making sure it is performant and that the code is as tight as possible is a worthy work item

The Stack component needs better documentation added to its Stack.mdx documentation file. It doesn't need to be very complicated, but it does need API, prop, and usage documentation.

With a PR our for #24, I'm adding an issue to track documentation work. It would be nice to have a documentation generation system. The API-extractor docs note that for simple cases using the api-documenter package (https://www.npmjs.com/package/@microsoft/api-documenter) may be sufficient.

An attempt at this was done in the documentation folder using docz but it seems highly unstable and doesn't actually work. We should find some solution, likely involving gatsby, to do auto documentation.

Ideally this also includes support for mdx files.

Some level of code formatting, beyond what linters provide, is a good start

Look at ways of removing the need to use renderSlot, instead moving to a *jsx helper syntax without creating the closures that withSlots creates.

Add a README.md for this package