mirror of
https://github.com/hanzoai/cd-ui.git
synced 2026-10-30 20:42:45 +00:00
Anton GilgurandGitHub
d1f1d4496b
* chore(storybook): update v1 syntax to use Storybook v6
- while the deps used Storybook v6, the configuration and stories themselves were still on a legacy v5 format
- v6 had backward compat for v5, but v7 does not, so this needs upgrading/migrating
- or well, v7 has some legacy mode for it that can be enabled with some config, but it is entirely gone in v8
- migrate `storiesOf` to CSF per https://storybook.js.org/docs/7/migration-guide#storiesof-to-csf
- then had to do a bunch of manual changes to get back mostly the same previous indentation (with some minor differences where there were mistakes or inconsistencies)
- tried to keep the diff as small as possible
- CSF is still valid through to latest v8
Signed-off-by: Anton Gilgur <[email protected]>
* chore(storybook): convert v1 config to use Storybook v6
- modified version of v2's config
Signed-off-by: Anton Gilgur <[email protected]>
* fixup config a bit -- take more from prev webpack config
- `ts-loader` is necessary to handle the `import type` syntax
- custom `tsconfig.json` doesn't seem necessary though
- use same SASS config
- plain CSS config not needed though bc PostCSS already runs by default
Signed-off-by: Anton Gilgur <[email protected]>
* rename to `.stories.tsx` and remove `index`
- the conventional format
- also had some problems finding stories without this change
Signed-off-by: Anton Gilgur <[email protected]>
* fix deprecation warning re: `storyName`
- per https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-annotations
- migrate `.story.name` -> `.storyName`
- not sure why the automigration didn't do this and instead used the deprecated name 😕
Signed-off-by: Anton Gilgur <[email protected]>
* also fix history deprecation warning
Signed-off-by: Anton Gilgur <[email protected]>
* attempt to load CSS properly but still fail
Signed-off-by: Anton Gilgur <[email protected]>
* improve perf with built in loader for TS
- remove `ts-loader` as not necessary
- plus some settings for Storybook's TS loader preset
Signed-off-by: Anton Gilgur <[email protected]>
* diff reduction
Signed-off-by: Anton Gilgur <[email protected]>
* more diff reduction
Signed-off-by: Anton Gilgur <[email protected]>
* more diff reduction
Signed-off-by: Anton Gilgur <[email protected]>
* attempt to reduce diff a bit more hackily
Signed-off-by: Anton Gilgur <[email protected]>
* one more diff reduction with one hackishness
Signed-off-by: Anton Gilgur <[email protected]>
* diff reduction with older wacky syntax
Signed-off-by: Anton Gilgur <[email protected]>
* slightly better syntax than previous while retaining indentation
Signed-off-by: Anton Gilgur <[email protected]>
* last diff reduction/indentation change
Signed-off-by: Anton Gilgur <[email protected]>
* missing trailing comma
Signed-off-by: Anton Gilgur <[email protected]>
---------
Signed-off-by: Anton Gilgur <[email protected]>
43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import * as React from 'react';
|
|
|
|
import { Select } from '../src/components/select/select';
|
|
|
|
export default {
|
|
title: 'Select',
|
|
};
|
|
|
|
export const Default = () => {
|
|
const [selected, setSelected] = React.useState('option1');
|
|
return (
|
|
<div>
|
|
<h4>
|
|
Selected option value: {selected}
|
|
<button className='argo-button argo-button--base' onClick={() => setSelected('option2')} >Select option 2</button>
|
|
</h4>
|
|
<Select
|
|
value={selected}
|
|
placeholder='Select something'
|
|
options={['option1', { value: 'option2', title: 'Option 2' }]}
|
|
onChange={(option) => setSelected(option.value)}
|
|
/>
|
|
</div>
|
|
)
|
|
};
|
|
Default.storyName = 'default';
|
|
|
|
export const MultiSelect = () => {
|
|
const [selected, setSelected] = React.useState(['option1']);
|
|
return (
|
|
<div>
|
|
<Select
|
|
value={selected}
|
|
multiSelect={true}
|
|
placeholder='Select something'
|
|
options={['option1', { value: 'option2', title: 'Option 2' }]}
|
|
onMultiChange={(options) => setSelected(options.map((item) => item.value))}
|
|
/>
|
|
</div>
|
|
)
|
|
};
|
|
MultiSelect.storyName = 'multi-select';
|