@charcoal-ui/icons 3.10.1-beta.1 → 3.11.0

package/dist/PixivIcon.story.d.ts

@@ -1,45 +1,8 @@
-import * as React from 'react';
-import { Props } from './PixivIcon';
-interface Story<P> {
-    (args: P): React.ReactNode;
-    args?: P;
-}
-declare const _default: {
-    title: string;
-    argTypes: {
-        color: {
-            control: {
-                type: string;
-            };
-        };
-        name: {
-            control: {
-                type: string;
-                options: string[];
-            };
-        };
-        scale: {
-            control: {
-                type: string;
-                options: number[];
-            };
-        };
-    };
-    parameters: {
-        storyshots: {
-            disable: boolean;
-        };
-    };
-};
+import { Props } from '.';
+import type { StoryObj } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-bf5e6555").R, Props>;
 export default _default;
-export declare const Default: Story<{
-    scale: NonNullable<Props['scale']>;
-    color: string;
-}>;
-export declare const WithAttributes: Story<Props & {
-    color: string;
-}>;
-export declare const WithUnsafe: Story<Props & {
-    color: string;
-}>;
+export declare const Default: StoryObj<Props>;
+export declare const WithAttributes: StoryObj<Props>;
+export declare const WithUnsafe: StoryObj<Props>;
 //# sourceMappingURL=PixivIcon.story.d.ts.map

package/dist/PixivIcon.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PixivIcon.story.d.ts","sourceRoot":"","sources":["../src/PixivIcon.story.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAInC,UAAU,KAAK,CAAC,CAAC;IACf,CAAC,IAAI,EAAE,CAAC,GAAG,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,CAAC,CAAA;CACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOD,wBA2BC;AA0FD,eAAO,MAAM,OAAO;WAvBX,YAAY,KAAK,CAAC,OAAO,CAAC,CAAC;WAC3B,MAAM;EAsB6B,CAAA;AAI5C,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,KAAK,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAY3D,CAAA;AAID,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,KAAK,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAYvD,CAAA"}
+{"version":3,"file":"PixivIcon.story.d.ts","sourceRoot":"","sources":["../src/PixivIcon.story.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,EAAE,MAAM,GAAG,CAAA;AAEpC,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;;AAOtD,wBA8CgB;AAkEhB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,KAAK,CAEnC,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,KAAK,CAe1C,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,KAAK,CAqBtC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/icons",
-  "version": "3.10.1-beta.1",
+  "version": "3.11.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -20,6 +20,7 @@
     "clean": "rimraf dist .tsbuildinfo"
   },
   "devDependencies": {
+    "@storybook/react": "^8.0.5",
     "@types/dompurify": "^2.3.3",
     "@types/jest": "^27.4.0",
     "@types/react": "^17.0.38",
@@ -32,7 +33,7 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/icon-files": "^3.10.1-beta.1",
+    "@charcoal-ui/icon-files": "^3.11.0",
     "dompurify": "^2.3.6",
     "warning": "^4.0.3"
   },
@@ -49,5 +50,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/icons"
   },
-  "gitHead": "f36f447ec52c5dc78bea2a40bd9b7bf7751d9849"
+  "gitHead": "503ef7c22e3eb46b39b8ddd93e8389025afdd411"
 }

package/src/PixivIcon.story.tsx

@@ -1,16 +1,10 @@
 /// <reference types='@types/webpack-env' />
 
-import * as React from 'react'
 import styled, { createGlobalStyle } from 'styled-components'
 import TestIconThatNeverExists from './16/TestIconThatNeverExists.svg'
-import { Props } from './PixivIcon'
-import { PixivIcon } from '.'
+import { PixivIcon, Props } from '.'
 import { KnownIconFile, KNOWN_ICON_FILES } from './charcoalIconFiles'
-
-interface Story<P> {
-  (args: P): React.ReactNode
-  args?: P
-}
+import type { Meta, StoryObj } from '@storybook/react'
 
 PixivIcon.extend({
   // かぶらなそうな名前をつける
@@ -38,13 +32,32 @@ export default {
       },
     },
   },
-
   parameters: {
     storyshots: {
       disable: true,
     },
   },
-}
+  render: ({ scale, color }) => (
+    <>
+      {Object.entries(groupedIcons).map(([groupName, icons]) => (
+        <Group key={groupName}>
+          <Heading>
+            {groupName} (scale: {scale})
+          </Heading>
+          <Grid>
+            {icons.map((name) => (
+              <IconDef color={color} key={name}>
+                <pixiv-icon key={scale} name={name} scale={scale} />
+                <div>{name}</div>
+              </IconDef>
+            ))}
+          </Grid>
+        </Group>
+      ))}
+      <Global />
+    </>
+  ),
+} as Meta<Props>
 
 const groupedIcons = KNOWN_ICON_FILES.reduce<Record<string, KnownIconFile[]>>(
   (map, icon) => {
@@ -84,8 +97,8 @@ const Group = styled.div`
   }
 `
 
-const IconDef = styled.div<{ color: string }>`
-  color: ${({ color }) => color};
+const IconDef = styled.div<{ color?: string }>`
+  color: ${({ color }) => color ?? '#000000'};
   display: inline-flex;
   align-items: center;
   min-height: 32px;
@@ -110,62 +123,46 @@ const Heading = styled.h2`
   margin: 16px 0;
 `
 
-const DefaultStory: Story<{
-  scale: NonNullable<Props['scale']>
-  color: string
-}> = ({ scale, color }) => (
-  <>
-    {Object.entries(groupedIcons).map(([groupName, icons]) => (
-      <Group key={groupName}>
-        <Heading>
-          {groupName} (scale: {scale})
-        </Heading>
-        <Grid>
-          {icons.map((name) => (
-            <IconDef color={color} key={name}>
-              <pixiv-icon key={scale} name={name} scale={scale} />
-              <div>{name}</div>
-            </IconDef>
-          ))}
-        </Grid>
-      </Group>
-    ))}
-    <Global />
-  </>
-)
-
-export const Default = DefaultStory.bind({})
-
-Default.args = { scale: 1, color: '#000000' }
-
-export const WithAttributes: Story<Props & { color: string }> = ({
-  name,
-  scale,
-  color,
-}) => (
-  <>
-    <IconDef color={color}>
-      <pixiv-icon class="icon-class" name={name} scale={scale} />
-      <div>アイコンと文字</div>
-    </IconDef>
-    <Global />
-  </>
-)
+export const Default: StoryObj<Props> = {
+  args: { scale: 1, color: '#000000' },
+}
 
-WithAttributes.args = { name: '16/Add', scale: 1, color: '#000000' }
-
-export const WithUnsafe: Story<Props & { color: string }> = ({
-  name,
-  scale,
-  color,
-}) => (
-  <>
-    <IconDef color={color}>
-      <pixiv-icon unsafe-non-guideline-scale="3.75" name={name} scale={scale} />
-      アイコンと文字
-    </IconDef>
-    <Global />
-  </>
-)
+export const WithAttributes: StoryObj<Props> = {
+  render: ({ color, name, scale }) => (
+    <div>
+      <IconDef color={color}>
+        <pixiv-icon class="icon-class" name={name} scale={scale} />
+        <div>アイコンと文字</div>
+      </IconDef>
+      <Global />
+    </div>
+  ),
+  args: {
+    name: '16/Add',
+    scale: 1,
+    color: '#000000',
+  },
+}
 
-WithUnsafe.args = { name: '16/Add', scale: 1, color: '#000000' }
+export const WithUnsafe: StoryObj<Props> = {
+  render: ({ color, name, scale, ...args }) => {
+    return (
+      <>
+        <IconDef color={color}>
+          <pixiv-icon
+            unsafe-non-guideline-scale={args['unsafe-non-guideline-scale']}
+            name={name}
+            scale={scale}
+          />
+          アイコンと文字
+        </IconDef>
+        <Global />
+      </>
+    )
+  },
+  args: {
+    name: '16/Add',
+    'unsafe-non-guideline-scale': '3.75',
+    color: '#000000',
+  },
+}