arturbien / react95

🌈🕹 Windows 95 style UI component library for React

React95

Components - Demo app - React Native - Slack - PayPal donation 💰

Refreshed Windows95 UI components for your modern React apps.
Built with styled-components 💅

Support

• Become a backer or sponsor on Patreon
• One-time donation via PayPal

Getting Started

First, install component library and styled-components in your project directory:

# yarn
$ yarn add react95 styled-components

# npm
$ npm install react95 styled-components

Apply style reset, wrap your app with ThemeProvider with theme of your choice... and you are ready to go! 🚀

import React from 'react';
import { createGlobalStyle, ThemeProvider } from 'styled-components';

import { MenuList, MenuListItem, Separator, styleReset } from 'react95';
// pick a theme of your choice
import original from 'react95/dist/themes/original';
// original Windows95 font (optionally)
import ms_sans_serif from 'react95/dist/fonts/ms_sans_serif.woff2';
import ms_sans_serif_bold from 'react95/dist/fonts/ms_sans_serif_bold.woff2';

const GlobalStyles = createGlobalStyle`
  ${styleReset}
  @font-face {
    font-family: 'ms_sans_serif';
    src: url('${ms_sans_serif}') format('woff2');
    font-weight: 400;
    font-style: normal
  }
  @font-face {
    font-family: 'ms_sans_serif';
    src: url('${ms_sans_serif_bold}') format('woff2');
    font-weight: bold;
    font-style: normal
  }
  body {
    font-family: 'ms_sans_serif';
  }
`;

const App = () => (
  <div>
    <GlobalStyles />
    <ThemeProvider theme={original}>
      <MenuList>
        <MenuListItem>🎤 Sing</MenuListItem>
        <MenuListItem>💃🏻 Dance</MenuListItem>
        <Separator />
        <MenuListItem disabled>😴 Sleep</MenuListItem>
      </MenuList>
    </ThemeProvider>
  </div>
);

export default App;

Submit your project

Apps built with React95 will be featured on the official React95 website 🤟🏻

Contributing

Any help from UI / UX designers would be EXTREMELY appreciated. The challenge is to come up with new component designs / layouts that are broadly used in modern UIs, that weren't present back in 95.

If you want to help with the project, feel free to open pull requests and submit issues or component proposals. Let's bring this UI back to life ♥️

react95's Issues

Add Windows 95 styled scrollbars

Something like these would do
https://codepen.io/louh/pen/oZJQvm

Avatar

I'd be happy to work on the Avatar component but would need some visual guidance. Is there anything to reference?

About sharing knowledge

What is the problem with Chinese README's

Firstly, we congratulate you for getting so much star by sharing this repository with humanity.

But it is very disappointing for non-Chinese speakers when one couldn't understand what a trending repository is about.

When we see such a repo on trending, our minds are blurring like Gollum's.

There is a way you can help to solve this disappointment which I believe is experienced by many people who want to know more about your valuable work and appreciate it.

What we want:

• Please add English translation of your README so you are sharing your work and knowledge with more people.

How this will help you:

• More feedback to fix and improve your project.
• New ideas about your project.
• Greater fame.
• 

---

“Sharing knowledge is the most fundamental act of friendship. Because it is a way you can give something without loosing something.”

— Richard Stallman

Thank you!

This issue created by us/english-please script. Please report on any error. Thank you!

Feature request: Window with a Close button on Header

Would be nice to have a Window prop that adds the closing 'X' that trigger some sort of event as onClose. It might be similar to the modal react bootstrap for example.

Select component: allow other units passed to 'width' prop

Units like %, vw, vh should also be allowed. Approach could be similar as in <TextField /> component.

Add error (Blue Screen of Death) component

Add error (Blue Screen of Death) component

Deploy Storybook in CI/CD pipeline

Button with 'active' prop to have checkered background

Allow disabling shadow in all components

Currently the 'shadow' prop had to be set to 'false' in order to turn off the shadow in individual component. Find a way to opt out of using shadow in all components.

Add ColorPicker component

Clicking this component should open native (browser) color picker

Implement addon-storysource in Storybook

We need to implement addon-storysource in Storybook, because when example story is a class based component, it doesn't show its children. Is there any volunteer that would take that task? 🌈

Icons

Is there icon pack with original icons?

Are you using React95 for a project? What is it?

I would be interested what everyone is using this great library for 😃

Add any publicly available links here.

(Hope you're fine with this issue arturbien. Just genuinely curious)

range slider component

Thanks for creating this great project!

It would be nice to have the slider/range selector from windows 95. There are a couple of variants at least, it seems. So nice to have as props would be:

• barHeight - by default this is 0 (so we just see the border) but in the media player for example it's nonzero.
• min - the minimum numerical value
• max - the maximum numerical value
• step - the numerical step interval
• ticks - by default displays unlabeled ticks at reasonable intervals but we can pass an array of objects with the form: { value, label } to create something like we see in the media player.

Add Argos CI regression tests to the pipeline

Add Argos CI tests to detect visual regressions in components

forwardRef for every component

Rewrite Select component

Currently the <Select /> component keeps its own state under the hood, so its not possible to control it from the outside. (We need to be able to use the component both as a controlled or uncontrolled input)

Also the <Select /> component accepts selectedIndex prop as an indicator which option out of options array is selected and this approach is not very intuitive. Instead it would be better to make similar inteface to the one in Material-UI Select.

• component should accept value prop for controlled input, or defaultValue prop for uncontrolled input (get rid of selectedIndex prop)
• rename items prop to options
• enable keyboard controls for the component
• allow user to use native select (just like in MUI's Native Select)
• close dropdown on blur (?)
• allow users to disable select input:
  

Cannot import Menu component

The Start menu show in story components is not exportable, so I cant use as the example shown in StoryBook

Doing this way:

import {Menu} from 'react95'

Any suggestion?

Focus management / accessibility

Currently there is no indication which input element has focus on. We need to add dashed border/outline around <Radio />, <Checkbox /> components like so:

For <Select /> component the focus is indicated by highlighting currently selected option:

<Button /> :

<Slider /> :

<Tabs />, <Tab /> :

yarn or npm

There is both a yarn.lock and a package-lock.json. The two don't play well together out of experience. Should we use yarn or npm to contribute to this project?

Slider doesn't use `min` as origin value, issue with decimal values

1. When min prop is set, it should be treated as the origin of the Slider (it should be the first value on the slider)

2. When using decimal values the number of ticks is incorrect

Add TypeScript type declaration file

Divider should render as 'li' in List component

In a list, the Divider should be rendered as an <li> element to match the HTML5 specification

Prettier configuration

Thinking about code standardization to provide the best developer experience for everybody working on the source code, I was thinking that we could add Prettier to the project, we can use it to enforce the same code pattern across all files.

Thoughts on Prettier?

Select component: overflowing items

Items shouldnt overflow - overflowing text should be truncated with ellipsis

Storybook build output folder

https://github.com/arturbien/React95/blob/eb6b8f98bb36da6b3733c5c128dac8f9112cc297/package.json#L27

Are you sure that you want to build your storybook into docs folder and keep it in git repo?

Snackbar component

Make a Snackbar component (just like material-ui Snackbar ) which looks like the popup below but with some kind of close button:

Allow "100%" width prop in Progress component

Right now <Progress /> component only accepts number as a width prop (which is then converted to px). Width specified in percent should also be allowed. Progress component should be of 100% width by default.

Cannot pass ref to TextField

Cannot pass ref to <TextField />. Using React.forwardRef() doesn't work either. (Warning shows in console: Function components cannot be given refs).

Same thing most probably happens in all other input components

Reproduction of the bug: https://codesandbox.io/s/serene-dan-qx1cj

Add "menu" variant of Checkbox and Radio

ESLint configuration

That'd be good to have ESLint configured for the project, so we can have a pattern for the codebase and help more new contributors.

Any thoughts on famous JavaScript/React style guides to be followed? (like Airbnb or Standard)

Missing 2px margin right on WindowContent

WindowHeader has a 2px right margin and for consistency it seems like WindowContent should have the same right margin. It looks a bit funny without. (I'm negating padding for my use case since the original player doesn't have any padding).

Without the 2px content margin:

With the 2px content margin added:

Create a theme generator

Create a theme generator (something like this) so that developers will be able to tweak couple of inputs and then generate js file containing theme object

Create Stepper component

Create Stepper component

Wrong text color in disabled input fields on iOS

On iOS disabled input fields (TextArea, TextField, NumberField) have wrong text styling:

It should look like this:

Adding -webkit-text-fill-color CSS property in disabled component should fix this

Make UI kit for Adobe XD

That would make it a lot easier for people to design UI prototypes of their apps 😊

Add primary variant to <Button />

Primary button is just like the default one, but more pronounced with dark border all around it (just like this OK button):

TextArea function "onChange" not triggered

The onChange function is not working with TextArea component. Changing to a normal input or Reac95 TextField component as ABA Testing works fine.

Code below:

import React, { useState } from "react";
import { TextArea, Button } from "react95";
import { newMessage } from "../state/action";
import styled from "styled-components";

const ButtonBar = styled.div`
  margin: 10px 0;
`;

function PublishMessage(props) {
  const { dispatch } = props;
  const [text, setText] = useState("");

  const updateText = event => {
    console.log(event.target.value); // **** ISSUE: Never Triggered ****
    setText(event.target.value);
  };

  const publishMessage = () => {
    dispatch(newMessage(text));
  };

  const handleKeyPress = event => {
    if (event.key === "Enter") {
      publishMessage();
    }
  };
  return (
    <div>
      <h3>got something to say? </h3>
      <div
        style={{
          padding: "5px 0",
          background: "#ced0cf"
        }}
      >
        <TextArea // ****changing this to "input" or "TextField" proof that component is ok ****
          value={text}
          onChange={updateText}
          placeholder="Type in here.."
          onKeyPress={handleKeyPress}
        />
        <ButtonBar>
          <Button onClick={publishMessage}>Publish it!</Button>
        </ButtonBar>
      </div>
    </div>
  );
}

export default PublishMessage;

Include React95 logo in the bundle

Include React95 logo in the bundle so users could use it (for example in Start button like shown here). It would be nice to make it as an SVG too

Testing

Can help with this if you lay out some bullet points of what you're looking for.

update to storybook v5

I would recommend to update the Storybook package to its version 5. I can help with that if you want.

Storybook themes and proptypes table not working anymore

After upgrading Storybook to v5.3 some features of Storybook stopped working:

• Proptypes are not displayed when component is wrapped in forwardRef.
• theme previews addon

Create flat variants of components

Add flat variants to some of the components. This may be useful for example when we would want to use checkboxes inside a Table cell or inside Select option

TextArea and TextInput seems not be controlled by "value" prop

After submitting the form and try to reset the value, the input field is not updated to an empty string.

When the Publish it! button is clicked the following function is called:

const publishMessage = () => {
    addMessage(text).then(() => {
      dispatch(newMessage(text))
      setText(' ') // this does not clear the input
    });
  };

The state is updated to empty string, however it does not update the text area to empty string, which remains with the old values.

The function is triggered by the following code:

  <div>
      <h3>got something to say? </h3>
      <div
        style={{
          padding: "5px 0",
          background: "#ced0cf"
        }}
      >
        <TextArea
          value={text}
          onChange={e => updateText(e)}
          placeholder="Type in here.."
          onKeyPress={handleKeyPress}
        />
        <ButtonBar>
          <Button onClick={publishMessage}>Publish it!</Button>
        </ButtonBar>
      </div>
    </div>

Using normal html input field it works.

Important question!

Where is clippy? :D

Create SelectBox component

SelectBox is basically a Select component, but instead of a dropdown, there is a scrollable box of specified height containing all possible options.

Create DigitDisplay component

Add Clippy (Clippit ) Office Assistant

Raised from #3

List z-index not working

As you can see in the image, the list items are under the window component. I've tried setting the zIndex of the window to 1 and the List to 2 but nothing worked. Is there a way to achieve this?

Also, is it possible to move the AppBar at the bottom of the page?

Thank you for this well made component.

Vertical divider would be nice

As seen here:

I implemented something based on the existing divider component here:

const React = require('react');
const propTypes = require('prop-types');
const { themes } = require('react95');

const style = {
  width: 0,
  borderRight: `2px solid ${themes.default.borderLightest}`,
  borderLeft: `2px solid ${themes.default.borderDark}`,
  margin: 0,
  alignSelf: 'stretch',
  marginTop: -4,
  marginBottom: -4
};

const VerticalDivider = () => {
  return <div style={style} />;
};

module.exports = VerticalDivider;

The negative top/bottom margins are to account for the padding in the Toolbar component.

This is what it looks like: