refactor: Rename components and group them on Storybook

README.md

@@ -42,7 +42,7 @@ Apply style reset, wrap your app with ThemeProvider with theme of your choice...
 import React from 'react';
 import { createGlobalStyle, ThemeProvider } from 'styled-components';
 
-import { Divider, List, ListItem, styleReset } from 'react95';
+import { MenuList, MenuListItem, Separator, styleReset } from 'react95';
 // pick a theme of your choice
 import original from 'react95/dist/themes/original';
 // original Windows95 font (optionally)
@@ -72,12 +72,12 @@ const App = () => (
   <div>
     <GlobalStyles />
     <ThemeProvider theme={original}>
-      <List>
-        <ListItem>🎤 Sing</ListItem>
-        <ListItem>💃🏻 Dance</ListItem>
-        <Divider />
-        <ListItem disabled>😴 Sleep</ListItem>
-      </List>
+      <MenuList>
+        <MenuListItem>🎤 Sing</MenuListItem>
+        <MenuListItem>💃🏻 Dance</MenuListItem>
+        <Separator />
+        <MenuListItem disabled>😴 Sleep</MenuListItem>
+      </MenuList>
     </ThemeProvider>
   </div>
 );

docs/Getting-Started.stories.mdx

@@ -29,7 +29,7 @@ choice... and you are ready to go! 🚀
 
 ```jsx
 import React from 'react';
-import { Divider, List, ListItem, styleReset } from 'react95';
+import { MenuList, MenuListItem, Separator, styleReset } from 'react95';
 import { createGlobalStyle, ThemeProvider } from 'styled-components';
 
 /* Pick a theme of your choice */
@@ -62,12 +62,12 @@ const App = () => (
   <div>
     <GlobalStyles />
     <ThemeProvider theme={original}>
-      <List>
-        <ListItem>🎤 Sing</ListItem>
-        <ListItem>💃🏻 Dance</ListItem>
-        <Divider />
-        <ListItem disabled>😴 Sleep</ListItem>
-      </List>
+      <MenuList>
+        <MenuListItem>🎤 Sing</MenuListItem>
+        <MenuListItem>💃🏻 Dance</MenuListItem>
+        <Separator />
+        <MenuListItem disabled>😴 Sleep</MenuListItem>
+      </MenuList>
     </ThemeProvider>
   </div>
 );

src/Anchor/Anchor.stories.tsx

@@ -1,26 +1,24 @@
 import { ComponentMeta } from '@storybook/react';
 import React from 'react';
+import { Anchor } from 'react95';
 import styled from 'styled-components';
 
-import { Anchor } from './Anchor';
-
 const Wrapper = styled.div`
   padding: 5rem;
   background: ${({ theme }) => theme.material};
 `;
 
 export default {
-  title: 'Anchor',
+  title: 'Typography/Anchor',
   component: Anchor,
   decorators: [story => <Wrapper>{story()}</Wrapper>]
 } as ComponentMeta<typeof Anchor>;
 
 export function Default() {
   return (
     <h1>
-      Everybody likes
+      Everybody likes{' '}
       <Anchor href='https://expensive.toys' target='_blank'>
-        {' '}
         https://expensive.toys
       </Anchor>
     </h1>

src/Anchor/Anchor.tsx

@@ -3,7 +3,12 @@ import styled from 'styled-components';
 
 import { CommonStyledProps } from '../types';
 
-const StyledAnchor = styled.a`
+type AnchorProps = {
+  children: React.ReactNode;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement> &
+  CommonStyledProps;
+
+const StyledAnchor = styled.a<{ underline: boolean }>`
   color: ${({ theme }) => theme.anchor};
   font-size: inherit;
   text-decoration: underline;
@@ -12,20 +17,16 @@ const StyledAnchor = styled.a`
   }
 `;
 
-type AnchorProps = {
-  children: React.ReactNode;
-} & React.AnchorHTMLAttributes<HTMLAnchorElement> &
-  CommonStyledProps;
+const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(
+  ({ children, ...otherProps }: AnchorProps, ref) => {
+    return (
+      <StyledAnchor ref={ref} {...otherProps}>
+        {children}
+      </StyledAnchor>
+    );
+  }
+);
 
-const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(function Anchor(
-  { children, ...otherProps }: AnchorProps,
-  ref
-) {
-  return (
-    <StyledAnchor ref={ref} {...otherProps}>
-      {children}
-    </StyledAnchor>
-  );
-});
+Anchor.displayName = 'Anchor';
 
 export { Anchor, AnchorProps };

src/AppBar/AppBar.stories.tsx

@@ -3,10 +3,10 @@ import React, { useState } from 'react';
 import {
   AppBar,
   Button,
-  Divider,
-  List,
-  ListItem,
-  TextField,
+  MenuList,
+  MenuListItem,
+  Separator,
+  TextInput,
   Toolbar
 } from 'react95';
 import styled from 'styled-components';
@@ -18,7 +18,7 @@ const Wrapper = styled.div`
 `;
 
 export default {
-  title: 'AppBar',
+  title: 'Environment/AppBar',
   component: AppBar,
   decorators: [story => <Wrapper>{story()}</Wrapper>]
 } as ComponentMeta<typeof AppBar>;
@@ -43,38 +43,38 @@ export function Default() {
             Start
           </Button>
           {open && (
-            <List
+            <MenuList
               style={{
                 position: 'absolute',
                 left: '0',
                 top: '100%'
               }}
               onClick={() => setOpen(false)}
             >
-              <ListItem>
+              <MenuListItem>
                 <span role='img' aria-label='👨‍💻'>
                   👨‍💻
                 </span>
                 Profile
-              </ListItem>
-              <ListItem>
+              </MenuListItem>
+              <MenuListItem>
                 <span role='img' aria-label='📁'>
                   📁
                 </span>
                 My account
-              </ListItem>
-              <Divider />
-              <ListItem disabled>
+              </MenuListItem>
+              <Separator />
+              <MenuListItem disabled>
                 <span role='img' aria-label='🔙'>
                   🔙
                 </span>
                 Logout
-              </ListItem>
-            </List>
+              </MenuListItem>
+            </MenuList>
           )}
         </div>
 
-        <TextField placeholder='Search...' width={150} />
+        <TextInput placeholder='Search...' width={150} />
       </Toolbar>
     </AppBar>
   );

src/AppBar/AppBar.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
-import { CommonStyledProps } from '../types';
+
 import { createBorderStyles, createBoxStyles } from '../common';
+import { CommonStyledProps } from '../types';
 
 type AppBarProps = {
   children: React.ReactNode;
@@ -22,15 +23,16 @@ const StyledAppBar = styled.header<AppBarProps>`
   width: 100%;
 `;
 
-const AppBar = forwardRef<HTMLElement, AppBarProps>(function AppBar(
-  { children, fixed = true, ...otherProps },
-  ref
-) {
-  return (
-    <StyledAppBar fixed={fixed} ref={ref} {...otherProps}>
-      {children}
-    </StyledAppBar>
-  );
-});
+const AppBar = forwardRef<HTMLElement, AppBarProps>(
+  ({ children, fixed = true, ...otherProps }, ref) => {
+    return (
+      <StyledAppBar fixed={fixed} ref={ref} {...otherProps}>
+        {children}
+      </StyledAppBar>
+    );
+  }
+);
+
+AppBar.displayName = 'AppBar';
 
 export { AppBar, AppBarProps };