feat(core): Cursos revisited

Each cursor has now its own class! 🎉
React95 · Jan 21, 2024 · 18732a8 · 18732a8
1 parent 72e9397
commit 18732a8
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 45 deletions.
diff --git a/packages/core/.storybook/main.js b/packages/core/.storybook/main.js
@@ -5,7 +5,7 @@ import { ImageLoader } from 'esbuild-vanilla-image-loader';
 
 export default {
   // stories: [, '../stories/(?!all)*.stories.tsx'],
-  stories: ['../stories/button.stories.tsx'],
+  stories: ['../stories/button.stories.tsx', '../stories/cursor.stories.tsx'],
   // stories: [
   //   '../stories/all.stories.tsx',
   //   ...readdirSync('./stories')

diff --git a/packages/core/components/Cursor/Cursor.css.tsx b/packages/core/components/Cursor/Cursor.css.tsx
@@ -0,0 +1,131 @@
+import NwseResize from './cursors/AngleUpLeft.png';
+import NeswResize from './cursors/AngleUpRight.png';
+import Progress from './cursors/AppStarting.png';
+import Auto from './cursors/Arrow.png';
+import NoDrop from './cursors/Circle.png';
+import ColResize from './cursors/ColRezise.png';
+import Copy from './cursors/Copy.png';
+import Crosshair from './cursors/Cross.png';
+import SResize from './cursors/DownArrow.png';
+import SwResize from './cursors/DownLeftArrow.png';
+import SeResize from './cursors/DownRightArrow.png';
+import Grab from './cursors/Hand.png';
+import Pointer from './cursors/HandPointer.png';
+import Grabbing from './cursors/Handsqueezed.png';
+import Help from './cursors/Help.png';
+import WResize from './cursors/LeftArrow.png';
+import EwResize from './cursors/LeftRight.png';
+import Alias from './cursors/Link.png';
+import Move from './cursors/Move.png';
+import NotAllowed from './cursors/NO.png';
+import EResize from './cursors/RightArrow.png';
+import RowResize from './cursors/RowResize.png';
+import Text from './cursors/Text.png';
+import NResize from './cursors/UpArrow.png';
+import NsResize from './cursors/UpDownArrow.png';
+import NwResize from './cursors/UpLeftArrow.png';
+import NeResize from './cursors/UpRightArrow.png';
+import VerticalText from './cursors/VText.png';
+import Wait from './cursors/Wait.png';
+import ZoomIn from './cursors/ZoomIn.png';
+import ZoomOut from './cursors/ZoomOut.png';
+import { styleVariants } from '@vanilla-extract/css';
+
+export const Cursor = styleVariants({
+  Auto: {
+    cursor: `url(${Auto}), auto`,
+  },
+  Text: {
+    cursor: `url(${Text}), text`,
+  },
+  VerticalText: {
+    cursor: `url(${VerticalText}), vertical-text`,
+  },
+  Help: {
+    cursor: `url(${Help}), help`,
+  },
+  Crosshair: {
+    cursor: `url(${Crosshair}), crosshair`,
+  },
+  Pointer: {
+    cursor: `url(${Pointer}), pointer`,
+  },
+  Progress: {
+    cursor: `url(${Progress}), progress`,
+  },
+  Wait: {
+    cursor: `url(${Wait}), wait`,
+  },
+  Alias: {
+    cursor: `url(${Alias}), alias`,
+  },
+  Copy: {
+    cursor: `url(${Copy}), copy`,
+  },
+  Move: {
+    cursor: `url(${Move}), move`,
+  },
+  None: {
+    cursor: `none`,
+  },
+  NoDrop: {
+    cursor: `url(${NoDrop}), no-drop`,
+  },
+  NotAllowed: {
+    cursor: `url(${NotAllowed}), not-allowed`,
+  },
+  Grab: {
+    cursor: `url(${Grab}), grab`,
+  },
+  Grabbing: {
+    cursor: `url(${Grabbing}), grabbing`,
+  },
+  ColResize: {
+    cursor: `url(${ColResize}), col-resize`,
+  },
+  RowResize: {
+    cursor: `url(${RowResize}), row-resize`,
+  },
+  NResize: {
+    cursor: `url(${NResize}), n-resize`,
+  },
+  EResize: {
+    cursor: `url(${EResize}), e-resize`,
+  },
+  SResize: {
+    cursor: `url(${SResize}), s-resize`,
+  },
+  WResize: {
+    cursor: `url(${WResize}), w-resize`,
+  },
+  NsResize: {
+    cursor: `url(${NsResize}), ns-resize`,
+  },
+  EwResize: {
+    cursor: `url(${EwResize}), ew-resize`,
+  },
+  NeResize: {
+    cursor: `url(${NeResize}), ne-resize`,
+  },
+  NwResize: {
+    cursor: `url(${NwResize}), nw-resize`,
+  },
+  SeResize: {
+    cursor: `url(${SeResize}), se-resize`,
+  },
+  SwResize: {
+    cursor: `url(${SwResize}), sw-resize`,
+  },
+  NeswResize: {
+    cursor: `url(${NeswResize}), nesw-resize`,
+  },
+  NwseResize: {
+    cursor: `url(${NwseResize}), nwse-resize`,
+  },
+  ZoomIn: {
+    cursor: `url(${ZoomIn}), zoom-in`,
+  },
+  ZoomOut: {
+    cursor: `url(${ZoomOut}), zoom-out`,
+  },
+});
diff --git a/packages/core/components/GlobalStyle/GlobalStyle.css.ts b/packages/core/components/GlobalStyle/GlobalStyle.css.ts
@@ -1,7 +1,6 @@
 import { globalStyle, globalFontFace } from '@vanilla-extract/css';
 import { contract } from '../ThemeProvider/themes/contract.css';
 
-import Cursor from '../Cursor/Cursor';
 import { scrollbars } from './Scrollbar';
 
 import ttf from './font/MS-Sans-Serif-8pt.ttf';
@@ -67,38 +66,5 @@ globalStyle('a:visited', {
 `
   // scrollbar
   ${scrollbars}
-
-  .default             { ${Cursor.Auto} }
-  .none                { ${Cursor.None} }
-  .help                { ${Cursor.Help} }
-  .pointer, :any-link  { ${Cursor.Pointer} }
-  .progress            { ${Cursor.Progress} }
-  .wait                { ${Cursor.Wait} }
-  .crosshair           { ${Cursor.Crosshair} }
-  .text                { ${Cursor.Text} }
-  .vertical-text       { ${Cursor.VerticalText} }
-  .alias               { ${Cursor.Alias} }
-  .copy                { ${Cursor.Copy} }
-  .move                { ${Cursor.Move} }
-  .no-drop             { ${Cursor.NoDrop} }
-  .not-allowed         { ${Cursor.NotAllowed} }
-  .grab                { ${Cursor.Grab} }
-  .grabbing            { ${Cursor.Grabbing} }
-  .col-resize          { ${Cursor.ColResize} }
-  .row-resize          { ${Cursor.RowResize} }
-  .n-resize            { ${Cursor.NResize} }
-  .e-resize            { ${Cursor.EResize} }
-  .s-resize            { ${Cursor.SResize} }
-  .w-resize            { ${Cursor.WResize} }
-  .ns-resize           { ${Cursor.NsResize} }
-  .ew-resize           { ${Cursor.EwResize} }
-  .ne-resize           { ${Cursor.NeResize} }
-  .nw-resize           { ${Cursor.NwResize} }
-  .se-resize           { ${Cursor.SeResize} }
-  .sw-resize           { ${Cursor.SwResize} }
-  .nesw-resize         { ${Cursor.NeswResize} }
-  .nwse-resize         { ${Cursor.NwseResize} }
-  .zoom-in             { ${Cursor.ZoomIn} }
-  .zoom-out            { ${Cursor.ZoomOut} }
 `;
 */
diff --git a/packages/core/stories/cursor.stories.tsx b/packages/core/stories/cursor.stories.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import { Frame } from '../components';
-import Cursor from '../components/Cursor/Cursor';
+import { Cursor } from '../components/Cursor/Cursor.css';
 
 const Cursors = styled.ul`
   margin: 0;
@@ -15,10 +15,6 @@ const Cursors = styled.ul`
   list-style: none;
 `;
 
-const CursorItem = styled(Frame)<{ type: keyof typeof Cursor }>`
-  ${({ type }) => Cursor[type]};
-`;
-
 export default {
   title: 'Cursors',
   component: Cursors,
@@ -27,8 +23,10 @@ export default {
 export const Simple = {
   render: () => (
     <Cursors>
-      {Object.keys(Cursor).map((type: keyof typeof Cursor) => (
-        <CursorItem
+      {Object.entries(Cursor).map(([type, className]) => (
+        <Frame
+          className={className}
+          key={type}
           display="flex"
           as="li"
           justifyContent="center"
@@ -41,11 +39,9 @@ export const Simple = {
           pr={20}
           pb={6}
           pl={20}
-          key={type}
-          type={type}
         >
           {type}
-        </CursorItem>
+        </Frame>
       ))}
     </Cursors>
   ),