norma-library 0.4.8 → 0.5.0

package/src/stories/Paper.stories.tsx

@@ -1,53 +1,53 @@
-import React from "react";
-import { Paper } from "../components";
-import type { Meta, StoryObj } from "@storybook/react";
-
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import { ThemeProvider, styled } from "@mui/material/styles";
-import { themes } from "../helpers";
-
-const Item = styled(Paper)(({ theme }) => ({
-  ...theme.typography.body2,
-  textAlign: "center",
-  height: 60,
-  lineHeight: "60px",
-}));
-
-const meta = {
-  title: "Layout/Paper",
-  component: Paper,
-  parameters: {
-    // layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {},
-} satisfies Meta<typeof Paper>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const defaultArgs = {};
-
-export const PaperElevations = () => (
-  <Grid container spacing={2}>
-    <Grid item xs={12}>
-      <Box
-        sx={{
-          p: 2,
-          bgcolor: "background.default",
-          display: "grid",
-          gridTemplateColumns: { md: "1fr 1fr" },
-          gap: 2,
-        }}
-      >
-        {[0, 1, 2, 3, 4, 6, 8, 12, 16, 24].map((elevation) => (
-          <Item key={elevation} elevation={elevation}>
-            {`elevation=${elevation}`}
-          </Item>
-        ))}
-      </Box>
-    </Grid>
-  </Grid>
-);
+import React from 'react';
+import { Paper } from '../components';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+import { ThemeProvider, styled } from '@mui/material/styles';
+import { themes } from '../helpers';
+
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  textAlign: 'center',
+  height: 60,
+  lineHeight: '60px',
+}));
+
+const meta = {
+  title: 'Layout/Paper',
+  component: Paper,
+  parameters: {
+    // layout: "centered",
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Paper>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const defaultArgs = {};
+
+export const PaperElevations = () => (
+  <Grid container spacing={2}>
+    <Grid item xs={12}>
+      <Box
+        sx={{
+          p: 2,
+          bgcolor: 'background.default',
+          display: 'grid',
+          gridTemplateColumns: { md: '1fr 1fr' },
+          gap: 2,
+        }}
+      >
+        {[0, 1, 2, 3, 4, 6, 8, 12, 16, 24].map(elevation => (
+          <Item key={elevation} elevation={elevation}>
+            {`elevation=${elevation}`}
+          </Item>
+        ))}
+      </Box>
+    </Grid>
+  </Grid>
+);

package/src/stories/ProgressBar.stories.tsx

@@ -1,139 +1,95 @@
-import React from "react";
-
-import type { Meta, StoryObj } from "@storybook/react";
-import { ProgressBar } from "../components";
-import { ColorVariant, SizeVariant, TextFieldSizeVariant } from "../types";
-
-const colors: ColorVariant[] = [
-  "inherit",
-  "primary",
-  "secondary",
-  "success",
-  "error",
-  "info",
-  "warning",
-];
-
-const sizes: TextFieldSizeVariant[] = ["small", "medium"];
-
-const meta = {
-  title: "Display/ProgressBar",
-  component: ProgressBar,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {},
-} satisfies Meta<typeof ProgressBar>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const defaultArgs = {
-  disabled: false,
-};
-
-export const Playground: Story = {
-  args: {
-    label: "Progress",
-    total: 100,
-    color: "primary",
-    value: 10,
-  },
-};
-
-export const ProgressBarBasic = () => (
-  <div style={{ display: "flex", gap: "1rem", width: "320px" }}>
-    <div style={{ position: "relative", width: "100%" }}>
-      <ProgressBar value={40} total={100} color="primary" />
-    </div>
-  </div>
-);
-
-ProgressBarBasic.storyName = "ProgressBar Basic";
-
-export const ProgressBarTitle: Story = () => (
-  <div style={{ display: "flex", gap: "1rem", width: "320px" }}>
-    <div style={{ position: "relative", width: "100%" }}>
-      <ProgressBar value={10} label="Progress" total={100} />
-    </div>
-  </div>
-);
-
-ProgressBarTitle.storyName = "ProgressBar With Title";
-
-export const ProgressBarColors: Story = () => (
-  <>
-    <div
-      style={{ display: "flex", gap: "1rem", width: "480px", marginBottom: 30 }}
-    >
-      <>
-        <div style={{ position: "relative", flex: 1, width: "230px" }}>
-          <ProgressBar
-            value={18}
-            total={100}
-            color="inherit"
-            label="Progress Inherit"
-          />
-        </div>
-        <div style={{ position: "relative", flex: 1, width: "230px" }}>
-          <ProgressBar
-            value={77}
-            total={100}
-            color="secondary"
-            label="Progress secondary"
-          />
-        </div>
-      </>
-    </div>
-    <div
-      style={{ display: "flex", gap: "1rem", width: "480px", marginBottom: 30 }}
-    >
-      <>
-        <div style={{ position: "relative", flex: 1, width: "230px" }}>
-          <ProgressBar
-            value={22}
-            total={100}
-            color="error"
-            label="Progress error"
-          />
-        </div>
-        <div style={{ position: "relative", flex: 1, width: "230px" }}>
-          <ProgressBar
-            value={24}
-            total={100}
-            color="info"
-            label="Progress info"
-          />
-        </div>
-      </>
-    </div>
-    <div
-      style={{ display: "flex", gap: "1rem", width: "480px", marginBottom: 30 }}
-    >
-      <>
-        <div style={{ display: "flex", gap: "1rem", marginBottom: 15 }}>
-          <div style={{ position: "relative", flex: 1, width: "230px" }}>
-            <ProgressBar
-              value={45}
-              total={100}
-              color="success"
-              label="Progress success"
-            />
-          </div>
-          <div style={{ position: "relative", flex: 1, width: "230px" }}>
-            <ProgressBar
-              value={86}
-              total={100}
-              color="warning"
-              label="Progress warning"
-            />
-          </div>
-        </div>
-      </>
-    </div>
-  </>
-);
-
-ProgressBarColors.storyName = "ProgressBar Colors";
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProgressBar } from '../components';
+import { ColorVariant, SizeVariant, TextFieldSizeVariant } from '../types';
+
+const colors: ColorVariant[] = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
+
+const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
+
+const meta = {
+  title: 'Display/ProgressBar',
+  component: ProgressBar,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof ProgressBar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const defaultArgs = {
+  disabled: false,
+};
+
+export const Playground: Story = {
+  args: {
+    label: 'Progress',
+    total: 100,
+    color: 'primary',
+    value: 10,
+  },
+};
+
+export const ProgressBarBasic = () => (
+  <div style={{ display: 'flex', gap: '1rem', width: '320px' }}>
+    <div style={{ position: 'relative', width: '100%' }}>
+      <ProgressBar value={40} total={100} color="primary" />
+    </div>
+  </div>
+);
+
+ProgressBarBasic.storyName = 'ProgressBar Basic';
+
+export const ProgressBarTitle: Story = () => (
+  <div style={{ display: 'flex', gap: '1rem', width: '320px' }}>
+    <div style={{ position: 'relative', width: '100%' }}>
+      <ProgressBar value={10} label="Progress" total={100} />
+    </div>
+  </div>
+);
+
+ProgressBarTitle.storyName = 'ProgressBar With Title';
+
+export const ProgressBarColors: Story = () => (
+  <>
+    <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
+      <>
+        <div style={{ position: 'relative', flex: 1, width: '230px' }}>
+          <ProgressBar value={18} total={100} color="inherit" label="Progress Inherit" />
+        </div>
+        <div style={{ position: 'relative', flex: 1, width: '230px' }}>
+          <ProgressBar value={77} total={100} color="secondary" label="Progress secondary" />
+        </div>
+      </>
+    </div>
+    <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
+      <>
+        <div style={{ position: 'relative', flex: 1, width: '230px' }}>
+          <ProgressBar value={22} total={100} color="error" label="Progress error" />
+        </div>
+        <div style={{ position: 'relative', flex: 1, width: '230px' }}>
+          <ProgressBar value={24} total={100} color="info" label="Progress info" />
+        </div>
+      </>
+    </div>
+    <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
+      <>
+        <div style={{ display: 'flex', gap: '1rem', marginBottom: 15 }}>
+          <div style={{ position: 'relative', flex: 1, width: '230px' }}>
+            <ProgressBar value={45} total={100} color="success" label="Progress success" />
+          </div>
+          <div style={{ position: 'relative', flex: 1, width: '230px' }}>
+            <ProgressBar value={86} total={100} color="warning" label="Progress warning" />
+          </div>
+        </div>
+      </>
+    </div>
+  </>
+);
+
+ProgressBarColors.storyName = 'ProgressBar Colors';

package/src/stories/RadioGroup.stories.tsx

@@ -1,15 +1,15 @@
-import React from "react";
-import { RadioGroup } from "../components/RadioGroup";
-import type { Meta, StoryObj } from "@storybook/react";
-import { SizeVariant } from "../types";
+import React from 'react';
+import { RadioGroup } from '../components/RadioGroup';
+import type { Meta, StoryObj } from '@storybook/react';
+import { SizeVariant } from '../types';
 
 const meta = {
-  title: "Form/RadioGroup",
+  title: 'Form/RadioGroup',
   component: RadioGroup,
   parameters: {
-    layout: "centered",
+    layout: 'centered',
   },
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {},
 } satisfies Meta<typeof RadioGroup>;
 
@@ -22,42 +22,35 @@ const defaultArgs = {
 };
 
 const sizeOptions = [
-  { label: "Small", value: "S", size: "small" },
-  { label: "Medium", value: "M", size: "medium" },
-  { label: "Large", value: "L", size: "large" },
+  { label: 'Small', value: 'S', size: 'small' },
+  { label: 'Medium', value: 'M', size: 'medium' },
+  { label: 'Large', value: 'L', size: 'large' },
 ];
 
 const genderOptions = [
-  { label: "Male", value: "M" },
-  { label: "Female", value: "F" },
-  { label: "Other", value: "O" },
+  { label: 'Male', value: 'M' },
+  { label: 'Female', value: 'F' },
+  { label: 'Other', value: 'O' },
 ];
 
 export const Playground: Story = {
   args: {
-    color: "primary",
+    color: 'primary',
     options: genderOptions,
-    name: "gender",
-    label: "Gender",
-    checked: "F",
+    name: 'gender',
+    label: 'Gender',
+    checked: 'F',
   },
 };
 
 export const RadioboxVertical = () => {
   return (
     <>
-      <RadioGroup
-        name="gender"
-        options={genderOptions}
-        label="Gender"
-        color="primary"
-        checked="M"
-        id="gender"
-      />
+      <RadioGroup name="gender" options={genderOptions} label="Gender" color="primary" checked="M" id="gender" />
     </>
   );
 };
-RadioboxVertical.storyName = "RadioGroup Vertical";
+RadioboxVertical.storyName = 'RadioGroup Vertical';
 
 export const RadioHorizontal = () => {
   return (
@@ -74,7 +67,7 @@ export const RadioHorizontal = () => {
     </>
   );
 };
-RadioHorizontal.storyName = "RadioGroup Horizontal";
+RadioHorizontal.storyName = 'RadioGroup Horizontal';
 
 export const RadioSizes = () => {
   return (
@@ -91,4 +84,4 @@ export const RadioSizes = () => {
     </>
   );
 };
-RadioSizes.storyName = "RadioGroup Sizes";
+RadioSizes.storyName = 'RadioGroup Sizes';

package/src/stories/RangerSlider.stories.tsx

@@ -1,68 +1,58 @@
-import React from "react";
-
-import type { Meta, StoryObj } from "@storybook/react";
-import { RangerSlider } from "../components";
-import { ColorVariant, SizeVariant, TextFieldSizeVariant } from "../types";
-
-const colors: ColorVariant[] = [
-  "inherit",
-  "primary",
-  "secondary",
-  "success",
-  "error",
-  "info",
-  "warning",
-];
-
-const sizes: TextFieldSizeVariant[] = ["small", "medium"];
-
-const meta = {
-  title: "Display/RangerSlider",
-  component: RangerSlider,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {},
-} satisfies Meta<typeof RangerSlider>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  args: {
-    max: 90,
-    min: 10,
-    value: [20, 80],
-    color: "primary",
-  },
-};
-
-function valuetext(value: number) {
-  return `${value}°C`;
-}
-
-export const RangerSliderBasic = () => {
-  const [value, setValue] = React.useState<number[]>([20, 37]);
-
-  const handleChange = (event: Event, newValue: number | number[]) => {
-    setValue(newValue as number[]);
-  };
-
-  return (
-    <div
-      style={{ display: "flex", gap: "1rem", width: "480px", marginBottom: 30 }}
-    >
-      <RangerSlider
-        getAriaLabel={() => "Temperature range"}
-        value={value}
-        onChange={handleChange}
-        valueLabelDisplay="on"
-        getAriaValueText={valuetext}
-      />
-    </div>
-  );
-};
-
-RangerSliderBasic.storyName = "RangerSlider Basic";
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { RangerSlider } from '../components';
+import { ColorVariant, SizeVariant, TextFieldSizeVariant } from '../types';
+
+const colors: ColorVariant[] = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
+
+const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
+
+const meta = {
+  title: 'Display/RangerSlider',
+  component: RangerSlider,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof RangerSlider>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: {
+    max: 90,
+    min: 10,
+    value: [20, 80],
+    color: 'primary',
+  },
+};
+
+function valuetext(value: number) {
+  return `${value}°C`;
+}
+
+export const RangerSliderBasic = () => {
+  const [value, setValue] = React.useState<number[]>([20, 37]);
+
+  const handleChange = (event: Event, newValue: number | number[]) => {
+    setValue(newValue as number[]);
+  };
+
+  return (
+    <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
+      <RangerSlider
+        getAriaLabel={() => 'Temperature range'}
+        value={value}
+        onChange={handleChange}
+        valueLabelDisplay="on"
+        getAriaValueText={valuetext}
+      />
+    </div>
+  );
+};
+
+RangerSliderBasic.storyName = 'RangerSlider Basic';