feat: List revisited! (part 1/2)

React95 · Feb 14, 2024 · 64c21f3 · 64c21f3
1 parent 720351b
commit 64c21f3
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 124 deletions.
diff --git a/packages/core/.storybook/main.js b/packages/core/.storybook/main.js
@@ -6,6 +6,7 @@ import { ImageLoader } from 'esbuild-vanilla-image-loader';
 export default {
   // stories: [, '../stories/(?!all)*.stories.tsx'],
   stories: [
+    '../stories/list.stories.tsx',
     '../stories/taskbar.stories.tsx',
     '../stories/tooltip.stories.tsx',
     '../stories/radiobutton.stories.tsx',

diff --git a/packages/core/components/List/List.css.ts b/packages/core/components/List/List.css.ts
@@ -0,0 +1,52 @@
+import { style, globalStyle } from '@vanilla-extract/css';
+import { calc } from '@vanilla-extract/css-utils';
+import { contract } from '../ThemeProvider/themes/contract.css';
+
+import rightcaret from '../GlobalStyle/imgs/rightcaret.svg';
+
+export const listItem = style({
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  margin: contract.space[0],
+  paddingBlock: contract.space[2],
+  paddingInline: contract.space[6],
+  color: contract.colors.materialText,
+  selectors: {
+    '&:hover': {
+      backgroundColor: contract.colors.headerBackground,
+      color: contract.colors.materialTextInvert,
+    },
+  },
+});
+
+globalStyle(`${listItem} svg`, { marginRight: contract.space[10] });
+globalStyle(`${listItem} ul`, {
+  display: 'none',
+  position: 'absolute',
+  top: calc.negate(contract.space[2]),
+  left: '97%',
+  color: contract.colors.materialText,
+  zIndex: contract.zIndices.taskbar,
+});
+
+export const divider = style({
+  height: contract.space[1],
+  borderTopStyle: 'solid',
+  borderTopWidth: contract.space[1],
+  borderTopColor: contract.colors.borderDark,
+  borderBottomWidth: contract.space[1],
+  borderBottomStyle: 'solid',
+  borderBottomColor: contract.colors.borderLightest,
+  width: '98%',
+  marginLeft: contract.space[2],
+});
+
+export const list = style({
+  backgroundColor: contract.colors.material,
+  padding: contract.space[2],
+  border: 'none',
+  margin: 0,
+  listStyle: 'none',
+  boxShadow: contract.shadows.out,
+});
diff --git a/packages/core/components/List/List.tsx b/packages/core/components/List/List.tsx
@@ -1,44 +1,24 @@
-import styled, { th } from '@xstyled/styled-components';
-
 import ListItem from './ListItem';
-import Divider from './ListDivider';
-
-type ListProps = {
-  width?: number;
-};
-
-const StyledList = styled.ul<ListProps>`
-  background-color: material;
-  padding: 5 20 6;
-  border: none;
-
-  margin: 0;
-  padding: 2;
-  list-style: none;
+import { Divider } from './ListDivider';
+import { Frame, FrameProps } from '../Frame/Frame';
+import React from 'react';
+import { list } from './List.css';
+import cn from 'classnames';
 
-  box-shadow: inset 1px 1px 0px 1px ${th('colors.borderLightest')},
-    inset 0 0 0 1px ${th('colors.borderDark')},
-    1px 1px 0 1px ${th('colors.borderDarkest')};
+export type ListProps = Omit<FrameProps<'ul'>, 'as'>;
 
-  ${({ width }) => `
-    width: ${width}px;
-  `};
-`;
+const ListRenderer = React.forwardRef<HTMLUListElement, ListProps>(
+  (rest, ref) => (
+    <Frame {...rest} ref={ref} className={cn(list, rest.className)} as="ul" />
+  ),
+);
 
-export type IListProps = typeof StyledList & {
+export type IListProps = typeof ListRenderer & {
   Item: typeof ListItem;
   Divider: typeof Divider;
 };
 
-const List: IListProps = Object.assign(StyledList, {
+export const List: IListProps = Object.assign(ListRenderer, {
   Item: ListItem,
   Divider: Divider,
 });
-
-List.displayName = 'List';
-
-List.defaultProps = {
-  width: 200,
-};
-
-export default List;
diff --git a/packages/core/components/List/ListDivider.tsx b/packages/core/components/List/ListDivider.tsx
@@ -1,16 +1,19 @@
-import styled from '@xstyled/styled-components';
+import React from 'react';
+import { Frame, FrameProps } from '../Frame/Frame';
+import { divider } from './List.css';
+import cn from 'classnames';
 
-const Divider = styled.li`
-  height: 1px;
-  border-top: 1;
-  border-top-color: borderDark;
-  border-bottom: 1;
-  border-bottom-color: borderLightest;
+export type DividerProps = Omit<FrameProps<'li'>, 'as'>;
 
-  width: 98%;
-  margin-left: 2;
-`;
+export const Divider = React.forwardRef<HTMLLIElement, DividerProps>(
+  (rest, ref) => (
+    <Frame
+      {...rest}
+      ref={ref}
+      className={cn(divider, rest.className)}
+      as="li"
+    />
+  ),
+);
 
 Divider.displayName = 'List.Divider';
-
-export default Divider;
diff --git a/packages/core/components/List/ListItem.tsx b/packages/core/components/List/ListItem.tsx
@@ -1,83 +1,19 @@
 import React, { forwardRef } from 'react';
-import styled, { css } from '@xstyled/styled-components';
+import cn from 'classnames';
 
 import { IListProps } from './List';
 
-import rightcaret from '../GlobalStyle/imgs/rightcaret.svg';
+import { Frame, FrameProps } from '../Frame/Frame';
+import { listItem } from './List.css';
 
-type ItemProps = {
+type ItemProps = Omit<FrameProps<'li'>, 'as'> & {
   icon?: boolean;
   hasList: boolean;
 };
 
-const Item = styled.li<ItemProps>`
-  position: relative;
-
-  display: flex;
-  align-items: center;
-  margin: 0;
-  padding: 2 6;
-
-  color: materialText;
-
-  svg {
-    margin-right: 10;
-  }
-
-  &:hover {
-    background-color: headerBackground;
-    color: materialTextInvert;
-  }
-
-  ul {
-    display: none;
-    position: absolute;
-    top: -2px;
-    left: 97%;
-    color: materialText;
-    z-index: taskbar;
-
-    svg {
-      width: 16px;
-      height: 16px;
-      margin-right: 6;
-    }
-  }
-
-  ${({ icon }) => !icon && 'padding-left: 26px;'};
-
-  ${({ hasList }) =>
-    hasList &&
-    css`
-      &:after {
-        position: absolute;
-        width: 5px;
-        height: 8px;
-        right: 8px;
-
-        content: '';
-        background-color: materialText;
-        mask-image: url('${rightcaret}');
-        mask-position: center center;
-        mask-size: 5px 8px;
-        mask-repeat: no-repeat;
-
-        svg {
-          fill: materialTextInvert;
-        }
-      }
-
-      &:hover {
-        &:after {
-          background-color: materialTextInvert;
-        }
-
-        ul {
-          display: block;
-        }
-      }
-    `};
-`;
+const Item = React.forwardRef<HTMLLIElement, ItemProps>((rest, ref) => (
+  <Frame {...rest} ref={ref} className={cn(listItem, rest.className)} as="li" />
+));
 
 export type ListItemProps = {
   icon?: React.ReactElement;
@@ -95,7 +31,6 @@ const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
             React.isValidElement<IListProps>(child),
           ).some(child => child),
       )}
-      className="default"
     >
       {icon}
       {children}

diff --git a/packages/core/components/List/index.ts b/packages/core/components/List/index.ts
@@ -1,3 +1,3 @@
-import List from './List';
+import { List } from './List';
 
 export default List;
diff --git a/packages/core/components/Video/Video.tsx b/packages/core/components/Video/Video.tsx
@@ -2,12 +2,12 @@ import * as React from 'react';
 import styled, { css } from '@xstyled/styled-components';
 import { Mplayer113, User4 } from '@react95/icons';
 
-import Frame, { FrameProps } from '../Frame/Frame';
+import { Frame, FrameProps } from '../Frame/Frame';
 import Button from '../Button';
 import Range from '../Range';
 import TitleBar from '../TitleBar';
 import { Play, Pause, Stop, Fullscreen } from './buttons';
-import Divider from '../List/ListDivider';
+import { Divider } from '../List/ListDivider';
 
 const VideoTag = styled.video<{ visible: boolean }>`
   width: 100%;

diff --git a/packages/core/stories/list.stories.tsx b/packages/core/stories/list.stories.tsx
@@ -17,18 +17,18 @@ import {
   Settings,
   WindowsExplorer,
 } from '@react95/icons';
-import List from '../components/List';
+import { List, IListProps } from '../components/List/List';
 
 export default {
   title: 'List',
   component: List,
   subcomponents: { 'List.Item': List.Item, 'List.Divider': List.Divider },
   tags: ['autodocs'],
-} as Meta<typeof List>;
+} as Meta<IListProps>;
 
 export const WithIcons = {
   render: () => (
-    <List>
+    <List width={'200px'}>
       <List.Item icon={<FolderExe2 variant="32x32_4" />}>
         <List>
           <List.Item icon={<FolderExe variant="16x16_4" />}>
@@ -80,7 +80,7 @@ export const WithIcons = {
 
 export const Simple = {
   render: () => (
-    <List>
+    <List width={'200px'}>
       <List.Item>View</List.Item>
       <List.Divider />
       <List.Item>Customize this Folder...</List.Item>